/* ------------------------------------------------------------------
 * 가이드(블로그) 전용 스타일 — /tool-page.css 위에 얹어 사용한다.
 * 아티클 본문(h2/h3·표·콜아웃·도구 CTA·목차·관련 글)과
 * 가이드 허브(글 목록 그리드)에만 쓰이는 추가 규칙만 담는다.
 * 색은 모두 var(--*) 토큰을 써서 다크모드(theme.css)에 자동 대응한다.
 * ------------------------------------------------------------------ */

/* 글 메타(발행일·읽는 시간) */
.article-meta{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:-2px 0 20px;letter-spacing:.02em}
.article-meta span+span::before{content:"·";margin:0 8px;color:var(--line-2)}

/* 본문 소제목 — tool-page.css의 큰 h1,h2를 아티클용으로 재정의 */
.content h2{font-family:var(--disp);font-weight:800;font-size:clamp(19px,3vw,24px);letter-spacing:-.02em;line-height:1.28;margin:38px 0 10px}
.content h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:24px 0 8px}

/* 본문 리스트(프로즈) */
.content>ul,.content>ol{margin:12px 0;padding-left:22px;max-width:66ch}
.content>ul li,.content>ol li{font-size:15px;color:var(--ink-2);line-height:1.75;margin:7px 0;padding-left:4px}
.content>ul li::marker{color:var(--accent)}
.content>ul li b,.content>ol li b{color:var(--ink);font-weight:700}

/* 본문 내부 링크 */
.content a.inlink{color:var(--accent);font-weight:600;border-bottom:1px solid rgba(223,67,36,.35)}
.content a.inlink:hover{border-bottom-color:var(--accent)}

/* 표 */
.tbl-wrap{overflow-x:auto;margin:18px 0}
.content table{border-collapse:collapse;width:100%;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.content th,.content td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.5;vertical-align:top}
.content th{background:var(--panel);color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.content tbody tr:last-child td{border-bottom:none}

/* 콜아웃(강조 박스) */
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:14px 16px;margin:20px 0;font-size:14.5px;color:var(--ink-2);line-height:1.7}
.callout b{color:var(--ink)}

/* 도구 CTA — 글에서 관련 도구로 보내는 카드 */
.tool-cta{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin:22px 0;transition:border-color .15s,transform .15s,box-shadow .15s}
.tool-cta:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:4px 6px 0 rgba(27,26,30,.07)}
.tool-cta .tc-ic{width:44px;height:44px;border-radius:11px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.tool-cta .tc-ic svg{width:23px;height:23px;color:var(--accent);display:block}
.tool-cta .tc-tx{flex:1;min-width:0}
.tool-cta .tc-tx b{display:block;font-size:15px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.tool-cta .tc-tx span{font-size:13px;color:var(--ink-3)}
.tool-cta .tc-go{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}

/* 목차 */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin:22px 0}
.toc b{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.02em;margin-bottom:8px}
.toc ol{margin:0;padding-left:18px}
.toc li{font-size:14px;color:var(--ink-2);margin:5px 0;line-height:1.5}
.toc a:hover{color:var(--accent)}

/* 관련 가이드 */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px}
.rel-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;transition:border-color .15s,transform .15s}
.rel-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.rel-card b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;margin-bottom:3px;letter-spacing:-.01em;line-height:1.35}
.rel-card span{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* 가이드 허브 — 글 목록 그리드 */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:8px}
.guide-item{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .18s,transform .18s,box-shadow .18s;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.guide-item:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:5px 7px 0 rgba(27,26,30,.08)}
.guide-item .gi-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.guide-item h2{font-size:16.5px;font-weight:700;margin:9px 0 6px;letter-spacing:-.02em;line-height:1.32}
.guide-item p{font-size:13.5px;color:var(--ink-3);line-height:1.55}