/* 2026-10-08 blogtable (그록 봇): 블로그형 글 본문(.blog-content) 표 · Prompt 복사 버튼 · 모바일 카드
   대상: /blog /career /lifelong /studyabroad /ai-insight /cashnote 글 (templates_blog/_layout.html 에서 불러옴)
   짝: /page/js/cd_blogprose.js (표 머리글/라벨/번호칸/Prompt 복사 버튼을 붙임). JS 가 없어도 표는 기본 스타일로 보임. */
.blog-content table{width:100%;border-collapse:collapse;margin:1.2em 0 1.6em;font-size:15px;line-height:1.6;border:1px solid #e5e9f2;background:#fff}
.blog-content th,.blog-content td{padding:11px 14px;border-bottom:1px solid #eef1f6;text-align:left;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere;color:#333}
.blog-content th{background:var(--sec-soft,#eef1fd);color:#1e293b;font-weight:700;font-size:14px;line-height:1.45;border-bottom:1px solid #dfe5f3}
.blog-content th + th,.blog-content td + td{border-left:1px solid #eef1f6}
.blog-content tbody tr:nth-child(even) td{background:#fafbfe}
.blog-content tbody tr:last-child td{border-bottom:0}
.blog-content td p,.blog-content th p{margin:0}
.blog-content td p + p{margin-top:.4em}

.blog-content .cd-tbl-wrap{margin:1.2em 0 1.6em;border:1px solid #e5e9f2;border-radius:12px;overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff}
.blog-content .cd-tbl-wrap > table{margin:0;border:0}
.blog-content .cd-tbl-wrap th{white-space:nowrap}
.blog-content .cd-tbl-n{width:52px;text-align:center !important;white-space:nowrap}
.blog-content td.cd-tbl-n{color:var(--blog-accent,#4f6bed);font-weight:800}
.blog-content .is-prompt .cd-tbl-w{width:24%;color:#475569;font-size:14px}
.blog-content .cd-pcell{display:flex;gap:10px;align-items:flex-start}
.blog-content .cd-pcell__t{flex:1;min-width:0}

/* 복사 버튼 (표의 Prompt 칸 · pre 코드 블록 공용) */
.blog-content .cd-copy{flex:none;appearance:none;-webkit-appearance:none;border:1px solid #c7d2fe;background:#fff;color:var(--blog-accent,#4f6bed);font-family:inherit;font-weight:700;font-size:12.5px;line-height:1.2;padding:5px 9px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.blog-content .cd-copy:hover{background:var(--sec-soft,#eef2ff)}
.blog-content .cd-copy:focus-visible{outline:2px solid var(--blog-accent,#4f6bed);outline-offset:2px}
.blog-content .cd-copy.is-copied{background:var(--blog-accent,#4f6bed);color:#fff;border-color:var(--blog-accent,#4f6bed)}
.blog-content .cd-pre{position:relative;margin:1.4em 0}
.blog-content .cd-pre > pre{margin:0;padding-top:40px}
.blog-content .cd-pre > .cd-copy{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.95)}

/* 모바일: 3칸 이상 표는 줄마다 카드로 (머리글은 각 칸 라벨로) */
@media (max-width:640px){
  .blog-content table{font-size:14.5px}
  .blog-content th,.blog-content td{padding:9px 10px}
  .blog-content .cd-tbl-wrap.is-stack{border:0;border-radius:0;background:none;overflow:visible}
  .blog-content .is-stack table,.blog-content .is-stack tbody,.blog-content .is-stack tr,.blog-content .is-stack td{display:block;width:auto !important}
  .blog-content .is-stack table{background:none}
  .blog-content .is-stack thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .blog-content .is-stack tr{position:relative;margin:0 0 10px;padding:12px 14px;border:1px solid #e5e9f2;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.04)}
  .blog-content .is-stack tbody tr:nth-child(even) td{background:none}
  .blog-content .is-stack td{padding:3px 0;border:0 !important;text-align:left !important;font-size:15px;line-height:1.6}
  .blog-content .is-stack td[data-label]::before{content:attr(data-label);display:block;margin:0 0 1px;font-size:12px;font-weight:700;color:#64748b;letter-spacing:-.01em}
  .blog-content .is-stack td.cd-tbl-h{font-weight:700;color:#1e293b;padding-bottom:5px}
  .blog-content .is-stack td.cd-tbl-h::before,.blog-content .is-stack td.cd-tbl-n::before,.blog-content .is-stack td.cd-tbl-p::before{content:none}
  .blog-content .is-stack td.cd-tbl-n{display:inline-flex;align-items:center;justify-content:center;width:26px !important;height:26px;margin:0 0 8px;padding:0;border-radius:50%;background:var(--sec-soft,#eef2ff);font-size:13px;line-height:1}
  .blog-content .is-stack td.cd-tbl-w{margin-top:6px;font-size:13.5px;color:#475569}
  .blog-content .is-stack td.cd-tbl-w::before{display:inline-block;margin:0 6px 0 0;padding:1px 8px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11.5px;vertical-align:1px}
  .blog-content .cd-copy{padding:6px 10px}
  /* 빵부스러기: '블로그' 같은 섹션 이름이 세로로 쪼개지지 않게 */
  .blog-crumb a{white-space:nowrap;flex:none}
  .blog-crumb span:last-child{min-width:0}
}