/* ═══════════════════════════════════════════════════════════════════════════
   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;
  /* 옛 이름을 쓰는 다른 탭이 깨지지 않게 **같은 두 회색**으로 잇는다.
     「한 겹 안쪽」은 층을 쌓지 않고 **바탕색으로 파고든다**(정본 §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;
  --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); }

body {
  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; }
.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;
}
.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 오른쪽 위 — 개발서버 딱지 · [밝게|어둡게] */
.shell-top {
  min-height: 32px;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}
.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;
}
.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); }

/* 모바일 헤더·서랍 — 기본 숨김(≤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); }
.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); }
.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); }
  .theme-switch--drawer { margin: 0 var(--sp-2); justify-content: stretch; }
  .theme-switch--drawer .theme-seg { flex: 1 1 0; }
  .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; }
  .tplog__more {
    display: block; width: 100%; min-height: 40px; margin-top: var(--sp-2);
    border: 1px solid var(--line); border-radius: var(--radius-control);
    background: var(--canvas); color: var(--text-title); font-size: var(--font-small); font-weight: var(--weight-bold); cursor: pointer;
  }
}
/* ── 로그인 게이트 — 포르쉐 암실 사진 위 입력 한 벌(회색 톤만 맞췄다 · 구조 무변경) ── */
/* ═══ 로그인 게이트 — 아산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: 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); }

/* 단추 — 가로 꽉 · 민트 바탕 · 어두운 글자 (지시문 [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-opt-tag { margin-left: auto; color: var(--text-muted); font-size: var(--font-micro); white-space: nowrap; }
.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); }

@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-opt-tag { white-space: normal; text-align: right; }
  .cs-foot { padding: 8px 12px 12px; }
  .cs-actions button { flex: 1 1 0; }
}
/* ── 코인 ────────────────────────────────────────────────────────────── */
.c-page { display: flex; flex-direction: column; gap: 16px; }
.c-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.c-head > div:first-child { flex: 1 1 auto; min-width: 200px; }
.c-title { margin: 0; font-size: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -.3px; }
.c-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c-picker { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--font-small); }
.c-picker select { min-width: 142px; height: 42px; padding: 0 24px 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); outline: none; background: var(--surface-inner); color: var(--text-title);
  font: inherit; font-size: var(--font-body); font-weight: var(--weight-bold); cursor: pointer; }
.c-picker select:focus { border-color: var(--brand); }
.c-sub { margin: 4px 0 0; font-size: var(--font-small); color: var(--text-muted); }
.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); }
.c-coins { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.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, .c-flow-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-mark-note { margin: 0; font-size: var(--font-title); text-align: center; }
.c-mark-note b { color: var(--text-title); }
.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-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.c-flow-k { display: block; margin-bottom: 12px; color: var(--text-muted); font-size: var(--font-small); }
.c-flow-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c-flow-s { font-size: var(--font-title); font-weight: var(--weight-bold); }
.c-flow-s.dim { color: var(--text-muted); }
.c-flow-b { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text-body); }
.c-flow-n { display: block; margin-top: 8px; color: var(--text-faint); font-size: var(--font-small); white-space: pre-line; }
.c-flow-arrow { color: var(--text-faint); font-size: var(--font-display); }
.c-flow .c-ago { display: inline-block; margin-top: 0; }
.c-o-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.c-o-c { text-align: center; }
.c-o-c + .c-o-c { border-left: 1px solid var(--line); }
.c-o-v { display: block; overflow-wrap: anywhere; font-size: 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-fit { overflow: hidden; position: relative; }
.c-fit::before { content: ""; width: 4px; position: absolute; inset: 0 auto 0 0; background: var(--checking); }
.c-fit.is-known::before { background: var(--brand); }
.c-fit-main { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.c-fit-main strong { color: var(--text-title); font-size: var(--font-display); letter-spacing: -.03em; }
.c-fit-main b { color: var(--text-title); font-size: var(--font-display); font-variant-numeric: tabular-nums; }
.c-fit-rank { margin: 4px 0 12px; color: var(--text-body); font-weight: var(--weight-bold); }

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

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

/* ── 운용 설정 ───────────────────────────────────────────────────────── */
.cfg-page { display: grid; gap: var(--space-card); }
.cfg-explain { display: flex; align-items: center; gap: 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, .cfg-wizard-wait { 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-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); }
.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(128px,.72fr) minmax(170px,1fr); align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-inner); }
.cfg-manual-values label > span { color: var(--text-body); font-weight: 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; }
/* 기준을 아직 못 잡아 입력을 받지 않았을 때의 안내 */
.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,1.55fr) minmax(280px,.6fr); 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; }
.cfg-group summary span:last-child { 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, .cfg-field select { 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, .cfg-field select:focus { border-color: var(--brand); }
.cfg-field input:disabled, .cfg-field select:disabled { opacity: .72; color: var(--text-muted); cursor: not-allowed; }
.cfg-field small { display: none; color: var(--text-muted); line-height: 1.45; }
.cfg-page.show-explain .cfg-field small { display: block; }
.cfg-preview { position: sticky; top: 92px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cfg-preview > span { color: var(--brand); font-size: var(--font-micro); font-weight: var(--weight-heavy); letter-spacing: .08em; }
.cfg-preview h2 { margin: 4px 0 16px; color: var(--text-title); font-size: var(--font-title); }
.cfg-preview__steps { display: grid; gap: 8px; }
.cfg-preview__steps > div { padding: 12px 12px; display: flex; justify-content: space-between; border-radius: var(--radius-control); background: var(--surface-inner); }
.cfg-preview__steps span { color: var(--text-muted); }
.cfg-preview__steps strong { color: var(--text-title); }
.cfg-preview > p { margin: 16px 0 0; color: var(--text-muted); font-size: var(--font-small); }
.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-auto-refreshing { color: var(--checking); }
.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); }

@media (max-width: 820px) {
  .cfg-flow { padding: 12px; grid-template-columns: 1fr; }
  .cfg-layout { grid-template-columns: 1fr; }
  .cfg-diffs { grid-template-columns: 1fr; }
  .cfg-diffs > div { grid-template-columns: minmax(76px, 1fr) minmax(0, 1fr) auto minmax(0, 1fr); }
  .cfg-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-preview { position: static; }
  .cfg-actions { align-items: stretch; flex-direction: column; }
  .cfg-actions button { width: 100%; }
  .cfg-action-disabled { width: 100%; }
}

/* ── 정산 ─────────────────────────────────────────────────────────────── */
.st-page { display: grid; gap: var(--space-card); }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 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); }
.st-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-unit, .st-period { display: flex; gap: 8px; overflow-x: auto; }
.st-unit button, .st-period button { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.st-unit button[aria-pressed="true"], .st-period button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.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; }
.st-summary { padding: var(--pad-card); display: grid; grid-template-columns: minmax(260px,.72fr) 1.4fr; gap: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-summary--metrics-only { grid-template-columns: 1fr; }
.st-summary__lead { min-height: 172px; padding: var(--sp-5); display: flex; flex-direction: column; justify-content: center; border-radius: var(--radius-inner); background: var(--surface-inner); }
.st-summary__lead > span, .st-metric > span { color: var(--text-muted); font-size: var(--font-small); }
.st-summary__lead strong { margin: 8px 0 4px; color: var(--text-title); font-size: var(--font-display); line-height: 1.2; }
.st-summary__lead small { color: var(--text-muted); }
.st-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.st-metric { min-height: 80px; padding: 16px 16px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-inner); }
.st-metric strong { margin-top: 8px; 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); }
.pos { color: var(--positive) !important; } .neg { color: var(--negative) !important; } .checking { color: var(--checking) !important; }
.st-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.6fr); gap: var(--space-card); }
.section-head { margin: 0 4px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head h2, .st-help h2 { margin: 0; color: var(--text-title); font-size: var(--font-title); }
.section-head span { color: var(--text-muted); font-size: var(--font-small); }
.st-cycles { display: grid; gap: 8px; }
.st-cycle, .st-help, .st-days { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.st-help--wide { min-height: 120px; }
.st-cycle__head { display: flex; justify-content: space-between; gap: 16px; }
.st-cycle__head h3 { margin: 4px 0 0; color: var(--text-title); font-size: var(--font-title); }
.st-cycle__head time { color: var(--text-muted); font-size: var(--font-small); }
.st-source { display: inline-flex; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-muted); font-size: var(--font-micro); }
/* ★ N-236 — 사람이 봐야 하는 사유(어긋남)만 음수 톤으로 바꾼다. **새 색을 만들지 않는다**(--negative 재사용). */
.st-source--warn { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.st-row { padding: 8px 0; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.st-row:first-of-type { margin-top: 12px; }
.st-row span, .st-cycle > p, .st-target { color: var(--text-muted); font-size: var(--font-small); }
.st-row strong { color: var(--text-title); text-align: right; }
.st-help dl { margin: 16px 0 0; }
.st-help dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.st-help dt { color: var(--text-title); font-weight: var(--weight-bold); }
.st-help dd { margin: 4px 0 0; color: var(--text-muted); font-size: var(--font-small); }
/* ★ ADD1 ② — 점선 네모 → **실선**(점선은 미완성으로 읽힌다) · 파란 안내 → 보조 설명 회색 */
.st-empty { min-height: 150px; padding: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--text-muted); background: var(--surface); }
.st-table-wrap { overflow-x: auto; }
.st-days table { width: 100%; border-collapse: collapse; }
.st-days th, .st-days td { padding: 12px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.st-days th:first-child, .st-days td:first-child { text-align: left; }
.st-days th { color: var(--text-muted); font-size: var(--font-small); font-weight: var(--weight-bold); }

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

/* ══ 로그 탭 (ALPHAX_UI_V4_LOGS_20260811 · 시안 07_logs_pc.png / 03_logs_mobile.png) ══
   ★ 셸과 같은 원칙 — 분기는 여기(CSS)에만. 같은 DOM 이 폭에 따라 배치만 달라진다. */
.g-page { display: grid; grid-template-columns: 68fr 32fr; gap: 16px; align-items: start;
  word-break: keep-all; }
.g-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g-card { padding: 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); }
.st-unit button[aria-pressed="true"], .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 { border-color: var(--text-muted); background: var(--canvas); color: var(--text-title); }
.cfg-field > span em { background: var(--canvas); color: var(--text-muted); }
.cfg-preview > span { color: var(--text-muted); letter-spacing: 0; }
/* 카드 안 여백 16 · 모바일 12 — 옛 24 를 규격으로 맞춘다(규칙표 §4-A④). */
.cfg-prereq, .cfg-wizard, .cfg-operation-values, .cfg-preview, .st-cycle, .st-help, .st-days { padding: var(--pad-card); }
.cfg-actions { padding: var(--pad-card); }
.st-summary { padding: var(--pad-card); }
.cfg-wizard-ask { padding: var(--pad-card); }
@media (max-width: 820px) {
  .cfg-prereq, .cfg-wizard, .cfg-operation-values, .cfg-preview, .st-cycle, .st-help, .st-days, .cfg-actions, .st-summary, .cfg-wizard-ask,
  .c-card, .c-coin, .g-card, .g-list { padding: var(--pad-card-mobile); }
  .c-coin { padding-bottom: var(--pad-card-mobile); }
}