:root {
  --bg: #f7f7f5; --fg: #1d1d1f; --muted: #6b6b70; --card: #ffffff; --line: #dcdcdf;
  --accent: #2f5fd0; --up: #d1343a; --dn: #2361c9; --s20: #e08a00; --s60: #7a4fc4;
  --ok: #1f8a4c; --bad: #c62828; --grid: #ececef;
  --eq: #2f5fd0; --eqb: #8a8a92; --wbuy: #d1343a; --wsell: #2361c9; --sel: #e8eefc;
  --s5: #d6336c; --s120: #2b8a3e; --soft: #f0f3fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141417; --fg: #e8e8ea; --muted: #9a9aa2; --card: #1e1e22; --line: #34343a;
    --accent: #7aa2ff; --up: #ff5c63; --dn: #5c9dff; --s20: #ffb547; --s60: #b490ff;
    --ok: #4cc27f; --bad: #ff6b6b; --grid: #2a2a30;
    --eq: #7aa2ff; --eqb: #8a8a96; --wbuy: #ff5c63; --wsell: #5c9dff; --sel: #252c40;
    --s5: #ff7aa8; --s120: #5fd17a; --soft: #22283a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; }
header { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
h1 { font-size: 18px; margin: 0; }
#tabs { flex: 1; min-width: 0; }
#subtabs { flex-basis: 100%; min-width: 0; }
#subtabs button { font-size: 13px; padding: 3px 10px; }
h2 { font-size: 16px; margin: 8px 0; }
h3 { font-size: 15px; margin: 14px 0 6px; }
nav { display: flex; gap: 4px; overflow-x: auto; }
nav button { white-space: nowrap; }
button { font: inherit; padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--fg); cursor: pointer; }
button.on, form button { background: var(--accent); color: #fff; border-color: var(--accent); }
input, select, textarea { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); color: var(--fg); max-width: 100%; }
/* 2열: 가운데(시장 탭) · 오른쪽 줄(매매 알림 위 · 채팅 아래) */
main { padding: 8px 16px 24px; max-width: 1440px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
#center { min-width: 0; }
#side { min-width: 0; position: sticky; top: 64px; max-height: calc(100vh - 110px); overflow-y: auto; }
#bottom { display: none; }
.tab { display: none; }
.tab.on { display: block; }
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.hint { color: var(--muted); margin: 4px 0; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); }
td.l, th.l { text-align: left; }
tr.click { cursor: pointer; }
tr.click:hover { background: var(--grid); }
tr.void td { color: var(--muted); text-decoration: line-through; }
.pos { color: var(--up); } .neg { color: var(--dn); }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.card label { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0; align-items: center; }
.card label input, .card label select { width: 60%; }
textarea { width: 100%; margin: 4px 0; }
.big { font-size: 20px; font-weight: 600; margin: 4px 0; }
.msg { min-height: 1.5em; }
#ch-svg svg { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.flag { background: var(--card); border-left: 3px solid var(--bad); padding: 4px 8px; margin: 4px 0; }
.legend { color: var(--muted); }
.k { margin-left: 8px; }
.k.up { color: var(--up); } .k.dn { color: var(--dn); } .k.s20 { color: var(--s20); } .k.s60 { color: var(--s60); }
.k.ent { color: var(--accent); } .k.stp { color: var(--bad); } .k.tgt { color: var(--ok); }
.k.mb { color: var(--up); } .k.ms { color: var(--dn); }
svg .cu { fill: var(--up); stroke: var(--up); } svg .cd { fill: var(--dn); stroke: var(--dn); }
svg .s20 { fill: none; stroke: var(--s20); stroke-width: 1.5; }
svg .s60 { fill: none; stroke: var(--s60); stroke-width: 1.5; }
svg .gl { stroke: var(--grid); } svg .ax { fill: var(--muted); font-size: 11px; }
svg .ent { fill: var(--accent); } svg .stp { stroke: var(--bad); stroke-dasharray: 4 3; }
svg .tgt { stroke: var(--ok); stroke-dasharray: 4 3; }
svg .mb { fill: var(--up); stroke: var(--card); stroke-width: 1.5; }
svg .ms { fill: var(--dn); stroke: var(--card); stroke-width: 1.5; }
svg .jb { fill: var(--s20); stroke: var(--card); stroke-width: 1.5; }
svg .js { fill: var(--s60); stroke: var(--card); stroke-width: 1.5; }
.banner { background: var(--card); border-left: 4px solid var(--s20); padding: 6px 10px; font-weight: 600; }
.report { white-space: pre-wrap; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px; min-height: 2em; }
dialog { max-width: min(560px, calc(100vw - 32px)); background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; }
dialog label { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0; align-items: center; }
dialog label input, dialog label select { width: 60%; }
#j-detail dt { font-weight: 600; margin-top: 6px; } #j-detail dd { margin: 0 0 0 8px; }
ul { padding-left: 18px; }
li { margin: 4px 0; }
code { background: var(--card); padding: 1px 4px; border-radius: 4px; }
[hidden] { display: none !important; }
/* 채팅: PC는 오른쪽 접이식 칸, 좁은 화면은 전체 화면 패널 */
.badge { display: inline-block; min-width: 1.5em; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff;
  font-size: 12px; text-align: center; }
#chat { display: flex; flex-direction: column; height: min(560px, 62vh); margin-top: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.chat-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-head .state { margin-left: auto; font-size: 12px; color: var(--muted); }
.chat-head .state.ok { color: var(--ok); } .chat-head .state.bad { color: var(--bad); }
.notice { font-size: 12px; color: var(--muted); border-left: 3px solid var(--s20); padding: 2px 6px; margin: 6px 0; }
#chat-list { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--bg); }
#chat-more { display: block; margin: 4px auto; }
.cm { margin: 6px 0; max-width: 92%; }
.cm.mine { margin-left: auto; text-align: right; }
.cm-h { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cm.mine .cm-h { justify-content: flex-end; }
.cm-h b { color: var(--fg); }
.cm-b { display: inline-block; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.cm.mine .cm-b { border-color: var(--accent); }
.cm.fail .cm-b { border-color: var(--bad); }
.cm-del, .cm-h button { padding: 0 6px; font-size: 11px; }
.tag { font-size: 11px; color: #fff; background: var(--accent); border-radius: 4px; padding: 0 4px; }
#chat-jump { align-self: center; margin-top: -36px; position: relative; }
#chat-form { display: flex; gap: 6px; margin-top: 6px; }
#chat-input { flex: 1; min-width: 0; }
#chat-login { max-width: 480px; margin: 40px auto; padding: 0 16px; }
#chat-login label { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
/* 채팅만 보는 사람(초대 참여자·입장 전): 채팅 칸만 화면 전체 */
body.chat-only nav, body.chat-only #chat-toggle, body.chat-only #center, body.chat-only #alerts-box, body.chat-only #chat-off,
body.chat-only footer { display: none; }
body.chat-only main { display: block; }
body.chat-only #chat { position: fixed; left: 0; right: 0; top: 50px; bottom: 0; z-index: 5; height: auto; max-width: 760px;
  margin: 0 auto; border-radius: 0; }
footer { position: sticky; bottom: 0; text-align: center; padding: 8px 16px; background: var(--bg);
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ── 알고리즘 지켜보기(watch.js) ── */
.w-notes div + div { margin-top: 2px; font-weight: 500; }
.w-sum { margin: 8px 0 4px; }
svg.eq { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
svg .eq-me { fill: none; stroke: var(--eq); stroke-width: 2; }
svg .eq-b { fill: none; stroke: var(--eqb); stroke-width: 1.5; stroke-dasharray: 5 4; }
.k.eqm { color: var(--eq); } .k.eqb { color: var(--eqb); }
.k.wbk { color: var(--wbuy); } .k.wsk { color: var(--wsell); }
svg .wb { fill: var(--wbuy); stroke: var(--card); stroke-width: 2; }
svg .ws { fill: var(--wsell); stroke: var(--card); stroke-width: 2; }
svg .wl { fill: var(--fg); font-size: 11px; font-weight: 700; }
svg .ix { fill: none; stroke: var(--fg); stroke-width: 1.5; } svg .ma10 { fill: none; stroke: var(--s20); stroke-width: 1.5; stroke-dasharray: 5 3; }
svg .ix-in { fill: var(--up); font-size: 12px; } svg .ix-out { fill: var(--dn); font-size: 12px; }
.k.ixk { color: var(--fg); } .k.mak { color: var(--s20); } .k.ixi { color: var(--up); } .k.ixo { color: var(--dn); }
.w-tbl { max-height: 460px; overflow-y: auto; }
tr.sel, tr.sel:hover { background: var(--sel); }
.w-more { margin: 6px 0; }
.w-detail { margin-top: 12px; }
.w-detail h3 { margin-top: 0; }
.w-detail h4, #alerts-box h4 { margin: 8px 0 4px; font-size: 14px; }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; }
.skips summary { cursor: pointer; color: var(--muted); }
.news { list-style: none; padding: 0; }
.news li { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; overflow-wrap: anywhere; }
.news a { color: var(--accent); }
/* 매매 알림 */
.al-head { font-size: 15px; }
#alerts-box .bar { flex-wrap: nowrap; gap: 4px; }
#alerts-box .bar button { white-space: nowrap; flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }   /* 탭 4개가 칸 너비에 맞게 나눠 가짐 */
.alert { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 6px 8px; margin: 6px 0;
  background: var(--bg); overflow-wrap: anywhere; }
.alert p { margin: 2px 0 0; }
.alert.k-buy { border-left-color: var(--wbuy); } .alert.k-sell { border-left-color: var(--wsell); }
.alert.k-core, .alert.k-rebalance { border-left-color: var(--s20); }
.alert.none { border-left-color: var(--line); }
.alert.go { cursor: pointer; } .alert.go:hover, .alert.go:focus { background: var(--grid); }
.a-h { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
#alerts-box .report { font-size: 12px; overflow-x: auto; }
/* 쉬운 설명·나눔 버튼 */
.seg { gap: 0; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
details.help { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin: 8px 0; }
details.help summary { cursor: pointer; font-weight: 600; color: var(--accent); }
details.help ul { margin: 6px 0 2px; padding-left: 18px; line-height: 1.6; }
.kind { font-weight: 600; }
.kind.k-BUY { color: var(--up); } .kind.k-ADD { color: var(--s20); } .kind.k-SHORT_WATCH, .kind.k-EXIT { color: var(--dn); }
/* 차트: 이평선 4개 · 아래 칸(거래량·RSI·MACD) · TradingView */
.k.s5 { color: var(--s5); } .k.s120 { color: var(--s120); }
svg .s5 { fill: none; stroke: var(--s5); stroke-width: 1.2; }
svg .s120 { fill: none; stroke: var(--s120); stroke-width: 1.5; }
svg.panel { display: block; background: var(--card); border: 1px solid var(--line); border-top: 0; }
svg .pt { fill: var(--muted); font-size: 11px; font-weight: 600; }
svg .vol { opacity: .55; }
svg .rl { stroke: var(--line); stroke-dasharray: 3 3; }
svg .rsi { fill: none; stroke: var(--s60); stroke-width: 1.3; }
svg .hu { fill: var(--up); opacity: .6; } svg .hd { fill: var(--dn); opacity: .6; }
svg .mline { fill: none; stroke: var(--accent); stroke-width: 1.2; } svg .msig { fill: none; stroke: var(--s20); stroke-width: 1.2; }
#ch-tv { height: min(720px, 75vh); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
iframe.tv { width: 100%; height: 100%; border: 0; display: block; }
/* 지켜보기 맨 위 비교 */
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.vc { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; }
.vc span { color: var(--muted); font-size: 13px; } .vc b { font-size: 22px; } .vc small { color: var(--muted); }
.vc.vv.win { border-color: var(--ok); } .vc.vv.win b { color: var(--ok); font-size: 17px; }
.vc.vv.lose { border-color: var(--bad); } .vc.vv.lose b { color: var(--bad); font-size: 17px; }
/* 시장 흐름 카드(국내주식·코인 맨 위) */
.flow-card { background: var(--card); border: 2px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin: 6px 0 14px; }
.fc-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.fc-head b { font-size: 17px; }
.fc-main { border-radius: 8px; padding: 8px 12px; margin: 8px 0; display: flex; flex-direction: column; background: var(--soft); }
.fc-main span { font-size: 12px; color: var(--muted); } .fc-main b { font-size: 22px; } .fc-main small { color: var(--muted); }
.fc-main.in { border-left: 6px solid var(--up); } .fc-main.out { border-left: 6px solid var(--dn); }
.fc-dl { margin: 0 0 6px; } .fc-dl dt { font-size: 12px; color: var(--muted); margin-top: 4px; } .fc-dl dd { margin: 0; }
.fc-test > span { font-size: 13px; font-weight: 600; }
.fc-flips summary { cursor: pointer; color: var(--muted); }
.fp { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; }
.fp h4 { margin: 4px 0; } .fp h4 small { color: var(--muted); font-weight: 400; }
.fp .verdict .vc b { font-size: 18px; }
svg .fc-in { fill: var(--up); opacity: .08; }
.k.fck { color: var(--up); opacity: .35; }
/* 오늘 지시 카드 */
.live { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
.lv-todo { border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; display: flex; flex-direction: column; }
.lv-todo span { font-size: 12px; color: var(--muted); } .lv-todo b { font-size: 16px; }
.lv-todo.out { background: var(--soft); border-left: 4px solid var(--dn); } .lv-todo.in { background: var(--soft); border-left: 4px solid var(--up); }
.live dl { margin: 0; } .live dt { font-size: 12px; color: var(--muted); margin-top: 6px; } .live dd { margin: 0; overflow-wrap: anywhere; }
.live details summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 6px; }
/* 뉴스 같은 제목 묶음 */
.news .cnt { display: inline-block; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.news details.same summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.news details.same ul { margin: 2px 0; padding-left: 18px; }
/* 768px 미만: 1열 + 아래 버튼 줄 · 누른 칸만 보임(보기=가운데, 알림, 채팅) */
@media (max-width: 767px) {
  header { padding: 6px 12px; }
  h1 { font-size: 16px; flex-basis: 100%; }
  #chat-toggle { display: none; }
  main { display: block; padding: 8px 12px 80px; }
  #side { position: static; max-height: none; overflow: visible; }
  body[data-pane="view"] #side, body[data-pane="alerts"] #center, body[data-pane="chat"] #center,
  body[data-pane="alerts"] #chat, body[data-pane="alerts"] #chat-off, body[data-pane="chat"] #alerts-box { display: none; }
  body[data-pane="chat"] #chat { height: calc(100vh - 170px); margin-top: 0; }
  #bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; gap: 0; background: var(--card);
    border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  #bottom button { flex: 1; border: 0; border-radius: 6px; }
  footer { position: static; padding-bottom: 70px; }
  body.chat-only #bottom { display: none; }
  body.chat-only #side { display: block; }
  body.chat-only #chat { display: flex; height: auto; }
}
/* Market Lab — visual system */
:root {
  color-scheme: light;
  --bg:#f1f4f8; --fg:#18263b; --muted:#617187; --card:#fff; --line:#dce4ee;
  --accent:#245cce; --soft:#edf3fc; --grid:#edf2f8; --sel:#e6efff;
  --up:#c43e4d; --dn:#2364be; --ok:#16805c; --bad:#bd3948;
  --eq:#245cce; --eqb:#8895a7;
}
body { font-family:'Segoe UI','Malgun Gothic',sans-serif; font-size:14px; line-height:1.65; letter-spacing:-.015em; }
header { background:#10233f; color:#fff; padding:18px max(28px,calc((100vw - 1536px)/2)); gap:12px 36px; border-bottom:1px solid #253c59; box-shadow:0 3px 16px #10233f12; }
header h1 { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:750; letter-spacing:.04em; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:#3479ed; border:1px solid #689afa; border-radius:10px; font-size:15px; letter-spacing:-.06em; }
.brand-copy { display:flex; flex-direction:column; line-height:1.3; }
.brand-copy small { color:#a8bbd4; font-size:10px; letter-spacing:.12em; font-weight:500; margin-top:3px; }
header nav { gap:6px; }
header nav button,header #chat-toggle { background:transparent; color:#bdcce0; border-color:transparent; padding:9px 18px; border-radius:8px; }
header nav button:hover,header #chat-toggle:hover { color:#fff; background:#243b59; }
header nav button.on { background:#2d63c4; color:#fff; border-color:#477cdb; box-shadow:0 2px 6px #0002; }
#subtabs { border-top:1px solid #ffffff20; padding-top:12px; }
#subtabs button { padding:7px 12px; }
main { max-width:1592px; padding:28px; gap:24px; grid-template-columns:minmax(0,1fr) 320px; }
#side { top:104px; max-height:calc(100vh - 126px); scrollbar-width:thin; }
h2 { font-size:20px; letter-spacing:-.035em; margin:0 0 18px; }
h3 { font-size:16px; margin:24px 0 12px; letter-spacing:-.025em; }
h3 small { font-weight:400; font-size:12px; color:var(--muted); }
button { padding:8px 14px; border-radius:8px; font-weight:600; transition:background .15s,border-color .15s,box-shadow .15s; }
button:hover { background:var(--soft); border-color:#a9bbd7; }
button.on:hover,form button:hover { background:#194cae; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,a:focus-visible { outline:3px solid #72a7ff; outline-offset:3px; }
input,select,textarea { padding:8px 10px; border-radius:7px; min-height:38px; }
.bar { gap:12px; margin:14px 0; }
.bar label { color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:8px; }
.bar label select,.bar label input { color:var(--fg); font-size:13px; }
.card,.flow-card { border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 3px 12px #1d355706; }
.flow-card { margin:0 0 24px; border-top:3px solid var(--accent); }
.fc-head { gap:8px 12px; }
.fc-head b { font-size:19px; }
.fc-main { padding:18px 20px; margin:16px 0; border-radius:10px; gap:4px; }
.fc-main b { font-size:26px; letter-spacing:-.045em; }
.fc-main.in,.fc-main.out { border-left-width:3px; }
.fc-dl { display:grid; grid-template-columns:minmax(100px,.32fr) 1fr; gap:8px 20px; align-items:baseline; margin:16px 0; }
.fc-dl dt { margin:0; }
.fc-dl dd { font-size:13px; }
.fc-test { padding-top:16px; border-top:1px solid var(--line); }
.verdict { gap:12px; margin:18px 0; }
.vc { padding:18px; border-radius:12px; min-height:114px; box-shadow:0 2px 8px #1d355704; }
.vc span { font-size:12px; font-weight:600; }
.vc b { font-size:28px; font-weight:750; letter-spacing:-.045em; font-variant-numeric:tabular-nums; margin:5px 0; }
.vc small { font-size:11px; }
.vc.vv.win,.vc.vv.lose { border-color:var(--line); border-top:3px solid var(--ok); }
.vc.vv.lose { border-top-color:var(--bad); }
.w-sum { margin:18px 0 12px; font-size:13px; color:var(--muted); }
.w-eq,.w-ix { margin:14px 0; }
svg.eq { border-radius:12px; padding:10px; }
.scroll { border:1px solid var(--line); border-radius:10px; background:var(--card); }
.scroll:empty { display:none; }
.scroll table { border:0; }
th,td { padding:12px 14px; font-size:13px; font-variant-numeric:tabular-nums; }
th { background:#eaf0f7; color:#4a5e78; font-size:11px; letter-spacing:.025em; border-bottom:1px solid #ccd8e8; }
tbody tr:last-child td { border-bottom:0; }
tr.click:hover { background:#edf4ff; }
.w-tbl { max-height:520px; scrollbar-width:thin; }
details.help { padding:12px 16px; background:#eaf0f8; margin:16px 0; border:1px solid #d9e3f1; border-radius:10px; font-size:13px; }
details.help summary { font-size:12px; color:#496589; }
.hint { font-size:12px; line-height:1.8; }
.banner { padding:12px 16px; border-left-width:3px; border-radius:8px; font-size:13px; }
.live { padding:14px; border-radius:10px; background:#f7f9fc; }
.lv-todo { padding:12px; border-left-width:3px; }
.live dt { margin-top:12px; }
.live dd { font-size:13px; }
#alerts-box h3:first-child { margin-top:0; }
#alerts-box { padding:18px; }
.alert { padding:12px; margin:10px 0; border-radius:9px; background:#f7f9fc; font-size:12px; border-left-width:3px; }
.alert p { margin-top:6px; }
.a-h { gap:6px; }
#chat { padding:16px; border-radius:12px; }
.news li { padding:16px 18px; margin-bottom:10px; border-radius:10px; }
.news a { text-decoration:none; font-weight:600; }
.news a:hover { text-decoration:underline; }
.report { padding:14px; border-radius:10px; line-height:1.8; }
footer { position:static; background:transparent; border-top:0; padding:24px; font-size:11px; color:#728097; }
@media(min-width:1600px) { main { grid-template-columns:minmax(0,1fr) 344px; gap:28px; } }
@media(min-width:768px) and (max-width:1100px) { main { padding:20px; gap:16px; grid-template-columns:minmax(0,1fr) 280px; } header { padding:16px 20px; gap:12px 20px; } header nav button { padding:8px 12px; } .card,.flow-card { padding:16px; } }
@media(max-width:767px) {
 header { padding:14px 16px 10px; gap:12px; }
 header h1 { font-size:18px; }
 .brand-mark { width:32px; height:32px; }
 #tabs { flex-basis:100%; }
 header nav button { flex:1; padding:9px 12px; font-size:13px; }
 #subtabs button { flex:none; }
 main { display:block; padding:18px 14px 88px; }
 #side { max-height:none; }
 .card,.flow-card { padding:16px; border-radius:12px; }
 .fc-main b { font-size:23px; }
 .fc-dl { grid-template-columns:1fr; gap:3px; }
 .fc-dl dd { margin-bottom:9px; }
 .verdict { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .vc { padding:14px; min-height:108px; }
 .vc b { font-size:24px; }
 th,td { padding:10px 12px; }
 #bottom { box-shadow:0 -4px 20px #10233f0a; padding-top:10px; gap:6px; }
 #bottom button { padding:10px; }
 footer { padding-bottom:88px; }
 body.chat-only #chat { top:80px; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }
/* Responsive workspace: a persistent conversation beside the market. */
:root { --header-h:80px; --view-h:100dvh; }
header { z-index:10; }
#center,#side,#chat-list { min-width:0; }
#chat-list { min-height:0; overscroll-behavior:contain; overflow-wrap:anywhere; }
.chat-head { flex-shrink:0; }
#chat-form { flex-shrink:0; align-items:center; padding:4px 2px; }   /* 입력 칸 테두리 빛(포커스)이 아래 방장 기능과 안 겹치게 */
#chat-form button { white-space:nowrap; }
#chat-err:empty { display:none; }
#chat-err { margin:4px 0 0; min-height:0; font-size:12px; }
#chat-notice:empty { display:none; }
#chat-input { width:0; font-size:16px; }
@media(min-width:768px) {
 #side { top:calc(var(--header-h) + 16px); max-height:calc(100dvh - var(--header-h) - 32px); }
 body.chat-open:not(.chat-only) #side { display:flex; flex-direction:column; gap:16px; height:calc(100dvh - var(--header-h) - 32px); overflow:hidden; }
 body.chat-open:not(.chat-only) #chat { order:-1; flex:1 1 62%; min-height:240px; height:auto; margin:0; }
 body.chat-open:not(.chat-only) #alerts-box { flex:1 1 38%; min-height:120px; overflow-y:auto; overscroll-behavior:contain; }
 body.chat-open:not(.chat-only) #chat-list { flex:1 1 0; }
 #chat-toggle.on { color:#fff; background:#2d63c4; border-color:#477cdb; }
 body.chat-only #chat { top:var(--header-h); height:calc(100dvh - var(--header-h)); }
}
@media(min-width:768px) and (max-width:1100px) {
 main { grid-template-columns:minmax(0,1fr) 300px; padding:16px; gap:16px; }
 header { gap:10px 18px; padding:12px 16px; }
 header nav button { padding:9px 12px; }
 #chat { padding:12px; }
 .chat-head { gap:4px; font-size:12px; }
 .chat-head button { padding:6px 8px; }
 .verdict { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .vc { min-width:0; padding:12px; }
 .fc-dl { grid-template-columns:1fr; gap:3px; }
 .fc-dl dd { margin-bottom:8px; }
 .bar { gap:8px; }
}
@media(max-width:767px) {
 header { position:sticky; top:0; }
 header h1 { flex-basis:auto; }
 #tabs { overflow-x:auto; }
 #subtabs { overflow-x:auto; flex-wrap:nowrap; }
 #bottom { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
 #bottom button,button,input,select { min-height:44px; }
 input,select,textarea { font-size:16px; }
 .grid { grid-template-columns:minmax(0,1fr); }
 .card label { flex-wrap:wrap; }
 .card label input,.card label select { flex:1 1 160px; }
 .bar label { flex-wrap:wrap; }
 body[data-pane="chat"] { overflow:hidden; }
 body[data-pane="chat"] #chat { position:fixed; top:var(--header-h); left:0; right:0; width:auto; height:calc(var(--view-h) - var(--header-h) - 76px - env(safe-area-inset-bottom)); margin:0; border-radius:0; padding:12px; }
 body[data-pane="chat"] footer { display:none; }
 body.chat-only #chat { top:var(--header-h); height:calc(var(--view-h) - var(--header-h)); bottom:auto; }
 body.chat-only { overflow:hidden; }
 .chat-head { font-size:12px; }
 .chat-head button { padding:6px 10px; }
 .vc b { overflow-wrap:anywhere; }
 #ch-svg svg,svg.eq { max-width:100%; }
 dialog { max-height:calc(100dvh - 32px); overflow:auto; }
}
@media(max-width:380px) {
 main { padding-left:10px; padding-right:10px; }
 .card,.flow-card { padding:12px; }
 header nav button { padding:8px; font-size:12px; }
 .fc-main b { font-size:20px; }
}
@media(min-width:768px) and (max-height:600px) {
 body.chat-open:not(.chat-only) #chat { min-height:170px; }
 body.chat-open:not(.chat-only) #alerts-box { min-height:80px; }
 #chat-notice { max-height:40px; overflow:auto; }
}
/* 방장: 만든 입장 주소 + 복사 */
.ca-row { display: flex; gap: 4px; margin: 6px 0 2px; }
.ca-row input { flex: 1; min-width: 0; font-size: 15px; padding: 8px 10px; }
/* 초대 링크 탭(방장만): 넓은 화면은 2칸, 폰은 1칸 */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.inv-grid h3 { margin: 0 0 6px; font-size: 16px; }
.inv-list { list-style: none; padding: 0; margin: 0; }
.inv-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.inv-list li:last-child { border-bottom: 0; }
.inv-list li button { padding: 2px 10px; font-size: 13px; }
#ca-msg:empty { display: none; }

/* 단타 매매(10/31): 비교 표의 지금 보기 줄 · 익절×손절 조합표 칸 */
.w-cmp tr.sel td { font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.w-hm th, .w-hm td { text-align: center; padding: 4px 6px; white-space: nowrap; }
.w-hm td small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.w-short .bar b, .w-short2 h3 small { color: var(--muted); }
#ca-invite { font-weight: 600; }
/* 신호 표: 한 화면에 들어가게 좁게 */
#sig-table th, #sig-table td { padding: 7px 7px; }
#sig-table td button { padding: 2px 8px; font-size: 12px; }
#sig-table td:nth-child(9) { white-space: normal; min-width: 84px; max-width: 120px; }   /* 근거: 길면 두 줄 */
#j-ratio { gap: 6px; }
#j-ratio button { padding: 4px 12px; }
#j-ratio button:not(.on) { background: var(--soft); color: var(--accent); border-color: var(--line); }   /* 고른 비율만 진하게 */
#cl-go { font-size: 16px; padding: 12px 20px; margin: 12px 0; font-weight: 600; }
/* 앞으로 비교 카드 */
.fwd-card { margin: 12px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.fwd-card:empty { display: none; }
.fwd-card h3 { margin: 0 0 8px; font-size: 16px; }
.fwd-card h3 small { font-weight: 400; color: var(--muted); font-size: 12px; }
.fwd-card tr.best td { font-weight: 700; }
#j-buy-book button:not(.on), #j-book button:not(.on) { background: var(--soft); color: var(--accent); border-color: var(--line); }   /* 고른 장부만 진하게 */
svg .eq-f { fill: none; stroke: var(--s20); stroke-width: 1.3; } svg .eq-r { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.k.eq-fk { color: var(--s20); } .k.eq-rk { color: var(--muted); }
.acct-box { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.acct-box p { margin: 2px 0; }

/* 바이낸스 */
#binance .card { margin: 10px 0; }
svg .kz { stroke: var(--muted); stroke-width: 1; } svg .km { stroke: var(--ok); stroke-dasharray: 2 3; }
.k.kmk { color: var(--ok); }
.bn-scroll { max-height: 60vh; overflow-y: auto; }