:root { --ink:#152435; --muted:#607080; --line:#dbe3ea; --surface:#fff; --canvas:#f5f8fa; --blue:#12638f; --blue-soft:#e8f3f9; --green:#15724d; --green-soft:#e9f6ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif; line-height:1.65; }
a { color:inherit; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); }
.nav-wrap, .container { width:min(960px, calc(100% - 32px)); margin:0 auto; }
.nav-wrap { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:var(--ink); text-decoration:none; font-size:19px; font-weight:850; }
.brand small { color:var(--blue); font-size:11px; font-weight:800; }
.desktop-nav { display:flex; align-items:center; gap:6px; }
.desktop-nav a { color:var(--muted); font-size:14px; font-weight:720; text-decoration:none; padding:9px 11px; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a[aria-current="page"] { color:var(--blue); background:var(--blue-soft); outline:none; }
.desktop-nav .dashboard-link { color:#fff !important; background:var(--blue); }
.desktop-nav .dashboard-link:hover, .desktop-nav .dashboard-link:focus-visible { background:#0d527a; }
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { list-style:none; cursor:pointer; color:var(--ink); font-size:13px; font-weight:800; padding:8px 10px; border:1px solid var(--line); background:#fff; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav-links { position:absolute; z-index:2; right:0; top:43px; min-width:164px; padding:6px; border:1px solid var(--line); background:#fff; box-shadow:0 8px 20px rgba(21,36,53,.12); }
.mobile-nav-links a { display:block; color:var(--muted); text-decoration:none; font-size:14px; font-weight:720; padding:9px; }
.article-head { padding:50px 0 34px; background:#fff; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 10px; color:var(--blue); font-size:13px; font-weight:820; }
h1 { max-width:760px; margin:0; font-size:35px; line-height:1.28; letter-spacing:0; }
.lead { max-width:700px; margin:15px 0 0; color:var(--muted); font-size:16px; }
.meta { margin:16px 0 0; color:#7a8893; font-size:12px; }
.article { padding:34px 0 52px; }
.article h2 { margin:33px 0 9px; font-size:21px; line-height:1.35; letter-spacing:0; }
.article h2:first-child { margin-top:0; }
.article p { margin:0; font-size:15px; }
.article p + h2 { margin-top:34px; }
.section { padding:34px 0 52px; }
.guide-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.guide-card { min-height:145px; padding:18px; border:1px solid var(--line); background:#fff; text-decoration:none; }
.guide-card:hover, .guide-card:focus-visible { border-color:#9fc8dd; background:#fbfdff; outline:none; }
.guide-card strong { display:block; font-size:17px; }
.guide-card span { display:block; margin-top:6px; color:var(--muted); font-size:14px; }
.callout { margin-top:30px; padding:16px 18px; border-left:3px solid var(--blue); background:var(--blue-soft); }
.callout strong { font-size:14px; }
.callout p { margin-top:4px; color:#344a5c; font-size:14px; }
.ad-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:112px; margin:34px 0 0; border:1px dashed #b8c6d0; color:#788793; background:#f9fbfc; font-size:12px; }
.ad-slot small { display:block; margin-top:3px; color:#9aa7b1; text-align:center; }
footer { padding:24px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.analytics-consent { position:fixed; z-index:20; right:20px; bottom:20px; display:flex; align-items:center; gap:16px; max-width:min(620px,calc(100% - 32px)); padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 10px 28px rgba(21,36,53,.15); color:var(--ink); }
.analytics-consent p { margin:0; font-size:12px; line-height:1.5; }
.analytics-consent a { color:var(--blue); }
.analytics-consent div { display:flex; flex:0 0 auto; gap:6px; }
.analytics-consent button { min-width:52px; padding:7px 10px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.analytics-consent .analytics-consent-allow { border-color:var(--blue); background:var(--blue); color:#fff; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-links { display:flex; flex-wrap:wrap; gap:13px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--blue); text-decoration:underline; }
@media (max-width:600px) { .nav-wrap, .container { width:min(100% - 24px,960px); } .desktop-nav { display:none; } .mobile-nav { display:block; } .article-head { padding:37px 0 28px; } h1 { font-size:27px; } .lead { font-size:15px; } .article { padding:28px 0 40px; } .article h2 { margin-top:29px; font-size:20px; } .article p { font-size:14px; } .guide-list { grid-template-columns:1fr; } .footer-wrap { align-items:flex-start; flex-direction:column; } .analytics-consent { right:12px; bottom:12px; left:12px; max-width:none; align-items:flex-start; flex-direction:column; gap:10px; } }