:root {
  color-scheme: dark;
  --canvas: #080d12;
  --canvas-raised: #0c1319;
  --surface: #111a22;
  --surface-inner: #16222b;
  --surface-soft: #1b2832;
  --line: #2a3a45;
  --line-strong: #3a4d58;
  --text-title: #f4f8f7;
  --text-body: #cbd5d2;
  --text-muted: #8e9c99;
  --text-faint: #5c6b68;
  --positive: #46d69a;
  --positive-soft: rgba(70, 214, 154, 0.11);
  --negative: #ff665f;
  --negative-soft: rgba(255, 102, 95, 0.11);
  --warning: #e4b653;
  --warning-soft: rgba(228, 182, 83, 0.12);
  --checking: #72bcea;
  --checking-soft: rgba(114, 188, 234, 0.11);
  --radius-card: 18px;
  --radius-inner: 14px;
  --radius-control: 12px;
  --space-card: 18px;
  --space-card-mobile: 14px;
  --pad-card: 28px;
  --pad-card-mobile: 20px;
  --font-display: 32px;
  --font-title: 22px;
  --font-body: 16px;
  --font-small: 14px;
  --font-micro: 12px;
}

* {
  box-sizing: border-box;
}

.svg-sprite {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

html {
  min-width: 320px;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% -12%, rgba(70, 214, 154, 0.065), transparent 28%),
    linear-gradient(180deg, var(--canvas-raised) 0, var(--canvas) 180px);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.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;
}

/* 포르쉐 암실은 배경, 로그인 컨트롤은 실제 HTML 한 벌만 둔다. */
.gate {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #020303;
}

.gate-bg,
.gate-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.gate-bg img {
  object-fit: cover;
  object-position: center;
}

.gate-form {
  position: absolute;
  z-index: 1;
  right: clamp(42px, 7vw, 118px);
  top: 61%;
  width: clamp(300px, 23vw, 372px);
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gate-form input,
.gate-form button {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(171, 181, 183, 0.28);
  border-radius: 10px;
  background: rgba(5, 9, 11, 0.54);
  color: rgba(240, 243, 242, 0.94);
  font: inherit;
  font-size: 15px;
  outline: none;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 140ms ease, background 140ms ease;
}

.gate-form input { padding: 0 18px; }
.gate-form input::placeholder { color: rgba(199, 207, 207, 0.48); }
.gate-form input:focus { border-color: rgba(215, 225, 224, 0.58); background: rgba(9, 14, 16, 0.7); }
.gate-form button { margin-top: 4px; cursor: pointer; font-weight: 650; letter-spacing: 0.02em; }
.gate-form button:hover { border-color: rgba(224, 231, 230, 0.5); background: rgba(20, 27, 28, 0.68); }
.gate-form button:disabled { cursor: wait; color: rgba(198, 202, 201, 0.48); }
.gate-password { display: contents; }
.gate__reason { min-height: 18px; margin: 0 2px; color: rgba(235, 174, 106, 0.9); font-size: 12px; }

button,
a,
summary {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-header {
  /* ★ 스크롤해도 맨 위에 붙어 있는다 (2026-08-18 Owner 결정 7).
     z-index 는 확인창(.cfg-dialog = 50)보다 **낮게** 둔다 — 헤더가 확인창 위로 튀어나오면 안 된다. */
  position: sticky;
  top: 0;
  z-index: 30;
  height: 74px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 13, 18, 0.92);
  backdrop-filter: blur(10px);
}

/* ★ 로고는 누를 수 있다 — 대시보드로 간다 (2026-08-18 Owner 결정 8). */
.brand { cursor: pointer; }

.app-header__inner {
  width: min(100% - 48px, 1600px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 34px;
}

.brand {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}

.brand__picture,
.brand__image {
  display: block;
}

.brand__image {
  width: 160px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}

.top-nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 6px;
}

.top-nav a {
  height: 100%;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
}

.top-nav a[aria-current="page"] {
  border-bottom-color: var(--positive);
  color: var(--positive);
}

.account-menu {
  position: relative;
  margin-left: auto;
}

.account-chip {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-body);
  white-space: nowrap;
  cursor: pointer;
}

.account-menu.is-open .account-chip,
.account-chip:hover {
  border-color: rgba(70, 214, 154, 0.48);
  color: var(--text-title);
}

.account-menu__panel {
  width: 190px;
  padding: 6px;
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: #0e171e;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.account-menu__panel button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-body);
  text-align: left;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .04em;
  cursor: pointer;
}

.account-menu__panel button:hover {
  background: var(--surface-inner);
  color: var(--text-title);
}

.account-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(2, 7, 10, .78);
}

.account-dialog__panel {
  width: min(100%, 460px);
  position: relative;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.account-dialog__close {
  width: 36px;
  height: 36px;
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}

.account-dialog__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--font-small);
}

.pw-card { background: transparent; }
.pw-h { margin: 0 44px 20px 0; color: var(--text-title); font-size: var(--font-title); }
.pw-wrap, .pw-sec { display: grid; gap: 10px; }
.pw-t { margin: 0; color: var(--text-title); font-size: 16px; }
.pw-note, .pw-msg { margin: 0; color: var(--text-muted); font-size: var(--font-small); }
.pw-l { color: var(--text-muted); font-size: var(--font-small); }
.pw-in { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); outline: none; background: var(--canvas-raised); color: var(--text-title); }
.pw-in:focus { border-color: var(--positive); }
.pw-field { display: grid; gap: 6px; }
.pw-btn { min-height: 46px; margin-top: 4px; border: 1px solid var(--positive); border-radius: var(--radius-control);
  background: var(--positive); color: #06110d; font-weight: 800; cursor: pointer; }
.pw-btn:disabled { opacity: .55; cursor: wait; }
.pw-ok { color: var(--positive); }
.pw-bad { color: var(--warning); }
.pw-hint, .pw-pips { display: none; }

.account-chip svg,
.mobile-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mobile-title,
.mobile-menu {
  display: none;
}

.shell {
  width: min(100% - 48px, 1600px);
  margin: 18px auto 52px;
}

.safety-alert {
  min-height: 54px;
  margin-bottom: var(--space-card);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 102, 95, 0.68);
  border-radius: var(--radius-inner);
  background: linear-gradient(90deg, var(--negative-soft), rgba(255, 102, 95, 0.035));
}

.safety-alert svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--negative);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.safety-alert strong {
  color: var(--negative);
  font-size: 17px;
  font-weight: 800;
}

.safety-alert span {
  color: var(--text-body);
  font-size: var(--font-small);
}

.status-notice {
  min-height: 52px;
  margin-bottom: var(--space-card);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(70, 214, 154, 0.4);
  border-radius: var(--radius-inner);
  background: var(--positive-soft);
  color: var(--text-body);
  font-size: var(--font-small);
}

.status-notice svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--positive);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "operation cycle"
    "protection cycle"
    "position kpis"
    "position next"
    "progress detail"
    "progress system";
  gap: var(--space-card);
  align-items: stretch;
}

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(22, 34, 43, 0.92), rgba(14, 23, 30, 0.96));
}

.operation-card { grid-area: operation; }
.protection-card { grid-area: protection; }
.cycle-card { grid-area: cycle; }
.kpi-card { grid-area: kpis; }
.position-card { grid-area: position; }
.progress-card { grid-area: progress; }
.next-card { grid-area: next; }
.recent-tp { grid-area: detail; }
.system-card { grid-area: system; }

.state-savezone-off .dashboard-grid {
  grid-template-areas:
    "operation cycle"
    "protection cycle"
    "position kpis"
    "position detail"
    "progress system"
    "progress system";
}

/* 익절 보호 카드를 숨긴 상태(거래소 확인 flat ∧ 정지 ∧ 신선) — 그 **행 자체를** 접는다.
   카드만 지우고 자리를 남기면 빈 칸이 되고, 빈 화면은 「고장」으로 읽힌다(v4 지시서 §8). */
.state-protection-hidden .dashboard-grid {
  grid-template-areas:
    "operation cycle"
    "position kpis"
    "position next"
    "progress detail"
    "progress system";
}

.state-protection-hidden.state-savezone-off .dashboard-grid {
  grid-template-areas:
    "operation cycle"
    "position kpis"
    "position detail"
    "progress system"
    "progress system";
}

.operation-card,
.cycle-card,
.position-card,
.progress-card,
.next-card,
/* ★ 2026-08-18 Owner 지시 — 「최근 익절 3건」이 `<details>` 를 버리고 평범한 카드가 됐다.
   그래서 안쪽에서 따로 잡던 padding 을 버리고 **다른 카드와 같은 공용 규칙**을 쓴다. */
.recent-tp,
.system-card {
  padding: var(--pad-card);
}

.operation-card {
  min-height: 138px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 18px;
  align-content: center;
}

.operation-card__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-title);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 5px rgba(70, 214, 154, 0.08);
}

.live-dot.is-stopped {
  background: var(--text-faint);
  box-shadow: none;
}

.operation-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  min-height: 34px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-inner);
  color: var(--text-body);
  font-weight: 700;
}

.pill--direction {
  border-color: rgba(70, 214, 154, 0.34);
  background: var(--positive-soft);
  color: var(--positive);
}

.pill--short {
  border-color: rgba(255, 102, 95, 0.5);
  background: var(--negative-soft);
  color: var(--negative);
}

.pill--checking {
  border-color: rgba(114, 188, 234, 0.36);
  background: var(--checking-soft);
  color: var(--checking);
}

.operation-card__freshness {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-small);
}

.operation-action {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  min-width: 112px;
  min-height: 48px;
  border: 1px solid rgba(255, 102, 95, 0.72);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--negative);
  cursor: pointer;
  font-weight: 800;
}

.operation-action--start {
  border-color: rgba(70, 214, 154, 0.58);
  background: var(--positive-soft);
  color: var(--positive);
}

.operation-action:disabled {
  border-color: rgba(114, 188, 234, 0.38);
  background: var(--checking-soft);
  color: var(--checking);
  cursor: not-allowed;
  opacity: 1;
}

.protection-card {
  min-height: 96px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-color: rgba(70, 214, 154, 0.52);
  background: linear-gradient(100deg, var(--positive-soft), rgba(70, 214, 154, 0.02));
}

.protection-card.is-checking,
.protection-card.is-waiting {
  border-color: rgba(114, 188, 234, 0.4);
  background: linear-gradient(100deg, var(--checking-soft), rgba(114, 188, 234, 0.02));
}

.shield {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(70, 214, 154, 0.1));
}

.shield path:first-child {
  fill: rgba(70, 214, 154, 0.14);
  stroke: var(--positive);
  stroke-width: 1.5;
}

.shield path:last-child {
  fill: none;
  stroke: var(--text-title);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.protection-card.is-checking .shield path:first-child,
.protection-card.is-waiting .shield path:first-child {
  fill: rgba(114, 188, 234, 0.12);
  stroke: var(--checking);
}

.protection-card__copy {
  min-width: 0;
}

.protection-card h2,
.card-title {
  margin: 0;
  color: var(--text-title);
  font-size: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.protection-card h2 {
  color: var(--positive);
  font-size: 25px;
}

.protection-card.is-checking h2,
.protection-card.is-waiting h2 {
  color: var(--checking);
}

.protection-card p {
  margin: 3px 0 0;
  color: var(--text-body);
}

.protection-check {
  width: 38px;
  height: 38px;
  margin-left: auto;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(70, 214, 154, 0.52);
  border-radius: 50%;
  color: var(--positive);
}

.protection-card.is-checking .protection-check,
.protection-card.is-waiting .protection-check {
  border-color: rgba(114, 188, 234, 0.42);
  color: var(--checking);
}

.protection-check svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cycle-card {
  min-height: 252px;
}

.cycle-card .card-title {
  color: var(--positive);
}

.cycle-values {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cycle-value {
  min-width: 0;
  padding: 0 22px;
  text-align: center;
}

.cycle-value + .cycle-value {
  border-left: 1px solid var(--line-strong);
}

.cycle-value__label {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-small);
}

.cycle-value__number {
  margin-top: 8px;
  display: block;
  /* ★ 기본은 **중립**이다(2026-08-18 Owner 결정 10). 예전 기본값이 var(--negative) 라
     색을 지정하지 않은 칸(지갑 변화 +6.35 · 걸린 시간)이 전부 빨갛게 보였다.
     이익/손해 색은 .is-positive / .is-negative 가 붙을 때만 칠한다. */
  color: var(--text-title);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.cycle-value__unit {
  margin-left: 5px;
  color: var(--text-body);
  font-size: var(--font-small);
  font-weight: 700;
}

.cycle-note {
  margin: 26px 0 0;
  color: var(--text-muted);
  text-align: center;
  font-size: var(--font-small);
}

.is-positive {
  color: var(--positive) !important;
}

.is-negative {
  color: var(--negative) !important;
}

.is-checking-text {
  color: var(--checking) !important;
}

.kpi-card {
  min-height: 130px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.kpi {
  min-width: 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  align-items: center;
}

.kpi + .kpi {
  border-left: 1px solid var(--line);
}

.kpi__icon {
  width: 42px;
  height: 42px;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--positive-soft);
  color: var(--positive);
}

.kpi__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.kpi__label {
  color: var(--text-muted);
  font-size: var(--font-small);
}

.kpi__value {
  color: var(--text-title);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.kpi__value small {
  color: var(--text-body);
  font-size: var(--font-micro);
  font-weight: 700;
}

.kpi__sub {
  grid-column: 2;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--font-micro);
  white-space: nowrap;
}

.kpi__sub.is-negative {
  font-weight: 700;
}

.position-card {
  min-height: 346px;
}

.position-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mini-chart {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text-muted);
}

.mini-chart svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.position-summary {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-title);
  font-size: 24px;
  font-weight: 800;
}

/* ── 현재 포지션 줄의 진입가 (2026-08-18 Owner 지시 ③) ──────────────────────
   막대 아래의 「평균 진입가 · 현재 시장가 · 진입가 대비 %」 칸을 없애고 이 한 줄로 모았다.
   ★ **수량보다 작다.** 수량이 주인이고 진입가는 딸린 정보다. */
.position-entry {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.axis-wrap {
  margin-top: 24px;
}

.axis-line {
  /* ★ 초록/빨강 경계는 **진입가**다(2026-08-18 Owner 결정 4).
     예전에는 49% 가 박혀 있어 진입가와 무관하게 왼쪽이 항상 초록이었다 —
     손실 중인데 초록 구간에 있는 것처럼 보였다(Owner 실측 0.9948 진입 · 0.9951 현재). */
  --axis-split: 50%;
  height: 5px;
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--positive) 0 var(--axis-split), var(--negative) var(--axis-split) 100%);
}

/* 진입가를 모르면 색을 나누지 않는다 — 지어낸 경계를 그리지 않는다. */
.axis-line--nosplit { background: var(--line-strong); }

/* 진입가 자리 표시 — 점(현재가)과 구분되는 세로 눈금이다. */
.axis-mark--entry {
  width: 3px;
  height: 15px;
  position: absolute;
  top: 50%;
  border-radius: 2px;
  background: var(--text-title);
  transform: translate(-50%, -50%);
}

.axis-point {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 50%;
  border: 4px solid var(--text-title);
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.axis-point--good { left: 0; color: var(--positive); }
.axis-point--current { left: 49%; color: var(--positive); transition: left 420ms ease; }
.axis-point--risk { left: 100%; color: var(--negative); }

/* ── 가격 막대 (2026-08-18 Owner 결정 11 · N-252) ────────────────────────────
   왜 이렇게 바뀌었나: 한 화면에 숫자가 다섯이었다(익절·현재·전환·익절까지거리·전환까지거리).
   어디가 좋은 방향인지는 **색이 이미 말한다** — 거리 숫자 둘은 그 말을 글자로 또 한 것이라 없앴다.
   ★ 끝 숫자는 선 **위**, 현재가는 선 **아래**다. **층이 달라서** 점이 끝까지 가도 겹치지 않는다.
     그래서 안쪽으로 밀어 넣는 보정을 **만들지 않았다**(Owner 지적). */
.axis-ends {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--text-muted);
  font-size: var(--font-small);
}

.axis-end b {
  color: var(--text-title);
  font-size: 18px;
  font-weight: 800;
}

/* 선 아래 · 현재가. 점과 **같은 비율**을 쓰므로 둘이 같이 움직인다. */
.axis-now-track {
  height: 30px;
  position: relative;
}

.axis-now {
  position: absolute;
  top: 8px;
  color: var(--text-muted);
  font-size: var(--font-small);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: left 420ms ease;
}

.axis-now b {
  color: var(--text-title);
  font-size: 18px;
  font-weight: 800;
}

.axis-checking {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(114, 188, 234, 0.26);
  border-radius: var(--radius-inner);
  background: var(--checking-soft);
  color: var(--checking);
  text-align: center;
}

.empty-position {
  margin-top: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--surface-inner);
  color: var(--text-muted);
  text-align: center;
}

.empty-position strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-title);
  font-size: 21px;
}

.progress-card {
  min-height: 194px;
}

.stepper {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.step {
  position: relative;
  text-align: center;
}

.step:not(:last-child)::after {
  content: "";
  height: 2px;
  position: absolute;
  top: 20px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  background: var(--line-strong);
}

.step.is-complete:not(:last-child)::after {
  background: var(--positive);
}

.step__number {
  width: 42px;
  height: 42px;
  margin: 0 auto 6px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-title);
  font-size: 18px;
  font-weight: 800;
}

.step.is-complete .step__number,
.step.is-active .step__number {
  border-color: var(--positive);
  box-shadow: 0 0 0 5px rgba(70, 214, 154, 0.055);
}

.step__name,
.step__state {
  display: block;
  font-size: var(--font-small);
}

.step__state {
  color: var(--text-muted);
}

.step.is-complete .step__state,
.step.is-active .step__state {
  color: var(--positive);
}

.savezone-status {
  margin-top: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--surface-inner);
  color: var(--text-body);
  font-size: var(--font-small);
}

.savezone-status svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: var(--text-muted);
}

.next-card {
  min-height: 178px;
}

.next-card__body {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
}

.next-card .shield {
  width: 68px;
  height: 68px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-inner);
}

.next-card__name {
  display: block;
  color: var(--text-title);
  font-size: 19px;
  font-weight: 800;
}

.next-card__value {
  margin-top: 3px;
  display: block;
  color: var(--checking);
  font-weight: 800;
}

.next-card__note {
  grid-column: 2;
  margin: -3px 0 0;
  color: var(--text-muted);
  font-size: var(--font-small);
}

.next-progress {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.next-progress span {
  width: 42%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--positive);
}

/* ── 최근 익절 3건 (2026-08-18 · N-250 · Owner 지시로 접기 제거) ─────────────
   옛 「가격 기준선 자세히 보기」 자리(격자 영역 `detail`)를 쓴다. 다만 **접기/펴기는 없다** —
   그건 옛 «상세» 카드에서 물려받은 동작이고, 이 카드는 그 자리를 대체한 **본문**이다.
   ★ 번 돈이 가장 크다. 날짜는 작게 위, 퍼센트는 작게 아래. 색은 결정 10(이익 초록·손해 빨강). */
.recent-tp__body {
  margin-top: 22px;
  display: grid;
  /* 건수만큼만 칸을 만든다 — 빈 칸을 만들지 않는다(2건이면 2칸 · 1건이면 1칸). */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
}

.recent-tp__item {
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--surface-inner);
  text-align: center;
}

.recent-tp__item span {
  display: block;
}

.recent-tp__when {
  color: var(--text-muted);
  font-size: var(--font-micro);
}

/* 번 돈 — 이 카드에서 **가장 크다**. */
.recent-tp__money {
  margin-top: 4px;
  color: var(--text-title);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.recent-tp__pct {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--font-micro);
}

.recent-tp__empty {
  margin-top: 22px;
  color: var(--text-muted);
}

.system-card {
  min-height: 136px;
}

.system-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.system-item {
  min-width: 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 10px;
  align-items: center;
}

.system-item + .system-item {
  border-left: 1px solid var(--line);
}

.system-item__icon {
  width: 28px;
  height: 28px;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--positive);
  color: var(--canvas);
  font-size: 15px;
  font-weight: 900;
}

.system-item.is-checking .system-item__icon {
  background: var(--checking-soft);
  color: var(--checking);
}

.system-item__status {
  color: var(--text-title);
  font-size: var(--font-small);
  font-weight: 800;
  white-space: nowrap;
}

.system-item.is-checking .system-item__status {
  color: var(--checking);
}

.system-item__age {
  color: var(--text-muted);
  font-size: var(--font-micro);
}

.bottom-nav {
  display: none;
}

@media (max-width: 1339px) and (min-width: 821px) {
  .shell,
  .app-header__inner {
    width: min(100% - 32px, 1080px);
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "operation"
      "protection"
      "cycle"
      "kpis"
      "position"
      "progress"
      "next"
      "detail"
      "system";
    gap: 14px;
  }

  .state-savezone-off .dashboard-grid {
    grid-template-areas:
      "operation"
      "protection"
      "cycle"
      "kpis"
      "position"
      "progress"
      "detail"
      "system";
  }

  .state-protection-hidden .dashboard-grid {
    grid-template-areas:
      "operation"
      "cycle"
      "kpis"
      "position"
      "progress"
      "next"
      "detail"
      "system";
  }

  .state-protection-hidden.state-savezone-off .dashboard-grid {
    grid-template-areas:
      "operation"
      "cycle"
      "kpis"
      "position"
      "progress"
      "detail"
      "system";
  }

  .operation-card,
  .cycle-card,
  .position-card,
  .progress-card,
  .next-card,
  /* ★ Codex R1 — 기본 목록에만 넣고 **반응형 목록에서 빠뜨렸다.**
     그러면 좁은 화면에서 이 카드만 데스크톱 padding 을 써 다른 카드와 좌우가 어긋난다. */
  .recent-tp,
  .system-card {
    padding: 22px;
  }

  /* ★ 821~1339px 에서 「지갑 잔고」가 깨지던 자리(실측으로 원인 확정).
     이 폭에서는 아이콘을 숨기는데 `.kpi` 의 격자는 아이콘용 `auto 1fr` 그대로였다.
     거기에 `.kpi__sub`(「총 평가 …」 · nowrap)를 1열로 보내니 `auto` 인 1열이 그 문장 길이(122px)만큼
     벌어지고, 2열(1fr)에 있던 `.kpi__value`(지갑 금액 · nowrap 23px)가 짜부라졌다.
     실측(폭 900·821): 칸 너비 120.2·107.5px < 값 상자 127.3px — 값이 자기 칸보다 커서
     칸 밖으로 삐져나가고 옆 칸을 밀어 카드 높이가 130→147px 로 늘어났다.
     값이 가장 긴 「지갑 잔고」에서만 눈에 띄었을 뿐 원인은 격자다.
     → 아이콘이 없으면 격자도 한 열이다(라벨·값·보조를 위에서 아래로). 값은 줄바꿈을 허용한다 —
       금액이 잘려 안 보이는 것이 줄이 나뉘는 것보다 나쁘다(모르는 숫자를 만드는 쪽이다). */
  .kpi {
    padding: 0 10px;
    grid-template-columns: minmax(0, 1fr);
  }

  .kpi__icon {
    display: none;
  }

  .kpi__value {
    grid-column: 1;
    font-size: 18px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .kpi__sub {
    grid-column: 1;
    white-space: normal;
  }
}

@media (max-width: 820px) {
  :root {
    --font-display: 27px;
    --font-title: 20px;
    --font-body: 15px;
    --font-small: 13px;
    --font-micro: 11px;
  }

  body {
    padding-bottom: 78px;
  }

  .app-header {
    height: 82px;
  }

  .app-header__inner {
    width: 100%;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
  }

  .brand {
    display: block;
    grid-column: 2;
    justify-self: center;
  }

  .brand__image {
    width: 146px;
    height: auto;
  }

  .top-nav {
    display: none;
  }

  .mobile-title {
    display: none;
    grid-column: 2;
    color: var(--text-title);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  .account-menu {
    grid-column: 3;
    margin: 0;
    justify-self: end;
  }

  .account-chip {
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    font-size: var(--font-small);
  }

  .account-chip span {
    max-width: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-chip [data-slot="account.label"] {
    display: none;
  }

  .account-menu__panel { width: 156px; }
  .account-dialog { padding: 14px; }
  .account-dialog__panel { padding: 24px 18px 20px; }

  .mobile-menu {
    width: 32px;
    height: 32px;
    display: none;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--text-body);
  }

  .shell {
    width: auto;
    margin: var(--space-card-mobile) 14px 24px;
  }

  .safety-alert {
    min-height: 60px;
    margin-bottom: var(--space-card-mobile);
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0 10px;
  }

  .safety-alert svg {
    grid-row: 1 / span 2;
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "operation"
      "protection"
      "cycle"
      "kpis"
      "position"
      "progress"
      "next"
      "detail"
      "system";
    gap: var(--space-card-mobile);
  }

  .state-savezone-off .dashboard-grid {
    grid-template-areas:
      "operation"
      "protection"
      "cycle"
      "kpis"
      "position"
      "progress"
      "detail"
      "system";
  }

  /* 상태별 PC 격자 선택자는 기본 모바일 규칙보다 구체적이다.
     모바일 상태도 같은 구체도로 다시 선언하지 않으면 숨은 첫 열이 0px 로 남는다. */
  .state-protection-hidden .dashboard-grid {
    grid-template-areas:
      "operation"
      "cycle"
      "kpis"
      "position"
      "progress"
      "next"
      "detail"
      "system";
  }

  .state-protection-hidden.state-savezone-off .dashboard-grid {
    grid-template-areas:
      "operation"
      "cycle"
      "kpis"
      "position"
      "progress"
      "detail"
      "system";
  }

  .operation-card,
  .cycle-card,
  .position-card,
  .progress-card,
  .next-card,
  /* ★ Codex R1 — 기본 목록에만 넣고 **반응형 목록에서 빠뜨렸다.**
     그러면 좁은 화면에서 이 카드만 데스크톱 padding 을 써 다른 카드와 좌우가 어긋난다. */
  .recent-tp,
  .system-card {
    padding: var(--pad-card-mobile);
  }

  .operation-card {
    min-height: 164px;
    gap: 10px;
  }

  .operation-card__title {
    gap: 8px;
    font-size: 22px;
  }

  .operation-card__title [data-slot="operation.state"] {
    white-space: nowrap;
  }

  .operation-action {
    min-width: 96px;
    min-height: 46px;
  }

  .protection-card {
    min-height: 108px;
    padding: 16px 18px;
    gap: 14px;
  }

  .shield {
    width: 52px;
    height: 52px;
  }

  .protection-card h2 {
    font-size: 21px;
  }

  .protection-card p {
    font-size: var(--font-small);
  }

  .cycle-card {
    min-height: 224px;
  }

  .cycle-values {
    margin-top: 22px;
  }

  .cycle-value {
    padding: 0 9px;
  }

  .cycle-value__number {
    font-size: 22px;
    white-space: normal;
  }

  .cycle-value:last-child .cycle-value__number {
    font-size: 20px;
    white-space: nowrap;
  }

  .cycle-value__unit {
    display: block;
    margin: 0;
    font-size: var(--font-micro);
  }

  .cycle-note {
    margin-top: 20px;
  }

  .kpi-card {
    min-height: 158px;
    padding: 18px 10px;
  }

  .kpi {
    padding: 0 9px;
    display: block;
    text-align: center;
  }

  .kpi__icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 6px;
  }

  .kpi__icon svg {
    width: 18px;
    height: 18px;
  }

  .kpi__label,
  .kpi__value,
  .kpi__sub {
    display: block;
  }

  .kpi__value {
    margin-top: 2px;
    font-size: 18px;
  }

  .kpi__sub {
    margin-top: 4px;
    white-space: normal;
  }

  .position-card {
    min-height: 374px;
  }

  .position-summary {
    font-size: 21px;
  }

  .axis-end b,
  .axis-now b {
    font-size: 16px;
  }

  .progress-card {
    min-height: 214px;
  }

  .next-card {
    min-height: 168px;
  }

  .next-card__note {
    font-size: var(--font-micro);
  }

  .system-card {
    min-height: 182px;
  }

  .system-grid {
    gap: 0;
  }

  .system-item {
    padding: 0 7px;
    display: block;
    text-align: center;
  }

  .system-item__icon {
    margin: 0 auto 7px;
  }

  .system-item__status,
  .system-item__age {
    display: block;
    white-space: normal;
  }

  /* ★ 좁은 폭에서도 **가로 3칸을 유지한다**(Owner 안: "가로로 3칸"). 세로로 쌓지 않는다.
     대신 글자를 줄여 390 폭에 들어가게 한다. */
  .recent-tp__body {
    margin-top: 16px;
    gap: 8px;
  }

  .recent-tp__item {
    padding: 10px 6px;
  }

  .recent-tp__money {
    font-size: 19px;
  }

  .bottom-nav {
    height: 74px;
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(8, 13, 18, 0.96);
    backdrop-filter: blur(14px);
  }

  .bottom-nav a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: var(--text-faint);
    text-decoration: none;
    font-size: var(--font-micro);
    font-weight: 800;
  }

  .bottom-nav a[aria-current="page"] {
    color: var(--positive);
  }

  .bottom-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }
}

/* 마감 5종 — 기존 정본 마크업을 V4 한 셸의 토큰으로만 그린다. */
.op-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(2, 6, 9, 0.76);
}
.op-modal {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-body);
}
.cs-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.cs-title { color: var(--text-title); font-size: 18px; font-weight: 800; }
.cs-x {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}
.cs-x:hover, .cs-x:focus-visible { border-color: var(--positive); color: var(--text-title); outline: none; }
.cs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px;
}
.cs-opts { display: grid; gap: 8px; }
.cs-opt-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-inner);
}
.cs-opt-row-disabled { opacity: 0.52; }
.cs-opt-head { display: flex; align-items: center; gap: 8px; }
.cs-opt {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  cursor: pointer;
}
.cs-opt-disabled { cursor: not-allowed; }
.cs-radio { flex: 0 0 auto; margin: 0; accent-color: var(--positive); }
.cs-opt-t { min-width: 0; color: var(--text-title); font-size: 14px; font-weight: 750; }
.cs-opt-tag { margin-left: auto; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.cs-help {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-right: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.cs-help[aria-expanded="true"] { border-color: var(--positive); background: var(--positive-soft); color: var(--positive); }
.cs-opt-d { margin: 0 13px 12px 38px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.cs-opt-d[hidden] { display: none; }
.cs-time-row { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.cs-time-row label { color: var(--text-muted); font-size: 12px; }
.cs-imm-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--warning); font-size: 13px; }
.op-modal-in {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--canvas-raised);
  color: var(--text-title);
  font: inherit;
}
.op-modal-in:focus { border-color: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.cs-foot { flex: 0 0 auto; display: grid; gap: 10px; padding: 14px 18px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.cs-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cs-actions button { min-height: 42px; padding: 0 17px; border-radius: var(--radius-control); font: inherit; font-weight: 750; cursor: pointer; }
.op-modal-cancel { border: 1px solid var(--line-strong); background: transparent; color: var(--text-body); }
.op-modal-confirm { border: 1px solid var(--positive); background: var(--positive); color: var(--canvas); }
.op-modal-confirm:disabled { border-color: var(--line); background: var(--surface-soft); color: var(--text-faint); cursor: not-allowed; }
.cs-note { color: var(--text-faint); font-size: 11px; }
.cs-result { padding: 10px 12px; border-radius: var(--radius-control); background: var(--checking-soft); color: var(--checking); font-size: 13px; }
.cs-result.is-bad { background: var(--negative-soft); color: var(--negative); }

@media (max-width: 820px) {
  .op-modal-overlay { padding: 6px; }
  .op-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: var(--radius-inner); }
  .cs-head { padding: 12px 14px 10px; }
  .cs-body { padding: 9px 12px; }
  .cs-opt { padding: 10px 11px; }
  .cs-opt-tag { white-space: normal; text-align: right; }
  .cs-foot { padding: 10px 12px 12px; }
  .cs-actions button { flex: 1 1 0; }
}

/* ── 코인 ────────────────────────────────────────────────────────────── */
.c-page { display: flex; flex-direction: column; gap: 16px; }
.c-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.c-head > div:first-child { flex: 1 1 auto; min-width: 200px; }
.c-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.3px; }
.c-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.c-picker { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.c-picker select { min-width: 142px; height: 42px; padding: 0 34px 0 13px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); outline: none; background: var(--surface-inner); color: var(--text-title);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.c-picker select:focus { border-color: var(--positive); }
.c-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.c-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.c-chip { min-height: 36px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 10px; background: rgba(22,34,43,.7);
  color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.c-chip b { color: var(--text-title); font-weight: 600; }
.c-chip-lock b, .c-chip-pos b { color: var(--positive); }
.c-chip-neg b { color: var(--negative); }
.c-chip i { font-style: normal; }
.c-ago { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11px; }
.c-grid { display: grid; grid-template-columns: 65fr 35fr; gap: 16px; align-items: start; }
.c-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.c-card, .c-coin { min-width: 0; padding: 20px; border: 1px solid rgba(42,58,69,.78);
  border-radius: var(--radius-card); background: var(--surface); }
.c-card-h { margin-bottom: 16px; display: flex; align-items: baseline; gap: 8px;
  color: var(--text-muted); font-size: 16px; }
.c-card-h b { color: var(--text-title); font-size: 18px; font-weight: 700; }
.c-card-h .c-ago { margin: 0 0 0 auto; }
.c-note { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; }
.c-coins { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.c-coin { padding: 16px 20px 12px; }
.c-coin.is-on { border-color: var(--positive); }
.c-coin-h { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.c-glyph { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-soft); font-size: 18px; font-weight: 700; }
.c-coin-s { font-size: 20px; font-weight: 700; }
.c-coin-b, .c-flow-b { padding: 4px 9px; border: 0; border-radius: 8px;
  background: var(--surface-inner); color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.c-check { width: 24px; height: 24px; margin-left: auto; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--positive); color: #0b1f16;
  font-size: 13px; font-weight: 700; }
.c-px-g { display: grid; grid-template-columns: 1fr 1fr; }
.c-px-g .c-px + .c-px { padding-left: 16px; border-left: 1px solid var(--line); }
.c-px { min-width: 0; text-align: center; }
.c-px-k, .c-m-k, .c-diff-k, .c-o-k { display: block; margin-bottom: 4px;
  color: var(--text-muted); font-size: 12px; }
.c-px-v { display: block; overflow-wrap: anywhere; color: var(--positive); font-size: 30px;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.c-engine, .c-box, .c-chart, .c-warn { border: 1px solid var(--line);
  border-radius: var(--radius-inner); background: var(--surface-inner); }
.c-engine { margin-top: 12px; padding: 8px; color: var(--text-muted); font-size: 12px; text-align: center; }
.c-mark-note { margin: 0; font-size: 17px; text-align: center; }
.c-mark-note b { color: var(--positive); }
.c-m-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.c-m-c, .c-o-c { min-width: 0; }
.c-m-v { display: block; overflow-wrap: anywhere; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.c-m-v.pos, .c-o-v.pos { color: var(--positive); }
.c-m-v.neg, .c-o-v.neg { color: var(--negative); }
.c-bar-w { margin-top: 20px; display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 12px; }
.c-bar { min-width: 80px; height: 5px; flex: 1 1 auto; position: relative;
  border-radius: 3px; background: var(--negative); }
.c-bar-g { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--positive); }
.c-bar-dot { width: 14px; height: 14px; position: absolute; top: 50%; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); }
.c-bar-none { flex: 1 1 auto; color: var(--text-faint); font-size: 12px; text-align: center; }
.c-m-b { margin-top: 20px; display: grid; grid-template-columns: minmax(180px,1fr) auto;
  align-items: center; gap: 16px; }
.c-balance { min-height: 82px; padding: 16px 18px; display: grid; align-content: center; gap: 4px;
  border-radius: var(--radius-inner); background: var(--surface-inner); }
.c-balance span { color: var(--text-muted); font-size: 12px; }
.c-balance b { color: var(--text-title); font-size: 24px; font-variant-numeric: tabular-nums; }
.c-diff { min-width: 180px; padding: 16px 20px; border: 1px solid var(--line);
  border-radius: var(--radius-inner); background: var(--surface-inner); text-align: center; }
.c-diff-v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-diff-u { margin-left: 6px; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.c-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.c-flow-k { display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 13px; }
.c-flow-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c-flow-s { font-size: 20px; font-weight: 700; }
.c-flow-s.dim { color: var(--text-muted); }
.c-flow-b { border-color: rgba(70, 214, 154, .35); background: var(--positive-soft); color: var(--positive); }
.c-flow-n { display: block; margin-top: 8px; color: var(--text-faint); font-size: 12px; white-space: pre-line; }
.c-flow-arrow { color: var(--text-faint); font-size: 24px; }
.c-flow .c-ago { display: inline-block; margin-top: 0; }
.c-o-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.c-o-c { text-align: center; }
.c-o-c + .c-o-c { border-left: 1px solid var(--line); }
.c-o-v { display: block; overflow-wrap: anywhere; font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.c-box { padding: 20px; color: var(--text-muted); font-size: 14px; text-align: center; }
.c-v-r { min-height: 44px; display: flex; align-items: center; gap: 12px; }
.c-v-s { flex: 0 0 96px; font-size: 13px; }
.c-v-bar { height: 5px; flex: 1 1 auto; overflow: hidden; border-radius: 3px; background: var(--surface-inner); }
.c-v-fill { display: block; height: 100%; background: var(--positive); }
.c-v-v { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-v-r .c-ago { margin-top: 0; white-space: nowrap; }
.c-warn { margin-top: 16px; padding: 12px; color: var(--text-faint); font-size: 12px; }
.c-fit { overflow: hidden; position: relative; }
.c-fit::before { content: ""; width: 4px; position: absolute; inset: 0 auto 0 0; background: var(--checking); }
.c-fit.is-known::before { background: var(--positive); }
.c-fit-main { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.c-fit-main strong { color: var(--text-title); font-size: 30px; letter-spacing: -.03em; }
.c-fit-main b { color: var(--positive); font-size: 22px; font-variant-numeric: tabular-nums; }
.c-fit-rank { margin: 5px 0 12px; color: var(--text-body); font-weight: 700; }

@media (max-width: 820px) {
  .c-grid, .c-m-b, .c-flow { grid-template-columns: 1fr; }
  .c-grid, .c-col, .c-coins { gap: 12px; }
  .c-title { font-size: 24px; }
  .c-title-row { align-items: stretch; flex-direction: column; gap: 10px; }
  .c-picker { width: 100%; justify-content: space-between; }
  .c-picker select { flex: 1 1 auto; }
  .c-coins { grid-template-columns: 1fr; }
  .c-m-g { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .c-px-v { font-size: 26px; }
  .c-m-b { grid-template-columns: 1fr; }
  .c-fit-main strong { font-size: 26px; }
  .c-flow-arrow { display: none; }
  .c-o-g { grid-template-columns: 1fr; gap: 16px; }
  .c-o-c + .c-o-c { padding-top: 12px; border-top: 1px solid var(--line); border-left: 0; }
  .c-card { padding: 16px; }
}

@media (max-width: 380px) {
  .c-m-g, .c-px-g { grid-template-columns: 1fr; }
}

/* ── 운용 설정 ───────────────────────────────────────────────────────── */
.cfg-page { display: grid; gap: var(--space-card); }
.cfg-explain { display: flex; align-items: center; gap: 9px; color: var(--text-muted); cursor: pointer; }
.cfg-explain input { accent-color: var(--positive); }
.cfg-flow { padding: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-state { min-height: 76px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-inner); }
.cfg-state > span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-muted); }
.cfg-state small { display: block; color: var(--text-muted); }
.cfg-state strong { display: block; margin-top: 3px; color: var(--text-title); }
.cfg-state.is-on { border-color: rgba(70,214,154,.38); background: var(--positive-soft); }
.cfg-state.is-on > span { border-color: var(--positive); color: var(--positive); }
.cfg-lock { padding: 17px 20px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface); }
.cfg-lock.is-running { border-color: rgba(228,182,83,.34); background: var(--warning-soft); }
.cfg-lock strong { color: var(--warning); }
.cfg-lock p { margin: 3px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.cfg-prereq, .cfg-wizard, .cfg-operation-values { padding: 22px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface); }
.cfg-prereq .cfg-fields { padding: 0; }
.cfg-wizard { display: grid; gap: 10px; }
.cfg-wizard-done { width: 100%; min-height: 66px; padding: 12px 14px; display: flex; align-items: center;
  gap: 12px; border: 0; border-radius: var(--radius-inner); background: var(--surface-inner);
  color: var(--text-body); text-align: left; cursor: pointer; }
.cfg-wizard-done > span, .cfg-wizard-no { width: 32px; height: 32px; flex: none; display: grid;
  place-items: center; border-radius: 50%; background: var(--positive-soft); color: var(--positive); font-weight: 800; }
.cfg-wizard-done div { min-width: 0; flex: 1; }
.cfg-wizard-done small { display: block; color: var(--text-muted); }
.cfg-wizard-done strong { display: block; overflow-wrap: anywhere; color: var(--text-title); }
.cfg-wizard-done b { color: var(--text-muted); font-size: var(--font-small); }
.cfg-wizard-done:hover b { color: var(--positive); }
.cfg-wizard-ask { padding: 22px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 14px;
  border: 1px solid rgba(70,214,154,.42); border-radius: var(--radius-inner);
  background: linear-gradient(135deg, var(--positive-soft), rgba(22,34,43,.46)); }
.cfg-wizard-ask > div > small { color: var(--positive); font-weight: 750; }
.cfg-wizard-ask h2 { margin: 3px 0 15px; color: var(--text-title); font-size: 22px; }
.cfg-wizard-ask .cfg-field { max-width: 560px; }
.cfg-wizard-ask [data-ladder-answer] { min-height: 42px; margin-top: 12px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-inner);
  color: var(--text-title); font-weight: 750; cursor: pointer; }
.cfg-auto-note, .cfg-wizard-wait { margin: 10px 0 0; color: var(--checking); font-size: var(--font-small); }
.cfg-operation-values { display: grid; gap: 18px; background: color-mix(in srgb, var(--positive) 4%, var(--surface)); }
.cfg-operation-values__grid, .cfg-manual-values__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cfg-operation-values__grid > div { min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inner); }
.cfg-operation-values__grid small, .cfg-manual-values label > span { display: block; color: var(--text-muted); font-size: var(--font-small); }
.cfg-operation-values__grid strong { display: block; margin-top: 7px; color: var(--text-title); font-size: 22px; }
.cfg-operation-values__grid p { margin: 7px 0 0; color: var(--checking); font-size: var(--font-micro); }
.cfg-manual-values { padding-top: 18px; border-top: 1px solid var(--line); }
.cfg-manual-values .section-head { margin-bottom: 12px; }
.cfg-manual-values h2 small { margin-left: 6px; color: var(--checking); font-size: var(--font-small); font-weight: 650; }
.cfg-manual-values__grid > label { min-width: 0; padding: 14px 16px; display: grid;
  grid-template-columns: minmax(128px,.72fr) minmax(170px,1fr); align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-inner); }
.cfg-manual-values label > span { color: var(--text-body); font-weight: 700; line-height: 1.4; }
.cfg-manual-values input { width: 100%; height: 48px; min-width: 0; padding: 0 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); outline: none;
  background: var(--canvas); color: var(--text-title); font: inherit; font-size: 17px; font-weight: 720;
  font-variant-numeric: tabular-nums; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.cfg-manual-values input::placeholder { color: var(--text-faint); font-size: var(--font-small); font-weight: 600; opacity: 1; }
.cfg-manual-values input:hover { border-color: rgba(159,185,194,.48); background: var(--canvas-raised); }
.cfg-manual-values input:focus { border-color: var(--positive); background: var(--canvas-raised);
  box-shadow: 0 0 0 3px var(--positive-soft); }
.cfg-manual-values input:disabled { opacity: .68; color: var(--text-muted); cursor: not-allowed; }
.cfg-manual-values input::-webkit-outer-spin-button,
.cfg-manual-values input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.cfg-manual-values input[type="number"] { appearance: textfield; }
/* 기준을 아직 못 잡아 입력을 받지 않았을 때의 안내 */
.cfg-edit-notice { margin: 0; padding: 13px 20px; border: 1px solid rgba(228,182,83,.34);
  border-radius: var(--radius-inner); background: var(--warning-soft); color: var(--warning); }

/* 다음 START 가 읽을 설정(번호·확인값) — 서버가 준 값 그대로 보여주는 정본 대조 카드 */
.cfg-identity { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-identity.is-checking { border-color: rgba(228,182,83,.34); background: var(--warning-soft); }
.cfg-identity__vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cfg-identity__vals > div { min-width: 0; padding: 12px 14px; display: grid; gap: 2px;
  border-radius: var(--radius-inner); background: var(--surface-inner); }
.cfg-identity__vals span { color: var(--text-muted); font-size: var(--font-small); }
.cfg-identity__vals strong { overflow-wrap: anywhere; color: var(--text-title); font-variant-numeric: tabular-nums; }
.cfg-identity.is-checking .cfg-identity__vals strong { color: var(--checking); }
.cfg-identity__runtime { margin: 10px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.cfg-identity__runtime span { color: var(--text-body); font-variant-numeric: tabular-nums; }
.cfg-runtime { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-runtime > p { margin: 0; color: var(--text-muted); }
.cfg-diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cfg-diffs > div { min-width: 0; padding: 12px 14px; display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 8px; border-radius: var(--radius-inner); background: var(--surface-inner); }
.cfg-diffs strong { color: var(--text-body); font-size: var(--font-small); }
.cfg-diffs span { overflow-wrap: anywhere; color: var(--text-muted); text-align: right; }
.cfg-diffs b { color: var(--positive); }
.cfg-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.6fr); gap: var(--space-card); align-items: start; }
.cfg-groups { display: grid; gap: 10px; }
.cfg-group { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.cfg-group summary { min-height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: var(--text-title); cursor: pointer; list-style: none; font-weight: 750; }
.cfg-group summary::-webkit-details-marker { display: none; }
.cfg-group summary span:last-child { color: var(--text-muted); font-size: var(--font-small); font-weight: 500; }
.cfg-group[open] summary { border-bottom: 1px solid var(--line); }
.cfg-fields { padding: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.cfg-field { min-width: 0; display: grid; gap: 7px; color: var(--text-muted); font-size: var(--font-small); }
.cfg-field > span { color: var(--text-body); font-weight: 700; }
.cfg-field > span em { margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--warning-soft); color: var(--warning); font-size: 10px; font-style: normal; font-weight: 700; }
.cfg-field input, .cfg-field select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); outline: none; background: var(--canvas-raised); color: var(--text-title); }
.cfg-field input:focus, .cfg-field select:focus { border-color: var(--positive); }
.cfg-field input:disabled, .cfg-field select:disabled { opacity: .72; color: var(--text-muted); cursor: not-allowed; }
.cfg-field small { display: none; color: var(--text-muted); line-height: 1.45; }
.cfg-page.show-explain .cfg-field small { display: block; }
.cfg-preview { position: sticky; top: 92px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-preview > span { color: var(--positive); font-size: var(--font-micro); font-weight: 800; letter-spacing: .08em; }
.cfg-preview h2 { margin: 4px 0 16px; color: var(--text-title); font-size: 20px; }
.cfg-preview__steps { display: grid; gap: 8px; }
.cfg-preview__steps > div { padding: 13px 14px; display: flex; justify-content: space-between; border-radius: var(--radius-control); background: var(--surface-inner); }
.cfg-preview__steps span { color: var(--text-muted); }
.cfg-preview__steps strong { color: var(--text-title); }
.cfg-preview > p { margin: 15px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.cfg-actions { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-actions strong { color: var(--text-title); }
.cfg-actions p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.cfg-actions button { min-height: 48px; padding: 0 20px; border: 1px solid var(--positive); border-radius: var(--radius-control); background: var(--positive); color: #06110d; font-weight: 800; cursor: pointer; }
.cfg-actions button:disabled { border-color: var(--line); background: var(--surface-inner); color: var(--text-faint); cursor: not-allowed; }
.cfg-action-disabled { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-inner); color: var(--text-muted); font-weight: 800; }
.cfg-dialog { position: fixed; inset: 0; z-index: 50; padding: 20px; place-items: center; background: rgba(2,7,10,.78); }
.cfg-dialog:not([hidden]) { display: grid; }
/* 시작 확인창의 안쪽 카드만 뷰포트 좌표로 고정한다. 공용 설정창에는 적용하지 않는다.
   ★ 단위를 vw/vh 에서 %(초기 컨테이닝 블록 = 스크롤바를 뺀 화면)로 바꿨다 —
     vw 는 세로 스크롤바 폭까지 세므로 창이 그 절반(실측 7.5px)만큼 오른쪽으로 밀렸다.
   ★ max-height + overflow-y: 390×667 에서 카드 높이 712.8px 가 위아래로 잘리고
     position:fixed 라 스크롤도 안 됐다 — [닫기]와 [운용 시작]에 손이 닿지 않았다. */
.cfg-dialog[data-v4-op-dialog] > div { position: fixed; top: 50%; left: 50%;
  width: min(calc(100% - 40px),460px); max-height: calc(100% - 40px); overflow-y: auto;
  transform: translate(-50%,-50%); }
.cfg-dialog > div { width: min(100%,460px); padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
.cfg-dialog h2 { margin: 0; color: var(--text-title); }
.cfg-dialog p { color: var(--text-muted); }
.cfg-dialog label { display: grid; gap: 7px; color: var(--text-body); }
.cfg-dialog input { height: 46px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-title); }
.cfg-dialog > div > div { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
/* ★ `grid-template-columns: 1fr` — 근인은 바로 위 공용 규칙(`.cfg-dialog > div > div`)의
   `justify-content: flex-end` 다. 그 규칙은 버튼 줄 소유인데 같은 부모의 **격자 자식에도** 걸려
   열이 max-content 로 줄고 값이 오른쪽에 몰린다(왼쪽 절반이 빈다).
   열을 1fr 로 못박으면 남는 공간이 0 이라 그 flex-end 가 무력해지고,
   각 줄의 space-between 이 «이름표 왼쪽 · 값 오른쪽» 으로 제대로 벌어진다.
   시작 확인창 `.op-dialog__vals` 에 08-17 야간에 넣은 것과 **같은 한 줄**이다(근인도 같다). */
.cfg-dialog > div > .cfg-dialog__captured { margin-top: 16px; padding: 14px; display: grid; gap: 8px; grid-template-columns: 1fr;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-inner); }
.cfg-dialog__captured > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.cfg-dialog__captured span { color: var(--text-muted); font-size: var(--font-small); }
.cfg-dialog__captured strong { color: var(--text-title); text-align: right; }
.cfg-auto-refreshing { color: var(--checking); }
.cfg-dialog button { padding: 11px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-inner); color: var(--text-title); cursor: pointer; }
.cfg-dialog [data-v4-cfg-confirm] { border-color: var(--positive); background: var(--positive); color: #06110d; }

/* 운용 시작·마감 확인창 — 설정 확인창과 같은 껍데기를 쓰고, 값 목록만 더한다. */
.cfg-dialog [data-v4-op-confirm] { border-color: var(--positive); background: var(--positive); color: #06110d; }
/* ★ grid-template-columns: 1fr 이 없으면 값 목록 전체가 오른쪽 끝에 몰리고 왼쪽 절반이 빈다.
   근인: 바로 위 공용 규칙 `.cfg-dialog > div > div` 의 `justify-content: flex-end` 가
   이 격자에도 그대로 걸린다(그 규칙은 버튼 줄 소유라 건드리지 않는다). 열이 max-content(201px)로
   줄어 406px 상자 안에서 오른쪽으로 밀렸다 — 이름표와 값이 함께 오른쪽에 붙어 보이던 자리다.
   열을 1fr 로 못박으면 남는 공간이 0 이라 그 flex-end 가 무력해지고,
   각 줄의 space-between 이 «이름표 왼쪽 · 값 오른쪽» 으로 제대로 벌어진다. */
.cfg-dialog > div > .op-dialog__vals { margin-top: 16px; padding: 14px; display: grid; gap: 8px; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-inner); }
.op-dialog__vals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.op-dialog__vals span { color: var(--text-muted); font-size: var(--font-small); }
.op-dialog__vals strong { color: var(--text-title); text-align: right; }
.op-dialog__vals strong.is-checking-text { color: var(--checking); }
.cfg-dialog .op-dialog__rev { margin-top: 12px; font-size: var(--font-small); }
.cfg-dialog .op-dialog__reason { color: var(--checking); }
.cfg-dialog .op-dialog__result { margin-top: 14px; color: var(--text-body); }
.cfg-dialog .op-dialog__result[data-v4-op-result="CONFIRMED"] { color: var(--positive); }
.cfg-dialog .op-dialog__result[data-v4-op-result="FAILED"] { color: var(--negative); }
.cfg-dialog .op-dialog__result[data-v4-op-result="UNKNOWN"],
.cfg-dialog .op-dialog__result[data-v4-op-result="WARNED"] { color: var(--checking); }

@media (max-width: 820px) {
  .cfg-flow { padding: 12px; grid-template-columns: 1fr; }
  .cfg-state { min-height: 64px; }
  .cfg-layout { grid-template-columns: 1fr; }
  .cfg-diffs { grid-template-columns: 1fr; }
  .cfg-diffs > div { grid-template-columns: minmax(76px, 1fr) minmax(0, 1fr) auto minmax(0, 1fr); }
  .cfg-identity__vals { grid-template-columns: 1fr; }
  .cfg-fields { padding: 15px; grid-template-columns: 1fr; }
  .cfg-prereq, .cfg-wizard, .cfg-operation-values { padding: 16px; }
  .cfg-prereq .cfg-fields { padding: 0; }
  .cfg-wizard-ask { padding: 17px 14px; grid-template-columns: 34px minmax(0,1fr); }
  .cfg-operation-values__grid, .cfg-manual-values__grid { grid-template-columns: 1fr; }
  .cfg-manual-values__grid > label { grid-template-columns: 1fr; gap: 8px; }
  .cfg-preview { position: static; }
  .cfg-actions { align-items: stretch; flex-direction: column; }
  .cfg-actions button { width: 100%; }
  .cfg-action-disabled { width: 100%; }
}

/* ── 정산 ─────────────────────────────────────────────────────────────── */
.st-page { display: grid; gap: var(--space-card); }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 10px 2px 4px; }
.page-title h1 { margin: 1px 0 2px; color: var(--text-title); font-size: 30px; line-height: 1.2; }
.page-title p { margin: 0; color: var(--text-muted); }
.page-title .eyebrow { color: var(--positive); font-size: var(--font-micro); font-weight: 800; letter-spacing: .14em; }
.freshness { flex: none; color: var(--text-muted); font-size: var(--font-small); }
.st-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-unit, .st-period { display: flex; gap: 8px; overflow-x: auto; }
.st-unit button, .st-period button { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.st-unit button[aria-pressed="true"], .st-period button[aria-pressed="true"] { border-color: rgba(70,214,154,.55); background: var(--positive-soft); color: var(--positive); }
.st-custom { padding: 14px; display: flex; align-items: end; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface); }
.st-custom label { flex: 1 1 220px; display: grid; gap: 6px; color: var(--text-muted); font-size: var(--font-small); }
.st-custom input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); outline: none; background: var(--canvas-raised); color: var(--text-title); }
.st-custom input:focus { border-color: var(--positive); }
.st-custom button { min-height: 44px; padding: 0 18px; border: 1px solid var(--positive);
  border-radius: var(--radius-control); background: var(--positive); color: #06110d; font-weight: 800; cursor: pointer; }
.st-pending { min-height: 72px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(114,188,234,.35); border-radius: var(--radius-inner); background: var(--checking-soft); }
.st-pending strong { color: var(--checking); }
.st-pending p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.st-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--checking); }
.st-failed { border-color: rgba(255,102,95,.35); background: var(--negative-soft); }
.st-failed strong { color: var(--negative); }
.st-failed button { margin-left: auto; padding: 10px 15px; border: 1px solid rgba(255,102,95,.45); border-radius: var(--radius-control); background: transparent; color: var(--text-title); cursor: pointer; }
.st-summary { padding: var(--pad-card); display: grid; grid-template-columns: minmax(260px,.72fr) 1.4fr; gap: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-summary__lead { min-height: 172px; padding: 22px; display: flex; flex-direction: column; justify-content: center; border-radius: var(--radius-inner); background: linear-gradient(145deg, var(--surface-inner), rgba(70,214,154,.06)); }
.st-summary__lead > span, .st-metric > span { color: var(--text-muted); font-size: var(--font-small); }
.st-summary__lead strong { margin: 8px 0 4px; color: var(--text-title); font-size: 36px; line-height: 1.2; }
.st-summary__lead small { color: var(--text-muted); }
.st-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.st-metric { min-height: 80px; padding: 17px 18px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-inner); }
.st-metric strong { margin-top: 7px; color: var(--text-title); font-size: 18px; }
.st-metric small { margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.st-omitted { margin: 10px 0 0; color: var(--checking); font-size: var(--font-small); }
.pos { color: var(--positive) !important; } .neg { color: var(--negative) !important; } .checking { color: var(--checking) !important; }
.st-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.6fr); gap: var(--space-card); }
.section-head { margin: 0 2px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head h2, .st-help h2 { margin: 0; color: var(--text-title); font-size: 18px; }
.section-head span { color: var(--text-muted); font-size: var(--font-small); }
.st-cycles { display: grid; gap: 10px; }
.st-cycle, .st-help, .st-days { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-help--wide { min-height: 120px; }
.st-cycle__head { display: flex; justify-content: space-between; gap: 15px; }
.st-cycle__head h3 { margin: 6px 0 0; color: var(--text-title); font-size: 17px; }
.st-cycle__head time { color: var(--text-muted); font-size: var(--font-small); }
.st-source { display: inline-flex; padding: 3px 8px; border: 1px solid rgba(70,214,154,.28); border-radius: 999px; color: var(--positive); font-size: 11px; }
/* ★ N-236 — 사람이 봐야 하는 사유(어긋남)만 음수 톤으로 바꾼다. **새 색을 만들지 않는다**(--negative 재사용). */
.st-source--warn { border-color: rgba(255,102,95,.45); background: var(--negative-soft); color: var(--negative); }
.st-row { padding: 10px 0; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.st-row:first-of-type { margin-top: 12px; }
.st-row span, .st-cycle > p, .st-target { color: var(--text-muted); font-size: var(--font-small); }
.st-row strong { color: var(--text-title); text-align: right; }
.st-help dl { margin: 16px 0 0; }
.st-help dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.st-help dt { color: var(--text-title); font-weight: 700; }
.st-help dd { margin: 3px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.st-empty { min-height: 150px; padding: 30px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); color: var(--checking); background: var(--surface); }
.st-table-wrap { overflow-x: auto; }
.st-days table { width: 100%; border-collapse: collapse; }
.st-days th, .st-days td { padding: 13px 10px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.st-days th:first-child, .st-days td:first-child { text-align: left; }
.st-days th { color: var(--text-muted); font-size: var(--font-small); font-weight: 600; }

@media (max-width: 820px) {
  .st-controls { align-items: stretch; flex-direction: column; }
  .page-title { align-items: start; } .page-title h1 { font-size: 26px; }
  .page-title > div > p:not(.eyebrow) { display: none; }
  .st-summary { padding: 16px; grid-template-columns: 1fr; }
  .st-custom { align-items: stretch; flex-direction: column; }
  .st-custom label { width: 100%; flex-basis: auto; }
  .st-custom button { width: 100%; }
  .st-summary__lead { min-height: 138px; padding: 18px; }
  .st-summary__lead strong { font-size: 30px; }
  .st-metrics { grid-template-columns: 1fr 1fr; }
  .st-metric { min-height: 72px; padding: 14px; }
  .st-layout { grid-template-columns: 1fr; }
  .st-help { order: 2; }
  .st-cycle, .st-help, .st-days { padding: 17px; }
  .st-cycle__head time { max-width: 85px; text-align: right; }
  .section-head { align-items: start; }
}

/* ══ 로그 탭 (ALPHAX_UI_V4_LOGS_20260811 · 시안 07_logs_pc.png / 03_logs_mobile.png) ══
   ★ 셸과 같은 원칙 — 분기는 여기(CSS)에만. 같은 DOM 이 폭에 따라 배치만 달라진다. */
.g-page { display: grid; grid-template-columns: 68fr 32fr; gap: 16px; align-items: start;
  word-break: keep-all; }
.g-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g-card { padding: 20px; border-radius: var(--radius-card); background: var(--surface);
  border: 1px solid var(--line); min-width: 0; }
.g-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.g-card-h b { font-size: 17px; font-weight: 700; }
.g-card-h .g-k { margin-left: auto; }
.g-k { font-size: 12px; color: var(--text-muted); }

/* 머리 */
.g-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.g-head-l { flex: 1 1 auto; min-width: 200px; }
.g-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.3px; }
.g-sub { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); }
.g-head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-search { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 44px;
  border-radius: var(--radius-control); background: var(--surface); border: 1px solid var(--line); }
.g-search-i { color: var(--text-faint); }
.g-search-in { appearance: none; background: none; border: 0; outline: none; min-width: 180px;
  color: var(--text-title); font-family: inherit; font-size: 14px; }
.g-cycle-pick { display: inline-flex; align-items: center; padding: 0 16px; min-height: 44px;
  border-radius: var(--radius-control); background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; white-space: nowrap; }

/* 필터 칩 */
.g-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.g-chip { appearance: none; cursor: pointer; font-family: inherit; padding: 8px 18px; min-height: 40px;
  border-radius: var(--radius-control); background: var(--surface); border: 1px solid var(--line);
  color: var(--text-muted); font-size: 14px; white-space: nowrap; }
.g-chip.is-on { color: var(--positive); border-color: var(--positive); background: rgba(70,214,154,.08); }
.g-chip.d-t-warn { color: var(--warning); }
.g-chip.d-t-warn.is-on { border-color: var(--warning); background: rgba(228,182,83,.10); }

/* 사건 타임라인 */
.g-list { padding: 8px 20px 16px; border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--line); }
.g-state { padding: 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.g-date { display: flex; align-items: center; gap: 8px; padding: 16px 0 8px;
  font-size: 14px; color: var(--text-muted); }
.g-item { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.g-group > .g-item:first-of-type { border-top: 0; }
.g-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--surface-inner); border: 1px solid var(--line); color: var(--text-muted); }
.g-ico.d-t-pos { color: var(--positive); border-color: rgba(70,214,154,.5); }
.g-ico.d-t-warn { color: var(--warning); border-color: rgba(228,182,83,.6); }
.g-ico.d-t-neg { color: var(--negative); border-color: rgba(255,102,95,.6); }
.g-svg { width: 18px; height: 18px; }
.g-body { flex: 1 1 auto; min-width: 0; }
.g-row { appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; text-align: left; }
.g-t { font-size: 16px; font-weight: 600; color: var(--text-title); }
.g-t.d-t-warn { color: var(--warning); } .g-t.d-t-neg { color: var(--negative); }
.g-time { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.g-caret { color: var(--text-faint); }
.g-b { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.g-detail { margin-top: 12px; padding: 14px; border-radius: var(--radius-inner);
  background: var(--surface-inner); border: 1px solid rgba(70,214,154,.28); }
.g-d-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-d-c { min-width: 0; }
.g-d-c b { display: block; margin-top: 4px; font-size: 15px; }
.g-d-f { display: flex; align-items: baseline; gap: 12px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.g-d-more { color: var(--positive); font-size: 13px; }
.g-d-f .g-k { margin-left: auto; }
.g-d-note { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); }
.g-days { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-faint); }

/* 오른쪽 카드들 */
.g-sum-h { display: flex; align-items: baseline; gap: 10px; }
.g-sum-c { font-size: 22px; font-weight: 700; }
.g-sum-s { font-size: 14px; }
.g-sum-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.g-sum-cell { min-width: 0; text-align: center; }
.g-sum-cell + .g-sum-cell { border-left: 1px solid var(--line); }
.g-sum-cell b { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; }
.g-cyc { appearance: none; cursor: pointer; font-family: inherit; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-control);
  background: var(--surface-inner); border: 1px solid var(--line); color: var(--text-title); }
.g-cyc + .g-cyc { margin-top: 8px; }
.g-cyc.is-on { border-color: var(--positive); }
.g-cyc-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); color: var(--text-muted); }
.g-cyc.is-on .g-cyc-n { border-color: var(--positive); color: var(--positive); }
.g-cyc-b { min-width: 0; }
.g-cyc-b b { font-size: 14px; }
.g-cyc-b .g-k { display: block; margin-top: 2px; }
.g-basis-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-basis-c { min-width: 0; text-align: center; padding: 14px 8px; border-radius: var(--radius-control);
  background: var(--surface-inner); border: 1px solid var(--line); }
.g-basis-c b { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; }
.g-basis-n { margin: 12px 0 6px; font-size: 12px; color: var(--text-muted); text-align: center; }
.g-foot { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-muted); }

@media (max-width: 820px) {
  /*   ★ 모바일 세로 순서 = 01 §9-7. 카드를 두 벌 그리지 않고 순서만 다시 준다. */
  .g-page { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .g-col { display: contents; }
  .g-head { order: 1; } .g-filters { order: 2; } .g-list { order: 3; }
  /*   ★ nth-of-type 을 쓰면 `.g-foot`(div) 이 첫 번째로 잡혀 순서가 어긋난다(실측). 이름으로 준다. */
  .g-cycles { order: 4; } .g-summary { order: 5; } .g-basis { order: 6; }
  .g-foot { order: 7; }
  .d-alert { order: 0; }
  .g-card, .g-list { padding: 16px; }
  .g-title { font-size: 24px; }
  .g-head-r { width: 100%; }
  .g-search { flex: 1 1 auto; } .g-search-in { min-width: 0; width: 100%; }
  .g-d-g { grid-template-columns: 1fr; gap: 10px; }
  .g-d-c { display: flex; align-items: baseline; gap: 10px; }
  .g-d-c b { margin-top: 0; margin-left: auto; }
  /*   ★ 제목과 시각은 **한 줄**이다. 줄바꿈을 허용했더니 caret 이 제목 아래로 내려가 세 줄이 됐다(실측). */
  .g-row { flex-wrap: nowrap; }
  .g-t { min-width: 0; overflow-wrap: anywhere; }
  .g-time { margin-left: auto; flex: 0 0 auto; max-width: 92px; text-align: right; white-space: normal; }
}

/* 로그인 전용 반응형은 기존 대시보드 반응형 계약 뒤에 둔다. */
@media (max-width: 820px) {
  .gate-bg img { object-position: center top; }
  .gate-form {
    top: auto;
    right: 22px;
    bottom: max(34px, env(safe-area-inset-bottom));
    left: 22px;
    width: auto;
    min-width: 0;
    transform: none;
    gap: 10px;
  }
  .gate-form input,
  .gate-form button {
    min-height: 48px;
    background: rgba(4, 8, 10, 0.64);
    font-size: 14px;
  }
}