/* 화면의 모든 스타일. 이 파일 하나만 고치면 디자인이 바뀝니다.

   `index.html` 에서 떼어낸 이유는 하나입니다 — 디자인과 로직이 한 파일에
   같이 있으면 둘을 동시에 만질 수 없습니다. 여기는 색·타이포·간격만,
   저기는 마크업과 동작만.

   ── 2026-09 · 토스식으로 다시 그림 ─────────────────────────────────────
   흰 바탕, 큰 글자, 테두리 대신 여백. 강조색은 파랑 하나. 픽셀 서체와
   금색 판은 방(room)의 아바타에만 흔적으로 남기고 나머지는 전부 읽는
   글입니다. 옛 이름(--gold, --plate …)은 그대로 두고 값만 바꿨습니다 —
   chart.js 와 스크립트가 그 이름으로 읽습니다.

   ── 고칠 때 지켜야 하는 것 ────────────────────────────────────────────

   1. **방향과 상태는 다른 색입니다.** `--up`/`--down` 은 등락 전용이고
      한국식입니다(오르면 빨강, 내리면 파랑). 성공·경고·실패는
      `--ok`/`--warn`/`--bad` 로 따로 있습니다. 겸용하면 한국식으로 바꾸는
      순간 "저장 완료" 가 빨강이 되고 "오류" 가 파랑이 됩니다.

   2. **상태 class 는 스크립트가 켜고 끕니다.** 이름을 바꾸면 화면이
      조용히 멈춥니다: running, live, anon, showauth, nodesk, idle, talking,
      up, down, demoing, touring, hidden, on, active, resolved.

   3. **`--header-h` 는 스크립트가 잽니다.** 여기서 값을 주지 마세요.

   4. 새 토큰을 쓰기 전에 `:root` 에 정의하세요. 정의 없는 `var()` 는
      아무 오류 없이 그 속성만 사라집니다.

   5. `tests/test_ui_readability.py` 가 이 파일을 **파싱해서** 닿는 높이·
      대비·모바일 머리말 격자를 잽니다. 900px 이하 규칙은 맨 아래
      `@media(max-width:900px){` 블록 **하나** 에 모아 둡니다 — 다른
      검사가 그 블록을 마지막 것으로 찾습니다.
*/

:root{
  /* 바탕·면. 카드는 흰색, 화면 바탕은 아주 옅은 회색 — 테두리 없이도
     카드가 구분됩니다. */
  --bg:#f2f4f6; --panel:#ffffff; --plate:#f9fafb; --panel2:#ffffff;
  --line:#e5e8eb; --rule:#e5e8eb;
  /* 글자. muted 는 흰 바탕에서 4.5:1 을 지킵니다 — 작은 설명글도 이 색. */
  --ink:#191f28; --muted:#6b7684; --dim:#4e5968; --faint:#7d8794; --white:#fff;
  /* 강조는 파랑 하나. 옛 이름 --gold 도 이제 이 파랑입니다. */
  --blue:#3182f6; --blue-dark:#1b64da; --blue-soft:#e8f3ff;
  /* 두 번째 강조색(호박). 차트의 진입가·지정가선과 결정 카드의 "축소" 가
     쓰며, 파랑(매도·하락)과 같은 값이면 그 선들이 전부 한 색이 됩니다. */
  --gold:#d97b06; --gold-dim:#b86e00;
  /* 실거래 표식. 바탕색 글자가 이 위에서 4.5:1 이어야 합니다. */
  --red:#cc2f3b;
  /* 방향(등락) — 한국식: 오르면 빨강, 내리면 파랑. 여기 말고는 쓰지 않습니다. */
  --up:#f04452; --down:#3182f6; --sang:#f04452; --ha:#3182f6;
  --up-soft:#fdecee; --down-soft:#e8f3ff;
  /* 상태(성공·경고·실패) — 방향과 별개입니다. */
  --ok:#0a7d52; --ok-soft:#e6f6ee; --warn:#b45f06; --warn-soft:#fff4e5;
  --bad:#c62f3b; --bad-soft:#fdecee;
  /* 경계. 입력칸 테두리는 '여기부터 여기까지가 칸이다' 라는 정보라
     WCAG 1.4.11 의 3:1 을 지킵니다. */
  --edge:#6b7684; --field:#7d8794; --focus:#3182f6;
  /* chart.js 가 읽는 이름들 — 캔버스와 그 주변이 같은 색을 씁니다. */
  --bone:#191f28; --void:#ffffff; --shadow:rgba(25,31,40,.06);
  /* 방 바닥. 나무·잔디는 이제 아주 옅은 색조만 남습니다. */
  --wood:#faf6ef; --wood-dark:#f1ebe0; --turf:#eef7f2; --turf-dark:#e1f0e7;
  /* 서체. 본문·숫자·제목 전부 같은 산세리프 — 픽셀 서체는 없습니다. */
  --kr:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
       "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --px:var(--kr);
  --mono:var(--kr);
  --r:16px; --r-lg:20px; --r-sm:10px;
}

/* ── 바탕 ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--ink)}
html{scrollbar-color:#c9ced4 transparent}
body{font-family:var(--kr);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
     overflow-x:hidden;word-break:keep-all}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--blue-soft);color:var(--ink)}
/* 아바타만 픽셀 그대로. 차트 캔버스는 매끈하게. */
.avatar svg{image-rendering:pixelated;shape-rendering:crispEdges}
.px{font-family:var(--px);font-weight:700;letter-spacing:-.01em}
.brand-short{display:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:12px;top:8px;z-index:1000;min-height:44px;padding:10px 16px;
  background:var(--blue);color:#fff;border:0;border-radius:12px;font-weight:700;
  transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
/* 키보드로 오는 사람에게는 어디에 있는지가 유일한 단서입니다. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .gold{color:var(--blue-dark)}
.dim{color:var(--muted)}
.scroll{overflow:auto;max-height:280px;scrollbar-width:thin}

/* ── 연동 검증 결과 ────────────────────────────────────────────────── */
.vstep{font-size:14px;line-height:1.7;color:var(--dim)}
.vstep.ok{color:var(--ok)} .vstep.bad{color:var(--bad)}
.vsum{margin-top:6px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.vsum.ok{color:var(--ok)} .vsum.bad{color:var(--bad)} .vsum.warn{color:var(--warn)}
/* 계좌마다 한 덩이. 둘이 붙어 있으면 어느 줄이 어느 계좌인지 읽다가 놓칩니다. */
.acct-one + .acct-one{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.acct-title{margin:0 0 8px;font-size:15px;font-weight:700}
/* 심의 카드의 종목 이름 — 누르면 차트가 그리로 갑니다. 버튼처럼
   보이면 카드가 시끄러워지므로 글자 그대로 두되 눌린다는 것만 알립니다. */
.linky{all:unset;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line)}
.linky:hover,.linky:focus-visible{text-decoration-color:currentColor}
.linky:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 저장된 값을 지우는 버튼. 칸 옆에 조용히 붙습니다 — 평소에는 쓰지
   않는 길이고, 눈에 띄면 실수로 눌립니다. */
.fld .forget{float:right;font-size:13px;color:var(--muted)}
.fld .forget:hover,.fld .forget:focus-visible{color:var(--bad)}
[data-vres]{display:block;max-width:100%}

/* ── 종목 찾기 ─────────────────────────────────────────────────────── */
.lkres{display:grid;gap:8px;margin-top:10px}
.lkrow{display:flex;gap:10px;align-items:center;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);padding:10px 14px;text-align:left;
  min-height:48px;width:100%}
.lkrow:hover{border-color:var(--blue)}
.lkrow .code{font-size:13px;font-weight:700;color:var(--blue-dark);flex:0 0 auto}
.lkrow .nm{font-size:15px;color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lkrow .px{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.lkrow .src{font-size:12px;color:var(--faint);flex:0 0 auto}

/* ── 개별 심의 결과 ────────────────────────────────────────────────── */
.askout{margin-top:12px;border-radius:14px;background:var(--bg);padding:16px}
.askout .act{font-size:20px;font-weight:800;color:var(--ink);
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.askout .act .cv{font-size:13px;font-weight:500;color:var(--muted)}
.askout .why{margin-top:10px;font-size:15px;line-height:1.75;color:var(--dim);
  overflow-wrap:anywhere}
.askout .kv{margin-top:12px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.askout .kv div{background:var(--panel);border-radius:10px;padding:8px 10px}
.askout .kv b{display:block;font-size:12px;color:var(--muted);font-weight:500}
.askout .kv span{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.askout .meter{margin-top:10px;font-size:12px;color:var(--faint)}
.askout.veto{background:var(--bad-soft)}
.askout.veto .act{color:var(--red)}

/* ── 화면 나누기 ──────────────────────────────────────────────────────
   매매 / 내 계좌 / 마이페이지. 하는 일이 다르면 화면도 다릅니다. */
.page{display:none}
.page[hidden]{display:none}
body[data-page="trade"] #pageTrade,
body[data-page="account"] #pageAccount,
body[data-page="me"] #pageMe{display:block}
body[data-page="trade"] #pageTrade{display:flex;flex-direction:column}
body[data-page="me"] .deck-r,
body[data-page="account"] .deck-r{display:none}
body[data-page="me"] .viewtabs,
body[data-page="account"] .viewtabs{display:none}

/* 페이지 탭 — 데스크톱은 머리말의 분절 버튼, 휴대폰은 아래 고정 탭바. */
.pagetabs{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--bg);flex:0 0 auto}
.pagetabs button{font-family:var(--kr);font-size:15px;font-weight:600;min-height:44px;
  padding:0 16px;background:transparent;border:0;border-radius:9px;color:var(--muted)}
.pagetabs button[aria-current="page"]{color:var(--ink);background:var(--panel);
  box-shadow:0 1px 3px rgba(25,31,40,.10)}

/* 잔고 미니 표시 — 어느 화면에 있든 보입니다. */
.mini{display:inline-flex;gap:8px;align-items:baseline;flex:0 0 auto;
  padding:6px 12px;border-radius:999px;background:var(--bg)}
.mini .dim{font-size:12px}
.mini b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.mini i{font-style:normal;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.mini i.up{color:var(--up)} .mini i.down{color:var(--down)}
.since{font-size:12px;color:var(--faint);flex:0 0 auto;white-space:nowrap}

.backrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:4px 0 14px}
.backrow .dim{font-size:13px;line-height:1.6}

/* 자동매매가 돌기 시작하면 설정 부분을 접습니다. */
body.running #runner .stbrief,
body.running #runner .runbar select{display:none}
#runner .runsum{display:none;font-size:14px;color:var(--dim);line-height:1.7;margin-top:10px}
body.running #runner .runsum{display:block}

/* ── 전략 설명 ─────────────────────────────────────────────────────── */
.stbrief{margin-top:12px;border-radius:14px;background:var(--bg);padding:16px}
.stmeta{font-size:13px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stmeta .tag{border-radius:999px;padding:3px 10px;background:var(--panel);color:var(--ink);font-weight:600}
.stmeta .tag.live{background:var(--bad-soft);color:var(--red)}
.stmeta .tag.delayed{background:var(--warn-soft);color:var(--warn)}
.stlist{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stitem{display:block;padding:10px 12px;border-left:3px solid var(--blue);
  border-radius:8px;background:var(--panel)}
.stitem b{display:block;margin-bottom:4px;font-size:14px;color:var(--ink);font-weight:700}
.stitem span{display:block;font-size:14px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.stitem.guard{border-left-color:var(--warn)}
.stitem.guard b{color:var(--warn)}
.stmore{margin-top:10px}
.stmore summary{font-size:14px;font-weight:600;color:var(--blue-dark);
  cursor:pointer;min-height:44px;display:flex;align-items:center}
.stmore .r{display:flex;gap:8px;padding:9px 0;border-top:1px solid var(--rule);font-size:14px}
.stmore .r b{flex:0 0 118px;color:var(--muted);font-weight:500}
.stmore .r span{color:var(--ink);line-height:1.6}

/* ── 기간별 실현손익 ───────────────────────────────────────────────── */
#pnlMode{background:var(--panel2);color:var(--ink);border:1px solid var(--field);
  border-radius:10px;padding:8px 12px;font-size:14px;min-height:44px}
.pnlgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pnlcard{border-radius:14px;background:var(--bg);padding:14px 16px;min-width:0}
.pnlcard .lab{font-size:13px;color:var(--muted)}
.pnlcard .v{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pnlcard .sub{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.5}
.pnlcard.plus .v{color:var(--up)}
.pnlcard.minus .v{color:var(--down)}

/* ── 매매 기록 ─────────────────────────────────────────────────────── */
table.tradelog{font-size:14px}
table.tradelog td{padding:10px 6px;border-bottom:1px solid var(--rule);vertical-align:baseline}
table.tradelog .tl-sym{font-weight:600;white-space:nowrap}
table.tradelog .tl-side{font-size:13px;white-space:nowrap}
table.tradelog .tl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tradelog .tl-when{color:var(--faint);font-size:12px;white-space:nowrap}
table.tradelog .tl-why{color:var(--muted);font-size:13px;max-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 틀 ────────────────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px 80px}
#mainContent{scroll-margin-top:calc(var(--header-h,72px) + 16px)}
footer{max-width:1200px;margin:0 auto;padding:24px;color:var(--faint);font-size:13px;line-height:1.7}

/* 머리말. 데스크톱에서는 붙어 다니고, 휴대폰에서는 위로 흘러가고 탭이 아래에
   고정됩니다. */
header.top{position:sticky;top:0;z-index:40;padding:10px 24px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.top-in{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:10px auto auto minmax(0,1fr) auto auto auto auto;
  grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:6px;overflow:visible}
.top-in>*{min-width:0}
.top-in>.conn{grid-column:1;grid-row:1}
/* 로고는 홈으로 가는 문입니다. */
.brand{font-family:var(--kr);color:var(--ink);font-size:18px;font-weight:800;
  letter-spacing:-.02em;white-space:nowrap;min-height:44px;display:inline-flex;
  align-items:center;gap:6px;background:none;border:0;padding:0}
.brand:hover{color:var(--blue-dark)}
.brand i{font-style:normal;color:var(--blue);font-size:12px}
.brand i:last-child{display:none}
.top-in>.brand{grid-column:2;grid-row:1}
.top-in>.mode{grid-column:3;grid-row:1}
.top-in>.mini{grid-column:4;grid-row:1;justify-self:start}
.top-in>.mini[hidden]{display:none}
.top-in>.grow{display:none}
.top-in>.pagetabs{grid-column:5;grid-row:1;justify-self:end}
/* 보조 도구(설정·데모·안내). 데스크톱은 머리말에 그대로 — 첫 방문 안내가
   ⚙설정을 가리키므로 접어 두면 링이 빈자리에 그려집니다. 휴대폰은 아래
   900px 블록에서 버튼 하나 뒤로 접습니다. */
.headtools,.headtools-menu{display:contents}
.headtools>#headToolsToggle{display:none;min-height:44px;align-items:center;
  justify-content:center;padding:6px 12px;font-size:14px;white-space:nowrap}
.top-in .headtools-menu>.btn{background:transparent;color:var(--muted);font-size:14px;
  padding:6px 10px;white-space:nowrap}
.top-in .headtools-menu>.btn:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.top-in #setupBtn{grid-column:6;grid-row:1}
.top-in #demoBtn{grid-column:7;grid-row:1}
.top-in #tourBtn{grid-column:8;grid-row:1}
.top-in>#strategy{grid-column:2/5;grid-row:2;justify-self:start;max-width:100%}
.top-in>#serverSince{grid-column:5/9;grid-row:2;justify-self:end}
.grow{flex:1}
/* 현재 전략 이름 — 조용한 알약. (#authCard 의 .tabs .tab 은 아래에서 따로.) */
.tab{font-size:13px;color:var(--muted);background:var(--bg);border:0;border-radius:999px;
  padding:6px 12px;min-height:36px;display:inline-flex;align-items:center;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab.on{color:var(--dim)}
.conn{width:10px;height:10px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.conn.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.conn.off{background:var(--red)}

.needkey{border-radius:14px;background:var(--warn-soft);padding:14px 16px;margin:10px 0;
  font-size:14px;line-height:1.65;color:var(--ink)}
.needkey b{color:var(--warn)}
.needkey .alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.needkey .alt button{font-size:14px;font-weight:600;padding:8px 14px;min-height:44px;
  border:0;border-radius:10px;background:var(--panel);color:var(--warn)}
.needkey .alt button:hover{background:var(--warn);color:#fff}
.needkey .none{color:var(--muted);margin-top:7px;display:block}

/* 운영 모드 표식. 실거래는 화면이 통째로 그 사실을 말합니다. */
.mode{font-size:12px;font-weight:700;padding:4px 10px;min-height:32px;display:inline-flex;
  align-items:center;border-radius:999px;background:var(--bad-soft);color:var(--red);
  white-space:nowrap;letter-spacing:0}
.mode.dry{background:var(--warn-soft);color:var(--warn)}
.mode.backtest{background:var(--bg);color:var(--muted)}
body.live .mode{background:var(--red);color:var(--bg);animation:livepulse 2.4s ease-in-out infinite}
/* 표식을 흐리면 글자 대비도 무너집니다. 바깥 halo 만 움직입니다. */
@keyframes livepulse{
  0%,100%{box-shadow:0 0 0 0 rgba(204,47,59,.15)}
  50%{box-shadow:0 0 0 5px rgba(204,47,59,.35)}
}
body.live .top{border-bottom:2px solid var(--red)}
.livebar{display:none}
body.live .livebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-radius:14px;background:var(--bad-soft);color:var(--ink);
  padding:12px 16px;margin:0 0 12px;font-size:14px}
.livebar b{color:var(--red)}
@media (prefers-reduced-motion:reduce){body.live .mode{animation:none}}

/* ── 카드 ──────────────────────────────────────────────────────────── */
.panel{position:relative;background:var(--panel);border:0;border-radius:var(--r-lg);
  margin-top:16px;box-shadow:0 1px 2px rgba(25,31,40,.04),0 0 0 1px rgba(25,31,40,.03)}
.plate{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:18px 20px 0;
  border:0;background:transparent;color:var(--ink);font-family:var(--kr);
  font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
/* 장식 마름모 — 이제 그리지 않습니다. */
.plate .d{display:none;speak:none}
.mode .d{speak:none}
.body{padding:14px 20px 20px}

/* ── 자산 요약(HUD) ────────────────────────────────────────────────── */
.hud{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);gap:0}
.hud-l{padding:20px 24px 24px;border-right:1px solid var(--rule)}
.sym{font-size:13px;color:var(--muted)}
.big{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  margin:4px 0 2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.chg{font-size:15px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;margin-top:16px}
.kpi .k{font-size:13px;color:var(--muted)}
.kpi .v{font-size:18px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.hud-r{padding:16px 20px;min-height:190px}
#equity{width:100%;height:180px;display:block}

/* ── 표 ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-family:var(--kr);font-size:14px}
th{color:var(--muted);text-align:left;font-weight:600;padding:10px 8px;
  border-bottom:1px solid var(--line);font-size:13px}
td{padding:12px 8px;border-bottom:1px solid var(--rule);white-space:nowrap;
  font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

/* ── 방 ────────────────────────────────────────────────────────────── */
#rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  align-items:start;margin-top:16px;scroll-margin-top:calc(var(--header-h,72px) + 18px)}
#rooms>.panel{min-width:0;margin-top:0}
#rooms>.panel:first-child,#rooms>.panel:last-child{grid-column:1/-1}
.room{position:relative;height:auto;padding:58px 16px 16px;overflow:hidden;
  overflow:clip;overflow-clip-margin:36px;border-radius:var(--r-lg)}
.room.wood{background:var(--wood)}
.room.turf{background:var(--turf)}
.room .plate{position:absolute;top:0;left:0;margin:0}
.round{position:absolute;top:16px;right:20px;font-size:13px;font-weight:600;
  background:var(--panel);border-radius:999px;padding:4px 12px;color:var(--dim)}

.seats{display:grid;grid-template-columns:repeat(4,minmax(68px,1fr));gap:4px;align-items:end}
.seat{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;
  padding-top:116px}
/* 좌석 이름은 장식 밀도 유지를 위해 11px 그대로 둡니다. */
.seat .seatname{font-size:11px;color:var(--dim);background:var(--panel);
  border:1px solid var(--line);padding:2px 7px;border-radius:6px;white-space:nowrap}
.seat .role{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;line-height:1.45}
.seat.idle{opacity:.55;filter:grayscale(.6)}
.seat.active .avatar{animation:bob .55s steps(2) infinite}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.avatar{width:56px;height:64px}
.desk{width:88px;height:10px;background:var(--line);border-radius:3px;margin-top:-4px}

/* 말풍선 */
.bubble{position:absolute;bottom:calc(100% - 80px);left:50%;transform:translateX(-50%);
  width:186px;max-width:min(186px,calc(100vw - 44px));background:var(--panel);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);
  font-size:13px;line-height:1.5;padding:8px 10px;z-index:5;overflow-wrap:anywhere;
  box-shadow:0 6px 20px rgba(25,31,40,.12);opacity:0;pointer-events:none;transition:opacity .12s}
.seat.talking .bubble{opacity:1}
.seats .seat:first-child .bubble,.duel .seat:first-child .bubble{left:0;transform:none}
.seats .seat:last-child .bubble,.duel .seat:last-child .bubble{left:auto;right:0;transform:none}
.seats .seat:first-child .bubble:after{left:34px}
.seats .seat:last-child .bubble:after{left:auto;right:30px}
.bubble:after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  width:0;height:0;border:6px solid transparent;border-top-color:var(--panel)}
.bubble b{display:block;font-size:12px;font-weight:700;margin-bottom:3px}
.bubble.bull b{color:var(--up)} .bubble.bear b{color:var(--down)} .bubble.neutral b{color:var(--muted)}
/* 4열 좌석은 각 줄의 첫·마지막 말풍선을 방 안쪽으로 당깁니다. */
.seats .seat:nth-child(4n+1) .bubble{left:0;right:auto;transform:none}
.seats .seat:nth-child(4n) .bubble{left:auto;right:0;transform:none}
.seats .seat:nth-child(4n+1) .bubble:after{left:34px;right:auto}
.seats .seat:nth-child(4n) .bubble:after{left:auto;right:30px}
@media(min-width:901px){
  #rooms>.panel:first-child .seats{grid-template-columns:repeat(8,minmax(68px,1fr))}
  #rooms>.panel:first-child .seats .seat .bubble{left:50%;right:auto;transform:translateX(-50%)}
  #rooms>.panel:first-child .seats .seat .bubble:after{left:50%;right:auto;margin-left:-6px}
  #rooms>.panel:first-child .seats .seat:nth-child(8n+1) .bubble{left:0;right:auto;transform:none}
  #rooms>.panel:first-child .seats .seat:nth-child(8n) .bubble{left:auto;right:0;transform:none}
  #rooms>.panel:first-child .seats .seat:nth-child(8n+1) .bubble:after{left:34px;right:auto;margin-left:-6px}
  #rooms>.panel:first-child .seats .seat:nth-child(8n) .bubble:after{left:auto;right:30px;margin-left:-6px}
}

/* 대사판 — 방마다 아래에 하나. 큰 글씨로, 다음 사람이 말하기 전까지 남습니다. */
.saybox{margin-top:14px;background:var(--panel);border-radius:14px;padding:14px 16px;
  min-height:86px;position:relative}
.saybox .who{display:block;font-size:12px;font-weight:700;color:var(--blue-dark);margin-bottom:6px}
.saybox .line{margin:0;font-size:15px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.saybox.bull .who{color:var(--up)} .saybox.bear .who{color:var(--down)}
.saybox.idle .line{color:var(--muted)}
.saybox.bad{box-shadow:inset 0 0 0 1px var(--bad)}
.saybox.bad .who{color:var(--bad)}
.saybox.bad .line{color:var(--ink)}
.saybox .line:after{content:"";display:inline-block;width:6px;height:14px;
  margin-left:4px;background:var(--blue);border-radius:2px;vertical-align:-2px;
  animation:blink .9s steps(2) infinite}
.saybox.idle .line:after{display:none}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  /* 움직임을 줄여 달라고 한 사람에게는 전부 멈춥니다. */
  .saybox .line:after,.tape-in,.seat.active .avatar{animation:none}
  .bubble,.btn,.cockpit-step{transition:none}
  *{scroll-behavior:auto!important}
}

/* 비어 있는 데스크 위에 서는 줄 — "일단 어떻게 도는지 보고 싶다". */
.trynow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:14px;
  background:var(--blue-soft);padding:14px 16px;margin:0 0 12px;font-size:14px;color:var(--ink)}
.trynow button{font-size:14px;font-weight:700;padding:8px 16px;min-height:44px;
  border:0;border-radius:10px;background:var(--blue);color:#fff}
.trynow button:hover:not(:disabled){background:var(--blue-dark)}
.trynow button:disabled{opacity:.5;cursor:default}
.playbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;
  margin:0 0 10px;border-radius:12px;background:var(--bg);font-size:13px;color:var(--muted)}
.playbar .grow{flex:1 0 6px}
.playbar button{font-size:13px;font-weight:600;padding:6px 12px;min-width:44px;min-height:44px;
  border:0;border-radius:10px;background:var(--panel);color:var(--dim)}
.playbar button.on{background:var(--ink);color:#fff}
.playbar button:hover:not(:disabled){color:var(--blue-dark)}
.playbar button.on:hover:not(:disabled){color:#fff}
.playbar button:disabled{opacity:.4;cursor:default}

/* 토론 */
.duel{display:flex;align-items:flex-end;justify-content:center;gap:5px;flex-wrap:nowrap}
.duel .seat{width:100px;padding-top:112px;flex:0 1 100px}
.vs{font-size:14px;font-weight:800;color:var(--muted);align-self:center;padding:0 0 39px}

/* 결정 배너 */
.verdict{margin-top:14px;border-radius:16px;background:var(--blue-soft);padding:16px 18px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.verdict.hidden{display:none}
.verdict .act{font-size:20px;font-weight:800;padding:8px 16px;border-radius:12px;
  background:var(--panel);border:2px solid currentColor}
.verdict .meta{font-size:13px;color:var(--dim);line-height:1.8}
.verdict .why{flex:1;min-width:220px;font-size:14px;color:var(--ink);line-height:1.6}
.verdict .why em{display:block;color:var(--blue-dark);font-style:normal;font-weight:700;
  font-size:12px;margin-bottom:3px}

/* 수급 막대 */
.flowrow{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--rule)}
.flowrow:last-child{border-bottom:0}
.flowsym{font-size:14px;font-weight:600}
.bars{display:flex;gap:3px;align-items:center;height:22px}
.bars .b{flex:1;height:100%;position:relative;background:var(--bg);border-radius:4px;overflow:hidden}
.bars .b i{position:absolute;left:0;right:0;bottom:0;display:block}
.bars .lbl{font-size:12px;color:var(--muted);width:42px;text-align:right}

/* 이벤트 로그 */
.feed{font-size:14px;line-height:1.55;max-height:280px;overflow:auto;scrollbar-width:thin}
.feed div{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule)}
.feed .t{color:var(--muted);flex:0 0 56px;font-size:12px;font-variant-numeric:tabular-nums}
.feed .ty{flex:0 0 118px;font-size:12px;color:var(--dim)}
.feed .m{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 티커 테이프 — 흐르는 글자는 읽히지 않습니다. 그리지 않습니다. */
.tape{display:none}
.tape-in{display:inline-flex;gap:34px;white-space:nowrap;animation:tape 42s linear infinite}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 버튼 ──────────────────────────────────────────────────────────── */
.btn{font-family:var(--kr);font-size:15px;font-weight:600;min-height:44px;padding:8px 16px;
  border:0;border-radius:12px;background:var(--bg);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .12s,transform .06s}
.btn:hover:not(:disabled){background:#e6e9ed}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.go,.btn.primary,#runStart,#agentStart,#setupSave,#loginSubmit,#registerSubmit{
  background:var(--blue);color:#fff}
.btn.go:hover:not(:disabled),.btn.primary:hover:not(:disabled),#runStart:hover:not(:disabled),
#agentStart:hover:not(:disabled),#setupSave:hover:not(:disabled),#loginSubmit:hover:not(:disabled),
#registerSubmit:hover:not(:disabled){background:var(--blue-dark)}
.btn.buy{background:var(--up-soft);color:var(--red)}
.btn.buy:hover:not(:disabled){background:#fbd9dd}
.btn.sell{background:var(--down-soft);color:var(--blue-dark)}
.btn.sell:hover:not(:disabled){background:#d6e9ff}
/* 되돌릴 수 없는 버튼 */
.btn.warn{background:var(--bad-soft);color:var(--red)}
.btn.warn:hover:not(:disabled){background:#fbd9dd}
/* 버튼이 아니라 곁길입니다 — "비밀번호를 잊으셨나요?" 를 로그인 버튼과 같은
   무게로 그리면 둘 중 무엇이 기본 동작인지 흐려집니다. 그래도 닿는 높이는
   지킵니다(`tests/test_ui_readability.py` 가 44px 를 잽니다). */
.linkish{display:block;width:100%;min-height:44px;padding:0;border:0;
  background:none;color:var(--dim);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--ink)}
/* 한 번만 보여 주는 값. 손으로 옮겨 적는 값이라 넉넉하고 또렷하게, 그리고
   줄바꿈 없이 통째로 선택되게 둡니다. */
.code-once{margin-top:10px;padding:14px 16px;border-radius:12px;
  background:var(--blue-soft);color:var(--blue-dark);font-family:var(--mono);
  font-size:17px;font-weight:700;letter-spacing:.04em;text-align:center;
  overflow-x:auto;white-space:nowrap;user-select:all}
.btn.tap{min-height:44px;padding:10px 16px;font-size:15px}

/* ── 입력 ──────────────────────────────────────────────────────────── */
select,#mSymbol{min-height:44px}
.manual{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
.manual-orders{margin-top:14px;border-radius:14px;background:var(--bg)}
.manual-orders summary{display:flex;min-height:44px;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink)}
.manual-orders summary span{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted)}
.manual-orders:not([open])>:not(summary){display:none}
.manual-orders[open] summary{border-bottom:1px solid var(--line)}
.manual-orders>.manual,.manual-orders>.actions{margin-left:14px;margin-right:14px}
.manual-orders>.actions{margin-bottom:14px}
.safety-actions{margin-top:14px;justify-content:flex-end}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
/* 손가락 한 칸보다 작은 입력칸은 없습니다 — 아래 48px 이 이 값을 덮습니다. */
.fld input,.fld select{min-height:44px}
.fld label{font-size:13px;font-weight:600;color:var(--muted)}
.fld input,.fld select,.pwform input,.ticket input,.runbar select,.quotebar select,
.agentrow input,.agentrow select,.recovery-reason textarea{
  font-family:var(--kr);font-size:16px;min-height:48px;padding:10px 14px;width:100%;
  border:1px solid var(--field);border-radius:12px;background:var(--panel2);color:var(--ink)}
.fld input:focus,.fld select:focus,.pwform input:focus,.ticket input:focus,
.runbar select:focus,.quotebar select:focus,.agentrow input:focus,.agentrow select:focus,
.recovery-reason textarea:focus{border-color:var(--blue);outline:none;
  box-shadow:0 0 0 3px var(--blue-soft)}
.fld input::placeholder,.ticket input::placeholder,.pwform input::placeholder{color:var(--faint);opacity:1}
select{-webkit-appearance:none;appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7684' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.actions .btn{min-width:44px}
.pins{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pin{font-size:13px;font-weight:600;border-radius:999px;background:var(--blue-soft);
  color:var(--blue-dark);padding:4px 6px 4px 12px;display:flex;gap:4px;align-items:center}
.pin button{color:var(--blue-dark);background:none;border:0;padding:0 6px;min-height:24px;min-width:24px}
.gauge{margin-top:4px}
.gauge .lab{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.gauge .track{height:8px;background:var(--line);border-radius:4px;margin-top:4px;overflow:hidden}
.gauge .track i{display:block;height:100%;background:var(--ok);border-radius:4px}
.gauge.hot .track i{background:var(--warn)}
.gauge.over .track i{background:var(--red)}
.msg{font-size:14px;line-height:1.6;margin-top:10px;padding:10px 14px;border-radius:10px;
  background:var(--bg);color:var(--dim);overflow-wrap:anywhere}
.msg:empty{display:none}
.msg.err{background:var(--bad-soft);color:var(--red)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}

/* ── 설정 시트 ─────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(25,31,40,.55);z-index:100;overflow:auto;
  padding:24px 12px 60px;display:none}
.overlay.on{display:block}
.sheet{max-width:640px;margin:0 auto;background:var(--panel);border-radius:24px;overflow:hidden}
.sheet header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sheet header h2{font-size:18px;font-weight:700;color:var(--ink);margin:0}
.sheet .body{padding:20px}
.step{border-radius:16px;background:var(--bg);padding:16px;margin-bottom:12px}
.step h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 4px}
.step p{font-size:14px;color:var(--dim);margin:0 0 12px;line-height:1.7}
.venue{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px;margin-bottom:8px}
.venue.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.venue .head{display:flex;align-items:center;gap:8px;cursor:pointer}
.venue .head{min-height:44px}
.venue .head span{font-size:15px;font-weight:600}
.venue .status{margin-left:auto;font-size:13px;color:var(--muted)}
.venue .note{overflow-wrap:anywhere;font-size:14px;color:var(--muted);margin:6px 0 0;line-height:1.7}
.venue .fields{display:none;margin-top:10px;display:grid;gap:8px}
.venue:not(.on) .fields{display:none}
.venue.on .fields{display:grid}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.steps span{font-size:12px;font-weight:600;border-radius:999px;padding:5px 10px;
  background:var(--bg);color:var(--muted)}
.steps span.done{background:var(--ok-soft);color:var(--ok)}
.steps span.now{background:var(--blue-soft);color:var(--blue-dark)}
.steps span.skipped{background:var(--warn-soft);color:var(--warn)}
.step .head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step .head .mark{font-size:12px;font-weight:600;color:var(--muted);margin-left:auto}
.step .head .mark.done{color:var(--ok)}

/* ── 투자 성향 ─────────────────────────────────────────────────────── */
.quiz{display:grid;gap:14px}
.q{border-radius:16px;background:var(--bg);padding:14px}
.q .qt{font-size:15px;font-weight:600;line-height:1.6;margin-bottom:8px}
.q .qh{font-size:13px;color:var(--muted);margin-bottom:8px;line-height:1.5}
.q .opts{display:grid;gap:6px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;min-height:44px;
  border:1px solid var(--line);border-radius:12px;width:100%;text-align:left;
  font-size:14px;line-height:1.5;background:var(--panel);color:var(--ink)}
.opt:hover{border-color:var(--blue)}
.opt.on{border-color:var(--blue);background:var(--blue-soft)}
.opt.on i:after{content:" ✓"}   /* 색만으로 고른 것을 말하지 않습니다 */
.opt i{font-weight:700;color:var(--blue-dark);font-style:normal;flex:0 0 auto}
.qprog{font-size:13px;color:var(--muted)}

.type{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.typebadge{font-size:22px;font-weight:800;color:var(--blue-dark);background:var(--blue-soft);
  border-radius:16px;padding:14px 18px;text-align:center;line-height:1.3}
.typebadge small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:4px}
.axes{flex:1;min-width:260px;display:grid;gap:10px}
.ax .axl{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.ax .axl b{color:var(--ink);font-weight:600}
.ax .bar{position:relative;height:8px;background:var(--line);border-radius:4px;margin-top:4px}
.ax .bar span{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--edge)}
.ax .bar i{position:absolute;top:0;bottom:0;background:var(--blue);min-width:3px;border-radius:4px}
.ax input[type=range]{width:100%;margin-top:4px;accent-color:var(--blue);min-height:44px}
.derived{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:12px}
.derived div{border-radius:10px;background:var(--bg);padding:8px 10px}
.derived .k{font-size:12px;color:var(--muted)}
.derived .v{font-size:15px;font-weight:600;margin-top:2px}
.demo-tag{font-size:12px;font-weight:700;color:var(--blue-dark);background:var(--blue-soft);
  border-radius:6px;padding:2px 8px}
.empty{font-size:14px;color:var(--muted);text-align:center;padding:24px}

/* ── 증권앱 배치: 왼쪽에 판단, 오른쪽에 시세 ────────────────────────── */
.deck{display:grid;grid-template-columns:minmax(0,2fr) minmax(380px,1fr);gap:20px;align-items:start}
.deck-r{position:sticky;top:calc(var(--header-h,72px) + 16px);
  max-height:calc(100dvh - var(--header-h,72px) - 28px);overflow:auto;scrollbar-width:thin}
.viewtabs{display:none}
.quotebar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;
  gap:10px;padding:16px 20px;border-bottom:1px solid var(--rule)}
.quotebar select{min-width:0}
.quotebar #cSym{min-width:44px;width:100%}
.quotebar .last{font-size:28px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-align:right}
.quotebar .last-quote{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;min-width:0}
.quotebar .last-kind{color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.quotebar .last.up{color:var(--sang)}.quotebar .last.down{color:var(--ha)}
.quotebar .last-change{min-width:74px;text-align:right;color:var(--muted);
  font-family:var(--mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.quotebar .last-change.up{color:var(--up)}
.quotebar .last-change.down{color:var(--down)}
.quotebar .stale{font-size:12px;font-weight:600;color:var(--red);background:var(--bad-soft);
  border-radius:6px;padding:3px 8px}
#chartBox{position:relative;height:320px;background:var(--panel)}
#chartBox canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.mypos{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;
  padding:14px 20px;border-top:1px solid var(--rule);font-size:13px}
.mypos .k{color:var(--muted);font-size:12px}
.mypos .v{font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}
.mypos .v.up{color:var(--sang)}.mypos .v.down{color:var(--ha)}
.ticket{padding:16px 20px;border-top:1px solid var(--rule);display:grid;gap:12px}
.ticket .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ticket .row>*{min-width:0}
.ticket label{font-size:13px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.ticket .hint{font-size:13px;color:var(--muted);line-height:1.6}
.ticket .go{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ticket .go button{min-height:52px;font-size:16px;font-weight:700}

.runbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.runbar select{flex:1;min-width:180px;width:auto}
.runbar .btn{flex:0 0 auto}

/* ── 여러 성향 동시 운용 ────────────────────────────────────────────── */
.agentsetup{margin-top:12px;border-radius:14px;background:var(--bg)}
.agentsetup>summary{padding:12px 14px;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink)}
.agentsetup>summary small{color:var(--muted);margin-left:8px;font-weight:500}
.agentsetup[open]>summary{border-bottom:1px solid var(--line)}
.agentsetup>*:not(summary){padding-left:14px;padding-right:14px}
.agentrow{display:grid;gap:8px;align-items:center;margin-bottom:8px;
  grid-template-columns:minmax(90px,1fr) minmax(120px,1.6fr) 74px 104px 40px}
.agentrow input,.agentrow select{min-height:44px;padding:6px 10px;font-size:14px;min-width:0}
.agentrow select{padding-right:30px;background-position:right 8px center}
.agentrow .wt{text-align:right}
/* 실거래 줄은 눈에 띄어야 합니다. 넷 중 하나만 진짜 돈이면 그 하나가
   나머지와 같은 회색으로 보이는 것이 가장 위험합니다. */
.agentrow[data-live="1"]{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}
.agentrow .drop{min-height:44px;background:var(--panel);border:0;border-radius:10px;
  color:var(--muted);font-size:16px}
.agentrow .drop:hover{background:var(--bad-soft);color:var(--red)}
.agentfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:12px}
.weightsum{font-size:13px;font-weight:600;color:var(--muted);margin-left:auto}
.weightsum[data-over="1"]{color:var(--bad)}
.agenttabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.agtab{background:var(--bg);border:0;border-radius:999px;color:var(--muted);
  padding:8px 14px;min-height:40px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:6px}
.agtab.on{background:var(--ink);color:#fff}
.agtab small{font-size:12px;font-weight:500;opacity:.8}
/* 멈춘 에이전트를 살아 있는 것과 같은 모양으로 두지 않습니다. */
.agtab[data-stopped="1"]{opacity:.5;text-decoration:line-through}
.agtab .livedot{color:var(--red);font-size:9px;line-height:1}

/* ── 첫 화면 ────────────────────────────────────────────────────────── */
.land{max-width:1040px;margin:0 auto;padding:40px 24px 80px}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  grid-template-areas:"title title" "copy actions" "note actions";
  column-gap:48px;row-gap:16px;padding:48px 40px 40px;text-align:left;
  background:var(--panel);border-radius:24px}
.hero h1{grid-area:title;font-size:clamp(26px,3.4vw,40px);font-weight:800;
  letter-spacing:-.03em;line-height:1.3;color:var(--ink);text-wrap:balance}
.hero .sub{grid-area:copy;max-width:58ch;margin:0;font-size:17px;line-height:1.8;color:var(--dim)}
.hero .cta{grid-area:actions;display:grid;align-content:center;justify-content:stretch;margin:0;gap:10px}
.hero .cta .btn{width:100%;font-size:16px;min-height:52px}
.hero .note{grid-area:note;margin:0;font-size:14px;color:var(--muted);line-height:1.7}

.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.step3{background:var(--panel);border-radius:20px;padding:22px 20px}
.step3 .n{font-size:13px;font-weight:700;color:var(--blue)}
.step3 h3{font-size:17px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.5}
.step3 p{font-size:15px;color:var(--dim);line-height:1.75;margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.fact{background:var(--panel);border-radius:20px;padding:20px}
.fact b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.5}
.fact span{display:block;margin-top:8px;font-size:15px;color:var(--dim);line-height:1.75}
.warnbox{margin-top:24px;background:var(--bad-soft);border-radius:20px;padding:22px 20px}
.warnbox b{font-size:15px;font-weight:700;color:var(--red);display:block}
.warnbox p{font-size:15px;color:var(--ink);line-height:1.8;margin-top:8px}
.warnbox ul{margin:9px 0 0 18px;font-size:14px;color:var(--dim);line-height:1.9}

/* 로그인 전에 데스크를 보여주는 유일한 경로 — 방 묶음만 엽니다. */
body.demoing #rooms{display:grid}
body.demoing .demoshut{display:none}
#demoStage{max-width:1040px;margin:0 auto;padding:0 24px}
#demoStage .lead{font-size:15px;font-weight:700;color:var(--ink);
  padding:16px 0 4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#demoStage .lead span{font-size:14px;font-weight:500;color:var(--muted)}
/* 로그인·가입 카드는 접혀 있습니다. 위를 읽고 나서 엽니다. */
#authCard{display:none;margin:24px auto 0}
body.showauth #authCard{display:block}
body.showauth .land .hero .cta{display:none}
/* 카드가 열리면 소개글 위, 제목 바로 아래로 올립니다. DOM 순서는 그대로입니다 —
   검사가 "위험 고지가 카드보다 먼저" 를 마크업 순서로 잽니다. 화면 순서만 바꿉니다. */
body.showauth .land{display:flex;flex-direction:column}
body.showauth .land>*{order:0}
body.showauth .land>.hero{order:-2}
body.showauth .land>#authCard{order:-1;width:100%}

/* ── 첫 방문 안내 ────────────────────────────────────────────────────── */
#tour{position:fixed;inset:0;z-index:120;display:none}
body.touring #tour{display:block}
body.touring{overflow:hidden}
#tourVeil{position:absolute;inset:0;touch-action:none}
#tourRing{position:absolute;border:3px solid var(--blue);border-radius:14px;
  box-shadow:0 0 0 9999px rgba(25,31,40,.6);
  transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease;pointer-events:none}
#tourBox{position:absolute;max-width:min(420px,92vw);background:var(--panel);
  border-radius:16px;padding:18px 20px;box-shadow:0 12px 40px rgba(25,31,40,.2);
  animation:tourpop .18s ease}
@keyframes tourpop{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  #tourRing{transition:none}#tourBox{animation:none}
}
#tourBox h4{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--blue-dark)}
#tourBox p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--ink)}
#tourBox .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
#tourBox .tourstep{margin-left:auto;font-size:13px;color:var(--muted)}

/* ── 로그인 게이트 ──────────────────────────────────────────────────── */
/* 기본값이 숨김입니다 — 느린 /api/auth/me 나 스크립트 오류 하나가 남의
   데스크를 잠깐 비추지 않도록. */
.app-only{display:none}
body.authed .app-only{display:block}
/* 티커는 .app-only 이기도 합니다 — 위 규칙이 되살리지 못하게 뒤에서 다시 끕니다. */
body.authed .tape{display:none}
body:not(.authed) .overlay{display:none}
.boot{display:none;min-height:70vh;align-items:center;justify-content:center;
  padding:24px 12px;font-size:14px;color:var(--muted)}
.gate{display:none;padding:0}
body.booting .boot{display:flex}
body.anon .gate{display:flex;flex-direction:column}
.card{width:100%;max-width:440px;background:var(--panel);border-radius:24px;
  box-shadow:0 8px 40px rgba(25,31,40,.08)}
.card .cap{padding:24px 24px 0}
.card .cap h1{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.4}
.card .cap p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.7}
.tabs{display:flex;gap:6px;padding:16px 24px 0}
.tabs .tab{flex:1;text-align:center;min-height:44px;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:10px;background:var(--bg);color:var(--muted);
  font-size:14px;font-weight:600;padding:0;cursor:pointer;user-select:none;-webkit-user-select:none}
.tabs .tab.on{background:var(--ink);color:#fff}
form.auth{display:grid;gap:14px;padding:16px 24px 24px}
form.auth[hidden]{display:none}
form.auth .fld input{min-height:48px}
form.auth .hint{font-size:13px;color:var(--muted);line-height:1.7}

/* ── 마이페이지 · 계정 ──────────────────────────────────────────────── */
#account{scroll-margin-top:calc(var(--header-h,72px) + 16px)}
.acct{display:grid;gap:14px}
.acct .who{font-size:16px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.acct .who small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:4px}
.acct h4{font-size:13px;color:var(--muted);font-weight:600}
.links{display:grid;gap:8px;margin-top:8px}
.link{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.link .nm{font-size:15px;font-weight:600;color:var(--ink)}
.link .hint{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.link .btn{margin-left:auto}
.pwform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
  align-items:end;margin-top:8px}
.pwform input{min-height:44px}

/* 실제 증권사 잔고 */
table.acct{display:table;width:100%;border-collapse:collapse;font-size:14px}
table.acct th{text-align:left;color:var(--muted);font-weight:600;padding:10px 8px;
  border-bottom:1px solid var(--line)}
table.acct td{padding:12px 8px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
table.acct td:first-child{font-variant-numeric:normal;font-weight:600}
.acct-scroll{max-width:100%;margin-top:12px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.acct-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.acct-scroll table.acct{min-width:640px}
#brokerAcct .r{display:grid;grid-template-columns:minmax(132px,1fr) minmax(0,1fr);
  gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule)}
#brokerAcct .r>b{color:var(--muted);font-weight:500;line-height:1.5}
#brokerAcct .r>span{min-width:0;text-align:right;color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.5;overflow-wrap:anywhere}
.account-refreshbar{display:flex;align-items:center;gap:10px;min-height:60px;
  padding:10px 20px;border-bottom:1px solid var(--rule)}
.account-refreshbar time{margin-right:auto;color:var(--muted);
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.account-refreshbar .btn{min-height:44px}
#brokerRefresh[aria-busy="true"]{cursor:wait;color:var(--muted)}

/* ── 비정상 종료 실거래 복구 ────────────────────────────────────────
   빨간색 하나에만 뜻을 맡기지 않습니다. 제목·설명·다섯 대조 항목이 함께
   "왜 막혔는가" 를 말합니다. */
.recovery-card[hidden]{display:none!important}
.recovery-card{box-shadow:inset 0 0 0 2px var(--bad)}
.recovery-card>.plate{color:var(--bad)}
.recovery-lead{border-radius:14px;background:var(--bad-soft);padding:14px 16px;
  font-size:15px;line-height:1.75;color:var(--ink)}
.recovery-lead b{display:block;font-size:14px;font-weight:700;color:var(--red);margin-bottom:6px}
.recovery-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.recovery-meta>div{min-width:0;border-radius:12px;background:var(--bg);padding:10px 12px}
.recovery-meta>.wide{grid-column:1/-1}
.recovery-meta dt{font-size:12px;color:var(--muted)}
.recovery-meta dd{margin:4px 0 0;font-size:15px;font-weight:600;line-height:1.6;
  color:var(--ink);overflow-wrap:anywhere}
.recovery-preserve{margin-top:12px;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;
  padding:10px 14px;background:var(--blue-soft);font-size:14px;line-height:1.75;color:var(--dim)}
.recovery-preserve b{display:block;color:var(--blue-dark);font-weight:700;font-size:13px;margin-bottom:4px}
.recovery-checks{margin-top:14px;border:1px solid var(--line);border-radius:14px;
  padding:10px 12px 12px;display:grid;gap:6px;min-width:0}
.recovery-checks legend{padding:0 7px;font-size:13px;font-weight:700;color:var(--ink)}
.recovery-checks label{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;
  align-items:center;min-height:44px;padding:6px 8px;border-radius:10px;
  background:var(--bg);font-size:15px;line-height:1.55;cursor:pointer}
.recovery-checks input{width:22px;height:22px;margin:0;accent-color:var(--blue)}
.recovery-checks input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.recovery-reason{margin-top:14px}
.recovery-reason textarea{min-height:104px;resize:vertical;line-height:1.6}
#reconciliationReasonHelp{display:flex;justify-content:space-between;gap:10px;
  flex-wrap:wrap;font-size:13px;line-height:1.5}
#reconciliationReasonCount{font-weight:500;color:var(--muted)}
.recovery-ack{margin-top:14px;border:1px dashed var(--bad);border-radius:12px;
  padding:12px;background:var(--bad-soft)}
.recovery-ack p{font-size:14px;color:var(--dim);line-height:1.6}
.recovery-ack code{display:block;margin:8px 0 10px;padding:10px 12px;background:var(--panel);
  border-radius:8px;color:var(--red);font-family:var(--kr);font-size:15px;font-weight:600;
  line-height:1.6;white-space:normal;overflow-wrap:anywhere;user-select:text}
.recovery-message:empty{display:none}
.recovery-message{margin-top:12px;line-height:1.7}
.recovery-actions{justify-content:flex-end}
.recovery-actions .btn{min-width:min(100%,320px)}
.recovery-card.resolved{box-shadow:inset 0 0 0 2px var(--ok)}
.recovery-card.resolved>.plate{color:var(--ok)}

/* ── 거래 준비 상태(cockpit) ───────────────────────────────────────── */
.cockpit-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 0}
.cockpit-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:center;min-width:0;min-height:58px;padding:10px 14px;
  border:0;border-radius:14px;background:var(--panel);color:var(--ink);text-align:left;
  box-shadow:0 1px 2px rgba(25,31,40,.04),0 0 0 1px rgba(25,31,40,.03);transition:box-shadow .12s}
.cockpit-step:hover{box-shadow:0 0 0 1px var(--blue)}
.cockpit-step[aria-current="step"]{box-shadow:inset 0 0 0 2px var(--blue)}
.cockpit-step .cockpit-n{font-size:12px;font-weight:700;color:var(--blue)}
.cockpit-step b{display:block;font-size:14px;line-height:1.3}
.cockpit-step small{display:block;min-width:0;margin-top:3px;overflow:hidden;
  color:var(--muted);font-family:var(--mono);font-size:12px;line-height:1.3;
  text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}

.run-safety{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;
  align-items:center;min-height:44px;margin-bottom:12px;padding:10px 14px;
  border-radius:12px;background:var(--bg);color:var(--muted);font-size:13px}
.run-safety b{color:var(--ink);font-size:14px}
.run-safety[data-state="live"]{background:var(--bad-soft)}
.run-safety[data-state="live"] b{color:var(--red)}
.run-safety[data-state="dry"]{background:var(--ok-soft)}
.run-safety[data-state="error"]{background:var(--bad-soft)}
/* 신규 진입이 못 나가는 상태. error 가 아닌 이유는 손절과 청산은 그대로
   나가기 때문입니다 — 붉게 칠하면 "지금 포지션에 갇혔다" 로 읽힙니다.
   `b` 는 --ink 그대로 둡니다: --warn 은 이 바탕에서 4.22:1 이라 본문
   대비 기준(4.5:1)에 못 미칩니다. */
.run-safety[data-state="warn"]{background:var(--warn-soft)}

.state-dot{display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--faint)}
.freshness{display:inline-flex;align-items:center;gap:7px;min-height:28px;
  color:var(--muted);font-size:13px;white-space:nowrap}
.freshness b{font-size:13px}
.freshness[data-state="live"]{color:var(--ok)}
.freshness[data-state="live"] .state-dot{background:var(--ok)}
.freshness[data-state="delayed"]{color:var(--warn)}
.freshness[data-state="delayed"] .state-dot{background:var(--warn)}
.freshness[data-state="stale"],.freshness[data-state="error"],
.freshness[data-state="unavailable"]{color:var(--bad)}
.freshness[data-state="stale"] .state-dot,
.freshness[data-state="error"] .state-dot,
.freshness[data-state="unavailable"] .state-dot{background:var(--bad)}

/* ── 시세 세부 ─────────────────────────────────────────────────────── */
.market-freshbar{display:flex;align-items:center;gap:9px;min-height:42px;
  padding:6px 20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.market-freshbar time,.market-source{font-family:var(--mono);font-size:12px;
  color:var(--muted);font-variant-numeric:tabular-nums}
.market-source{margin-left:auto;text-align:right}
.quote-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.quote-facts div{min-width:0;padding:10px 12px;border-right:1px solid var(--rule)}
.quote-facts div:last-child{border-right:0}
.quote-facts dt{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.quote-facts dd{margin-top:2px;overflow:hidden;color:var(--ink);font-weight:600;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  text-overflow:ellipsis;white-space:nowrap}
.market-micro{border-bottom:1px solid var(--rule)}
.market-micro>h3{min-height:34px;padding:10px 20px;border-bottom:1px solid var(--rule);
  color:var(--muted);font-size:13px;font-weight:600}
.market-micro-body{display:grid;grid-template-columns:1fr 1fr;min-height:90px}
.market-micro-body>.empty{grid-column:1/-1;padding:16px 12px;color:var(--muted);font-size:13px}
.micro-pane{min-width:0;padding:10px 14px}
.micro-pane+.micro-pane{border-left:1px solid var(--rule)}
.micro-pane h4{margin-bottom:6px;color:var(--muted);font-size:12px;font-weight:600}
table.micro{display:table;width:100%;border-collapse:collapse;table-layout:fixed;
  font-family:var(--mono);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
table.micro th,table.micro td{padding:4px 2px;border:0;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.micro th:first-child,table.micro td:first-child{text-align:left}
table.micro .ask{color:var(--down)}
table.micro .bid,table.micro .buy{color:var(--up)}
table.micro .sell{color:var(--down)}
.order-strip{min-height:40px;padding:10px 20px;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--plate);color:var(--muted);
  font-size:13px;line-height:1.55}
.order-strip b{color:var(--ink);font-weight:600}

/* 내 계좌 · 마이페이지는 한 기둥으로 넓게 씁니다. */
body[data-page="account"] .deck,body[data-page="me"] .deck{grid-template-columns:minmax(0,1fr)}
body[data-page="account"] #pageAccount{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
#pageAccount>.panel{margin-top:0;grid-column:1/-1}

/* ── 반응형 ────────────────────────────────────────────────────────── */
@media(min-width:1241px){
  /* 오른쪽 기둥은 일부러 좁습니다. 종목 코드가 자기 줄을 갖습니다. */
  .quotebar{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"symbol symbol symbol" "timeframe stale stale" "price price change"}
  .quotebar #cSym{grid-area:symbol}
  .quotebar #cTf{grid-area:timeframe}
  .quotebar .stale{grid-area:stale;justify-self:end}
  .quotebar .last-quote{grid-area:price;justify-content:flex-start}
  .quotebar .last-change{grid-area:change}
}

@media(max-width:1240px){
  .deck{grid-template-columns:minmax(0,1fr);scroll-margin-top:calc(var(--header-h,72px) + 52px)}
  .stlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck-r{position:static;max-height:none;overflow:visible}
  /* 좁아지면 심의와 시세를 탭으로 가릅니다 — 차트를 긴 문서 아래에 묻지 않습니다. */
  .viewtabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;position:sticky;
    top:var(--header-h,72px);z-index:38;padding:8px 0;background:var(--bg)}
  .viewtabs button{min-height:48px;border:0;border-radius:12px;background:var(--panel);
    font-family:var(--kr);font-size:15px;font-weight:700;color:var(--muted)}
  .viewtabs button[aria-pressed="true"]{color:#fff;background:var(--ink)}
  body[data-view="chart"] .deck-l,body[data-view="desk"] .deck-r{display:none}
  body[data-page="account"] .viewtabs,body[data-page="me"] .viewtabs{display:none}
  body[data-page="account"] .deck-r,body[data-page="me"] .deck-r{display:none}
  /* chart 탭을 보다가 계좌로 이동해도 `.deck-l` 이 숨은 채 남아서는 안 됩니다. */
  body[data-page="account"] .deck-l,body[data-page="me"] .deck-l{display:block}
  .deck-r>.panel{scroll-margin-top:calc(var(--header-h,72px) + 60px)}
  .ticket{scroll-margin-top:calc(var(--header-h,72px) + 60px)}
}

@media(max-width:760px){
  #tourBox{max-width:calc(100vw - 24px);width:calc(100vw - 24px)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .agentrow{grid-template-columns:1fr 1fr;grid-template-areas:
    "label label" "cfg cfg" "wt mode" "drop drop"}
  .agentrow .lb{grid-area:label} .agentrow .cf{grid-area:cfg}
  .agentrow .wt{grid-area:wt} .agentrow .md{grid-area:mode}
  .agentrow .drop{grid-area:drop}
  table.tradelog .tl-why,table.tradelog .tl-when{display:none}
}

@media(max-width:520px){
  .wrap{padding-left:12px;padding-right:12px}
  .brand-full,.brand i:last-child{display:none}
  .brand-short{display:inline}
  .manual{grid-template-columns:minmax(0,1fr)}
  .ticket .row{grid-template-columns:minmax(0,1fr)}
  .quotebar{grid-template-columns:minmax(0,1fr) auto}
  .quotebar .last-quote{grid-column:1;justify-content:flex-start}
  .quotebar .last{grid-column:auto;text-align:left;font-size:26px}
  .quotebar .last-change{grid-column:2;text-align:right}
  .quote-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-facts div:nth-child(2){border-right:0}
  .quote-facts div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .market-micro-body{grid-template-columns:minmax(0,1fr)}
  .micro-pane+.micro-pane{border-left:0;border-top:1px solid var(--rule)}
  #chartBox{height:280px}
  .pnlgrid{grid-template-columns:minmax(0,1fr)}
  .hud-l{padding:18px}.big{font-size:30px}
  .hero{padding:28px 20px}.hero h1{font-size:24px}
  .hero .sub{font-size:16px}.hero .cta{grid-template-columns:minmax(0,1fr)}
  .hero .cta .btn:last-child{grid-column:1}
  .duel{gap:2px}.duel .seat{width:92px;flex-basis:92px}.duel .vs{font-size:12px}
  #brokerAcct .r{grid-template-columns:minmax(118px,1fr) minmax(0,1fr);gap:9px}
  .recovery-meta{grid-template-columns:minmax(0,1fr)}
  .recovery-meta>.wide{grid-column:1}
  .recovery-checks{padding:9px}
  .recovery-actions .btn{width:100%;min-width:0}
  .account-refreshbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 14px}
  .account-refreshbar time{grid-column:1;margin:0}
  .account-refreshbar .btn{grid-column:2;grid-row:1/3}
  .market-freshbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 14px}
  .market-source{grid-column:1/-1;margin:0;text-align:left}
}

@media(max-width:360px){
  /* 320px 에서는 4×68px 좌석과 세 명 토론줄이 방 안쪽 폭보다 큽니다.
     overflow 를 숨겨 성공처럼 보이게 하지 않고, 2명씩 다음 줄로 보냅니다. */
  #rooms .seats{grid-template-columns:repeat(2,minmax(68px,1fr))}
  #rooms .seats .seat .bubble{left:50%;right:auto;transform:translateX(-50%)}
  #rooms .seats .seat .bubble:after{left:50%;right:auto;margin-left:-6px}
  #rooms .seats .seat:nth-child(odd) .bubble{left:0;right:auto;transform:none}
  #rooms .seats .seat:nth-child(even) .bubble{left:auto;right:0;transform:none}
  #rooms .seats .seat:nth-child(odd) .bubble:after{left:34px;right:auto}
  #rooms .seats .seat:nth-child(even) .bubble:after{left:auto;right:30px}
  #rooms .duel{flex-wrap:wrap;justify-content:center}
  #rooms .duel .vs{display:none}
  #rooms .duel .seat{width:92px;flex:0 0 92px}
  #rooms .duel .seat .bubble{left:50%;right:auto;transform:translateX(-50%)}
  #rooms .duel .seat .bubble:after{left:50%;right:auto;margin-left:-6px}
  #rooms #seat-bull .bubble,#rooms #seat-risk_aggressive .bubble,
  #rooms #seat-research_manager .bubble{left:0;right:auto;transform:none}
  #rooms #seat-bear .bubble,#rooms #seat-risk_conservative .bubble,
  #rooms #seat-trader .bubble{left:auto;right:0;transform:none}
  #rooms #seat-bull .bubble:after,#rooms #seat-risk_aggressive .bubble:after,
  #rooms #seat-research_manager .bubble:after{left:34px;right:auto}
  #rooms #seat-bear .bubble:after,#rooms #seat-risk_conservative .bubble:after,
  #rooms #seat-trader .bubble:after{left:auto;right:30px}
}

/* 태블릿 폭: 봇이 돌아 잔고 알약이 보이면 한 줄에 다 들어가지 않습니다.
   잔고를 둘째 줄로 내리고 전략 이름·서버 시각은 셋째 줄로. */
@media(max-width:1100px){
  .top-in{grid-template-rows:auto auto auto}
  .top-in>.mini{grid-column:2/9;grid-row:2;justify-self:start}
  .top-in>#strategy{grid-row:3}
  .top-in>#serverSince{grid-row:3}
}

/* ── 휴대폰 ─────────────────────────────────────────────────────────
   머리말은 흘러가고, 화면 탭은 아래에 고정됩니다(토스식). 900px 이하 규칙은
   이 블록 하나에 모여 있습니다 — 새 블록을 아래에 만들지 마세요. */
@media(max-width:900px){
  header.top{position:relative;padding:10px 16px;background:var(--panel);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  #mainContent{scroll-margin-top:18px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .wrap{padding:0 16px 24px}
  footer{padding:20px 16px}
  .top-in{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;
    gap:8px;overflow:visible}
  .top-in>*{min-width:0}
  .top-in>.conn{grid-column:1;grid-row:1;justify-self:center}
  .top-in>.brand{grid-column:2/5;grid-row:1;font-size:16px;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis}
  .top-in>.mode{grid-column:5/8;grid-row:1;font-size:12px;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;justify-self:start}
  .top-in>.mini{grid-column:1/-1;grid-row:2;justify-self:stretch;min-width:0;
    overflow:visible;justify-content:flex-start;flex-wrap:wrap;border-radius:12px;padding:8px 12px}
  .top-in>.mini>*{min-width:0;overflow:visible;text-overflow:clip;white-space:normal}
  .top-in>.pagetabs{grid-column:1/-1;grid-row:3;justify-self:stretch;width:100%;
    position:fixed;left:0;right:0;bottom:0;z-index:60;border-radius:0;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line)}
  .pagetabs button{width:33.333%;padding:0 6px;min-height:50px;font-size:13px;border-radius:12px}
  .pagetabs button[aria-current="page"]{color:var(--blue-dark);background:var(--blue-soft);box-shadow:none}
  .top-in>.headtools{display:block;grid-column:10/13;grid-row:1;position:relative;
    min-width:0;justify-self:stretch}
  .headtools>#headToolsToggle{display:flex;width:100%;min-height:44px;padding:4px 6px;font-size:13px}
  .headtools-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:70;
    min-width:168px;padding:6px;background:var(--panel);border-radius:14px;
    box-shadow:0 8px 30px rgba(25,31,40,.16)}
  .headtools.on>.headtools-menu{display:grid;gap:2px}
  /* 첫 방문 안내가 도는 동안은 메뉴를 펼쳐 둡니다 — 1단계가 ⚙설정을 가리킵니다. */
  body.touring .headtools-menu{display:grid;gap:2px}
  .headtools-menu .btn{grid-column:auto!important;grid-row:auto!important;width:100%;min-width:44px;
    justify-content:flex-start;text-align:left;color:var(--ink)}
  .top-in>#strategy,.top-in>#serverSince,.since{display:none}
  .viewtabs{top:0}
  .deck{scroll-margin-top:52px}
  .deck-r>.panel{scroll-margin-top:60px}
  .ticket{scroll-margin-top:60px}
  .panel{margin-top:12px;border-radius:16px}
  .plate{padding:16px 16px 0;font-size:16px}
  .body{padding:12px 16px 16px}
  .room{padding:54px 12px 12px}
  .room .plate{padding:16px 16px 0}
  .round{top:14px;right:16px}
  .manual{grid-template-columns:repeat(2,minmax(0,1fr))}
  .actions .btn{flex:1 1 140px}
  .stlist{grid-template-columns:minmax(0,1fr)}
  #rooms,body.demoing #rooms{grid-template-columns:minmax(0,1fr);gap:12px}
  #rooms>.panel{grid-column:1}
  body[data-page="account"] #pageAccount{grid-template-columns:minmax(0,1fr);gap:12px}
  #pageAccount>.panel{grid-column:1!important}
  .hud{grid-template-columns:minmax(0,1fr)}
  .hud-l{border-right:0;border-bottom:1px solid var(--rule)}
  .hud-r{min-height:150px}
  #equity{height:140px}
  .pnlgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seats{grid-template-columns:repeat(4,minmax(68px,1fr))}
  .seats .seat{padding-top:100px}
  .bubble{max-width:min(186px,calc(100vw - 54px))}
  .cockpit-rail{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
  .cockpit-step{min-height:58px;padding:8px 12px}
  .run-safety{grid-template-columns:auto minmax(0,1fr)}
  .run-safety>span:last-child{grid-column:2}
  .land{padding:24px 16px 48px}
  #demoStage{padding:0 16px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:
    "title" "copy" "actions" "note";padding:32px 24px;row-gap:18px}
  .hero .cta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .cta .btn:last-child{grid-column:1/-1}
  .steps3{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .overlay{padding:12px 8px 40px}
  .sheet{border-radius:20px}
  .sheet .body{padding:16px}
}