*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --navy:#1e3a5f; --navy2:#152d4a; --gold:#c8a96e; --gold-ink:#8a6d33;
  --ink:#1a2332; --soft:#4a5568; --mute:#8a96a8; --line:#e4e8ee;
  --bg:#ffffff; --bg2:#f7f9fb; --nav-h:68px;
}
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body { font-family:'Noto Sans KR', sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; padding-top:var(--nav-h); word-break:keep-all; overflow-wrap:anywhere; }
a { color:var(--navy); }

/* NAV */
.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 32px; width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { height:34px; display:block; }
.nav-menu { display:flex; gap:36px; list-style:none; }
.nav-menu a { font-size:14px; font-weight:500; color:var(--soft); text-decoration:none; letter-spacing:.3px; }
.nav-menu a:hover, .nav-menu a.on { color:var(--navy); }
.nav-menu a.on { font-weight:700; }
.nav-cta { background:var(--navy); color:#fff; padding:9px 22px; border-radius:5px; font-size:13.5px; font-weight:600; text-decoration:none; }
.nav-cta:hover { background:var(--navy2); }

.eyebrow { font-size:12px; letter-spacing:2px; color:var(--gold-ink); font-weight:700; }

/* ARTICLE */
.article-wrap { max-width:760px; margin:0 auto; padding:36px 24px 80px; }
.crumb { font-size:13px; color:var(--mute); margin-bottom:28px; }
.crumb a { color:var(--mute); text-decoration:none; }
.crumb a:hover { color:var(--navy); }
.article-head { padding-bottom:26px; border-bottom:2px solid var(--navy); margin-bottom:30px; }
.article-head h1 { font-size:clamp(25px, 4.4vw, 34px); font-weight:900; line-height:1.4; letter-spacing:-.6px; margin:12px 0 16px; text-wrap:balance; }
.byline { font-size:14px; color:var(--soft); }

.summary { background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:0 10px 10px 0; padding:22px 26px; margin-bottom:38px; }
.summary h2 { font-size:14px; letter-spacing:1px; color:var(--navy); margin-bottom:12px; }
.summary ul { padding-left:18px; }
.summary li { font-size:15.5px; line-height:1.75; color:var(--ink); margin-bottom:6px; }
.summary li:last-child { margin-bottom:0; }

.article-body { font-size:16.5px; line-height:1.9; color:#26303f; }
.article-body p { margin:0 0 20px; }
.article-body h2 { font-size:23px; font-weight:800; line-height:1.45; letter-spacing:-.3px; color:var(--ink); margin:48px 0 18px; }
.article-body h3 { font-size:18.5px; font-weight:700; line-height:1.5; color:var(--navy); margin:34px 0 12px; }
.article-body strong { font-weight:700; color:var(--ink); }
.article-body ul, .article-body ol { margin:0 0 22px; padding-left:24px; }
.article-body li { margin-bottom:8px; }
.article-body blockquote { border-left:3px solid var(--gold); background:var(--bg2); padding:16px 22px; margin:0 0 22px; border-radius:0 8px 8px 0; color:var(--ink); font-weight:500; }
.article-body blockquote p:last-child { margin-bottom:0; }
.article-body hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
.article-body em { color:var(--soft); }
.article-body figure { margin:30px 0; }
.article-body figure img { width:100%; height:auto; border:1px solid var(--line); border-radius:10px; display:block; }
.article-body figure img { max-width:100%; width:auto; margin:0 auto; }
.video { position:relative; padding-top:56.25%; margin:0 0 28px; border-radius:10px; overflow:hidden; background:#000; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.note { font-size:13px; line-height:1.8; color:var(--mute); margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.table-wrap { overflow-x:auto; margin:0 0 24px; border:1px solid var(--line); border-radius:10px; }
.article-body table { border-collapse:collapse; width:100%; min-width:480px; font-size:14.5px; line-height:1.65; }
.article-body th { background:var(--navy); color:#fff; font-weight:600; text-align:left; padding:11px 14px; white-space:nowrap; }
.article-body td { padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; }
.article-body tr:nth-child(even) td { background:var(--bg2); }

.faq { margin-top:56px; padding-top:36px; border-top:2px solid var(--navy); }
.faq > h2 { font-size:22px; font-weight:800; margin-bottom:8px; }
.faq-item { padding:22px 0; border-bottom:1px solid var(--line); }
.faq-item h3 { font-size:17px; font-weight:700; line-height:1.55; margin-bottom:10px; padding-left:26px; position:relative; }
.faq-item h3::before { content:'Q'; position:absolute; left:0; color:var(--gold-ink); font-weight:900; }
.faq-item p { font-size:15.5px; line-height:1.85; color:var(--soft); padding-left:26px; }

.tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.tags li { font-size:12.5px; color:var(--soft); background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; }

.author-box { background:var(--navy); color:#fff; border-radius:14px; padding:34px 34px 36px; margin-top:56px; }
.author-box .eyebrow { color:var(--gold); }
.author-box h2 { font-size:22px; font-weight:800; margin:8px 0 14px; }
.author-box p { font-size:14.5px; line-height:1.85; color:rgba(255,255,255,.78); margin-bottom:14px; }
.author-box a { color:#fff; }
.author-box .btn { display:inline-block; margin-top:8px; background:var(--gold); color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; padding:12px 28px; border-radius:6px; }
.author-box .btn:hover { opacity:.9; }

.related { margin-top:52px; }
.related h2 { font-size:18px; font-weight:800; margin-bottom:8px; }
.related ul { list-style:none; margin-bottom:20px; }
.related li { padding:16px 0; border-bottom:1px solid var(--line); }
.related li a { display:block; font-size:16px; font-weight:600; line-height:1.55; color:var(--ink); text-decoration:none; }
.related li a:hover { color:var(--navy); text-decoration:underline; }
.related li span { font-size:12.5px; color:var(--mute); }
.related p a { font-size:14.5px; font-weight:600; text-decoration:none; }

/* LIST */
.list-wrap { max-width:1100px; margin:0 auto; padding:56px 24px 88px; }
.list-head { margin-bottom:20px; }
.list-head h1 { font-size:clamp(28px, 4.5vw, 40px); font-weight:900; letter-spacing:-.8px; margin:12px 0 14px; }
.list-head > p:not(.eyebrow) { font-size:15.5px; color:var(--soft); line-height:1.8; max-width:620px; }
.cat-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cat-nav a { font-size:14px; font-weight:600; text-decoration:none; color:var(--navy); border:1px solid var(--line); background:var(--bg2); border-radius:999px; padding:8px 16px; }
.cat-nav a:hover { border-color:var(--navy); }
.cat-nav b { color:var(--gold-ink); margin-left:4px; }
.col-sec { margin-top:52px; }
.col-sec > h2 { font-size:20px; font-weight:800; border-top:2px solid var(--navy); padding-top:16px; margin-bottom:22px; }
.col-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.col-card a { display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; text-decoration:none; color:inherit; height:100%; transition:box-shadow .2s, transform .2s; }
.col-card a:hover { box-shadow:0 8px 32px rgba(30,58,95,.1); transform:translateY(-2px); }
.col-card img { width:96px; height:96px; border-radius:8px; flex-shrink:0; object-fit:cover; border:1px solid var(--line); }
.col-card .meta { font-size:12px; color:var(--gold-ink); font-weight:600; }
.col-card h3 { font-size:16px; font-weight:700; line-height:1.45; margin:6px 0 8px; color:var(--ink); }
.col-card p { font-size:13.5px; color:var(--soft); line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

footer { background:var(--ink); color:rgba(255,255,255,.5); padding:36px 24px; text-align:center; font-size:12.5px; line-height:1.9; }
footer strong { color:rgba(255,255,255,.75); font-weight:500; }
footer a { color:rgba(255,255,255,.65); text-decoration:none; }
footer a:hover { color:#fff; }

@media (max-width:860px) { .col-list { grid-template-columns:1fr; } }
@media (max-width:700px) {
  .nav-inner { padding:0 20px; }
  .nav-menu { gap:0; }
  .nav-menu li { display:none; }
  .nav-menu li:nth-child(3) { display:block; }
  .article-wrap { padding:24px 20px 64px; }
  .article-body { font-size:16px; }
  .article-body h2 { font-size:21px; margin-top:40px; }
  .summary { padding:18px 20px; }
  .author-box { padding:26px 22px 28px; }
  .col-card img { width:72px; height:72px; }
}
@media (max-width:420px) { .nav-cta { padding:8px 14px; } }
.article-body th strong { color:#fff; }