:root {
  color-scheme: dark;
  --bg: #05090b;
  --panel: rgba(9, 15, 17, 0.94);
  --line: rgba(196, 229, 216, 0.14);
  --muted: #93a39d;
  --text: #edf7f3;
  --mint: #4de0aa;
  --cyan: #58c7f3;
  --amber: #ffd166;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 65% 32%, rgba(35, 94, 78, .16), transparent 35%), linear-gradient(160deg, #071012, #030607 72%); }
#viewer { position: fixed; inset: 0; }
#viewer canvas { display: block; width: 100%; height: 100%; }
.panel { position: fixed; z-index: 10; left: 18px; top: 18px; bottom: 18px; width: min(390px, calc(100vw - 36px)); padding: 20px; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 22px 70px rgba(0,0,0,.5); backdrop-filter: blur(18px); transition: transform .25s ease; }
.panel.collapsed { transform: translateX(calc(-100% + 56px)); overflow: hidden; }
.panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.back { color: var(--mint); text-decoration: none; font-weight: 700; }
button, select, input { font: inherit; }
button, select { border: 1px solid var(--line); color: var(--text); background: #14201e; border-radius: 9px; padding: 9px 11px; cursor: pointer; }
button:hover, select:hover { border-color: rgba(77,224,170,.55); }
.eyebrow { margin: 22px 0 5px; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.subtitle { margin: 7px 0 16px; color: var(--muted); font-size: 13px; }
.profile-nav { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; margin-bottom: 18px; background: #0d1515; border: 1px solid var(--line); border-radius: 11px; }
.profile-nav a { padding: 8px; border-radius: 8px; color: var(--muted); text-align: center; text-decoration: none; font-size: 13px; font-weight: 700; }
.profile-nav a.active { color: #04100c; background: var(--mint); }
.section { padding: 16px 0; border-top: 1px solid var(--line); }
.section h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font-size: 14px; }
.section h2 small { color: var(--muted); font-weight: 500; }
.control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px; margin: 9px 0; color: #dce9e4; font-size: 13px; }
.control.stack { grid-template-columns: 1fr; }
.control input[type="range"] { width: 100%; accent-color: var(--mint); }
.control input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--mint); }
.control output { color: var(--mint); font-variant-numeric: tabular-nums; }
.button-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.button-row.three { grid-template-columns: repeat(3, 1fr); }
.button-row button { font-size: 12px; padding: 9px 6px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.metrics div { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.metrics dt { color: var(--muted); font-size: 11px; }
.metrics dd { margin: 4px 0 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.callout { padding: 12px; margin: 10px 0; border: 1px solid rgba(88,199,243,.3); border-radius: 11px; background: rgba(88,199,243,.08); font-size: 12px; line-height: 1.55; }
.callout strong { color: var(--cyan); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; box-shadow: 0 0 9px currentColor; }
.dot.context { color: #b8c5c1; background: currentColor; }.dot.wood { color: #b9783e; background: currentColor; }.dot.crown { color: #45de69; background: currentColor; }.dot.wire { color: #ff9f1c; background: currentColor; box-shadow: 0 0 12px rgba(255, 159, 28, .8); }
#height-histogram { width: 100%; height: 118px; border: 1px solid var(--line); border-radius: 10px; background: #08100f; }
#status { position: fixed; z-index: 8; right: 18px; bottom: 18px; max-width: min(560px, calc(100vw - 36px)); padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: #b9cac4; background: rgba(8,13,14,.86); font-size: 12px; backdrop-filter: blur(12px); }
.scene-label { position: fixed; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); padding: 5px 8px; border: 1px solid; border-radius: 7px; color: white; background: rgba(5,8,9,.88); font-size: 11px; white-space: nowrap; }
.point-readout { min-height: 44px; color: #c8d8d2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.5; }
.hidden-by-profile { display: none !important; }

.landing { overflow: auto; }
.landing-shell { position: relative; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 8vh 0 6vh; }
.landing-shell h1 { max-width: 780px; font-size: clamp(34px, 5vw, 68px); }
.landing-lead { max-width: 720px; margin: 18px 0 42px; color: #adc0b9; font-size: 17px; line-height: 1.7; }
.variant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.variant-card { min-height: 300px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; color: var(--text); text-decoration: none; background: rgba(12,21,21,.8); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.variant-card:hover { transform: translateY(-5px); border-color: rgba(77,224,170,.7); background: rgba(16,30,28,.95); }
.variant-card.visual:hover { border-color: rgba(255,209,102,.75); }.variant-card.analysis:hover { border-color: rgba(88,199,243,.75); }
.variant-no { color: var(--muted); font-size: 12px; letter-spacing: .15em; }
.variant-card h2 { margin: 44px 0 10px; font-size: 29px; }
.variant-card p { min-height: 90px; color: #a8b9b3; line-height: 1.65; }
.variant-card strong { color: var(--mint); }.variant-card.visual strong { color: var(--amber); }.variant-card.analysis strong { color: var(--cyan); }
.landing-note { margin-top: 22px; color: var(--muted); font-size: 12px; }

@media (max-width: 820px) {
  .variant-grid { grid-template-columns: 1fr; }
  .variant-card { min-height: 220px; }
  .variant-card h2 { margin-top: 22px; }
  .variant-card p { min-height: auto; }
  .panel { width: min(360px, calc(100vw - 24px)); left: 12px; top: 12px; bottom: 12px; }
}