/* =====================================================================
 *  콘텐츠/문서 페이지 공용 스타일 — 에디토리얼 (about, guide 등)
 *  원칙: 그라데이션·이모지 절제 · 브랜드 1색 액센트 · 넉넉한 여백 · 16px↑ 가독성
 * =================================================================== */
:root{
  --ink:#15202e; --body:#33415c; --muted:#6b7890; --line:#e7ecf3; --line2:#eef2f8;
  --brand:#2f6df0; --brand-deep:#1f50bc; --accent:#f5a623; --bg:#fbfcfe;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--body);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:17px; line-height:1.8; word-break:keep-all; -webkit-font-smoothing:antialiased; }
a{ color:var(--brand); }

/* ── 헤더 (화이트 에디토리얼) ── */
.site-h{ background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.site-h .in{ max-width:1080px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px; }
.site-h .logo{ font-size:21px; font-weight:900; letter-spacing:-.5px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; }
.site-h .logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); display:inline-block; }
.site-h nav{ margin-left:auto; display:flex; gap:22px; }
.site-h nav a{ color:#48536b; text-decoration:none; font-weight:600; font-size:15px; }
.site-h nav a:hover{ color:var(--brand); }
.site-h .cta-s{ background:var(--brand); color:#fff !important; padding:8px 16px; border-radius:8px; font-weight:700; font-size:14px; }
@media (max-width:680px){ .site-h nav{ gap:13px; } .site-h nav a:not(.cta-s){ display:none; } }

/* ── 아티클 ── */
main.article{ max-width:740px; margin:0 auto; padding:30px 24px 70px; }
.breadcrumb{ font-size:13px; color:var(--muted); margin-bottom:22px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--brand); }
.eyebrow{ display:inline-block; color:var(--brand-deep); background:#eaf1ff; font-weight:800; font-size:13px; letter-spacing:.3px; padding:5px 11px; border-radius:999px; }
.article h1{ font-size:40px; font-weight:900; line-height:1.22; letter-spacing:-1px; color:var(--ink); margin:14px 0 0; }
.article .meta{ display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font-size:14px; margin:18px 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.article .lead{ font-size:20px; line-height:1.7; color:#2b384f; margin:0 0 26px; }
.article h2{ font-size:26px; font-weight:800; line-height:1.3; color:var(--ink); margin:48px 0 12px; letter-spacing:-.4px; }
.article h3{ font-size:19px; font-weight:800; color:var(--ink); margin:26px 0 6px; }
.article p{ margin:0 0 18px; }
.article ul, .article ol{ padding-left:22px; margin:0 0 18px; } .article li{ margin:8px 0; }
.article strong{ color:var(--ink); font-weight:700; }
.article img{ max-width:100%; border-radius:14px; }
.article hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }

/* 핵심 요약 박스 */
.summary{ background:#f4f8ff; border:1px solid #dbe7ff; border-left:4px solid var(--brand); border-radius:10px; padding:18px 22px; margin:8px 0 30px; }
.summary h3{ margin:0 0 8px; font-size:14px; color:var(--brand-deep); letter-spacing:.3px; }
.summary ul{ margin:0; padding-left:18px; } .summary li{ margin:5px 0; font-size:15.5px; }

/* 인용/강조 */
.pull{ font-size:23px; font-weight:700; color:var(--ink); border-left:4px solid var(--accent); padding:4px 0 4px 20px; margin:30px 0; line-height:1.5; }

/* 통계 */
.stat-row{ display:flex; gap:14px; margin:24px 0; }
.stat{ flex:1; text-align:center; border:1px solid var(--line); border-radius:14px; padding:20px 10px; background:#fff; }
.stat b{ display:block; font-size:30px; font-weight:900; color:var(--brand); line-height:1.1; }
.stat span{ display:block; font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4; }
@media (max-width:560px){ .stat-row{ flex-direction:column; } }

/* 단계(타임라인) */
ol.steps{ list-style:none; counter-reset:s; padding:0; margin:18px 0; }
ol.steps li{ position:relative; margin:0 0 4px 15px; padding:2px 0 20px 30px; border-left:2px solid var(--line); }
ol.steps li:last-child{ border-left-color:transparent; }
ol.steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:-16px; top:-2px; width:30px; height:30px; background:var(--brand); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
ol.steps li b{ display:block; color:var(--ink); margin-bottom:2px; }

/* 콜아웃 */
.callout{ background:#fff8ec; border:1px solid #ffe2ad; border-radius:12px; padding:16px 18px; margin:22px 0; font-size:15.5px; color:#5b4a25; }

/* 카드(관련/요점) */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.card{ border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:#fff; }
.card h3{ margin:0 0 6px; font-size:16.5px; } .card p{ margin:0; color:var(--muted); font-size:14.5px; }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* CTA */
.cta-row{ text-align:center; margin:34px 0 6px; }
.cta{ display:inline-block; background:var(--brand); color:#fff; font-size:17px; font-weight:800; padding:15px 36px; border-radius:10px; text-decoration:none; box-shadow:0 6px 16px rgba(47,109,240,.25); }
.cta:hover{ background:var(--brand-deep); }
.cta.ghost{ background:#fff; color:var(--brand); border:1.5px solid #cfddfb; box-shadow:none; margin-left:8px; }

/* FAQ */
.faq{ margin-top:14px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ font-weight:800; padding:16px 0; cursor:pointer; font-size:17px; color:var(--ink); list-style:none; position:relative; padding-right:28px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:14px; color:var(--brand); font-weight:700; font-size:20px; }
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:0 0 16px; color:#3a475e; }

/* 관련 글 */
.related{ margin-top:46px; padding-top:24px; border-top:1px solid var(--line); }
.related .rt{ font-size:14px; color:var(--muted); font-weight:800; letter-spacing:.3px; margin-bottom:8px; }
.related a{ display:flex; justify-content:space-between; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line2); text-decoration:none; color:var(--ink); font-weight:700; }
.related a span.arr{ color:var(--brand); }

/* 표 */
.article table{ width:100%; border-collapse:collapse; font-size:15px; margin:14px 0; }
.article th,.article td{ border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top; }
.article th{ background:#f4f7fc; font-weight:800; color:var(--ink); }

/* 푸터 */
footer.site-f{ border-top:1px solid var(--line); background:#fff; }
footer.site-f .in{ max-width:1080px; margin:0 auto; padding:30px 24px; color:var(--muted); font-size:13.5px; line-height:1.9; text-align:center; }
footer.site-f a{ color:#56627c; text-decoration:none; }
footer.site-f a:hover{ color:var(--brand); }
footer.site-f .biz{ color:#8696b0; font-size:12.5px; }