/* 비트뱅 화면 (2026-10-30). 색은 텔레그램 카드(card_style.py)와 같은 계열 */
:root {
  --bg: #eef1f5; --panel: #ffffff; --panel-2: #f6f8fb; --edge: #e2e7ee; --ink: #1b2330; --muted: #6f7b8b; --faint: #a3adbb;
  --grid: #eef1f5; --shadow: 0 1px 2px rgba(27,35,48,.05), 0 8px 24px rgba(27,35,48,.05);
  --green: #13865c; --green-bg: #e6f4ee; --red: #d6332a; --red-bg: #fdeeed; --blue: #2e6db4; --blue-bg: #e9f1fb;
  --orange: #e8590c; --orange-bg: #fff1e6; --purple: #7a5fb0; --purple-bg: #f1ecf9; --gray-bg: #eef1f5;
  --note-bg: #fff7e0; --note-edge: #f3d27a; --note-ink: #7a5300;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e131a; --panel: #151c26; --panel-2: #1a2330; --edge: #243041; --ink: #e6ebf2; --muted: #8e9aab; --faint: #5d6a7c;
    --grid: #1c2533; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --green: #2fb383; --green-bg: #12302a; --red: #ef5a50; --red-bg: #3a1c1d; --blue: #5b9be6; --blue-bg: #172a42;
    --orange: #f08a3c; --orange-bg: #3a2414; --purple: #a68be0; --purple-bg: #261f3a; --gray-bg: #1c2533;
    --note-bg: #2e2612; --note-edge: #6b5420; --note-ink: #f2cf6b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e131a; --panel: #151c26; --panel-2: #1a2330; --edge: #243041; --ink: #e6ebf2; --muted: #8e9aab; --faint: #5d6a7c;
  --grid: #1c2533; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --green: #2fb383; --green-bg: #12302a; --red: #ef5a50; --red-bg: #3a1c1d; --blue: #5b9be6; --blue-bg: #172a42;
  --orange: #f08a3c; --orange-bg: #3a2414; --purple: #a68be0; --purple-bg: #261f3a; --gray-bg: #1c2533;
  --note-bg: #2e2612; --note-edge: #6b5420; --note-ink: #f2cf6b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.public .local-only, body:not(.public) .public-only { display: none !important; }   /* 공개 화면 (서버가 body에 public을 붙임) */
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word;        /* 한글은 낱말 중간에서 줄을 바꾸지 않음 ('가/입한' 같은 끊김 방지) */
}
@media (min-width: 721px) { .m-br { display: none; } }     /* 휴대폰에서만 줄바꿈 */
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--green); } .down { color: var(--red); } .muted { color: var(--muted); } .warn { color: var(--orange); }
button { font: inherit; color: inherit; }
a { color: var(--blue); }

/* ---------- 위 막대 + 탭 ---------- */
.top {
  position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge);
}
.top-in {
  max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.brand .mark {
  width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: #000;
  box-shadow: 0 0 0 1.5px rgba(247,147,26,.7), 0 4px 14px rgba(232,89,12,.32);
}
.brand b { display: block; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; }
.brand b em { font-style: normal; font-size: 11px; font-weight: 750; letter-spacing: .14em; color: var(--orange); margin-left: 3px; vertical-align: 2px; }
.brand span { font-size: 12px; color: var(--muted); }
/* ---------- 처음 온 사람용 소개 (로그인 전, 홈 맨 위) ---------- */
.intro {
  position: relative; display: flex; gap: 22px; align-items: center; padding: 22px 26px; margin-bottom: 18px; border-radius: 18px;
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--orange) 15%, transparent), transparent 58%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--orange) 32%, var(--edge)); word-break: keep-all;   /* 한글은 낱말 단위로 줄바꿈 */
}
.intro-logo { width: 104px; height: 104px; border-radius: 50%; flex: none; background: #000; box-shadow: 0 0 0 2px rgba(247,147,26,.55), 0 8px 28px rgba(232,89,12,.3); }
.intro-body { flex: 1; min-width: 0; display: grid; gap: 10px; }
.intro-kicker { margin: 0; font-size: 12px; font-weight: 750; letter-spacing: .12em; color: var(--orange); }
.intro h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.intro-sub { margin: -4px 0 0; font-size: 16px; font-weight: 650; line-height: 1.45; }
.intro-lead { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 64ch; }
.intro-feats { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.intro-feats li { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); display: grid; gap: 3px; align-content: start; }
.intro-feats b { font-size: 14px; }
.intro-feats span { font-size: 12.5px; color: var(--muted); }
.intro-feats .pill { justify-self: start; margin-top: 3px; font-style: normal; }
.intro-cta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.intro-cta .fine { margin: 0 0 0 4px; }
.intro-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 7px; border-radius: 8px; }
.intro-x:hover { background: var(--panel-2); color: var(--ink); }
@media (max-width: 1100px) { .intro-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .intro { flex-direction: column; align-items: flex-start; padding: 18px 16px; gap: 12px; }
  .intro-logo { width: 68px; height: 68px; }
  .intro h1 { font-size: 20px; padding-right: 20px; }
  .intro-lead { font-size: 14px; }
}
.ticker { display: flex; align-items: baseline; gap: 12px; margin-left: 6px; flex-wrap: wrap; }
.ticker .inst { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.ticker .px { font-size: 28px; font-weight: 750; letter-spacing: -.02em; transition: color .5s; }
.ticker .px.flash-up { color: var(--green); } .ticker .px.flash-down { color: var(--red); }
.ticker .chg { font-weight: 650; }
.ticker .hl { font-size: 12.5px; color: var(--muted); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabs {
  max-width: 1320px; margin: 0 auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 9px 13px 10px; font-weight: 650; font-size: 14.5px; color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2.5px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: #f7931a; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--blue-bg); color: var(--blue); white-space: nowrap;
}
.pill.gray { background: var(--gray-bg); color: var(--muted); }
.pill.green, .pill.up { background: var(--green-bg); color: var(--green); }
.pill.red, .pill.down { background: var(--red-bg); color: var(--red); }
.pill.orange, .pill.warn { background: var(--orange-bg); color: var(--orange); }
.pill.purple { background: var(--purple-bg); color: var(--purple); }
.pill.sm { font-size: 11.5px; padding: 2px 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.live.on .dot { background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--edge); background: var(--panel);
  cursor: pointer; display: grid; place-items: center; font-size: 15px;
}

/* ---------- 본문 ---------- */
main {
  max-width: 1320px; margin: 0 auto;
  padding: 20px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left));
}
.view { display: grid; gap: 18px; }
.banner { display: none; padding: 12px 16px; border-radius: 14px; background: var(--red-bg); color: var(--red); font-weight: 600; margin-bottom: 18px; }
.banner.show { display: block; }
.grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.grid2.one { grid-template-columns: minmax(0, 1fr); }
.ud-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 2px 10px; font-size: 13px; color: var(--muted); }
.ud-now b { font-size: 22px; color: var(--ink); }

/* 회원: 로그인 버튼 · 잠긴 칸 · 로그인 창 (members.py) */
.auth { display: flex; gap: 6px; align-items: center; flex: none; }
.auth .btn, .au-me { white-space: nowrap; }
.btn.sm { padding: 4px 11px; font-size: 12.5px; border-radius: 9px; }
.au-me { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.au-me b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; }
[data-need].locked > :not(.lockcard) { display: none !important; }
[data-need]:not(.locked) > .lockcard { display: none; }
.lockcard { padding: 26px 18px; border-radius: 16px; background: var(--panel-2); border: 1px dashed var(--edge); text-align: center; display: grid; gap: 10px; justify-items: center; }
.lockcard b { font-size: 15px; }
.lockcard p { margin: 0; color: var(--muted); font-size: 13px; }
.lockcard .lk-title { font-size: 18px; letter-spacing: -.01em; }
.lockcard .lk-desc { color: var(--ink); font-size: 14px; margin-top: -4px; }
.lockcard p { text-wrap: balance; }
.lockcard .lk-need { line-height: 1.7; }
.lockcard p b { font-size: inherit; color: var(--ink); }
.lockcard p b.lk-ref { color: var(--green); }
.lockcard .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.view.locked > .lockcard { padding: 56px 18px; }
.tabs a.lock::after { content: " 🔒"; font-size: 10px; }
.au-dlg { border: 1px solid var(--edge); border-radius: 18px; background: var(--panel); color: var(--ink); padding: 22px 22px 18px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.au-dlg::backdrop { background: rgba(10, 14, 20, .45); }
.au-dlg h2 { margin: 0 0 14px; font-size: 19px; }
.au-dlg h3 { margin: 0; font-size: 14px; }
.au-x { position: absolute; top: 12px; right: 12px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.au-form { display: grid; gap: 9px; }
.au-form.row { grid-template-columns: minmax(0, 1fr) auto; }
.au-form input { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); min-width: 0; }
.au-sec { border-top: 1px solid var(--edge); padding-top: 14px; margin-top: 14px; display: grid; gap: 8px; }
.au-tierline { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.au-leave { display: block; }                                         /* 회원 탈퇴: 접어 두고, 펼치면 비밀번호 + 확인 체크 */
.au-leave summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.au-leave[open] summary { color: var(--red); }
.au-leave form { margin-top: 10px; }
.au-leave .fine { margin: 0; }
.au-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.au-form .au-check input { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--red); }
.btn.danger { background: var(--red-bg); color: var(--red); border-color: transparent; }
.foot-link { display: inline-block; margin-top: 8px; color: var(--muted); }
.pill.ref { background: var(--green-bg); color: var(--green); }

/* 토론방: 넓은 화면 = 왼쪽 차트·순위(·회원 관리) + 오른쪽 긴 대화창, 좁은 화면 = 차트 → 대화 → 순위 */
.fr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "chart chat" "board chat" "admin chat"; gap: 18px; align-items: start; }
.fr-chart { grid-area: chart; }
.fr-board { grid-area: board; }
.fr-admin { grid-area: admin; }
.fr-msgs .fr-msg.op .fr-text { background: var(--orange-bg); border-color: var(--orange); font-weight: 600; }   /* 비트뱅 운영자 글 강조 */
.fr-msgs .fr-msg.op .fr-who b { color: var(--orange); }
.fr-hint { margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.fr-last { font-size: 13px; margin: -6px 0 10px; }
.pp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge); display: grid; gap: 10px; }
.pp-head { display: flex; align-items: baseline; gap: 8px; }
.pp-head h3 { margin: 0; font-size: 15px; }
.pp-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.pp-stats b { font-size: 18px; color: var(--ink); }
.pp-pos { font-size: 13.5px; line-height: 1.7; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.pp-order { display: grid; gap: 8px; }
.pp-trades summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.pp-trades .row { display: flex; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
.fr-chat { grid-area: chat; display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 560px; }
.fr-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.fr-msg { font-size: 14px; line-height: 1.5; }
.fr-msg.mine .fr-text { background: var(--panel-2); }
.fr-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fr-who b { font-size: 13.5px; color: var(--ink); }
.fr-text { margin-top: 3px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--edge); overflow-wrap: anywhere; }
.fr-rank { display: inline-block; padding: 1px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 800; color: #fff; }
.fr-rank.r1 { background: #c99a06; }
.fr-rank.r2 { background: #8a94a3; }
.fr-rank.r3 { background: #b06a35; }
.fr-x { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 0 4px; }
.fr-x:hover { color: var(--red); }
.fr-send { margin-top: 10px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.fr-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fr-row input, .fr-send input { flex: 1 1 120px; min-width: 0; font: inherit; font-size: 14.5px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); }
.pp-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pp-field input { flex: 0 0 72px; width: 72px; }
td .fr-note { display: block; color: var(--muted); font-size: 12.5px; white-space: normal; }
.fra-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.fra-btns .btn { padding: 3px 8px; font-size: 12px; }
.col { display: grid; gap: 18px; min-width: 0; }
.panel {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--shadow);
  padding: 18px 20px 20px; min-width: 0;
}
.panel > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.panel h2 { font-size: 16px; margin: 0; letter-spacing: -.01em; }
.panel > header .sub { font-size: 12.5px; color: var(--muted); }
.panel > header .end { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.more-link { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: none; }
.empty { padding: 22px 16px; border-radius: 14px; background: var(--panel-2); color: var(--muted); text-align: center; font-size: 14px; }
.error { padding: 12px 14px; border-radius: 12px; background: var(--red-bg); color: var(--red); font-size: 13.5px; }
.fine { font-size: 12px; color: var(--muted); margin: 10px 2px 0; line-height: 1.7; }
.stale { font-size: 12px; color: var(--orange); }

/* 계좌 요약 */
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.summary.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.stat { background: var(--panel-2); border-radius: 14px; padding: 11px 14px; min-width: 0; }
.panel-like { background: var(--panel); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: 18px; padding: 14px 16px; }
.stat .lab { font-size: 12px; color: var(--muted); }
.stat .val { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.stat .val small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.stat .sub2 { font-size: 12px; color: var(--muted); }

/* 실제 포지션 */
.pos { border: 1px solid var(--edge); border-radius: 16px; padding: 16px 16px 14px; position: relative; overflow: hidden; }
.pos + .pos { margin-top: 12px; }
.pos::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--green); }
.pos.short::before { background: var(--red); }
.pos-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.side-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 3px 9px; border-radius: 7px; background: var(--green-bg); color: var(--green); }
.short .side-tag { background: var(--red-bg); color: var(--red); }
.pos-head b { font-size: 15px; }
.pos-head .age { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.pos-body { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 2fr); gap: 18px; margin-top: 12px; align-items: center; }
.pnl .lab { font-size: 12px; color: var(--muted); }
.pnl .big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pnl .big small { font-size: 14px; font-weight: 700; margin-left: 4px; }
.pnl .ratio { font-size: 13px; color: var(--muted); }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.kv div { min-width: 0; }
.kv dt { font-size: 12px; color: var(--muted); }
.kv dd { margin: 0; font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv dd small { font-weight: 500; color: var(--muted); font-size: 12px; }
.kv dd small.line { display: block; line-height: 1.3; white-space: normal; }   /* 좁은 화면에선 줄바꿈 (잘리지 않게) */
/* 청산가·평단·지금 막대: 이름표는 한 줄, 가까우면 두 줄로 엇갈림 (위 2줄 · 아래 2줄) */
.rail { position: relative; height: 82px; margin: 14px 6px 2px; }
.rail .track { position: absolute; left: 0; right: 0; top: 38px; height: 6px; border-radius: 3px; background: var(--grid); }
.rail .zone { position: absolute; top: 38px; height: 6px; border-radius: 3px; }
.rail .mk { position: absolute; top: 32px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; }
.rail .mk.dotm { width: 12px; height: 12px; top: 35px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--panel); }
.rail .lb { position: absolute; font-size: 11.5px; line-height: 1.25; white-space: nowrap; transform: translateX(-50%); }
.rail .lb.above.l1 { top: 0; } .rail .lb.above.l2 { top: 15px; }
.rail .lb.below.l1 { top: 54px; } .rail .lb.below.l2 { top: 68px; }
.rail .lb.right-anchor { transform: translateX(-100%); text-align: right; } .rail .lb.left-anchor { transform: none; }
.rail .lb b { font-weight: 700; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.subhead { font-size: 13px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; letter-spacing: .01em; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--edge); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--edge); white-space: nowrap; }
td.wrap { white-space: normal; }
tr:last-child td { border-bottom: 0; }
th.r, td.r { text-align: right; }
tr.sel td { background: var(--panel-2); }
tr.click { cursor: pointer; }

/* 현재 관점 한 줄 (형광펜 칸) */
.viewnote { background: var(--note-bg); border: 1px solid var(--note-edge); border-radius: 20px; box-shadow: var(--shadow); padding: 16px 20px 14px; position: relative; overflow: hidden; }
.viewnote::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--note-edge); }
.vn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vn-label { font-size: 13px; font-weight: 800; color: var(--note-ink); letter-spacing: .02em; }
.vn-meta { font-size: 12.5px; color: var(--muted); }
.vn-edit { margin-left: auto; border: 1px solid var(--note-edge); background: transparent; color: var(--note-ink); border-radius: 10px; padding: 4px 12px; font-size: 13px; font-weight: 650; cursor: pointer; }
.vn-text { margin: 8px 0 0; font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; overflow-wrap: anywhere; }
.vn-text.empty-note { font-size: 15px; font-weight: 500; color: var(--muted); }
.vn-form, .vn-key { margin-top: 12px; display: grid; gap: 10px; }
.vn-row { display: flex; gap: 8px; align-items: center; }
.vn-row input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--note-edge); background: var(--panel); color: var(--ink); }
.vn-row input:focus { outline: 2px solid var(--note-edge); outline-offset: 1px; }
.vn-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.vn-stances { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vn-stances span { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.vn-stances button { border: 1px solid var(--note-edge); background: var(--panel); border-radius: 999px; padding: 3px 12px; font-size: 13px; cursor: pointer; color: var(--muted); }
.vn-stances button[aria-pressed="true"] { background: var(--note-ink); border-color: var(--note-ink); color: var(--note-bg); font-weight: 650; }
.vn-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 고래 움직임 ---------- */
#view-whale { display: grid; gap: 16px; }
#view-whale[hidden] { display: none; }
.wh-head { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.wh-head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.wh-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 70ch; word-break: keep-all; }
.wh-health { display: flex; gap: 6px; flex-wrap: wrap; }
.wh-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wh-card { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.wh-ct { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.wh-cv { font-size: 19px; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.wh-card .pill { justify-self: start; }
.wh-cs { font-size: 12px; color: var(--muted); word-break: keep-all; }
.wh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wh-canvas { width: 100%; height: 440px; display: block; }
.wh-canvas.small { height: 200px; }
.wh-toggles { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.wh-toggles input { vertical-align: -2px; }
.wh-board { display: grid; gap: 2px; }
.wh-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--edge); }
.wh-row:last-child { border-bottom: 0; }
.wh-rl { font-size: 13px; color: var(--muted); font-weight: 650; }
.wh-rv { font-size: 14px; }
.wh-rt { grid-column: 2; font-size: 12.5px; color: var(--muted); word-break: keep-all; }
.wh-legend { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.wh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.wh-legend b { color: var(--ink); font-weight: 650; }
.wh-filter button { font-size: 12.5px; }
.wh-ev { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--edge); padding: 10px 2px; cursor: pointer; }
.wh-ev:hover { background: var(--panel-2); }
.wh-onchain { text-align: left; line-height: 1.7; word-break: keep-all; }
.wh-dlg { max-width: 640px; }
.wh-dlg-in { display: grid; gap: 4px; word-break: keep-all; }
.wh-dlg-in .kv dd { white-space: normal; overflow: visible; }
.wh-dlg-in h4 { margin: 12px 0 4px; font-size: 14px; }
.wh-dlg-in ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.wh-dlg-in p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.wh-dt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 17px; }
.wh-parts { display: flex; gap: 6px; flex-wrap: wrap; }
.wh-parts span { background: var(--panel-2); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; color: var(--muted); }
.wh-parts b { color: var(--ink); margin-left: 3px; }
.wh-dlg-close { display: flex; justify-content: flex-end; margin-top: 12px; }
.wh-cfg-row { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; font-size: 13px; margin-bottom: 10px; }
.wh-admin input[type=number] { width: 72px; font: inherit; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--edge); background: var(--panel-2); color: var(--ink); }
.wh-admin select { font: inherit; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--edge); background: var(--panel-2); color: var(--ink); }
@media (max-width: 1100px) { .wh-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wh-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .wh-canvas { height: 340px; }
  .wh-row { grid-template-columns: minmax(0, 1fr); }
  .wh-rt { grid-column: 1; }
  .wh-cv { font-size: 16px; }
}

/* ---------- 실시간 이슈 (btc_alert/news): 요약 카드 · 필터 · 사건 카드 · 상세 창 ---------- */
#view-news { display: grid; gap: 14px; }
#view-news[hidden] { display: none; }
.nw-head { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.nw-head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.nw-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.nw-en { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; margin-left: 4px; }
.nw-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.nw-sum .stat .val { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.nw-sum .stat.click { cursor: pointer; }
.nw-sum .stat.click:hover { outline: 1px solid var(--edge); }
.nw-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nw-filters input, .nw-filters select { font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--edge);
  background: var(--panel); color: var(--ink); min-width: 0; }
.nw-filters input { flex: 1 1 180px; }
#nw-list { display: grid; gap: 10px; }
.nw-card { cursor: pointer; display: grid; gap: 6px; border-left: 4px solid var(--edge); }
.nw-card.u-CRITICAL { border-left-color: var(--red); }
.nw-card.u-HIGH { border-left-color: var(--orange); }
.nw-card.u-MEDIUM { border-left-color: var(--blue); }
.nw-card.stale { opacity: .86; }
.nw-card:hover { background: var(--panel-2); }
.nw-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nw-when { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.nw-card h3, .nw-dtitle { margin: 2px 0 0; font-size: 16.5px; letter-spacing: -.01em; line-height: 1.4; text-wrap: balance; }
.nw-dtitle { font-size: 19px; }
.nw-orig { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.nw-warn { margin: 0; font-size: 13px; font-weight: 600; color: var(--red); }
.nw-warn.gray { color: var(--muted); font-weight: 500; }
.nw-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.nw-nums.retro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nw-nums div { background: var(--panel-2); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.nw-nums span { display: block; font-size: 11.5px; color: var(--muted); }
.nw-nums b { font-size: 14.5px; }
.nw-foot { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.nw-foot a { color: var(--blue); }
.nw-foot .linkbtn { margin-left: auto; font-size: 13px; }
.nw-sub { margin: 6px 0 0; font-size: 15px; }
#nw-archive { display: grid; gap: 14px; }
#nw-archive[hidden] { display: none; }
table.nw-st, table.nw-hz { width: 100%; border-collapse: collapse; font-size: 13px; }
.nw-st th, .nw-st td, .nw-hz th, .nw-hz td { padding: 8px 10px; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: top; white-space: nowrap; }
.nw-st th, .nw-hz th { font-size: 12px; color: var(--muted); font-weight: 600; }
.nw-hz td { font-weight: 650; }
.nw-dlg { max-width: 760px; }
.nw-dt { display: flex; gap: 6px; flex-wrap: wrap; }
.nw-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0; }
.nw-kv div { background: var(--panel-2); border-radius: 10px; padding: 7px 10px; }
.nw-kv span { display: block; font-size: 11.5px; color: var(--muted); }
.nw-kv b { font-size: 14px; }
.nw-line { margin: 4px 0 !important; }
.nw-chartbox { margin: 8px 0 4px; }
.nw-chartbox canvas { display: block; width: 100%; height: 260px; }
.nw-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.nw-basis { margin: 6px 0 2px; }
.nw-why { font-size: 13px !important; }
.nw-items, .nw-tl { list-style: none; padding-left: 0 !important; display: grid; gap: 6px; }
.nw-items li, .nw-tl li { font-size: 13px; line-height: 1.55; }
.nw-items a { color: var(--blue); }
.nw-adm { border-top: 1px solid var(--edge); margin-top: 10px; padding-top: 8px; display: grid; gap: 8px; }
.nw-editf { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nw-editf select, .nw-editf input, .nw-admin input[type=number] { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--edge); background: var(--panel-2); color: var(--ink); }
.nw-admin input[type=number] { width: 76px; }
.nw-cfg-grid { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.nw-cfg-grid label { display: inline-flex; gap: 6px; align-items: center; }
.nw-admin h4 { margin: 10px 0 6px; font-size: 13.5px; }
@media (max-width: 1100px) { .nw-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .nw-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-nums.retro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-when { margin-left: 0; width: 100%; }
  .nw-filters select { flex: 1 1 calc(50% - 8px); }
  .nw-chartbox canvas { height: 220px; }
}

/* ---------- 운영자 실제 주문 알림: 오른쪽 아래 팝업 + 비트뱅 포지션 칸 아래 최근 목록 ---------- */
.toasts {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px));
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); pointer-events: none;
}
.toast {
  pointer-events: auto; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--edge);
  border-left: 4px solid var(--orange); box-shadow: 0 10px 30px rgba(0,0,0,.28); display: grid; gap: 4px;
  animation: toast-in .25s ease-out; transition: opacity .4s, transform .4s;
}
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast.k-open.s-long, .toast.k-add.s-long, .toast.k-tp { border-left-color: var(--green); }
.toast.k-open.s-short, .toast.k-add.s-short, .toast.k-sl { border-left-color: var(--red); }
.toast.k-reduce, .toast.k-close { border-left-color: var(--blue); }
.toast.k-cancel { border-left-color: var(--faint); }
.toast .t-top { display: flex; align-items: center; gap: 8px; }
.toast .t-top b { font-size: 14.5px; flex: 1; min-width: 0; }
.toast .t-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.toast .t-detail { font-size: 13.5px; }
.toast .t-foot { font-size: 11.5px; color: var(--muted); }
.al-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); display: grid; gap: 6px; }
.al-list:empty { display: none; }
.al-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.al-h b { font-size: 14px; }
.al-h span { font-size: 12px; color: var(--muted); }
.al-row { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.al-row b { font-size: 13px; }

/* ---------- 시황 브리핑 (읽기 좋은 폭의 한 줄 피드) ---------- */
.br-wrap { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.br-head { display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.br-head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.br-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.br-form { display: grid; gap: 10px; }
#br-list { display: grid; gap: 14px; }
.br-form input, .br-form textarea {
  font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--edge); background: var(--panel-2); color: var(--ink);
  width: 100%; box-sizing: border-box;
}
.br-form input { font-weight: 650; }
.br-form textarea { resize: vertical; min-height: 220px; line-height: 1.65; }
.br-form .vn-stances button { border-color: var(--edge); }
.br-form .vn-stances button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.br-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.br-photo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.br-photo .muted { font-size: 12.5px; }
.br-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.br-thumbs:empty { display: none; }
.br-thumb { position: relative; width: 104px; height: 78px; border-radius: 10px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--edge); }
.br-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-thumb button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 22px; padding: 0; }
.br-thumb.wait { display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.br-gallery { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-gallery.n1 { grid-template-columns: minmax(0, 1fr); }
.br-gallery a { display: block; border-radius: 12px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--edge); }
.br-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.br-gallery.n1 img { aspect-ratio: auto; height: auto; max-height: 560px; object-fit: contain; }
.br-gallery.n3 a:first-child { grid-column: 1 / -1; }
.br-post { display: grid; gap: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.br-ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.br-ph h3 { margin: 0; font-size: 19px; letter-spacing: -.015em; line-height: 1.35; text-wrap: balance; }
.br-meta { font-size: 12.5px; color: var(--muted); }
.br-body { font-size: 15px; line-height: 1.75; }
.br-body p { margin: 0 0 .8em; }
.br-body p:last-child { margin-bottom: 0; }
.br-body.fold { max-height: 7.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.br-body.cut { -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.br-more { justify-self: start; font-size: 13.5px; }
.br-lock { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--panel-2);
  border: 1px dashed var(--edge); font-size: 13.5px; color: var(--muted); }
.br-lock b { color: var(--ink); }
.br-lock .row { display: flex; gap: 6px; }
.br-tools { display: flex; gap: 6px; justify-content: flex-end; }
.btn { border: 1px solid var(--edge); background: var(--panel); border-radius: 10px; padding: 7px 15px; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); padding-inline: 8px; }
.vn-who { font-size: 12px; color: var(--muted); margin-left: auto; }
.vn-msg { font-size: 12.5px; color: var(--red); }
.vn-msg:empty { display: none; }
.vn-history summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.vn-history ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.vn-foot { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

/* 차트 */
.chart-box { position: relative; height: 340px; }
.chart-box.tall { height: 420px; }
canvas { width: 100%; height: 100%; display: block; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 0; border-top: 2px dashed currentColor; vertical-align: middle; margin-right: 5px; }
.legend i.box { width: 10px; height: 10px; border: 0; border-radius: 3px; background: currentColor; }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: 10px; padding: 7px 10px; font-size: 12px; display: none; white-space: nowrap; z-index: 2; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--edge); flex-wrap: wrap; }
.seg button { border: 0; background: none; cursor: pointer; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(27,35,48,.14); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--edge); background: var(--panel); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.chip small { opacity: .75; margin-left: 4px; }

/* 홈: 다가오는 일정 · 지금 영향 주는 것 */
.ev-mini { display: grid; gap: 2px; }
.ev-mini .row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--edge); }
.ev-mini .row:first-child { border-top: 0; }
.ev-mini .when { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.ev-mini .when b { color: var(--ink); font-size: 13px; }
.ev-mini .name { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-mini .left { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.drv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.drv .stat .val { font-size: 17px; }

/* 일정 탭 */
.next-up {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--orange-bg), var(--panel-2)); border: 1px solid var(--edge);
}
.next-up .cd { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--orange); }
.next-up .nm { font-size: 15px; font-weight: 700; }
.cal-day { font-size: 13px; font-weight: 800; color: var(--muted); margin: 20px 0 6px; letter-spacing: .02em; display: flex; gap: 8px; align-items: center; }
.cal-day:first-child { margin-top: 0; }
.cal-day.today { color: var(--orange); }
.ev { display: grid; grid-template-columns: 52px 46px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--edge); }
.cal-day + .ev { border-top: 0; }
.ev .t { font-weight: 700; font-size: 13.5px; }
.ev .imp { font-size: 11px; letter-spacing: 1px; color: var(--orange); padding-top: 2px; }
.ev .imp.lo { color: var(--faint); }
.ev .nm { font-weight: 600; font-size: 14.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ev .det { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ev .det b { color: var(--ink); font-weight: 650; }
.ev .rx { text-align: right; font-size: 12.5px; white-space: nowrap; }
.ev .rx .lab { color: var(--muted); font-size: 11.5px; }
.ev.past .nm { color: var(--muted); }
.ev.hi .nm { color: var(--ink); }
.region { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--gray-bg); color: var(--muted); }
.region.crypto { background: var(--orange-bg); color: var(--orange); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* 시장 지표 탭: 줄마다 [순위][이름·설명][값·등락][그래프·상관 또는 상태]. 휴대폰에선 마지막 칸이 아래 줄로 */
.mrow, .mk-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) 116px 176px; gap: 4px 12px; align-items: center; }
.mrow.crypto, .mk-head.crypto { grid-template-columns: 22px minmax(0, 1fr) 116px 150px; }
.mk-head { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 0 6px; border-bottom: 1px solid var(--edge); }
.mrow { padding: 11px 0; border-top: 1px solid var(--edge); }
.mk-head + .mrow { border-top: 0; }
.mrow .rank { color: var(--faint); font-weight: 700; }
.mrow .nm b { display: block; font-size: 14.5px; }
.mrow .nm span { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.mrow .val { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; }
.mrow .val .ch { font-size: 12.5px; font-weight: 650; }
.mrow .ext { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.mrow .ext .sub3 { font-size: 12px; color: var(--muted); }
.m-only { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; }
.m-lab { display: none; }
.corr { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.corr .bar { width: 54px; height: 6px; border-radius: 3px; background: var(--grid); position: relative; overflow: hidden; }
.corr .bar i { position: absolute; top: 0; bottom: 0; }
.spark { display: block; }

/* 옵션 · 청산 탭 */
.exp-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.exp-chips .chip { display: grid; text-align: left; border-radius: 12px; padding: 6px 11px; gap: 0; line-height: 1.3; }
.exp-chips .chip b { font-size: 13px; }
.exp-chips .chip small { margin: 0; font-size: 11.5px; }
.notes-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.liq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.side-list { display: grid; gap: 14px; }
.side-list h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.side-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.side-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; background: var(--panel-2); border-radius: 10px; padding: 7px 10px; }
.assume summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 12px; }
.assume ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 3px; }

/* 포지션 기록: 지금 포지션 체결 줄 · 직전 3개 · 이번달 · 3달 */
.realized { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.realized b { font-size: 16px; }
.ords { margin-top: 10px; }
.ords h4 { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.ord {
  display: grid; grid-template-columns: 82px 74px minmax(0, 1fr) minmax(0, 1.1fr) 92px; grid-template-areas: "t k d a r";
  gap: 3px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--edge); font-size: 13.5px;
}
.ord .t { grid-area: t; color: var(--muted); font-size: 12.5px; }
.ord .k { grid-area: k; justify-self: start; }
.ord .d { grid-area: d; }
.ord .a { grid-area: a; color: var(--muted); font-size: 12.5px; }
.ord .r { grid-area: r; text-align: right; font-weight: 650; }
.kind { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 7px; text-align: center; white-space: nowrap; }
.kind.open { background: var(--blue-bg); color: var(--blue); }
.kind.add { background: var(--orange-bg); color: var(--orange); }
.kind.part { background: var(--purple-bg); color: var(--purple); }
.kind.done { background: var(--gray-bg); color: var(--muted); }
.last3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pcard { border: 1px solid var(--edge); border-radius: 16px; padding: 13px 14px; position: relative; overflow: hidden; min-width: 0; }
.pcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--green); }
.pcard.short::before { background: var(--red); }
.pcard .hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.pcard .big { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.pcard .big small { font-size: 12px; font-weight: 700; margin-left: 3px; }
.pcard .ln { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pcard .ln b { color: var(--ink); font-weight: 650; }
.mrows .hrow, .mrows .prow {
  display: grid; grid-template-columns: 96px 66px minmax(0, 1.4fr) 84px 110px 70px; grid-template-areas: "t s p q r c";
  gap: 4px 10px; align-items: center;
}
.prow .t { grid-area: t; } .prow .s { grid-area: s; justify-self: start; } .prow .p { grid-area: p; min-width: 0; }
.prow .q { grid-area: q; } .prow .r { grid-area: r; } .prow .c { grid-area: c; }
.mrows .hrow { font-size: 12px; color: var(--muted); font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--edge); }
.mrows .prow { padding: 10px 0; border-top: 1px solid var(--edge); font-size: 13.5px; cursor: pointer; }
.mrows .hrow + .prow { border-top: 0; }
.mrows .prow:hover { background: var(--panel-2); }
.mrows .ra { text-align: right; }
.mrows .detail { padding: 2px 0 10px 12px; border-left: 3px solid var(--edge); margin: 0 0 6px 4px; }
.mrows .more-hint { font-size: 11.5px; color: var(--faint); }
.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.months .stat .val { font-size: 20px; }
.months .stat .sub2 { line-height: 1.5; }
.wr { display: inline-block; height: 5px; border-radius: 3px; background: var(--grid); width: 60px; vertical-align: middle; position: relative; overflow: hidden; margin-left: 4px; }
.wr i { position: absolute; inset: 0 auto 0 0; background: var(--green); }

/* 지지·저항 탭 */
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.lv-list { display: grid; gap: 6px; }
.lv-list h3 { margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.lv-list h3:first-child { margin-top: 0; }
.lvz { border-radius: 12px; padding: 9px 11px; background: var(--panel-2); border-left: 4px solid var(--edge); font-size: 13px; }
.lvz.res { border-left-color: var(--red); } .lvz.sup { border-left-color: var(--green); } .lvz.in-zone { border-left-color: var(--orange); }
.lvz.in { outline: 2px solid var(--orange); outline-offset: -2px; }
.lvz .top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.lvz .lbl { color: var(--muted); font-size: 12px; margin-top: 2px; }
.lvz .sbar { height: 4px; border-radius: 2px; background: var(--grid); margin-top: 6px; overflow: hidden; }
.lvz .sbar i { display: block; height: 100%; background: var(--orange); }
.lv-chip { border: 1px solid var(--edge); background: var(--panel); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.lv-chip i { width: 12px; height: 10px; border-radius: 3px; display: inline-block; }
.lv-chip[aria-pressed="false"] { opacity: .45; }

footer {
  max-width: 1320px; margin: 0 auto; color: var(--muted); font-size: 12.5px; line-height: 1.7;
  padding: 0 max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left));
}

@media (max-width: 1080px) {
  .grid, .grid2, .liq-grid, .lv-grid { grid-template-columns: minmax(0, 1fr); }
  .fr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "chat" "board" "admin"; }
  .fr-chat { height: 70vh; min-height: 420px; }
}
@media (max-width: 720px) {
  /* 휴대폰: 위 막대는 한 줄(로고 · 가격 · 등락 · 연결 점 · 밝기) + 탭만. 시장 상태는 탭 아래 줄로 */
  .top-in {
    flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 4px;
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  }
  .brand { gap: 8px; flex: none; }
  .brand .mark { width: 32px; height: 32px; }
  .brand b { font-size: 16px; }
  .brand b em { display: none; }
  .brand span, .ticker .inst, .ticker .hl, .chg .muted, #regime, #au-signup { display: none; }   /* 회원가입은 로그인 창·잠금 칸에서 */
  .auth .btn, .au-me { padding: 4px 9px; }
  .au-me b { max-width: 5em; }
  .au-me .pill { display: none; }                         /* 휴대폰: 등급 표시는 내 계정 창에서 (가격 등락이 가려지지 않게) */
  .ticker { margin-left: auto; gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .ticker .px { font-size: 20px; }
  .ticker .chg { font-size: 13px; }
  .top .right { margin-left: 0; gap: 6px; flex-wrap: nowrap; }
  .live { padding: 6px; }
  .live > span:last-child { display: none; }
  .icon-btn { width: 30px; height: 30px; border-radius: 9px; }
  .tabs a { padding: 8px 11px 9px; font-size: 14px; }
  .m-only { display: flex; }
  main, footer { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  main { padding-top: 12px; }
  .summary, .summary.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .summary > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hm { display: none; }
  .mk-head { display: none; }
  .mrow, .mrow.crypto { grid-template-columns: 22px minmax(0, 1fr) auto; }   /* crypto도 (두 클래스 규칙이 이걸 덮어써서 이름 칸이 한 글자 폭이 됐음) */
  .mrow .ext { grid-column: 2 / -1; }
  .m-lab { display: inline; }
  .last3, .months { grid-template-columns: minmax(0, 1fr); }
  .ord { grid-template-columns: 62px minmax(0, 1fr) auto; grid-template-areas: "t k r" "t d d" "t a a"; }
  .mrows .hrow { display: none; }
  .mrows .prow { grid-template-columns: 70px minmax(0, 1fr) auto; grid-template-areas: "t s r" "t p c"; }
  .prow .q { display: none; }
  .prow .c { text-align: right; }
  .pos-body { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-box { height: 260px; }
  .chart-box.tall { height: 320px; }
  .panel { padding: 16px; border-radius: 18px; }
  .ev { grid-template-columns: 46px minmax(0, 1fr); }
  .ev .imp { display: none; }
  .ev .rx { grid-column: 2; text-align: left; }
  .ev-mini .row { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .ev-mini .name { white-space: normal; line-height: 1.4; }    /* 홈 일정 이름: 휴대폰에선 '…'로 자르지 않고 두 줄까지 */
  .mk .nm span { max-width: 220px; }
}
@media (max-width: 420px) {
  .brand > div { display: none; }                         /* 아주 좁은 화면: 로고(안에 '비트뱅')만, 가격 자리 확보 */
}