/* ==========================================================================
   유가증권시장 매매체결 시스템 — 거래소 계기판
   --------------------------------------------------------------------------
   설계 원칙
   · 호가창은 대시보드가 아니라 '계기'다. 중앙의 가격 스파인이 눈금자이고,
     잔량은 스파인에서 좌우로 자라는 두 방향 히스토그램이다.
   · 시장이 만든 값(체결가·잔량)은 적/청, 법이 정한 값(상한가·기준가·하한가,
     호가가격단위 경계)은 황동색으로 분리한다. 규정 제20조·세칙 제32조제2항.
   · 숫자가 곧 내용이므로 숫자만 고정폭 서체로 크고 촘촘하게 둔다.
   · 외부 폰트·CDN을 쓰지 않는다(폐쇄망에서도 그대로 뜨도록).
   ========================================================================== */

/* --- 토큰 ---------------------------------------------------------------- */
:root {
  color-scheme: dark light;

  --ink-900: #0e1116;
  --ink-850: #12161d;
  --ink-800: #161a21;
  --ink-750: #1a1f28;
  --ink-700: #1e242d;
  --ink-600: #2a323e;
  --ink-500: #3a4553;
  --ink-400: #6b7684;
  --ink-300: #8b95a3;
  --ink-200: #aeb6c2;
  --ink-100: #ccd3dc;
  --ink-050: #e8ecf1;

  /* 국내 관행: 상승·매수 적색, 하락·매도 청색 */
  --rise: #e5484d;
  --rise-soft: #ff7a7e;
  --rise-wash: rgba(229, 72, 77, 0.16);
  --rise-wash-strong: rgba(229, 72, 77, 0.32);
  --fall: #2a7fff;
  --fall-soft: #6ba8ff;
  --fall-wash: rgba(42, 127, 255, 0.16);
  --fall-wash-strong: rgba(42, 127, 255, 0.32);
  --flat: var(--ink-300);

  /* 법정 가격 눈금 — 시장 데이터와 구분되는 유일한 색 */
  --brass: #c9a227;
  --brass-soft: #e0bf52;
  --brass-wash: rgba(201, 162, 39, 0.14);

  --ok: #2fa87a;
  --warn: #d98324;
  /* 되돌릴 수 없는 조작 — 시세의 적색과 색은 같아도 쓰임이 다르므로 이름을 따로 둔다 */
  --danger: #e5484d;
  --danger-soft: #ff7a7e;
  --danger-wash: rgba(229, 72, 77, 0.16);

  --bg: var(--ink-900);
  --panel: var(--ink-800);
  --panel-raised: var(--ink-750);
  --rule: var(--ink-600);
  --rule-soft: rgba(42, 50, 62, 0.55);
  --text: var(--ink-050);
  --text-dim: var(--ink-300);
  --text-mute: var(--ink-400);

  --font-ui: "Segoe UI", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-num: "Cascadia Mono", "Consolas", "D2Coding", "SFMono-Regular",
    ui-monospace, "Courier New", monospace;

  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  --gap: 10px;
  --pad: 12px;
  --topbar-h: 46px;
  --tabbar-h: 54px;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 24px rgba(0, 0, 0, 0.35);
}

/* 밝은 팔레트 — 시스템 설정(기본)과 명시적 토글 양쪽에서 같은 값을 쓴다. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink-900: #eef1f5;
    --ink-850: #f2f4f7;
    --ink-800: #ffffff;
    --ink-750: #f7f9fb;
    --ink-700: #eff2f6;
    --ink-600: #d8dee7;
    --ink-500: #c2cad6;
    --ink-400: #7a8695;
    --ink-300: #5d6875;
    --ink-200: #414b57;
    --ink-100: #2b333d;
    --ink-050: #12161c;

    --rise: #d0343a;
    --rise-soft: #b32a30;
    --rise-wash: rgba(208, 52, 58, 0.1);
    --rise-wash-strong: rgba(208, 52, 58, 0.22);
    --fall: #1465d8;
    --fall-soft: #0f4fab;
    --fall-wash: rgba(20, 101, 216, 0.1);
    --fall-wash-strong: rgba(20, 101, 216, 0.22);

    --brass: #9a7b12;
    --brass-soft: #7d6410;
    --brass-wash: rgba(154, 123, 18, 0.12);

    --ok: #1d8a5f;
    --warn: #a8620f;
    --danger: #d0343a;
    --danger-soft: #b32a30;
    --danger-wash: rgba(208, 52, 58, 0.1);

    --bg: var(--ink-900);
    --panel: var(--ink-800);
    --panel-raised: var(--ink-750);
    --rule: var(--ink-600);
    --rule-soft: rgba(216, 222, 231, 0.7);
    --text: var(--ink-050);
    --text-dim: var(--ink-300);
    --text-mute: var(--ink-400);
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --ink-900: #eef1f5;
  --ink-850: #f2f4f7;
  --ink-800: #ffffff;
  --ink-750: #f7f9fb;
  --ink-700: #eff2f6;
  --ink-600: #d8dee7;
  --ink-500: #c2cad6;
  --ink-400: #7a8695;
  --ink-300: #5d6875;
  --ink-200: #414b57;
  --ink-100: #2b333d;
  --ink-050: #12161c;

  --rise: #d0343a;
  --rise-soft: #b32a30;
  --rise-wash: rgba(208, 52, 58, 0.1);
  --rise-wash-strong: rgba(208, 52, 58, 0.22);
  --fall: #1465d8;
  --fall-soft: #0f4fab;
  --fall-wash: rgba(20, 101, 216, 0.1);
  --fall-wash-strong: rgba(20, 101, 216, 0.22);

  --brass: #9a7b12;
  --brass-soft: #7d6410;
  --brass-wash: rgba(154, 123, 18, 0.12);

  --ok: #1d8a5f;
  --warn: #a8620f;
  --danger: #d0343a;
  --danger-soft: #b32a30;
  --danger-wash: rgba(208, 52, 58, 0.1);

  --bg: var(--ink-900);
  --panel: var(--ink-800);
  --panel-raised: var(--ink-750);
  --rule: var(--ink-600);
  --rule-soft: rgba(216, 222, 231, 0.7);
  --text: var(--ink-050);
  --text-dim: var(--ink-300);
  --text-mute: var(--ink-400);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* --- 기본 ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

:focus-visible {
  outline: 2px solid var(--brass-soft);
  outline-offset: 1px;
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.label {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.up { color: var(--rise); }
.down { color: var(--fall); }
.flat { color: var(--flat); }

/* --- 셸 ------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-rows: var(--topbar-h) auto minmax(0, 1fr);
  height: 100dvh;
}

/* --- 상단바 -------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pad);
  background: var(--ink-850);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

/* 로고는 상호(商號) 그 자체다 — 테두리도 배경도 두르지 않고 글자만 세운다. */
.brand__logo {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--brass);
}

.brand__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-100);
}

.brand__role {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}

.topbar__spacer { flex: 1; }

.topbar select,
.topbar input {
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  font-size: 12.5px;
}

/* 장 상태 배지 */
.phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  background: var(--ink-700);
  white-space: nowrap;
}

.phase::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-400);
}

.phase[data-phase="OPEN"] { border-color: rgba(47, 168, 122, 0.5); color: var(--ok); }
.phase[data-phase="OPEN"]::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 168, 122, 0.16); }
.phase[data-phase="HALTED"] { border-color: rgba(217, 131, 36, 0.5); color: var(--warn); }
.phase[data-phase="HALTED"]::before { background: var(--warn); }
.phase[data-phase="CLOSED"] { color: var(--text-mute); }

/* 매매계약체결방법 배지 — 규정 §22① */
.method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--brass-wash);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--brass-soft);
  background: var(--brass-wash);
  white-space: nowrap;
}

.link-role {
  font-size: 11.5px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-500);
  padding-bottom: 1px;
}
.link-role:hover { color: var(--brass-soft); border-color: var(--brass); }

/* --- 현재가 띠 ----------------------------------------------------------- */
.quotebar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.quotebar::-webkit-scrollbar { display: none; }

.quotebar__block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px var(--pad);
  border-right: 1px solid var(--rule-soft);
  white-space: nowrap;
}

.quotebar__block--id { min-width: 168px; }

.quotebar__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.quotebar__code {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* 현재가는 두 줄로 세워 폭을 아낀다 — 그만큼 성과 칸에 자리를 준다 */
.quotebar__block--price {
  gap: 1px;
  min-width: 128px;
}

.price-now {
  font-family: var(--font-num);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 120ms linear;
}

.price-delta {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 12px;
  align-items: baseline;
}

.stat-grid dt {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}

.stat-grid dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 12px;
  text-align: right;
}

/* 법정 가격 — 황동 눈금 */
.quotebar__block--legal {
  border-left: 1px solid var(--brass-wash);
  background: linear-gradient(180deg, var(--brass-wash), transparent 70%);
}

.quotebar__block--legal .stat-grid dt { color: var(--brass); }
.quotebar__block--legal .stat-grid dd { color: var(--brass-soft); }

/* 남는 자리를 밀어 성과 칸을 오른쪽 끝에 붙인다 */
.quotebar__spacer { flex: 1; min-width: 8px; }

/* --- 내 거래 성과 --------------------------------------------------------
   현재가 옆에서 지금 내가 얼마이고 전체에서 몇 번째인지 한눈에 읽는다. */
.scorebar {
  gap: 3px;
  min-width: 236px;
  border-left: 1px solid var(--rule);
  border-right: none;
  background: linear-gradient(180deg, var(--ink-750), transparent 80%);
}
.scorebar[data-tone="up"] { background: linear-gradient(180deg, var(--rise-wash), transparent 80%); }
.scorebar[data-tone="down"] { background: linear-gradient(180deg, var(--fall-wash), transparent 80%); }

.scorebar__main {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.scorebar__label {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.scorebar__value {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-050);
}
.scorebar__rate {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}

.scorebar__sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.scorebar__rank {
  padding: 1px 7px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--brass-wash);
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--brass-soft);
  white-space: nowrap;
}
.scorebar__pnl {
  font-family: var(--font-num);
  font-size: 11.5px;
  margin-left: auto;
  color: var(--text-dim);
}

/* 체결 점멸 */
@keyframes tickflash-up {
  from { background: var(--rise-wash-strong); }
  to { background: transparent; }
}
@keyframes tickflash-down {
  from { background: var(--fall-wash-strong); }
  to { background: transparent; }
}
.flash-up { animation: tickflash-up 320ms ease-out; }
.flash-down { animation: tickflash-down 320ms ease-out; }

/* --- 작업 영역 ----------------------------------------------------------- */
/* 이 시스템에서 가장 중요한 것은 호가를 보고 내는 일이다. 그래서 호가창이 맨 왼쪽,
   눈이 가장 먼저 닿는 자리에 선다. 차트와 나머지는 그 다음 칸으로 물러난다. */
.workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 210px;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 0.68fr);
  gap: 1px;
  background: var(--rule-soft);
  min-height: 0;
}

/* 회원 화면 — 1열 호가창, 2열에 차트·주문·내주문, 3열 최근 체결 */
.pane[data-slot="ladder"] { grid-column: 1; grid-row: 1 / span 3; }
.pane[data-slot="chart"] { grid-column: 2; grid-row: 1; }
.pane[data-slot="ticket"] { grid-column: 2; grid-row: 2; }
.pane[data-slot="blotter"] { grid-column: 2; grid-row: 3; }
.pane[data-slot="trades"] { grid-column: 3; grid-row: 1 / span 3; }

/* 운영 콘솔 — 호가창 · 시세차트 · 참가자 순위 · 시장 운영 순서로 선다.
   체결 모니터는 차트 아래에 붙어 같은 흐름을 잇는다. */
.workspace--ops {
  /* 참가자 순위가 이 화면의 주인공이므로 가장 넓은 자리를 준다 */
  grid-template-columns: 340px minmax(0, 0.9fr) minmax(360px, 1.1fr) 320px;
  grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.workspace--ops .pane[data-slot="ladder"] { grid-column: 1; grid-row: 1 / span 2; }
.workspace--ops .pane[data-slot="chart"] { grid-column: 2; grid-row: 1; }
.workspace--ops .pane[data-slot="blotter"] { grid-column: 2; grid-row: 2; }
.workspace--ops .pane[data-slot="ranking"] { grid-column: 3; grid-row: 1 / span 2; }
.workspace--ops .pane[data-slot="console"] { grid-column: 4; grid-row: 1 / span 2; }

/* 실시간 거래현황과 시뮬레이션은 한 화면에 겹치지 않는다.
   시뮬레이션은 차트 자리를 통째로 받고, 나머지는 물러난다. */
.workspace--ops .pane[data-slot="sim"] { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.workspace--ops[data-mode="live"] .pane[data-slot="sim"] { display: none; }
.workspace--ops[data-mode="sim"] .pane[data-slot="chart"],
.workspace--ops[data-mode="sim"] .pane[data-slot="ranking"] { display: none; }
.workspace--ops[data-mode="sim"] .pane[data-slot="blotter"] { grid-column: 4; grid-row: 1 / span 2; }
.workspace--ops[data-mode="sim"] .pane[data-slot="console"] { display: none; }

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
}

.pane__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
  min-height: 34px;
}

.pane__title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-100);
}

.pane__note {
  font-size: 10.5px;
  color: var(--text-mute);
}
.pane__note[data-tone="up"] { color: var(--rise); }
.pane__note[data-tone="down"] { color: var(--fall); }

.pane__head .spacer { flex: 1; }

.pane__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

/* --- 세그먼트 컨트롤 ----------------------------------------------------- */
.seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.seg button {
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--ink-700);
  border-right: 1px solid var(--rule);
}
.seg button:last-child { border-right: none; }
.seg button[aria-pressed="true"] {
  background: var(--ink-500);
  color: var(--ink-050);
}

/* 하나만 고르는 seg와 달리 여럿을 켜 둘 수 있다 — 켜진 자리에 밑줄로 표시한다 */
.seg--multi button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--brass); }
.seg--multi button[aria-pressed="false"] { opacity: 0.55; }

/* ==========================================================================
   호가창 — 가운데 가격 기둥, 좌우로 자라는 잔량 막대
   --------------------------------------------------------------------------
   가운데 기둥이 눈금자다. 매도 잔량은 왼쪽으로, 매수 잔량은 오른쪽으로 자란다.
   실제로 쌓인 호가만 줄을 만들고, 현재가 줄도 잔량을 함께 싣는다.
   ========================================================================== */
.ladder {
  --spine: 96px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ladder__head {
  display: grid;
  grid-template-columns: 1fr var(--spine) 1fr;
  padding: 5px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}

.ladder__head span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.ladder__head span:first-child { text-align: right; color: var(--fall); }
.ladder__head span:nth-child(2) { text-align: center; color: var(--brass); }
.ladder__head span:last-child { text-align: left; color: var(--rise); }

.ladder__rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
}

.rung {
  display: grid;
  grid-template-columns: 1fr var(--spine) 1fr;
  align-items: stretch;
  height: 22px;
  position: relative;
}

/* 잔량 칸 — 기둥 쪽에 숫자, 바깥으로 자라는 막대 */
.rung__side {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  min-width: 0;
  overflow: hidden;
}
/* 매도는 왼쪽 칸 — 오른쪽(기둥) 끝에 숫자를 붙이고 막대는 왼쪽으로 */
.rung > .rung__side:first-child { justify-content: flex-end; }
.rung > .rung__side:last-child { justify-content: flex-start; }

.rung__bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: var(--w, 0%);
  transition: width 140ms ease-out;
  pointer-events: none;
}
.rung > .rung__side:first-child .rung__bar { right: 0; background: var(--fall-wash); }
.rung > .rung__side:last-child .rung__bar { left: 0; background: var(--rise-wash); }

/* 유동성공급자가 댄 몫 — 같은 자리에 겹쳐 얼마가 LP 물량인지 보이게 한다 */
.rung__bar--lp {
  background: color-mix(in srgb, var(--text) 14%, transparent);
  border-inline-start: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
}
.rung > .rung__side:first-child .rung__bar--lp {
  border-inline-start: 0;
  border-inline-end: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
}

.rung__qty {
  position: relative;
  z-index: 1;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.rung > .rung__side:first-child .rung__qty { color: var(--fall-soft); }
.rung > .rung__side:last-child .rung__qty { color: var(--rise-soft); }

/* 가운데 기둥 */
.rung__price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-100);
  user-select: none;
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  background: var(--panel);
}
/* 가격의 색은 기준가와의 관계다 — 기준가보다 높으면 적색, 낮으면 청색, 같으면 흰색.
   매도·매수의 구분은 잔량 칸과 막대가 이미 말하고 있다. */
.rung[data-trend="up"] .rung__price { color: var(--rise); }
.rung[data-trend="down"] .rung__price { color: var(--fall); }
.rung[data-trend="flat"] .rung__price { color: var(--ink-050); }

/* 값을 눌러 주문에 옮겨 담는다 */
.ladder[data-readonly="false"] .rung[data-price] .rung__price,
.ladder[data-readonly="false"] .rung[data-price] .rung__qty {
  cursor: pointer;
}
.ladder[data-readonly="false"] .rung[data-price]:hover .rung__price { color: var(--brass-soft); }
.ladder[data-readonly="false"] .rung[data-price] .rung__qty:hover { text-decoration: underline; }

/* 시장가 잔량이 섞인 단계 — 규정 제24조제2항 간주가격 */
.rung__mkt {
  font-family: var(--font-num);
  font-size: 8.5px;
  color: var(--brass);
  margin-left: 3px;
  vertical-align: super;
}

/* 내가 낸 호가가 있는 단계 — 그 수량을 따로 새긴다 */
.rung__mine {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--ink-050);
  color: var(--ink-900);
  font-family: var(--font-num);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.rung[data-mine] .rung__price {
  box-shadow: inset 0 0 0 1px var(--ink-400);
}

/* 유동성공급자가 댄 수량 — 참가자 물량과 갈라 흰색으로 새긴다 */
.rung__lp {
  position: relative;
  z-index: 1;
  padding: 0 3px;
  border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--font-num);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

/* 법정 눈금 — 상한가·기준가·하한가 */
.rung[data-legal] .rung__price {
  background: var(--brass-wash);
}
.rung[data-legal]::before {
  content: attr(data-legal);
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--brass);
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}

/* ── 현재가 줄 — 매도호가 블록과 매수호가 블록 사이 ──
   이름표는 붙이지 않는다. 노란 줄 하나가 곧 '여기가 현재가'라는 뜻이다. */
.rung--divider {
  height: 27px;
  border-top: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  background: var(--brass-wash);
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 4;
}
.rung--divider .rung__price {
  background: var(--brass-wash);
  border-color: var(--brass);
}
.rung--divider .rung__price b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brass-soft);
}
.rung--divider .rung__qty { font-weight: 600; }

.divider__badge {
  position: absolute;
  right: 8px;
  top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-num);
  font-size: 10px;
  background: var(--brass);
  color: var(--ink-900);
  z-index: 5;
  animation: badgefade 900ms ease-out forwards;
}
@keyframes badgefade {
  0% { opacity: 0; transform: translateY(3px); }
  15% { opacity: 1; transform: none; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* 표시 단계 밖의 잔량 */
.rung--overflow {
  height: 20px;
  background: var(--panel-raised);
  opacity: 0.75;
}
.rung--overflow .rung__price {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  background: var(--panel-raised);
}
.rung--overflow .rung__qty { font-size: 10.5px; color: var(--text-mute); }

/* 시뮬레이션에서 한 건씩 적용할 때 — 무슨 일이 일어났는지 색으로 가른다 */
@keyframes rungrest {
  from { background: var(--brass-wash); }
  to { background: transparent; }
}
@keyframes rungcancel {
  from { background: var(--ink-600); opacity: 0.55; }
  to { background: transparent; opacity: 1; }
}
.rung[data-flash="rest"] { animation: rungrest 360ms ease-out; }
.rung[data-flash="cancel"] { animation: rungcancel 360ms ease-out; }

.ladder__empty {
  padding: 28px var(--pad);
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.7;
}

/* --- 운영 콘솔의 호가창 --------------------------------------------------
   운영자는 호가를 내지 않고 지켜본다. 대신 표시 단계를 여기서 바로 돌리고,
   지금 보고 있는 것이 실거래인지 시뮬레이션인지 창 자체가 말해 준다. */
.ladder__depth {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px var(--pad);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--panel-raised);
}
.ladder__depth .lbl {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  white-space: nowrap;
}
.ladder__depth input[type="range"] {
  width: 100%;
  min-width: 60px;
  accent-color: var(--brass);
}
.ladder__depth output {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--brass-soft);
  min-width: 4ch;
  text-align: right;
}

/* 총잔량 — 매도는 왼쪽, 매수는 오른쪽. 호가창 본문과 같은 방향 */
.ladder__foot .lbl {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-right: 4px;
}

/* 유동성공급 설정 — 이름과 값을 짝지어 촘촘하게 */
.lp-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  align-items: center;
}
.lp-form label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}
.lp-form input {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--font-num);
  font-size: 12px;
  text-align: right;
}
.lp-form label i {
  font-style: normal;
  color: var(--text-dim);
  opacity: 0.7;
}
.lp-form .mini-btn { grid-column: 1 / -1; }

/* seg를 값 자리에 놓을 때 이름표 — label이 아니므로 모양만 맞춘다 */
.lp-form__label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}
.lp-form .seg--multi { justify-self: stretch; }
.lp-form .seg--multi button { flex: 1; }

/* 자주 만지지 않는 값은 접어 둔다 — 자주 만지는 값만 앞에 둔다 */
.lp-form__more {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.lp-form__more summary {
  padding: 3px 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  cursor: pointer;
  list-style: none;
}
.lp-form__more summary::-webkit-details-marker { display: none; }
.lp-form__more summary::before {
  content: "▸ ";
  color: var(--text-dim);
}
.lp-form__more[open] summary::before { content: "▾ "; }
.lp-form__more summary:hover { color: var(--text); }
.lp-form__more-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  align-items: center;
  padding: 5px 0 2px;
}

/* 지금 값으로 호가창이 어떤 모습이 될지 미리 읽어 준다 */
.lp-form__preview {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 6px 8px;
  border: 1px dashed var(--brass-wash);
  border-radius: var(--r-md);
  background: var(--brass-wash);
  font-family: var(--font-num);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--brass-soft);
}

/* 유동성공급 실적 — 시장을 이은 대가로 무엇이 남았는지 */
.lp-perf {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--ink-700);
}
.lp-perf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
}
.lp-perf__head b {
  font-size: 13px;
  font-weight: 600;
}
.lp-perf .stat-grid { grid-template-columns: auto minmax(0, 1fr); }

/* 시나리오가 어디까지 왔는지 — 장 개시에서 마감까지 한 줄로 */
.flow-track {
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}
.flow-track__fill {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: var(--brass);
  transition: width 400ms linear;
}

/* 운영자임을 밝히기 전에는 콘솔을 그리지 않는다. 마크업이 정적이라 그냥 두면 장 개시·마감
   단추가 늘어선 화면이 한 번 보인 뒤에 잠금 카드로 바뀐다 — 잠깐이라도 보여선 안 된다. */
.shell--gated { visibility: hidden; }

/* 운영자가 아니면 화면을 덮는다 — 무엇이 잘못됐는지 말하고 로그인으로 보낸다.
   참가 화면(.gate)과 이름을 나눠 쓰면 뒤에 오는 쪽이 앞을 덮으므로 제 이름을 준다. */
.oplock {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--pad);
  background: var(--bg);
}
.oplock__card {
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: 380px;
  padding: 28px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg, 10px);
  background: var(--panel);
  text-align: center;
}
.oplock__card b { font-size: 15px; }
.oplock__card p { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.oplock__card a { text-decoration: none; }
.oplock__form {
  display: grid;
  gap: 8px;
  width: 100%;
  justify-items: stretch;
}
.oplock__form input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 13px;
}
.oplock__form .console__check { justify-self: start; }
.gate__error {
  margin: 0;
  font-size: 11.5px;
  color: var(--danger-soft);
}

/* 토큰이 확인되기 전에는 무엇이 잠겼는지 한 줄로 알린다 */
.console__lock {
  margin: var(--pad) var(--pad) 0;
}
[data-operator] button:disabled,
[data-operator] input:disabled,
[data-operator] select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 호가 정정 자리 — 무엇이 정정인지 화면이 먼저 말해 준다 (세칙 §17②③) */
.sheet--amend { max-width: 360px; }
.amend .sheet__body {
  display: grid;
  gap: 8px;
}
.amend label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.amend label i {
  font-style: normal;
  color: var(--text-dim);
  opacity: 0.7;
}
.amend select,
.amend input {
  width: 100%;
  padding: 6px 8px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 13px;
}
.amend__row { display: grid; gap: 4px; }
.amend__verdict {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--ink-700);
  font-size: 11.5px;
  line-height: 1.6;
}
/* 보낼 수 없는 것 · 취소로 가는 것 · 정정으로 가는 것을 색으로 가른다 */
.amend__verdict[data-kind="reject"] {
  border-color: var(--fall-wash);
  color: var(--fall-soft);
}
.amend__verdict[data-kind="cancel"] {
  border-color: var(--brass-wash);
  color: var(--brass-soft);
}
.amend__verdict[data-kind="amend"] {
  border-color: var(--rise-wash);
  color: var(--rise-soft);
}
.amend__verdict b { color: var(--text); }

/* 폭을 채우는 seg — 설정 카드 안에서 쓴다 */
.seg--wide { width: 100%; }
.seg--wide button { flex: 1; }

/* 지금 걸려 있는 제약을 알리는 배지 */
.method--warn {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.console__legend span[data-tone="warn"] { color: var(--warn); }

/* 화면 전환 seg — 실시간 거래현황과 시뮬레이션을 가르는 가장 큰 구분이다 */
.seg--mode button {
  padding: 5px 12px;
  font-size: 11.5px;
}
.seg--mode button[aria-pressed="true"] {
  background: var(--brass-wash);
  color: var(--brass-soft);
  box-shadow: inset 0 -2px 0 var(--brass);
}

.pane__chip {
  padding: 1px 6px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--brass-wash);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--brass-soft);
}

/* 시뮬레이션을 보는 동안에는 호가창 전체에 표식을 건다 */
.ladder[data-source="sim"] {
  box-shadow: inset 0 0 0 1px var(--brass);
}
.ladder[data-source="sim"] .ladder__head {
  background: var(--brass-wash);
}
.ladder[data-source="sim"] .rung--divider .rung__price::after {
  content: "시뮬";
  margin-left: 5px;
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--brass);
}

[hidden] { display: none !important; }

/* 매수·매도 잔량 비율 — 호가창 아래 */
.ladder__pressure {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px var(--pad);
  border-top: 1px solid var(--rule);
  background: var(--panel-raised);
  font-family: var(--font-num);
  font-size: 11px;
}
.pressure__bid { color: var(--rise); }
.pressure__ask { color: var(--fall); }

.pressure__bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--fall);
}
.pressure__fill {
  display: block;
  height: 100%;
  width: var(--bid, 50%);
  background: var(--rise);
  transition: width 160ms ease-out;
}

/* 최근 체결 테이프 */
.tbl--tape td { padding: 3px 8px; font-size: 11px; }
.tbl--tape th { font-size: 9.5px; padding: 5px 8px; }
.tbl--tape td:last-child { color: var(--text-mute); font-size: 10px; }

/* 미체결 건수 배지 */
.tabs__count {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--ink-600);
  font-family: var(--font-num);
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-100);
}
.tabs button[aria-selected="true"] .tabs__count {
  background: var(--brass);
  color: var(--ink-900);
}

/* 호가창 합계 */
.ladder__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 7px var(--pad);
  border-top: 1px solid var(--rule);
  background: var(--panel-raised);
  font-family: var(--font-num);
  font-size: 12px;
}
.ladder__foot .total-ask { text-align: right; color: var(--fall); }
.ladder__foot .total-bid { text-align: left; color: var(--rise); }
.ladder__foot .mid {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}


/* ==========================================================================
   차트
   ========================================================================== */
.chart {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chart__canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chart__canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.chart__readout {
  position: absolute;
  top: 8px;
  left: 10px;
  display: flex;
  gap: 12px;
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-dim);
  pointer-events: none;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.chart__readout:empty { display: none; }

/* ==========================================================================
   주문표
   ========================================================================== */
/* 최우선호가 요약 — 주문표 바로 위 */
.touchline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1px;
  background: var(--rule-soft);
  border-bottom: 1px solid var(--rule);
}

/* 이름표는 위에, 가격과 잔량은 한 줄에 — 주문칸 위에서 자리를 적게 쓴다 */
.touchline__side {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 8px;
  padding: 5px 10px;
  background: var(--panel-raised);
  text-align: left;
}
.touchline__side:hover { background: var(--ink-600); }
.touchline__side .label { grid-column: 1 / -1; }
.touchline__side b {
  font-family: var(--font-num);
  font-size: 13.5px;
  font-weight: 600;
}
.touchline__side .num:not(b) {
  font-family: var(--font-num);
  font-size: 10.5px;
  color: var(--text-mute);
}

.touchline__mid {
  display: grid;
  gap: 0;
  place-items: center;
  align-content: center;
  padding: 5px 10px;
  background: var(--panel-raised);
}
.touchline__mid .num {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--brass-soft);
}

/* 호가 종류 탭 — 매수·매도 공통 */
.ordertype {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}

.ordertype button {
  padding: 8px 2px;
  font-size: 11.5px;
  color: var(--text-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ordertype button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--brass);
}

.ordertype__hint {
  margin: 0;
  padding: 6px var(--pad);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--brass-soft);
  background: var(--brass-wash);
}
.ordertype__hint:empty { display: none; }

/* 호가 조건은 종류 탭과 한 줄에 둔다 — 둘 다 매수·매도에 함께 걸린다 */
.orderbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-right: var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}
.orderbar .ordertype {
  flex: 1;
  border-bottom: 0;
}
.orderbar select {
  align-self: center;
  padding: 5px 8px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* 매수 · 매도를 나란히 */
.orderpad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--rule-soft);
}

/* 이름표를 입력칸 왼쪽에 붙여 세로 자리를 아낀다 */
.orderpad__side {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  align-content: start;
  padding: 8px 10px;
  background: var(--panel);
}

.orderpad__head,
.orderpad__side .chips,
.orderpad__side .submit,
.orderpad__side .field__hint {
  grid-column: 1 / -1;
}

.orderpad__head {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.orderpad__side[data-side="BUY"] .orderpad__head { color: var(--rise); }
.orderpad__side[data-side="SELL"] .orderpad__head { color: var(--fall); }

.orderpad__side label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
}

.orderpad__side input {
  width: 100%;
  min-width: 0;
  padding: 4px 8px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--font-num);
  font-size: 13px;
  text-align: right;
}
.orderpad__side input:disabled {
  color: var(--text-mute);
  background: var(--ink-750);
}
.orderpad__side .amount { color: var(--text-dim); }

.orderpad__side .stepper { grid-template-columns: 26px 1fr 26px; gap: 3px; }
.orderpad__side .stepper button { font-size: 14px; }
.orderpad__side .chips { margin-top: 2px; }
.orderpad__side .chips button { padding: 2px 6px; font-size: 10.5px; }
.orderpad__side .submit { margin-top: 2px; padding: 8px; font-size: 13px; }
.orderpad__side .field__hint { min-height: 0; }

/* 우측 상단의 나 — 구글이 준 이름·이메일·사진을 그대로 쓴다 */
.whoami {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--brass-wash);
  border-radius: 999px;
  background: var(--brass-wash);
  max-width: 220px;
}
.whoami__face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.whoami__lines {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.whoami__name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brass-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.whoami__mail {
  font-size: 9.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 이름만 있을 때는 한 줄로 — 이름으로 참가한 사람이 그렇다 */
.whoami:not(:has(.whoami__mail:not([hidden]))) { padding-left: 10px; }

/* ==========================================================================
   참가하기 — 로그인 화면
   ========================================================================== */
.gate {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
  background: var(--bg);
}

.gate__card {
  width: min(420px, 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gate__head {
  padding: 26px var(--pad) 18px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}
.gate__head .brand__logo { display: block; margin-bottom: 12px; font-size: 21px; }
.gate__head h1 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-050);
}
.gate__head p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-mute);
}
.gate__head b { color: var(--brass-soft); font-family: var(--font-num); }

.gate__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px var(--pad);
}

.gate__google { display: grid; justify-items: center; gap: 8px; }
.gate__hint,
.gate__note {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-mute);
  text-align: center;
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gate__form label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
}
.gate__form input {
  padding: 11px 10px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--text);
}
.gate__form input:focus-visible { outline: 1px solid var(--brass); outline-offset: 1px; }
.gate__form .submit { margin-top: 4px; padding: 12px; }

.gate__foot {
  padding: 12px var(--pad);
  border-top: 1px solid var(--rule);
  text-align: center;
  background: var(--panel-raised);
}

/* 실적 — 시드머니에서 지금까지 */
.scoreboard {
  padding: var(--pad);
  border-bottom: 1px solid var(--rule);
}
.scoreboard__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.scoreboard__head .label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
}
.scoreboard__head b {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-050);
}
.scoreboard__head span.num {
  font-family: var(--font-num);
  font-size: 13px;
  margin-left: auto;
}
/* 이름과 값을 짝지어 두 벌씩 — 좁아지면 한 벌로 접힌다 */
.scoreboard__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: baseline;
  margin: 0;
}
.scoreboard__grid dt {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}
.scoreboard__grid dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 12px;
  text-align: right;
  color: var(--ink-100);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .scoreboard__grid { grid-template-columns: auto minmax(0, 1fr); }
}

/* 잔고 */
.position {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin: 0;
  padding: var(--pad);
  border-bottom: 1px solid var(--rule);
}
.position dt {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.position dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 13px;
  text-align: right;
  color: var(--ink-050);
}
.position dd#pos-qty { font-size: 16px; font-weight: 600; }

.field__hint {
  font-size: 10.5px;
  color: var(--text-mute);
  min-height: 14px;
}
.field__hint[data-tone="error"] { color: var(--danger); }
.field__hint[data-tone="legal"] { color: var(--brass); }

.stepper {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 4px;
}
.stepper button {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--ink-700);
  color: var(--text-dim);
  font-family: var(--font-num);
  font-size: 15px;
  line-height: 1;
}
.stepper button:hover { background: var(--ink-600); color: var(--text); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chips button {
  padding: 3px 8px;
  font-size: 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--ink-700);
  color: var(--text-dim);
}
.chips button:hover { border-color: var(--brass); color: var(--brass-soft); }

.submit {
  padding: 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  transition: filter 100ms;
}
.submit[data-side="BUY"] { background: var(--rise); color: #fff; }
.submit[data-side="SELL"] { background: var(--fall); color: #fff; }
.submit:hover { filter: brightness(1.08); }
.submit:disabled { background: var(--ink-600); color: var(--text-mute); cursor: not-allowed; filter: none; }

.notice {
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 11.5px;
  line-height: 1.5;
  border: 1px solid var(--rule);
  background: var(--ink-750);
  color: var(--text-dim);
}
.notice[data-tone="error"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger-soft); background: var(--danger-wash); }
.notice[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.notice:empty { display: none; }

/* ==========================================================================
   표 (체결·미체결·시나리오)
   ========================================================================== */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}

.tabs button {
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--brass);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 8px;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  background: var(--panel-raised);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }

.tbl td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl td.txt { font-family: var(--font-ui); }
.tbl tbody tr:hover { background: var(--ink-750); }

.tbl__empty td {
  padding: 22px 10px;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--font-ui);
  line-height: 1.7;
}

.mini-btn {
  padding: 2px 7px;
  font-size: 10.5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  background: var(--ink-700);
}
.mini-btn:hover { border-color: var(--brass); color: var(--brass-soft); }
.mini-btn--danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--rule)); color: var(--danger-soft); }
.mini-btn--danger:hover { border-color: var(--danger); color: var(--danger-soft); background: var(--danger-wash); }

/* ==========================================================================
   운영 콘솔 — 고정 밴드 · 설정 카드
   --------------------------------------------------------------------------
   늘 눌러야 하는 것(장 개시·마감·중단·재개)은 pane 머리 아래 고정 밴드에 두고,
   가끔 여는 설정(기준가격·상장·토큰)은 접어 둔다.
   ========================================================================== */
.opsbar {
  display: grid;
  gap: 7px;
  padding: 8px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}

/* 전 종목에 걸리는 동안에는 밴드가 스스로 경고한다 */
.opsbar[data-scope="all"] {
  box-shadow: inset 3px 0 0 var(--warn);
}

/* 장 상태와 갈 수 있는 길 — 지금 어디에 있고 다음이 무엇인지 한 줄로 */
.phasepath {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.phasepath__node {
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  background: var(--ink-750);
  white-space: nowrap;
}
.phasepath__node[data-on="true"] {
  border-color: var(--brass);
  background: var(--brass-wash);
  color: var(--brass-soft);
  font-weight: 600;
}
.phasepath__arrow {
  position: relative;
  padding: 0 14px 0 4px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  opacity: 0.45;
}
.phasepath__arrow::after {
  content: "▸";
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}
/* 지금 갈 수 있는 길만 살아 있다 */
.phasepath__arrow[data-open="true"] { opacity: 1; color: var(--brass); }

.opsbar__clock {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* 단축키 — 손이 자판을 떠나지 않게 */
.op-btn kbd {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 400;
  color: var(--text-mute);
  background: var(--ink-750);
}
.op-btn:disabled kbd { opacity: 0.5; }

/* 참가자 순위 */
.tbl--rank tbody tr { cursor: pointer; }
.tbl--rank tbody tr:focus-visible { outline: 1px solid var(--brass); outline-offset: -1px; }

/* 참가자 상세 — 순위표에서 이름을 누르면 열린다 */
.sheet {
  width: min(760px, 92vw);
  max-height: 84vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.sheet__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
}
.sheet__head b {
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--ink-050);
}
.sheet__head .rank {
  padding: 2px 8px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--brass-soft);
  background: var(--brass-wash);
}
.sheet__close {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-700);
  color: var(--text-dim);
  font-size: 11px;
}
.sheet__close:hover { border-color: var(--brass); color: var(--brass-soft); }
.sheet__body {
  padding: var(--pad);
  overflow: auto;
  max-height: calc(84vh - 56px);
}
.sheet__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: baseline;
  margin: 0 0 12px;
}
.sheet__grid dt {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}
.sheet__grid dd {
  margin: 0;
  font-family: var(--font-num);
  font-size: 12px;
  text-align: right;
  color: var(--ink-100);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .sheet__grid { grid-template-columns: auto minmax(0, 1fr); }
}
.sheet__legend {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  margin: 0 0 6px;
}

.tbl--rank td { font-size: 11px; padding: 4px 8px; }
.tbl--rank td:first-child { color: var(--text-mute); font-family: var(--font-num); }
.tbl--rank tr[data-rank="1"] td:first-child,
.tbl--rank tr[data-rank="2"] td:first-child,
.tbl--rank tr[data-rank="3"] td:first-child { color: var(--brass); font-weight: 700; }
.tbl--rank tr[data-me="true"] { background: var(--brass-wash); }
/* 같은 자산이면 같은 등수 — 숫자 뒤에 작은 표식을 단다 */
.tbl--rank td[data-tied="true"]::after {
  content: "=";
  margin-left: 2px;
  font-size: 9px;
  color: var(--brass);
}
.tbl--rank .rank__id { font-family: var(--font-num); color: var(--ink-050); }

/* 운영 기록 */
.tbl--log td { font-size: 10.5px; padding: 4px 8px; vertical-align: top; }
.tbl--log td:first-child { color: var(--text-mute); white-space: nowrap; }
.tbl--log tr[data-ok="false"] td:last-child { color: var(--danger-soft); }
.tbl--log tr[data-ok="true"] td:last-child { color: var(--ok); }

.opsbar__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
}
.chip .num { font-family: var(--font-num); }
.chip--phase[data-phase="OPEN"] { border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); }
.chip--phase[data-phase="HALTED"] { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
.chip--phase[data-phase="CLOSED"],
.chip--phase[data-phase="PRE_OPEN"] { color: var(--text-mute); }
.chip--method { border-color: var(--brass-wash); color: var(--brass-soft); }
.chip--method[data-pending="true"]::after {
  content: "예약";
  font-size: 9px;
  color: var(--warn);
}

.opsbar__scope {
  display: flex;
  align-items: center;
  gap: 8px;
}
.opsbar__scope > .lbl {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  white-space: nowrap;
}
.opsbar__scope .seg { flex: 1; min-width: 0; }
.opsbar__scope .seg button { flex: 1; min-width: 0; }

.opsbar__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}

/* 장을 열고 닫는 자리 — 시장 흐름 카드 안에 함께 둔다.
   장 개시가 곧 시나리오의 시작이므로 두 조작이 한자리에 있어야 읽힌다. */
.console__ops {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
}
/* 전 종목에 걸리는 동안에는 이 자리도 스스로 경고한다 */
.console__ops[data-scope="all"] {
  margin-left: -12px;
  padding-left: 9px;
  box-shadow: inset 3px 0 0 var(--warn);
}
.console__ops .opsbar__actions { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }

.opsbar__notice { margin: 0; }
/* 알림 자리는 비어 있어도 접근성 트리에 남긴다 */
#op-notice:empty {
  display: block;
  height: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
}

/* --- 설정 카드 ----------------------------------------------------------- */
.console {
  padding: var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  /* 접어 둔 카드가 옆의 큰 카드 높이만큼 늘어나지 않게 한다 */
  align-items: start;
  gap: 10px;
}

.console__group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel-raised);
  min-width: 0;
}

.console__group--wide { grid-column: 1 / -1; }

/* 접어 두는 설정 — details 마커가 살아 있어야 하므로 block으로 되돌린다 */
details.console__group {
  display: block;
  padding: 0;
}
details.console__group > .console__fold-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 12px 10px;
}
.console__summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.console__summary::-webkit-details-marker { display: none; }
.console__summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-mute);
}
details[open] > .console__summary::after { content: "－"; }
.console__summary:hover { background: var(--ink-700); }
.console__summary b {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.console__summary span {
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.03em;
}

.console__legend {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.console__legend b {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.console__legend span {
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.03em;
}

.console__check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 11.5px;
  color: var(--text-mute);
}

.btn-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.op-btn {
  padding: 10px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--ink-700);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-100);
}
.op-btn:hover:not(:disabled) { background: var(--ink-600); }
.op-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.op-btn--open { border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); }
.op-btn--close { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger-soft); }
.op-btn--halt { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
/* 지금 눌러야 할 버튼 — 중단 상태의 '재개' */
.op-btn--next:not(:disabled) {
  border-color: var(--brass);
  color: var(--brass-soft);
  background: var(--brass-wash);
}

.op-btn__sub {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-mute);
}

/* 체결방법 선택 — 두 방법의 차이를 문장으로 보여 준다 */
.method-pick {
  display: grid;
  gap: 6px;
}

.method-pick button {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.method-pick button b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-100);
}
.method-pick button span {
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-mute);
}
.method-pick button[aria-pressed="true"] {
  border-color: var(--brass);
  background: var(--brass-wash);
}
.method-pick button[aria-pressed="true"] b { color: var(--brass-soft); }
.method-pick button:hover:not([aria-pressed="true"]) { background: var(--ink-600); }

.listing {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.listing__row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6px;
}
.listing input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 12.5px;
}
.listing input#new-base {
  font-family: var(--font-num);
  font-size: 14px;
  text-align: right;
}

.listing__preview {
  margin: 0;
  padding: 7px 9px;
  border: 1px dashed var(--brass-wash);
  border-radius: var(--r-md);
  background: var(--brass-wash);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--brass-soft);
}
.listing__preview[data-tone="error"] {
  background: var(--danger-wash);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger-soft);
}
.listing__preview b {
  font-family: var(--font-num);
  color: var(--brass);
}

.range-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.range-row input[type="range"] {
  width: 100%;
  accent-color: var(--brass);
}
.range-row output {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--brass-soft);
  min-width: 2ch;
  text-align: right;
}

.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.input-solo {
  width: 100%;
  padding: 7px 8px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 12.5px;
}

.inline-form input {
  padding: 7px 8px;
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--font-num);
  font-size: 13px;
  text-align: right;
}

/* 상장 종목 보드 */
.tbl__sub {
  display: block;
  font-size: 10px;
  color: var(--text-mute);
}
.tbl__method {
  display: block;
  font-size: 10px;
  color: var(--brass);
}
.tbl__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* ==========================================================================
   시뮬레이션 — 스텝 테이프
   --------------------------------------------------------------------------
   호가를 한 건씩 적용하며 되짚어 보는 곳. 트랜스포트는 재생기와 같은 규약을 따르고,
   테이프 한 줄이 호가 한 건이다.
   ========================================================================== */
.sim {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.transport {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--panel-raised);
  flex-wrap: wrap;
}
.transport .spacer { flex: 1; }

.transport button {
  width: 30px;
  height: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-700);
  color: var(--ink-100);
  font-family: var(--font-num);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.transport button:hover:not(:disabled) { background: var(--ink-600); border-color: var(--brass); }
.transport button:disabled { opacity: 0.35; cursor: not-allowed; }
.transport button.wide { width: auto; padding: 0 10px; }

/* 재생 중임을 버튼 하나가 아니라 줄 전체가 알린다 */
.transport[data-playing="true"] #sim-play {
  border-color: var(--brass);
  color: var(--brass-soft);
  background: var(--brass-wash);
}

.transport__pos {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--brass-soft);
  margin-left: 4px;
  min-width: 7ch;
  text-align: center;
}

.transport__seek {
  flex: 1 1 120px;
  min-width: 80px;
  accent-color: var(--brass);
}
.transport__seek:disabled { opacity: 0.35; }

/* 재생 속도 — 한 건에 몇 밀리초를 줄지. 시장 운영이 아니라 **재현**의 속도다. */
.transport__speed { margin-left: auto; }
.transport__speed button { padding: 3px 7px; }

/* 머리의 '새 시나리오' 열림 메뉴 — 스크립트 없이 details로 */
.menu { position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--brass); color: var(--brass-soft); }
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel-raised);
  box-shadow: var(--shadow);
}
.menu__panel button {
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-700);
  color: var(--ink-100);
  font-size: 11.5px;
  text-align: left;
}
.menu__panel button:hover { background: var(--ink-600); border-color: var(--brass); }
.menu__panel .menu__legend {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  padding: 2px 2px 0;
}

.tape {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tape__head,
.tape__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 56px 46px;
  gap: 8px;
  align-items: baseline;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 3px solid transparent;
  font-size: 11.5px;
}

.tape__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 5px;
  padding-bottom: 5px;
  background: var(--panel-raised);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.tape__head span:nth-child(3),
.tape__head span:last-child { text-align: right; }

.tape__row {
  cursor: pointer;
  color: var(--text);
}
.tape__row:hover { background: var(--ink-700); }
.tape__row:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: -1px;
}

.tape__row[data-state="done"] { color: var(--text-dim); }
/* 아직 적용하지 않은 줄 — 흐리게 하되 읽을 수는 있게 */
.tape__row[data-state="pending"] {
  color: var(--text-dim);
  border-left-style: dashed;
}
.tape__row[data-state="next"] {
  border-left-color: var(--brass-wash);
  border-left-style: dashed;
}
.tape__row[data-state="current"] {
  border-left-color: var(--brass);
  background: var(--brass-wash);
  color: var(--text);
}
/* 매수·매도는 호가의 갈래일 뿐 오르내림이 아니다 — 적·청(--rise/--fall)을 쓰지 않는다.
   그 색은 오직 '기준가격보다 높은가 낮은가'를 말하는 자리에만 쓴다. */
.tape__row[data-side] .tape__desc { color: var(--text); }
.tape__row[data-side="SELL"] .tape__desc { color: var(--text-dim); }
.tape__row[data-ok="false"] .tape__desc { text-decoration: line-through; }

.tape__idx {
  font-family: var(--font-num);
  font-size: 10.5px;
  color: var(--text-mute);
  text-align: right;
}
.tape__row[data-state="current"] .tape__idx { color: var(--brass-soft); }

.tape__desc {
  font-family: var(--font-num);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tape__qty {
  font-family: var(--font-num);
  font-size: 11px;
  text-align: right;
  color: var(--text-dim);
}

/* 그 호가가 무엇을 남겼는지 — 체결 · 등재 · 취소 · 거부 */
.tape__badge {
  justify-self: end;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}
.tape__badge--fill { border-color: var(--brass); color: var(--brass-soft); background: var(--brass-wash); }
.tape__badge--rest { border-color: var(--rule); color: var(--text-dim); }
.tape__badge--cancel { border-color: var(--rule); color: var(--text-mute); text-decoration: line-through; }
.tape__badge--reject { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }

/* ==========================================================================
   탭바 (모바일)
   ========================================================================== */
.tabbar {
  display: none;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  border-top: 1px solid var(--rule);
  background: var(--ink-850);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar button {
  padding: 9px 4px calc(9px + env(safe-area-inset-bottom, 0px));
  font-size: 11.5px;
  color: var(--text-mute);
  border-top: 2px solid transparent;
  margin-top: -1px;
  min-height: 44px;
}
.tabbar button[aria-selected="true"] {
  color: var(--text);
  border-top-color: var(--brass);
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1199px) {
  .workspace {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.7fr);
  }
  .pane[data-slot="ladder"] { grid-column: 1; grid-row: 1 / span 2; }
  .pane[data-slot="trades"] { grid-column: 1; grid-row: 3; }
  .pane[data-slot="chart"] { grid-column: 2; grid-row: 1; }
  .pane[data-slot="ticket"] { grid-column: 2; grid-row: 2; }
  .pane[data-slot="blotter"] { grid-column: 2; grid-row: 3; }

  .workspace--ops {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(180px, 260px) minmax(0, 1fr) minmax(0, 0.7fr);
  }
  .workspace--ops .pane[data-slot="ladder"] { grid-column: 1; grid-row: 1 / span 2; }
  .workspace--ops .pane[data-slot="blotter"] { grid-column: 1; grid-row: 3; }
  .workspace--ops .pane[data-slot="chart"] { grid-column: 2; grid-row: 1; }
  .workspace--ops .pane[data-slot="ranking"] { grid-column: 2; grid-row: 2; }
  .workspace--ops .pane[data-slot="console"] { grid-column: 2; grid-row: 3; }
  .workspace--ops .pane[data-slot="sim"] { grid-column: 2; grid-row: 1 / span 3; }
  .workspace--ops[data-mode="sim"] .pane[data-slot="blotter"] { grid-column: 1; grid-row: 3; }
}

@media (max-width: 479px) {
  .orderpad { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body { font-size: 13.5px; }

  /* 상단바는 좁은 화면에서 두 줄로 접힌다 — 줄 높이를 내용에 맡겨 아래를 덮지 않게 한다 */
  .shell { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .topbar {
    flex-wrap: wrap;
    gap: 8px 10px;
    min-height: var(--topbar-h);
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* 좁은 화면에서도 어느 회사의 무엇인지는 남긴다 — 화면 역할만 접는다 */
  .brand__role { display: none; }

  .quotebar__block--stats { display: none; }
  .quotebar__block--id { min-width: 0; }
  .quotebar__block--price { min-width: 0; }
  .scorebar { min-width: 0; padding-left: 10px; padding-right: 10px; }
  .scorebar__value { font-size: 16px; }

  .workspace {
    display: block;
    overflow: hidden;
    position: relative;
  }
  .pane[data-slot="trades"] { display: none; }
  .pane[data-slot="trades"].is-active { display: flex; }

  .pane {
    display: none;
    height: 100%;
  }
  .pane.is-active { display: flex; }

  .pane[data-slot="chart"] .chart__canvas-wrap { min-height: 40vh; }

  .tabbar { display: grid; }
  .workspace--ops[data-mode="live"] ~ .tabbar #tab-sim,
  .workspace--ops[data-mode="sim"] ~ .tabbar #tab-console,
  .workspace--ops[data-mode="sim"] ~ .tabbar #tab-chart,
  .workspace--ops[data-mode="sim"] ~ .tabbar #tab-ranking { display: none; }

  .ladder { --spine: 104px; }
  .rung { height: 26px; }
  .rung__price { font-size: 13.5px; }
  .rung__qty { font-size: 12.5px; }

  /* 16px 미만이면 사파리가 입력칸을 누를 때 화면을 확대한다 */
  .orderpad__side input,
  .listing input,
  .inline-form input,
  .topbar input,
  .topbar select,
  .orderbar select { font-size: 16px; padding: 11px 10px; }
  .listing input#new-base { font-size: 16px; }

  .submit { padding: 15px; }
  .orderpad__side .submit { padding: 14px; font-size: 14px; }
  .orderpad__side .chips button { padding: 7px 10px; font-size: 11.5px; }
  .stepper { grid-template-columns: 44px 1fr 44px; }
  .stepper button { min-height: 44px; }

  /* 운영 콘솔 — 좁은 화면에서도 손가락으로 누를 수 있게 */
  .topbar .method, .topbar .link-role { display: none; }
  #symbol-select { min-width: 0; flex: 1 1 120px; }
  .mini-btn { padding: 10px 12px; min-height: 44px; }
  .transport button { width: 44px; height: 44px; }
  .op-btn { padding: 14px 10px; }
  .console { grid-template-columns: minmax(0, 1fr); }
  .opsbar__actions { grid-template-columns: repeat(2, 1fr); }
  .tbl__actions { flex-direction: column; gap: 6px; white-space: normal; }
  .console__check { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}