/* 인사이트 블로그 상세(/blog/{slug}) 고유 스타일 — base.css 다음에 로드된다. */
/* ---------- 아티클 히어로 ---------- */
.ahero{position:relative;background:var(--bg-mint);padding:120px 0 88px;overflow:hidden}
.ahero-deco-a{position:absolute;right:-40px;top:64px;width:517px;pointer-events:none}
.ahero-deco-b{position:absolute;left:190px;top:24px;width:259px;pointer-events:none}
.ahero-deco-c{position:absolute;left:140px;top:160px;width:180px;height:180px;border-radius:50%;background:#51ba61;opacity:.04;pointer-events:none}
.ahero-in{position:relative}
.ahero-meta{display:flex;align-items:center;gap:16px}
.ahero-meta .date{font-size:16px;color:var(--muted-2)}
.ahero h1{margin-top:8px;font-size:clamp(28px,5.4vw,48px);font-weight:500;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}

/* ---------- 본문 ---------- */
.article{background:#fff;padding:88px 0 24px}
.article-body{display:flex;flex-direction:column;gap:12px}
.article-body p{font-size:clamp(16px,2vw,18px);font-weight:300;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body h2{font-size:clamp(22px,3vw,28px);font-weight:600;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body .h-group{display:flex;flex-direction:column;gap:16px}
.article-body figure img{width:100%;border-radius:8px}

/* ---------- 이전/다음 글 ---------- */
.post-nav{display:flex;align-items:center;margin-top:56px;padding:32px 0}
.post-nav a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:18px;letter-spacing:-.025em;color:var(--ink);transition:color .2s}
.post-nav a:hover{color:var(--green)}
.post-nav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-nav .prev{padding-right:16px;border-right:1px solid var(--line)}
.post-nav .next{padding-left:16px;justify-content:flex-end;text-align:right}
.arrow-btn{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:#fff;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:box-shadow .25s var(--ease),transform .25s var(--ease),opacity .2s;
}
.arrow-btn:hover{box-shadow:0 8px 20px rgba(51,51,51,.12);transform:translateY(-1px)}
.arrow-btn[disabled]{opacity:.35;pointer-events:none}
.arrow-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

.article-cta{display:flex;justify-content:center;margin:16px 0 120px}

/* ---------- 연관 콘텐츠 ---------- */
.related{position:relative;background:var(--bg-mint);padding:120px 0;overflow:hidden}
.related-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.related-head h2{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.5;color:var(--ink)}
.related-arrows{display:flex;gap:8px}
.rel-scroll{
  display:flex;gap:24px;align-items:flex-start;margin-top:21px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:max(24px,calc((100vw - 1072px)/2));
  scrollbar-width:none;
}
.rel-scroll::-webkit-scrollbar{display:none}
.rel-card{flex:none;width:min(428px,84vw);scroll-snap-align:start}
.rel-card .thumb{border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:428/258}
.rel-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rel-card:hover .thumb img{transform:scale(1.03)}
.rel-card .info{margin-top:16px;padding:0 8px}
.rel-card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rel-card .chips{display:flex;align-items:center;gap:8px}
.rel-card .date{font-size:14px;color:var(--muted-2);flex:none}
.rel-card h3{margin-top:12px;font-size:18px;font-weight:500;letter-spacing:-.025em;line-height:1.5;color:var(--ink);transition:color .2s}
.rel-card:hover h3{color:var(--green)}
.rel-card .excerpt{margin-top:8px;font-size:14px;line-height:1.5;letter-spacing:-.025em;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 본문 — 마크다운이 뱉는 나머지 요소 ---------- */
/* 시안 본문은 p·h2·figure 만 다뤘다. 실제 글은 마크다운으로 쓰므로 h3·목록·표·인용·
   코드가 함께 나온다. 시안의 토큰(--ink/--muted/--green/--line)과 굵기 체계를 그대로
   따라 확장한다 — 새 색을 만들지 않는다. */
.article-body h3{font-size:clamp(18px,2.4vw,22px);font-weight:600;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body h4{font-size:clamp(16px,2vw,18px);font-weight:600;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body strong,.article-body b{font-weight:600}
.article-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{opacity:.75}
.article-body ul,.article-body ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.article-body li{font-size:clamp(16px,2vw,18px);font-weight:300;line-height:1.6;letter-spacing:-.025em;color:var(--ink)}
.article-body li::marker{color:var(--muted-2)}
.article-body li>ul,.article-body li>ol{margin-top:8px}
.article-body blockquote{border-left:3px solid var(--green);background:var(--bg-mint);border-radius:0 8px 8px 0;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.article-body blockquote p{color:var(--dark)}
.article-body hr{border:none;border-top:1px solid var(--line-soft)}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--bg-mint);border:1px solid var(--line-soft);border-radius:4px;padding:2px 5px;color:var(--dark)}
.article-body pre{background:var(--dark);border-radius:8px;padding:20px 24px;overflow-x:auto}
.article-body pre code{background:none;border:none;padding:0;color:#e9ecea;font-size:14px;line-height:1.7}
/* 표는 좁은 화면에서 페이지를 가로로 밀지 않고 표 안에서만 스크롤되어야 한다. */
.article-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;letter-spacing:-.025em}
/* 열 정렬(`|---:|`)은 align 속성으로 들어온다 — 숫자 열을 오른쪽에 맞추는 용도.
   브라우저 기본 해석에 기대지 않고 명시한다. 숫자는 자릿수가 맞아야 읽힌다. */
.article-body th[align="right"],.article-body td[align="right"]{text-align:right;font-variant-numeric:tabular-nums}
.article-body th[align="center"],.article-body td[align="center"]{text-align:center}
.article-body th[align="left"],.article-body td[align="left"]{text-align:left}
.article-body th{background:var(--bg-mint);font-weight:600;color:var(--ink)}
.article-body td{font-weight:300;color:var(--ink)}
.article-body figcaption{font-size:14px;font-weight:300;color:var(--muted);letter-spacing:-.025em;margin-top:10px;text-align:center}
.article-body img{border-radius:8px}

/* ---------- 본문 상단 핵심 요약 (GEO) ---------- */
/* 생성형 검색이 인용하기 좋게 결론을 먼저 놓는 블록. 본문 첫 요소로 렌더된다. */
.answer-summary{background:var(--bg-mint);border:1px solid rgba(0,151,75,.25);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.answer-summary .label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--green);text-transform:uppercase}
.answer-summary p{font-size:clamp(16px,2vw,17px);font-weight:400;line-height:1.65;color:var(--dark)}

/* ---------- 목차 ---------- */
.toc{border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.toc .label{font-size:13px;font-weight:600;letter-spacing:-.025em;color:var(--muted)}
.toc ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.toc li{font-size:15px;font-weight:300;line-height:1.5}
.toc li.lv3{padding-left:14px}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--green)}

/* ---------- FAQ ---------- */
.article-faq{display:flex;flex-direction:column;gap:16px;margin-top:8px;padding:40px 0 80px 0}
.article-faq h2{font-size:clamp(22px,3vw,28px);font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.article-faq details{border:1px solid var(--line);border-radius:8px;padding:16px 20px}
.article-faq summary{font-size:16px;font-weight:600;letter-spacing:-.025em;color:var(--ink);cursor:pointer;list-style:none}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{content:"+";float:right;color:var(--muted-2);font-weight:400}
.article-faq details[open] summary{color:#00974B;font-size:18px}
.article-faq details[open] summary::after{content:"\2212"}
.article-faq details p{font-size:16px;font-weight:300;line-height:1.6;color:var(--ink);margin-top:12px;padding:16px;background-color:#F7FCFA;border-radius:8px}

/* ---------- 저자 (E-E-A-T) ---------- */
.article-author{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:14px;letter-spacing:-.025em}
.article-author .name{font-weight:600;color:var(--ink)}
.article-author .role,.article-author .reading{color:var(--muted);font-weight:300}

/* ---------- 태그 ---------- */
.article-tags{display:flex;flex-wrap:wrap;gap:8px}
.article-tags a{font-size:13px;font-weight:300;letter-spacing:-.025em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.article-tags a:hover{color:var(--green);border-color:rgba(0,151,75,.35);background:var(--bg-mint)}

/* ---------- 미리보기 배너 ---------- */
/* 초안을 토큰 링크로 열었을 때만 뜬다. 공개 글로 착각하고 공유하는 사고를 막는 표식. */
.preview-banner{position:sticky;top:0;z-index:60;background:#3d3f3e;color:#fff;text-align:center;font-size:14px;font-weight:300;letter-spacing:-.025em;padding:10px 24px}
.preview-banner b{font-weight:600;color:var(--mint)}

/* ---------- 반응형 ---------- */
@media(max-width:1024px){
  .ahero{padding:104px 0 64px}
  .article{padding:64px 0 24px}
  .related{padding:96px 0}
}
@media(max-width:767px){
  .ahero{padding:96px 0 48px}
  .ahero-deco-b{left:-60px}
  .ahero-deco-c{display:none}
  .ahero-deco-a{width:300px;right:-100px}
  .article{padding:48px 0 16px}
  .article-body{gap:32px}
  .post-nav{flex-direction:column;align-items:stretch;gap:16px;margin-top:40px;padding:24px 0}
  .post-nav .prev{padding-right:0;border-right:none}
  .post-nav .next{padding-left:0}
  .article-cta{margin-bottom:72px}
  .related{padding:72px 0}
  .rel-card{width:calc(100vw - 48px)}
}