/* Top 3 Crypto 보드. 토큰은 05_프론트/DESIGN-apple.md·시안 2와 같다. 기본 Graphite(다크), Pearl(라이트). */
:root{
  --primary:#2997ff;--ink:#f5f5f7;--ink-80:#d2d2d7;--ink-48:#86868b;
  --canvas:#000;--parchment:#0d0d0f;--pearl:#1d1d1f;--tile:#161617;--hairline:#2c2c2e;--divider:#262628;
  --nav:#000;--on-nav:#fff;--nav-muted:#a1a1a6;
  --up:#ff6b5e;--down:#5ea0ff;--warn:#f0a33c;
  --c-macd:#b39dff;--c-sto:#f5b942;--c-srsi:#2dd4bf;--c-vpci:#a3e635;
  --r-xs:5px;--r-sm:8px;--r-md:11px;--r-lg:18px;--r-pill:9999px;
}
:root[data-theme="light"]{
  --primary:#0066cc;--ink:#1d1d1f;--ink-80:#333;--ink-48:#7a7a7a;
  --canvas:#fff;--parchment:#f5f5f7;--pearl:#fafafc;--tile:#fff;--hairline:#e0e0e0;--divider:#f0f0f0;
  --up:#d6342c;--down:#1f6fd0;--warn:#b25e00;
  --c-macd:#6d4aff;--c-sto:#e07a00;--c-srsi:#0f8f80;--c-vpci:#6f6400;
}
*{box-sizing:border-box}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",system-ui,sans-serif;font-size:17px;line-height:1.47;letter-spacing:-.374px;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;font-weight:600}
p{margin:0}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)}.down{color:var(--down)}.zero{color:var(--ink-48)}

.gnav{position:sticky;top:0;z-index:30;background:var(--nav);color:var(--on-nav);height:44px}
.gnav-in{max-width:1200px;margin:0 auto;padding:0 16px;height:44px;display:flex;align-items:center;gap:14px}
.brand{font-size:19px;font-weight:600;letter-spacing:-.3px;white-space:nowrap}
.tabs{display:flex;gap:2px;background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:3px;margin-left:8px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;color:#e8e8ed;font-size:14px;font-weight:500;padding:5px 16px;border-radius:var(--r-pill);white-space:nowrap;line-height:1.2}
.tabs button.on{background:#fff;color:#1d1d1f;font-weight:600}
.spacer{flex:1}
.mode{display:flex;border:1px solid #3a3a3c;border-radius:var(--r-pill);padding:2px;height:28px}
.mode button{background:none;border:0;color:var(--nav-muted);font-size:12px;padding:3px 10px;border-radius:var(--r-pill);line-height:16px}
.mode button.on{background:#fff;color:#1d1d1f}

.snav{position:sticky;top:44px;z-index:20;height:52px;background:color-mix(in srgb,var(--parchment) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hairline)}
.snav-in{max-width:1200px;margin:0 auto;padding:0 16px;height:52px;display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:none}
.snav h2{font-size:21px;white-space:nowrap}
.stamp{font-size:14px;color:var(--ink-48);white-space:nowrap}
.rule-tag{font-size:12px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--hairline);color:var(--ink-48);white-space:nowrap;display:inline-flex;align-items:center}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px 60px}
.mt{margin-top:17px}

.alert{margin-top:17px;padding:10px 16px;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--tile));font-size:14px}

.help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--hairline);color:var(--ink-48);font-size:11px;font-weight:600;margin-left:8px;position:relative;cursor:help}
.help .tip{display:none;position:absolute;right:0;top:24px;width:300px;background:var(--tile);color:var(--ink-80);border:1px solid var(--hairline);border-radius:var(--r-md);padding:10px 12px;font-size:13px;line-height:1.5;font-weight:400;z-index:25;box-shadow:0 12px 32px -18px rgba(0,0,0,.6);text-align:left;letter-spacing:-.2px}
.help:hover .tip,.help:focus .tip{display:block}
.rule-tag .help .tip{left:0;right:auto}


.grid{display:grid;gap:17px;margin-top:17px;align-items:stretch}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:860px){.g3,.g2{grid-template-columns:1fr}.gnav .brand{display:none}}
.tile{background:var(--tile);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;min-width:0}
.tile-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.tile-h h3{font-size:21px;display:flex;align-items:center}
.muted{color:var(--ink-48);font-size:14px}
.fine{font-size:12px;color:var(--ink-48);margin-top:10px;letter-spacing:-.12px}

.coin{cursor:pointer;transition:border-color .15s}
.coin:hover{border-color:var(--ink-48)}
.coin.sel{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.coin .name{font-size:14px;color:var(--ink-48)}
.coin .big{font-family:"SF Pro Display",-apple-system,system-ui,sans-serif;font-size:52px;font-weight:600;line-height:1.07;margin-top:4px}
.coin .lab{font-size:15px;color:var(--ink-80);margin-top:2px;min-height:26px;display:flex;align-items:center;gap:8px}
.badge{font-size:13px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);color:#fff}
.badge.up{background:var(--up);color:#fff}.badge.down{background:var(--down);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;padding:4px 9px;border-radius:var(--r-pill);background:var(--pearl);border:1px solid var(--hairline);color:var(--ink-80);white-space:nowrap}
.chip.up{color:var(--up)}.chip.down{color:var(--down)}.chip.zero{color:var(--ink-48)}
.price{font-size:15px;margin-top:10px;color:var(--ink-80)}
.price b{color:var(--ink);font-weight:600}
.spark{margin-top:10px;width:100%;height:64px;display:block}
.spark .line{fill:none;stroke:var(--ink-48);stroke-width:1.6}
.spark .dot{stroke-width:1.6}
.spark .dot.up{fill:var(--up);stroke:var(--up)}.spark .dot.down{fill:var(--down);stroke:var(--down)}
.status-note{font-size:12px;color:var(--ink-48);margin-top:6px}

.ind{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.ind td{padding:8px 4px;border-top:1px solid var(--divider);vertical-align:top;overflow-wrap:anywhere}
.ind td:first-child{color:var(--ink-80)}
.ind td.d{width:96px}
.ind .v{color:var(--ink-48);font-size:13px}
.ind .d{font-weight:600;white-space:nowrap;text-align:right}
.formula{margin-top:10px;font-size:13px;color:var(--ink-80);background:var(--pearl);border-radius:var(--r-sm);padding:8px 12px;overflow-x:auto;white-space:nowrap}
.hint{font-size:12px;color:var(--ink-48);margin-top:8px}
.expl{margin-top:12px;padding:12px 15px;border-radius:var(--r-md);background:var(--pearl);font-size:14px;color:var(--ink-80);flex:1}
.expl b{display:block;color:var(--ink);margin-bottom:3px;font-weight:600}

.fng-now{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fng-now .n{font-family:"SF Pro Display",system-ui,sans-serif;font-size:44px;font-weight:600;line-height:1}
.fng-now .src{font-size:12px;color:var(--ink-48)}
.fng-chart{width:100%;height:120px;margin-top:12px;display:block}
.fng-chart .line{fill:none;stroke:var(--warn);stroke-width:1.8}
.fng-chart .grid50{stroke:var(--hairline);stroke-dasharray:3 3}
.fng-chart text{fill:var(--ink-48);font-size:10px}

table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--divider);white-space:nowrap}
table.t th{color:var(--ink-48);font-weight:400;font-size:12px}
.tbl{overflow-x:auto}
details{margin-top:12px;font-size:14px}
details summary{cursor:pointer;color:var(--ink-80)}
.seg{display:flex;gap:2px;background:var(--pearl);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:2px}
.seg button{background:none;border:0;color:var(--ink-48);font-size:13px;padding:3px 12px;border-radius:var(--r-pill)}
.seg button.on{background:var(--ink);color:var(--canvas)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.kv .k{color:var(--ink-48)}
.foot{margin-top:28px;font-size:12px;color:var(--ink-48);line-height:1.6}

/* 공부 탭 */
.study{display:grid;grid-template-columns:260px 1fr;gap:17px;align-items:start}
@media(max-width:860px){.study{grid-template-columns:1fr}}
.study-nav{position:sticky;top:110px;padding:14px 12px}
.study-nav button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink-80);font-size:14px;padding:8px 10px;border-radius:var(--r-sm);line-height:1.4}
.study-nav button.on{background:var(--pearl);color:var(--ink);font-weight:600}
.study-doc{font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.study-doc h1{font-size:26px;margin:0 0 12px}
.study-doc h2{font-size:20px;margin:26px 0 8px;padding-top:12px;border-top:1px solid var(--divider)}
.study-doc h3{font-size:17px;margin:18px 0 6px}
.study-doc p{margin:8px 0}
.study-doc ul,.study-doc ol{margin:6px 0 6px 22px;padding:0}
.study-doc li{margin:3px 0}
.study-doc table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0;display:block;overflow-x:auto}
.study-doc th,.study-doc td{border-bottom:1px solid var(--divider);padding:6px 8px;text-align:left;vertical-align:top}
.study-doc th{color:var(--ink-48);font-weight:400}
.study-doc code{background:var(--pearl);border-radius:4px;padding:1px 5px;font-size:13px}
.study-doc pre{background:var(--pearl);border-radius:var(--r-sm);padding:10px 12px;overflow-x:auto;font-size:13px}
.study-doc pre code{background:none;padding:0}
.ind-note{font-size:12px;color:var(--ink-48);padding:2px 4px 8px}
.nw{white-space:nowrap}
.t tr.old td{color:var(--ink-48)}
.study-toc{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;margin:4px 0 18px;padding:10px 12px;border-radius:var(--r-sm);background:var(--pearl)}
.study-toc a{color:var(--ink-80);text-decoration:none}
.study-toc a:hover{text-decoration:underline}

/* ---------- 지표 그래프 (기획안_지표그래프_2026-10-03) ---------- */
.c-macd{color:var(--c-macd);stroke:var(--c-macd);fill:var(--c-macd)}
.c-sto{color:var(--c-sto);stroke:var(--c-sto);fill:var(--c-sto)}
.c-srsi{color:var(--c-srsi);stroke:var(--c-srsi);fill:var(--c-srsi)}
.c-vpci{color:var(--c-vpci);stroke:var(--c-vpci);fill:var(--c-vpci)}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:currentColor;vertical-align:1px}
.chart-tools{display:flex;align-items:center;gap:8px}
.chart-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ichip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--hairline);background:var(--pearl);color:var(--ink);border-radius:var(--r-pill);padding:5px 12px;font-size:13px;line-height:1.3;transition:opacity .2s,border-color .2s}
.ichip .v{color:var(--ink-48);font-size:12px}
.ichip.on{border-color:var(--ink-48)}
.ichip.dim{opacity:.42}
.ichip.dim:hover{opacity:.8}
.ichip.reset{color:var(--ink-48)}
.ichip.reset.on{color:var(--ink);border-color:var(--primary)}
.chart-wrap{position:relative;width:100%}
#chart-svg{width:100%;min-height:120px}
.ichart{display:block;width:100%;height:auto;font-size:11px;user-select:none}
.ichart .ax{fill:var(--ink-48);stroke:none;font-size:10.5px}
.ichart .ax.c-macd,.ichart .ax.c-vpci{fill:currentColor}
.ichart .pane-t{fill:var(--ink-80);font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--tile);stroke-width:4px;stroke-linejoin:round}
.ichart tspan.c-macd,.ichart tspan.c-sto,.ichart tspan.c-srsi,.ichart tspan.c-vpci{stroke:var(--tile);fill:currentColor}
.ichart .pane{fill:none;stroke:var(--hairline)}
.ichart .vgrid{stroke:var(--divider);stroke-width:1}
.ichart .zone{stroke:var(--ink-48);stroke-dasharray:3 4;stroke-width:1;opacity:.6}
.ichart .mid{stroke:var(--ink-48);stroke-width:1;opacity:.35}
.ichart .price-line{fill:none;stroke:var(--ink-80);stroke-width:1.4}
.ichart path.main{fill:none;stroke-width:1.7}
.ichart path.sig{fill:none;stroke-width:1.1;stroke-dasharray:4 3;opacity:.75}
.ichart .ev{stroke:var(--tile);stroke-width:1}
.ichart .ev.up{fill:var(--up)}.ichart .ev.down{fill:var(--down)}
.ichart .aline{stroke:var(--ink-48);stroke-dasharray:2 3;opacity:.6}
.ichart .alab{font-size:11px;font-weight:600;paint-order:stroke;stroke:var(--tile);stroke-width:3px}
.ichart .alab.up{fill:var(--up)}.ichart .alab.down{fill:var(--down)}.ichart .alab.zero{fill:var(--ink-48)}
.ichart .gap{fill:var(--warn);opacity:.1}
.ichart .hit{fill:transparent;cursor:crosshair}
.ichart .hover-line{stroke:var(--ink-48);stroke-width:1}
.ichart .hdot{stroke:var(--tile);stroke-width:1.5}
.chart-tip{position:absolute;top:8px;left:0;z-index:5;pointer-events:none;background:var(--tile);border:1px solid var(--hairline);border-radius:var(--r-md);padding:8px 10px;font-size:12px;line-height:1.55;box-shadow:0 12px 32px -18px rgba(0,0,0,.6);white-space:nowrap}
.chart-brief{display:block;width:100%;text-align:left;margin-top:12px;padding:10px 14px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--pearl);color:var(--ink-80);font-size:13px;line-height:1.5}
.chart-brief:hover{border-color:var(--ink-48)}
.chart-brief .more{color:var(--primary);white-space:nowrap;margin-left:6px}
.warn{color:var(--warn)}
.ind-row{cursor:pointer;transition:opacity .2s}
.ind-row.dim{opacity:.45}
.ind-row:hover td{background:color-mix(in srgb,var(--pearl) 60%,transparent)}
#evidence.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--primary)}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:600px){.ichip{font-size:12px;padding:4px 10px}.chart-tools .seg button{padding:4px 8px}}

/* ---------- 뉴스 단신 + 정미님 포맷 브리핑 (임시 디자인, 10-03) ---------- */
.news-tile,.brief-tile{padding:14px 20px}
.news-h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.news-h h3{font-size:16px}
.news-h .tag{font-size:11px;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--hairline);color:var(--ink-48)}
.news-list{list-style:none;margin:0;padding:0}
.news-list li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:5px 0;border-top:1px solid var(--divider);font-size:14px;min-width:0}
.news-list li:first-child{border-top:0}
.news-list a{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.news-list .meta{color:var(--ink-48);font-size:12px;white-space:nowrap}
.news-list .sym{font-size:11px;padding:0 6px;border-radius:var(--r-pill);border:1px solid var(--hairline);margin-left:4px}
.news-list li.more{justify-content:flex-start}
.news-list li.more button{background:none;border:0;color:var(--primary);font-size:13px;padding:0}
.news-tile .fine{margin-top:6px}
.brief-tile{border-style:dashed}
.brief-body ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
@media(max-width:600px){.news-list li{flex-direction:column;gap:0}.news-list a{white-space:normal}}
.chip-hint{font-size:12px;color:var(--ink-48);align-self:center;margin-left:4px}

/* ---------- 맨 위 뉴스 한 줄 ---------- */
.news-jump{display:block;width:100%;text-align:left;padding:9px 16px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--tile);color:var(--ink-80);font-size:13px}
.news-jump .more{color:var(--primary);margin-left:6px;white-space:nowrap}
.coin .mini{display:none}

/* ---------- 휴대폰(≤700px): 코인 카드를 요약 3줄로, 누른 코인만 펼침 (10-03 호연 결정: 스크롤 줄이기) ---------- */
@media(max-width:700px){
  .wrap{padding:0 12px 48px}
  .snav h2{font-size:18px}
  .stamp{font-size:13px}
  .rule-tag{display:none}
  .mode button{padding:3px 8px}
  .tabs button{padding:5px 11px;font-size:13px}
  #cards{gap:8px;margin-top:12px}
  .coin{display:grid;grid-template-columns:52px 74px 1fr auto;align-items:center;column-gap:8px;padding:10px 14px;border-radius:var(--r-md)}
  .coin .name{font-size:15px;color:var(--ink);font-weight:600;white-space:nowrap}
  .coin .name .nm{display:none}
  .coin .big{font-size:26px;margin:0;line-height:1.1}
  .coin .lab{margin:0;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .coin .lab .badge{font-size:12px;padding:2px 8px}
  .coin .chips{display:none}
  .coin .mini{display:flex;gap:3px;font-size:13px}
  .coin .price,.coin .spark{display:none;grid-column:1/-1}
  .coin.sel .price{display:block;margin-top:6px;font-size:13px}
  .coin.sel .spark{display:block;height:44px;margin-top:4px}
  .tile{padding:16px 16px;border-radius:var(--r-md)}
  .tile-h h3{font-size:18px}
  .chart-chips{gap:6px}
  .chip-hint{width:100%;margin-left:0}
}
.col-stack{display:flex;flex-direction:column;gap:17px;min-width:0}