/* QUATRIX — Quant × Matrix. 어두운 무대 위에 숫자와 빛만 남긴다. */
:root, [data-theme="dark"] {
  --bg: #06070B;
  --bg-2: #0B0D13;
  --panel: rgba(255, 255, 255, .032);
  --panel-solid: #0E1017;
  --stroke: rgba(255, 255, 255, .08);
  --stroke-2: rgba(255, 255, 255, .17);
  --tx: #F4F5F7;
  --tx-2: rgba(244, 245, 247, .66);
  --tx-3: rgba(244, 245, 247, .46);
  --ion: #8EA2FF;
  --ion-2: #DCE3FF;
  --ion-deep: #3A52F5;
  --up: #5BE3B3;
  --down: #FF8878;
  --pill-bg: #F4F5F7;
  --pill-tx: #06070B;
  --glow: rgba(88, 110, 255, .2);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F4F4F1;
  --bg-2: #ECECE8;
  --panel: #FFFFFF;
  --panel-solid: #FFFFFF;
  --stroke: rgba(11, 12, 18, .09);
  --stroke-2: rgba(11, 12, 18, .2);
  --tx: #0B0C12;
  --tx-2: rgba(11, 12, 18, .66);
  --tx-3: rgba(11, 12, 18, .5);
  --ion: #3049EE;
  --ion-2: #1C2FB5;
  --ion-deep: #2036C9;
  --up: #08795A;
  --down: #CF3A27;
  --pill-bg: #0B0C12;
  --pill-tx: #F4F4F1;
  --glow: rgba(48, 73, 238, .08);
  --shadow: 0 24px 60px -30px rgba(11, 12, 18, .25);
  color-scheme: light;
}
:root {
  --r: 24px;
  --r-s: 14px;
  --sans: "Geist", "Wanted Sans Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --w: 1320px;
  --gut: clamp(18px, 3.2vw, 44px);
  --top: 72px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--tx); font: 400 15px/1.6 var(--sans); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ion); outline-offset: 2px; }
.skip { position: fixed; left: -999px; top: 8px; z-index: 99; background: var(--pill-bg); color: var(--pill-tx); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--tx-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-size: .92em; }

/* 무대 조명 */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 46% at 50% -8%, var(--glow), transparent 70%); }

/* ── 상단 ── */
.top { position: sticky; top: 0; z-index: 40; height: var(--top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--gut); background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.top.scrolled { border-bottom-color: var(--stroke); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 500; font-size: 13px; letter-spacing: .26em; justify-self: start; }
.qm { width: 24px; height: 24px; fill: currentColor; flex: none; }
.nav { position: relative; display: flex; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--stroke); }
.nav a { position: relative; z-index: 1; padding: 7px 17px; border-radius: 999px; font-size: 14px; font-weight: 450; color: var(--tx-2); transition: color .25s; white-space: nowrap; }
.nav a:hover { color: var(--tx); }
.nav a[aria-current="page"] { color: var(--pill-tx); font-weight: 500; }
.nav-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--pill-bg); opacity: 0; transition: transform .5s var(--ease), width .5s var(--ease), opacity .25s; }
.top-r { display: flex; align-items: center; gap: 6px; justify-self: end; }
.icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--tx-2); transition: color .2s, background .2s; }
.icon:hover { color: var(--tx); background: var(--panel); }
.icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* 알약 버튼 */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px; font-weight: 500; font-size: 15px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--stroke-2); transition: transform .25s var(--ease), background .2s, color .2s, box-shadow .2s, opacity .2s; }
.pill:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--tx-3); }
.pill:active { transform: scale(.98); }
.pill.solid { background: var(--pill-bg); color: var(--pill-tx); box-shadow: none; }
.pill.solid:hover { background: var(--pill-bg); opacity: .88; }
.pill.sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.pill:disabled { color: var(--tx-3); box-shadow: inset 0 0 0 1px var(--stroke); cursor: not-allowed; background: none; opacity: 1; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--stroke); }
.seg button { min-height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 450; color: var(--tx-2); white-space: nowrap; transition: background .2s, color .2s; }
.seg button:hover { color: var(--tx); }
.seg button[aria-pressed="true"] { background: var(--pill-bg); color: var(--pill-tx); font-weight: 500; }
.seg.lg button { min-height: 40px; padding: 0 20px; font-size: 15px; }

/* 상태 표시 */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-2); white-space: nowrap; }
.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.4s var(--ease) infinite; }
.live.warn i { background: #F1B85C; }
.live.late i, .live.snap i { background: var(--tx-3); }
.live.late i::after, .live.snap i::after { display: none; }
@keyframes ping { to { transform: scale(3.2); opacity: 0; } }

/* ── 공통 레이아웃 ── */
.view { display: none; }
.view.on { display: block; animation: viewin .7s var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } }
.page { width: min(100%, var(--w)); margin: 0 auto; padding: clamp(20px, 3.4vw, 44px) var(--gut) 40px; display: flex; flex-direction: column; gap: clamp(36px, 5vw, 72px); }
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ph h1 { font-weight: 450; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -.04em; }
.ph .sub { margin-top: 14px; font-size: clamp(15px, 1.3vw, 18px); color: var(--tx-2); max-width: 40em; }
.ph .act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.sec-h h2 { font-weight: 500; font-size: clamp(21px, 2vw, 26px); letter-spacing: -.025em; }
.sec-h a, .sec-h small { font-size: 14px; color: var(--tx-2); }
.sec-h a:hover { color: var(--tx); }
.panel { position: relative; border-radius: var(--r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--stroke); overflow: hidden; }
[data-theme="light"] .panel { box-shadow: inset 0 0 0 1px var(--stroke), 0 1px 2px rgba(11, 12, 18, .03); }
.panel.pad { padding: clamp(20px, 2.2vw, 30px); }
.panel.lit::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 70%); }
.panel.lit:hover::before { opacity: 1; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.g3 { grid-column: span 3; } .g4 { grid-column: span 4; } .g5 { grid-column: span 5; } .g6 { grid-column: span 6; } .g7 { grid-column: span 7; } .g8 { grid-column: span 8; } .g12 { grid-column: span 12; }
.k { font-size: 13px; color: var(--tx-2); line-height: 1.4; }
.note { font-size: 14px; color: var(--tx-2); }
.fine { font-size: 12.5px; color: var(--tx-3); line-height: 1.55; }
.num { font-weight: 300; letter-spacing: -.045em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.num small { font-size: .3em; letter-spacing: 0; margin-left: .35em; font-weight: 400; color: var(--tx-2); }
.n-xxl { font-size: clamp(60px, 9.4vw, 136px); }
.n-xl { font-size: clamp(50px, 6.6vw, 92px); }
.n-lg { font-size: clamp(36px, 3.8vw, 52px); }
.n-md { font-size: clamp(27px, 2.6vw, 36px); font-weight: 350; letter-spacing: -.035em; }
.grad { background: linear-gradient(120deg, var(--ion-2), var(--ion) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot { width: min(100%, var(--w)); margin: 24px auto 0; padding: 32px var(--gut) 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--tx-3); position: relative; }
.foot::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: var(--stroke); }
.foot .brand { color: var(--tx-2); font-size: 12px; }
.foot .qm { width: 20px; height: 20px; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot nav a { color: var(--tx-2); }
.foot nav a:hover { color: var(--tx); }

/* 스크롤 등장 */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.rv.in { opacity: 1; transform: none; }

/* ── 랜딩 ── */
.landing { --bg: #06070B; --panel: rgba(255, 255, 255, .032); --stroke: rgba(255, 255, 255, .08); --stroke-2: rgba(255, 255, 255, .17); --tx: #F4F5F7; --tx-2: rgba(244, 245, 247, .66); --tx-3: rgba(244, 245, 247, .46); --ion: #8EA2FF; --ion-2: #DCE3FF; --ion-deep: #3A52F5; --up: #5BE3B3; --down: #FF8878; --pill-bg: #F4F5F7; --pill-tx: #06070B; --glow: rgba(88, 110, 255, .2); background: #06070B; color: var(--tx); }
body[data-view="landing"] { background: #06070B; }
body[data-view="landing"] .top { --bg: #06070B; --panel: rgba(255, 255, 255, .05); --stroke: rgba(255, 255, 255, .1); --stroke-2: rgba(255, 255, 255, .17); --tx: #F4F5F7; --tx-2: rgba(244, 245, 247, .68); --tx-3: rgba(244, 245, 247, .46); --pill-bg: #F4F5F7; --pill-tx: #06070B; color: var(--tx); position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-view="landing"] .top.scrolled { background: rgba(6, 7, 11, .72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.hero { position: relative; height: max(100svh, 720px); overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; background: #06070B; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.hero canvas.on { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #06070B 0, #06070B 44%, rgba(6, 7, 11, .72) 54%, transparent 68%), linear-gradient(to top, #06070B 0, rgba(6, 7, 11, .7) 10%, transparent 26%); }
.hero-in { position: relative; z-index: 2; padding: clamp(112px, 15vh, 156px) var(--gut) 0; display: flex; flex-direction: column; align-items: center; }
.kick { font-size: 12px; font-weight: 500; letter-spacing: .34em; color: var(--tx-2); margin-bottom: 22px; padding-left: .34em; }
.hero h1 { font-weight: 450; font-size: clamp(42px, 6.8vw, 100px); line-height: 1.04; letter-spacing: -.048em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #fff 10%, var(--ion) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin-top: 22px; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.55; color: var(--tx-2); max-width: 34em; }
.hero .pill:not(.solid) { background: rgba(6, 7, 11, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .pill:not(.solid):hover { background: rgba(30, 33, 44, .7); }
.ctas { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.hero-b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.tick { display: flex; gap: clamp(20px, 3vw, 44px); text-align: left; }
.tick div { display: flex; flex-direction: column; gap: 3px; }
.tick b { font-weight: 400; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -.02em; }
.tick span { font-size: 12.5px; color: var(--tx-2); }
.tick span em { font-style: normal; margin-left: 6px; }
.cap { font-size: 12.5px; line-height: 1.5; color: var(--tx-3); text-align: right; }
.band { width: min(100%, var(--w)); margin: 0 auto; padding: clamp(72px, 10vw, 148px) var(--gut) 0; }
.band h2 { font-weight: 450; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.04em; max-width: 15em; }
.band .sub { margin-top: 16px; font-size: clamp(15px, 1.3vw, 18px); color: var(--tx-2); max-width: 36em; }
.band .panel { margin-top: clamp(28px, 4vw, 52px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 52px); }
.bento .panel { margin: 0; min-height: 360px; padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; justify-content: space-between; gap: 26px; transition: box-shadow .3s; }
.bento .panel:hover { box-shadow: inset 0 0 0 1px var(--stroke-2); }
.bento h3 { font-weight: 500; font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -.028em; }
.bento p { margin-top: 8px; color: var(--tx-2); max-width: 30em; }
.b-more { font-size: 14px; color: var(--tx-2); display: inline-flex; gap: 8px; transition: color .2s, gap .3s var(--ease); }
.panel:hover .b-more { color: var(--tx); gap: 12px; }
.hero80 { font-weight: 300; font-size: clamp(90px, 13vw, 186px); line-height: .9; letter-spacing: -.06em; }
.hero80 small { font-size: .32em; letter-spacing: -.01em; margin-right: .22em; font-weight: 400; vertical-align: .9em; color: var(--tx-2); -webkit-text-fill-color: var(--tx-2); }
.mini-px { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.spark-wrap { height: 120px; margin: 0 calc(clamp(22px, 2.6vw, 34px) * -1) -8px; }
.lessons-dots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 8px; max-width: 380px; }
.lessons-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--ion); opacity: calc(.25 + var(--o) * .75); }
.exlist { font-weight: 300; font-size: clamp(26px, 3.2vw, 44px); letter-spacing: -.035em; line-height: 1.2; color: var(--tx); max-width: none !important; margin: 0 !important; }
.exlist span { color: var(--tx-3); margin: 0 .34em; }
.closing { padding: clamp(90px, 13vw, 190px) var(--gut); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.closing h2 { font-weight: 450; font-size: clamp(36px, 6vw, 88px); line-height: 1.06; letter-spacing: -.045em; }
.closing p { color: var(--tx-2); max-width: 32em; font-size: clamp(15px, 1.3vw, 18px); }

/* ── 행렬 ── */
.mx-wrap { padding: clamp(18px, 2.2vw, 30px); }
.mx-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mx-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--tx-3); }
.mx-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mx-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--ion); }
.mx-legend i.neg { background: none; box-shadow: inset 0 0 0 1.5px var(--down); }
.mx-legend i.est { background: none; border: 1.5px dashed var(--ion); }
.mx-coin { display: none; margin-bottom: 12px; }
.mx table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mx th { font-weight: 400; padding: 0; }
.mx .rowh { width: 96px; }
.mx .coinh { padding-bottom: 12px; text-align: center; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.mx .coinh span { display: block; padding-bottom: 10px; margin: 0 12px; border-bottom: 1px solid var(--stroke); }
.mx thead button { display: block; width: 100%; padding: 2px 0 10px; text-align: center; font-size: 12px; color: var(--tx-3); transition: color .2s; }
.mx thead button:hover, .mx thead th.on button { color: var(--tx); }
.mx thead button.sorted { color: var(--ion); }
.mx thead button.sorted::after { content: " ↓"; }
.mx thead button.sorted.asc::after { content: " ↑"; }
.mx tbody th { text-align: left; font-size: 14px; color: var(--tx-2); padding-left: 2px; transition: color .2s; white-space: nowrap; }
.mx tbody tr:hover th { color: var(--tx); }
.mx td { height: var(--mx-h, clamp(50px, 5vw, 66px)); text-align: center; padding: 0; cursor: default; }
.mx td .wrap { display: grid; place-items: center; height: 100%; }
.dot { display: block; width: calc(var(--s, 0) * var(--mx-d, clamp(26px, 3.2vw, 44px))); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--ion-2), var(--ion) 52%, var(--ion-deep)); transition: width .9s var(--ease), opacity .25s, transform .35s var(--ease); transition-delay: calc(var(--dl, 0) * 18ms), 0s, 0s; }
[data-theme="dark"] .dot, .landing .dot { box-shadow: 0 0 calc(var(--s, 0) * 26px) rgba(100, 124, 255, .38); }
.mx td.neg .dot { background: none; box-shadow: inset 0 0 0 1.5px var(--down); }
.mx td.est .dot { background: none; box-shadow: none; border: 1.5px dashed var(--ion); }
.mx td.na .dot { width: 3px; background: var(--tx-3); box-shadow: none; }
.mx tbody:hover .dot { opacity: .34; }
.mx tbody tr:hover .dot, .mx tbody td.col .dot { opacity: .72; }
.mx tbody td:hover .dot { opacity: 1; transform: scale(1.14); }
.tip { position: fixed; z-index: 60; transform: translate(-50%, calc(-100% - 12px)); padding: 9px 13px; border-radius: 12px; background: var(--panel-solid); box-shadow: inset 0 0 0 1px var(--stroke-2), var(--shadow); font-size: 12.5px; color: var(--tx-2); white-space: nowrap; pointer-events: none; }
.tip b { display: block; color: var(--tx); font-weight: 500; font-size: 16px; letter-spacing: -.02em; }

/* ── 디스커버 ── */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: stretch; }
.stage-m { position: relative; min-height: 560px; padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.stage-px { position: relative; z-index: 1; margin-top: clamp(20px, 3vw, 36px); }
.stage-px .chg { margin-top: 12px; font-size: clamp(15px, 1.4vw, 19px); display: flex; gap: 10px; align-items: baseline; }
.stage-chart { position: absolute; left: 0; right: 0; bottom: 96px; height: 32%; pointer-events: none; }
.stage-chart svg { width: 100%; height: 100%; overflow: visible; }
.stage-meta { position: relative; z-index: 1; margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.stage-meta dd { font-size: clamp(15px, 1.4vw, 19px); letter-spacing: -.02em; margin-top: 2px; }
.stage-s { display: flex; flex-direction: column; gap: 14px; }
.stage-s .pb { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 210px; }
.stage-s .pb .big { font-weight: 300; font-size: 56px; letter-spacing: -.04em; line-height: 1; color: var(--tx-3); }
.quick { display: flex; flex-direction: column; }
.quick a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px clamp(20px, 2.2vw, 26px); font-size: 15px; border-bottom: 1px solid var(--stroke); transition: background .2s; }
.quick a:last-child { border-bottom: 0; }
.quick a:hover { background: var(--panel); }
.quick a span:last-child { color: var(--tx-3); transition: transform .3s var(--ease), color .2s; }
.quick a:hover span:last-child { transform: translateX(3px); color: var(--tx); }
.nrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 15px clamp(20px, 2.2vw, 26px); border-bottom: 1px solid var(--stroke); transition: background .2s; }
.nrow:last-child { border-bottom: 0; }
.nrow:hover { background: var(--panel); }
.nrow b { font-weight: 450; font-size: 15px; line-height: 1.45; }
.nrow .t { font-size: 12.5px; color: var(--tx-3); white-space: nowrap; }
.fold summary { padding: 14px clamp(20px, 2.2vw, 26px); font-size: 14px; color: var(--tx-2); cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { color: var(--tx); }
.fold[open] summary { border-bottom: 1px solid var(--stroke); }
.pick { display: block; padding: 18px clamp(20px, 2.2vw, 26px); border-bottom: 1px solid var(--stroke); transition: background .2s; }
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--panel); }
.pick b { display: block; font-weight: 450; font-size: 15px; line-height: 1.45; }
.pick small { font-size: 12.5px; color: var(--tx-3); }

/* ── 터미널 ── */
.t-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.t-price .sym { font-size: 14px; color: var(--tx-2); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.t-price .line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.t-price .chg { font-size: clamp(16px, 1.5vw, 20px); }
.t-ctrl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.t-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; }
.t-chart { min-width: 0; border-right: 1px solid var(--stroke); }
.chartbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; }
.ohlc { margin-left: auto; font-size: 12.5px; color: var(--tx-3); white-space: nowrap; }
.ohlc b { font-weight: 450; color: var(--tx-2); margin: 0 8px 0 3px; }
.ohlc b.up { color: var(--up); } .ohlc b.down { color: var(--down); }
.chartarea { height: clamp(360px, 46vh, 500px); position: relative; }
#lwc { position: absolute; inset: 0; }
.t-rail { display: flex; flex-direction: column; }
.t-rail > div { flex: 1; padding: 15px 22px; border-bottom: 1px solid var(--stroke); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.t-rail > div:last-child { border-bottom: 0; }
.t-rail b { font-weight: 400; font-size: 19px; letter-spacing: -.02em; }
.oi-strip { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: center; border-top: 1px solid var(--stroke); }
.oi-txt { padding: 16px 22px; }
.oi-c { height: 88px; position: relative; }
.lq { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 18px 12px; }
.lq-c { position: relative; flex: 1; min-height: 0; cursor: crosshair; }
.lq-c canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lq-cur { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--tx-3); pointer-events: none; }
.lq-cur span { position: absolute; top: 0; left: 8px; background: var(--pill-bg); color: var(--pill-tx); font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lq-cur.flip span { left: auto; right: 8px; }
.lq-ax { display: flex; justify-content: space-between; padding-top: 8px; font-size: 12px; color: var(--tx-3); }
.lq-leg { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 8px; font-size: 12.5px; color: var(--tx-2); }
.lq-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.lq-tip { position: absolute; top: 30px; padding: 9px 13px; border-radius: 12px; background: var(--panel-solid); box-shadow: inset 0 0 0 1px var(--stroke-2), var(--shadow); font-size: 12.5px; line-height: 1.55; color: var(--tx-2); pointer-events: none; z-index: 4; white-space: nowrap; }
.lq-tip b { display: block; font-weight: 500; font-size: 14px; color: var(--tx); }
.empty-c { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tx-3); font-size: 14px; text-align: center; padding: 20px; }
.tbl { width: 100%; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 400; font-size: 12.5px; color: var(--tx-3); padding: 16px clamp(14px, 1.8vw, 24px) 10px; white-space: nowrap; }
.tbl td { padding: 13px clamp(14px, 1.8vw, 24px); border-top: 1px solid var(--stroke); }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow .row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; font-size: 14px; }
.flow .v { font-size: 13px; text-align: right; white-space: nowrap; }
.fbar { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--stroke); }
.fbar b { background: var(--up); display: block; border-radius: 99px; }
.fbar s { background: var(--down); display: block; text-decoration: none; border-radius: 99px; }
.fact { font-size: 13.5px; color: var(--tx-2); margin-top: 12px; }
.spark { display: flex; align-items: flex-end; justify-content: space-between; height: 38px; margin-top: 18px; }
.spark i { width: 3px; background: var(--ion); opacity: .85; display: block; min-height: 3px; border-radius: 99px; }
.spark i.neg { background: var(--down); }
.lsbar { display: flex; gap: 2px; height: 6px; margin-top: 18px; border-radius: 99px; overflow: hidden; }
.lsbar b { background: var(--ion); display: block; } .lsbar s { display: block; background: var(--stroke-2); text-decoration: none; }
.temp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.mv .h { font-size: 13px; color: var(--tx-2); margin-bottom: 8px; }
.mv .row { display: flex; justify-content: space-between; font-size: 13.5px; line-height: 2; }
.mv .row b { font-weight: 450; }
.cal .it { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 16px; padding: 15px clamp(20px, 2.2vw, 26px); border-bottom: 1px solid var(--stroke); align-items: baseline; font-size: 15px; }
.cal .it:last-child { border-bottom: 0; }
.cal .t { font-size: 13.5px; color: var(--tx-2); }
.cal .it.next .t { color: var(--ion); }
.cal .it.next b::after { content: "다음"; margin-left: 10px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; color: var(--pill-tx); background: var(--pill-bg); vertical-align: 1px; }
.cal b { font-weight: 450; }
.cal .d { color: var(--tx-3); font-size: 13px; margin-left: 12px; }
.cal .st { color: var(--tx-3); font-size: 12px; white-space: nowrap; }

/* ── 마켓맵 ── */
.map-page { gap: 14px; padding-top: clamp(14px, 2vw, 26px); }
.map-page .ph h1 { font-size: clamp(32px, 3.2vw, 44px); }
.map-page .ph { margin-bottom: 6px; align-items: center; }
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-bar .map-ctl { min-width: 0; }
.map-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ms { padding: 13px 16px; display: flex; flex-direction: column; gap: 4px; min-height: 92px; }
.ms .v { font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -.03em; line-height: 1.2; white-space: nowrap; }
.ms .v small { font-size: 13px; letter-spacing: 0; margin-left: 2px; }
.ms .fbar { margin-top: auto; }
.mv-b { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.02em; white-space: nowrap; }
.mv-b img { width: 20px; height: 20px; border-radius: 50%; }
.mv-b b { font-weight: 500; }
.mv-b span { font-size: .78em; }
.map-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tgl { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tx-2); min-height: 38px; padding: 0 6px; }
.tgl i { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--stroke-2); transition: background .2s; }
.tgl i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--pill-bg); transition: transform .3s var(--ease); }
.tgl[aria-checked="true"] i { background: var(--ion); }
.tgl[aria-checked="true"] i::after { transform: translateX(14px); background: #fff; }
.map-stage { position: relative; height: clamp(540px, calc(100svh - 150px), 880px); border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--stroke); }
.map-stage:fullscreen { height: 100vh; border-radius: 0; background: var(--bg); }
#mapHost { position: absolute; inset: 4px; }
.map-fs { flex: none; }
.hm { overflow: hidden; }
.hm-t { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; overflow: hidden; text-align: center; border-radius: 5px; cursor: default; transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), background-color .6s ease, filter .15s; }
.hm-t:hover { filter: brightness(1.16); z-index: 3; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
[data-theme="light"] .hm-t:hover { filter: brightness(.95); box-shadow: inset 0 0 0 1.5px rgba(11, 12, 18, .6); }
.hm-t b { font-weight: 500; letter-spacing: -.02em; line-height: 1.12; white-space: nowrap; }
.hm-t span { opacity: .92; line-height: 1.15; white-space: nowrap; }
.hm-t img { border-radius: 50%; margin-bottom: 3px; }
.hm-l { position: absolute; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 7px; font-size: 12px; overflow: hidden; white-space: nowrap; transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease); }
.hm-l b { font-weight: 500; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; }
.bb canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.mtip { position: fixed; z-index: 65; width: 236px; padding: 14px 16px; border-radius: 16px; background: var(--panel-solid); box-shadow: inset 0 0 0 1px var(--stroke-2), var(--shadow); pointer-events: none; font-size: 13px; }
.mt-h { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.mt-h img { width: 20px; height: 20px; border-radius: 50%; }
.mt-h b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.mt-h span { color: var(--tx-3); font-size: 12px; }
.mt-p { font-size: 25px; font-weight: 300; letter-spacing: -.03em; margin-top: 8px; }
.mtip dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.mtip dt { font-size: 11.5px; color: var(--tx-3); }
.mtip dd { font-size: 13.5px; white-space: nowrap; }
.mt-go { margin-top: 10px; font-size: 12px; color: var(--ion); }

/* ── 페이백 ── */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 460px; }
.calc-in { padding: clamp(24px, 3vw, 42px); display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--stroke); }
.calc-in input[type="number"] { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--stroke-2); font-weight: 300; font-size: clamp(38px, 4.4vw, 60px); letter-spacing: -.04em; padding: 6px 0 12px; outline: none; -moz-appearance: textfield; transition: border-color .2s; }
.calc-in input[type="number"]::-webkit-outer-spin-button, .calc-in input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-in input[type="number"]::placeholder { color: var(--tx-3); opacity: .6; }
.calc-in input[type="number"]:focus { border-color: var(--ion); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; cursor: pointer; margin: 0; }
.range::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: linear-gradient(to right, var(--ion) var(--p, 0%), var(--stroke-2) var(--p, 0%)); }
.range::-moz-range-track { height: 3px; border-radius: 99px; background: var(--stroke-2); }
.range::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--ion); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var(--pill-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--pill-bg); }
.calc-out { position: relative; padding: clamp(24px, 3vw, 42px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow: hidden; }
.calc-out::before { content: ""; position: absolute; right: -20%; bottom: -50%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 68%); pointer-events: none; }
.calc-out > * { position: relative; }
.calc-num { font-weight: 300; font-size: clamp(60px, 9vw, 132px); letter-spacing: -.055em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-num small { font-size: .2em; letter-spacing: 0; margin-left: .4em; font-weight: 400; color: var(--tx-2); -webkit-text-fill-color: var(--tx-2); }
.calc-num.ph { font-size: clamp(24px, 2.6vw, 36px); font-weight: 350; letter-spacing: -.03em; color: var(--tx-2); white-space: normal; line-height: 1.25; }
.split { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.split dd { font-size: 19px; letter-spacing: -.02em; margin-top: 2px; }
.excell { display: flex; flex-direction: column; gap: 34px; min-height: 280px; justify-content: space-between; }
.excell .hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.excell .nm { font-weight: 500; font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -.028em; }
.excell .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; left: 4px; right: 0; top: 4px; height: 1px; background: linear-gradient(to right, var(--ion), var(--stroke) 80%); }
.step { position: relative; padding-top: 28px; }
.step::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ion); box-shadow: 0 0 0 5px var(--bg); }
.step b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.step span { display: block; margin-top: 6px; font-size: 14px; color: var(--tx-2); }
.faq { border-bottom: 1px solid var(--stroke); }
.faq:first-child { border-top: 1px solid var(--stroke); }
.faq summary { padding: 20px 2px; cursor: pointer; font-size: 17px; font-weight: 450; letter-spacing: -.012em; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; color: var(--tx-2); transition: transform .4s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 2px 22px; color: var(--tx-2); max-width: 44em; }

/* ── 아카데미 ── */
.resume { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; min-height: 230px; }
.resume .tt { font-weight: 400; font-size: clamp(26px, 3.3vw, 46px); line-height: 1.14; letter-spacing: -.035em; margin-top: 10px; }
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: var(--stroke-2); }
.ring .fg { stroke: var(--ion); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ring .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .lbl b { font-weight: 300; font-size: 36px; letter-spacing: -.04em; line-height: 1; }
.ring .lbl small { font-size: 12.5px; color: var(--tx-3); margin-top: 3px; }
.lvl { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: clamp(20px, 3vw, 44px); }
.lvl-h { position: sticky; top: 92px; align-self: start; }
.lvl-h .no { font-size: 13px; color: var(--ion); }
.lvl-h h2 { font-weight: 450; font-size: clamp(23px, 2.3vw, 30px); letter-spacing: -.03em; line-height: 1.2; margin-top: 8px; }
.lvl-h p { margin-top: 10px; font-size: 14px; color: var(--tx-2); }
.lvl-h small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--tx-3); }
.lesson { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; width: 100%; min-height: 62px; padding: 10px 2px; border-bottom: 1px solid var(--stroke); text-align: left; transition: padding .3s var(--ease); }
.lesson:first-child { border-top: 1px solid var(--stroke); }
.lesson:hover { padding-left: 8px; }
.lesson .i { font-size: 12.5px; color: var(--tx-3); }
.lesson b { font-weight: 450; font-size: 16px; letter-spacing: -.012em; line-height: 1.4; }
.lesson .en { font-size: 11px; font-weight: 500; color: var(--tx-3); margin-left: 8px; }
.lesson .m { font-size: 13px; color: var(--tx-3); white-space: nowrap; }
.lesson .ck { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--stroke-2); display: grid; place-items: center; color: transparent; transition: background .25s, box-shadow .2s; }
.lesson .ck svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lesson:hover .ck { box-shadow: inset 0 0 0 1px var(--tx-2); }
.lesson.seen .ck { background: var(--ion); box-shadow: none; color: #fff; }
[data-theme="dark"] .lesson.seen .ck { color: #06070B; }
.lesson.seen b { color: var(--tx-3); }
.lesson.next b { color: var(--ion-2); }
.lesson.next .ck { box-shadow: inset 0 0 0 1.5px var(--ion); }
[data-theme="light"] .lesson.next b { color: var(--ion); }
.more-row { padding: 14px 2px; font-size: 14px; color: var(--tx-2); width: 100%; text-align: left; }
.more-row:hover { color: var(--tx); }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 190px; }
.tile .ty { font-size: 12.5px; color: var(--tx-3); display: flex; justify-content: space-between; }
.tile b { font-weight: 450; font-size: 17px; line-height: 1.35; letter-spacing: -.018em; }

/* ── 이벤트 · 기준 · 설정 · 계정 ── */
.void { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: clamp(56px, 10vw, 130px) 20px; }
.void .qm { width: 46px; height: 46px; color: var(--ion); opacity: .85; }
.void h2 { font-weight: 450; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.035em; line-height: 1.15; }
.void p { color: var(--tx-2); }
.ev { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 20px 2px; border-bottom: 1px solid var(--stroke); }
.ev b { font-weight: 500; }
.doc-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); }
.toc { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.toc a { padding: 7px 0; font-size: 14px; color: var(--tx-2); }
.toc a:hover { color: var(--tx); }
.doc { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.doc h3 { font-weight: 450; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.03em; margin-bottom: 18px; }
.doc li { padding: 14px 0; color: var(--tx-2); border-bottom: 1px solid var(--stroke); max-width: 52em; }
.doc li:first-child { border-top: 1px solid var(--stroke); }
.doc p { color: var(--tx-2); max-width: 52em; }
.doc .tbl td { color: var(--tx-2); font-size: 13.5px; vertical-align: top; }
.doc .tbl td:first-child { color: var(--tx); }
.setrow { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--stroke); }
.setrow:last-child { border-bottom: 0; }
.setrow b { font-weight: 500; font-size: 16px; }
.setrow p { font-size: 14px; color: var(--tx-2); margin-top: 2px; }
.narrow { width: min(100%, 560px); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.auth { text-align: center; padding: clamp(30px, 5vw, 56px) clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 26px; }
.auth .qm { width: 44px; height: 44px; margin: 0 auto; color: var(--ion); }
.auth h1 { font-weight: 450; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.18; }
.auth p { color: var(--tx-2); margin-top: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--tx-2); }
.form input, .form select { min-height: 52px; padding: 0 16px; border-radius: var(--r-s); background: var(--panel); border: 0; box-shadow: inset 0 0 0 1px var(--stroke-2); font-size: 16px; color: var(--tx); outline: none; transition: box-shadow .2s; }
.form input:focus, .form select:focus { box-shadow: inset 0 0 0 1.5px var(--ion); }
.form select option { background: var(--panel-solid); color: var(--tx); }
.msg { color: var(--down); font-size: 13.5px; }
.me { display: flex; align-items: center; gap: 16px; }
.av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--ion-2), var(--ion-deep)); color: #06070B; font-size: 21px; font-weight: 500; flex: none; }
.me b { font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.uidrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 18px clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--stroke); }
.uidrow:last-child { border-bottom: 0; }

/* ── 모바일 도크 ── */
.dock { display: none; }

/* ── 검색 ── */
.palette { position: fixed; inset: 0; z-index: 70; background: rgba(4, 5, 8, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; justify-content: center; align-items: flex-start; padding: 96px 16px 16px; animation: viewin .35s var(--ease); }
.palette-box { width: 100%; max-width: 620px; border-radius: 22px; background: var(--panel-solid); box-shadow: inset 0 0 0 1px var(--stroke-2), var(--shadow); overflow: hidden; }
.palette-in { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px 0 20px; }
.palette-in svg { width: 19px; height: 19px; fill: none; stroke: var(--tx-3); stroke-width: 1.5; stroke-linecap: round; flex: none; }
.palette-in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; font-size: 17px; outline: none; }
.palette-res { max-height: 60vh; overflow: auto; }
.palette-res:not(:empty) { border-top: 1px solid var(--stroke); padding: 6px; }
.palette-res button { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 14px; border-radius: 12px; transition: background .15s; }
.palette-res button:hover, .palette-res button:focus-visible { background: var(--panel); outline: none; }
.palette-res small { color: var(--tx-3); font-size: 13px; flex: none; }
.palette-res .none { padding: 14px; color: var(--tx-3); font-size: 14px; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr; }
  .stage-s { flex-direction: row; flex-wrap: wrap; }
  .stage-s > * { flex: 1 1 40%; }
  .stage-s > .pill { flex: 1 1 100%; }
  .t-main { grid-template-columns: 1fr; }
  .t-chart { border-right: 0; border-bottom: 1px solid var(--stroke); }
  .t-rail { flex-direction: row; flex-wrap: wrap; }
  .t-rail > div { flex: 1 1 30%; border-bottom: 0; }
  .oi-strip { grid-template-columns: 1fr; }
  .g3 { grid-column: span 6; } .g5, .g7, .g8, .g4 { grid-column: span 12; } .g6 { grid-column: span 12; }
  .tile.g3 { grid-column: span 6; }
}
@media (max-width: 820px) {
  :root { --top: 60px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body[data-view="landing"] { padding-bottom: 0; }
  .top { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .brand { letter-spacing: .22em; }
  #loginBtn { display: none; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(6, 1fr); padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-top: 1px solid var(--stroke); }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 10.5px; color: var(--tx-3); transition: color .2s; }
  .dock a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .dock a[aria-current="page"] { color: var(--tx); }
  body[data-view="landing"] .dock { display: none; }
  .hero { height: max(100svh, 680px); }
  .hero-in { padding-top: 96px; }
  .hero-b { flex-direction: column; align-items: stretch; }
  .tick { justify-content: space-between; }
  .cap { text-align: left; }
  .bento .panel { grid-column: span 12 !important; min-height: 280px; }
  .map-sum { grid-template-columns: 1fr 1fr; }
  .ms { min-height: 0; }
  .ms .fine { display: none; }
  .map-sum > :first-child { grid-column: 1 / -1; }
  .map-ctl { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scrollbar-width: none; }
  .map-ctl::-webkit-scrollbar { display: none; }
  .map-ctl > * { flex: none; }
  .map-stage { height: 68svh; min-height: 460px; }
  .mx-coin { display: inline-flex; }
  .mx .rowh { width: 82px; }
  .mx[data-coin="BTC"] [data-c]:not([data-c="BTC"]), .mx[data-coin="ETH"] [data-c]:not([data-c="ETH"]), .mx[data-coin="SOL"] [data-c]:not([data-c="SOL"]) { display: none; }
  .mx .coinh { display: none; }
  .mx-top { flex-direction: column; align-items: flex-start; }
  .stage-s { flex-direction: column; flex-wrap: nowrap; }
  .stage-s > *, .stage-s > .pill { flex: none; }
  .stage-s .pb { min-height: 150px; }
  .stage-m { min-height: 0; }
  .stage-meta { margin-top: 0; }
  .stage-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-chart { position: relative; left: auto; right: auto; bottom: auto; height: 120px; margin: 14px calc(clamp(22px, 2.6vw, 34px) * -1) 0; }
  .calc { grid-template-columns: 1fr; min-height: 0; }
  .calc-in { border-right: 0; border-top: 1px solid var(--stroke); order: 2; }
  .calc-out { min-height: 240px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .steps::before { display: none; }
  .resume { grid-template-columns: 1fr; }
  .ring { width: 104px; height: 104px; }
  .lvl { grid-template-columns: 1fr; gap: 16px; }
  .lvl-h { position: static; }
  .lesson { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .lesson .m { display: none; }
  .temp { grid-template-columns: 1fr 1fr; }
  .temp > :first-child { grid-column: 1 / -1; }
  .cal .it { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .cal .st { display: none; }
  .cal .d { display: block; margin-left: 0; }
  .doc-wrap { grid-template-columns: 1fr; }
  .toc { display: none; }
  .ev { grid-template-columns: 1fr; gap: 4px; }
  .uidrow { grid-template-columns: minmax(0, 1fr) auto; }
  .ohlc { margin-left: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .t-rail > div { flex: 1 1 50%; padding: 12px 16px; }
  .chartarea { height: 340px; }
  .foot { padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}