/* Layout: one phone-width column, sticky top bar + fixed bottom tab bar, views switched by hash. Road-sign vernacular: sign blue ink, caution amber for vehicle A. */
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --sunk:#E9EDF2; --ink:#16212D; --muted:#5B6979; --line:#D3DAE3;
  --sign:#1C4E9F; --sign-ink:#FFFFFF; --amber:#DE9200; --amber-ink:#1A1300;
  --carB:#1C4E9F; --danger:#C3352C; --ok:#2E7A4C; --warn:#A86A00;
  --road:#3B4552; --road-edge:#2C343F; --lane:#F4F6F8; --center:#E9B500; --grass:#DDE5DA; --walk:#F4F6F8;
  --f-display:"Black Han Sans","IBM Plex Sans KR",system-ui,sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E141B; --surface:#17202A; --sunk:#1F2A36; --ink:#E6EBF0; --muted:#9AA8B6; --line:#2B3744;
  --sign:#7DA6EC; --sign-ink:#0B1420; --amber:#F2B23A; --amber-ink:#1A1300;
  --carB:#7DA6EC; --danger:#F07368; --ok:#62C08A; --warn:#E5A43A;
  --road:#2B333E; --road-edge:#20262F; --lane:#C9D1DA; --center:#D9A800; --grass:#1E2A22; --walk:#C9D1DA;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E141B; --surface:#17202A; --sunk:#1F2A36; --ink:#E6EBF0; --muted:#9AA8B6; --line:#2B3744;
  --sign:#7DA6EC; --sign-ink:#0B1420; --amber:#F2B23A; --amber-ink:#1A1300;
  --carB:#7DA6EC; --danger:#F07368; --ok:#62C08A; --warn:#E5A43A;
  --road:#2B333E; --road-edge:#20262F; --lane:#C9D1DA; --center:#D9A800; --grass:#1E2A22; --walk:#C9D1DA;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--sign)}
a{color:var(--sign)}
h1,h2,h3{text-wrap:balance;line-height:1.3;margin:0}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--sign);color:var(--sign-ink)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{font-family:var(--f-display);font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.brand svg{width:26px;height:26px}
.top .sp{flex:1}
.sos{background:var(--amber);color:var(--amber-ink);border:0;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer;font-size:14px}

main{padding-block:16px 120px}
.view{display:grid;gap:18px}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:700}
.h1{font-family:var(--f-display);font-size:28px;font-weight:400;letter-spacing:.01em}
.h2{font-size:19px;font-weight:700}
.lead{color:var(--muted)}
.note{font-size:13px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.stack{display:grid;gap:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* disclaimer */
.disc{border-left:4px solid var(--amber);background:var(--surface);padding:12px 14px;border-radius:0 var(--r) var(--r) 0;font-size:13.5px;color:var(--muted)}
.disc b{color:var(--ink)}

/* home */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hero .sign{background:var(--danger);color:#fff;padding:18px 16px;display:grid;gap:6px}
.hero .sign .h1{font-size:26px}
.hero .sign p{opacity:.92}
.hero .acts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.hero .acts button{background:var(--surface);border:0;padding:14px 12px;text-align:left;cursor:pointer;display:grid;gap:2px}
.hero .acts b{font-size:15px}
.hero .acts span{font-size:12.5px;color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quick .q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:grid;gap:2px;text-align:center}
.quick .q .n{font-family:var(--f-mono);font-size:20px;font-weight:600}
.quick .q .l{font-size:12px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;text-align:left;display:grid;gap:4px}
.tile b{font-size:15px}
.tile span{font-size:13px;color:var(--muted)}
.stat{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.stat .big{font-family:var(--f-mono);font-size:34px;font-weight:600;color:var(--danger);line-height:1}

/* chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:11px 12px;font:inherit}

/* case cards */
.cases{display:grid;gap:12px}
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.case>button{display:grid;grid-template-columns:96px 1fr;gap:12px;width:100%;border:0;background:none;text-align:left;padding:12px;cursor:pointer;align-items:center}
.case .thumb{width:96px;height:96px;border-radius:8px;overflow:hidden;background:var(--grass)}
.case .thumb svg{width:100%;height:100%;display:block}
.case .meta{min-width:0;display:grid;gap:4px}
.case .t{font-weight:700;font-size:15px;line-height:1.4}
.ratio{font-family:var(--f-mono);font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pa{color:var(--amber)} .pb{color:var(--carB)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:4px;padding:2px 6px;letter-spacing:.02em;white-space:nowrap}
.b-official{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.b-court{background:color-mix(in srgb,var(--sign) 16%,transparent);color:var(--sign)}
.b-summary{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.b-new{background:var(--danger);color:#fff}
.detail{border-top:1px solid var(--line);padding:16px;display:grid;gap:14px}
.big-diagram{background:var(--grass);border-radius:8px;overflow:hidden;max-width:420px;width:100%;margin:0 auto}
.big-diagram svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);justify-content:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.bar{display:flex;height:34px;border-radius:6px;overflow:hidden;font-family:var(--f-mono);font-weight:600;font-size:13px}
.bar div{display:flex;align-items:center;padding:0 10px;white-space:nowrap;min-width:0}
.bar .a{background:var(--amber);color:var(--amber-ink)}
.bar .b{background:var(--carB);color:var(--sign-ink);justify-content:flex-end}
.bar .range{background:repeating-linear-gradient(135deg,var(--sunk) 0 6px,var(--line) 6px 12px);color:var(--ink);justify-content:center;font-size:11.5px}
.kv{display:grid;gap:10px}
.kv h4{margin:0 0 4px;font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.kv ul{margin:0;padding-left:18px;display:grid;gap:4px}
.law{font-family:var(--f-mono);font-size:12.5px;background:var(--sunk);border-radius:4px;padding:1px 6px}
.change{border:1px dashed var(--danger);border-radius:8px;padding:10px 12px;font-size:14px}
.change b{color:var(--danger)}
.src{font-size:12.5px;color:var(--muted);display:grid;gap:2px}
.src a{word-break:break-all}

/* manual */
.stepper{display:grid;gap:12px}
.stage{background:var(--grass);border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/10;max-width:100%}
.stage svg{width:100%;height:100%;display:block}
.stepnum{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--bg);font-family:var(--f-display);font-size:22px;border-radius:8px;padding:2px 12px}
.ctrl{display:flex;gap:8px;align-items:center}
.ctrl button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:500}
.ctrl .pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dots{display:flex;gap:5px;flex:1;justify-content:center}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;background:var(--line);border:0}
.dots button[aria-current="true"]{background:var(--amber);width:22px;border-radius:5px}
.steptext{display:grid;gap:6px}
.steptext h3{font-size:20px}
.steptext ul{margin:0;padding-left:18px;display:grid;gap:3px}
.dont{display:grid;gap:8px}
.dont div{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start}
.dont .x{width:24px;height:24px;border-radius:50%;background:var(--danger);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}

/* timeline */
.tl{display:grid;gap:0;position:relative}
.tl .it{display:grid;grid-template-columns:72px 1fr;gap:12px;padding-bottom:18px;position:relative}
.tl .it::before{content:"";position:absolute;left:79px;top:8px;bottom:0;width:2px;background:var(--line)}
.tl .it:last-child::before{display:none}
.tl .yr{font-family:var(--f-mono);font-weight:600;font-size:13px;text-align:right;padding-top:2px;color:var(--muted)}
.tl .body{border-left:0;padding-left:14px;position:relative;display:grid;gap:6px;min-width:0}
.tl .body::before{content:"";position:absolute;left:-9px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--sign)}
.tl .body.hot::before{border-color:var(--danger)}
.tl h3{font-size:16px}
.diff{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-size:13.5px}
.diff .old{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--danger)}
.diff .new{font-weight:700}
.diff .ar{color:var(--danger);font-weight:700}
.trend{display:grid;gap:10px;counter-reset:t}
.trend .card{display:grid;gap:6px}
.trend .card h3{font-size:16px}

/* rulings */
.ruling{display:grid;gap:10px}
.ruling .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ruling .no{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.vs{display:grid;gap:8px}
.vs div{border-radius:8px;padding:10px 12px;font-size:14px}
.vs .ins{background:var(--sunk)}
.vs .crt{background:color-mix(in srgb,var(--sign) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--sign) 35%,transparent)}
.vs .lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:2px}
.lesson{font-size:14px;border-left:3px solid var(--amber);padding-left:10px}
.steps{counter-reset:s;display:grid;gap:10px;padding:0;margin:0;list-style:none}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--sign);color:var(--sign-ink);display:grid;place-items:center;font-weight:700;font-size:14px}
.steps b{display:block}
.alert{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);border-radius:var(--r);padding:12px 14px;font-size:14px}

/* contacts */
.contacts{display:grid;gap:8px}
.ct{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.ct .nm{font-weight:700}
.ct .ds{grid-column:1;font-size:13px;color:var(--muted)}
.ct .num{font-family:var(--f-mono);font-size:18px;font-weight:600;user-select:all}
.ct .bt{grid-row:1/3;grid-column:2;display:grid;gap:4px;justify-items:end}
.ct .bt a,.ct .bt button{font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:var(--surface);cursor:pointer;text-decoration:none;color:var(--ink)}
.ct.urgent{border-color:var(--danger)}
.ct.urgent .num{color:var(--danger)}

/* record form */
.form{display:grid;gap:12px}
.field{display:grid;gap:4px}
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:10px;font:inherit;width:100%}
.field textarea{min-height:90px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checks{display:grid;gap:6px}
.checks label{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;font-size:14px;cursor:pointer}
.checks input{width:18px;height:18px;margin-top:2px;accent-color:var(--sign)}
.prog{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.prog div{height:100%;background:var(--ok);transition:width .3s}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 16px;cursor:pointer;font-weight:500}
.btn.pri{background:var(--sign);color:var(--sign-ink);border-color:var(--sign)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:14px;z-index:50}
textarea.out{font-family:var(--f-mono);font-size:12.5px;min-height:180px}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.nav .in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.nav a{display:grid;justify-items:center;gap:2px;padding:8px 2px 10px;text-decoration:none;color:var(--muted);font-size:11.5px;font-weight:500}
.nav a svg{width:22px;height:22px}
.nav a[aria-current="page"]{color:var(--sign)}
.nav a[aria-current="page"] svg{stroke:var(--sign)}

/* svg diagram classes */
.d-road{fill:var(--road)} .d-edge{stroke:var(--road-edge);stroke-width:1.5;fill:none}
.d-lane{stroke:var(--lane);stroke-width:1.6;stroke-dasharray:7 7;fill:none}
.d-solid{stroke:var(--lane);stroke-width:1.6;fill:none}
.d-center{stroke:var(--center);stroke-width:1.8;fill:none}
.d-centerd{stroke:var(--center);stroke-width:1.8;stroke-dasharray:7 6;fill:none}
.d-walk{fill:var(--walk)} .d-grass{fill:var(--grass)}
.d-stall{stroke:var(--lane);stroke-width:1.4;fill:none}
.d-bld{fill:var(--sunk);stroke:var(--line)}
.d-pathA{stroke:var(--amber);stroke-width:2.4;fill:none;stroke-dasharray:5 4;stroke-linecap:round}
.d-pathB{stroke:var(--carB);stroke-width:2.4;fill:none;stroke-dasharray:5 4;stroke-linecap:round}
.d-carA{fill:var(--amber)} .d-carB{fill:var(--carB)} .d-carP{fill:#9AA7B5}
.d-glass{fill:rgba(255,255,255,.55)}
.d-lbl{font-family:var(--f-mono);font-weight:700;font-size:10px;fill:#111;text-anchor:middle;dominant-baseline:central}
.d-lblB{fill:#fff}
.d-boom{fill:var(--danger);stroke:#fff;stroke-width:1.2}
.d-tag{font-family:var(--f-body);font-size:9px;font-weight:700;fill:#fff;paint-order:stroke;stroke:#0008;stroke-width:3px}
.d-sig rect{fill:#1d232b}
.m-tag{font-family:var(--f-body);font-size:15px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--grass);stroke-width:4px}
.d-bike{stroke-width:2.2;fill:none;stroke-linecap:round}

/* manual anim */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes trunk{0%,20%{transform:rotate(0)}50%,100%{transform:rotate(-38deg)}}
@keyframes walk{0%{transform:translate(0,0)}100%{transform:translate(74px,-30px)}}
@keyframes ring{0%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(0)}}
@keyframes flash{0%,80%,100%{opacity:0}85%{opacity:.9}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes drive{0%{transform:translateX(-60px)}100%{transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.a-blink{animation:blink 1s steps(1) infinite}
.a-trunk{transform-box:fill-box;transform-origin:0% 100%;animation:trunk 2.4s ease-out forwards}
.a-walk{animation:walk 3s ease-in-out forwards}
.a-ring{transform-box:fill-box;transform-origin:50% 50%;animation:ring 1.6s ease-in-out infinite}
.a-flash{animation:flash 2s linear infinite}
.a-pop{transform-box:fill-box;transform-origin:50% 50%;animation:pop .5s ease-out both}
.a-pulse{animation:pulse 1.4s ease-in-out infinite}
.a-d1{animation-delay:.4s}.a-d2{animation-delay:.9s}.a-d3{animation-delay:1.4s}.a-d4{animation-delay:1.9s}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

@media (max-width:420px){.h1{font-size:24px}.case>button{grid-template-columns:80px 1fr}.case .thumb{width:80px;height:80px}.two{grid-template-columns:1fr}}

/* ---- site layer ---- */
/* intro (1인칭 3D) */
.intro{position:relative;height:clamp(440px,72vh,640px);border-radius:14px;overflow:hidden;background:#2b333e;isolation:isolate;margin-top:6px;color:#fff}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .7s ease}
.intro.hit canvas{filter:grayscale(.55) brightness(.72) contrast(1.05)}
.i-fallback{display:none;position:absolute!important;inset:0;max-width:none!important;border-radius:0!important;aspect-ratio:auto!important}
.intro.nogl .i-fallback{display:block}.intro.nogl canvas,.intro.nogl .i-frame,.intro.nogl .i-dash,.intro.nogl .i-speed,.intro.nogl .i-crack{display:none}
.i-frame .pl{position:absolute;top:0;bottom:0;width:11%;background:#10151b}
.i-frame .l{left:0;clip-path:polygon(0 0,100% 0,18% 100%,0 100%)}
.i-frame .r{right:0;clip-path:polygon(0 0,100% 0,100% 100%,82% 100%)}
.i-frame .roof{position:absolute;left:0;right:0;top:0;height:5%;background:#10151b}
.i-frame .mirror{position:absolute;left:50%;top:4%;width:15%;height:7%;transform:translateX(-50%);background:#1b222b;border:3px solid #10151b;border-radius:8px}
.i-dash{position:absolute;left:0;right:0;bottom:0;width:100%;height:27%}
.i-speed{position:absolute;left:calc(30% - 34px);bottom:calc(27% - 58px);font-family:var(--f-mono);display:flex;align-items:baseline;gap:3px;color:#9fe3b5}
.i-speed b{font-size:26px;font-weight:600;min-width:2ch;text-align:right}.i-speed small{font-size:11px;opacity:.8}
.i-crack{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.intro.hit .i-crack{opacity:1}
.i-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
@keyframes iflash{0%{opacity:.75}100%{opacity:0}}
.intro.hit:not(.done) .i-flash{animation:iflash .35s ease-out forwards}
.i-top{position:absolute;left:13%;top:9%;display:grid;gap:4px;text-shadow:0 2px 10px #0008}
.i-top .eyebrow{color:#fff;opacity:.85}
.intro.stamp .i-top{opacity:0;transition:opacity .3s}
.intro.brief{height:clamp(360px,52vh,460px)}
.intro.brief .i-dash,.intro.brief .i-speed,.intro.brief .i-frame .mirror{display:none}
.intro.brief .i-stamp{top:6%!important}
.intro.brief .i-verdict{top:58%}
.i-sub{position:absolute;left:50%;bottom:31%;transform:translateX(-50%);background:#000a;padding:6px 14px;border-radius:6px;font-size:15px;white-space:nowrap}
.i-sub:empty{display:none}
.i-verdict{position:absolute;left:50%;top:62%;transform:translate(-50%,-44%) scale(.96);width:min(560px,88%);background:#0f141bee;border:1px solid #ffffff22;border-radius:14px;padding:18px 20px;display:grid;gap:8px;justify-items:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .5s ease .5s,transform .5s ease .5s,visibility 0s linear 1s}
.intro.done .i-verdict{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition-delay:.5s,.5s,0s}
.i-verdict .lab{font-size:14px;opacity:.85}
.i-verdict .num{font-family:var(--f-mono);font-weight:600;font-size:42px;line-height:1.1;white-space:nowrap}
.i-verdict .me{color:#9fe3b5}.i-verdict .op{color:#ff9d92}
.i-verdict .cap{font-size:13px;opacity:.75}
.i-verdict .why{font-size:15px;font-weight:700;color:#ffd38a;min-height:1.5em;transition:opacity .25s}
.i-verdict .num [data-me],.i-verdict .num [data-op]{display:inline-block;min-width:3ch;text-align:left}
.i-stamp{position:absolute;left:0;right:0;top:50%;margin:0;display:grid;justify-items:center;gap:0;pointer-events:none;transform:translateY(-50%);transition:top .7s cubic-bezier(.3,.8,.3,1),transform .7s cubic-bezier(.3,.8,.3,1);text-shadow:0 6px 28px #000c}
.i-stamp small{font-size:clamp(16px,2.2vw,24px);font-weight:700;opacity:0;color:#fff}
.i-stamp b{position:relative;font-family:var(--f-display);font-weight:400;font-size:clamp(70px,12vw,150px);line-height:1;color:#fff;opacity:0;transform:scale(1.8) rotate(-6deg)}
.i-stamp b::after{content:"";position:absolute;left:6%;right:6%;bottom:-6px;height:clamp(6px,1vw,12px);background:#e5483b;border-radius:4px;transform:scaleX(0);transform-origin:left}
@keyframes stampIn{0%{opacity:0;transform:scale(1.8) rotate(-6deg)}70%{opacity:1;transform:scale(.94) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes lineIn{to{transform:scaleX(1)}}
@keyframes fadeIn{to{opacity:.9}}
.intro.stamp .i-stamp b{animation:stampIn .5s cubic-bezier(.2,1.2,.4,1) forwards}
.intro.stamp .i-stamp b::after{animation:lineIn .35s ease-out .45s forwards}
.intro.stamp .i-stamp small{animation:fadeIn .3s ease-out .3s forwards}
.intro.done .i-stamp{top:9%;transform:translateY(0) scale(.62)}
.i-verdict .ctas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.i-verdict .cta.ghost{background:transparent;color:#fff;border:1px solid #ffffff55}
.i-verdict .cta.main{background:#fff;color:#111}
.i-skip{position:absolute;right:13%;top:7%;background:#0007;color:#fff;border:1px solid #fff5;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.intro.done .i-skip{display:none}
/* intro v3 — 굵고 세련된 타이포, 빠른 판정 */
.intro{--fx:"Noto Sans KR","Pretendard","Apple SD Gothic Neo",sans-serif;--me:#38f0b0;--op:#ff4d5e;--hl:#ff3d3d}
.i-sub{font-family:var(--fx);font-weight:800;letter-spacing:-.01em;background:#000b;border-radius:999px;padding:7px 16px}
.i-top .eyebrow{font-family:var(--fx);font-weight:800;letter-spacing:.02em}
.i-stamp{gap:2px}
.i-stamp small{font-family:var(--fx);font-weight:900;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.03em;opacity:0;margin-bottom:.1em}
.i-stamp b{font-family:var(--fx);font-weight:900;font-size:clamp(96px,16vw,200px);letter-spacing:-.05em;line-height:.95;display:flex;gap:.06em;opacity:1;transform:none;animation:none!important;text-shadow:0 10px 40px #000b}
.i-stamp b span{display:inline-block;opacity:0;transform:translateY(40%) scale(1.25);color:#fff}
.i-stamp b span:nth-child(2){color:var(--hl)}
.i-stamp b span:last-child{color:#fff;margin-left:.02em}
.i-stamp b::after{display:none}
@keyframes popChar{0%{opacity:0;transform:translateY(40%) scale(1.3)}60%{opacity:1;transform:translateY(-6%) scale(.97)}100%{opacity:1;transform:none}}
.intro.stamp .i-stamp b span{animation:popChar .32s cubic-bezier(.2,1.3,.4,1) forwards}
.intro.stamp .i-stamp b span:nth-child(2){animation-delay:.07s}.intro.stamp .i-stamp b span:nth-child(3){animation-delay:.14s}.intro.stamp .i-stamp b span:nth-child(4){animation-delay:.21s}
.intro.stamp .i-stamp b::after{animation:lineIn .25s ease-out .3s forwards}
.intro.done .i-stamp{top:4%;transform:translateY(0) scale(.5)}
.i-verdict{background:none;border:0;box-shadow:none;padding:0;width:min(760px,94%);top:62%;gap:18px;font-family:var(--fx)}
.i-verdict .num{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,34px);font-family:var(--fx);white-space:nowrap}
.i-verdict .side{display:grid;justify-items:center;gap:2px;min-width:clamp(110px,17vw,220px)}
.i-verdict .side em{font-style:normal;font-weight:900;font-size:clamp(22px,3.1vw,38px);letter-spacing:-.02em;line-height:1.1}
.i-verdict .side strong{font-weight:900;font-size:clamp(96px,15vw,190px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-align:center;text-shadow:0 8px 30px #000a}
.i-verdict .num [data-me],.i-verdict .num [data-op]{min-width:0;text-align:center;display:block}
.i-verdict .me strong,.i-verdict .me em{color:var(--me)}
.i-verdict .op strong,.i-verdict .op em{color:var(--op)}
.i-verdict .vs{font-weight:900;font-size:clamp(60px,8vw,110px);line-height:1;color:#fff;opacity:.85;padding-bottom:.12em}
.i-verdict .ctas{gap:10px}
.i-verdict .cta{border-radius:999px;font-family:var(--fx);font-weight:800;padding:12px 22px;letter-spacing:-.01em}
.i-verdict .cta.main{background:#fff;color:#0d1117;box-shadow:0 8px 24px #0006}
.i-verdict .cta.ghost{background:#ffffff14;backdrop-filter:blur(6px);border:1px solid #ffffff40}
.intro.done .i-verdict{transition-delay:.15s,.15s,0s}
@media (max-width:600px){.intro.done .i-stamp{top:13%;transform:translateY(0) scale(.6)}.i-verdict{top:61%;gap:14px}.i-verdict .num{gap:8px}.i-verdict .side strong{font-size:20vw}.i-verdict .vs{font-size:10vw}.i-verdict .side{min-width:30vw}}
.intro.brief .i-stamp{top:4%!important}
@media (orientation:portrait) and (min-width:601px){.intro.done .i-stamp{top:12%;transform:translateY(0) scale(.75)}.i-verdict .side strong{font-size:22vw}.i-verdict .vs{font-size:12vw}.i-verdict .side em{font-size:4.4vw}}
.i-strip{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:10px;color:var(--muted)}
@media (max-width:600px){.intro{height:clamp(470px,78vh,600px)}.i-top{left:16%;top:13%}.intro.done .i-stamp{top:11%;transform:translateY(0) scale(.7)}.i-verdict{top:60%}.i-verdict .why{font-size:13.5px}.i-frame .mirror{width:20%}.i-top h1{font-size:28px}.i-verdict{padding:14px}.i-verdict .num{font-size:32px}.i-verdict .lab{font-size:13px}.i-sub{font-size:13px;bottom:25%}.i-dash{height:22%}.i-speed{bottom:calc(22% - 50px);left:calc(30% - 30px)}.i-speed b{font-size:20px}.i-skip{right:15%;top:6.6%;padding:3px 10px;font-size:12px}.i-frame .pl{width:13%}}

[hidden]{display:none!important}
.top .wrap{max-width:1080px}
.brand{color:inherit;text-decoration:none}
.brand small{font-family:var(--f-body);font-size:12px;opacity:.8;margin-left:2px;letter-spacing:0}
.gnav{background:var(--surface);border-bottom:1px solid var(--line)}
.gnav .wrap{max-width:1080px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:0}
.gnav a{flex:none;padding:11px 10px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.gnav a[aria-current="page"],.gnav a:hover{color:var(--ink);border-bottom-color:var(--amber)}
main.wrap{max-width:1080px;padding-block:22px 64px}
.narrow{max-width:760px;margin:0 auto;width:100%}
.crumb{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.prose{display:grid;gap:14px;max-width:68ch}
.prose h2{font-size:21px;margin-top:10px}
.prose h3{font-size:17px}
.prose ul,.prose ol{margin:0;padding-left:20px;display:grid;gap:6px}
.sec{display:grid;gap:12px}
.sec>h2{font-size:21px}
footer.site{border-top:1px solid var(--line);background:var(--surface);margin-top:40px}
footer.site .wrap{max-width:1080px;padding-block:24px 40px;display:grid;gap:10px;font-size:13px;color:var(--muted)}
footer.site nav{display:flex;gap:14px;flex-wrap:wrap}
footer.site a{color:var(--muted)}
.sos-bar{background:var(--danger);color:#fff}
.sos-bar .wrap{max-width:1080px;display:flex;gap:10px;align-items:center;padding-block:7px;font-size:13.5px;flex-wrap:wrap}
.sos-bar a{color:#fff;font-weight:700}
/* hero */
.hero2{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;overflow:hidden}
.hero2 .copy{display:grid;gap:14px;min-width:0}
.hero2 h1{font-family:var(--f-display);font-weight:400;font-size:52px;line-height:1.1;letter-spacing:.01em}
.hero2 h1 em{font-style:normal;color:var(--danger)}
.hero2 .sub{font-size:16.5px;color:var(--muted);max-width:42ch}
.hero2 .ctas{display:flex;gap:10px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:12px 18px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:15.5px}
.cta.main{background:var(--ink);color:var(--bg)}
.cta.red{background:var(--danger);color:#fff}
.cta.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.scene{position:relative;border-radius:12px;overflow:hidden;background:var(--grass);aspect-ratio:1/1;max-width:440px;width:100%;justify-self:center}
.scene svg{width:100%;height:100%;display:block}
.verdict{position:absolute;left:50%;top:4%;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 18px;display:grid;justify-items:center;gap:2px;box-shadow:0 8px 24px #0004;min-width:62%}
.verdict .lab{font-size:12px;letter-spacing:.08em;opacity:.75}
.verdict .num{font-family:var(--f-mono);font-weight:600;font-size:36px;line-height:1.1;white-space:nowrap}
.verdict .num .a{color:var(--amber)} .verdict .num .b{color:#8fb4f2}
.verdict .cap{font-size:12.5px;opacity:.85}
@keyframes carA{0%{transform:translate(0,70px)}35%,100%{transform:translate(0,0)}}
@keyframes carB{0%{transform:translate(-70px,0)}35%,100%{transform:translate(0,0)}}
@keyframes boom{0%,33%{transform:scale(0);opacity:0}40%{transform:scale(1.35);opacity:1}55%,100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,34%{transform:translate(0,0)}36%{transform:translate(3px,-2px)}38%{transform:translate(-3px,2px)}40%,100%{transform:translate(0,0)}}
@keyframes rise{0%,52%{transform:translate(-50%,0) scale(1)}58%{transform:translate(-50%,0) scale(1.08)}64%,100%{transform:translate(-50%,0) scale(1)}}
@keyframes trail{0%{stroke-dashoffset:60}35%,100%{stroke-dashoffset:0}}
.anim .s-carA{animation:carA 6s cubic-bezier(.3,.1,.4,1) infinite}
.anim .s-carB{animation:carB 6s cubic-bezier(.3,.1,.4,1) infinite}
.anim .s-boom{transform-box:fill-box;transform-origin:50% 50%;animation:boom 6s ease-out infinite}
.anim .s-world{animation:shake 6s linear infinite}
.anim .verdict{animation:rise 6s ease-out infinite}
@media (prefers-reduced-motion: reduce){.anim *{animation:none!important}}
/* finder */
.finder{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:16px}
.finder h2{font-size:22px}
.steps-h{display:flex;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.steps-h b{color:var(--ink)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opt{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:12px;text-align:left;cursor:pointer;display:grid;gap:4px;font:inherit;color:var(--ink)}
.opt b{font-size:15.5px}
.opt span{font-size:12.5px;color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--surface)}
.opt svg{width:28px;height:28px}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rcard{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px;text-decoration:none;color:var(--ink)}
.rcard:hover{border-color:var(--ink)}
.rcard .th{width:84px;height:84px;border-radius:7px;overflow:hidden;background:var(--grass)}
.rcard .th svg{width:100%;height:100%;display:block}
.rcard .tt{font-weight:700;font-size:14px;line-height:1.4}
.rcard .rt{font-family:var(--f-mono);font-size:13px;font-weight:600}
.searchrow{display:flex;gap:8px}
.searchrow input{flex:1;min-width:0}
.hint{font-size:12.5px;color:var(--muted)}
.hint button{border:0;background:var(--sunk);border-radius:999px;padding:2px 9px;margin:2px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
/* home blocks */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:6px;text-decoration:none;color:var(--ink);align-content:start}
a.box:hover{border-color:var(--ink)}
.box b{font-size:16px}
.box p{font-size:13.5px;color:var(--muted)}
.box .k{font-family:var(--f-mono);font-size:26px;font-weight:600;color:var(--danger);line-height:1.1}
.catcards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.catcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);display:grid;gap:4px}
.catcard:hover{border-color:var(--ink)}
.catcard b{font-size:16px}.catcard span{font-size:13px;color:var(--muted)}
/* case page */
.answer{background:var(--ink);color:var(--bg);border-radius:14px;padding:18px;display:grid;gap:10px}
.answer .lab{font-size:12.5px;letter-spacing:.06em;opacity:.75}
.answer .big{font-family:var(--f-mono);font-weight:600;font-size:34px;line-height:1.15}
.answer .big .a{color:var(--amber)} .answer .big .b{color:#8fb4f2}
.answer .who{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.answer .who i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.answer .bar{border:1px solid #fff3}
.caselayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);display:grid;gap:12px}
.figure{background:var(--grass);border-radius:12px;overflow:hidden}
.figure svg{width:100%;height:auto;display:block}
.todo{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.todo li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.todo li::before{content:"";width:16px;height:16px;border:2px solid var(--sign);border-radius:4px;margin-top:3px}
.related{display:grid;gap:8px}
.verify{border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 10%,var(--surface));border-radius:10px;padding:12px 14px;font-size:14px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
.table th{font-size:12.5px;color:var(--muted);font-weight:700}
.tablewrap{overflow-x:auto}
.law-list{display:grid;gap:8px;counter-reset:l;list-style:none;padding:0;margin:0}
.law-list li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.law-list li::before{counter-increment:l;content:counter(l);font-family:var(--f-mono);font-weight:600;font-size:18px;color:var(--danger)}
.manual{display:grid;gap:14px}
.mstep{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.mstep .stage{aspect-ratio:16/10}
@media (max-width:900px){.hero2{grid-template-columns:1fr;padding:18px}.hero2 h1{font-size:40px}.caselayout{grid-template-columns:1fr}.side{position:static}.catcards{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}.mstep{grid-template-columns:1fr}}
@media (max-width:520px){.sos-bar .mid{display:none}.hero2 .scene{order:-1;max-width:310px}.verdict{padding:6px 12px;min-width:0}.verdict .num{font-size:24px}.verdict .cap{display:none}.hero2{gap:16px}.grid2{grid-template-columns:1fr}.hero2 h1{font-size:36px}.answer .big{font-size:28px}.verdict .num{font-size:30px}}