/* ============================================================
  履歴スタジオ — guide.css (PREMIUM v2)
  가이드 기사·법적 페이지 공용 스타일
  ※ 디자인 토큰은 style.css(CSS 변수) 상속, 클래스명 불변
============================================================ */

/* --- 기사 레이아웃 --- */
.article-wrap{ max-width:780px; margin:0 auto; padding:1.2rem 1rem 3rem; }
.breadcrumb{ font-size:.74rem; color:var(--muted); margin:0 0 1.1rem; display:flex; flex-wrap:wrap; gap:.35rem; font-weight:700; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }

.article{ background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:1.4rem 1.2rem 2.4rem; box-shadow:var(--sh-2); overflow:hidden; position:relative; }
.article::before{ /* 상단 브랜드 그라디언트 라인 */
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-brand); }
.article .a-cat{ display:inline-block; font-size:.68rem; font-weight:800; color:var(--accent);
  background:var(--accent-weak); border-radius:99px; padding:.25rem .75rem; margin-bottom:.7rem; letter-spacing:.06em; }
.article h1{ font-size:1.42rem; line-height:1.55; margin:0 0 .5rem; font-weight:800; letter-spacing:.02em; }
.article .a-date{ color:var(--muted); font-size:.74rem; margin-bottom:1.2rem; font-weight:700; letter-spacing:.04em; }
.article h2{ font-size:1.12rem; margin:2.4rem 0 .8rem; padding-left:.7rem; border-left:5px solid var(--accent);
  line-height:1.5; font-weight:800; position:relative; }
.article h2:first-of-type{ margin-top:1.4rem; }
.article h3{ font-size:1rem; margin:1.6rem 0 .5rem; font-weight:800; }
.article p{ margin:.5rem 0 1rem; line-height:2.0; hanging-punctuation:allow-end; } /* v2.9 행말 구두점 돌출 (Safari/Chrome 130+) */
.article ul,.article ol{ margin:.4rem 0 1.1rem; padding-left:1.4rem; line-height:1.95; }
.article li{ margin-bottom:.3rem; }
.article strong{ color:var(--fg); }
.article a{ font-weight:700; }
.article figure{ margin:1rem 0; }

/* --- 목차 박스 --- */
.toc{ background:linear-gradient(160deg, color-mix(in srgb,var(--panel) 55%,var(--bg)), var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:.9rem 1.1rem; margin:1.2rem 0 1.6rem; box-shadow:var(--sh-1); }
.toc p{ font-weight:800; font-size:.8rem; margin:0 0 .4rem; letter-spacing:.06em; color:var(--accent); }
.toc ol{ margin:0; padding-left:1.3rem; font-size:.86rem; line-height:2.0; }
.toc a{ text-decoration:none; font-weight:600; }
.toc a:hover{ text-decoration:underline; }

/* --- 표 --- */
.a-table{ width:100%; border-collapse:separate; border-spacing:0; margin:.7rem 0 1.3rem; font-size:.85rem;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.a-table th,.a-table td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:.55rem .65rem; text-align:left; }
.a-table tr:last-child td{ border-bottom:0; }
.a-table th:last-child,.a-table td:last-child{ border-right:0; }
.a-table th{ background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 8%,var(--panel)), color-mix(in srgb,var(--accent) 4%,var(--panel))); font-weight:800; }
.a-table td.y{ text-align:center; white-space:nowrap; }

/* --- 포인트/주의 박스 --- */
.point-box,.caution-box{ border-radius:14px; padding:.85rem 1.1rem; margin:1.1rem 0; font-size:.88rem; line-height:1.9; box-shadow:var(--sh-1); }
.point-box{ border:1.5px solid color-mix(in srgb,var(--ok) 40%,var(--line)); background:color-mix(in srgb,var(--ok) 6%,var(--panel)); }
.point-box::before{ content:'✅ POINT'; display:block; font-weight:800; font-size:.7rem; color:var(--ok); margin-bottom:.2rem; letter-spacing:.08em; }
.caution-box{ border:1.5px solid color-mix(in srgb,var(--warn) 40%,var(--line)); background:color-mix(in srgb,var(--warn) 6%,var(--panel)); }
.caution-box::before{ content:'⚠ 注意'; display:block; font-weight:800; font-size:.7rem; color:var(--warn); margin-bottom:.2rem; letter-spacing:.08em; }

/* --- 도구 CTA 박스 (네이비 그라디언트) --- */
.cta-box{ text-align:center; border-radius:18px; padding:1.6rem 1.2rem; margin:2.2rem 0;
  color:#fff; border:0; position:relative; overflow:hidden;
  background:radial-gradient(500px 240px at 90% -20%, rgba(79,124,255,.5), transparent 60%),
             linear-gradient(150deg,#101c46,#20367c); box-shadow:var(--sh-3); }
.cta-box::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:20px 20px; }
.cta-box p{ font-weight:800; margin:0 0 1rem; color:#fff !important; line-height:1.8 !important; position:relative; }
.cta-box .btn{ min-width:min(100%,330px); background:var(--grad-gold); color:#402e02; border:0;
  box-shadow:0 8px 24px rgba(242,185,13,.45); position:relative; }
.cta-box .btn:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.cta-box .cta-sub{ display:block; margin-top:.7rem; font-weight:600; font-size:.73rem; color:#b9c9f2; position:relative; }

/* --- FAQ --- */
.faq-item{ border:1px solid var(--line); border-radius:14px; margin:.7rem 0; overflow:hidden; box-shadow:var(--sh-1); }
.faq-q{ background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 7%,var(--panel)), var(--panel));
  padding:.8rem 1.1rem; font-weight:800; font-size:.92rem; }
.faq-q::before{ content:'Q. '; color:var(--accent); }
.faq-a{ padding:.7rem 1.1rem 1rem; font-size:.88rem; line-height:1.9; }
.faq-a::before{ content:'A. '; font-weight:800; color:var(--ok); }

/* --- 연호 변환기 --- */
.wareki-tool{ border:0; border-radius:18px; padding:1.2rem; margin:1.2rem 0 1.6rem; color:#fff;
  background:radial-gradient(400px 200px at 85% -10%, rgba(79,124,255,.5), transparent 60%),
             linear-gradient(150deg,#101c46,#20367c); box-shadow:var(--sh-3); }
.wareki-tool h2{ border:0; padding:0; margin:0 0 .7rem !important; color:#fff; }
.wareki-tool label{ color:#cdd9f5; }
.wareki-tool .hint{ color:#9db1e2; }
.wk-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-items:end; margin-bottom:.7rem; }
.wk-result{ font-size:1.35rem; font-weight:800; color:#ffe9a8; min-height:1.6em; margin-top:.3rem; }
.wareki-tool .btn.primary{ background:var(--grad-gold); color:#402e02; box-shadow:0 6px 18px rgba(242,185,13,.4); }
.wareki-tool input{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff; }
.wareki-tool input:focus{ background:rgba(255,255,255,.12); box-shadow:0 0 0 4px rgba(242,185,13,.25); border-color:var(--gold); }
.wareki-tool input::placeholder{ color:#8ea3d8; }
/* 툴 난색 배경 위 결과 카드(point-box) — 흰 글자 상속 방지(가독성 버그 수정) */
.wareki-tool .point-box{ color:#16204a; }
.wareki-tool .point-box p{ color:inherit; }

/* --- 관련 기사/허브 카드 --- */
.rel-grid{ display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:.7rem; }
.rel-card{ display:block; text-decoration:none; color:var(--fg); border:1px solid var(--line);
  border-radius:14px; padding:.9rem 1.1rem; background:var(--panel); box-shadow:var(--sh-1);
  transition:transform .16s, box-shadow .18s, border-color .16s; position:relative; overflow:hidden; }
.rel-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-brand); opacity:0; transition:opacity .16s; }
.rel-card:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); transform:translateY(-3px); box-shadow:var(--sh-3); }
.rel-card:hover::before{ opacity:1; }
.rel-card .rc-cat{ font-size:.66rem; font-weight:800; color:var(--accent); letter-spacing:.06em; }
.rel-card .rc-title{ font-weight:800; font-size:.95rem; margin:.2rem 0; }
.rel-card .rc-desc{ font-size:.78rem; color:var(--muted); line-height:1.65; }

/* --- SNS 공유 버튼 --- */
.share-row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:2rem 0 .5rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.share-lbl{ font-size:.76rem; font-weight:800; color:var(--muted); margin-right:.2rem; }
.share-btn{ display:inline-flex; align-items:center; gap:.4rem; min-height:42px; padding:.4rem 1rem;
  border-radius:99px; border:1.5px solid var(--line); font-size:.8rem; font-weight:800;
  text-decoration:none; color:var(--fg); background:var(--panel); box-shadow:var(--sh-1); transition:.15s; }
.share-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:var(--sh-2); }

/* --- 기사 내 광고 슬롯 --- */
.article .ad-slot{ margin:1.8rem 0; min-height:90px; }

/* --- 법적 페이지 --- */
.legal h2{ font-size:1.03rem; margin:1.9rem 0 .6rem; }
.legal p,.legal li{ line-height:1.95; font-size:.9rem; }

.p-note{ font-size:.82rem; color:#666; background:#faf8f2; border:1px dashed #d8cfae; border-radius:10px; padding:.6rem .9rem; }
.p-note strong{ color:#8a6d1a; }

@media (min-width:768px){
  .article-wrap{ padding-top:1.8rem; }
  .article{ padding:2.2rem 2.6rem 2.8rem; border-radius:22px; }
  .article h1{ font-size:1.66rem; }
  .rel-grid{ grid-template-columns:1fr 1fr; }
  .wk-row{ grid-template-columns:1fr 1fr auto; }
}