:root { --bg:#0b0e13; --panel:rgba(14,18,25,.86); --line:rgba(255,255,255,.09); --text:#e6edf3; --muted:#8b949e; --accent:#ffcc33; --red:#ff5d5d; --green:#3ddc97; --blue:#5aa9ff; --orange:#ff9f43; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; }
a { color:#9ecbff; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- 앱 영역 (첫 화면) ---------- */
#app { position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; }
#gl, #ov { position:absolute; inset:0; width:100%; height:100%; display:block; }
#ov { pointer-events:none; }
#panel { position:absolute; left:16px; top:16px; bottom:16px; width:330px; padding:18px 18px 14px; overflow:auto; z-index:3; }
#panel .crumb { font-size:12px; color:var(--muted); text-decoration:none; }
#panel .crumb:hover { color:var(--text); }
#panel h1 { font-size:22px; margin:6px 0 4px; font-weight:800; letter-spacing:-.3px; line-height:1.3; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:2px; }
.lead { color:#b9c2cc; font-size:13.5px; line-height:1.55; margin:6px 0 10px; }
.ctl { margin:13px 0; }
.ctl label { display:flex; justify-content:space-between; gap:8px; font-size:14px; font-weight:600; }
.ctl label b { color:var(--accent); font-variant-numeric: tabular-nums; white-space:nowrap; }
.ctl small { color:var(--muted); font-size:12px; display:block; margin-top:3px; line-height:1.45; }
input[type=range] { width:100%; accent-color: var(--accent); margin-top:8px; }
select { width:100%; margin-top:8px; padding:9px 10px; border-radius:10px; background:#1b2230; color:var(--text); border:1px solid var(--line); font-family:inherit; font-size:14px; }
.btns { display:flex; gap:8px; margin-top:14px; }
button { font-family:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line); background:#1b2230; color:var(--text); padding:10px 12px; font-size:14px; font-weight:700; }
button.primary { background:var(--accent); color:#111; border:none; flex:1; }
button:hover { filter:brightness(1.1); }
.speed { display:flex; gap:6px; margin-top:10px; }
.speed button { flex:1; padding:7px 0; font-size:13px; }
.speed button.on { background:#2d3748; border-color:var(--accent); color:var(--accent); }
#history { margin-top:14px; font-size:12.5px; }
#history table { width:100%; border-collapse:collapse; }
#history th, #history td { padding:5px 4px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric: tabular-nums; }
#history th:first-child, #history td:first-child { text-align:left; }
#history th { color:var(--muted); font-weight:600; }
.foot { margin-top:14px; font-size:12px; color:var(--muted); line-height:1.6; }
.foot a { text-decoration:none; }
#hud { position:absolute; top:16px; right:16px; left:362px; display:flex; gap:10px; justify-content:flex-end; z-index:2; pointer-events:none; flex-wrap:wrap; }
.kpi { padding:10px 14px; min-width:104px; }
.kpi .k { font-size:12px; color:var(--muted); }
.kpi .v { font-size:24px; font-weight:800; font-variant-numeric: tabular-nums; margin-top:2px; white-space:nowrap; }
#chartBox { position:absolute; right:16px; bottom:16px; width:380px; padding:12px 14px 8px; z-index:2; }
#chartBox .t { font-size:13px; font-weight:700; display:flex; justify-content:space-between; gap:8px; }
#chartBox .t span { color:var(--muted); font-weight:500; font-size:12px; }
#chart { width:100%; height:120px; display:block; margin-top:6px; }
#legend { position:absolute; left:362px; bottom:16px; padding:10px 14px; font-size:12px; color:#c9d1d9; z-index:2; display:flex; gap:14px; flex-wrap:wrap; max-width:560px; }
#legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-2px; }
#result { position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:5; background:rgba(5,7,10,.55); }
#result .box { width:min(560px, 92vw); padding:24px; }
#result h2 { margin:0 0 4px; font-size:24px; }
#result .sub { color:var(--muted); font-size:13px; margin-bottom:14px; }
.row { display:flex; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); font-size:16px; }
.row b { font-variant-numeric: tabular-nums; text-align:right; }
.delta { font-size:12px; margin-left:8px; font-weight:600; }
.up { color:var(--red); } .down { color:var(--green); }
#result .btns button { flex:1; }
#toast { position:absolute; left:50%; top:22px; transform:translateX(-50%); padding:10px 16px; z-index:4; font-size:14px; transition:opacity .5s; }
.scrollhint { position:absolute; right:16px; bottom:196px; z-index:2; font-size:12px; color:#c9d1d9; text-decoration:none; padding:6px 12px; }

/* ---------- 본문 (SEO/GEO) ---------- */
#doc { max-width:860px; margin:0 auto; padding:56px 20px 80px; line-height:1.75; font-size:16.5px; color:#d6dde5; }
#doc h2 { font-size:24px; margin:44px 0 12px; color:#fff; letter-spacing:-.3px; }
#doc h3 { font-size:18px; margin:26px 0 8px; color:#fff; }
#doc .tldr { background:#141a23; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:16px 20px; }
#doc .tldr p { margin:6px 0; }
#doc table { width:100%; border-collapse:collapse; margin:12px 0; font-size:15px; }
#doc th, #doc td { border-bottom:1px solid var(--line); padding:9px 8px; text-align:right; font-variant-numeric: tabular-nums; }
#doc th:first-child, #doc td:first-child { text-align:left; }
#doc th { color:var(--muted); font-weight:600; }
#doc details { border-bottom:1px solid var(--line); padding:10px 0; }
#doc summary { cursor:pointer; font-weight:700; color:#fff; }
#doc .muted { color:var(--muted); font-size:14px; }
#doc .others { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:12px; }
#doc .others a { display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--text); background:#121821; }
#doc .others a b { display:block; margin-bottom:4px; }
#doc .others a span { color:var(--muted); font-size:13.5px; }
footer.site { border-top:1px solid var(--line); color:var(--muted); font-size:13px; text-align:center; padding:28px 16px 40px; }

@media (max-width: 860px) {
  #panel { left:8px; right:8px; top:auto; bottom:8px; width:auto; max-height:46%; padding:14px; }
  #hud { left:8px; right:8px; top:8px; justify-content:flex-start; gap:6px; }
  .kpi { padding:6px 10px; min-width:0; flex:1 1 28%; }
  .kpi .v { font-size:17px; }
  #chartBox, #legend, .scrollhint { display:none; }
  #panel .lead { display:none; }
  #doc { padding-top:36px; font-size:16px; }
}

/* ---------- 허브 ---------- */
.hub { max-width:1080px; margin:0 auto; padding:56px 20px 40px; }
.hub h1 { font-size:36px; margin:8px 0 10px; letter-spacing:-.5px; }
.hub .lead { font-size:17px; max-width:720px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-top:28px; }
.sim-card { display:block; text-decoration:none; color:var(--text); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#121821; transition:transform .15s; }
.sim-card:hover { transform:translateY(-2px); border-color:rgba(255,204,51,.4); }
.sim-card img { width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; background:#1b2230; }
.sim-card .b { padding:14px 16px 18px; }
.sim-card .k { color:var(--accent); font-size:12px; font-weight:700; }
.sim-card h2 { font-size:19px; margin:4px 0 6px; }
.sim-card p { color:#aab4bf; font-size:14.5px; line-height:1.55; margin:0; }