/* ══ BABEL — 디자인 토큰 ══════════════════════════════════════
   어두운 트레이딩 데스크: 한밤에 여러 화면을 오래 보는 사람 기준.
   청록(accent) = 우리 신호·상승 흐름, 보라(buzz) = 글로벌 입소문, 노랑 = 우리 픽.          */
:root {
  --bg: #080b10;
  --surface: #0f141b;
  --surface-2: #141b24;
  --surface-3: #1a2330;
  --line: #1f2935;
  --line-strong: #2b3746;
  --text: #e8edf3;
  --text-2: #b4bfcc;
  --muted: #8392a5;
  --accent: #2ad8ad;
  --accent-ink: #04140f;
  --buzz: #a78bfa;
  --buzz-soft: #1c1730;
  --pick: #f5b83d;
  --up: #2bd576;
  --down: #f4566e;
  --warn: #f5a524;
  --info: #6aa8ff;
  --purple: var(--buzz);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --gutter: max(24px, calc((100vw - 1680px) / 2));
  --shadow-pop: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  font-family: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo",
    "Noto Sans JP", "Noto Sans SC", "Noto Sans Arabic", system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "ss06" 1;
  color-scheme: dark;
  accent-color: var(--accent);
  caret-color: var(--accent);
}

/* ── 기본 · 브라우저 표면 ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(42, 216, 173, .28); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
a { color: var(--info); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
.muted { color: var(--muted); }
.r { text-align: right; }
.up { color: var(--up); }
.down { color: var(--down); }
.ic { flex: none; vertical-align: -2px; }

/* ── 상단 ── */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { display: flex; gap: 12px; align-items: center; }
.logo { width: 34px; height: 34px; flex: none; }
h1 { margin: 0; font-size: 20px; line-height: 1; letter-spacing: .22em; font-weight: 800; }
.tag { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

/* ── 지갑 로그인 ── */
.walletbox { position: relative; display: flex; }
.wbtn { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 38px; cursor: pointer; font-size: 13px; font-weight: 650;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-md); transition: filter .15s; }
.wbtn:hover { filter: brightness(1.08); }
.wbtn.on { color: var(--text); background: var(--surface); border-color: var(--line); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 500; }
.wbtn.on .ic { color: var(--accent); }
.wmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 290px; padding: 6px; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: pop .18s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.wmh { padding: 8px 10px 6px; color: var(--muted); font-size: 12px; }
.wmenu button, .wmenu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; text-decoration: none; }
.wmenu button:hover, .wmenu a:hover, .wmenu button:focus-visible, .wmenu a:focus-visible { background: var(--surface-3); }
.wmenu button:disabled { opacity: .7; cursor: progress; }
.wmenu b { display: block; font-size: 13.5px; }
.wmenu small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.wmenu a small { color: var(--info); }
.wme { padding: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.wme span { color: var(--muted); font-size: 11px; }
.wme b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; margin: 2px 0; }
.wnote { display: flex; gap: 6px; align-items: flex-start; margin: 4px 10px 8px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.wnote .ic { margin-top: 2px; color: var(--accent); }
[dir="rtl"] .wmenu { right: auto; left: 0; }
[dir="rtl"] .wmenu button, [dir="rtl"] .wmenu a { text-align: right; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 12px); opacity: 0; max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--text);
  font-size: 13px; box-shadow: var(--shadow-pop); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.topright { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; justify-content: flex-end; }
.langpick { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.langpick select { border: 0; background: transparent; color: var(--text); font-size: 13px; max-width: 150px; padding: 8px 4px; }
/* 상태 지표: 박스 4개 대신 한 줄 띠 */
.stats { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.stat { padding: 7px 16px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.stat span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.dot.err { background: var(--warn); }

/* ── 탭 ── */
.tabs { display: flex; gap: 2px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); align-items: center;
  position: sticky; top: 0; z-index: 5; background: rgba(8, 11, 16, .92); backdrop-filter: saturate(1.4) blur(10px); }
.tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--muted);
  padding: 13px 12px 12px; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s; }
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab.active .ic { color: var(--accent); }
.tab[data-tab="buzz"].active { border-bottom-color: var(--buzz); }
.tab[data-tab="buzz"] .ic { color: var(--buzz); }
.refresh { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

main { padding: 20px var(--gutter) 48px; }

/* ── 필터 · 칩 ── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; transition: border-color .15s, color .15s; }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 650; }
.chip small { opacity: .7; }
select, input[type=search], input[type=number], .addsrc input {
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 10px; font-family: inherit; font-size: 13px; }
select:hover, input:hover { border-color: var(--line-strong); }
input::placeholder { color: var(--muted); }
input[type=number] { width: 84px; }
input[type=search] { min-width: 210px; }
label.num, label.chk { color: var(--text-2); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.viewtog { display: flex; margin-left: auto; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.viewtog button { background: var(--surface); color: var(--muted); border: 0; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.viewtog button.on { background: var(--surface-3); color: var(--text); font-weight: 600; }
.modehint { color: var(--text-2); font-size: 13px; margin: -2px 0 14px; }
.empty { color: var(--muted); padding: 36px 16px; text-align: center; }

/* ── 표 ── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table.grid { border-collapse: collapse; width: 100%; min-width: 1100px; }
.grid th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 12px;
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr { cursor: pointer; transition: background .12s; }
.grid tbody tr:hover { background: var(--surface-2); }
.grid tr.dim td { opacity: .5; }
.grid tr.sel td { background: #10243a; }
table.grid.compact { min-width: 0; }
.grid.compact td, .grid.compact th { padding: 8px 12px; font-size: 13px; }

/* ── 토큰 표기 ── */
.tok { display: flex; align-items: center; gap: 10px; }
.tok img, .tok .ph { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); object-fit: cover; flex: none; }
.tok .ph, .tc-head .ph { display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.tok b { font-size: 14px; }
.tok small { color: var(--muted); display: block; font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.chain { font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.chain.solana { background: #231a3d; color: #c9b8ff; }
.chain.ethereum { background: #18233a; color: #a5c4ff; }
.chain.base { background: #0d2040; color: #6aa8ff; }
.chain.bsc { background: #33290a; color: #f7d265; }
.lp { font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; background: #0e2a23; color: #7ee8c8; font-weight: 600; vertical-align: 1px; }
.clones { font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; background: #33240d; color: #f0c27c; font-weight: 600; vertical-align: 1px; display: inline-block; }
.lag { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--accent); margin-left: 5px; }
.score { display: flex; align-items: center; gap: 8px; }
.score .bar { width: 54px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.score .bar i { display: block; height: 100%; border-radius: 3px; }
.score b { min-width: 30px; }
.soc { display: flex; gap: 4px; }
.soc a, .soc span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-2); transition: color .15s, background .15s; }
.soc a:hover { color: var(--text); background: var(--line-strong); text-decoration: none; }
.soc span { opacity: .28; }
.flags { display: flex; gap: 4px; flex-wrap: wrap; max-width: 280px; white-space: normal; }
.flag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.flag.bad { background: #351520; color: #ffa9b6; }
.flag.good { background: #0e2b20; color: #7fe7b4; }
.flag.new { background: #10233f; color: #9cc3ff; }
.flag.buzz { background: var(--buzz-soft); color: #cbbcff; }
/* 추가 체인 배지 (각 체인 고유색을 어두운 바탕에 맞게 낮춤) */
.chain.tron { background: #3a1214; color: #ff9a9f; }
.chain.ton { background: #0b2a3d; color: #7cc8f5; }
.chain.sui { background: #0c2740; color: #8ccaff; }
.chain.arbitrum { background: #102740; color: #8fc3f0; }
.chain.avalanche { background: #3a1416; color: #ff9d9d; }
.chain.polygon { background: #261a42; color: #c3a6ff; }
.chain.hyperevm { background: #0b2e2a; color: #86ead6; }
.chain.monad { background: #241c45; color: #b8a8ff; }
.chain.sonic { background: #2e2310; color: #f4c27a; }
.chain.abstract { background: #0d2f1d; color: #7fe2a3; }
.chain.berachain { background: #33240d; color: #f0c27c; }

/* ── 토큰 카드 ── */
.cards2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); gap: 12px; }
.tc { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer;
  transition: border-color .18s, transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
@media (hover: hover) { .tc:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-pop); } }
.tc.dim { opacity: .62; }
.deadline { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; }
.deadline.rugged { background: #351520; color: #ffa9b6; }
.deadline.dead { background: var(--surface-3); color: var(--text-2); }
.tc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-head img, .tc-head .ph { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3); object-fit: cover; flex: none; }
.tc-name { min-width: 0; flex: 1; overflow: hidden; }
.tc-name .chain, .tc-name .lp { display: inline-block; margin-top: 2px; }
.tc-name b { font-size: 15px; font-weight: 700; }
.tc-name small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-rank { position: absolute; top: -8px; left: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 0 7px; line-height: 17px; }
/* 점수 배지: "BABEL 점수" 라벨 + 숫자/100 + 아래 등급 막대 */
.ring { --p: 0; --c: var(--accent); position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 62px; padding: 5px 9px 9px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c) 12%, transparent); line-height: 1.1; }
.ring small { font-size: 9.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; letter-spacing: .02em; }
.ring span { font-size: 17px; font-weight: 800; margin-top: 1px; }
.ring span em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.ring::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 18%, transparent) 0); }
.tc-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tc-price b { font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.tc-price .chg { font-size: 12px; }
.tc-price .chg em { font-style: normal; color: var(--muted); margin-right: 3px; }
.spark { height: 54px; position: relative; }
.spark svg { width: 100%; height: 100%; display: block; }
.spark .sl { position: absolute; left: 0; top: -2px; font-size: 10px; color: var(--muted); background: var(--surface); padding: 0 4px 0 0; border-radius: 0 0 4px 0; }
.spark .none { height: 100%; display: grid; place-items: center; font-size: 11px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-md); }
.kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kv > div { min-width: 0; }
.kv > div > span { display: block; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv b { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.tc .flags { max-width: none; min-height: 19px; }
.tc-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 9px; margin-top: auto; }
.tc-foot .soc { margin-left: auto; }
.vbtn { display: inline-flex; gap: 5px; align-items: center; background: var(--surface-3); border: 1px solid transparent; color: var(--text-2);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.vbtn i { font-style: normal; }
.vbtn:hover { color: var(--text); }
.vbtn.like.on { color: #ff8da0; border-color: #5a1d2b; background: #2a1118; }
.vbtn.watch.on { color: var(--pick); border-color: #59430f; background: #261c06; }
.vbtn:active .ic { transform: scale(.85); }
.vbtn .ic { transition: transform .2s var(--ease-out); }
.pickline { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; background: var(--surface-2); border-radius: var(--r-sm); padding: 6px 9px; }
/* 러그 위험 */
.riskchip { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-sm); font-size: 11.5px; min-width: 0; }
.riskchip b { white-space: nowrap; font-weight: 700; }
.riskchip span { color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.riskchip.low { background: #0e2b20; color: #7fe7b4; }
.riskchip.medium { background: #33270b; color: #f7d27a; }
.riskchip.high, .riskchip.critical { background: #351520; color: #ffa9b6; }
.riskchip.unknown { background: var(--surface-3); color: var(--muted); }
.riskbox .riskhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.riskbox .riskhead b { font-size: 15px; }
.riskbox.low .riskhead { color: #7fe7b4; } .riskbox.medium .riskhead { color: #f7d27a; } .riskbox.high .riskhead, .riskbox.critical .riskhead { color: #ffa9b6; }
.risklist { list-style: none; margin: 0; padding: 0 !important; }
.risklist li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.risklist li .ic { margin-top: 2px; }
.risklist li.critical, .risklist li.high { color: #ffa9b6; } .risklist li.medium { color: #f7d27a; } .risklist li.good { color: #7fe7b4; } .risklist li.info { color: var(--text-2); }

/* 급상승 탭: 해당 기간 상승률 강조 */
.gainline { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); background: #0d2a1d; color: var(--up); }
.gainline b { font-size: 17px; font-weight: 800; }
.gainline span { color: #7fbf98; font-size: 11.5px; margin-left: auto; }

/* 입소문 박스 (카드 안) */
.buzzbox { background: var(--buzz-soft); border: 1px solid #2b2350; border-radius: var(--r-md); padding: 7px 10px; font-size: 12px; }
.buzzbox .bt { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #b9abe6; font-size: 11px; margin-bottom: 5px; }
.buzzbox .bt > span { display: inline-flex; align-items: center; gap: 5px; }
.buzzbox .bt b { color: #e3dbff; font-size: 12px; }
.spread { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: 12px; }
.spread .arrow { color: #8a7cc0; font-size: 10px; }
.spread .lg { background: rgba(8, 11, 16, .55); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.spread .lg i { font-style: normal; color: var(--muted); font-size: 10px; margin-left: 3px; }
.cc { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 4px; border-radius: 3px;
  background: #334155; color: #e2e8f0; vertical-align: 1px; margin-right: 3px; }
.cc-CN, .cc-TW { background: #6b1a1a; color: #ffd0d0; } .cc-US { background: #1b347a; color: #c7dbff; } .cc-KR { background: #0c3a36; color: #a6f5e6; }
.cc-RU, .cc-UA { background: #33296b; color: #dcd4ff; } .cc-JP { background: #4a1a2c; color: #ffc9dd; } .cc-VN, .cc-TR { background: #57290c; color: #ffd6b0; }

/* ── 상세 서랍 ── */
.drawer { position: fixed; inset: 0; z-index: 20; }
.drawer-bg { position: absolute; inset: 0; background: rgba(3, 5, 8, .6); backdrop-filter: blur(2px); animation: fade .2s ease-out; }
.drawer-body { position: absolute; right: 0; top: 0; bottom: 0; width: min(780px, 100%); background: var(--bg); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 24px 26px 48px; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .8); animation: slidein .32s var(--ease-out); }
@keyframes slidein { from { transform: translateX(28px); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }
.close { position: absolute; right: 18px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2); border-radius: var(--r-md); }
.close:hover { color: var(--text); border-color: var(--line-strong); }
.dhead { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; padding-right: 44px; }
.dhead img, .dhead .ph { width: 54px; height: 54px; border-radius: 50%; background: var(--surface-3); flex: none; }
.dhead h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.addr { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
  color: var(--muted); cursor: pointer; word-break: break-all; }
.addr:hover { color: var(--text-2); }
.links { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.links a { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); padding: 6px 11px;
  border-radius: var(--r-sm); font-size: 13px; color: var(--text); }
.links a:hover { border-color: var(--line-strong); text-decoration: none; }
.dvotes { display: flex; gap: 8px; margin: 12px 0 0; }
.dvotes .vbtn { font-size: 13px; padding: 6px 14px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.card { background: var(--surface); padding: 11px 14px; }
.card span { color: var(--muted); font-size: 11px; }
.card b { display: block; font-size: 16px; margin-top: 3px; }
.drawer h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 26px 0 10px; color: var(--text); font-weight: 650; }
.breakdown { display: grid; grid-template-columns: 110px 1fr 64px; gap: 8px 12px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.breakdown .bar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.breakdown .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.breakdown > span:nth-child(-n+3) { color: #cbbcff; }
.breakdown > .bar:nth-child(2) i { background: var(--buzz); }
.charts { display: grid; gap: 10px; }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; }
.chart .ct { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.chart svg { width: 100%; height: 90px; display: block; }
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 16px; }
.sec ul { margin: 8px 0 0; padding-left: 18px; }
.sec li { margin: 3px 0; }
.sec li.danger { color: #ffa9b6; }
.sec li.warn { color: #f7d27a; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.timeline time { color: var(--muted); font-size: 12px; }
.bpchart svg { width: 100%; display: block; }
.legend { display: inline-flex; gap: 6px; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
.lp-price { background: var(--accent); }
.lp-buzz { background: var(--info); height: 8px !important; }

/* ── 행보 피드 ── */
.feed { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.feed li { display: grid; grid-template-columns: 72px 170px 1fr; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; }
.feed li:last-child { border-bottom: 0; }
.feed li:hover { background: var(--surface-2); }
.feed time { color: var(--muted); font-size: 12px; }
/* 이벤트 종류: 왼쪽 굵은 띠 대신 작은 점 */
.ev { display: flex; gap: 9px; align-items: baseline; }
.ev::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transform: translateY(-1px); }
.ev.social::before, .ev.profile::before { background: var(--info); }
.ev.boost::before, .ev.pick::before { background: var(--pick); }
.ev.listing::before, .ev.liquidity::before, .ev.mcap::before, .ev.score::before, .ev.revive::before { background: var(--up); }
.ev.danger::before { background: var(--down); }
.ev.security::before { background: var(--accent); }
.ev.buzz::before, .ev.launch::before, .ev.community::before { background: var(--buzz); }
.ev.trending::before { background: var(--warn); }

/* ── 실시간 발행 ── */
.srcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; margin-bottom: 14px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.src { background: var(--surface); padding: 11px 14px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.src b { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 13.5px; margin-bottom: 3px; }
.st { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.st.new, .st.promoted { background: #0e2b20; color: #7fe7b4; }
.st.candidate { background: #10233f; color: #9cc3ff; }
.livenote { font-size: 12px; margin-top: 10px; max-width: 90ch; }

/* ── 글로벌 입소문 ── */
.buzzhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.buzzhead h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; font-weight: 750; }
.buzzhead p { margin: 0; font-size: 13px; max-width: 110ch; }
.buzzhead p b { color: var(--text); }
.addsrc { display: flex; gap: 6px; }
.addsrc input { width: 310px; max-width: 60vw; padding: 8px 11px; }
.addsrc button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--r-sm); padding: 8px 16px; font-weight: 700; cursor: pointer; }
.addsrc button:hover { filter: brightness(1.08); }
#buzzLangs { margin-bottom: 16px; }
#buzzLangs .chip.on { background: var(--buzz); border-color: var(--buzz); color: #120b26; }
.buzzgrid > *, .trgrid > * { min-width: 0; }
.buzzgrid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.bfeed { position: sticky; top: 60px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); max-height: calc(100vh - 80px); overflow-y: auto; }
.bfeed h3 { margin: 0; padding: 13px 16px 11px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 650;
  position: sticky; top: 0; background: var(--surface); z-index: 1; }
.feedbots { display: flex; margin-top: 6px; font-weight: 400; font-size: 12px; color: var(--muted); }
.bfeed ul { list-style: none; margin: 0; padding: 0; }
.bfeed li, .posts li { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.post-meta { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; margin-bottom: 6px; flex-wrap: wrap; }
.post-meta a { color: var(--text-2); }
.post-ko { line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 7.8em; overflow: hidden; color: var(--text); }
.post-orig { color: var(--muted); font-size: 11px; margin-top: 6px; white-space: pre-wrap; word-break: break-all; max-height: 3em; overflow: hidden; }
.post-toks { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.post-toks button { background: var(--surface-3); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-sm); padding: 3px 8px; font-size: 11px; cursor: pointer; }
.post-toks button:hover { border-color: var(--line-strong); }
.langtag { font-size: 11px; padding: 1px 6px 1px 2px; border-radius: 4px; background: var(--surface-3); color: var(--text); }
.via { font-size: 10px; padding: 0 5px; border-radius: 4px; background: var(--buzz-soft); color: #cbbcff; }
.posts { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tr { opacity: .7; } /* 번역 도착 전 원문 */

/* ── 픽 성적표 ── */
/* 핵심 지표: 숫자 카드 나열 대신 하나의 띠 */
.trcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin-bottom: 22px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.trc { background: var(--surface); padding: 13px 16px; }
.trc > span { color: var(--muted); font-size: 12px; display: block; }
.trc > b { font-size: 22px; display: block; margin: 4px 0 1px; font-weight: 750; letter-spacing: -.01em; }
.trc > small { color: var(--muted); font-size: 11px; }
.trc.good > b { color: var(--up); }
.trc.bad > b { color: var(--down); }
.trh { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; font-weight: 650; margin: 26px 0 8px; }
.trh .ic { color: var(--pick); }
.trnote { font-size: 12px; margin: -2px 0 10px; }
.cpbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cp { background: var(--surface); padding: 11px 14px; }
.cp span { color: var(--muted); font-size: 12px; }
.cp b { display: block; font-size: 18px; margin: 3px 0; }
.cp small { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 6px; }
.mini { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.mini i { display: block; height: 100%; background: var(--muted); }
.mini.up i { background: var(--up); }
.trgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fame { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.famec { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid #3a2f12; border-radius: var(--r-lg);
  padding: 10px 12px; cursor: pointer; transition: border-color .15s, transform .25s var(--ease-out); }
.famec:hover { border-color: var(--pick); transform: translateY(-1px); }
.famec img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.famec small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.bigx { font-size: 16px; font-weight: 800; }
.cprow { display: flex; gap: 4px; flex-wrap: wrap; font-size: 11px; }
.cpp { background: var(--surface-2); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.cpp em { font-style: normal; color: var(--muted); margin-right: 3px; }
.cpp.now { background: #10243a; }

/* ── 푸터 ── */
.foot { color: var(--muted); font-size: 12px; text-align: center; padding: 20px var(--gutter); border-top: 1px solid var(--line); }

/* ── 오른쪽→왼쪽 언어 ── */
[dir="rtl"] .refresh, [dir="rtl"] .viewtog { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tc-foot .soc { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tc-rank { left: auto; right: 12px; }
[dir="rtl"] .spark .sl { left: auto; right: 0; }
[dir="rtl"] .drawer-body { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .close { right: auto; left: 18px; }
[dir="rtl"] .dhead { padding-right: 0; padding-left: 44px; }
[dir="rtl"] .r { text-align: left; }
[dir="rtl"] .grid th { text-align: right; }
[dir="rtl"] .stat + .stat { border-left: 0; border-right: 1px solid var(--line); }

/* ── 반응형 ── */
@media (max-width: 1100px) { .buzzgrid { grid-template-columns: minmax(0, 1fr); } .bfeed { position: static; max-height: 560px; } }
@media (max-width: 900px) { .trgrid { grid-template-columns: minmax(0, 1fr); } .cpbar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .topright { width: 100%; }
  .stats { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tab { padding: 12px 9px 11px; }
  .refresh { display: none; }
  .filters > * { max-width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .chip { flex: none; }
  .viewtog { margin-left: 0; }
  input[type=search] { min-width: 0; flex: 1; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .feed li { grid-template-columns: 1fr; gap: 4px; }
  .drawer-body { padding: 20px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 펼친 선택 목록: 배경이 투명한 select(언어 선택 등)는 브라우저가 흰 바탕에 흰 글씨로 그려서 안 보였다 */
select { color-scheme: dark; }
select option, select optgroup { background: var(--surface-2); color: var(--text); }
select option:checked { background: var(--surface-3); color: var(--text); }

/* 입소문 분석 주석 (랭킹 카드) */
.buzzbox .bnote { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: #cfc5f2; font-size: 11.5px; line-height: 1.45; }
.buzzbox .bnote .up { color: var(--up, #22d3a6); }
.buzzbox .bnote .down { color: var(--down, #f05a6e); }
.buzzbox .bv { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.buzzbox .bv.early { background: rgba(34, 211, 166, .16); color: #4ff0c2; }
.buzzbox .bv.priced { background: rgba(250, 204, 21, .14); color: #f5d34a; }
.buzzbox .bv.faded { background: rgba(240, 90, 110, .15); color: #ff8595; }
.buzzbox .bq { display: block; margin-top: 6px; padding: 6px 9px; background: rgba(8, 11, 16, .5); border: 1px solid #2b2350; border-radius: 7px; color: var(--text-2); text-decoration: none; }
.buzzbox .bq:hover { background: rgba(8, 11, 16, .7); }
.buzzbox .bq-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.45; color: var(--text); }
.buzzbox .bq-s { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }

/* ══ 폰 (640px 이하) ══════════════════════════════════════════
   한 손으로 위아래만 훑는 화면. 첫 화면에 헤더 대신 코인이 보이게 위를 줄이고,
   글씨는 키우고, 손가락으로 누르는 곳은 40px 안팎으로.                      */
@media (max-width: 640px) {
  html, body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
  button, a, select, input, label { touch-action: manipulation; }

  /* 헤더: 1줄 = 로고·이름 | 언어·지갑, 2줄 = 상태 띠 */
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 8px; padding: 10px 16px 12px; align-items: center; }
  .brand { gap: 9px; min-width: 0; }
  .brand > div { min-width: 0; }
  .logo { width: 28px; height: 28px; }
  h1 { font-size: 16px; letter-spacing: .16em; white-space: nowrap; }
  .tag { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topright { display: contents; }
  .topright > .langpick { grid-row: 1; grid-column: 2; padding: 0 2px 0 10px; height: 40px; }
  .langpick select { font-size: 14px; max-width: 84px; padding: 8px 2px; min-height: 0; }
  .topright > .walletbox { grid-row: 1; grid-column: 3; }
  .wbtn { min-height: 40px; font-size: 13px; }
  .wbtn:not(.on) { width: 40px; padding: 0; justify-content: center; }
  .wbtn:not(.on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wbtn.on { padding: 0 10px; }
  .wbtn.on span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .stat { padding: 6px 8px; }
  .stat + .stat, .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 0; }
  .stat b { font-size: 14px; gap: 4px; }
  .stat span { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  [dir="rtl"] .stat + .stat, [dir="rtl"] .stat:nth-child(even) { border-left: 0; border-right: 1px solid var(--line); }

  /* 탭: 가로로 밀리는 줄. 끝을 흐리게 해서 더 있다는 걸 보이게 */
  .tabs { padding: 0 8px; gap: 0; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  [dir="rtl"] .tabs { -webkit-mask-image: linear-gradient(270deg, #000 86%, transparent); mask-image: linear-gradient(270deg, #000 86%, transparent); }
  .tab { padding: 13px 10px 12px; font-size: 14px; gap: 6px; }
  .tab[data-tab="live"] { margin-inline-end: 36px; }

  main { padding: 14px 16px 40px; }

  /* 필터: 두 칸 격자. 입력칸은 16px(아이폰 확대 방지)·높이 40px */
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .filters > .chips { grid-column: 1 / -1; }
  .filters > select, .filters > label, .filters > input { width: 100%; min-width: 0; }
  select, input[type=search], input[type=number], .addsrc input { font-size: 16px; min-height: 40px; padding: 7px 10px; border-radius: var(--r-md); }
  label.num { justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 0 0 10px; font-size: 12.5px; }
  label.num input { border: 0; background: transparent; width: 72px; text-align: right; }
  label.chk { font-size: 13.5px; min-height: 40px; }
  label.chk input { width: 18px; height: 18px; }
  .filters > input[type=search] { grid-column: 1 / -1; order: 10; }
  .viewtog { justify-self: end; height: 40px; }
  .viewtog button { padding: 0 16px; font-size: 13.5px; }
  .chips { margin: 0 -16px 12px; padding: 0 16px; width: auto; }
  .filters > .chips { margin-bottom: 0; }
  .chip { padding: 8px 14px; font-size: 13.5px; }

  /* 카드 */
  .cards2 { gap: 14px; }
  .tc { padding: 16px 14px 10px; gap: 11px; }
  .tc-head img, .tc-head .ph { width: 40px; height: 40px; }
  .tc-name b { font-size: 16.5px; }
  .tc-name small { font-size: 12px; }
  .tc-rank { font-size: 11.5px; line-height: 19px; }
  .ring small { font-size: 10px; }
  .ring span { font-size: 19px; }
  .tc-price b { font-size: 23px; }
  .tc-price .chg { font-size: 13px; }
  .spark { height: 46px; }
  .kv { gap: 4px; }
  .kv > div > span { font-size: 11px; }
  .kv b { font-size: 13.5px; }
  .riskchip { font-size: 12.5px; padding: 7px 10px; align-items: flex-start; line-height: 1.4; }
  .riskchip .ic { margin-top: 2px; }
  .riskchip span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .flag { font-size: 12px; padding: 3px 9px; }
  .gainline b { font-size: 19px; }
  .gainline span { font-size: 12.5px; }
  .tc-foot { padding-top: 8px; gap: 8px; }
  .vbtn { min-height: 36px; padding: 0 13px; font-size: 13px; }
  .soc { gap: 6px; }
  .soc a, .soc span { width: 36px; height: 36px; }

  /* 카드 안 입소문 */
  .buzzbox { padding: 10px 11px; font-size: 13px; }
  .buzzbox .bt { font-size: 12px; }
  .buzzbox .bt b { font-size: 13px; }
  .spread { font-size: 12.5px; gap: 4px; }
  .buzzbox .bnote { font-size: 13px; line-height: 1.5; }
  .buzzbox .bv { font-size: 11.5px; padding: 2px 7px; }
  .buzzbox .bq { padding: 7px 10px; }
  .buzzbox .bq-t { font-size: 13px; line-height: 1.5; }
  .buzzbox .bq-s { font-size: 11.5px; }

  /* 입소문 탭 */
  .buzzhead { gap: 12px; margin-bottom: 12px; }
  .buzzhead > div { min-width: 0; }
  .buzzhead h2 { font-size: 20px; line-height: 1.3; }
  .buzzhead p { font-size: 13.5px; line-height: 1.55; }
  .addsrc { width: 100%; }
  .addsrc input { flex: 1; width: auto; max-width: none; min-width: 0; }
  .addsrc button { min-height: 40px; padding: 0 18px; border-radius: var(--r-md); }
  .bfeed { max-height: none; }
  .bfeed h3 { font-size: 15px; }
  .bfeed li, .posts li { padding: 14px 16px; font-size: 14.5px; }
  .post-meta { font-size: 12px; }
  .post-orig { font-size: 12px; }
  .post-toks button { font-size: 12.5px; padding: 6px 10px; }

  /* 성적표 */
  .trcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trcards > :last-child:nth-child(odd), .cpbar > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trc { padding: 12px 14px; }
  .trc > span { font-size: 12.5px; }
  .trc > b { font-size: 24px; }
  .trh { font-size: 16px; margin-top: 24px; }
  .trnote { font-size: 12.5px; }
  .cpbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp b { font-size: 19px; }
  .cp small { font-size: 12px; flex-wrap: wrap; }
  .grid.compact td, .grid.compact th { padding: 9px 10px; font-size: 13px; }
  .fame { grid-template-columns: minmax(0, 1fr); }
  .famec { padding: 12px 14px; }
  .famec small { font-size: 12px; }
  .cprow { font-size: 12px; }

  /* 상세 서랍: 화면 전체 */
  .drawer-body { border-left: 0; }
  .dhead h2 { font-size: 21px; }
  .breakdown { grid-template-columns: 92px minmax(0, 1fr) 54px; padding: 12px; font-size: 13px; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .links a { min-height: 40px; }
  .close { width: 40px; height: 40px; }

  .foot { font-size: 12px; line-height: 1.6; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
/* 아주 작은 폰 (380px 이하): 언어 선택은 지구본 아이콘 크기로, 카드 수치는 2×2 */
@media (max-width: 380px) {
  h1 { font-size: 14px; letter-spacing: .12em; }
  .logo { width: 24px; height: 24px; }
  .brand { gap: 7px; }
  .topright > .langpick { padding: 0 0 0 8px; }
  .langpick select { max-width: 30px; padding: 8px 0; color: transparent; }
  .langpick select option { color: var(--text); }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .viewtog { justify-self: stretch; }
  .viewtog button { flex: 1; }
}