/* ═══════════════════════════════════════════════════════════════════════════
   AlphaX Console v4 — app.css (ALPHAX_UI_REBUILD_20260819 · 새로 짰다)
   정본: _reports/ALPHAX_UI_REBUILD_SPEC_20260819.md (§1 색 · §2 뼈대 · §3 카드 · §4 없앤 것)
         _reports/ALPHAX_DESIGN_RULES_20260819.md §4-A (폭 구간 · 여백 · 비율)

   ★★ 얹지 않았다. 옛 대시보드 CSS(.dashboard-grid 격자 5벌 · .operation-card · .protection-card ·
      .cycle-card · .kpi* · .position-card · .axis-* · .stepper · .next-card · .recent-tp · .system-*)는
      **지웠다**(지우기 전에 다른 탭 소비처를 셌다 — dashboard.mjs 만 썼다).
   ★ 다른 탭(코인 · 운용 설정 · 로그 · 정산)은 뼈대 그대로 두고 **톤(색·글자·여백)만** 이 토큰을 따른다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  /* ══ 색 — 회색 **두 단계**뿐 (정본 §1). 회색은 R=G=B. 세 번째 층을 만들지 않는다 ══
     바탕 #191919 · 카드 #262626 · 선 #303030 · 글자 #ECECEC / #9B9B9B / #6E6E6E */
  --canvas: #191919;
  --surface: #262626;
  --line: #303030;
  --text-title: #ECECEC;
  --text-body: #ECECEC;
  --text-muted: #9B9B9B;
  --text-faint: #6E6E6E;
  /* ★ 선택 상자 화살표(ALPHAX_드롭다운_20260903) — 스프라이트 i-chevron(m8 10 4 4 4-4)과 같은 선. data: 안에는 var() 가
     못 들어가서 색 글자를 «토큰 자리»에 둔다. 값은 --text-muted 와 같다 — 시험(test_select_dress)이 둘이 같은지 센다 */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 7 14 10' fill='none' stroke='%239B9B9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E");
  /* 옛 이름을 쓰는 다른 탭이 깨지지 않게 **같은 두 회색**으로 잇는다.
     「한 겹 안쪽」은 층을 쌓지 않고 **바탕색으로 파고든다**(정본 §1 — 선택된 메뉴·눌린 단추도 같다). */
  --canvas-raised: var(--canvas);
  --surface-inner: var(--canvas);
  --surface-soft: var(--canvas);
  --line-strong: var(--line);
  --glass: var(--canvas);
  --overlay: rgba(0, 0, 0, 0.6);
  /* ══ 색을 쓰는 자리는 **다섯뿐** — 돈 · 봉 · 운용 시작 단추 · 차트 현재가 딱지 · 로고 ══ */
  --positive: #0ECB81;          /* 이익 */
  --negative: #F6465D;          /* 손해 */
  --accent: #E8B339;            /* 운용 시작 단추 · 차트 현재가 딱지 */
  --accent-ink: #2A1E04;
  /* 옛 이름(브랜드·주의·확인 중) — **전부 회색**으로 잇는다. 정상/주의/확인 중은 색으로 칠하지 않는다. */
  --brand: var(--text-title);
  --brand-soft: var(--canvas);
  --brand-line: var(--line);
  --brand-ink: var(--canvas);
  --warning: var(--text-title);
  --warning-soft: var(--canvas);
  --checking: var(--text-muted);
  --checking-soft: var(--canvas);
  --checking-line: var(--line);
  --positive-soft: var(--canvas);
  --negative-soft: var(--canvas);
  /* ══ 로고 — **글자** (ALPHAX_LOGIN_BRAND_20260820 · 아산1 공개 화면 실측값 그대로) ═══
     로고는 정본 §1 「색 다섯 자리」의 «로고» 다 — 회색 규칙(R=G=B)·글자 위계(크기 다섯·굵기 셋)의 예외.
     크기·굵기·자간은 글자 규격이 아니라 브랜드 마크 규격이라 전용 토큰으로 둔다(문서 위계와 섞지 않는다). */
  --logo-word: #E8EAE9;          /* Alpha (밝은 화면에선 아래 theme-light 가 진한 글자색으로 덮는다) */
  --logo-x: #21F1A8;             /* X · 민트 — 어두운/밝은 공통 */
  --logo-weight: 900;
  --logo-size-login: 52px;
  --logo-size-nav: 30px;   /* Owner 08-20 「조금 더 키웠으면」 — 메뉴 글자 14px 의 2.1배 */
  --logo-size-header: 24px; /* Owner 08-20 — 모바일 헤더 */
  /* ══ 로그인 게이트 — 아산1 구도 · **항상 어두운 화면**(theme-light 미적용 전용 토큰) ═══
     바탕 #171717 · 상자 #1E1E1E · 선 #2E2E2E = 아산1 실측(전부 R=G=B 회색). 로고 자리 70/14 는 실측 규격. */
  --gate-bg: #171717;
  --gate-panel: #1E1E1E;
  --gate-line: #2E2E2E;
  --gate-text: #E8EAE9;
  --gate-muted: #6E6E6E;
  --gate-btn-ink: #0C1410;       /* 민트 단추 위 어두운 글자(아산1 실측) */
  --gate-brand-h: 70px;
  --gate-brand-gap: 14px;        /* 아산1 실측 — 지시문 [2/6] 값 · 여백 다섯 단계의 예외(로고 자리 규격) */
  /* ══ 여백 — 다섯 단계만 (규칙표 §1): 4 · 8 · 12 · 16 · 24 ═══════════════════ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --space-card: var(--sp-4);
  --space-card-mobile: var(--sp-3);
  --pad-card: var(--sp-4);
  --pad-card-mobile: var(--sp-3);
  /* ══ 글자 — 크기 다섯, 굵기 셋 (규칙표 §2): 26 / 16 / 14 / 12 / 11 ═══════════ */
  --font-display: 26px;
  --font-title: 16px;
  --font-body: 14px;
  --font-small: 12px;
  --font-micro: 11px;
  --weight-normal: 500;
  --weight-bold: 700;
  --weight-heavy: 800;
  /* 카드 모서리 14 · 테두리 1px 한 종류 (규칙표 §4-A④) */
  --radius-card: 14px;
  --radius-inner: 12px;
  --radius-control: 8px;
  /* 뼈대 (규칙표 §4-A② · 정본 §2): 세로메뉴 200 · 본문 최대 1600 · 좌우 여백 24(모바일 16) */
  --nav-w: 200px;
  --shell-max: 1600px;
  --gutter: var(--sp-5);
  --gutter-mobile: var(--sp-4);
  --header-h: 56px;
  /* 전광판 한 바퀴(정본 §3-② · 26초) — JS 가 같은 값을 style 로 싣는다(stripTickerFacts.TICKER_DURATION_SEC). */
  --ticker-duration: 26s;
}

/* ── 밝은 화면 (정본 §1) — 바탕 #F2F2F2 · 카드 #FFFFFF · 선 #E3E3E3 · 글자 #1A1A1A / #5E5E5E / #8B8B8B ── */
body.theme-light {
  color-scheme: light;
  --logo-word: #1A1A1A;          /* 밝은 화면에서 #E8EAE9 는 안 보인다 — Alpha 만 진한 글자색 · X 는 민트 유지 */
  --canvas: #F2F2F2;
  --surface: #FFFFFF;
  --line: #E3E3E3;
  --text-title: #1A1A1A;
  --text-body: #1A1A1A;
  --text-muted: #5E5E5E;
  --text-faint: #8B8B8B;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 7 14 10' fill='none' stroke='%235E5E5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E");   /* = 밝은 화면의 --text-muted */
  --overlay: rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

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

html {
  min-width: 320px; background: var(--canvas);
  /* 페이지 pinch/double-tap 확대만 제한하고 양방향 스크롤은 허용한다.
     차트의 자체 touch 처리와 텍스트 선택은 그대로 둔다. Safari는 viewport 제한을
     무시할 수 있으므로 meta만으로 막았다고 판단하지 않는다(iOS 실기 확인 필요). */
  touch-action: pan-x pan-y;
}

body {
  /* 공용 select-dress.css 가 읽는 V4 토큰 연결. body 에서 잇기 때문에 theme-light 의
     --canvas/--line/--text-* 재정의를 같은 요소에서 따라가며 어두운 값으로 굳지 않는다. */
  --select-background: var(--canvas);
  --select-line: var(--line);
  --select-text: var(--text-title);
  --select-muted: var(--text-muted);
  --select-hover: var(--text-faint);
  --select-option-background: var(--surface);
  --select-font-size: var(--font-body);
  --select-font-weight: var(--weight-bold);
  --select-radius: var(--radius-control);
  --select-space: var(--sp-3);
  --select-space-wide: var(--sp-5);
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: var(--font-body);
  /* ★ 모든 숫자는 자리 고정(규칙표 §3) — 값이 바뀔 때 좌우로 밀리지 않게. */
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-normal);
  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;
}

button, a, summary { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
/* 링크 기본색(브라우저 파랑)을 쓰지 않는다 — 색은 다섯 자리뿐(정본 §1). 단추 기본 안쪽 여백(1px 6px)도 쓰지 않는다. */
a { color: inherit; }
button { padding: 0; }
/* 브라우저 기본값이 규격 밖 값을 만든다 — small(0.83em) · 체크박스 여백(3px) · 문단 기본 마진(1em) */
small { font-size: var(--font-small); }
input[type="checkbox"], input[type="radio"] { margin: 0; padding: 0; }

/* 선택 상자 생김새는 V4와 VIP가 함께 읽는 ../select-dress.css 한 곳에 있다.
   이 파일의 .cfg-field select 는 폭과 자리만 정한다. */
.cfg-page p, .st-page p, .c-page p, .g-page p, .dash p { margin-top: 0; margin-bottom: 0; }
.cfg-page p + p, .st-page p + p { margin-top: var(--sp-1); }

/* 손익 — 이 둘만 초록·빨강. 「확인 중」은 흐린 글자(색 없음). */
.is-positive { color: var(--positive) !important; }
.is-negative { color: var(--negative) !important; }
.is-checking-text { color: var(--text-muted) !important; }

/* ═══ 로고 — 글자 한 벌 (ALPHAX_LOGIN_BRAND_20260820 · 아산1 실측) ═══════════════
   기본(콘솔 안)은 **정지**다 — 움직임 셋(v4wake·v4charge·v4shimmer)은 로그인(`--login`)에만 붙는다.
   자간은 실측 −2px/52px 의 **비율**(−0.0385em)이라 크기를 줄여도 비례가 유지된다. */
.ax-logo {
  display: inline-block;
  position: relative;
  color: var(--logo-word);
  font-size: var(--logo-size-nav);
  font-weight: var(--logo-weight);
  letter-spacing: -0.0385em;
  line-height: 1;
  white-space: nowrap;
}
.ax-logo .x { color: var(--logo-x); }

/* 로그인 화면에서만 — 52px + 움직임 셋 (아산1 값 그대로) */
.ax-logo--login {
  font-size: var(--logo-size-login);
  letter-spacing: -2px;
  opacity: 0.35;
  animation: v4wake 1.3s ease-out 0.3s forwards;
}
@keyframes v4wake {
  0% { opacity: 0.35; }
  55% { opacity: 0.35; }
  68% { opacity: 1; text-shadow: 0 0 24px rgba(168, 230, 196, 0.9), 0 0 44px rgba(127, 174, 148, 0.5); }
  100% { opacity: 1; text-shadow: 0 0 0 transparent; }
}
.ax-logo--login .x { animation: v4charge 2.6s ease-in-out 1.6s infinite; }
@keyframes v4charge {
  0%, 100% { color: var(--logo-x); text-shadow: 0 0 8px rgba(127, 174, 148, 0.5), 0 0 16px rgba(127, 174, 148, 0.25); }
  50% { color: #a8e6c4; text-shadow: 0 0 14px rgba(168, 230, 196, 0.85), 0 0 28px rgba(127, 174, 148, 0.5), 0 0 40px rgba(127, 174, 148, 0.25); }
}
/*   빛이 글자를 한 번 훑고 지나간다 — 아산1 규칙 그대로(gradient 는 이 로고 예외 한 곳뿐 · test_v4_design E2). */
.ax-logo--login::after {
  content: "AlphaX";
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(110deg, transparent 35%, #a8e6c4 49%, #eafff4 51%, #a8e6c4 53%, transparent 67%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: v4shimmer 4.5s ease-in-out 2.2s infinite;
  pointer-events: none;
}
@keyframes v4shimmer {
  0% { background-position: 180% 0; }
  35%, 100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-logo--login { animation: none; opacity: 1; }
  .ax-logo--login .x { animation: none; }
  .ax-logo--login::after { display: none; }
}

/* ═══ 셸 — 세로메뉴(PC) · 헤더+서랍(모바일) · 본문 ═══════════════════════════ */
.app-body { display: flex; align-items: flex-start; min-height: 100vh; }

/* 세로메뉴 — 카드색 판 · 선택된 항목은 **바탕색으로 파고든다**(층을 쌓지 않는다). */
.app-nav {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) 0 var(--sp-4);
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
}
.app-nav__brand { padding: 0 var(--sp-4) var(--sp-4); }
.app-nav__group { padding: var(--sp-2) var(--sp-2); }
.app-nav__section {
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  color: var(--text-faint);
  font-size: var(--font-micro);
  font-weight: var(--weight-bold);
}
.app-nav__item {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-body);
  text-align: left;
  cursor: pointer;
}
.app-nav__item svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8;
}
/* 텔레그램 문의 로고 — 아이콘과 같은 18px 자리. 원형 «투명» PNG(36px · 2배)라 어두운 바탕에 흰 네모가 없다. */
.app-nav__item img { width: 18px; height: 18px; flex: 0 0 auto; }
.app-nav__new { color: var(--negative); font-size: var(--font-micro); }
.app-nav__item:hover { color: var(--text-title); }
.app-nav__item.is-on { background: var(--canvas); color: var(--text-title); font-weight: var(--weight-bold); }
.app-nav__foot {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-2) 0;
  display: grid;
  gap: var(--sp-2);
  border-top: 1px solid var(--line);
}
.app-nav__account {
  padding: 0 var(--sp-2);
  overflow: hidden;
  color: var(--text-faint);
  font-size: var(--font-small);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 로고 자리 — PC 세로메뉴 머리(30px) · 모바일 헤더(24px) · 콘솔 안은 정지 로고다. */
.brand { display: inline-block; line-height: 1; text-decoration: none; cursor: pointer; }

/* 본문 — 세로메뉴 오른쪽 · 최대 1600 · 좌우 여백 24 **양쪽 같다** */
.shell {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--gutter) var(--sp-5);
}
/* PC 오른쪽 위 — 개발서버 딱지 (밝기 스위치는 2026-09-03 세로메뉴 맨 아래로 옮겼다). 딱지가 없으면 줄 자체를 숨긴다 — 빈 띠를 남기지 않는다 */
.shell-top {
  min-height: 32px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}
.shell-top:empty { display: none; }
.server-tag {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: var(--font-small);
  white-space: nowrap;
}
/*  ★★2026-09-07 사장님 결정 — ★로그아웃을 «콘솔 별명 옆»으로 옮겼다 (왼쪽 메뉴 맨 아래 → 머리줄 오른쪽).
    ★옆의 딱지(.server-tag)와 «같은 키·같은 둥글기»로 둔다 — 새 모양을 만들지 않는다.   */
.server-logout {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--canvas);
  color: var(--text-muted);
  font: inherit; font-size: var(--font-small);
  white-space: nowrap; cursor: pointer;
}
.server-logout:hover { color: var(--text-title); }
.server-logout svg { width: 14px; height: 14px; fill: currentColor; }
/*  ★★「개인정보」 카드 — ★어드민 표와 «같은 모양»(이름 | 값). ★새 색을 만들지 않는다.   */
.account-card { display: grid; gap: var(--sp-2); }
.account-card__t { color: var(--text-title); font-size: var(--font-title); font-weight: var(--weight-bold); }
.account-card__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-top: 1px solid var(--line);
}
.account-card__row:first-of-type { border-top: 0; }
.account-card__k { color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
.account-card__v { color: var(--text-title); text-align: right; overflow-wrap: anywhere; }
.account-card__act { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.account-card__edit {
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--canvas); color: var(--text-title); font: inherit; font-weight: var(--weight-bold); cursor: pointer;
}
.theme-switch {
  display: inline-flex;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.theme-seg {
  min-height: 28px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-small);
  cursor: pointer;
}
.theme-seg.is-on { background: var(--canvas); color: var(--text-title); font-weight: var(--weight-bold); }
/* 세로메뉴 맨 아래의 밝기 스위치 — PC 세로메뉴와 모바일 서랍이 같은 발 칸(app-nav__foot)에 둔다. 두 칸이 폭을 나눠 갖는다(기본 규칙 · 모바일 전용 아님). */
.theme-switch--nav { margin: 0 var(--sp-2); justify-content: stretch; }
.theme-switch--nav .theme-seg { flex: 1 1 0; }

/* 모바일 헤더·서랍 — 기본 숨김(≤820 에서만 나타난다) */
.app-header { display: none; }
.drawer { display: none; }

/* 계정(개인정보) 창 — 닫는 길은 아래 「닫기」 하나(X 단추 없음 · A-13) */
.account-dialog {
  position: fixed; z-index: 80; inset: 0; padding: var(--sp-4);
  display: grid; place-items: center; background: var(--overlay);
}
.account-dialog__panel {
  width: min(100%, 460px); position: relative; padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
.account-dialog__note { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--font-small); }
.account-dialog__actions { margin-top: var(--sp-4); display: flex; justify-content: flex-end; }
.account-dialog__actions button {
  min-height: 40px; padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--canvas); color: var(--text-title); font-weight: var(--weight-bold); cursor: pointer;
}
.pw-card { background: transparent; }
.pw-h { margin: 0 0 var(--sp-4); color: var(--text-title); font-size: var(--font-title); }
.pw-wrap, .pw-sec { display: grid; gap: var(--sp-2); }
.pw-t { margin: 0; color: var(--text-title); font-size: var(--font-title); }
.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: 44px; padding: 0 var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-control); outline: none; background: var(--canvas); color: var(--text-title); }
.pw-in:focus { border-color: var(--text-muted); }
.pw-field { display: grid; gap: var(--sp-1); }
.pw-btn { min-height: 44px; margin-top: var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--canvas); color: var(--text-title); font-weight: var(--weight-bold); cursor: pointer; }
.pw-btn:disabled { opacity: .55; cursor: wait; }
.pw-ok { color: var(--text-title); }
.pw-bad { color: var(--text-title); font-weight: var(--weight-bold); }
.pw-hint, .pw-pips { display: none; }

/* 카드 — 한 종류(테두리 1px · 모서리 14 · 안 여백 16 / 모바일 12) */
.card {
  min-width: 0;
  padding: var(--pad-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.card-head {
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.card-title { margin: 0; color: var(--text-title); font-size: var(--font-title); font-weight: var(--weight-bold); }
.card-title em { margin-left: var(--sp-2); color: var(--text-muted); font-size: var(--font-small); font-style: normal; font-weight: var(--weight-normal); }
.shell > [data-v4-setup-card] { margin-bottom: var(--space-card); }
.tab-main { display: block; }
.tab-empty p { margin: 0; color: var(--text-title); }
.tab-empty__sub { margin-top: var(--sp-1) !important; color: var(--text-muted) !important; font-size: var(--font-small); }

/* ═══ 대시보드 — 카드 **셋뿐** (정본 §3) ══════════════════════════════════════ */
.dash { display: grid; gap: var(--space-card); }

/* ① 맨 위 띠 — **한 줄**: 지갑 잔고 · 미실현 손익 · [운용 시작] (단추는 오른쪽 끝) */
.strip {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.strip__kv { min-width: max-content; display: grid; gap: var(--sp-1); }
.strip__v { color: var(--text-title); font-size: var(--font-display); font-weight: var(--weight-bold); line-height: 1.15; white-space: nowrap; }
.strip__v small { color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-normal); }
.strip__k { color: var(--text-muted); font-size: var(--font-small); }
.strip__asof { color: var(--text-faint); font-size: var(--font-small); font-weight: var(--weight-normal); white-space: nowrap; }
.strip__action {
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--canvas);
  color: var(--text-title);
  font-size: var(--font-body);
  font-weight: var(--weight-heavy);
  white-space: nowrap;
  cursor: pointer;
}
/* ★ 색을 쓰는 다섯 자리 중 하나 — **운용 시작** 단추만 노랑. 「운용 마감」은 회색(색 없음). */
.strip__action--start { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
/* ★ 운용 마감 — 붉은 테두리·붉은 글자(2026-08-21 Owner 결정).
   채우지 않는다: 시작(노랑 채움)과 한눈에 갈리고, 실수로 누르는 단추가 되지 않게. */
.strip__action:not(.strip__action--start):not(:disabled) {
  border-color: var(--negative);
  color: var(--negative);
  font-weight: var(--weight-heavy);
}
.strip__action:disabled { cursor: not-allowed; color: var(--text-faint); border-color: var(--line); background: var(--canvas); }
.strip__reason { flex: 1 0 100%; margin: 0; color: var(--text-muted); font-size: var(--font-small); }

/* ② 전광판 — 높이 46 · 한 줄 · 왼쪽 딱지 고정 · 우→좌 26초 · 두 벌 · 마우스 올리면 멈춤 */
.ticker {
  /* ★ ① 한 칸 높이는 **여기 한 곳**에서 못박는다(ALPHAX_NIGHT_SIX_20260821).
     예전엔 이 변수가 어디에도 정의돼 있지 않아 무대(상속 글자크기)와 줄(--font-body)이
     제각각 1.5em 폴백을 쓸 수 있었다. 무대·줄·이동 단위가 전부 이 값 하나를 쓴다. */
  --ticker-line-h: calc(var(--font-body) * 1.5);
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  overflow: hidden;
}
.ticker__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-right: var(--sp-3);
  border-right: 1px solid var(--line);
  color: var(--text-title);
  font-size: var(--font-small);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.ticker__age { flex: 0 0 auto; color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
/* ★★ 전광판 = **세로로 한 줄씩 위로** (2026-08-21 Owner 결정 · 이 줄을 지우지 마라).
   좌우로 흘리면 좁은 폰에서 글자가 잘리고, 짧은 줄은 빈칸이 크게 지나가 끊겨 보인다.
   한 줄이 머물렀다가 위로 슥 올라가고, 마지막엔 첫 줄을 한 번 더 붙여 제자리로 돌아온다. */
.ticker__stage {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--ticker-line-h, 1.5em);
  overflow: hidden;
}
.ticker__reel { display: block; will-change: transform; }
.ticker__row {
  display: block;
  height: var(--ticker-line-h, 1.5em);
  line-height: var(--ticker-line-h, 1.5em);
  color: var(--text-body);
  font-size: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker:hover .ticker__reel { animation-play-state: paused; }
/* 한 줄만 있으면 올라갈 곳이 없다 — 가만히 둔다. */
.ticker[data-ticker-lines="1"] .ticker__reel { animation: none; }
/* 두 줄(+첫 줄 사본 1) = 3칸. 세 줄(+사본 1) = 4칸. 각 칸에서 머물다 한 칸씩 올라간다. */
.ticker[data-ticker-lines="2"] .ticker__reel { animation: ticker-reel-2 10s infinite; }
.ticker[data-ticker-lines="3"] .ticker__reel { animation: ticker-reel-3 15s infinite; }
.ticker[data-ticker-lines="4"] .ticker__reel { animation: ticker-reel-4 20s infinite; }
/* ★ 다섯째 줄이 생기는 자리 = 예약 마감이 걸려 있을 때(ALPHAX_CLOSE_PLAN_CANCEL_20260822).
   줄이 늘었는데 여기 규칙이 없으면 릴이 아예 멈춰 **첫 줄만 영영 보인다** — 늘어난 줄이 통째로 사라진다. */
.ticker[data-ticker-lines="5"] .ticker__reel { animation: ticker-reel-5 25s infinite; }
/* ★ ① 이동 단위 = **한 칸 높이의 정수배**(퍼센트 금지 · ALPHAX_NIGHT_SIX_20260821).
   퍼센트는 릴 전체 높이에 기대므로 칸 높이가 어긋나는 순간 줄이 잘린다.
   칸 높이(--ticker-line-h)를 그대로 곱해 어느 줄 수에서도 정확히 한 칸씩 올라간다. */
@keyframes ticker-reel-2 {
  0%, 42%   { transform: translateY(0); }
  50%, 92%  { transform: translateY(calc(var(--ticker-line-h) * -1)); }
  100%      { transform: translateY(calc(var(--ticker-line-h) * -2)); }
}
@keyframes ticker-reel-3 {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(calc(var(--ticker-line-h) * -1)); }
  66%, 94%  { transform: translateY(calc(var(--ticker-line-h) * -2)); }
  100%      { transform: translateY(calc(var(--ticker-line-h) * -3)); }
}
@keyframes ticker-reel-4 {
  0%, 21%   { transform: translateY(0); }
  25%, 46%  { transform: translateY(calc(var(--ticker-line-h) * -1)); }
  50%, 71%  { transform: translateY(calc(var(--ticker-line-h) * -2)); }
  75%, 96%  { transform: translateY(calc(var(--ticker-line-h) * -3)); }
  100%      { transform: translateY(calc(var(--ticker-line-h) * -4)); }
}
@keyframes ticker-reel-5 {
  0%, 17%   { transform: translateY(0); }
  20%, 37%  { transform: translateY(calc(var(--ticker-line-h) * -1)); }
  40%, 57%  { transform: translateY(calc(var(--ticker-line-h) * -2)); }
  60%, 77%  { transform: translateY(calc(var(--ticker-line-h) * -3)); }
  80%, 97%  { transform: translateY(calc(var(--ticker-line-h) * -4)); }
  100%      { transform: translateY(calc(var(--ticker-line-h) * -5)); }
}
/* ★★ 문제가 생기면 **흐르지 않는다** — 딱지 「확인 필요」 · 그 한 줄만 멈춰서 남는다. */
.ticker[data-ticker-state="alert"] .ticker__badge,
.ticker[data-ticker-state="alert"] .ticker__dot { color: var(--text-title); background: transparent; }
.ticker[data-ticker-state="alert"] .ticker__dot { background: var(--text-title); }
.ticker[data-ticker-state="alert"] .ticker__line { font-weight: var(--weight-bold); }
.ticker__line { min-width: 0; margin: 0; overflow: hidden; color: var(--text-title); font-size: var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.ticker[data-ticker-state="checking"] .ticker__line { color: var(--text-muted); font-weight: var(--weight-normal); }
/* 모션 감소 — 올라가지 않고 첫 줄만 보인다(사본은 숨긴다) */
@media (prefers-reduced-motion: reduce) { .ticker__reel { animation: none !important; } .ticker__row[aria-hidden="true"] { display: none; } }

.tplog__ledger { color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-normal); white-space: nowrap; }

/* ③ 두 칸 — 차트(왼쪽) · 익절 기록(오른쪽). 오른쪽 칸 320~400 · 창의 26% · 좌:우 ≤ 3:1 · 두 칸 바닥 같다 */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 26%, 400px);
  gap: var(--space-card);
  align-items: stretch;
}
.dash-grid__left, .dash-grid__right { min-width: 0; display: flex; }
.dash-grid__left > .card, .dash-grid__right > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* 차트 카드 */
.chart-tfs { display: inline-flex; gap: var(--sp-1); }
.chart-tf {
  min-height: 28px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-small);
  cursor: pointer;
}
.chart-tf.is-on { background: var(--canvas); color: var(--text-title); font-weight: var(--weight-bold); }
.chart-edges { min-height: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chart-edges:not(:empty) { margin-bottom: var(--sp-2); }
.chart-edge {
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--font-micro);
  white-space: nowrap;
}
.chart-edge--reversal { border-color: var(--negative); color: var(--negative); }
.chart-edge--profit { border-color: var(--positive); color: var(--positive); }
/* ★ ALPHAX_LIQUIDATION_LINE_20260824 — 강제청산 딱지·범례.
   ★★ **새 색을 만들지 않는다** — 정본 「색을 쓰는 자리는 다섯뿐」을 지킨다.
     전환과 청산은 **절대 같이 뜨지 않으므로**(생산자가 보장) 같은 빨강을 써도 헷갈리지 않는다.
     구분은 색이 아니라 **글자**(「전환」 대 「강제청산」)와 **굵기**가 한다.
   ★ 청산가는 봉 범위에서 한참 떨어져 있어 «거의 언제나» 이 딱지로 나온다(선이 화면 밖).
     색 규칙이 아예 없으면 회색으로 떠서 경고가 안내처럼 읽힌다 — 그것이 이 줄이 있는 이유다. */
.chart-edge--danger { border-color: var(--negative); color: var(--negative); font-weight: var(--weight-bold); }
/* ★ ALPHAX_CHART_STAGE_20260824 — 차트 제목 옆 「N단계 운용 중」.
   ★ 색을 쓰지 않는다(회색 글자) — 정상 상태는 색으로 칠하지 않는다는 정본 규칙 그대로. */
.chart-stage { margin-left: var(--sp-3); color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
.chart-legend { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.chart-legend__item { color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
.chart-legend__item i { font-style: normal; }
.chart-legend__item--reversal { color: var(--negative); }
.chart-legend__item--profit { color: var(--positive); }
.chart-legend__item--danger { color: var(--negative); font-weight: var(--weight-bold); }
/* ★ 2026-09-17 사장님 ⑳ — 마지막 단계의 「-- 강제청산 <값>」. 진입·익절과 «같은 크기·같은 굵기», 색만 위험 빨강. */
.chart-legend__item--liquidation { color: var(--negative); }
/* ★ 2026-09-17 사장님 ⑳ — 단추 글자 크기를 옆 범례(12px)와 맞춘다. 옛 규칙은 font: inherit 로 14px 이 되어 커 보였다. */
.chart-legend__btn { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: transparent; color: var(--text-body); font: inherit; font-size: var(--font-small); min-height: 24px; padding: 0 var(--sp-2); cursor: pointer; }
.chart-legend__btn:hover { border-color: var(--brand); color: var(--brand); }
.chart-legend__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* ★ 2026-09-17 사장님 ⑳ — 「손절선 설정」은 노랑. 새 색이 아니라 운용 시작 단추·차트 현재가 딱지의 그 노랑이다. */
.chart-legend__btn--arm { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.chart-legend__btn--arm:hover { border-color: var(--text-title); color: var(--accent-ink); }
/* ★ 2026-09-17 사장님 ⑳ — 강제청산선이 화면 밖이면 차트 안 바닥(롱) · 꼭대기(숏)에 빨간 딱지.
   가운데에 둔다 — 왼쪽 아래는 차트 부품 표시(라이선스)가, 오른쪽은 가격 딱지가 쓰는 자리다.
   바닥 딱지는 시간축 글자 위로 올린다. 봉 범위의 위아래 여백 안이라 봉을 덮지 않는다. */
.chart-liq {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  padding: 0 var(--sp-2);
  border: 1px solid var(--negative);
  border-radius: 6px;
  background: var(--surface);
  color: var(--negative);
  font-size: var(--font-micro);
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.chart-liq--down { bottom: calc(var(--sp-5) + var(--sp-2)); }
.chart-liq--up { top: var(--sp-1); }
.chart-slot { position: relative; flex: 1 1 auto; min-height: 300px; }
.chart-host { position: absolute; inset: 0; }
.chart-status { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--font-small); }
.chart-status.is-failed { color: var(--text-title); }
/* 봉이 없을 때(받는 중·실패) 빈 자리 — 사유 한 줄이 카드 가운데에 선다 */
.chart-slot:empty + .chart-status { position: absolute; left: var(--sp-4); right: var(--sp-4); top: 50%; margin: 0; text-align: center; }
.chart-card { position: relative; }

/* 익절 기록 — 칸 안 스크롤(PC) · 3건 + 제목 줄 「전체 보기」(모바일) */
.tplog__scroll { position: relative; flex: 1 1 auto; min-height: 200px; }
.tplog__list { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.tplog__row {
  padding: var(--sp-2) 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-small);
  white-space: nowrap;
}
.tplog__row:last-child { border-bottom: 0; }
.tplog__when { color: var(--text-muted); }
.tplog__stage { color: var(--text-body); }
.tplog__sep { color: var(--text-faint); }
.tplog__money { margin-left: auto; color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-bold); }
.tplog__pct { color: var(--text-muted); font-size: var(--font-micro); }
.tplog__empty { margin: 0; padding: var(--sp-4) 0; color: var(--text-muted); font-size: var(--font-small); }
.tplog__more { display: none; }
.tplog__basis { margin: var(--sp-3) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--font-micro); }

/* ═══ 폭 구간 — 셋뿐 (규칙표 §4-A①): ≥1340 두 칸 · 821~1339 한 칸 · ≤820 모바일 ═══ */
@media (max-width: 1339px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .tplog__scroll { min-height: 0; }
  .tplog__list { position: static; max-height: 360px; }
}

@media (max-width: 820px) {
  :root { --gutter: var(--gutter-mobile); --pad-card: var(--pad-card-mobile); --space-card: var(--space-card-mobile); }
  .app-nav { display: none; }
  .app-body { display: block; }
  /* 헤더 = [로고] … [개발서버] [☰]  (햄버거 오른쪽 · 44×44 이상) */
  .app-header {
    display: block;
    position: sticky; top: 0; z-index: 30;
    height: var(--header-h);
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
  }
  .app-header__inner {
    height: 100%;
    padding: 0 var(--sp-1) 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }
  .app-header .ax-logo { font-size: var(--logo-size-header); }
  .app-header__right { display: flex; align-items: center; gap: var(--sp-2); }
  .menu-toggle {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; border-radius: var(--radius-control);
    background: transparent; color: var(--text-title); cursor: pointer;
  }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
  /* 서랍 — **오른쪽에서** 나온다(여는 쪽과 같은 쪽). 바깥 누르기 · Esc 로 닫는다. X 없음. */
  .drawer { display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none; }
  .drawer__backdrop { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity 160ms ease; }
  .drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(300px, 86vw);
    display: flex; flex-direction: column;
    padding: var(--sp-4) 0;
    border-left: 1px solid var(--line);
    background: var(--surface);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 180ms ease;
  }
  .drawer.is-open { pointer-events: auto; }
  .drawer.is-open .drawer__backdrop { opacity: 1; }
  .drawer.is-open .drawer__panel { transform: translateX(0); }
  .drawer .app-nav__foot { padding-bottom: var(--sp-2); }
  .shell { padding: var(--sp-3) var(--gutter) var(--sp-5); }
  .shell-top { display: none; }

  .dash { gap: var(--space-card-mobile); }
  .dash-grid { gap: var(--space-card-mobile); }
  /* 띠 — 한 줄. 좁으면 단추가 다음 줄 오른쪽으로 간다(숫자는 줄이지 않는다 · 규칙표 §3). */
  .strip { gap: var(--sp-4); }
  .strip__action { min-height: 40px; padding: 0 var(--sp-4); }
  .ticker { min-height: 44px; padding: 0 var(--sp-3); }
  /* 차트 — **접지 않는다.** 펼친 채로 둔다(정본 §3-③). */
  .chart-slot { min-height: 260px; }
  /* 익절 기록 — 3건 + 「전체 보기 ›」 */
  .tplog__scroll { min-height: 0; }
  .tplog__list { position: static; max-height: none; overflow: visible; }
  .tplog__row--more { display: none; }
  .tplog.is-expanded .tplog__row--more { display: flex; }
  /* ★ 2026-09-17 사장님 — 단추는 목록 «아래»가 아니라 **제목 줄 오른쪽**(계산기 「자세히」와 같은 자리).
     글자 색·크기·굵기는 「자세히」와 **같은 규칙 한 줄**을 쓴다(아래 .cfg-group summary span:last-child).
     누르는 자리는 옛 단추와 같은 높이 40 — 위아래 음수 여백으로 제목 줄 높이는 늘리지 않는다.
     좁아서 줄이 나뉘어도 오른쪽에 붙는다(margin-left:auto). */
  .tplog__more {
    display: inline-flex; align-items: center; min-height: 40px;
    margin: calc(var(--sp-2) * -1) 0 calc(var(--sp-2) * -1) auto; padding: 0 0 0 var(--sp-3);
    border: 0; background: none; cursor: pointer; white-space: nowrap;
  }
}
/* ── 로그인 게이트 — 포르쉐 암실 사진 위 입력 한 벌(회색 톤만 맞췄다 · 구조 무변경) ── */
/* ═══ 로그인 게이트 — 아산1 과 같은 구도 (ALPHAX_LOGIN_BRAND_20260820) ═══════════
   사진 배경 없음 · #171717 가운데 · 상자 380px(안여백 24) · 캡차 없음.
   전용 토큰(--gate-*)만 쓰므로 밝은 화면 저장값이 있어도 게이트는 늘 어둡다. */
.gate {
  position: fixed;
  inset: 0;
  display: grid;
  /* ★ 열을 minmax(0,1fr) 로 못박는다 — auto 트랙은 내용폭(380)으로 커져 380 미만 화면에서 상자가 밖으로 나간다(측정기 실측). */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: auto;
  background: var(--gate-bg);
}

.gate-form {
  width: 380px;
  max-width: 100%;
  padding: 0 24px;
  display: block;
  text-align: center;
}

/* 로고 자리 — 높이 70 · 아래 여백 14 (아산1 실측 규격) */
.gate-brand {
  height: var(--gate-brand-h);
  margin-bottom: var(--gate-brand-gap);
  display: grid;
  place-items: center;
}

/* 로고 밑 한 줄 — 작은 글자 · 자간 넓게 · 흐린 색 */
.gate-tag {
  margin-bottom: 24px;
  color: var(--gate-muted);
  font-size: var(--font-small);
  font-weight: var(--weight-bold);
  letter-spacing: 6px;
  text-transform: uppercase;
}

.gate-form input {
  width: 100%;
  min-height: 50px;
  margin-bottom: 12px;
  padding: 0 16px;
  border: 1px solid var(--gate-line);
  border-radius: var(--radius-control);
  background: var(--gate-panel);
  color: var(--gate-text);
  font: inherit;
  /* 좁은 폭뿐 아니라 가로 모드에서도 입력 초점 자동 확대를 피한다. */
  font-size: max(16px, var(--font-body));
  outline: none;
  transition: border-color 140ms ease;
}
.gate-form input::placeholder { color: var(--gate-muted); }
.gate-form input:focus { border-color: var(--logo-x); }

/* 로그인 뒤 다른 입력칸에 초점을 옮겨도 작은 글자로 다시 확대되지 않게 한다.
   터치 기기의 가로 모드도 포함하며 체크박스/라디오/슬라이더 크기는 바꾸지 않는다. */
@media (any-pointer: coarse) {
  body { --select-font-size: max(16px, var(--font-body)); }
  #v4-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  #v4-root textarea {
    font-size: max(16px, var(--font-body));
  }
}

/* 단추 — 가로 꽉 · 민트 바탕 · 어두운 글자 (지시문 [2/6]) */
.gate-form button {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--logo-x);
  color: var(--gate-btn-ink);
  font: inherit;
  font-size: var(--font-body);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.gate-form button:hover { filter: brightness(1.08); }
.gate-form button:disabled { cursor: wait; filter: grayscale(0.5) brightness(0.8); }

.gate__reason { min-height: 18px; margin: 12px 0 0; color: var(--gate-text); font-size: var(--font-small); }
/* ── 마감 5종 확인창 (closeControls · 구조 무변경 · 톤만) ── */
/* 마감 5종 — 기존 정본 마크업을 V4 한 셸의 토큰으로만 그린다. */
.op-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--overlay);
}
.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: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.cs-title { color: var(--text-title); font-size: var(--font-title); font-weight: var(--weight-heavy); }
.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: var(--font-display);
  cursor: pointer;
}
.cs-x:hover, .cs-x:focus-visible { border-color: var(--brand); color: var(--text-title); outline: none; }
.cs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px;
}
/* ── 지금 걸려 있는 예약 한 줄 + 그 자리의 취소 단추 (ALPHAX_CLOSE_PLAN_CANCEL_20260822) ──
   ★ 경고가 아니다 — 빨강·초록을 쓰지 않는다(정본 §1: 초록은 수익 전용). 정상 상태의 안내다.
   ★ 예약이 없으면 이 요소 자체가 렌더되지 않는다 — 빈 칸이 남지 않는다. */
.cs-plan {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-inner);
  color: var(--text-title);
  font-size: var(--font-small);
}
.cs-plan-cancel {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-body);
  font: inherit;
  font-weight: var(--weight-heavy);
  cursor: pointer;
}
.cs-plan-cancel:hover, .cs-plan-cancel:focus-visible { border-color: var(--brand); color: var(--text-title); outline: none; }
.cs-plan-cancel:disabled { border-color: var(--line); color: var(--text-faint); cursor: not-allowed; }
.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: 8px;
  padding: 12px 12px;
  cursor: pointer;
}
.cs-opt-disabled { cursor: not-allowed; }
.cs-radio { flex: 0 0 auto; margin: 0; accent-color: var(--brand); }
.cs-opt-t { min-width: 0; color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-heavy); }
.cs-help {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-right: 8px;
  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(--brand); background: var(--brand-soft); color: var(--brand); }
.cs-opt-d { margin: 0 12px 12px 24px; color: var(--text-muted); font-size: var(--font-small); line-height: 1.6; }
.cs-opt-d[hidden] { display: none; }
.cs-time-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cs-time-row label { color: var(--text-muted); font-size: var(--font-small); }
.cs-imm-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--warning); font-size: var(--font-small); }
.op-modal-in {
  width: 100%;
  min-height: 44px;
  padding: 8px 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(--brand); outline: none; }
.cs-foot { flex: 0 0 auto; display: grid; gap: 8px; padding: 12px 16px 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 16px; border-radius: var(--radius-control); font: inherit; font-weight: var(--weight-heavy); cursor: pointer; }
.op-modal-cancel { border: 1px solid var(--line-strong); background: transparent; color: var(--text-body); }
.op-modal-confirm { border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); }
.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: var(--font-micro); }
.cs-result { padding: 8px 12px; border-radius: var(--radius-control); background: var(--checking-soft); color: var(--checking); font-size: var(--font-small); }
.cs-result.is-bad { background: var(--brand-soft); color: var(--brand); }
.sl-body { display: grid; gap: 12px; }
.sl-what, .sl-summary, .sl-liquidation, .sl-current, .sl-math, .sl-result { margin: 0; }
.sl-what { color: var(--text-body); line-height: 1.6; }
.sl-summary { color: var(--text-muted); font-size: var(--font-small); }
.sl-liquidation, .sl-current { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--text-title); }
.sl-price { width: 100%; font-variant-numeric: tabular-nums; }
.sl-math { min-height: 20px; color: var(--text-title); font-size: var(--font-small); font-variant-numeric: tabular-nums; }
.sl-result { min-height: 20px; color: var(--text-title); font-size: var(--font-small); }
.sl-result.is-bad { color: var(--brand); }

@media (max-width: 820px) {
  .op-modal-overlay { padding: 4px; }
  .op-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: var(--radius-inner); }
  .cs-head { padding: 12px 12px 8px; }
  .cs-body { padding: 8px 12px; }
  .cs-opt { padding: 8px 12px; }
  .cs-foot { padding: 8px 12px 12px; }
  .cs-actions button { flex: 1 1 0; }
  .sl-modal { width: calc(100vw - 12px); }
}
/* ── 코인 ────────────────────────────────────────────────────────────── */
/*   ★ 전광판 아래 «구획» 여백 — 2026-09-03 디자이너 제안 반영
     ★옛 것 : .ticker 에 «전역» margin-bottom:16px 를 줬다.
       ★그러면 대시보드(.dash 가 이미 gap 16px)에서 ★32px 이 되고,
       ★대시보드는 «불가침»인데 총괄이 건드린 셈이 된다.
     ★새 것 : ★«셸 직계»(= 대시보드가 아닌 탭)에만 24px.
       대시보드 전광판은 .dash 안에 있어 이 규칙에 «안 닿는다» — diff 0.
     ★왜 24 인가 : 카드끼리는 16px 로 두고 ★「전광판 → 페이지 → 카드」 위계를 만든다.
       ★붙은 증상을 지우는 것이 아니라 «묶음이 다르다»를 말하는 값이다. */
.shell > .ticker { margin-bottom: 24px; }

.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: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -.3px; }
.c-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ★ 선택 상자의 «생김새»는 공용 `select` 규칙 한 곳이 갖는다(ALPHAX_드롭다운_20260903) — 여기는 «자리 크기»만 */
.c-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.c-chip { min-height: 36px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: 10px; background: var(--surface-soft);
  color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
.c-chip b { color: var(--text-title); font-weight: var(--weight-bold); }
/* ★ 이 칩들은 손익이 아니라 **상태**다(잠금 · 조회 정상 · 실패) — §4 대로 손익색을 쓰지 않는다. */
.c-chip-lock b, .c-chip-pos b { color: var(--text-title); }
.c-chip-neg b { color: var(--brand); }
.c-chip i { font-style: normal; }
.c-ago { display: block; margin-top: 4px; color: var(--text-faint); font-size: var(--font-micro); }
.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: 16px; border: 1px solid var(--line);
  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: var(--font-title); }
.c-card-h b { color: var(--text-title); font-size: var(--font-title); font-weight: var(--weight-bold); }
.c-card-h .c-ago { margin: 0 0 0 auto; }
.c-note { margin: 0 0 12px; color: var(--text-muted); font-size: var(--font-small); }
/*   ★ 코인 카드 격자 — 1장이면 «전폭», 2장이면 «반반» (2026-09-03)
     ★최소폭이 «260px» 인 까닭 : 이 격자가 살아 있는 가장 좁은 폭은 821px 이고,
       그때 가용 폭이 573px 다 (메뉴 200 + 좌우 여백 48 을 뺀 값 · 검수 실측).
       ★280 이면 280×2+16=576 > 573 이라 ★두 장이 세로로 쌓인다 — 검수가 잡았다.
       ★260×2+16=536 ≤ 573 이므로 821px 에서도 반반이 선다.
     ★820px 이하는 아래 미디어쿼리가 «한 열»로 못박는다 — 여기는 821 이상만 본다. */
.c-coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.c-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.c-choice { min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid var(--line);
  border-radius: var(--radius-inner); background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: var(--font-small); white-space: nowrap; cursor: pointer; }
.c-choice.is-on { border-color: var(--brand); background: var(--surface-soft); color: var(--text-title); }
.c-choice:hover { background: var(--surface-soft); }
.c-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.c-coin { padding: 16px 16px 12px; }
.c-coin.is-on { border-color: var(--brand); }
.c-coin-h { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.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: var(--font-title); font-weight: var(--weight-bold); }
.c-coin-s { font-size: var(--font-title); font-weight: var(--weight-bold); }
.c-coin-b { padding: 4px 8px; border: 0; border-radius: 8px;
  background: var(--surface-inner); color: var(--text-muted); font-size: var(--font-micro); 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(--brand); color: var(--brand-ink);
  font-size: var(--font-small); font-weight: var(--weight-bold); }
.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: var(--font-small); }
.c-px-v { display: block; overflow-wrap: anywhere; color: var(--text-title); font-size: var(--font-display);
  font-weight: var(--weight-bold); 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: var(--font-small); text-align: center; }
.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: var(--font-display); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; }
/* 24시간 등락률은 **부호 있는 값**이라 손익 축을 그대로 쓴다. */
.c-m-v.pos { color: var(--positive); }
.c-m-v.neg { color: var(--negative); }
/* ★ Codex R1 HIGH — 주문 조건(최소 주문액 충족/미달)은 **상태**다. 손익이 아니다.
   전역 `.pos/.neg` 가 `!important` 로 칠하고 있어 같은 무게로 되돌린다(마크업은 건드리지 않는다). */
.c-o-v.pos { color: var(--text-title) !important; }
.c-o-v.neg { color: var(--brand) !important; }
.c-bar-w { margin-top: 16px; display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: var(--font-small); }
.c-bar { min-width: 80px; height: 5px; flex: 1 1 auto; position: relative;
  border-radius: 3px; background: var(--line); }
.c-bar-g { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--line-strong); }
.c-bar-dot { width: 14px; height: 14px; position: absolute; top: 50%; border-radius: 50%;
  background: var(--text-title); transform: translate(-50%, -50%); }
.c-bar-none { flex: 1 1 auto; color: var(--text-faint); font-size: var(--font-small); text-align: center; }
.c-m-b { margin-top: 16px; display: grid; grid-template-columns: minmax(180px,1fr) auto;
  align-items: center; gap: 16px; }
.c-balance { min-height: 82px; padding: 16px 16px; 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: var(--font-small); }
.c-balance b { color: var(--text-title); font-size: var(--font-display); font-variant-numeric: tabular-nums; }
.c-diff { min-width: 180px; padding: 16px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-inner); background: var(--surface-inner); text-align: center; }
.c-diff-v { font-size: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.c-diff-u { margin-left: 4px; color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-normal); }
.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: var(--font-title); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; }
.c-box { padding: 16px; color: var(--text-muted); font-size: var(--font-body); 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: var(--font-small); }
.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(--line-strong); }
.c-v-v { font-size: var(--font-small); 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: var(--font-small); }
.c-rank-list { display: grid; gap: 8px; }
.c-rank-row { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-inner); background: var(--surface-inner); color: var(--text-body);
  text-align: left; font: inherit; cursor: pointer; }
.c-rank-row.is-first { background: var(--surface-soft); border-color: var(--line-strong); }
.c-rank-row.is-first .c-rank-number { color: var(--brand); font-size: var(--font-title); }
.c-rank-row.is-on { border-color: var(--brand); }
.c-rank-row:hover { background: var(--surface-soft); }
.c-rank-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.c-rank-main { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 88px; gap: 16px; align-items: center; }
.c-rank-number, .c-rank-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-rank-coin { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.c-rank-coin > b { color: var(--text-title); font-size: var(--font-title); }
.c-rank-badge { color: var(--text-muted); font-size: var(--font-micro); white-space: nowrap; }
.c-rank-verdict { color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
.c-rank-score { display: grid; gap: 4px; text-align: right; color: var(--text-title); }
.c-rank-track { height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.c-rank-track > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.c-rank-materials { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.c-rank-material { min-width: 0; display: grid; gap: 4px; font-size: var(--font-small); font-variant-numeric: tabular-nums; }
.c-rank-material > span { color: var(--text-muted); font-size: var(--font-micro); }
.c-rank-material > b { color: var(--text-body); }
.c-rank.is-stale .c-rank-list { opacity: .6; }

@media (min-width: 821px) and (max-width: 1339px) {
  .c-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .c-grid, .c-m-b { grid-template-columns: 1fr; }
  .c-grid, .c-col, .c-coins { gap: 12px; }
  .c-title { font-size: var(--font-display); }
  .c-title-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .c-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 320px 창의 스크롤바를 뺀 실제 가용 폭에도 맞춘다. 순위행·화면 분기점은 그대로다. */
  html:has(.c-page) { min-width: 0; }
  .c-coins { grid-template-columns: 1fr; }
  .c-m-g { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .c-px-v { font-size: var(--font-display); }
  .c-m-b { grid-template-columns: 1fr; }
  .c-rank-main { grid-template-columns: 24px minmax(0, 1fr) auto 56px; gap: 8px; }
  .c-rank-row { padding: 12px 8px; }
  .c-rank-coin > b { font-size: var(--font-small); }
  .c-rank-row.is-first .c-rank-number { font-size: var(--font-small); }
  .c-rank-materials { display: none; }
  .c-rank-row.is-on .c-rank-materials { display: grid; }
  .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: 8px; color: var(--text-muted); cursor: pointer; }
.cfg-explain input { accent-color: var(--brand); }
.cfg-flow { padding: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-state { padding: 12px; display: flex; align-items: flex-start; 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 > div { min-width: 0; }
.cfg-state small { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.cfg-state small .ax-help-btn { margin-left: 0; }
.cfg-state strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--text-title); }
.cfg-state p { margin: 8px 0 0; color: var(--text-muted); font-size: var(--font-micro); line-height: 1.5; }
.cfg-state.is-on { border-color: var(--brand-line); background: var(--brand-soft); }
/* ★★ 3칸 테두리(2026-08-21 Owner 결정 · 이 줄을 지우지 마라):
   되어 있으면 초록 · 안 되어 있으면 옅은 빨강 · **「확인 중」이면 색 없음**(모르는 것을 색으로 단정하지 않는다). */
.cfg-state[data-tone="ok"] { border-color: var(--positive); }
.cfg-state[data-tone="ok"] > span { border-color: var(--positive); color: var(--positive); }
.cfg-state[data-tone="warn"] { border-color: color-mix(in srgb, var(--negative) 55%, var(--line)); }
.cfg-state[data-tone="warn"] > span { border-color: color-mix(in srgb, var(--negative) 55%, var(--line)); color: var(--negative); }
.cfg-state.is-on > span { border-color: var(--brand); color: var(--brand); }

/* [?] 말풍선 — body 직계 자식이므로 position:fixed 가 없으면 문서 맨 아래로 흐른다.
   새 화면의 회색 두 겹과 4·8·12·16·24 여백만 쓴다. */
.ax-help-btn { width: 24px; height: 24px; margin-left: 8px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); color: var(--text-muted);
  font: inherit; font-size: var(--font-micro); font-weight: var(--weight-heavy); line-height: 1; cursor: pointer; }
.ax-help-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.ax-help-btn:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 4px; }
.ax-help-pop { width: 320px; max-width: calc(100vw - 24px); max-height: min(70vh, 440px);
  position: fixed; z-index: 9999; overflow-y: auto; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--text-title); }
.ax-help-pop-t { margin-bottom: 8px; color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-heavy); }
.ax-help-sec { margin-bottom: 8px; }
.ax-help-q { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-bold); }
.ax-help-a { margin: 0; color: var(--text-body); font-size: var(--font-body); line-height: 1.5; overflow-wrap: anywhere; }
.ax-help-rec .ax-help-q, .ax-help-warn .ax-help-q { color: var(--text-title); }
.ax-help-foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--font-small); line-height: 1.5; }
.ax-help-list { margin: 8px 0 0; padding: 0 0 0 16px; list-style: disc; }
.ax-help-list li { margin: 4px 0; color: var(--text-muted); font-size: var(--font-small); line-height: 1.5; overflow-wrap: anywhere; }
.cfg-lock { padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface); }
.cfg-lock.is-running { border-color: var(--brand-line); background: var(--warning-soft); }
.cfg-lock strong { color: var(--warning); }
.cfg-lock p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.cfg-prereq, .cfg-wizard, .cfg-operation-values { padding: 24px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface); }
.cfg-prereq .cfg-fields { padding: 0; }
.cfg-wizard { display: grid; gap: 8px; }
.cfg-wizard-done { width: 100%; min-height: 66px; padding: 12px 12px; 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(--brand-soft); color: var(--brand); font-weight: var(--weight-heavy); }
.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(--brand); }
/* ★ ALPHAX_UI_WIZARD_SOUND_20260825 (N-350) — 못 바꾸는 계단.
   누를 것이 없으므로 손 모양을 없애고, 번호도 강조하지 않는다.
   ★ 새 색을 만들지 않는다 — 이미 있는 «희미한 글자»와 «면» 값만 쓴다(규칙표 §4-A). */
.cfg-wizard-done.is-locked { cursor: default; }
.cfg-wizard-done.is-locked > span { background: var(--surface); color: var(--text-muted); }
.cfg-wizard-done.is-locked strong { color: var(--text-muted); }
.cfg-wizard-done.is-locked p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.cfg-wizard-ask { padding: 24px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-inner);
  background: var(--surface-inner); }
.cfg-wizard-ask > div > small { color: var(--brand); font-weight: var(--weight-heavy); }
.cfg-wizard-ask h2 { margin: 4px 0 16px; color: var(--text-title); font-size: var(--font-display); }
.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: var(--weight-heavy); cursor: pointer; }
.cfg-auto-note { margin: 8px 0 0; color: var(--checking); font-size: var(--font-small); }
.cfg-operation-values { display: grid; gap: var(--sp-4); background: var(--surface); }
.cfg-operation-values__grid, .cfg-manual-values__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cfg-manual-values__grid { container-type: inline-size; }
.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: 8px; color: var(--text-title); font-size: var(--font-display); }
.cfg-operation-values__grid p { margin: 8px 0 0; color: var(--checking); font-size: var(--font-micro); }
/*   ★ 2026-09-21 사장님 — 직접 입력한 목표가 «자금 전체»의 몇 %인지 그 칸 안에 한 줄로. 두 칸을 가로질러 오른쪽. */
.cfg-manual-values__grid > label > .cfg-manual-pct { grid-column: 1 / -1; margin: 0; text-align: right;
  color: var(--checking); font-size: var(--font-micro); font-weight: var(--weight-bold); }
.cfg-manual-values { padding-top: 16px; border-top: 1px solid var(--line); }
.cfg-manual-values .section-head { margin-bottom: 12px; }
.cfg-manual-values h2 small { margin-left: 4px; color: var(--checking); font-size: var(--font-small); font-weight: var(--weight-bold); }
.cfg-manual-values__grid > label { min-width: 0; padding: 12px 16px; display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,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: var(--weight-bold); line-height: 1.4; }
.cfg-manual-values input { width: 100%; height: 48px; min-width: 0; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); outline: none;
  background: var(--canvas); color: var(--text-title); font: inherit; font-size: var(--font-title); font-weight: var(--weight-bold);
  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: var(--weight-bold); opacity: 1; }
.cfg-manual-values input:hover { border-color: var(--line-strong); background: var(--canvas-raised); }
.cfg-manual-values input:focus { border-color: var(--brand); background: var(--canvas-raised);
  outline: none; }
.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; }
/* 기준을 아직 못 잡아 입력을 받지 않았을 때의 안내 */
.notice-board { border-top: 1px solid var(--line); }
.notice-board__item { border-bottom: 1px solid var(--line); }
.notice-board__title { padding: var(--sp-4); color: var(--text-title); font-size: var(--font-body); cursor: pointer; overflow-wrap: anywhere; }
.notice-board__title:focus-visible, .notice-board__reload:focus-visible { outline: 2px solid var(--text-title); outline-offset: -2px; }
.notice-board__status { color: var(--text-muted); white-space: nowrap; }
.notice-board__body { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-body); }
.notice-board__body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-board__reload { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--sp-2); background: var(--surface); color: var(--text-title); font-size: var(--font-body); cursor: pointer; }

.cfg-edit-notice { margin: 0; padding: 12px 16px; border: 1px solid var(--brand-line);
  border-radius: var(--radius-inner); background: var(--warning-soft); color: var(--warning); }

.cfg-runtime { padding: 16px; 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: 8px; }
.cfg-diffs > div { min-width: 0; padding: 12px 12px; 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(--text-title); }
.cfg-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-card); align-items: start; }
.cfg-groups { display: grid; gap: 8px; }
.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 16px; display: flex; align-items: center; justify-content: space-between; color: var(--text-title); cursor: pointer; list-style: none; font-weight: var(--weight-heavy); }
.cfg-group summary::-webkit-details-marker { display: none; }
/* 「자세히」 글자 모양 — 대시보드 익절 기록의 「전체 보기 › / 접기」도 이 규칙 하나를 같이 쓴다(2026-09-17 · 모양 단일 출처). */
.cfg-group summary span:last-child,
.tplog__more { color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-normal); }
.cfg-group[open] summary { border-bottom: 1px solid var(--line); }
.cfg-fields { padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.cfg-field { min-width: 0; display: grid; gap: 8px; color: var(--text-muted); font-size: var(--font-small); }
.cfg-field > span { color: var(--text-body); font-weight: var(--weight-bold); }
.cfg-field > span em { margin-left: 8px; padding: 4px 8px; border-radius: 999px;
  background: var(--warning-soft); color: var(--warning); font-size: var(--font-micro); font-style: normal; font-weight: var(--weight-bold); }
.cfg-field input { width: 100%; height: 46px; padding: 0 12px; 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 { border-color: var(--brand); }
.cfg-field input:disabled { opacity: .72; color: var(--text-muted); cursor: not-allowed; }
/* ★ 선택 상자는 공용 `select` 규칙(생김새 한 곳)을 입는다 — 여기는 «폭»만 (ALPHAX_드롭다운_20260903) */
.cfg-field select { width: 100%; }
.cfg-field small { display: none; color: var(--text-muted); line-height: 1.45; }
.cfg-page.show-explain .cfg-field small { display: block; }
.cfg-actions { padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-actions strong { color: var(--text-title); }
.cfg-actions p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--font-small); }
/* ★ 「저장하고 적용」 — 운용 시작과 같은 노랑(2026-08-21 Owner 결정).
   이 단추만 실제로 다음 운용 값을 바꾼다. 취소·해제는 그대로 회색이다. */
.cfg-actions button { min-height: 48px; padding: 0 var(--sp-5); border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--accent-ink); font-weight: var(--weight-heavy); cursor: pointer; }
.cfg-actions button[data-v4-cfg-unapply] { border-color: var(--line); background: var(--canvas); color: var(--text-title); }
.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 16px; 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: var(--weight-heavy); }
.cfg-dialog { position: fixed; inset: 0; z-index: 50; padding: 16px; place-items: center; background: var(--overlay); }
.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: 24px; 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: 8px; color: var(--text-body); }
.cfg-dialog input { height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-title); }
.cfg-dialog > div > div { margin-top: 16px; 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: 12px; 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: 12px; }
.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-dialog button { padding: 12px 16px; 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(--brand); background: var(--brand); color: var(--brand-ink); }

/* 운용 시작·마감 확인창 — 설정 확인창과 같은 껍데기를 쓰고, 값 목록만 더한다. */
.cfg-dialog [data-v4-op-confirm] { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
/* ★ 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: 12px; 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: 12px; }
.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: 12px; color: var(--text-body); }
.cfg-dialog .op-dialog__result[data-v4-op-result="CONFIRMED"] { color: var(--text-title); }
.cfg-dialog .op-dialog__result[data-v4-op-result="FAILED"] { color: var(--brand); }
.cfg-dialog .op-dialog__result[data-v4-op-result="UNKNOWN"],
.cfg-dialog .op-dialog__result[data-v4-op-result="WARNED"] { color: var(--checking); }

@container (max-width: 668px) {
  .cfg-manual-values__grid > label { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 820px) {
  .cfg-flow { padding: 12px; 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-fields { padding: 16px; grid-template-columns: 1fr; }
  .cfg-prereq, .cfg-wizard, .cfg-operation-values { padding: 16px; }
  .cfg-prereq .cfg-fields { padding: 0; }
  .cfg-wizard-ask { padding: 16px 12px; 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-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); }
/* ★ 격자 자식의 최소폭은 «내용»이 아니라 0 — 안 그러면 넓은 표가 격자 칸을 늘려 «문서»가 옆으로 넘친다(실측 1339px 에서 1506).
   표는 자기 틀(.st-table-wrap) 안에서만 옆으로 밀린다. */
.st-page > * { min-width: 0; }
/* 밝은 정산 표의 작은 금액도 읽히도록 같은 손익색의 명도를 낮춘다. */
body.theme-light .st-page { --positive: #087E50; --negative: #C52C43; }
.st-table-wrap:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 4px; }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 8px 4px 4px; }
.page-title h1 { margin: 4px 0 4px; color: var(--text-title); font-size: var(--font-display); line-height: 1.2; }
.page-title p { margin: 0; color: var(--text-muted); }
/* ★ ADD1 ② — 영어 딱지(SETTLEMENT · NEXT RUN)는 마크업에서 뺐다. 규칙만 남겨 둔다(소비처 0). */
.page-title .eyebrow { display: none; }
.freshness { flex: none; color: var(--text-muted); font-size: var(--font-small); }
/* ★ 2026-09-03 사장님 — 「사이클/일별/전체」 단위 선택기(.st-unit)는 없앴다. 기간 선택기만 남는다. */
.st-period { display: flex; gap: 8px; overflow-x: auto; }
.st-period button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.st-period button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
/* ★ 기간 «언제부터 언제까지» — 맨 위 한 줄. 등폭 숫자. */
.st-range { margin: 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-range > span, .st-range > small { color: var(--text-muted); font-size: var(--font-small); }
.st-range > strong { color: var(--text-title); font-size: var(--font-title); }
.st-custom { padding: 12px; display: flex; align-items: end; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface); }
.st-custom label { flex: 1 1 220px; display: grid; gap: 4px; 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(--brand); }
.st-custom button { min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--brand);
  border-radius: var(--radius-control); background: var(--brand); color: var(--brand-ink); font-weight: var(--weight-heavy); cursor: pointer; }
.st-pending { min-height: 72px; padding: 16px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--checking-line); border-radius: var(--radius-inner); background: var(--checking-soft); }
.st-pending strong { color: var(--checking); }
.st-pending p { margin: 4px 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: var(--brand-line); background: var(--brand-soft); }
.st-failed strong { color: var(--brand); }
.st-failed button { margin-left: auto; padding: 8px 16px; border: 1px solid var(--brand-line); border-radius: var(--radius-control); background: transparent; color: var(--text-title); cursor: pointer; }
/* ★ 2026-09-03 — 요약은 카드 안 카드가 아니라 «한 줄 띠»다(등폭 숫자).
   ★ 2026-09-04 디자이너 실측 — 칸 사이 «세로 선»을 뺐다. 375px 에서 요약이 세 줄로 접히는데
     선이 지워지는 것은 «맨 끝 한 칸»뿐이라 「수수료」·「확정 사이클」 뒤에 ★갈 곳 없는 선이 허공에 남았다.
     줄이 바뀌어도 안 틀어지는 «여백 24px»로만 가른다(2026년 요약 띠도 선을 안 그린다). */
.st-summary { padding: 8px var(--pad-card); display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-wallet { padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-wallet__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; }
.st-wallet__row > span, .st-wallet__earned > span { flex-shrink: 0; color: var(--text-muted); }
.st-wallet strong { min-height: 1.2em; overflow-wrap: anywhere; text-align: right; font-variant-numeric: tabular-nums; }
.st-wallet__earned { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-wallet__earned strong { font-size: var(--font-display); line-height: 1.2; }
.st-summary__lead, .st-metric { padding: 8px 24px 8px 0; display: flex; flex-direction: column; justify-content: center; }
.st-summary__lead > span, .st-metric > span { color: var(--text-muted); font-size: var(--font-small); white-space: nowrap; }
.st-summary__lead strong { margin-top: 4px; color: var(--text-title); font-size: var(--font-display); line-height: 1.2; overflow-wrap: anywhere; }
.st-summary__lead small { margin-top: 4px; color: var(--text-muted); font-size: var(--font-micro); }
.st-metrics { display: flex; flex-wrap: wrap; gap: 0 16px; width: 100%; }
.st-metric strong { margin-top: 4px; color: var(--text-title); font-size: var(--font-title); }
/* ★ Codex R2 MEDIUM — 손익 톤은 카드(`article`)에 붙는데 값은 자식 `strong` 이라 색이 안 닿았다.
   음수 수수료·손익이 흰 숫자로 보였다 — 값 자체에 손익색을 준다(§4). */
.st-metric.pos strong { color: var(--positive); }
.st-metric.neg strong { color: var(--negative); }
.st-metric small { margin-top: 4px; color: var(--text-muted); font-size: var(--font-micro); line-height: 1.35; }
.st-omitted { margin: 8px 0 0; color: var(--checking); font-size: var(--font-small); }
.st-note { margin: 8px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.pos { color: var(--positive) !important; } .neg { color: var(--negative) !important; } .checking { color: var(--checking) !important; }
.section-head { margin: 0 4px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head h2 { margin: 0; color: var(--text-title); font-size: var(--font-title); }
.section-head span { color: var(--text-muted); font-size: var(--font-small); }
/* ═══ 정산 «표» — 「깔끔한 엑셀 방식」 (2026-09-03 사장님) ═══════════════════════
   ★ 한 줄 = 한 건 · 칸은 세로로 줄이 맞는다(숫자 오른쪽 · 등폭 숫자) · 카드·배지·색 걷어냄.
   ★ 좁은 폭은 «가로 스크롤»이다(세로로 쌓으면 줄이 다시 카드가 되어 «줄 맞는 표»가 아니게 된다).
     첫 칸(시각·날짜)은 왼쪽에 «붙어» 있어 옆으로 밀어도 어느 줄인지 놓치지 않는다.
   ★★ 2026-09-04 ★계약 정정 — «머리줄 고정»은 ★넓은 화면에서만이다 (약화가 아니라 «사실 정정»이다)
     ㉠ ★옛 계약 : 「표 틀(.st-table-wrap)이 세로도 스크롤한다(최대 70vh) — 그래야 머리줄(sticky)이
                  «표 안에서» 고정된다」 — ★옛 계약은 어느 화면에서나 머리줄이 고정된다고 읽혔다.
     ㉡ ★왜 틀렸나 : 디자이너 실측(2026-09-04 · 375px) — 30일 40건이면 이 상자가 568px(화면 812px 의 70%)
                  에서 잘리고 «그 안에서» 또 세로 스크롤이 생겼다. 표가 «둘»이라 손가락 놓을 자리가 거의
                  없어 ★페이지를 못 내렸다. 그래서 아래 @media 에서 좁은 폭은 높이 제한을 «푼다».
                  ★그러면 상자가 세로로 «안 넘쳐» thead 의 sticky 가 ★붙을 곳을 잃는다.
     ㉢ ★새 계약 : ★넓은 화면(PC) — 최대 70vh 안에서 ★머리줄 고정.
                  ★좁은 화면(폰) — 높이 제한 없음 · ★머리줄은 «고정되지 않는다»(페이지와 같이 흐른다).
                  ★어느 쪽이 큰가 — 「머리줄이 붙어 있는 것」보다 ★「페이지가 내려가는 것」이 크다.
                    ★근거는 ★디자이너 실측 «제안» 한 곳뿐이다
                    (_reports/ALPHAX_DESIGN_ADVICE_20260904.md §③ · 375px · 30일 40건).
                    ★★이것은 ★«제안»이지 ★«정해진 것»이 아니다 — 이 작업창 _reports/ 에 그 정본이 «없다»〔실측〕.
                    ★그러니 되돌리려면 ★먼저 여쭙고, 그 답을 _reports/ 에 담아라
                    (2026-09-03 규약 「근거는 저장소 «안»에 있어야 한다」 — 작업창에서 못 열면 근거가 아니다).
     ★★ 디자이너 보고서(_reports/ALPHAX_DESIGN_ADVICE_20260904.md §③)의 ★한 줄이 틀렸다 —
        「머리줄 고정은 그대로 남는다」고 적었는데 ★폰에서는 «고정되지 않는다»
        (상자가 세로로 안 넘치니 붙을 곳이 없다). ★그 글을 읽고 「고장 났네」 하며 되돌리지 마라.
     ★ 되돌리지 마라 — 폰에 max-height 를 다시 주면 ★페이지가 다시 안 내려간다.
       ★그물 : tests/test_settlement_phone_20260904.mjs ⑦ · ⑩ 이 이 계약을 «센다». */
.st-table { padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-table-wrap { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.st-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.st-table th, .st-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; background: var(--surface); }
.st-table th:first-child, .st-table td:first-child { border-left: 0; position: sticky; left: 0; z-index: 1; }
.st-table thead th { position: sticky; top: 0; z-index: 2; color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-bold); }
.st-table thead th:first-child { z-index: 3; }
.st-table td { color: var(--text-title); font-size: var(--font-body); }
.st-table .st-num { text-align: right; }
.st-source { color: var(--text-muted); font-size: var(--font-small); }
.st-source--warn { color: var(--text-title); font-weight: var(--weight-bold); }
.st-empty { padding: 16px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--text-muted); background: var(--surface); }

@media (max-width: 820px) {
  .page-title { align-items: start; } .page-title h1 { font-size: var(--font-display); }
  .page-title > div > p:not(.eyebrow) { display: none; }
  .st-summary { padding: 4px 12px; }
  .st-summary__lead, .st-metric { padding: 8px 16px 8px 0; }
  .st-custom { align-items: stretch; flex-direction: column; }
  .st-custom label { width: 100%; flex-basis: auto; }
  .st-custom button { width: 100%; }
  .st-summary__lead strong { font-size: var(--font-display); }
  .st-range { gap: 8px; } .st-range > strong { font-size: var(--font-body); }
  .st-table { padding: 12px; }
  .st-table th, .st-table td { padding: 8px; }
  /* ★ 2026-09-04 디자이너 실측 — 30일 40건이면 표 하나가 568px(화면 812px 의 70%)에서 잘리고
     그 «안에서» 따로 세로 스크롤이 생겼다. 표가 «둘»이라 손가락 놓을 자리가 거의 없어
     페이지를 못 내렸다 → 좁은 화면에서는 높이 제한을 «푼다»(표가 페이지와 같이 흐른다).
     ★ 가로 스크롤과 첫 칸 붙이기는 그대로다 — overflow 는 건드리지 않는다.
     ★ 넓은 화면(PC)은 70vh 그대로 — 거기선 문제가 안 난다. */
  .st-table-wrap { max-height: none; overscroll-behavior: auto; }
  .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: 16px; 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: var(--font-title); font-weight: var(--weight-bold); }
.g-card-h .g-k { margin-left: auto; }
.g-k { font-size: var(--font-small); 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: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -.3px; }
.g-sub { margin: 4px 0 0; font-size: var(--font-body); 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 12px; 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; padding: 0;
  color: var(--text-title); font-family: inherit; font-size: var(--font-body); }
.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: var(--font-body); white-space: nowrap; }

/* 필터 칩 */
.g-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.g-chip { appearance: none; cursor: pointer; font-family: inherit; padding: 8px 16px; min-height: 40px;
  border-radius: var(--radius-control); background: var(--surface); border: 1px solid var(--line);
  color: var(--text-muted); font-size: var(--font-body); white-space: nowrap; }
.g-chip.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.g-chip.d-t-warn { color: var(--warning); }
/* 호박 글자 + 호박 배경은 대비가 3.3:1 이었다 — 배경을 옅은 쪽으로 되돌린다(Codex R1 MEDIUM). */
.g-chip.d-t-warn.is-on { border-color: var(--warning); background: var(--brand-soft); }

/* 사건 타임라인 */
.g-list { padding: 8px 16px 16px; border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--line); }
.g-state { padding: 16px; text-align: center; font-size: var(--font-small); color: var(--text-faint); }
.g-date { display: flex; align-items: center; gap: 8px; padding: 16px 0 8px;
  font-size: var(--font-body); color: var(--text-muted); }
.g-item { display: flex; gap: 12px; 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: var(--font-body);
  background: var(--surface-inner); border: 1px solid var(--line); color: var(--text-muted); }
/* ★ Codex R1 HIGH — 로그의 pos/neg 는 손익이 아니라 **사건 심각도**다(logsFacts: error→neg).
   성공은 조용한 중립, 오류·주의는 호박 하나로 말한다. */
.g-ico.d-t-pos { color: var(--text-body); border-color: var(--line-strong); }
.g-ico.d-t-warn { color: var(--warning); border-color: var(--brand-line); }
.g-ico.d-t-neg { color: var(--brand); border-color: var(--brand-line); }
.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: var(--font-title); font-weight: var(--weight-bold); color: var(--text-title); }
.g-t.d-t-warn { color: var(--warning); } .g-t.d-t-neg { color: var(--brand); }
.g-time { margin-left: auto; font-size: var(--font-small); 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: var(--font-small); color: var(--text-muted); }
.g-detail { margin-top: 12px; padding: 12px; border-radius: var(--radius-inner);
  background: var(--surface-inner); border: 1px solid var(--line); }
.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: var(--font-body); }
.g-d-f { display: flex; align-items: baseline; gap: 12px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.g-d-more { color: var(--brand); font-size: var(--font-small); }
.g-d-f .g-k { margin-left: auto; }
.g-d-note { margin: 8px 0 0; font-size: var(--font-small); color: var(--text-faint); }
.g-days { margin-top: 16px; text-align: center; font-size: var(--font-small); color: var(--text-faint); }

/* 오른쪽 카드들 */
.g-sum-h { display: flex; align-items: baseline; gap: 8px; }
.g-sum-c { font-size: var(--font-display); font-weight: var(--weight-bold); }
.g-sum-s { font-size: var(--font-body); }
.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: var(--font-body); font-weight: var(--weight-bold); }
.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(--brand); }
.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: var(--font-small); font-weight: var(--weight-bold);
  border: 1px solid var(--line); color: var(--text-muted); }
.g-cyc.is-on .g-cyc-n { border-color: var(--brand); color: var(--brand); }
.g-cyc-b { min-width: 0; }
.g-cyc-b b { font-size: var(--font-body); }
.g-cyc-b .g-k { display: block; margin-top: 4px; }
.g-basis-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-basis-c { min-width: 0; text-align: center; padding: 12px 8px; border-radius: var(--radius-control);
  background: var(--surface-inner); border: 1px solid var(--line); }
.g-basis-c b { display: block; margin-top: 4px; font-size: var(--font-body); font-weight: var(--weight-bold); }
.g-basis-n { margin: 12px 0 4px; font-size: var(--font-small); color: var(--text-muted); text-align: center; }
.g-foot { display: flex; align-items: flex-start; gap: 8px; font-size: var(--font-small); 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: var(--font-display); }
  .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: 8px; }
  .g-d-c { display: flex; align-items: baseline; gap: 8px; }
  .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; }
}

/* 로그인 게이트 반응형 — 상자는 그대로 가운데(380 → 화면 폭까지). 로고 52px 는 390 에도 들어간다(실측으로 확인). */
@media (max-width: 820px) {
  .gate-form input,
  .gate-form button {
    min-height: 48px;
  }
}

/* ═══ 톤 맞춤 — 다른 네 탭 (ADD1 ② · 뼈대 무변경 · 색·글자·여백만) ═══════════════
   ★ 색을 쓰는 자리는 다섯뿐(돈·봉·운용 시작·현재가·로고). 그래서 「선택됨·행동·주의」는 전부 회색이다 —
     선택된 칩/단추는 층을 쌓지 않고 **바탕색으로 파고든다**(정본 §1). */
/* ★ 2026-08-21 Owner 결정 — 「저장하고 적용」은 이 회색 규칙에서 뺐다(노랑). 나머지는 그대로 회색이다. */
.st-custom button, .cfg-dialog [data-v4-cfg-confirm], .op-modal-confirm, .st-failed button,
.cfg-wizard-ask [data-ladder-answer] {
  border: 1px solid var(--line); background: var(--canvas); color: var(--text-title);
}
.cfg-actions button:disabled, .op-modal-confirm:disabled { color: var(--text-faint); }
/* 운용 **시작** 확인 단추만 노랑(다섯 자리 중 하나 · 띠의 단추와 같은 것) */
.cfg-dialog [data-v4-op-confirm] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
/* ★ 2026-09-17 사장님 — 마감 방식 창 : 네 줄 중 하나를 «고르면» 그 줄과 [요청] 단추가 노랗게 바뀐다.
     사장님 원문: 「4개중 한개를 선택을 했어 그럼 저 요청버튼이 노란색으로 바뀌는 효과를 넣어줬음 좋겠어」 ·
     「선택한 색도 바뀌었으면 좋겠어 그래야 내가 정확하게 봇만 멈추기를 선택한게 맞지? 라는 확신이 드니까」.
   ★ 색은 «운용 시작» 단추와 같은 노랑(--accent · --accent-ink) — 새 색 0.
   ★ 셸 셋(v4 · 옛 PC · 옛 모바일)이 같은 창 그리기를 쓰므로 고른 상태는 **라디오 자체**(:checked)로 가른다 —
     셸마다 따로 배선하지 않는다(§2-5). 창을 새로 열면 아무것도 안 골라져 있어 원래 모양이다.
   ★ 테두리는 한 종류(1px)·그림자 0 규칙 그대로 — 색만 바꾼다.
   ★ 누르는 동작·비밀번호·중복 누름 막기는 그대로 — 막힌(disabled) 단추는 노랗게 하지 않는다(옛 흐린 모양 그대로).
   ★ 고른 줄 바탕은 --canvas 에 노랑을 조금 섞는다 — --surface-inner 는 :root 에서 어두운 값으로 굳어
     밝은 화면에서 안 풀린다(아래 계산기 주석과 같은 까닭). --canvas 는 밝은/어두운 화면 둘 다 제 값이다. */
/* ★ 같은 까닭으로 마감 방식 창은 밝은 화면에서 줄 바탕·입력칸이 어두운 채 글자도 어두워 **안 읽혔다**(2026-09-17 실측 ·
     줄 바탕 rgb(25,25,25) · 제목 글자 rgb(26,26,26)). 사장님 지시 「밝은/어두운 화면 둘 다 읽히게」에 따라
     창 안에서만 :root 정의를 «글자 그대로» 다시 적는다 — 새 값이 아니고, 어두운 화면 값은 한 개도 안 바뀐다. */
.cs-modal { --canvas-raised: var(--canvas); --surface-inner: var(--canvas); --surface-soft: var(--canvas); --line-strong: var(--line);
  --brand: var(--text-title); --brand-soft: var(--canvas); --brand-ink: var(--canvas); --warning: var(--text-title);
  --checking: var(--text-muted); --checking-soft: var(--canvas); }
.cs-opt-row:has(> .cs-opt-head .cs-radio:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--canvas));
}
/* 고른 줄에서도 (?) 동그라미가 보이게 — 노란 바탕 위에서 옛 선(--line)은 거의 안 보인다. 흐린 글자색(기존 토큰)으로 테두리만. */
.cs-opt-row:has(> .cs-opt-head .cs-radio:checked) .cs-help:not([aria-expanded="true"]) { border-color: var(--text-faint); }
.cs-modal:has(.cs-radio:checked) #cs-confirm:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.st-period button[aria-pressed="true"], .g-chip.is-on, .g-chip.d-t-warn.is-on {
  border-color: var(--line); background: var(--canvas); color: var(--text-title); font-weight: var(--weight-bold);
}
.c-check { background: var(--text-title); color: var(--canvas); }
.c-coin.is-on, .g-cyc.is-on, .cfg-state.is-on { border-color: var(--text-muted); }
.cfg-state.is-on > span, .g-cyc.is-on .g-cyc-n { border-color: var(--text-title); color: var(--text-title); }
.cfg-wizard-done > span, .cfg-wizard-no { background: var(--canvas); color: var(--text-title); }
.c-fit::before, .c-fit.is-known::before { background: var(--line); }
.st-pulse { background: var(--text-muted); }
.st-pending, .st-failed, .cfg-lock.is-running, .cfg-edit-notice { border-color: var(--line); background: var(--surface); }
.st-pending strong, .st-failed strong, .cfg-lock strong, .cfg-edit-notice { color: var(--text-title); }
/* 로그 아이콘의 주의/오류 — 색이 아니라 **굵기**로 말한다 */
.g-ico.d-t-warn, .g-ico.d-t-neg { color: var(--text-title); border-color: var(--text-muted); }
.g-t.d-t-warn, .g-t.d-t-neg, .g-chip.d-t-warn, .g-d-more { color: var(--text-title); }
.c-chip-neg b, .c-o-v.neg { color: var(--text-title) !important; }
.st-source--warn { color: var(--text-title); }
.cfg-field > span em { background: var(--canvas); color: var(--text-muted); }
/* 카드 안 여백 16 · 모바일 12 — 옛 24 를 규격으로 맞춘다(규칙표 §4-A④). */
.cfg-prereq, .cfg-wizard, .cfg-operation-values, .st-table { padding: var(--pad-card); }
.cfg-actions { padding: var(--pad-card); }
.st-summary { padding: 8px var(--pad-card); }
.cfg-wizard-ask { padding: var(--pad-card); }
@media (max-width: 820px) {
  .cfg-prereq, .cfg-wizard, .cfg-operation-values, .st-table, .cfg-actions, .cfg-wizard-ask,
  .c-card, .c-coin, .g-card, .g-list { padding: var(--pad-card-mobile); }
  .st-summary { padding: 4px var(--pad-card-mobile); }
  .c-coin { padding-bottom: var(--pad-card-mobile); }
}


/* ── 도움말 탭 (2026-09-03 사장님 지시) ─────────────────────────────
   ★사장님 : "사용안내를 ★도움말로 한다음 우리 어드민에 ★도움말탭에있는 내용을 올려"
   ★어드민 admin-extra.css 의 .help__ 규칙을 «그대로» 옮겼다. 새 색을 만들지 않는다. */
.help__title {
  margin: 4px 0 16px;
  font-size: var(--font-display);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
  color: var(--text);
}
.help__slide { margin-bottom: 24px; }
.help__shot {
  display: block;
  width: 100%;
  max-width: 1672px;
  height: auto;              /* ★ 비율 유지 — width/height 속성이 자리를 미리 잡아 흔들림이 없다 */
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
}
.help__shot { width: 100%; height: auto; display: block; border-radius: 10px; }

/* ── 도움말 항목 탭 (2026-09-17 · 사장님 : "그거 콘솔도움말 탭에도 만들어두고") ─────────
   ★어드민 admin-extra.css 의 .help__tabs · .help__tab · .help__next · .help__say--note 규칙을 옮겼다.
   ★여백은 콘솔 다섯 단계(4·8·12·16·24)로 맞췄다 — 어드민의 18·14·10·2·28 은 콘솔 디자인 규칙에 없다.
   ★고른 칸은 그림자 대신 안쪽 선 한 줄 — 콘솔 디자인 규칙은 그림자를 쓰지 않는다(tests/test_v4_design_20260819 E1).
   ★색은 콘솔 변수만 쓴다 — 고른 칸은 정산 기간 단추와 같은 --brand 계열(콘솔의 --accent 는 운용 시작 단추 색이다). */
.help__say { color: var(--text-muted); line-height: 1.7; margin: 0 0 12px; }
.help__say--note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-title);
}
.help__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--sp-4);
  scroll-margin-top: 12px;
}
.help__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-title);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.help__tab:hover { border-color: var(--brand); }
.help__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help__tab.is-on { border-color: var(--brand); background: var(--brand-soft); outline: 1px solid var(--brand); outline-offset: -2px; }
.help__tab.is-on:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help__tab-name { font-size: var(--font-body); font-weight: var(--weight-bold); line-height: 1.3; }
.help__tab-where { font-size: var(--font-small); color: var(--text-muted); line-height: 1.3; }
.help__tab.is-on .help__tab-where { color: var(--text-title); }
.help__next { display: flex; justify-content: flex-end; margin: var(--sp-1) 0 var(--sp-5); }
.help__next-btn { min-height: 44px; padding: 0 var(--sp-5); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-inner); color: var(--text-title); font-weight: var(--weight-bold); cursor: pointer; }
/* ★1.9.2 (2026-09-17 사장님) — 「시작 전, 연결을 준비해 주세요」 카드. 정본 _reports/GPT_클로드전달_새콘솔_시작안내개편_20260917.md
   · 색은 있는 변수만. 새 색 값 0. 노랑(--accent · 운용 시작 단추)은 행동 단추 「API 키 등록하기」 하나에만 — 노랑 자리 목록 계약(test_v4_design A1b).
   · 지금 할 단계만 진한 글자색 테두리·번호·꼬리표로 강조 · 나머지 단계는 글을 흐리게. 번호는 설명용이다(완료 표시는 「완료」 꼬리표 하나).
   · 밝은 화면 — :root 의 별칭(--line-strong · --surface-inner)은 어두운 값으로 굳으므로 원래 변수(--line · --canvas)를 쓴다.
   · 폰(820px 이하) — 주소 칸과 「IP 복사」·「API 키 등록하기」가 세로로 한 줄씩. 가로 넘침 0. */
.setup-card { word-break: keep-all; overflow-wrap: break-word; }   /* 한글 낱말 중간에서 줄을 바꾸지 않는다(「주\n세요」 방지) */
.setup-card__lead { margin: 0; color: var(--text-title); font-size: var(--font-title); font-weight: var(--weight-heavy); line-height: 1.45; }
.setup-card__sub { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--font-small); line-height: 1.5; }
.setup-steps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.setup-step { min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--canvas); }
.setup-step.is-now { border-color: var(--text-title); background: var(--surface); }
.setup-step__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.setup-step__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-bold); }
.setup-step.is-now .setup-step__num { border-color: var(--text-title); background: var(--text-title); color: var(--canvas); }
.setup-step__title { margin: 0; color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-bold); }
.setup-step:not(.is-now) .setup-step__title { color: var(--text-muted); }
.setup-step__tag { margin-left: auto; padding: 0 var(--sp-2); line-height: 1.8; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--text-title); font-size: var(--font-small); font-weight: var(--weight-bold); white-space: nowrap; }
.setup-step__tag.is-now { border-color: var(--text-title); background: var(--text-title); color: var(--canvas); }
.setup-step__text { margin: var(--sp-2) 0 0; color: var(--text-body); font-size: var(--font-body); line-height: 1.5; }
.setup-step:not(.is-now) .setup-step__text { color: var(--text-muted); }
.setup-step__warn, .setup-step__next { margin: var(--sp-2) 0 0; color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-bold); line-height: 1.5; }
.setup-ip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.setup-ip__addr { min-width: 0; max-width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-title); font-size: var(--font-title); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.setup-ip__copy { min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-bold); cursor: pointer; white-space: nowrap; }
.setup-ip__note { color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-bold); }
.setup-ip__note.is-failed { flex: 1 1 100%; color: var(--text-title); }
.setup-ip__note:empty { display: none; }
.setup-step__action { margin-top: var(--sp-3); }
.setup-step__primary { min-height: 48px; min-width: 220px; padding: 0 var(--sp-5); border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--accent-ink); font-size: var(--font-title); font-weight: var(--weight-heavy); cursor: pointer; }
.setup-step__hint { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--font-small); line-height: 1.5; }
.setup-card__help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.setup-card__help-q { color: var(--text-muted); font-size: var(--font-body); }
.setup-card__help-link { min-height: 44px; padding: 0 var(--sp-1); border: 0; background: none; color: var(--text-title); font-size: var(--font-body); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 820px) {
  .setup-step { padding: var(--sp-3); }
  .setup-ip { flex-direction: column; align-items: stretch; }
  .setup-ip__addr { text-align: center; }
  .setup-ip__copy { width: 100%; }
  .setup-ip__note { text-align: center; }
  .setup-step__primary { width: 100%; min-width: 0; }
}
@media (max-width: 820px) {
  /* 폰 — 두 칸 격자. 가로로 밀지 않는다. 마지막 칸이 홀로 남으면 한 줄을 다 쓴다(어드민과 같은 820px). */
  .help__tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .help__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .help__next { justify-content: stretch; }
  .help__next-btn { width: 100%; }
}

/* 정산 걸음 1: 달력 칸 이동. 비활성 단추도 같은 크기로 남긴다. */
.st-navigation { display: flex; align-items: center; gap: 8px; }
.st-navigation .st-range { flex: 1; justify-content: center; text-align: center; }
.st-navigation button, .st-retry { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--text-title); cursor: pointer; }
.st-navigation button:disabled { opacity: .3; cursor: default; }
.st-cycle-count { margin: 0 4px; color: var(--text-muted); font-size: var(--font-small); }
@media (max-width: 820px) {
  .st-period { gap: 4px; }
  .st-period button { flex: 1; padding: 0 8px; }
  .st-navigation .st-range > strong { font-size: var(--font-small); }
}

/* ★2026-09-09 : 이력을 못 읽었을 때 그 자리에서 말한다 (검수1 MEDIUM) */
.notice-board__empty { margin: 0; padding: var(--sp-4); color: var(--text-muted); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ── 이용권 탭 (2026-09-03 사장님 결정 D-7) — 카드 셋 + 단추 하나. 표 없음(가로 스크롤 병 원천 없음) ──
   ★ 새 색·새 크기를 만들지 않는다 — 있는 토큰만 쓴다. 단추는 설정 탭의 cfg-actions 를 «그대로» 입는다. */
.lic .lic-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.lic .lic-row:first-of-type { border-top: 0; }
.lic .lic-k { color: var(--text-muted); font-size: var(--font-small); }
.lic .lic-v { color: var(--text-title); text-align: right; overflow-wrap: anywhere; }
.lic-note { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--font-small); }
.lic-note--bad { color: var(--text-title); }   /* ★ 손익색(--negative)은 «손익 자리»에만 — 안내문은 제목색으로 */
.lic-actions { margin-top: var(--sp-3); }

/* 버전·로그아웃은 기존 확인창의 모양을 그대로 쓰고 긴 이력만 안에서 스크롤한다. */
.console-version { border: 0; padding: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--font-small); text-align: left; cursor: pointer; }
.cfg-dialog[data-v4-console-dialog] > div { max-height: calc(100dvh - 32px); overflow-y: auto; }
.cfg-dialog[data-v4-console-dialog] li { margin: 8px 0; color: var(--text-body); }

/* 개인정보 · 거래소 키는 브라우저 저장 없이 콘솔 서버로만 보낸다. */
.cred-overlay{position:fixed;inset:0;z-index:240;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:16px;}
.cred-card{width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--sp-5);}
.cred-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.cred-head h2,.cred-guide h3{margin:0;color:var(--text-title)}
.cred-head button,.cred-actions button{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--canvas);color:var(--text-title);padding:var(--sp-2) var(--sp-4);cursor:pointer}
.cred-status{margin:16px 0;border-top:1px solid var(--line)}.cred-status>div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.cred-status span,.cred-guide p,.cred-note{color:var(--text-muted);font-size:var(--font-small)}.cred-status strong{color:var(--text-title);text-align:right}
.cred-guide{padding:var(--sp-4);background:var(--canvas);border-radius:var(--radius-control)}.cred-guide h3{font-size:var(--font-body)}.cred-ips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}.cred-ips code{color:var(--text-title);font-size:var(--font-body);overflow-wrap:anywhere;user-select:all}.cred-ips button{border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--text-title);padding:var(--sp-1) var(--sp-3);min-height:36px;cursor:pointer;font-weight:var(--weight-bold)}.cred-copy-note{color:var(--text-muted);font-size:var(--font-small);flex:1 1 100%}.cred-copy-note:empty{display:none}
.cred-warning,.cred-error{color:var(--text-title)!important;line-height:1.5}.cred-form{display:grid;gap:12px;margin:16px 0}.cred-form label{display:grid;gap:var(--sp-2);color:var(--text-body);font-size:var(--font-body)}.cred-form input{background:var(--canvas);border:1px solid var(--line);color:var(--text-title);border-radius:var(--radius-control);padding:var(--sp-3) var(--sp-4)}.cred-form input:focus{outline:none;border-color:var(--text-title)}.cred-form .cred-ip-confirm{display:flex;align-items:flex-start;gap:var(--sp-2)}.cred-form .cred-ip-confirm input{width:auto;margin-top:var(--sp-1)}
.cred-actions{display:flex;justify-content:flex-end}.cred-actions button{background:var(--text-title);color:var(--surface);font-weight:var(--weight-bold)}.cred-actions button:disabled{opacity:.45;cursor:not-allowed}

/* ── 대시보드 맨 아래 «목표 순수익 계산기» (2026-09-16 사장님 · 기본 닫힘 · 보기 전용) ──────────────
   ★ 새 모양을 만들지 않는다 — 접는 칸(.cfg-group) · 입력칸(.cfg-fields/.cfg-field) · 결과 칸(.cfg-operation-values__grid) ·
     표(.st-table/.st-table-wrap) · 작은 안내(.st-note) · 단추(.pw-btn)를 그대로 입는다. 색·글꼴·둥글기 새 값 0.
   ★ 여기서 정하는 것은 «자리»뿐이다 — 칸 사이 간격 · 단계 단추 줄 · 넓은 표가 화면을 밀지 않게 하는 최소폭. */
/* ★ 밝은 화면 — 옛 이름 토큰(--canvas-raised · --surface-inner · --line-strong · --brand · --checking)은 :root 에서
     어두운 값으로 굳어 body.theme-light 로 안 풀린다(운용 설정 입력칸이 밝은 화면에서도 어두운 까닭 · 그 화면은 건드리지 않았다).
     계산기 안에서만 :root 정의를 «글자 그대로» 다시 적어 밝은 화면 값으로 풀리게 한다 — 새 값이 아니다. */
.tcalc { min-width: 0; --canvas-raised: var(--canvas); --surface-inner: var(--canvas); --line-strong: var(--line); --brand: var(--text-title); --checking: var(--text-muted); }
.tcalc__body { padding: var(--pad-card); display: grid; gap: var(--sp-4); }
.tcalc__body > *, .tcalc__result > * { min-width: 0; }
.tcalc__body > .cfg-fields { padding: 0; }
.tcalc__result { display: grid; gap: var(--sp-4); }
.tcalc__result .cfg-operation-values__grid strong { overflow-wrap: anywhere; }
.tcalc__steps { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: var(--sp-2); }
.tcalc__steps .pw-btn { min-height: 46px; margin-top: 0; font-size: var(--font-title); }
.tcalc__steps input { text-align: center; }
.tcalc__notes { grid-column: 1 / -1; }
.tcalc__notes .st-note:first-child { margin-top: 0; }