:root { color-scheme: light; --ink:#071b31; --navy:#082b51; --blue:#0877e5; --ice:#eaf4ff; --line:#cad7e5; --ok:#0c7a58; }
* { box-sizing:border-box; }
body { margin:0; background:#f4f7fa; color:var(--ink); font-family:Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; }
main { width:min(980px, calc(100% - 32px)); margin:auto; padding:64px 0 40px; }
header { padding:34px 0 52px; border-top:8px solid var(--navy); }
.eyebrow,.step { margin:0 0 12px; color:var(--blue); font-size:.74rem; font-weight:800; letter-spacing:.15em; }
h1 { margin:0; max-width:760px; font-size:clamp(3rem,9vw,6.6rem); line-height:.88; letter-spacing:-.07em; }
h1 span { color:var(--blue); }
.lede { max-width:660px; margin:30px 0 0; font-size:1.08rem; line-height:1.7; color:#42566b; }
.panel,#result { background:white; border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 16px 40px rgba(8,43,81,.08); }
.controls { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; }
h2 { margin:0; font-size:1.7rem; letter-spacing:-.04em; }
button,.file-button { min-height:48px; padding:13px 18px; border:1px solid var(--navy); border-radius:8px; background:white; color:var(--navy); font:inherit; font-weight:750; cursor:pointer; text-align:center; }
button:hover,.file-button:hover { background:var(--ice); }
input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.primary { grid-column:1/-1; background:var(--navy); color:white; border-color:var(--navy); }
.primary:hover { background:#0d4076; }
button:disabled { opacity:.45; cursor:not-allowed; }
.hint,.selected { grid-column:1/-1; margin:0; color:#5d7082; font-size:.9rem; }
.selected { padding:12px; background:var(--ice); border-radius:8px; color:var(--navy); }
.status { margin:22px 0; padding:18px 20px; border-left:5px solid var(--blue); background:white; }
#result { margin-top:26px; }
.result-head { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.badge { padding:8px 11px; border-radius:999px; background:#ddf6ed; color:var(--ok); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.hero-result { margin:28px 0 18px; display:grid; grid-template-columns:repeat(3,1fr); background:var(--navy); color:white; border-radius:14px; overflow:hidden; }
.hero-result div { padding:24px; border-right:1px solid rgba(255,255,255,.18); }
.hero-result small,.metric small { display:block; opacity:.66; margin-bottom:8px; }
.hero-result strong { font-size:1.55rem; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-width:1px 0 0 1px; }
.metric { min-height:110px; padding:20px; border:1px solid var(--line); border-width:0 1px 1px 0; }
.metric strong { font-size:1.35rem; }
details { margin-top:22px; color:#42566b; }
summary { cursor:pointer; font-weight:700; }
pre { white-space:pre-wrap; word-break:break-all; padding:16px; background:#f2f5f8; border-radius:8px; }
footer { margin-top:34px; color:#718293; font-size:.82rem; }
@media (max-width:720px) { main{padding-top:28px}.controls{grid-template-columns:1fr}.file-button,button{width:100%}.hero-result,.metrics{grid-template-columns:1fr 1fr}.hero-result div{border-bottom:1px solid rgba(255,255,255,.18)} }
@media (max-width:460px) { .hero-result,.metrics{grid-template-columns:1fr} .panel,#result{padding:20px} }