/* 코인대장 — 픽셀 · 8090 옛날 인터넷 (사장님 2026-10-12 「픽셀 느낌, 8090 옛날 인터넷사이트 느낌」 → 사이버펑크 시도 후 「픽셀버전으로 가자」)
   청록 바탕화면 위에 회색 입체 창(남색 제목줄), 한글 픽셀 글꼴(갈무리), 입체 단추, 검은 전광판 시세 띠.
   모서리는 전부 각지게. 오름 빨강 / 내림 파랑(국내 관례), 실버·골드는 등급색. 깜빡임 같은 움직임은 넣지 않는다. */

:root {
  --desk: #008080;
  --win: #c0c0c0;
  --win-2: #d4d0c8;
  --hi: #ffffff;
  --lt: #dfdfdf;
  --lo: #808080;
  --dk: #000000;
  --paper: #ffffff;
  --ink: #000000;
  --mute: #3a3a3a;
  --faint: #555555;
  --navy: #000080;
  --title: linear-gradient(90deg, #000080, #1084d0);
  --link: #0000ee;
  --yel: #ffff00;
  --led: #39ff14;
  --amber: #ffb000;
  --up: #d00000;
  --down: #0000c0;
  --silver: #3c3c3c;
  --gold: #5a4300;
  --gold-bg: #ffd700;
  /* 본문·표·숫자는 또렷한 프리텐다드(숫자는 tnum 으로 자릿수 맞춤). 픽셀 글꼴은 로고·큰 제목에만, 또렷하게 나오는 배수 크기로만 */
  --f-body: 'Pretendard Variable', Pretendard, 'Malgun Gothic', system-ui, sans-serif;
  --f-num: 'Pretendard Variable', Pretendard, 'Malgun Gothic', system-ui, sans-serif;
  --f-big: 'Pretendard Variable', Pretendard, 'Malgun Gothic', system-ui, sans-serif;
  --f-pix: 'Galmuri14', 'Galmuri11', 'Malgun Gothic', monospace; /* 30px(2배)에서만 */
  --f-pix-s: 'Galmuri11', 'Malgun Gothic', monospace; /* 24px(2배)에서만 */
  --pad: 14px;
  --maxw: 1400px;
  /* 입체 테두리: 튀어나온 것 · 들어간 것 */
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--lt);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--lt), inset 2px 2px var(--dk);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 16px/1.7 var(--f-body); font-feature-settings: 'tnum';
  background-color: var(--desk);
  background-image: radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1px);
  background-size: 4px 4px;
  overflow-x: hidden; word-break: keep-all; overflow-wrap: anywhere;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #ff0000; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
small { font-size: 13.5px; }
code { font-family: var(--f-num); background: var(--win); padding: 0 4px; box-shadow: var(--sunken); }
:focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }
.num, time { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--yel); color: var(--ink); padding: 6px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.ic { flex: none; }
::selection { background: var(--navy); color: #fff; }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 14px;
  border: 0; background: var(--win); color: var(--ink); box-shadow: var(--raised); font-size: 14.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none !important; border-radius: 0;
}
.btn:hover { color: var(--ink); background: var(--win-2); }
.btn:active { box-shadow: var(--sunken); padding-top: 2px; }
.btn-ink { background: var(--navy); color: #fff; }
.btn-ink:hover { background: #1010a0; color: var(--yel); }
.btn-acc { background: var(--yel); }
.btn-danger { color: #c00000; }
.btn-warn { background: var(--gold-bg); }
.btn-xs { min-height: 24px; padding: 0 8px; font-size: 13.5px; }
.btn-lg { min-height: 38px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { color: var(--lo); text-shadow: 1px 1px var(--hi); cursor: default; }
form.inline { display: inline; }

/* ── 작은 표시 ── */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; background: var(--win); box-shadow: var(--raised);
  font-size: 14.5px; color: var(--ink); white-space: nowrap; text-decoration: none;
}
.chip:hover { color: var(--ink); background: var(--win-2); }
.chip.on { box-shadow: var(--sunken); background: var(--yel); font-weight: 700; }
.chip.sm { min-height: 24px; padding: 0 8px; font-size: 13.5px; }

.badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 5px; font-size: 12.5px; line-height: 1;
  border: 1px solid var(--ink); background: #fff; color: var(--ink); white-space: nowrap;
}
.b-notice { background: var(--navy); color: #fff; }
.b-green { background: linear-gradient(180deg, #ffffff, #b8b8b8); color: var(--silver); }
.b-red { background: linear-gradient(180deg, #fff5a0, #e6b800); color: var(--gold); }
.b-kind-new { background: #ff0000; color: #fff; border-color: #800000; }
.b-kind-add { background: #fff; border-style: dashed; }
.b-blind { background: var(--ink); color: var(--yel); }
.badges { display: inline-flex; gap: 3px; flex-wrap: wrap; }

.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 13.5px; white-space: nowrap; border: 1px solid; }
.r-none { border-color: var(--lo); color: var(--ink); background: #fff; }
.r-none::before { content: '▶'; font-size: 10px; margin-right: 3px; color: #008000; }
.r-tp { border-color: var(--up); color: #fff; background: var(--up); }
.r-sl { border-color: var(--down); color: #fff; background: var(--down); }

.chg { font-family: var(--f-num); font-size: 13.5px; white-space: nowrap; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }
.chg.flat { color: var(--mute); }
.pct { font-family: var(--f-num); font-size: 13.5px; }
.pct.up { color: var(--up); }
.pct.down { color: var(--down); }

.feed-state { display: inline-block; font-size: 12.5px; padding: 0 5px; white-space: nowrap; border: 1px solid; line-height: 16px; }
.feed-state.none { border-color: var(--lo); color: var(--mute); background: var(--win); }
.feed-state.stale { border-color: #806000; background: var(--gold-bg); color: var(--gold); }
.empty { color: var(--mute); font-size: 14.5px; padding: 16px 0; text-align: center; }
.hint { color: var(--mute); font-size: 13.5px; line-height: 1.65; margin-top: 8px; }
.na { color: var(--faint); font-size: 12.5px; }
.ok-box { background: #ffffe1; border: 1px solid var(--ink); padding: 10px 14px 10px 36px; margin-bottom: 14px; position: relative; }
.ok-box::before { content: 'i'; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; background: var(--navy); color: #fff; text-align: center; line-height: 18px; font-weight: 700; }
.errors { background: #fff; border: 1px solid var(--ink); padding: 10px 14px 10px 36px; margin-bottom: 14px; color: #c00000; position: relative; }
.errors::before { content: '!'; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; background: #ff0000; color: #fff; text-align: center; line-height: 18px; font-weight: 700; }
.errors p + p { margin-top: 4px; }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--navy); color: var(--yel); font-family: var(--f-num); }
.cic { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; background: var(--navy); color: var(--yel); overflow: hidden; box-shadow: 0 0 0 1px var(--ink); }
.cic i { font-style: normal; font-family: var(--f-num); }
.cic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* 로고는 다 받은 뒤에만 보인다(그 전에는 아래 글자 네모) — public/app.js 가 ok 를 붙인다 */
.cic img.ok { opacity: 1; background: #fff; }
.cic.flag { background: #fff; }
.cic.flag svg { width: 100%; height: 100%; }

/* ── 맨 위 전광판 시세 띠 ── */
.rail { background: #000; color: var(--led); border-bottom: 2px solid var(--win); }
.rail-in { max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: stretch; }
.ticks { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tick { padding: 6px 10px; border-right: 1px dotted #1d5c12; display: flex; flex-direction: column; min-width: 0; }
.tick-sym { font: 400 12.5px/1.3 var(--f-num); color: var(--amber); }
.tick-price { font: 600 16px/1.3 var(--f-num); color: var(--led); white-space: nowrap; }
.tick .chg { font-size: 12.5px; }
.tick .chg.up { color: #ff5050; }
.tick .chg.down { color: #6ea8ff; }
.tick .chg.flat { color: #8a8a8a; }
.tick.is-stale .tick-price { color: #8aa585; text-shadow: none; }
.rail-side { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 1px; padding: 4px 12px; }
.rail-all { color: var(--yel); font-size: 13.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.rail-all:hover { color: #fff; }
.rail .provider { color: #8a8a8a; font-size: 12.5px; white-space: nowrap; }
.rail .feed-state.stale { background: #3a3000; color: var(--amber); border-color: var(--amber); }

/* ── 머리판: 회색 창 ── */
.mast { margin: 12px max(var(--pad), calc((100% - var(--maxw)) / 2)) 0; background: var(--win); box-shadow: var(--raised); padding: 3px; }
.mast-in { display: flex; align-items: center; gap: 16px; padding: 10px 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo .mark { width: 40px; height: 40px; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--ink); }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-word b { font: 400 30px/1.2 var(--f-pix); color: var(--navy); text-shadow: 2px 2px 0 var(--hi), 4px 4px 0 var(--lo); }
.logo-word small { font: 400 12.5px/1.2 var(--f-num); letter-spacing: 0.18em; color: var(--mute); margin-top: 4px; }
.mast-tag { margin-right: auto; font-size: 13.5px; color: var(--mute); background: #fff; box-shadow: var(--sunken); padding: 4px 10px; }
.mast-tag span { color: var(--lo); margin: 0 3px; }
.guest { display: flex; gap: 6px; }
.account { position: relative; }
.acct-btn { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; padding: 0 10px 0 4px; background: var(--win); box-shadow: var(--raised); font-weight: 700; }
.acct-btn::-webkit-details-marker { display: none; }
.acct-btn::after { content: '▼'; font-size: 10px; }
.account[open] .acct-btn { box-shadow: var(--sunken); }
.acct-dot { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: var(--yel); }
.acct-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 2px); min-width: 190px; background: var(--win); box-shadow: var(--raised), 3px 3px 0 rgba(0, 0, 0, .5); padding: 3px; z-index: 30; display: flex; flex-direction: column; }
.acct-menu a, .acct-menu button { display: block; text-align: left; padding: 6px 12px; border: 0; background: none; font-size: 14.5px; cursor: pointer; width: 100%; color: var(--ink); text-decoration: none; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--navy); color: #fff; }
.acct-menu form { margin: 0; border-top: 1px solid var(--lo); }

/* 메뉴 줄: 옛 PC통신식 단추 줄 */
.nav { padding: 0 3px 3px; }
.nav-in { display: flex; flex-wrap: wrap; gap: 3px; background: var(--win); padding: 4px; box-shadow: var(--sunken); }
.nav-item {
  position: relative; padding: 5px 14px; font-size: 15px; color: var(--ink); white-space: nowrap; text-decoration: none;
  background: var(--win); box-shadow: var(--raised);
}
.nav-item:hover { color: var(--ink); background: var(--win-2); }
.nav-item.active { box-shadow: var(--sunken); background: var(--yel); font-weight: 700; }
.nav-item.g-silver::before, .nav-item.g-gold::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; box-shadow: 0 0 0 1px var(--ink); }
.nav-item.g-silver::before { background: linear-gradient(135deg, #fff, #9a9a9a); }
.nav-item.g-gold::before { background: linear-gradient(135deg, #fff5a0, #d4a800); }

/* ── 본문 틀 ── */
.page { max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding: 18px var(--pad) 40px; }

/* 쪽 머리: 바탕화면 위 큰 픽셀 글자 */
.ph { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; color: #fff; }
.ph-text { flex: 1; min-width: 0; }
.ph h1 { font: 400 30px/1.25 var(--f-pix); text-shadow: 2px 2px 0 #000; }
.ph h1::before { content: '▶ '; color: var(--yel); }
.ph h1 .sub { font: 400 16px/1 var(--f-body); color: var(--yel); margin-left: 6px; text-shadow: 1px 1px 0 #000; }
.ph .lead { margin-top: 8px; max-width: 80ch; font-size: 14.5px; background: #ffffe1; color: var(--ink); border: 1px solid var(--ink); padding: 6px 10px; }
.ph .kicker { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; text-shadow: 1px 1px 0 #000; }
.ph-act { flex: none; display: flex; gap: 6px; }
.gk { font: 400 12.5px/1 var(--f-num); letter-spacing: 0.12em; padding: 3px 6px; border: 1px solid var(--ink); color: var(--ink); text-shadow: none; }
.gk.silver { background: linear-gradient(180deg, #fff, #b8b8b8); }
.gk.gold { background: linear-gradient(180deg, #fff5a0, #e6b800); }

/* 창 묶음 */
.sheet { display: grid; gap: 10px; margin-bottom: 16px; }
.sheet.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheet.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sheet.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.span-all { grid-column: 1 / -1; }
/* 창 하나: 회색 입체 테두리 + 남색 제목줄 + 흰 내용 */
.cell {
  background: var(--paper); min-width: 0; display: flex; flex-direction: column;
  box-shadow: var(--raised), inset 0 0 0 4px var(--win); padding: 4px 4px 14px;
}
.cell > :not(.ch-head) { margin-left: 10px; margin-right: 10px; }
.cell > .empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.ch-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--title); color: #fff;
  padding: 3px 4px 3px 8px; margin-bottom: 10px; min-height: 26px;
}
.ch-head h3 { font: 700 14.5px/1.3 var(--f-body); }
.ch-head h3::before { content: '■ '; color: var(--yel); font-size: 11px; }
.ch-head .meta { color: #cfe3ff; font-size: 12.5px; }
.ch-head .feed-state { background: #fff; }
.more { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; white-space: nowrap; color: var(--link); }
.ch-head .more { color: var(--ink); background: var(--win); box-shadow: var(--raised); padding: 0 8px; text-decoration: none; line-height: 20px; }
.ch-head .more:hover { background: var(--yel); color: var(--ink); }
.ch-head .more:active { box-shadow: var(--sunken); }
.ink-cell { background: #000; color: #d0d0d0; }
.ink-cell .hint, .ink-cell .empty { color: #a0a0a0; }
.ink-cell .stat-row div { background: #101010; box-shadow: inset 0 0 0 1px #2a2a2a; }
.ink-cell .stat-row dt { color: #a0a0a0; }
.ink-cell .stat-row dd { color: var(--led); }
.ink-cell .stat-row dd.l { color: #ff6060; }
.ink-cell .stat-row dd.s { color: #7fb0ff; }

.src-line { color: #e0fff8; font-size: 13.5px; margin: -6px 0 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; text-shadow: 1px 1px 0 #000; }
.sec-title { font: 700 20px/1.2 var(--f-big); color: #fff; text-shadow: 2px 2px 0 #000; margin: 24px 0 12px; }
.sec-title::before { content: '▶ '; color: var(--yel); }
.mini-h { font-size: 13.5px; margin: 2px 0 4px; display: flex; align-items: center; gap: 6px; }
.mini-h.up { color: var(--up); }
.mini-h.down { color: var(--down); }
.mini-h.up::before { content: '▲'; }
.mini-h.down::before { content: '▼'; }
.mini-h + .mv-list + .mini-h { margin-top: 12px; }

/* ── 메인: 면 ── */
.desk { margin-top: 30px; }
.desk-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 0 0 10px; color: #fff; border-bottom: 2px dashed rgba(255, 255, 255, .45); margin-bottom: 12px; }
.desk-head h2 { font: 400 30px/1.2 var(--f-pix); text-shadow: 3px 3px 0 #000; }
.desk-head h2::before { content: '★ '; color: var(--yel); }
.desk-head p { font-size: 13.5px; color: #e0fff8; text-shadow: 1px 1px 0 #000; }
.desk-head .more { color: var(--ink); background: var(--win); box-shadow: var(--raised); padding: 2px 10px; text-decoration: none; }
.desk-head .more:hover { background: var(--yel); }

/* 브리핑 */
.brief { margin-bottom: 0; }
.bf { gap: 2px; padding: 4px 4px 12px; }
.bf > * { margin-left: 12px !important; margin-right: 12px !important; }
.bf-k { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; background: var(--title); color: #fff; margin: 0 0 8px !important; padding: 3px 8px; }
.bf-k em { font-style: normal; font: 400 12.5px/1 var(--f-num); color: #cfe3ff; }
.bf-v { font: 600 30px/1.2 var(--f-num); white-space: nowrap; }
.bf-s { display: flex; align-items: center; gap: 8px; }
.bf-s small { color: var(--faint); font-size: 12.5px; }
.bf-x { font-size: 13.5px; color: var(--mute); }
.bf-main { background: #ffffa8; }
.bf-main .bf-k { background: linear-gradient(90deg, #800000, #d04000); }
.bf .spark { width: auto; height: 30px; margin-top: 4px; }
.spark path { fill: none; stroke-width: 2; }
.spark.up path { stroke: var(--up); }
.spark.down path { stroke: var(--down); }

/* 시장 · 파생 · 추천 · 소식 배치 */
.g-market { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kimp up alert"; }
.a-kimp { grid-area: kimp; } .a-up { grid-area: up; } .a-alert { grid-area: alert; }
.g-deriv { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "heat oi"; }
.a-heat { grid-area: heat; } .a-oi { grid-area: oi; }
.g-recs { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "recent tiles"; }
.a-recent { grid-area: recent; }
.a-tiles { grid-area: tiles; background: transparent; box-shadow: none; padding: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.a-tiles > * { margin: 0 !important; }
.grade-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 16px 18px; min-height: 140px; text-decoration: none !important; color: var(--ink); box-shadow: var(--raised); overflow: hidden; }
.grade-tile:hover { color: var(--ink); }
.grade-tile:active { box-shadow: var(--sunken); }
.grade-tile.silver { background: repeating-linear-gradient(135deg, #f0f0f0 0 6px, #dcdcdc 6px 12px); }
.grade-tile.gold { background: repeating-linear-gradient(135deg, #fff3a0 0 6px, #ffe066 6px 12px); }
.grade-tile .gt-k { align-self: flex-start; margin-bottom: auto; font: 400 12.5px/1 var(--f-num); letter-spacing: 0.2em; background: var(--ink); color: #fff; padding: 3px 6px; }
.grade-tile b { font: 400 30px/1.2 var(--f-pix); text-shadow: 2px 2px 0 #fff; margin-top: 12px; }
.grade-tile small { font-size: 13.5px; background: #fff; border: 1px solid var(--ink); padding: 2px 6px; align-self: flex-start; }
.grade-tile .ic { position: absolute; right: 14px; top: 10px; }
.grade-tile:hover b { color: var(--navy); }
.gal-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 10px; color: #fff; }
.gal-head h3 { font: 700 18px/1.2 var(--f-big); text-shadow: 2px 2px 0 #000; }
.gal-head h3::before { content: '♛ '; color: var(--yel); }
.gal-head .more { color: var(--ink); background: var(--win); box-shadow: var(--raised); padding: 0 8px; text-decoration: none; }
.g-news { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "news tg yt ch"; }
.a-news { grid-area: news; } .a-tg { grid-area: tg; } .a-yt { grid-area: yt; } .a-ch { grid-area: ch; }

.tv-chart { width: 100%; height: 520px; border: 0; box-shadow: var(--sunken); padding: 2px; background: var(--win); display: block; }
.kpi { font: 600 26px/1.2 var(--f-num); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.kpi small { font-size: 13.5px; color: var(--mute); display: inline-flex; gap: 4px; }
/* 온체인·매크로 칸: 무엇인지 한 줄 · 늘었나 줄었나 + 뜻 */
.cell .what { font-size: 12.5px; color: var(--mute); margin: -2px 0 6px; line-height: 1.45; }
.easy { margin: -2px 0 8px; font-size: 13.5px; line-height: 1.5; }
.easy .chg { font-family: inherit; font-size: 14px; font-weight: 700; white-space: normal; display: block; }
.easy span { color: var(--ink); }

/* 그래프: 검은 화면에 녹색 선 */
.chart { width: 100%; height: auto; display: block; background: #000; border: 1px solid var(--ink); }
.chart-area { fill: rgba(57, 255, 20, .12); }
.chart-line { fill: none; stroke: var(--led); stroke-width: 2; }
.chart.alt .chart-area { fill: rgba(255, 176, 0, .14); }
.chart.alt .chart-line { stroke: var(--amber); }
.chart-cap { font-size: 12.5px; color: var(--mute); margin: 10px 0 4px; }

/* ── 표 ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--sunken); padding: 2px; background: #fff; }
.ledger { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ledger th { text-align: left; font-size: 13.5px; font-weight: 400; padding: 3px 8px; background: var(--win); box-shadow: var(--raised); white-space: nowrap; }
.ledger td { padding: 7px 8px; border-bottom: 1px dotted var(--lo); vertical-align: middle; }
.ledger tbody tr:nth-child(even) td { background: #f4f4f4; }
.ledger tbody tr:hover td { background: #ffffcc; }
.ledger .num { text-align: right; white-space: nowrap; font-family: var(--f-num); }
.ledger td.coin { white-space: nowrap; }
.ledger td.coin .cic, .ledger td.coin .avatar { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.ledger td.coin b { vertical-align: middle; }
.ledger .cn { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.3; }
.ledger .cn small { color: var(--faint); font-family: var(--f-num); font-size: 12.5px; }
.ledger .no { color: var(--faint); width: 1%; }
.ledger td.empty { text-align: center; }
.post-table td.date { width: 1%; color: var(--mute); }

/* 급등락 */
.mv-list li { display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dotted var(--lo); }
.mv-list .rk { color: var(--faint); font-size: 12.5px; }
.mv-list .num { font-size: 13.5px; }
.mv-name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mv-name b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-name small { color: var(--faint); font-family: var(--f-num); font-size: 12.5px; }
.mv-alerts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t n w" "t n p"; column-gap: 8px; padding: 6px 0 6px 8px; border-bottom: 1px dotted var(--lo); border-left: 4px solid var(--lo); }
.mv-alerts li.up { border-left-color: var(--up); }
.mv-alerts li.down { border-left-color: var(--down); }
.mv-alerts time { grid-area: t; font-size: 13.5px; color: var(--mute); }
.mv-alerts .mv-name { grid-area: n; }
.mv-alerts .mv-what { grid-area: w; font-size: 13.5px; text-align: right; white-space: nowrap; }
.mv-alerts .mv-px { grid-area: p; font-size: 12.5px; color: var(--mute); text-align: right; white-space: nowrap; }

/* 미결제 약정(메인) */
.oi-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c u" "p1 p2"; gap: 0 10px; padding: 6px 0; border-bottom: 1px dotted var(--lo); }
.oi-c { grid-area: c; display: flex; align-items: center; gap: 6px; }
.oi-u { grid-area: u; text-align: right; }
.oi-p { display: inline-flex; gap: 4px; align-items: baseline; font-size: 13.5px; }
.oi-p:nth-of-type(3) { grid-area: p1; }
.oi-p:nth-of-type(4) { grid-area: p2; justify-self: end; }
.oi-p small { color: var(--faint); font-family: var(--f-num); }

/* 고래 */
.px-whale { image-rendering: pixelated; }
.dw-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "px n" "px p"; column-gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--lo); }
.dw-list .px-whale { grid-area: px; }
.dw-name { grid-area: n; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.dw-name b { font-size: 14.5px; }
.dw-pos { grid-area: p; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
em.l, em.s { font-style: normal; font-family: var(--f-num); font-size: 13.5px; }
em.l { color: var(--up); }
em.s { color: var(--down); }
.nm-kind { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.nm-kind.k-owner { color: #008000; }
.bias li { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "c b" "c n"; column-gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--lo); }
.bias-coin { grid-area: c; display: flex; align-items: center; gap: 6px; font-size: 14.5px; }
.bias-bar { grid-area: b; display: flex; height: 12px; background: var(--win); box-shadow: var(--sunken); padding: 2px; }
.bias-bar i { display: block; height: 100%; }
.bias-bar i.l { background: repeating-linear-gradient(90deg, var(--up) 0 6px, transparent 6px 8px); }
.bias-bar i.s { background: repeating-linear-gradient(90deg, var(--down) 0 6px, transparent 6px 8px); }
.bias-num { grid-area: n; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bias.compact { margin-top: 10px; }

/* ── 피드 카드 ── */
.fb-sec + .fb-sec { margin-top: 14px; }
.fb-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; padding-bottom: 2px; border-bottom: 1px dashed var(--lo); }
.fb-h b { font-size: 14.5px; }
.fb-h small { color: var(--faint); font-family: var(--f-num); }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.fb-stack { display: flex; flex-direction: column; gap: 6px; }
.fb-card { background: #fff; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--lo); padding: 7px 9px; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-decoration: none !important; color: var(--ink); }
a.fb-card:hover { background: #ffffcc; color: var(--ink); }
.fb-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fb-time { font-size: 12.5px; color: var(--mute); }
.fb-tag { font-size: 12.5px; padding: 0 4px; border: 1px solid var(--lo); background: var(--win); line-height: 16px; }
.fb-tag.k-in, .fb-tag.k-long { color: #fff; border-color: var(--up); background: var(--up); }
.fb-tag.k-out, .fb-tag.k-short { color: #fff; border-color: var(--down); background: var(--down); }
.fb-tag.k-miner { color: var(--gold); border-color: #806000; background: var(--gold-bg); }
.fb-tag.k-alarm { background: var(--ink); color: var(--yel); border-color: var(--ink); }
.fb-whales { color: var(--navy); font-size: 10px; letter-spacing: 1px; }
.fb-main { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.fb-main b { font-family: var(--f-num); font-size: 15px; font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.fb-main em { font-style: normal; font-family: var(--f-num); font-size: 13.5px; margin-left: auto; white-space: nowrap; }
.fb-sub { color: var(--mute); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.fb-src { color: var(--faint); font-size: 12.5px; }
.ev-type { font-size: 12.5px; padding: 0 4px; background: var(--navy); color: #fff; line-height: 16px; }
.ev-type.t-open { background: var(--yel); color: var(--ink); border: 1px solid var(--ink); }
.ev-type.t-close { background: var(--win); color: var(--ink); }
.side { display: inline-block; font-size: 12.5px; padding: 0 5px; color: #fff; line-height: 16px; }
.side.long { background: var(--up); }
.side.short { background: var(--down); }
.nw-card { gap: 5px; }
.nw-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--win); margin: -7px -9px 3px; border-bottom: 1px solid var(--ink); }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nw-title { font-size: 14.5px; line-height: 1.55; }

/* ── 청산 히트맵(캔버스) ── */
.lm { position: relative; width: 100%; }
.lm-canvas { display: block; width: 100%; }
/* 메인 작은 히트맵: 옆 칸(미결제 약정·고래) 높이만큼 꽉 채운다 */
.a-heat { display: flex; flex-direction: column; }
.a-heat .lm { flex: 1; display: flex; flex-direction: column; }
.lm.small .lm-plot { flex: 1; position: relative; min-height: 260px; }
.lm.small .lm-plot .lm-canvas { position: absolute; inset: 0; }
.lm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
.lm-foot .lm-legend { margin-top: 0; }
.lm-share { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lm-toast { font-size: 12.5px; color: var(--led); }
.cell:not(.ink-cell) .lm-toast { color: var(--ink); }
.lm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: #a0a0a0; }
.lm-key { display: inline-flex; align-items: center; gap: 6px; }
.lm-key::before { content: ''; width: 14px; height: 8px; }
.lm-key.k-c::before { background: linear-gradient(90deg, #ff5d63 50%, #5aa9ff 50%); }
.lm-key.k-h::before { background: linear-gradient(90deg, #44014f, #21918c, #fde725); }
.lm-key.k-s::before { background: var(--led); }
.lm-key.k-l::before { background: #ff5d63; }
.cell:not(.ink-cell) .lm-legend { color: var(--mute); }

/* ── 최근 게시글 탭: 옛 탭 대화상자 ── */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--lo); padding-left: 2px; }
.tab { border: 0; background: var(--win); box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--lo); padding: 4px 12px; font-size: 14.5px; cursor: pointer; margin-right: -1px; position: relative; top: 1px; }
.tab.on { background: #fff; font-weight: 700; z-index: 1; }
.recent li { border-bottom: 1px dotted var(--lo); }
.recent li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 2px; text-decoration: none; color: var(--ink); }
.recent li a:hover { background: #ffffcc; color: var(--ink); }
.rt { display: flex; flex-direction: column; min-width: 0; }
.rt b { font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--link); text-decoration: underline; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rt small { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent time { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.recent .is-hidden .rt b { color: var(--mute); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.recent li.empty { padding: 24px 0; border: 0; }

/* ── 수익 마감 갤러리: 옛 상장(賞狀) 카드 ── */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.g-card { position: relative; background: #fffef0; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; text-decoration: none !important; color: var(--ink); box-shadow: var(--raised), inset 0 0 0 4px var(--win), inset 0 0 0 6px #b8860b; }
.g-card:hover { background: #ffffcc; color: var(--ink); }
.g-top { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.g-stamp { margin-left: auto; font-size: 12.5px; padding: 1px 6px; background: #ff0000; color: #fff; border: 1px solid #800000; white-space: nowrap; }
.g-coin { font-size: 16px; margin-top: 4px; overflow-wrap: anywhere; }
.g-pct { font: 600 32px/1.2 var(--f-num); color: var(--up); text-shadow: 2px 2px 0 #ffd0d0; }
.g-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-top: 1px dashed var(--lo); padding-top: 4px; }
.g-line small { color: var(--mute); }
.g-line .num { text-align: right; overflow-wrap: anywhere; }
.g-foot { display: flex; flex-direction: column; color: var(--faint); font-size: 12.5px; margin-top: 3px; }

/* ── 소식·채널 ── */
.news-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--lo); }
.news-list time { color: var(--mute); font-size: 12.5px; padding-top: 2px; }
.news-title a, .news-title span { line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-title small { display: block; color: var(--faint); font-size: 12.5px; }
.tg-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--lo); }
.tg-list a { display: flex; flex-direction: column; min-width: 0; }
.tg-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-sum { color: var(--mute); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-list time { color: var(--faint); font-size: 12.5px; }
.yt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.yt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yt-thumb { display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: var(--sunken); padding: 2px; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-title { font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt time { color: var(--faint); font-size: 12.5px; }
.channels { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ch { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: var(--win); box-shadow: var(--raised); padding: 7px 10px; text-decoration: none !important; color: var(--ink); flex: 1; }
a.ch:hover { background: var(--yel); color: var(--ink); }
a.ch:active { box-shadow: var(--sunken); }
.ch-mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 0 1px var(--ink); }
.ch-mark.kakao { background: #fee500; color: #191600; }
.ch-mark.insta { background: #c13584; }
.ch-mark.tg { background: #229ed9; }
.ch-mark.yt { background: #e62117; }
.ch-label { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.4; min-width: 0; }
.ch-label small { color: var(--mute); font-size: 12.5px; }
.ch.is-off { color: var(--lo); text-shadow: 1px 1px 0 var(--hi); }
.ch.is-off .ch-mark { filter: grayscale(1); opacity: .5; }
.ch.is-off .ic { visibility: hidden; }

/* ── 보조지표 화면 ── */
.sub-nav { margin-bottom: 16px; background: var(--win); box-shadow: var(--raised); padding: 5px; }
.coin-chips { margin-bottom: 10px; }
.range-chips { margin-left: auto; }
.ch-head .chips .chip { min-height: 20px; padding: 0 6px; font-size: 12.5px; }
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dex-card { background: #fff; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--lo); padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative; min-width: 0; }
.dex-rank { position: absolute; top: 8px; right: 10px; font: 400 13.5px/1 var(--f-num); background: var(--navy); color: var(--yel); padding: 2px 4px; }
.dex-px { padding: 6px; background: #87ceeb; box-shadow: var(--sunken); margin-bottom: 6px; }
.dex-name { font-size: 14.5px; overflow-wrap: anywhere; }
.dex-val { font-family: var(--f-num); font-size: 13.5px; }
.dex-pos { display: flex; flex-wrap: wrap; gap: 6px; }
.dex-top { font-size: 13.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.who .px-whale { flex: none; }
.who-name { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.who-name b { font-size: 13.5px; font-weight: 400; white-space: normal; }
.who-name .nm-kind, .who-name .addr { display: block; }
.addr { font-family: var(--f-num); font-size: 12.5px; color: var(--faint); }
.oi-card { gap: 6px; }
.oi-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oi-head b { font-size: 16px; }
.oi-head small { color: var(--mute); }
.oi-val { font: 600 26px/1.2 var(--f-num); }
.oi-chg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 0; margin-bottom: 0; }
.oi-chg div { border-top: 1px dotted var(--lo); padding-top: 3px; }
.oi-chg dt { font-size: 12.5px; color: var(--mute); }
.oi-chg dd { margin: 0; }
.oi-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; font-size: 13.5px; }
.oi-ex li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--lo); padding: 2px 0; }
.oi-ex b { font-family: var(--f-num); font-weight: 400; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 0; margin-bottom: 12px; }
.stat-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-row div { background: var(--win); box-shadow: var(--sunken); padding: 6px 9px; min-width: 0; }
.stat-row dt { font-size: 12.5px; color: var(--mute); }
.stat-row dd { margin: 2px 0 0; font-family: var(--f-num); font-size: 15px; overflow-wrap: anywhere; }
.stat-row dd.big { font-size: 22px; }
.stat-row dd.in, .stat-row dd.l { color: var(--up); }
.stat-row dd.out, .stat-row dd.s { color: var(--down); }
.liq-total { margin: 0 0 16px; }
.liq-total .cell { padding: 10px 14px; }
.liq-total .cell > * { margin: 0; }
.liq-total dt { font-size: 13.5px; color: var(--mute); }
.liq-total dd { margin: 0; font: 600 22px/1.3 var(--f-num); }
.liq-total .l dd { color: var(--up); }
.liq-total .s dd { color: var(--down); }
.legend { display: inline-flex; gap: 10px; }
.legend em { font-style: normal; color: #fff; }
.legend em::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 4px; box-shadow: 0 0 0 1px #fff; }
.legend em.s::before { background: var(--down); }
.legend em.l::before { background: var(--up); }
.liq-map li { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 6px; align-items: center; padding: 1px 0; font-size: 13.5px; }
.liq-map li.here { background: #ffffa8; outline: 1px dotted var(--ink); }
.lv-price { text-align: right; padding-right: 4px; }
.lv-price em { font-style: normal; display: block; font-size: 11px; color: #800000; }
.lv-bar { height: 10px; background: #eee; display: flex; }
.lv-bar.s { justify-content: flex-end; }
.lv-bar i { display: block; height: 100%; }
.lv-bar.s i { background: var(--down); }
.lv-bar.l i { background: var(--up); }
.lv-num { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.3; }
.liq-big li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--lo); font-size: 13.5px; }
.liq-big time { color: var(--mute); font-size: 12.5px; }
.chart-cell .tv-chart { height: 560px; }

/* ── 추천 게시판 ── */
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-row .chips { background: var(--win); box-shadow: var(--raised); padding: 4px; }
.blind-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; background: #ffffe1; border: 1px solid var(--ink); padding: 4px 8px; }
.board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
.board-main { min-width: 0; }
.side { align-content: start; }
.guide li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 13.5px; }
.guide .n { font-size: 12.5px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: var(--yel); }
.side-recs li a { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "i t" "i m"; column-gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--lo); text-decoration: none; color: var(--ink); }
.side-recs li a:hover { background: #ffffcc; color: var(--ink); }
.side-recs .cic { grid-area: i; }
.sr-top { grid-area: t; display: flex; justify-content: space-between; gap: 8px; }
.sr-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--link); text-decoration: underline; }
.sr-top time { color: var(--faint); font-size: 12.5px; }
.sr-meta { grid-area: m; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sr-meta .sum { color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-table td.coin a { display: inline-flex; align-items: center; gap: 6px; }
.rec-table td.coin .cic { margin: 0; }
.rec-table td.wrap { white-space: normal; text-align: left; min-width: 110px; }
.rec-table td.sum { max-width: 220px; }
.rec-table td.sum a { color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; text-decoration: none; }
.rec-table td.date { color: var(--mute); font-size: 13.5px; white-space: nowrap; }
.rec-table td.res { white-space: nowrap; }
.rec-table td.res form { margin-left: 6px; }
.rec-table tr.is-hidden td { color: var(--mute); background: repeating-linear-gradient(-45deg, #fff 0 4px, #e6e6e6 4px 6px) !important; }
.rec-table .hidden-title a { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); }
.rec-table tr.admin-blinded td { background: #fff8d0 !important; }

/* 최근 추천: 창 */
.ticket { background: #fff; margin-bottom: 14px; box-shadow: var(--raised), inset 0 0 0 4px var(--win); padding: 4px; }
.tk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 8px; background: var(--title); color: #fff; }
.ticket.gold .tk-head { background: linear-gradient(90deg, #806000, #e0b000); }
.ticket.silver .tk-head { background: linear-gradient(90deg, #404040, #a0a0a0); }
.tk-k { font-weight: 700; margin-right: 4px; }
.tk-k::before { content: '★ '; color: var(--yel); }
.tk-head time { margin-left: auto; font-size: 12.5px; }
.tk-body { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr); }
.tk-body > * { padding: 14px; min-width: 0; }
.tk-body > * + * { border-left: 1px dotted var(--lo); }
.tk-coin { display: flex; flex-direction: column; gap: 8px; text-decoration: none !important; color: var(--ink); }
.tk-coin:hover { color: var(--ink); }
.tk-coin b { font: 700 24px/1.2 var(--f-big); overflow-wrap: anywhere; }
.tk-coin .go { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; margin-top: auto; color: var(--link); text-decoration: underline; }

/* 가격 사다리 */
.ladder { display: flex; flex-direction: column; border-left: 4px solid var(--navy); background: #fff; }
.lad { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 7px 0 7px 12px; border-bottom: 1px dotted var(--lo); position: relative; }
.lad::before { content: '◆'; position: absolute; left: -9px; top: 7px; font-size: 14.5px; color: var(--navy); line-height: 1; }
.lad-k { font-size: 13.5px; color: var(--mute); }
.lad-v { font-family: var(--f-num); font-size: 16px; font-weight: 400; overflow-wrap: anywhere; line-height: 1.4; }
.lad-v small { color: var(--mute); }
.lad.tp::before { color: var(--up); }
.lad.en { background: #ffffa8; }
.lad.en .lad-v { font-size: 18px; }
.lad.sl::before { color: var(--down); }
.rationale h3 { font-size: 13.5px; color: var(--navy); margin-bottom: 6px; }
.rationale h3::before { content: '▶ '; }
.rationale ul { display: flex; flex-direction: column; gap: 4px; }
.rationale li { padding-left: 14px; position: relative; font-size: 14.5px; }
.rationale li::before { content: '·'; position: absolute; left: 2px; top: 0; font-weight: 700; }

/* 상세·문서 창 */
.detail { max-width: 1000px; margin: 0 auto; }
.crumbs { display: flex; gap: 6px; font-size: 13.5px; margin-bottom: 10px; background: var(--win); box-shadow: var(--sunken); padding: 3px 8px; width: fit-content; max-width: 100%; }
.rec-doc, .doc-card { background: #fff; box-shadow: var(--raised), inset 0 0 0 4px var(--win); padding: 24px 26px; margin-bottom: 16px; }
.rd-head { border-bottom: 2px solid var(--navy); padding-bottom: 12px; margin-bottom: 16px; }
.detail-title { font: 700 26px/1.3 var(--f-big); display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; overflow-wrap: anywhere; color: var(--navy); }
.detail-title span { min-width: 0; }
.meta { color: var(--mute); font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
.post-body { font-size: 15px; line-height: 1.9; margin: 16px 0; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.notice-box { display: flex; gap: 12px; align-items: flex-start; background: #ffffe1; border: 1px solid var(--ink); padding: 14px; margin-top: 12px; }
.notice-box b { display: block; margin-bottom: 2px; }
.admin-panel { background: var(--win); box-shadow: var(--raised); padding: 4px 4px 14px; }
.admin-panel > * { margin-left: 12px; margin-right: 12px; }
.admin-panel h2 { font: 700 14.5px/1.3 var(--f-body); background: linear-gradient(90deg, #800000, #d04000); color: #fff; padding: 4px 8px; margin: 0 0 10px; }
.admin-panel h3 { font-size: 14.5px; margin-top: 14px; margin-bottom: 4px; padding-top: 10px; border-top: 1px solid var(--lo); }
.admin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; font-size: 14.5px; }
.admin-row select { min-height: 26px; border: 0; box-shadow: var(--sunken); padding: 0 6px; background: #fff; border-radius: 0; margin-left: 4px; }
.talk-row b { min-width: 72px; }
.gallery-on { color: #006000; }

/* ── 폼: 대화상자 ── */
.form-page { max-width: 760px; margin: 0 auto; }
.form-page.narrow { max-width: 520px; }
.form-page.wide { max-width: 1180px; }
.form-card { background: var(--win); box-shadow: var(--raised); padding: 18px 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.form-sub { font-size: 14.5px; background: var(--title); color: #fff; padding: 3px 8px; margin: -14px -16px 2px; }
.field { display: flex; flex-direction: column; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { font-size: 14.5px; padding: 0; }
.field input, .field textarea, .field select, .member-search input, .form-card textarea, .rec-form textarea {
  width: 100%; min-height: 32px; padding: 6px 8px; border: 0; background: #fff; border-radius: 0; font-size: 15px; box-shadow: var(--sunken);
}
.field textarea, .form-card textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .member-search input:focus, .form-card textarea:focus { outline: 1px dotted var(--ink); outline-offset: -5px; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; cursor: pointer; }
.opts .opt { background: var(--win); box-shadow: var(--raised); padding: 5px 12px; }
.opts .opt:has(input:checked) { box-shadow: var(--sunken); background: var(--yel); }
.opts .opt.silver:has(input:checked) { background: linear-gradient(180deg, #fff, #c8c8c8); }
.opts .opt.gold:has(input:checked) { background: linear-gradient(180deg, #fff5a0, #ffd700); }
.opt input { width: 14px; height: 14px; accent-color: var(--navy); margin: 0; }
.opt.warn { color: #806000; }
.opt-t { font-style: normal; font-size: 12.5px; color: var(--faint); }
.req { font-style: normal; font-size: 12.5px; background: #ff0000; color: #fff; padding: 0 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { text-align: center; font-size: 14.5px; margin-top: 12px; color: #fff; text-shadow: 1px 1px 0 #000; }
.form-foot a { color: var(--yel); }
.privacy-box { background: #fff; box-shadow: var(--sunken); padding: 10px 12px; font-size: 13.5px; }
.privacy-box ul { margin: 6px 0; display: flex; flex-direction: column; gap: 2px; }

/* 추천 등록폼: 왼쪽 입력, 오른쪽 도스 화면 미리보기 */
.rec-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); background: var(--win); box-shadow: var(--raised); padding: 4px; }
.rf-fields { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rf-preview { padding: 14px; margin: 8px; background: #000; color: var(--led); display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: var(--sunken); }
.rf-k { font: 400 13.5px/1 var(--f-num); color: var(--amber); }
.rf-k::before { content: 'C:\\> '; }
.msg-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14.5px/1.7 var(--f-num); padding: 6px 0; min-height: 220px; flex: 1; color: var(--led); }
.rf-preview .hint { color: #9ad08e; }
.rf-preview [data-bytes].over { color: var(--amber); }
.rf-preview .opt.warn { color: var(--amber); }
.rf-note { padding: 16px 18px; }
.rec-form .actions { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-top: 1px solid var(--lo); justify-content: flex-end; }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tp-in { position: relative; }
.tp-in em { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font: 400 13.5px/1 var(--f-num); color: var(--mute); }
.tp-in input { width: 100%; min-height: 32px; padding: 6px 8px 6px 34px; border: 0; border-radius: 0; background: #fff; box-shadow: var(--sunken); }

/* 로그인·가입: 접속 프로그램 창 */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); max-width: 1000px; margin: 0 auto; background: var(--win); box-shadow: var(--raised), 4px 4px 0 rgba(0, 0, 0, .45); padding: 4px; }
.auth-side { background: var(--navy); color: #fff; padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.auth-side::after { content: ''; position: absolute; right: 16px; bottom: 16px; width: 96px; height: 96px;
  background: linear-gradient(var(--yel), var(--yel)) 0 100% / 26% 40% no-repeat, linear-gradient(var(--yel), var(--yel)) 50% 100% / 26% 70% no-repeat, linear-gradient(var(--yel), var(--yel)) 100% 100% / 26% 100% no-repeat; }
.auth-k { font: 400 13.5px/1 var(--f-num); color: var(--yel); }
.auth-k::before { content: '☎ '; }
.auth-big { font: 400 30px/1.35 var(--f-pix); text-shadow: 3px 3px 0 #000; }
.auth-side p:last-child { color: #cfe3ff; font-size: 14.5px; max-width: 30ch; position: relative; z-index: 1; }
.auth-main { padding: 22px 24px; }
.auth-main h1 { font: 700 22px/1.2 var(--f-big); margin-bottom: 14px; color: var(--navy); }
.auth-main .form-card { box-shadow: none; padding: 0; }
.auth-main .form-foot { color: var(--ink); text-shadow: none; }
.auth-main .form-foot a { color: var(--link); }
.auth-main .form-foot.hint { color: var(--mute); }

/* 회원 관리 */
.member-search { display: flex; gap: 6px; margin-bottom: 14px; }
.member-search input { flex: 1; }
.members li.member { border-bottom: 1px dotted var(--lo); }
.members li.is-off { opacity: .55; }
.members li.is-saved { background: #ffffa8; }
.member-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 4px; }
.m-who { flex: 1 1 280px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.m-who small { flex-basis: 100%; color: var(--mute); }
.legacy { font-style: normal; background: #e8e8ff; padding: 0 4px; }
.legacy.warn { background: var(--gold-bg); color: var(--gold); }
.m-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-set .opt { padding: 3px 8px; background: var(--win); box-shadow: var(--raised); }
.m-set .opt:has(input:checked) { box-shadow: var(--sunken); }
.m-set .opt.silver:has(input:checked) { background: linear-gradient(180deg, #fff, #c8c8c8); }
.m-set .opt.gold:has(input:checked) { background: linear-gradient(180deg, #fff5a0, #ffd700); }
.status-list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted var(--lo); font-size: 13.5px; flex-wrap: wrap; }
.status-list span { color: var(--mute); }
.me-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.me-card b { font-size: 18px; color: var(--navy); }
.me-card span { color: var(--mute); }
.me-card p { flex-basis: 100%; }
.leave summary { cursor: pointer; color: var(--mute); }
.doc h2 { font-size: 15px; margin: 18px 0 6px; padding-top: 10px; border-top: 1px dotted var(--lo); color: var(--navy); }
.doc ul { list-style: square; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.doc p { margin: 6px 0; }
.tbd { font-style: normal; background: var(--gold-bg); padding: 0 4px; }
.msg-card h1 { font: 700 20px/1.3 var(--f-big); margin-bottom: 10px; color: var(--navy); }

/* 쪽 번호 */
.pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 14px; }
.pager a, .pager span { min-width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 13.5px; background: var(--win); box-shadow: var(--raised); color: var(--ink); text-decoration: none; }
.pager .on { box-shadow: var(--sunken); background: var(--yel); }

/* 수익 마감 상장 */
.cert { background: #fffef0; padding: 30px; box-shadow: var(--raised), inset 0 0 0 4px var(--win), inset 0 0 0 7px #b8860b, inset 0 0 0 9px #fffef0, inset 0 0 0 10px #b8860b; text-align: center; }
.cert-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cert-title { font: 700 24px/1.4 var(--f-big); margin: 14px 0 6px; overflow-wrap: anywhere; color: var(--navy); }
.cert-pct { font: 600 64px/1.25 var(--f-num); color: var(--up); text-shadow: 3px 3px 0 #ffd0d0; margin: 10px 0 18px; }
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; text-align: left; }
.cert-grid div { background: #fff; border: 1px solid var(--lo); padding: 8px 10px; min-width: 0; }
.cert-grid dt { font-size: 12.5px; color: var(--mute); }
.cert-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.cert .actions { justify-content: center; }

/* ── 바닥판: 작업 표시줄 ── */
.foot { margin-top: 30px; background: var(--win); box-shadow: inset 0 1px var(--lt), inset 0 2px var(--hi); }
.foot-in { max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding: 14px var(--pad); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 30px; }
.foot-word { display: inline-flex; align-items: center; gap: 6px; font: 700 20px/1.2 var(--f-big); background: var(--win); box-shadow: var(--raised); padding: 6px 12px; margin-bottom: 10px; color: var(--navy); }
.foot-word::before { content: ''; width: 18px; height: 18px; background:
  linear-gradient(#000080, #000080) 0 100% / 30% 40% no-repeat, linear-gradient(#000080, #000080) 50% 100% / 30% 70% no-repeat, linear-gradient(#000080, #000080) 100% 100% / 30% 100% no-repeat; }
.foot-brand p { font-size: 13.5px; max-width: 60ch; color: var(--mute); }
.foot-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.foot-links a { padding: 3px 10px; background: var(--win); box-shadow: var(--raised); font-size: 13.5px; color: var(--ink); text-decoration: none; }
.foot-links a:hover { background: var(--yel); }
.foot-links a:active { box-shadow: var(--sunken); }
.foot-copy { grid-column: 1 / -1; font: 400 12.5px/1.2 var(--f-num); color: var(--mute); box-shadow: var(--sunken); padding: 6px 10px; justify-self: end; }

/* ════ 화면 폭 ════ */
@media (max-width: 1279px) {
  .ticks { grid-template-columns: repeat(7, minmax(max-content, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .ticks::-webkit-scrollbar { display: none; }
  .mast-tag { display: none; }
  .logo { margin-right: auto; }
  .g-market { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kimp kimp" "up alert"; }
  .g-deriv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heat" "oi"; }
  .g-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "news tg" "yt ch"; }
  .sheet.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-grid { grid-template-columns: minmax(0, 1fr) 250px; }
  .tk-body { grid-template-columns: 160px minmax(0, 1fr); }
  .tk-body > .rationale { grid-column: 1 / -1; border-left: 0; border-top: 1px dotted var(--lo); }
}

@media (max-width: 960px) {
  :root { --pad: 10px; }
  .rail-in { flex-direction: column; padding: 0; }
  .rail-side { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 4px var(--pad); border-top: 1px dotted #1d5c12; flex-wrap: wrap; }
  .mast { margin: 8px var(--pad) 0; }
  .mast-in { padding: 8px; gap: 8px; }
  .logo .mark { width: 32px; height: 32px; }
  .logo-word b { font: 400 24px/1.2 var(--f-pix-s); }
  .logo-word small { font-size: 11px; letter-spacing: 0.1em; }
  .guest .btn { padding: 0 10px; }
  .nav-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-item { padding: 6px 2px; text-align: center; font-size: 14.5px; }
  .nav-item.g-silver::before, .nav-item.g-gold::before { width: 7px; height: 7px; margin-right: 3px; }
  .sheet.c3, .sheet.wide-left { grid-template-columns: minmax(0, 1fr); }
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .g-recs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "recent" "tiles"; }
  .a-tiles { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .grade-tile { min-height: 120px; }
  .rec-form { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { padding: 20px; }
  .auth-side::after { width: 64px; height: 64px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .tv-chart { height: 420px; }
  .tv-row .tv-chart { height: 300px; }
  .stat-row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .page { padding-top: 12px; }
  .ph { flex-direction: column; align-items: stretch; gap: 10px; }
  .ph h1 { font: 400 24px/1.3 var(--f-pix-s); }
  .ph-act .btn { width: 100%; }
  .desk-head h2 { font: 400 24px/1.25 var(--f-pix-s); }
  .sheet.c2, .sheet.c4, .g-market, .g-deriv, .g-news { grid-template-columns: minmax(0, 1fr); }
  .g-market { grid-template-areas: "kimp" "up" "alert"; }
  .g-deriv { grid-template-areas: "heat" "oi"; }
  .g-news { grid-template-areas: "news" "tg" "yt" "ch"; }
  .brief.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-v { font-size: 20px; }
  .cell > :not(.ch-head) { margin-left: 8px; margin-right: 8px; }
  .a-tiles { grid-template-columns: minmax(0, 1fr); }
  .tk-body { grid-template-columns: minmax(0, 1fr); }
  .tk-body > * + * { border-left: 0; border-top: 1px dotted var(--lo); }
  .lad { grid-template-columns: 80px minmax(0, 1fr); }
  .lad .pct { grid-column: 2; }
  .rec-doc, .doc-card, .cert { padding: 18px 14px; }
  .form-card, .rf-fields { padding: 14px 12px; }
  .form-sub { margin: -10px -8px 2px; }
  .auth-main { padding: 18px 12px; }
  .tp-grid { grid-template-columns: minmax(0, 1fr); }
  .cert-grid { grid-template-columns: minmax(0, 1fr); }
  .cert-pct { font-size: 44px; }
  .hide-xs { display: none; }
  .liq-map li { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); }
  .liq-map .lv-num { grid-column: 1 / -1; flex-direction: row; gap: 10px; justify-content: flex-end; }
  .liq-big li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .liq-big li > .num:not(b) { display: none; }
  .oi-ex { grid-template-columns: minmax(0, 1fr); }
  .stat-row, .stat-row.four { grid-template-columns: minmax(0, 1fr); }
  .range-chips { margin-left: 0; }
  .tv-chart { height: 360px; }
  .mv-list li { grid-template-columns: 16px 22px minmax(0, 1fr) auto; }
  .mv-list li > .num:not(.rk) { display: none; }
  .member-form { align-items: flex-start; }
  .foot-copy { justify-self: stretch; }

  /* 추천 표 → 카드 */
  .rec-table thead { display: none; }
  .rec-table, .rec-table tbody, .rec-table tr, .rec-table td { display: block; width: 100%; }
  .rec-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 4px; border-bottom: 1px dotted var(--lo); }
  .rec-table td { padding: 0; border: 0; min-width: 0; background: transparent !important; }
  .rec-table td.no, .rec-table td.kind { display: none; }
  .rec-table td.coin { grid-column: 1; }
  .rec-table td.coin { white-space: normal; }
  .rec-table td.coin a { display: flex; align-items: flex-start; min-width: 0; }
  .rec-table td.coin b { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .rec-table td.res { white-space: normal; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .rec-table td.res form { margin-left: 0; }
  .rec-table td.res { grid-column: 2; grid-row: 1; text-align: right; }
  .rec-table td.wrap, .rec-table td[data-label] { grid-column: 1 / -1; display: flex; gap: 10px; text-align: left; font-size: 13.5px; white-space: normal; }
  .rec-table td[data-label]::before { content: attr(data-label); flex: none; width: 64px; color: var(--mute); font-family: var(--f-body); font-size: 12.5px; }
  .rec-table td.sum { grid-column: 1 / -1; max-width: none; }
  .rec-table td.date { grid-column: 1 / -1; text-align: left; }
  .rec-table tr.is-hidden td.hidden-title, .rec-table tr.is-hidden td.date { grid-column: 1 / -1; }
  .rec-table tr.is-hidden td.res { display: none; }
}

@media (max-width: 400px) {
  .logo-word small { display: none; }
  .nav-item { font-size: 13.5px; padding: 5px 1px; }
  .brief.c4 { grid-template-columns: minmax(0, 1fr); }
  .guest { gap: 4px; }
  .guest .btn { padding: 0 8px; font-size: 13.5px; }
  .kimp-table td, .kimp-table th { padding: 6px 4px; }
  .kimp-table .cn small { display: none; }
}

/* 옮겨 온 글의 원본 차트 그림 */
.legacy-imgs { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.legacy-imgs h3 { font-size: 13.5px; color: var(--navy); }
.legacy-imgs h3::before { content: '▶ '; }
.legacy-imgs img { width: 100%; height: auto; box-shadow: var(--sunken); padding: 2px; background: var(--win); }
.legacy-note { border-top: 1px dotted var(--lo); padding-top: 8px; }

/* 창 안의 그래프·히트맵·차트 액자: 양옆 여백(10px, 휴대폰 8px)을 뺀 폭 — 100% 폭에 여백이 더해져 창 밖으로 삐져나오던 것 고침 */
.cell > .chart, .cell > .lm, .cell > .tv-chart, .cell > .spark, .cell > .table-wrap, .cell > .fb, .cell > .fb-stack, .cell > .yt-grid { width: auto; align-self: stretch; min-width: 0; }
.cell > svg.chart, .cell > iframe.tv-chart { width: calc(100% - 20px); align-self: auto; }
@media (max-width: 640px) { .cell > svg.chart, .cell > iframe.tv-chart { width: calc(100% - 16px); } }

/* ════ 관리자 화면 — 윈도95 '제어판' 느낌 ════ */
.admin-tabs { background: var(--win); box-shadow: var(--raised); padding: 5px; margin-bottom: 16px; }
.adm-filter { margin-bottom: 12px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.btn-silver { background: linear-gradient(180deg, #fff, #c8c8c8); }
.btn-gold { background: linear-gradient(180deg, #fff5a0, #ffd700); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.adm-main, .adm-side { min-width: 0; display: flex; flex-direction: column; }
.adm-grid .sheet { margin-bottom: 12px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kpi { display: flex; flex-direction: column; gap: 2px; background: var(--win); box-shadow: var(--raised); padding: 9px 12px; text-decoration: none !important; color: var(--ink); min-width: 0; border-left: 5px solid var(--lo); }
a.kpi:hover { background: #ffffcc; color: var(--ink); }
a.kpi:active { box-shadow: var(--sunken); }
.kpi.t-blue { border-left-color: var(--navy); }
.kpi.t-silver { border-left-color: #9a9a9a; }
.kpi.t-gold { border-left-color: #d4a800; }
.kpi.t-red { border-left-color: var(--up); }
.kpi.t-gray { border-left-color: var(--lo); }
.kpi-label { font-size: 13.5px; color: var(--mute); }
.kpi-num { font-size: 26px; font-weight: 700; line-height: 1.15; }
.kpi-num small { font-size: 13.5px; font-weight: 400; margin-left: 3px; color: var(--mute); }
.kpi-num.kpi-sm { font-size: 19px; }
.kpi-sub { font-size: 12.5px; color: var(--faint); }
.adm-list li { border-bottom: 1px dotted var(--lo); }
.adm-list li > a, .adm-list li:not(:has(a)) { display: flex; align-items: center; gap: 10px; padding: 7px 2px; text-decoration: none; color: var(--ink); }
.adm-list li > a:hover { background: #ffffcc; }
.adm-list .li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-list .li-main b { font-weight: 600; overflow-wrap: anywhere; }
.adm-list .li-main small { color: var(--mute); }
.adm-list .li-end { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 50%; }
.adm-list time { color: var(--faint); font-size: 12.5px; }
.adm-list li.empty { display: block; padding: 18px 0; border: 0; }
.neg { color: var(--up); font-style: normal; }
.adm-todos { display: flex; flex-direction: column; gap: 6px; }
.adm-todos a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; background: #fff; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--lo); text-decoration: none; color: var(--ink); }
.adm-todos a:hover { background: #ffffcc; }
.todo-mark { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--navy); }
.adm-todos .t-bad .todo-mark { background: #ff0000; }
.adm-todos .t-warn .todo-mark { background: #d4a800; color: var(--ink); }
.todo-txt { display: flex; flex-direction: column; min-width: 0; }
.todo-txt small { color: var(--mute); }
.adm-links li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--lo); font-size: 13.5px; }
/* 관리자 홈 「연동 상태」: 좁은 오른쪽 칸에서 이름이 한 글자씩 세로로 깨지던 것 → 이름 한 줄, 상태는 그 밑 줄(2026-10-23) */
.adm2 .adm-links li { grid-template-columns: 12px minmax(0, 1fr); row-gap: 1px; }
.adm2 .adm-links .lk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.adm2 .adm-links .lk-state { grid-column: 2; font-size: 12.5px; color: var(--mute); }
.lk-state { color: var(--mute); font-size: 12.5px; text-align: right; }
.led { width: 10px; height: 10px; border: 1px solid var(--ink); background: #555; }
.led.on { background: #19d219; box-shadow: 0 0 4px #19d219; }
.led.warn { background: #ffb000; }
.led.off { background: #ff3030; }
.ping-form { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }
.tgts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tgts .opt { align-items: flex-start; }
.tgts .opt span { display: flex; flex-direction: column; }
.tgts .opt small { color: var(--mute); font-weight: 400; }
.form-sub .byte { float: right; font-weight: 400; color: #cfe3ff; }
.byte.over { color: #ffd0d0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sub-h { font-size: 14px; margin: 14px 0 6px; color: var(--navy); }
.sms-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14.5px/1.7 var(--f-body); background: #000; color: var(--led); box-shadow: var(--sunken); padding: 12px 14px; }
.st { font-size: 12.5px; padding: 0 6px; border: 1px solid var(--lo); }
.st-sent { background: #e0ffe0; border-color: #19a019; }
.st-error { background: var(--up); color: #fff; border-color: var(--up); }
.admin-table td.ttl a { color: var(--link); }
@media (max-width: 1100px) { .adm-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .kpis, .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgts { grid-template-columns: minmax(0, 1fr); }
  .kpi-num { font-size: 22px; }
  .adm-list .li-end { max-width: 45%; }
  .form-sub .byte { float: none; display: block; }
}

/* 소식(코인 속보만) — 넓은 화면에서는 두 줄로 나눠 한 줄이 너무 길지 않게 */
/* 메인 소식 9개: 넓은 화면은 3칸 × 3줄. 제목을 늘 두 줄 높이로 잡아 칸마다 가로 줄이 맞게 */
@media (min-width: 961px) {
  .news-list.news-wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .news-list.news-wide .news-title a, .news-list.news-wide .news-title > span { min-height: calc(1.55em * 2); }
}

/* ── 주요 경제캘린더(★★★) — 코인라운지에서 가져옴, 픽셀 스타일 ── */
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-day { margin: 10px 0 2px; padding: 3px 8px; background: var(--navy, #000080); color: #fff; font-weight: 700; font-size: 13.5px; }
.cal-day:first-child { margin-top: 0; }
.cal-day.is-today { background: var(--yel); color: #000; }
.cal-row { display: grid; grid-template-columns: 46px 56px minmax(0, 1fr) minmax(0, 300px); gap: 3px 8px; align-items: center; padding: 7px 6px; border-bottom: 1px dotted var(--lo); }
.cal-row time { font-size: 14px; font-weight: 700; color: #000; }
.cal-c { white-space: nowrap; line-height: 1; }
.cal-t { font-weight: 700; font-size: 15px; min-width: 0; line-height: 1.35; }
.cal-soon { margin-left: 6px; padding: 0 5px; background: #000; color: var(--led); font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cal-row.is-soon { background: #ffffc8; }
.cal-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: right; font-family: var(--f-num); font-size: 14px; }
.cv small { display: block; font-family: var(--f-body, inherit); font-size: 11.5px; color: var(--mute); }
.cv.a { font-weight: 700; }
.cv.a.up { color: var(--up); }
.cv.a.down { color: var(--down); }
.cal-row:not(.is-done) .cv.a { color: var(--mute); font-weight: 400; }
.cal-note { margin-top: 8px; font-size: 12.5px; color: var(--mute); }
.cc { display: inline-block; min-width: 18px; padding: 0 4px; font: 800 12px/18px var(--f-body); font-style: normal; color: #fff; background: #555; text-align: center; vertical-align: 1px; }
.cc-us { background: #000080; } .cc-kr { background: #c00000; } .cc-cn { background: #a06000; } .cc-jp { background: #333; } .cc-eu { background: #1a5fb4; } .cc-gb { background: #6a1b9a; } .cc-de { background: #2e7d32; }
.cal-row.is-done .cc, .cm-ev.done .cc { background: #9a9a9a; }
@media (max-width: 640px) {
  .cal-row { grid-template-columns: 44px auto minmax(0, 1fr); }
  .cal-t { grid-column: 1 / -1; }
  .cal-v { grid-column: 1 / -1; text-align: left; }
}

/* ── 고래 전광판 (2026-10-20) — 전광판 · 수족관 · 방금 고래들 ── */
.scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: #000; padding: 6px; box-shadow: var(--sunken); margin-bottom: 10px; }
.sb-cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid #1d5c12; min-width: 0; }
.sb-k { font-size: 12.5px; color: #9aa1ab; }
.sb-v { font: 700 22px/1.25 var(--f-num); color: var(--led); text-shadow: 0 0 6px rgba(57, 255, 20, .45); overflow-wrap: anywhere; }
.sb-s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #e0e0e0; min-width: 0; }
.sb-s span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
.sb-s em { font-style: normal; color: var(--yel); font-weight: 700; }
.sb-cell.liq .sb-v { color: #ff5050; text-shadow: 0 0 6px rgba(255, 80, 80, .5); }
.sb-cell.loss .sb-v { color: #6ea8ff; text-shadow: 0 0 6px rgba(110, 168, 255, .5); }
.sb-cell.win .sb-v { color: #ff5050; text-shadow: 0 0 6px rgba(255, 80, 80, .5); }
.sb-cell.open .sb-v { color: var(--yel); text-shadow: 0 0 6px rgba(255, 255, 0, .45); }
.arena-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.arena-row .cell, .tank-cell { min-width: 0; }
.ch-head small { font-size: 12px; color: #d8def0; }

/* 수족관 */
.tank { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
  background: repeating-linear-gradient(0deg, #0a2a5a 0 4px, #0c3268 4px 8px); box-shadow: var(--sunken); }
.fish { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 6px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); color: #fff; min-width: 0; }
.fish-px { display: flex; align-items: flex-end; justify-content: center; height: 104px; animation: bob 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fish-pnl { font: 700 17px/1.2 var(--f-num); }
.fish.win .fish-pnl { color: #ff6b6b; }
.fish.loss .fish-pnl { color: #7fb4ff; }
.fish-mood { font-size: 12px; color: #c8d3e6; }
.fish-name { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fish-pos { font-size: 12px; color: #c8d3e6; }
.fish-asset { font: 700 12.5px/1.3 var(--f-num); color: var(--yel); }
.fish.danger { border-color: #ff3030; animation: danger 1s steps(2, end) infinite; }
.fish.danger .fish-mood { color: #ffd0d0; font-weight: 700; }
@keyframes danger { 50% { background: rgba(255, 0, 0, .35); } }

/* 방금 고래들 */
.splash { list-style: none; margin: 0; padding: 0; }
.sp { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; grid-template-areas: "t tag who pnl" "t tag what pnl"; gap: 0 8px; align-items: center; padding: 6px 4px; border-bottom: 1px dotted var(--lo); }
.sp time { grid-area: t; font-size: 13px; color: var(--mute); }
.sp-tag { grid-area: tag; padding: 1px 6px; font-size: 12px; font-weight: 700; color: #fff; background: #555; white-space: nowrap; }
.sp-who { grid-area: who; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.sp-what { grid-area: what; font-size: 12.5px; color: var(--mute); }
.sp-pnl { grid-area: pnl; font: 700 14.5px/1.2 var(--f-num); white-space: nowrap; }
.sp.liq .sp-tag { background: #d00000; animation: danger 1s steps(2, end) infinite; }
.sp.liq .sp-pnl, .sp.win .sp-pnl { color: var(--up); }
.sp.loss .sp-pnl, .sp.liq .sp-pnl { color: var(--down); }
.sp.win .sp-tag { background: #b00000; }
.sp.loss .sp-tag { background: #0000a0; }
.sp.open .sp-tag { background: #806000; }
@media (prefers-reduced-motion: reduce) { .fish-px, .fish.danger, .sp.liq .sp-tag { animation: none; } }
@media (max-width: 960px) {
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .tank { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; } .sb-v { font-size: 18px; } }

/* ── 큰손 CVD (2026-10-20) ── */
.cvd-brief { padding: 10px 12px; margin-bottom: 10px; background: #000; color: #e8e8e8; box-shadow: var(--sunken); }
.cvd-head { font-weight: 700; font-size: 15.5px; margin: 0 0 4px; }
.cvd-brief.up .cvd-head { color: #ff6b6b; }
.cvd-brief.down .cvd-head { color: #7fb4ff; }
.cvd-brief.flat .cvd-head { color: var(--yel); }
.cvd-sub { margin: 0 0 4px; font-size: 14px; color: #f0f0f0; }
.cvd-chips { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.cvd-chips li { display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border: 1px solid #333; font-size: 12.5px; min-width: 0; }
.cvd-chips b { color: #c8c8c8; font-weight: 700; }
.cvd-chips span { font-weight: 700; }
.cvd-chips em { font-style: normal; font-family: var(--f-num); color: #c8c8c8; overflow-wrap: anywhere; }
.cvd-chips .up span { color: #ff6b6b; } .cvd-chips .down span { color: #7fb4ff; } .cvd-chips .flat span { color: #9aa1ab; }
.cvd-note { margin: 4px 0 0; font-size: 12px; color: #9aa1ab; }
.cvd-chart { background: #fff; box-shadow: var(--sunken); padding: 6px 8px; }
.cvd-px, .cvd-lines { position: relative; }
.cvd-px svg, .cvd-lines svg { display: block; width: 100%; }
.cvd-px { border-bottom: 1px solid #ddd; margin-bottom: 4px; }
.cv-price { fill: none; stroke: #1f4fbf; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cv-line { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.cv-line.all { stroke-width: 2.4; }
.cvd-ax { position: absolute; right: 2px; top: 0; font: 600 11.5px/1 var(--f-num); color: #666; background: rgba(255,255,255,.8); padding: 1px 3px; }
.cvd-ax.lo { top: auto; bottom: 0; }
.cvd-time { display: flex; justify-content: space-between; font: 400 12px/1.4 var(--f-num); color: #666; margin-top: 2px; }
.cvd-key { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: #333; }
.cvd-key i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; }
@media (max-width: 640px) { .cvd-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 호가창 큰 주문벽 */
.ob { margin-bottom: 4px; }
.ob-canvas { display: block; width: 100%; }
.ob-key { margin: 4px 0 6px; font-size: 12px; color: #555; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ob-grad { display: inline-block; width: 46px; height: 8px; background: linear-gradient(90deg, #000, #aa0a00, #ff4600, #ffb400, #ffff78, #fff); border: 1px solid #999; }
.ob-pl { display: inline-block; width: 14px; height: 3px; background: #7dd3fc; }
/* 소식 · 경제캘린더 반반: 캘린더 칸이 좁으면(반쪽) 휴대폰처럼 두 줄 배치 */
.cal-cell { container-type: inline-size; }
@container (max-width: 560px) {
  .cal-row { grid-template-columns: 44px auto minmax(0, 1fr); }
  .cal-t { grid-column: 1 / -1; }
  .cal-v { grid-column: 1 / -1; text-align: left; }
}
.news-cal .news-list li { padding: 7px 0; }
.news-cal > .cell { grid-area: auto; }
@media (max-width: 1199px) { .sheet.c2.news-cal { grid-template-columns: minmax(0, 1fr); } }

/* ── 메인 그룹 · 휴대폰 앱 모양(아래 탭바) — 2026-10-20 ── */
.home { display: flex; flex-direction: column; }
.hgroup { display: contents; }
.bnav, .bsheet { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .nav, .mast-tag { display: none; }               /* 위 메뉴는 아래 [메뉴] 판으로 */
  .home.tabs .hgroup { display: none; }
  .home.tabs .hgroup.on { display: flex; flex-direction: column; }
  .home.tabs .hgroup.on > .hd:first-child > .desk, .home.tabs .hgroup.on > .hd:first-child > .sheet { margin-top: 6px; }
  .bnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--win); box-shadow: inset 0 2px var(--hi), 0 -2px 0 #000; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 2px 0;
    font: 700 12px/1.1 var(--f-body); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .bn-item svg { fill: currentColor; }
  .bn-item.on { background: var(--navy); color: var(--yel); box-shadow: var(--sunken); }
  .bn-item:active { box-shadow: var(--sunken); }
  .bsheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); }
  .bs-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--win); box-shadow: var(--raised); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); max-height: 80vh; overflow: auto; }
  .bs-title { margin: 0 0 8px; padding: 4px 8px; background: var(--title); color: #fff; font-weight: 700; }
  .bs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .bs-grid a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 4px; background: var(--win); box-shadow: var(--raised); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
  .bs-grid a:active { box-shadow: var(--sunken); }
  .bs-close { width: 100%; margin-top: 10px; min-height: 44px; }
}
/* 휴대폰: 맨 위 시세 요약 4칸을 2×2 로 작게(앱 첫 화면처럼 한눈에) */
@media (max-width: 760px) {
  .sheet.c4.brief { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .brief .bf { padding: 3px 3px 8px; }
  .brief .bf > * { margin-left: 7px !important; margin-right: 7px !important; }
  .brief .bf-k { font-size: 12.5px; padding: 2px 6px; margin-bottom: 4px !important; gap: 4px; }
  .brief .bf-k em { display: none; }
  .brief .bf-v { font-size: 19px; }
  .brief .bf-s { gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
  .brief .bf-s .chg { font-size: 12.5px; }
  .brief .bf .spark { height: 22px; }
}
/* 떠 있는 아래 탭바(사장님 2026-10-20 「떠 있는 네비게이터로」): 화면 가장자리에서 띄우고 그림자 */
@media (max-width: 760px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .bnav { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 4px;
    border: 2px solid #000; box-shadow: inset 2px 2px var(--hi), inset -2px -2px var(--lo), 0 6px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .35); }
  .bn-item { min-height: 50px; }
  .bs-panel { bottom: calc(76px + env(safe-area-inset-bottom)); left: 10px; right: 10px; border: 2px solid #000; max-height: 70vh; }
  /* 탭바 아래·옆 틈으로 글 칸이 비쳐 깨져 보이던 것(사장님 2026-10-22 화면) → 바닥을 배경색으로 덮는다 */
  body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; pointer-events: none;
    height: calc(44px + env(safe-area-inset-bottom)); background-color: var(--desk);
    background-image: radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1px); background-size: 4px 4px; }
}
/* 고래 전광판 안 고래 포지션: 넓은 화면은 두 칸(상위 고래 | 코인별 롱숏) */
@media (min-width: 961px) {
  #d-arena .a-whale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; align-items: start; }
  #d-arena .a-whale > .ch-head, #d-arena .a-whale > .empty { grid-column: 1 / -1; }
  #d-arena > .sheet, #d-arena .sheet + .sheet { margin-top: 10px; }
}

/* ── 시세 띠: 나스닥 전광판처럼 흐름(2026-10-20) ── */
.ticks-view { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; }
.ticks-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.ticks-view:hover .ticks-track, .ticks-view:focus-within .ticks-track { animation-play-state: paused; }
.ticks-track .ticks { display: flex; flex: none; grid-template-columns: none; overflow: visible; }
.ticks-track .tick { flex: none; flex-direction: row; align-items: baseline; gap: 8px; padding: 10px 22px; white-space: nowrap; }
.ticks-track .tick-sym { font-size: 13.5px; }
.ticks-track .tick-price { font-size: 17px; }
.ticks-track .tick .chg { font-size: 13.5px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticks-view { overflow-x: auto; }
  .ticks-track { animation: none; }
  .ticks-track .ticks[aria-hidden] { display: none; }
}
/* 휴대폰: 사이트 이름·로그인을 시세 띠 위로 */
@media (max-width: 760px) {
  body { display: flex; flex-direction: column; }
  body > .mast { order: -1; margin-top: 8px; }
  body > .skip { order: -2; }
  .ticks-track .tick { padding: 8px 16px; }
  .ticks-track { animation-duration: 35s; }
  .rail { margin-top: 8px; }
}
/* 휴대폰: 바닥글 메뉴 버튼은 [메뉴] 판과 겹치니 숨김(안내 문구·저작권은 남김) */
@media (max-width: 760px) { .foot-links { display: none; } }
/* 저작권 줄 옆 개인정보처리방침(휴대폰에서만 — PC 는 위 바닥글 버튼에 있음) */
.foot-privacy { display: none; }
@media (max-width: 760px) { .foot-privacy { display: inline; margin-left: 10px; color: var(--ink); font-weight: 700; } }

/* ── 보조지표 한 줄 풀이(2026-10-21) ── */
.insight { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; padding: 8px 10px; background: #fffff0; border-left: 4px solid #808080; box-shadow: var(--sunken); color: var(--ink); }
.ink-cell .insight { background: #111; color: #e8e8e8; }
.insight.t-up { border-left-color: var(--up); } .insight.t-down { border-left-color: var(--down); } .insight.t-warn { border-left-color: #d08000; }
.ins-k { font-size: 11.5px; font-weight: 700; color: var(--mute); }
.ink-cell .ins-k { color: #9aa1ab; }
.ins-h { font-size: 14.5px; line-height: 1.5; }
.insight.t-up .ins-h { color: var(--up); } .insight.t-down .ins-h { color: var(--down); }
.ink-cell .insight.t-up .ins-h { color: #ff6b6b; } .ink-cell .insight.t-down .ins-h { color: #7fb4ff; } .ink-cell .insight.t-warn .ins-h, .ink-cell .insight.t-flat .ins-h { color: var(--yel); }
.ins-l { font-size: 13px; line-height: 1.5; color: inherit; opacity: .85; overflow-wrap: anywhere; }
.ins-list .insight + .insight { margin-top: 6px; }
/* 풀이: 핵심 숫자 큰 칸 + 형광펜 */
mark.hl { background: linear-gradient(transparent 45%, #fff35c 45%); color: inherit; padding: 0 2px; font-weight: 800; }
.ink-cell mark.hl { background: linear-gradient(transparent 45%, rgba(255, 230, 0, .45) 45%); color: #fff; }
.ins-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 6px 0 2px; }
.ins-f { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; background: #fff; border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .25); min-width: 0; }
.ink-cell .ins-f { background: #000; border-color: #444; }
.ins-f small { font-size: 12px; font-weight: 700; color: var(--mute); }
.ink-cell .ins-f small { color: #9aa1ab; }
.ins-f b { font: 800 24px/1.15 var(--f-num); overflow-wrap: anywhere; }
.ins-f em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.ink-cell .ins-f em { color: #c8c8c8; }
.ins-f.t-up b { color: var(--up); } .ins-f.t-down b { color: var(--down); }
.ink-cell .ins-f.t-up b { color: #ff6b6b; } .ink-cell .ins-f.t-down b { color: #7fb4ff; } .ink-cell .ins-f.t-flat b { color: var(--yel); }
/* 고래 청산가 */
.fish-liq { font: 700 12.5px/1.35 var(--f-num); color: #ffd27a; }
.fish-liq.safe { color: #9fd99f; font-weight: 400; }
.fish-liq mark.hl { background: #ff3030; color: #fff; padding: 1px 4px; }
.dw-list li { grid-template-areas: "px n" "px p" "px l"; }
.dw-liq { grid-area: l; font-size: 12.5px; color: var(--mute); }
.dw-liq .fish-liq { color: #8a5a00; }
.dw-liq .fish-liq.safe { color: #2c7a2c; }

/* ── 고래 성적표(2026-10-21) ── */
.fish-a { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; color: inherit; text-decoration: none; }
.fish-a:hover .fish-name, .fish-a:focus .fish-name { text-decoration: underline; }
.fish-more { margin-top: 3px; font-size: 11.5px; color: var(--yel); }
.sp-who, .sb-who { color: inherit; text-decoration: none; }
.sp-who:hover b, .sb-who:hover span { text-decoration: underline; }
.sb-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wp-px { flex: none; }
.wp-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wp-name { font: 800 24px/1.2 var(--f-body); }
.wp-id .addr { font: 400 12.5px/1.3 var(--f-num); overflow-wrap: anywhere; }
.wp-id small { color: var(--mute); font-size: 12px; }
.wp-coins { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.wp-coins li { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid var(--lo); }
.wp-coins small { color: var(--mute); font-size: 12px; }
.ins-f b br + * { display: block; }

/* ── 코인 섹터 지도(트리맵) 2026-10-22 ── */
.tmap { position: relative; width: 100%; background: #0a0a12; container-type: inline-size; overflow: hidden; box-shadow: var(--sunken); }
.tmap.wide { aspect-ratio: 1000 / 620; } .tmap.wide.compact { aspect-ratio: 1000 / 520; }
.tmap.tall { display: none; aspect-ratio: 1000 / 1500; } .tmap.tall.compact { aspect-ratio: 1000 / 1250; }
@media (max-width: 760px) { .tmap.wide { display: none; } .tmap.tall { display: block; } }
.tm-sec { position: absolute; box-sizing: border-box; border: 1px solid #000; background: #15151f; }
.tm-sh { position: absolute; left: 4px; top: 2px; right: 4px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.tm-sh em { font-style: normal; } .tm-sh em.up { color: #ff8a8a; } .tm-sh em.down { color: #9cc0ff; }
.tm-c { position: absolute; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #fff; text-decoration: none; overflow: hidden; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.tm-c b { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.tm-c em { font-style: normal; font-weight: 700; font-family: var(--f-num); }
a.tm-c:hover { outline: 2px solid #fff; outline-offset: -2px; z-index: 1; }
/* 섹터 지도 판(사장님 2026-10-23 「디자인 개선 · 공유하기 · 퍼가기」) */
.tm-cell .tmap { width: auto; } /* 칸 안쪽 여백만큼 오른쪽으로 삐져나가던 것 */
.tm-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.tm-at { margin-right: auto; font-size: 12.5px; color: var(--mute); }
.tm-toast { flex-basis: 100%; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--navy); min-height: 0; }
.tm-toast:empty { display: none; }
.tm-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.tm-best { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 7px 12px; background: #fff; border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .25); }
.tm-best small { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--mute); }
.tm-best b { font-size: 18px; } .tm-best em { font: 800 20px/1.1 var(--f-num); font-style: normal; }
.tm-best.up { border-left: 6px solid var(--up); } .tm-best.up em { color: var(--up); }
.tm-best.down { border-left: 6px solid var(--down); } .tm-best.down em { color: var(--down); }
.tm-legend { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 4px; }
.tm-legend li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 9px; color: #fff; border: 1px solid #000; font-size: 13px; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.tm-legend li b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-legend li span { font: 800 13px/1 var(--f-num); white-space: nowrap; }
.tm-sh { background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); padding: 1px 4px 6px; left: 0; right: 0; top: 0; }
@media (max-width: 640px) { .tm-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tm-best { padding: 6px 8px; } .tm-best b { font-size: 15px; } .tm-best em { font-size: 16px; } .tm-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tm-cell [hidden] { display: none; }
/* 실시간 알림 4칸: 칸 높이가 같도록 카드가 아래까지 늘어남(빈 곳 없게) */
.feed-col { display: flex; flex-direction: column; }
.feed-col > .fb-stack { flex: 1 1 auto; display: flex; flex-direction: column; }
.feed-col > .fb-stack > .fb-card { flex: 1 1 auto; justify-content: center; }

/* ── 경제캘린더: 달력 + 일정 목록(2026-10-22) ── */
.cal-board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.cm-title { margin: 0 0 6px; font-weight: 800; font-size: 15px; }
.cm-head, .cm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cm-head li { text-align: center; font-size: 12px; font-weight: 700; padding: 3px 0; background: var(--navy); color: #fff; }
.cm-head li.sun { color: #ffb0b0; } .cm-head li.sat { color: #b0c8ff; }
.cm-grid { border-left: 1px solid var(--lo); border-top: 1px solid var(--lo); }
.cm-day { position: relative; border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo); min-height: 92px; background: #fff; }
.cm-day.blank { background: #e8e8e8; }
.cm-btn { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; height: 100%; min-height: 92px; padding: 4px 5px 5px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: default; }
button.cm-btn { cursor: pointer; } button.cm-btn:hover { background: #ffffd0; }
.cm-n { font: 800 14.5px/1.2 var(--f-num); }
.cm-day.sun .cm-n { color: var(--up); } .cm-day.sat .cm-n { color: var(--down); }
.cm-day.today { background: var(--yel); outline: 2px solid #000; outline-offset: -2px; } .cm-day.today .cm-n { text-decoration: underline; } .cm-day.today .cm-ev { background: #fff; }
.cm-day.past { background: #f7f7f7; } .cm-day.past .cm-n { color: #666; } .cm-day.past .cm-ev { color: #555; background: #ececec; border-left-color: #9a9a9a; }
.cm-day.on { outline: 3px solid var(--navy); outline-offset: -3px; }
.cm-cnt { position: absolute; top: 4px; right: 5px; min-width: 18px; padding: 0 4px; background: var(--navy); color: var(--yel); font: 800 11px/17px var(--f-num); text-align: center; }
.cm-day.today .cm-cnt { background: #000; }
.cm-ev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #000; padding: 2px 4px; background: #eaf0ff; border-left: 3px solid var(--navy); }
.cm-ev.done { background: #ececec; border-left-color: #9a9a9a; color: #555; }
.cm-ev .cc { margin-right: 4px; min-width: 16px; padding: 0 3px; font-size: 11px; line-height: 16px; }
.cm-more { font-size: 11.5px; font-weight: 700; color: var(--mute); }
.cal-side { min-width: 0; display: flex; flex-direction: column; }
.cal-pick { display: none; margin: 0 0 6px; padding: 6px 10px; background: var(--yel); border: 2px solid #000; font-weight: 800; font-size: 15px; }
.cal-pick button { float: right; }
.cal-scroll.day-only .cal-day { position: static; }
.cal-list > li[hidden] { display: none !important; } /* .cal-row 의 display:grid 가 hidden 을 이기지 않게 */
.cal-scroll { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; border: 1px solid var(--lo); padding: 0 6px; scroll-behavior: smooth; }
.cal-scroll .cal-day { position: sticky; top: 0; z-index: 1; }
.cal-scroll .cal-day.flash { background: var(--up); color: #fff; }
.cal-board .cal-row { grid-template-columns: 44px auto minmax(0, 1fr); }
.cal-board .cal-t { grid-column: 1 / -1; }
.cal-board .cal-v { grid-column: 1 / -1; text-align: left; }
@media (max-width: 960px) {
  .cal-board { grid-template-columns: minmax(0, 1fr); }
  .cal-scroll { flex: none; max-height: 420px; } /* 한 줄로 쌓일 때 목록 높이가 0 이 되던 것(사장님 2026-10-23 휴대폰 화면) */
  .cal-side .cal-pick { display: block; }
}
@media (max-width: 640px) {
  .cm-day, .cm-btn { min-height: 46px; }
  .cm-ev, .cm-more { display: none; }
  .cm-day.has .cm-cnt { position: static; align-self: flex-start; }
}
/* 코인 속보 2단 */
@media (min-width: 761px) { .news-list.news-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
/* 맨 위 시세 요약 4칸: PC 에서 세로를 줄여 작게(사장님 2026-10-22 「쓸데없이 크다, 컴팩트하게」) — 이름·값·등락 왼쪽, 작은 그래프 오른쪽 */
@media (min-width: 761px) {
  .brief .bf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 38%); grid-template-areas: "k sp" "v sp" "s sp"; column-gap: 10px; align-items: center; padding: 6px 10px 7px; gap: 0 10px; }
  .brief .bf > * { margin-left: 0 !important; margin-right: 0 !important; }
  .brief .bf-k { grid-area: k; background: none; color: var(--navy); padding: 0; margin: 0 !important; font-size: 13px; font-weight: 800; gap: 6px; }
  .brief .bf-main .bf-k { background: none; color: #a01000; }
  .brief .bf-k em { color: var(--mute); font-size: 11.5px; }
  .brief .bf-v { grid-area: v; font-size: 22px; line-height: 1.2; }
  .brief .bf-s { grid-area: s; font-size: 12.5px; gap: 6px; }
  .brief .bf-s .chg { font-size: 12.5px; }
  .brief .bf .spark { grid-area: sp; height: 42px; margin: 0; align-self: center; }
  .brief .bf-x { grid-area: sp; justify-self: end; align-self: center; font-size: 13px; text-align: right; }
}

/* 매크로 3칸(사장님 2026-10-23 「차트는 하단 고정·크기 고정, 위 구간도 고정, 내용 모자라면 모자란 대로」): 머리 → 풀이 구역(세 칸 같은 높이) → 차트 380px */
.tv-row .tv-cell { display: grid; grid-template-rows: auto minmax(0, 1fr) 380px; align-items: start; }
.tv-row .tv-cell > .insight { align-self: start; max-height: 100%; overflow: auto; }
.tv-row .tv-cell > .tv-chart { height: 380px !important; align-self: end; }
@media (max-width: 760px) { .tv-row .tv-cell { grid-template-rows: auto auto 300px; } .tv-row .tv-cell > .tv-chart { height: 300px !important; } }
/* ── 시그널(슈퍼이평선·빗각·구름떼) — 2026-10-22 ── */
.g-signal { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "sgchart sgtable"; }
.a-sgchart { grid-area: sgchart; } .a-sgtable { grid-area: sgtable; min-width: 0; }
.sg-chart { position: relative; background: #fff; box-shadow: var(--sunken); padding: 6px 8px; }
.sg-chart svg { width: 100%; display: block; }
.sg-chart .sg-ax { position: absolute; right: 10px; top: 6px; font: 600 11.5px/1 var(--f-num); color: #666; background: rgba(255,255,255,.85); padding: 1px 3px; }
.sg-chart .sg-ax.lo { top: auto; bottom: 46px; }
.sg-last { position: absolute; left: 10px; top: 6px; font: 800 13px/1 var(--f-num); color: #000; background: var(--yel); padding: 2px 5px; border: 1px solid #000; }
.sg-px { fill: none; stroke: #000; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.sg-ma { fill: none; stroke: #ff8c00; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sg-t { fill: none; stroke: #2ca02c; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sg-k { fill: none; stroke: #9467bd; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sg-bg { stroke: #000; stroke-width: 1.6; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.sg-bg.sup { stroke: #006400; }
.sg-cloud.bull { fill: rgba(214, 40, 40, .22); } .sg-cloud.bear { fill: rgba(40, 88, 214, .22); }
.sg-now { stroke: #999; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.sg-time { display: flex; justify-content: space-between; font: 400 12px/1.4 var(--f-num); color: #666; margin-top: 2px; }
.sg-key { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: #333; }
.sg-key i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; background: #000; }
.sg-key i.ma { background: #ff8c00; } .sg-key i.bgk { background: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px); }
.sg-key i.cb { height: 10px; background: rgba(214, 40, 40, .35); } .sg-key i.cr { height: 10px; background: rgba(40, 88, 214, .35); }
.sg-key i.t { background: #2ca02c; } .sg-key i.k { background: #9467bd; }
.sg-boxes { margin-top: 8px; }
.sig-table td, .sig-table th { padding: 5px 6px; font-size: 13.5px; }
.sig-table .sg-coin a { display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.sig-table .sg-coin small { color: var(--mute); }
.sig-table tr.on td { background: #ffffd0 !important; }
.sg-st { display: inline-block; padding: 1px 6px; font-size: 12.5px; font-weight: 700; border: 1px solid #000; background: #eee; white-space: nowrap; }
.sg-st.t-up { background: #ffe0e0; color: var(--up); } .sg-st.t-down { background: #dde6ff; color: var(--down); } .sg-st.t-none { border-color: #bbb; color: #999; }
.sg-sum { white-space: nowrap; } .sg-dots { font-size: 12px; letter-spacing: 1px; color: #333; }
.sg-spot { display: inline-block; margin-left: 4px; padding: 0 5px; background: var(--yel); border: 1px solid #000; font-style: normal; font-size: 11.5px; font-weight: 800; }
.ledger-wrap { overflow-x: auto; }
@media (max-width: 960px) { .g-signal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sgchart" "sgtable"; } }
@media (max-width: 760px) {
  .sig-table th:nth-child(2), .sig-table td:nth-child(2), .sig-table th:nth-child(3), .sig-table td:nth-child(3), .sig-table th:nth-child(4), .sig-table td:nth-child(4) { padding-left: 3px; padding-right: 3px; }
  .sg-st { font-size: 11.5px; padding: 1px 4px; }
  .sig-table .sg-coin small { display: none; }
}
/* 시그널 세 칸(사장님 2026-10-23 「차트는 합치지 말고 각각, 가로 배치, 밑에 코인별 표」) — 구역 고정: 머리 → 풀이(높이 고정) → 봉차트(높이 고정) */
.sg-triple .sg-pane { display: grid; grid-template-rows: 44px 190px auto; align-items: start; min-width: 0; }
.sg-triple .sg-pane.small { grid-template-rows: 44px 170px auto; }
.sg-pane .ch-head { gap: 8px; height: 44px; margin: 0; align-items: center; } .sg-pane .ch-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sg-pane .ch-head h3 small { font-weight: 400; color: var(--mute); font-size: 12.5px; }
.sg-pane .ch-head .sg-st { margin-left: auto; }
.sg-ins { height: 100%; min-height: 0; overflow: auto; } .sg-ins .insight { margin-top: 0; }
.sg-ins .ins-facts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px; margin: 4px 0 0; }
.sg-ins .ins-f { padding: 4px 7px; } .sg-ins .ins-f b { font-size: 17px; } .sg-ins .ins-h { font-size: 13.5px; } .sg-ins .ins-l { display: none; }
.sg-pane.small .sg-ins .insight { padding: 6px 8px; }
.sg-plot { align-self: end; }
.sg-plot .sg-key { height: 38px; overflow: hidden; align-content: flex-start; } /* 범례 두 줄 높이 고정 → 세 차트의 위·아래가 같이 맞는다 */
.sg-wick { stroke-width: 1; vector-effect: non-scaling-stroke; } .sg-wick.up { stroke: var(--up); } .sg-wick.dn { stroke: var(--down); }
.sg-body.up { fill: var(--up); } .sg-body.dn { fill: var(--down); }
.sg-piv { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .sg-piv.res { fill: #000; } .sg-piv.sup { fill: #006400; }
.sg-key i.cu { width: 8px; height: 12px; background: var(--up); } .sg-key i.cd { width: 8px; height: 12px; background: var(--down); }
.sg-key i.bgs { background: repeating-linear-gradient(90deg, #006400 0 4px, transparent 4px 7px); } .sg-key i.piv { width: 10px; height: 10px; background: #000; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; }
.sg-head-cell .ch-head h3 { display: flex; align-items: center; gap: 6px; }
@media (max-width: 960px) { .sg-triple { grid-template-columns: minmax(0, 1fr); } .sg-triple .sg-pane, .sg-triple .sg-pane.small { grid-template-rows: auto auto auto; } .sg-ins { height: auto; overflow: visible; } .sg-ins .ins-l { display: block; } }
/* 시그널 모바일(사장님 2026-10-22 화면 점검): 긴 원화 숫자가 큰 칸에서 줄바꿈되지 않게 · 코인 표는 가로 스크롤 */
.sg-boxes .ins-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.sg-boxes .ins-f b { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .sig-table { min-width: 540px; }
  .sig-table .sg-coin b { white-space: nowrap; }
}

/* 관리 전용 화면 (사장님 2026-10-23 「관리자페이지도 따로 만들어서 관리하기 쉽게 해라」)
   일반 사이트의 시세 띠·메뉴·탭바·바닥글 없이: 위 얇은 남색 머리줄 + 왼쪽 회색 세로 메뉴 창 + 본문. .adm2 접두만 쓴다.
   휴대폰(760px 이하)은 왼쪽 메뉴가 위쪽 가로로 밀어 보는 칩 줄이 된다. */
.adm2 { min-height: 100vh; }
.adm2-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; min-height: 42px; padding: 4px 16px; background: var(--title); color: #fff; box-shadow: 0 2px 0 var(--dk); }
.adm2-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; min-width: 0; }
.adm2-brand .mark { width: 26px; height: 26px; box-shadow: 0 0 0 1px #fff; }
.adm2-brand b { font: 700 16px/1.2 var(--f-body); white-space: nowrap; }
.adm2-brand:hover { color: var(--yel); }
.adm2-who { margin-left: auto; font-size: 13.5px; color: #cfe3ff; white-space: nowrap; }
.adm2-who b { color: #fff; }
.adm2-clock { font-size: 13.5px; background: #000; color: var(--led); padding: 1px 8px; box-shadow: var(--sunken); white-space: nowrap; }
.adm2-clock small { color: #9a9a9a; font-size: 11.5px; }
.adm2-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.adm2-side { position: sticky; top: 54px; max-height: calc(100vh - 66px); overflow-y: auto; margin: 12px 0 12px 12px; padding: 3px 3px 8px;
  background: var(--win); box-shadow: var(--raised); display: flex; flex-direction: column; }
.adm2-side-t { background: var(--title); color: #fff; font-weight: 700; font-size: 14px; padding: 3px 8px; }
.adm2-grp { font-size: 12px; color: var(--mute); padding: 8px 10px 2px; margin-top: 4px; border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi); }
.adm2-side-t + .adm2-grp { border-top: 0; box-shadow: none; margin-top: 0; }
.adm2-item { display: block; width: 100%; text-align: left; padding: 5px 10px; border: 0; background: transparent; color: var(--ink);
  font: 400 14.5px/1.4 var(--f-body); text-decoration: none; cursor: pointer; border-radius: 0; }
.adm2-item:hover { background: var(--navy); color: #fff; }
.adm2-item.on { background: var(--yel); color: var(--ink); font-weight: 700; box-shadow: var(--sunken); }
.adm2-item.on::before { content: '▶ '; font-size: 10px; }
.adm2-out { margin: 0; }
.adm2-main { min-width: 0; max-width: calc(var(--maxw) + 32px); padding: 16px 16px 48px; }
.adm2-main .admin-tabs { display: none; } /* 예전 가로 관리 탭은 왼쪽 메뉴와 겹쳐 숨긴다 */
.adm2-main .form-page { margin-left: 0; }
/* 상태 표시: 켜짐·지금 보임(검은 바탕 초록 글자) · 예약(노랑) · 끝남·꺼짐(회색) */
.adm2-st { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--ink); background: #fff; color: var(--ink); white-space: nowrap; vertical-align: middle; }
.adm2-st.s-on, .adm2-st.s-live { background: #000; color: var(--led); }
.adm2-st.s-scheduled { background: var(--yel); }
.adm2-st.s-ended { background: var(--win); color: var(--mute); }
.adm2-st.s-off { background: var(--win); color: var(--mute); border-style: dashed; }
.adm2-sub { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.adm2-ntable tr.is-dim td { color: var(--mute); }
.adm2-ntable { min-width: 640px; } /* 휴대폰에서 제목 칸이 한두 글자 폭으로 눌리지 않게(표는 가로로 밀어 봄) */
.adm2-ntable td.ttl { min-width: 160px; }
.adm2-ntable .adm2-period { font-size: 13px; min-width: 150px; }
.adm2-acts { white-space: nowrap; }
.adm2-acts form { display: inline; }
.adm2-acts .btn + form, .adm2-acts form + form { margin-left: 4px; }
.adm2-live li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 0; border-bottom: 1px dotted var(--lo); font-size: 14.5px; }
.adm2-live li small { color: var(--mute); }
.adm2-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm2-preview { background: var(--desk); box-shadow: var(--sunken); padding: 10px; margin-top: 8px; }
.adm2-preview .empty { color: #fff; }
/* 회원 관리: 찾기 칸 · 한 번에 바꾸기 띠 · 표 */
.adm2-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; background: var(--win); box-shadow: var(--raised); padding: 10px 12px; margin: 10px 0 12px; }
.adm2-sel { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.adm2-sel select, .adm2-sel input { min-height: 30px; border: 0; border-radius: 0; box-shadow: var(--sunken); background: #fff; padding: 0 6px; font-size: 14px; max-width: 100%; }
.adm2-q { flex: 1 1 200px; }
.adm2-fbtn { display: flex; gap: 6px; }
.adm2-bulk { position: sticky; top: 46px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: #ffffe1; border: 1px solid var(--ink); padding: 8px 12px; margin-bottom: 12px; }
.adm2-bulk.has-pick { background: var(--yel); }
.adm2-bulk-n { font-size: 14.5px; min-width: 110px; }
.adm2-bulk-g { display: inline-flex; gap: 4px; }
.adm2-bulk .hint { flex-basis: 100%; margin: 0; }
.adm2-mtable { min-width: 860px; }
.adm2-mtable .adm2-ck { width: 1%; text-align: center; }
.adm2-mtable .adm2-ck input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); vertical-align: middle; }
.adm2-mtable tr.is-off td { color: var(--mute); }
.adm2-mtable tr.is-saved td, .adm2-mtable tr.is-picked td { background: #ffffa8 !important; }
.adm2-who-c { min-width: 170px; }
.adm2-grades { white-space: nowrap; }
.adm2-one { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.adm2-one .opt { padding: 2px 6px; background: var(--win); box-shadow: var(--raised); font-size: 13px; white-space: nowrap; }
.adm2-one .opt:has(input:checked) { box-shadow: var(--sunken); }
.adm2-one .opt.silver:has(input:checked) { background: linear-gradient(180deg, #fff, #c8c8c8); }
.adm2-one .opt.gold:has(input:checked) { background: linear-gradient(180deg, #fff5a0, #ffd700); }
@media (max-width: 1100px) { .adm2-wrap { grid-template-columns: 196px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .adm2-top { position: static; flex-wrap: wrap; gap: 4px 10px; padding: 6px 16px; }
  .adm2-who { font-size: 12.5px; }
  .adm2-clock { font-size: 12px; }
  .adm2-wrap { grid-template-columns: minmax(0, 1fr); }
  .adm2-side { position: sticky; top: 0; z-index: 30; max-height: none; margin: 0; padding: 6px 16px; flex-direction: row; gap: 4px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; box-shadow: 0 2px 0 var(--dk), var(--raised); }
  .adm2-side-t, .adm2-grp { display: none; }
  .adm2-item { flex: none; width: auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; white-space: nowrap; background: var(--win); box-shadow: var(--raised); }
  .adm2-item.on::before { content: none; }
  .adm2-out { flex: none; display: flex; }
  .adm2-main { padding: 12px 16px 40px; }
  .adm2-bulk { top: 46px; }
  .adm2-dates { grid-template-columns: minmax(0, 1fr); }
  .adm2-filter .adm2-sel { flex: 1 1 calc(50% - 10px); }
  .adm2-filter .adm2-q { flex-basis: 100%; }
  /* 관리 화면에는 아래 탭바가 없다: 일반 화면용 바닥 여백·바닥 덮개(body::after)를 끈다 */
  .adm2 { padding-bottom: 0; }
  .adm2::after { content: none; display: none; }
}

/* 공지 띠·팝업 (2026-10-23) — 운영자가 관리 화면 [공지 띠·팝업]에서 켠 것.
   띠 = 모든 화면 시세 띠 바로 아래 한 줄 · 팝업 = 메인 화면 가운데 창(윈도95 대화상자). 색: 안내 남색 · 중요 빨강 · 이벤트 노랑 */
.site-nb { background: var(--navy); color: #fff; border-bottom: 2px solid var(--dk); }
.site-nb.t-warn { background: #a00000; }
.site-nb.t-event { background: var(--yel); color: var(--ink); }
.site-nb-in { max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding: 6px var(--pad); display: flex; align-items: center; gap: 10px; }
.site-nb-tag { flex: none; font-size: 12.5px; font-weight: 700; line-height: 20px; padding: 0 6px; border: 1px solid currentColor; }
.site-nb-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; }
.site-nb-link { flex: none; color: var(--yel); font-weight: 700; white-space: nowrap; }
.site-nb.t-event .site-nb-link { color: var(--navy); }
.site-nb-link:hover { color: #fff; }
.site-nb-x, .site-np-x { flex: none; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 0; background: var(--win); color: var(--ink); box-shadow: var(--raised); font: 700 15px/1 var(--f-body); cursor: pointer; }
.site-nb-x:active, .site-np-x:active { box-shadow: var(--sunken); }
.site-np { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.site-np[hidden] { display: none; }
.site-np.is-preview { position: static; z-index: auto; padding: 0; background: transparent; }
.site-np-win { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; background: var(--win); padding: 3px;
  box-shadow: var(--raised), 6px 6px 0 rgba(0, 0, 0, .45); }
.site-np-bar { display: flex; align-items: center; gap: 8px; background: var(--title); color: #fff; padding: 3px 4px 3px 8px; }
.site-np-win.t-warn .site-np-bar { background: linear-gradient(90deg, #800000, #d04000); }
.site-np-win.t-event .site-np-bar { background: linear-gradient(90deg, #806000, #d4a800); }
.site-np-bar b { flex: 1; min-width: 0; font-size: 15px; }
.site-np-body { margin: 8px 6px 0; padding: 12px 14px; background: #fff; box-shadow: var(--sunken); font-size: 15px; line-height: 1.7; }
.site-np-go { margin: 10px 6px 0; }
.site-np-go .btn { width: 100%; }
.site-np-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 10px 6px 6px; }
@media (max-width: 640px) {
  .site-nb-in { padding: 6px 12px; gap: 8px; }
  .site-nb-text { font-size: 13.5px; }
  .site-nb-tag { display: none; }
}

/* ── 슈팅 시그널(.sh-) — 2026-10-22 · 준비(방향 미정) → 종가 돌파 → 슈팅 발생 확인. 화면은 src/views/shooting.js, 움직임은 public/shooting.js ── */
.sh { display: flex; flex-direction: column; }
/* ① 상단 바: 검은 전광판 */
.sh-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: #000; color: #e8e8e8; box-shadow: var(--sunken); padding: 8px 12px; margin-bottom: 12px; font-size: 13.5px; }
.sh-top .sh-sym { font: 700 18px/1.2 var(--f-num); color: var(--led); letter-spacing: .02em; }
.sh-top .sh-venue { color: #c8c8c8; }
.sh-top .sh-iv { background: var(--yel); color: #000; font-weight: 700; padding: 0 6px; line-height: 20px; }
.sh-top .sh-asof { color: var(--amber); font-family: var(--f-num); }
.sh-top .sh-asof b { color: #fff; }
.sh-top .sh-net { margin-left: auto; color: #9aa1ab; font-size: 12.5px; }
.sh-conn { display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; line-height: 20px; font-size: 12.5px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.sh-conn::before { content: ''; width: 8px; height: 8px; background: currentColor; flex: none; }
.sh-conn.t-ok { color: var(--led); border-color: var(--led); background: #0a2a0a; }
.sh-conn.t-off { color: #ff6060; border-color: #ff6060; background: #3a0000; }
.sh-conn.t-sync { color: var(--amber); border-color: var(--amber); background: #332400; }
.sh-conn.t-delay { color: #000; border-color: #806000; background: var(--gold-bg); }
.sh-conn.t-replay { color: #000; border-color: #000; background: #fff; }
.sh-conn.t-replay::before { background: #808080; }
/* ② 설정 폼: 셀렉트 격자 */
.sh-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; align-items: start; }
.sh-form .field > span { font-size: 13px; color: var(--mute); }
.sh-form .field select { font-size: 14.5px; min-height: 34px; max-width: 100%; }
.sh-form .field select:disabled { color: var(--faint); background: #f0f0f0; }
.sh-lock { font-size: 11.5px; color: var(--faint); line-height: 1.35; }
.sh-apply { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.sh-target { font-size: 13px; color: var(--mute); }
/* ③·④ 현재 상태 | 차트 */
.sh-main { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); grid-template-areas: "now chart"; }
.sh-now { grid-area: now; }
.sh-chart-cell { grid-area: chart; }
.sh-now-st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-st { display: inline-flex; align-items: center; padding: 0 8px; line-height: 24px; font-weight: 800; font-size: 14px; border: 2px solid #000; background: #eee; color: #000; white-space: nowrap; }
.sh-st.big { font: 400 24px/1.3 var(--f-pix-s); padding: 2px 12px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); }
.sh-st.t-wait { background: #f0f0f0; color: var(--mute); }
.sh-st.t-ready { background: var(--yel); }
.sh-st.t-up { background: var(--up); color: #fff; }
.sh-st.t-down { background: var(--down); color: #fff; }
.sh-st.t-none { background: #fff; border-style: dashed; color: var(--faint); }
.sh-dir { font-size: 13px; padding: 0 6px; line-height: 22px; border: 1px dashed #000; background: #fffff0; white-space: nowrap; }
.sh-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 0 0 8px; font-size: 14px; }
.sh-kv dt { color: var(--mute); white-space: nowrap; }
.sh-kv dd { margin: 0; font-family: var(--f-num); overflow-wrap: anywhere; }
.sh-kv dd small { color: var(--faint); font-size: 12px; }
.sh-kv dd.up { color: var(--up); font-weight: 700; }
.sh-kv dd.down { color: var(--down); font-weight: 700; }
.sh-now-note { font-size: 13.5px; line-height: 1.6; color: var(--mute); margin-bottom: 8px; }
.stat-row.sh-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: auto; margin-bottom: 0; }
.stat-row.sh-metrics dt { font-size: 11.5px; }
.stat-row.sh-metrics dd { font-size: 14px; }
.sh-chart { position: relative; background: #fff; box-shadow: var(--sunken); padding: 4px; }
.sh-canvas { display: block; width: 100%; height: 330px; }
.sh-chart.is-drawn .sh-nojs { display: none; }
.sh-nojs { position: absolute; left: 10px; top: 10px; font-size: 13px; color: var(--mute); }
.sh-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: #333; }
.sh-key li { display: inline-flex; align-items: center; gap: 4px; }
.sh-key i { display: inline-block; width: 10px; height: 12px; }
.sh-key i.up { background: var(--up); }
.sh-key i.down { background: var(--down); }
.sh-key i.bd { width: 18px; height: 3px; background: repeating-linear-gradient(90deg, var(--navy) 0 4px, transparent 4px 7px); }
.sh-key .g { font-weight: 800; }
.sh-key .g.rd { color: var(--yel); text-shadow: 0 0 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
.sh-key .g.up { color: var(--up); }
.sh-key .g.down { color: var(--down); }
.sh-key .g.st { color: var(--yel); text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
/* ⑤ 조건표 · 통과/탈락 */
.sh-checks td, .sh-checks th, .sh-cmp td, .sh-cmp th { padding: 5px 8px; font-size: 13.5px; }
.sh-checks tr.no td { color: var(--mute); }
.sh-pass, .sh-fail { display: inline-block; padding: 0 6px; line-height: 18px; font-size: 12.5px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.sh-pass { color: #006400; border-color: #006400; background: #e8ffe8; }
.sh-fail { color: #a00000; border-color: #a00000; background: #ffe8e8; }
.sh-count { font-size: 13px; margin-top: 6px; color: var(--mute); }
.sh-cl { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sh-cl li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 2px 0; border-bottom: 1px dotted var(--lt); }
.sh-cl-k { color: var(--ink); }
.sh-cl-op { color: var(--mute); white-space: nowrap; }
/* ⑥ 신호 목록 */
.sh-evs { display: flex; flex-direction: column; max-height: 560px; overflow: auto; }
.sh-ev { display: grid; grid-template-columns: 110px auto minmax(0, 1fr) auto; grid-template-areas: "t s m p" "t x x x" "t d d d"; gap: 2px 10px; padding: 7px 2px; border-bottom: 1px dotted var(--lo); font-size: 13.5px; align-items: center; }
.sh-ev-t { grid-area: t; color: var(--faint); font-size: 12.5px; line-height: 1.3; display: flex; flex-direction: column; align-self: start; }
.sh-ev-t small { font-size: 11px; color: var(--faint); }
.sh-ev-s { grid-area: s; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sh-ev-m { grid-area: m; color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-ev-p { grid-area: p; font-family: var(--f-num); text-align: right; white-space: nowrap; }
.sh-ev-x { grid-area: x; color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.sh-ev-d { grid-area: d; font-size: 12.5px; }
.sh-ev-d summary { cursor: pointer; color: var(--link); }
.sh-why { color: var(--mute); margin-top: 3px; }
.sh-ev.is-rec { background: #f6f6f6; }
.sh-ev.t-up .sh-ev-p { color: var(--up); }
.sh-ev.t-down .sh-ev-p { color: var(--down); }
.sh-stage { display: inline-block; padding: 0 6px; line-height: 18px; font-size: 12.5px; font-weight: 700; border: 1px solid #000; white-space: nowrap; background: #fff; }
.sh-stage.t-ready { background: var(--yel); }
.sh-stage.t-up { background: var(--up); color: #fff; }
.sh-stage.t-down { background: var(--down); color: #fff; }
.sh-stage.t-shoot { background: #000; color: var(--yel); }
.sh-stage.t-rec { background: var(--win); color: var(--mute); border-color: var(--lo); font-weight: 400; }
.sh-stage.t-replay, .sh-stage.t-conc { border-style: dashed; font-weight: 400; }
/* ⑦ 과거 성과 */
.sh-perf-cap { font-size: 13px; color: var(--mute); margin: 0 0 8px; }
.sh-perf td, .sh-perf th { padding: 5px 7px; font-size: 13.5px; }
.sh-perf th small { display: block; font-size: 11px; color: var(--mute); }
.sh-perf td.k { white-space: nowrap; }
.sh-perf td.k small { display: block; color: var(--faint); font-size: 11.5px; }
.sh-noperf { font-weight: 700; }
.sh-sub { margin-top: 14px; }
.sh-ft dd small { color: var(--faint); font-size: 12px; }
/* ⑧·⑨ 알림 설정 · 안내 */
.sh-alerts .opts { margin-bottom: 6px; }
.sh-alerts .hint { margin-top: 2px; }
.sh-notes { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.55; }
.sh-notes li { padding-left: 14px; position: relative; }
.sh-notes li::before { content: '■'; position: absolute; left: 0; top: 1px; color: var(--navy); font-size: 9px; }
/* 토스트: 검은 창 + 노란 테두리 (휴대폰은 아래 탭바 위로) */
.sh-toasts { position: fixed; right: 12px; bottom: 12px; z-index: 70; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.sh-toast { background: #000; color: #fff; border: 2px solid var(--yel); box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); padding: 8px 12px; font-size: 13.5px; line-height: 1.5; }
.sh-toast b { color: var(--yel); }
.sh-toast.t-up b { color: #ff6b6b; }
.sh-toast.t-down b { color: #7fb4ff; }
/* 사례 화면 타임라인 */
.sh-tl li { display: grid; grid-template-columns: 130px auto minmax(0, 1fr); grid-template-areas: "t s v" "t x x"; gap: 3px 10px; padding: 9px 0; border-bottom: 1px dotted var(--lo); align-items: center; }
.sh-tl time { grid-area: t; font: 700 14px/1.3 var(--f-num); display: flex; flex-direction: column; }
.sh-tl time small { font-weight: 400; font-size: 11px; color: var(--faint); }
.sh-tl-s { grid-area: s; display: inline-flex; gap: 4px; }
.sh-tl-v { grid-area: v; font-family: var(--f-num); }
.sh-tl-x { grid-area: x; color: var(--mute); font-size: 13px; line-height: 1.5; }
.sh-tl li.t-up .sh-tl-v { color: var(--up); }
.sh-tl li.t-down .sh-tl-v { color: var(--down); }
@media (max-width: 960px) {
  .sh-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "now" "chart"; }
  .stat-row.sh-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sh-top { padding: 7px 9px; gap: 4px 8px; font-size: 12.5px; }
  .sh-top .sh-sym { font-size: 16px; }
  .sh-top .sh-net { margin-left: 0; flex-basis: 100%; }
  .sh-canvas { height: 260px; }
  .stat-row.sh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-ev { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t s p" "m m m" "x x x" "d d d"; gap: 2px 8px; }
  .sh-ev-t { flex-direction: row; gap: 4px; align-items: baseline; }
  .sh-ev-m { white-space: normal; }
  .sh-cl li { grid-template-columns: minmax(0, 1fr) auto; }
  .sh-cl li .sh-cl-op { grid-column: 1; }
  .sh-cl li .sh-pass, .sh-cl li .sh-fail { grid-column: 2; grid-row: 1 / span 2; }
  .sh-tl li { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t s" "v v" "x x"; }
  .sh-toasts { left: 12px; right: 12px; max-width: none; }
  .sh-st.big { font-size: 24px; }
}
@media (max-width: 760px) { .sh-toasts { bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (max-width: 360px) { .sh-form { grid-template-columns: minmax(0, 1fr); } }
.sh-others { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sh-others li > b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.sh-others .na { font-size: 13px; }
.sh-tl.sm li { padding: 4px 0; font-size: 13px; }
.sh-tl.sm time { font-size: 13px; }
/* ── 슈팅 시그널 끝 ── (배포 사본에서 슈팅을 뺄 때 tools/deploy-snapshot.sh 가 위 「슈팅 시그널」 줄부터 이 줄까지만 지운다. 슈팅 CSS 는 이 안에만 둔다) */

/* 축 있는 선 그래프(고래 성적표 누적 손익 등 · 2026-10-23 「올리면 금액, 가로 기간 · 세로 금액 기준」) */
.axc { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 22px; background: #fff; box-shadow: var(--sunken); padding: 8px 10px 4px 0; }
.axc-y { position: relative; } .axc-y span { position: absolute; right: 6px; transform: translateY(-50%); font: 600 11.5px/1 var(--f-num); color: #555; white-space: nowrap; }
.axc-plot { position: relative; touch-action: pan-y; cursor: crosshair; border-left: 1px solid #999; border-bottom: 1px solid #999; }
.axc-plot svg { display: block; width: 100%; height: 100%; }
.axc-grid { stroke: #e2e2e2; stroke-width: 1; vector-effect: non-scaling-stroke; } .axc-zero { stroke: #000; stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.axc-line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; } .axc-line.up { stroke: var(--up); } .axc-line.down { stroke: var(--down); }
.axc-area.up { fill: rgba(208, 0, 0, .08); } .axc-area.down { fill: rgba(0, 0, 192, .08); }
.axc-x { grid-column: 2; display: flex; justify-content: space-between; font: 600 11.5px/22px var(--f-num); color: #555; }
.axc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #000; pointer-events: none; }
.axc-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--yel); border: 2px solid #000; pointer-events: none; }
.axc-tip { position: absolute; transform: translateX(-50%); padding: 4px 8px; background: #000; color: #fff; border: 1px solid #fff; white-space: nowrap; pointer-events: none; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.axc-tip small { font-size: 11px; color: #ccc; } .axc-tip b { font: 800 14px/1.2 var(--f-num); } .axc-tip b.up { color: #ff8a8a; } .axc-tip b.down { color: #9cc0ff; }
.axc [hidden] { display: none; }
@media (max-width: 640px) { .axc { grid-template-columns: 52px minmax(0, 1fr); } .axc-y span, .axc-x { font-size: 10.5px; } }

/* 메인 고래 포지션: 목록 | 코인별 롱·숏 두 칸(사장님 2026-10-23) — 목록은 10명, 넓은 화면에서 가로 두 줄 */
.g-whalepos { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
.dw-list.dw-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
@media (max-width: 1100px) { .dw-list.dw-2col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .g-whalepos { grid-template-columns: minmax(0, 1fr); } }

/* 메인 「방금 고래들」: 옆 수족관 칸 높이만큼 꽉 채우고, 넘치면 그 안에서 스크롤(사장님 2026-10-23 「리스트 더 노출」) */
.arena-feed { display: flex; flex-direction: column; }
.arena-feed-scroll { flex: 1 1 auto; height: 0; min-height: 260px; overflow-y: auto; }
@media (max-width: 960px) { .arena-feed-scroll { height: auto; max-height: 520px; } }

/* 큰손 CVD(넓게) | 크립토 시총(좁게) — 시총 칸은 풀이 위 · 차트 아래 고정(2026-10-23) */
.g-cvd { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; }
.g-cvd .tv-side { display: grid; grid-template-rows: auto auto minmax(380px, 1fr); }
.g-cvd .tv-side > .tv-chart { height: 100% !important; min-height: 380px; align-self: stretch; }
@media (max-width: 960px) { .g-cvd { grid-template-columns: minmax(0, 1fr); } .g-cvd .tv-side { grid-template-rows: auto auto 300px; } .g-cvd .tv-side > .tv-chart { min-height: 300px; } }

/* 빗각 = 평행 채널 + 로그 피보나치(사장님 2026-10-23 그림 두 장: 일봉 단기 파랑 · 주봉 장기 빨강, 중심선 점선) */
.sg-view { display: contents; } .sg-view[hidden] { display: none; }
.sg-tf { margin-left: auto; flex-wrap: nowrap; } .sg-pane .ch-head .sg-tf + .sg-st { margin-left: 4px; }
.sg-ch { stroke-width: 2; vector-effect: non-scaling-stroke; } .sg-ch.blue { stroke: #2962ff; } .sg-ch.red { stroke: #e53935; }
.sg-ch.mid { stroke-width: 1.3; stroke-dasharray: 6 4; }
.sg-piv.blue { fill: #2962ff; } .sg-piv.red { fill: #e53935; }
.sg-fibl { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sg-fibtrend { stroke: #8a8f99; stroke-width: 1.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.sg-chart { position: relative; }
.sg-fibtags { position: absolute; top: 6px; right: 8px; width: 0; pointer-events: none; }
.sg-fibt { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; font: 700 10.5px/1.2 var(--f-num); background: rgba(255, 255, 255, .85); padding: 0 3px; }
.sg-logtag { position: absolute; left: 10px; bottom: 46px; font: 700 10.5px/1 var(--f-body); color: #666; background: rgba(255, 255, 255, .85); padding: 1px 4px; border: 1px solid #bbb; }
.sg-key i.ch-blue { background: #2962ff; } .sg-key i.ch-red { background: #e53935; }
.sg-key i.ch-blue.mid { background: repeating-linear-gradient(90deg, #2962ff 0 4px, transparent 4px 7px); } .sg-key i.ch-red.mid { background: repeating-linear-gradient(90deg, #e53935 0 4px, transparent 4px 7px); }
.sg-key i.fibk { height: 10px; background: linear-gradient(#22b8cf, #089981, #4caf50, #ff9800, #f23645); }
.sg-pane .ch-head h3 small { display: none; } @media (min-width: 1400px) { .sg-pane .ch-head h3 small { display: inline; } }

/* ── 커뮤니티 · 코인별 종목 게시판 (사장님 2026-10-23) ── 회색 창 · 남색 제목줄 그대로, 휴대폰(375px)에서 글 목록은 두 줄 */
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge.b-admin { background: var(--navy); color: var(--yel); border-color: var(--navy); height: 16px; font-size: 11.5px; padding: 0 4px; }
.cm-find { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--win); box-shadow: var(--raised); padding: 8px 10px; margin-bottom: 16px; }
.cm-find label { font-weight: 700; font-size: 14.5px; }
.cm-find input { flex: 1 1 180px; min-width: 0; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 0; background: #fff; box-shadow: var(--sunken); font-size: 15px; }
.cm-chips { gap: 4px; }
.cm-chip { gap: 4px; text-decoration: none; }
.cm-chip .cic { flex: none; }
.cm-chip span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 글 목록: 1줄 제목, 2줄 글쓴이·시각·숫자 */
.cm-list { display: flex; flex-direction: column; }
.cm-row { border-bottom: 1px dotted var(--lo); padding: 7px 2px; min-width: 0; }
.cm-row:hover { background: #ffffcc; }
.cm-link { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink); text-decoration: none; }
.cm-link:hover { color: var(--ink); }
.cm-link:hover .cm-t { text-decoration: underline; }
.cm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; }
.cm-sym { flex: none; font: 700 12px/1 var(--f-num); padding: 2px 4px; background: var(--navy); color: #fff; }
.cm-cn { flex: none; color: #c00000; font-size: 13.5px; font-weight: 700; }
.cm-pic { flex: none; font-size: 11.5px; line-height: 1; padding: 2px 3px; border: 1px solid var(--lo); color: var(--mute); background: var(--win); }
.cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.cm-meta time { font-size: 12.5px; }
.cm-dot { color: var(--lo); }
.cm-au { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 600; }
.cm-au.left { color: var(--faint); font-weight: 400; font-style: italic; }
/* 지금 뜨는 종목 · 찾은 코인 */
.cm-hot li, .cm-coins li { border-bottom: 1px dotted var(--lo); }
.cm-hot a, .cm-coins a { display: flex; align-items: center; gap: 8px; padding: 6px 2px; color: var(--ink); text-decoration: none; min-width: 0; }
.cm-hot a:hover, .cm-coins a:hover { background: #ffffcc; color: var(--ink); }
.cm-hot .rk { flex: none; width: 1.4em; text-align: right; color: var(--faint); font-size: 12.5px; }
.cm-hot .cic, .cm-coins .cic { flex: none; }
.cm-hn { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.cm-hn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-hn small { color: var(--faint); font-size: 12px; font-family: var(--f-num); }
.cm-hc { flex: none; font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.cm-px { flex: none; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.3; font-size: 13.5px; }
/* 종목 머리: 코인 · 시세 | 투표 */
.cm-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cm-bhead { gap: 10px; }
.cm-id { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cm-id .cic { flex: none; }
.cm-id h2 { font-size: 20px; color: var(--navy); }
.cm-id small { color: var(--faint); }
.cm-pxs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cm-pxbox { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--win); box-shadow: var(--sunken); min-width: 0; }
.cm-pxbox small { font-size: 12.5px; color: var(--mute); }
.cm-pxbox b { font-size: 18px; overflow-wrap: anywhere; }
.cm-pxbox .cm-none { font-size: 14.5px; color: var(--mute); font-weight: 400; }
.cm-bar { display: flex; height: 30px; box-shadow: var(--sunken); padding: 2px; background: #fff; overflow: hidden; }
.cm-bar span { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; color: #fff; }
.cm-bar b { padding: 0 6px; }
.cm-up { background: var(--up); justify-content: flex-start; }
.cm-down { background: var(--down); justify-content: flex-end; }
.cm-vnum { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13.5px; }
.cm-vform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.cm-vbtn { min-height: 38px; font-weight: 700; justify-content: center; }
.cm-vbtn.up { color: var(--up); }
.cm-vbtn.down { color: var(--down); }
.cm-vbtn.on { box-shadow: var(--sunken); background: var(--yel); }
.cm-tabs { margin-left: auto; }
.cm-write { justify-content: flex-end; }
/* 글 */
.cm-coinline a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 14px; }
.cm-coinline small { color: var(--faint); font-family: var(--f-num); }
.cm-post .detail-title { font-size: 22px; }
.cm-body { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.cm-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; margin: 4px 0 12px; }
.cm-imgs a { display: block; background: var(--win); box-shadow: var(--sunken); padding: 3px; }
.cm-imgs img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin: 0 auto; }
.cm-acts { border-top: 1px solid var(--lo); padding-top: 12px; }
.cm-like b { margin-left: 4px; }
.cm-like.on { box-shadow: var(--sunken); background: var(--yel); }
.cm-adm { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: #800000; }
.cm-back { margin-left: auto; }
.cm-report { position: relative; display: inline-block; }
.cm-report > summary { list-style: none; cursor: pointer; }
.cm-report > summary::-webkit-details-marker { display: none; }
.cm-report[open] > summary { box-shadow: var(--sunken); }
.cm-rform { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; display: flex; gap: 4px; align-items: center; padding: 6px; background: var(--win); box-shadow: var(--raised); white-space: nowrap; }
.cm-rform select { min-height: 26px; border: 0; border-radius: 0; box-shadow: var(--sunken); background: #fff; padding: 0 4px; font-size: 13.5px; }
.cm-acts .cm-report:last-of-type .cm-rform { left: auto; right: 0; }
/* 댓글 */
.cm-comments { margin-bottom: 16px; }
.cm-clist { display: flex; flex-direction: column; }
.cm-c { border-bottom: 1px dotted var(--lo); padding: 8px 2px; }
.cm-c.is-hidden { background: #f4f4f4; }
.cm-cbody { font-size: 14.5px; line-height: 1.7; margin-top: 2px; overflow-wrap: anywhere; }
.cm-gone { color: var(--mute); }
.cm-cacts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.cm-cform { margin-top: 12px; }
.cm-cform .actions { margin-top: 6px; }
.cm-login { margin-top: 10px; }
/* 글쓰기 */
.cm-keepl { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-kimg { display: flex; align-items: flex-start; gap: 4px; background: #fff; box-shadow: var(--sunken); padding: 4px; }
.cm-kimg img { width: 96px; height: 96px; object-fit: cover; }
.cm-imgmsg { font-size: 14px; padding: 6px 10px; background: #ffffe1; border: 1px solid var(--ink); }
.cm-imgmsg.is-bad { color: #c00000; background: #fff; }
.cm-rule { margin: 0 0 16px; color: #fff; text-shadow: 1px 1px 0 #000; }
/* 관리 */
.cm-banned { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cm-banned li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.cm-banform { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.cm-banform .field { flex: 1 1 200px; }
.q-board { color: var(--ink); text-decoration: none; }
.q-board:hover b { text-decoration: underline; color: var(--link); }
@media (max-width: 960px) { .cm-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .cm-post .detail-title { font-size: 19px; }
  .cm-tabs { margin-left: 0; }
  .cm-pxbox b { font-size: 16px; }
  .cm-hc { display: none; }
  .cm-back { margin-left: 0; }
  .cm-write { justify-content: flex-start; }
}

/* ── 거래소 보유 인증 (사장님 2026-10-23) ── 글쓴이 「보유 MM/DD」 배지 · 투표 칸 보유 회원 줄 · /account/holdings */
.badge.b-hold { background: #006400; color: #fff; border-color: #003200; height: 16px; font-size: 11.5px; padding: 0 4px; font-family: var(--f-num); }
.badge.b-hold.old { background: #fff; color: #6a806a; border-color: #9ab09a; border-style: dashed; }
.hd-vline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 6px; font-size: 13px; color: var(--mute); }
.hd-hint { margin-top: 4px; }
.hd-link { font-size: 13px; overflow-wrap: anywhere; }
.hd-page .form-card { min-width: 0; }
.hd-ex { min-width: 0; padding-bottom: 10px; border-bottom: 1px dotted var(--lo); }
.hd-ex:last-child { padding-bottom: 0; border-bottom: 0; }
.hd-ex h3 { margin-bottom: 4px; font-size: 15px; color: var(--navy); }
.hd-state { font-size: 14.5px; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hd-nolink { cursor: default; }
.hd-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; list-style: square; }
.hd-steps { list-style: decimal; }
.hd-safe { background: #ffffe1; }
.hd-form input { font-family: var(--f-num); }
.hd-acc p { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }

/* ── 메인 코인 속보: 기사 앞 대표 그림(사장님 2026-10-23 「앞에 이미지가 있는 것 이미지도 넣어줘」) ── 그림 없는 기사는 빈 칸으로 줄 맞춤 */
.news-list.news-thumb li { grid-template-columns: 40px 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; }
.news-list.news-thumb .nl-thumb { display: block; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; background: #d6d6d6; border: 1px solid var(--lo); }
.news-list.news-thumb .nl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-list.news-thumb .news-title a, .news-list.news-thumb .news-title > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .news-list.news-thumb li { grid-template-columns: 36px 80px minmax(0, 1fr); gap: 8px; } .news-list.news-thumb .nl-thumb { width: 80px; } }

/* ── 투자 유의사항(사장님 2026-10-23 「각 지표 페이지에 투자유의사항 꼭」 → 「너무 길다」: 짧은 한 문단) ── 지표·시세·추천·커뮤니티 화면 맨 아래 */
.inv-note { margin: 14px 0 4px; padding: 8px 12px; background: #fffbe6; border: 1px solid #b8a24a; color: #4a4330; font-size: 12px; line-height: 1.55; }
.inv-note p { margin: 0; }
.inv-note .inv-h { color: #7a4a00; margin-right: 4px; }
.inv-page .inv-sh { font-size: 16px; color: var(--navy); margin: 0 0 8px; }
.inv-page .inv-list { margin: 0; padding-left: 20px; line-height: 1.7; }
.inv-page { display: grid; gap: 12px; }

/* 관리 화면 「접속자」(/admin/visitors, 2026-10-23) — 지금 접속 중 · 숫자 칸 · 막대 그래프 · 표 */
.vs-now-n { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 15px; margin-top: 4px; }
.vs-now-n b { font-size: 30px; font-weight: 800; background: #000; color: var(--led); padding: 0 10px; box-shadow: var(--sunken); }
.vs-now-n .hint { margin: 0; }
.vs-live { max-height: 340px; overflow-y: auto; }
.vs-live .li-end { flex-direction: column; align-items: flex-end; gap: 0; }
.vs-ago { color: var(--faint); font-size: 12px; }
.vs-path { overflow-wrap: anywhere; word-break: break-all; }
.vs-inl { display: inline; }
.vs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.vs-card .kpi-sub { line-height: 1.45; }
.vs-note, .vs > .hint { margin: 0 0 14px; background: var(--win); box-shadow: var(--raised); padding: 6px 10px; color: var(--ink); }
.vs-range { margin: 0 0 10px; }
.vs-sub { font-size: 14px; margin: 12px 10px 4px; }
.vs-table { font-size: 14px; }
.vs-table td { overflow-wrap: anywhere; }
.vs-table .vs-pcell { min-width: 140px; }
.vs-table .vs-host { word-break: break-all; }
.vs-table .vs-nw, .vs-table td:first-child b { white-space: nowrap; }
.vc-box { padding-bottom: 8px; }
.vc-legend { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); margin: 4px 0 6px; }
.vc-k { display: inline-block; width: 12px; height: 12px; border: 1px solid #000; }
.vc-k.uv { background: var(--navy); } .vc-k.pv { background: #a9c4ef; margin-left: 8px; }
.vc { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 160px 20px; background: #fff; box-shadow: var(--sunken); padding: 8px 8px 2px 0; }
.vc-y { position: relative; } .vc-y span { position: absolute; right: 5px; transform: translateY(-50%); font: 600 11px/1 var(--f-num); color: #555; white-space: nowrap; }
.vc-plot { position: relative; border-left: 1px solid #999; border-bottom: 1px solid #999; touch-action: pan-y; }
.vc-plot svg { display: block; width: 100%; height: 100%; }
.vc-grid { stroke: #e2e2e2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vc-pv { fill: #a9c4ef; } .vc-uv { fill: var(--navy); }
.vc-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.vc-hit:hover, .vc-hit.on { fill: rgba(255, 215, 0, .28); }
.vc-x { grid-column: 2; position: relative; font: 600 11px/20px var(--f-num); color: #555; }
.vc-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.vc-tip { min-height: 22px; font-size: 13px; margin-top: 4px; color: var(--mute); }
.vc-tip.on { color: var(--ink); font-weight: 700; }
.vs-home { display: block; padding: 10px 2px; font-size: 15px; color: var(--ink); text-decoration: none; }
.vs-home b { font-size: 20px; }
.vs-home:hover { background: #ffffcc; }
@media (max-width: 900px) { .vs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .vs .sheet.c2 { grid-template-columns: minmax(0, 1fr); } }