:root { --ink:#171513; --paper:#fff8e8; --yellow:#ffe34f; --blue:#2868f4; --pink:#ff4696; --mint:#6ee7c8; --shadow:8px 8px 0 var(--ink); font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; background-color:var(--paper); background-image:radial-gradient(#e4dcc7 1.4px,transparent 1.4px); background-size:22px 22px; line-height:1.7; }
a { color:inherit; }
.site-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px max(20px,calc((100vw - 1120px)/2)); border-bottom:4px solid var(--ink); background:var(--yellow); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:950; }
.brand b { padding:5px 8px; background:var(--ink); color:#8cff4f; letter-spacing:.08em; }
.site-head nav { display:flex; gap:8px; flex-wrap:wrap; }
.site-head nav a { padding:6px 10px; border:2px solid transparent; border-radius:999px; font-size:13px; font-weight:850; text-decoration:none; }
.site-head nav a[aria-current="page"],.site-head nav a:hover { border-color:var(--ink); background:#fff; }
.content-main { width:min(960px,calc(100% - 32px)); margin:42px auto 80px; padding:clamp(24px,5vw,60px); border:4px solid var(--ink); border-radius:28px; background:#fff; box-shadow:var(--shadow); }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:13px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:800px; margin:0; font-size:clamp(38px,7vw,72px); line-height:1.05; letter-spacing:-.055em; }
.lead { max-width:760px; margin:24px 0 48px; padding:18px 20px; border:3px solid var(--ink); background:var(--mint); font-size:clamp(18px,2.7vw,24px); font-weight:800; box-shadow:5px 5px 0 var(--ink); }
section+section { margin-top:44px; }
h2 { margin:0 0 10px; font-size:clamp(23px,3.5vw,34px); letter-spacing:-.035em; }
p,li { color:#514a42; }
.facts,.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.facts article,.compare article { padding:20px; border:3px solid var(--ink); border-radius:16px; background:#eef4ff; box-shadow:4px 4px 0 var(--ink); }
.facts article:nth-child(3n+2) { background:#fff0a9; }
.facts article:nth-child(3n) { background:#dff8eb; }
.facts b { font-size:20px; }
.facts p { margin:8px 0 0; }
.compare article:first-child { background:#d8fae9; }
.compare article:last-child { background:#ffe5ee; }
table { width:100%; border-collapse:collapse; }
th,td { padding:13px; border:2px solid var(--ink); text-align:left; }
th { background:var(--yellow); }
.callout { margin-top:32px; padding:18px; border-left:8px solid var(--blue); background:#edf3ff; font-weight:750; }
.faq details { margin:12px 0; border:3px solid var(--ink); border-radius:14px; background:#fff; box-shadow:4px 4px 0 var(--ink); }
.faq summary { padding:18px; cursor:pointer; font-weight:900; }
.faq details p { margin:0; padding:0 18px 18px; }
.updated { color:#786f63; font-size:13px; font-weight:800; }
.mail { display:inline-block; padding:12px 16px; border:3px solid var(--ink); background:var(--yellow); box-shadow:4px 4px 0 var(--ink); font-weight:900; }
footer { padding:34px max(20px,calc((100vw - 960px)/2)) 110px; border-top:4px solid var(--ink); background:#171513; color:#fff; }
footer nav { display:flex; gap:16px; margin:10px 0; flex-wrap:wrap; }
footer small { color:#c7beb0; }
@media(max-width:700px){.site-head{align-items:flex-start;flex-direction:column;padding:12px 16px}.brand span{font-size:14px}.site-head nav{gap:2px}.site-head nav a{padding:4px 7px;font-size:11px}.content-main{margin-top:22px;padding:24px 18px;border-width:3px;border-radius:20px;box-shadow:5px 5px 0 var(--ink)}.facts,.compare{grid-template-columns:1fr}.lead{margin-bottom:36px}th,td{padding:9px;font-size:13px}}