/* ============================================================
   DODO Developer — External Preview v0.1
   Stitch "KRSYS DODO Developer" 디자인 언어 적용

   Flat and Functional — 그림자를 쓰지 않는다.
   깊이는 톤 계층(surface 단계)과 1px 테두리로만 만든다.
   상호작용은 elevation 이 아니라 배경색 이동으로 표현한다.

   대응표: docs/STITCH_PREVIEW_MAPPING.md
   ============================================================ */
:root {
  /* --- Stitch surface 단계 --- */
  --surface: #f9f9ff;
  --surface-lowest: #ffffff;
  --surface-low: #f0f3ff;
  --surface-container: #e7eeff;

  /* --- Stitch 색 --- */
  --primary: #031636;          /* Deep Blue — 브랜드·기본 버튼·활성 탭 */
  --primary-container: #1a2b4c;
  --secondary: #4355b9;        /* Professional Indigo — 강조·focus */
  --secondary-soft: #dee0ff;

  --on-surface: #111c2d;
  --on-surface-variant: #44474e;
  --on-surface-muted: #75777f;

  --outline-variant: #c5c6cf;
  --border: #e2e8f0;           /* DESIGN.md 가 지정한 테두리색 */

  /* --- 상태색 (dot + 10% 배경) --- */
  --ok: #00784f;
  --ok-dot: #00a774;
  --ok-bg: rgba(0, 167, 116, .10);
  --warn: #b5620a;
  --warn-dot: #d97d16;
  --warn-bg: rgba(217, 125, 22, .10);
  --danger: #ba1a1a;
  --danger-bg: rgba(186, 26, 26, .10);
  --info: #4355b9;
  --info-bg: rgba(67, 85, 185, .10);
  --neutral: #44474e;
  --neutral-bg: rgba(117, 119, 127, .10);

  /* --- diff --- */
  --diff-add-bg: rgba(0, 167, 116, .10);
  --diff-del-bg: rgba(186, 26, 26, .08);

  /* --- 타이포그래피 (Inter / JetBrains Mono 우선, 외부 로딩 없음) --- */
  --sans: Inter, "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;

  /* --- Shapes: Soft (Level 1) --- */
  --r: 4px;      /* 컴포넌트 */
  --r-lg: 8px;   /* 큰 컨테이너 */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: 16px;              /* body-lg */
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
button { font: inherit; }

/* 고대비 focus ring — Professional Indigo */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- 접근코드 화면 */

.gate {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--surface);
}
/* 그림자를 쓰지 않는다. 톤 차이와 1px 테두리로만 띄운다. */
.gate-card {
  width: min(448px, 100%);
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 36px 32px;
}
.gate-brand {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--on-surface-muted);
  margin-bottom: 10px;
}
.gate-title {
  font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -.02em;
  color: var(--primary);
}
.gate-badge {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--secondary);
  background: var(--secondary-soft);
  border-radius: 999px;
  padding: 4px 11px;
}
.gate-lede {
  margin-top: 20px;
  font-size: 14px;
  line-height: 22px;
  color: var(--on-surface-variant);
}
.gate-lede strong { color: var(--primary); font-weight: 600; }
.gate-label {
  display: block;
  margin: 26px 0 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-surface-muted);
}
.gate-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-lowest);
  color: var(--on-surface);
}
.gate-input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(67, 85, 185, .16);
}
.gate-submit { width: 100%; margin-top: 16px; padding: 12px; }
.gate-error {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--danger-bg);
  border: 1px solid rgba(186, 26, 26, .28);
  color: var(--danger);
  font-size: 14px;
}
.gate-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--on-surface-muted);
  text-align: center;
}

/* ---------------------------------------------------------- 버튼 */

.btn {
  border: 1px solid var(--border);
  background: var(--surface-lowest);
  color: var(--on-surface);
  border-radius: var(--r);
  padding: 8px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
/* hover 는 배경 이동으로만 표현한다 (그림자 금지) */
.btn:hover { background: var(--surface-low); border-color: var(--outline-variant); }

/* 기본 버튼 — solid Deep Blue, 그라데이션 없음 */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--primary-container); border-color: var(--primary-container); }

/* 보조 버튼 — Professional Indigo outline */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--on-surface-variant);
}
.btn-ghost:hover { background: var(--surface-low); color: var(--secondary); border-color: var(--outline-variant); }

.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface-lowest); border-color: var(--border); }

/* ---------------------------------------------------------- 상단 */

.app { min-height: 100%; display: flex; flex-direction: column; }

.topbar { background: var(--surface-lowest); border-bottom: 1px solid var(--border); }
.topbar-main {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 13px 24px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em;
  color: var(--on-surface-muted);
}
.brand-name { font-size: 18px; font-weight: 600; line-height: 24px; color: var(--primary); }
.pill {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pill-preview { background: var(--warn-bg); color: var(--warn); }

.topstats { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.topstat { display: flex; flex-direction: column; gap: 1px; }
.topstat dt {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-surface-muted);
}
.topstat dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--primary); }
.topstat dd.warn { color: var(--warn); }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Easy/Expert 토글 — 활성 라벨을 트랙 안에 보여준다 */
.modeswitch {
  display: inline-flex;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.modebtn {
  border: 0;
  background: transparent;
  color: var(--on-surface-variant);
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: background .12s, color .12s;
}
.modebtn:hover { color: var(--primary); }
.modebtn.is-active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.notice {
  padding: 10px 24px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid rgba(217, 125, 22, .2);
}

/* ---------------------------------------------------------- 레이아웃 */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 420px;
  min-height: 0;
}
.pane { min-width: 0; overflow-y: auto; }
/* 좌측 레일 — 캔버스보다 한 단계 낮은 톤으로 구분한다 */
.pane-left { background: var(--surface-low); border-right: 1px solid var(--border); padding: 20px 14px; }
.pane-center { padding: 28px 32px 60px; }
.pane-right {
  background: var(--surface-lowest);
  border-left: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

/* ---------------------------------------------------------- 좌측 레일 */

.side-group + .side-group { margin-top: 24px; }
.side-title {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-surface-muted);
  margin: 0 0 8px 10px;
}
.side-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r);
  padding: 9px 10px;
  color: var(--on-surface);
}
.side-item .ico { color: var(--on-surface-muted); margin-top: 2px; }
.side-item.is-active {
  background: var(--surface-container);
  border-color: var(--outline-variant);
}
.side-item.is-active .ico { color: var(--primary); }
.side-item .name { font-size: 14px; font-weight: 600; line-height: 20px; }
.side-item .meta { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
.side-item.is-active .name { color: var(--primary); }
.side-empty { font-size: 13px; color: var(--on-surface-muted); padding: 4px 10px; }

.side-request {
  margin-top: 8px;
  padding: 12px;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--r);
  background: var(--surface-lowest);
}
.side-request p { font-size: 13px; line-height: 19px; color: var(--on-surface-variant); }
.side-request .btn { width: 100%; margin-top: 10px; }

/* ---------------------------------------------------------- 가운데 */

.center-head { margin-bottom: 24px; }
.center-head h2 {
  font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.01em;
  color: var(--primary);
}
.center-head .sub { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--on-surface-variant); }

.request-box {
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  border-left: 3px solid var(--secondary);
  border-radius: var(--r);
  padding: 15px 18px;
  margin-bottom: 26px;
}
.request-box .label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 5px;
}
.request-box .text { font-size: 16px; font-weight: 600; color: var(--primary); }

/* DAG */
.dag { margin-bottom: 28px; }
.dag h3 { font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 12px; }
.dag-levels { display: flex; flex-direction: column; gap: 10px; }
.dag-level { display: flex; align-items: stretch; gap: 12px; }
.dag-level-tag {
  flex: 0 0 76px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--on-surface-muted);
  padding-top: 12px;
}
.dag-nodes { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.dag-node {
  flex: 1 1 200px;
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 13px;
}
.dag-node .id { font-family: var(--mono); font-size: 12px; color: var(--secondary); font-weight: 600; }
.dag-node .title { font-size: 14px; font-weight: 600; line-height: 20px; margin-top: 2px; }
.dag-node .dep { font-family: var(--mono); font-size: 12px; color: var(--on-surface-muted); margin-top: 5px; }
.dag-node .foot { display: flex; gap: 10px; align-items: center; margin-top: 9px; font-size: 12px; color: var(--on-surface-variant); }
.dag-parallel-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 21px;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid rgba(0, 167, 116, .22);
  border-radius: var(--r);
  padding: 10px 13px;
}

/* 실행 기록 */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--outline-variant);
}
.tl-item { position: relative; padding: 0 0 20px; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -21px; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--outline-variant);
}
.tl-item.actor-user::before { border-color: var(--primary); }
.tl-item.actor-planner::before,
.tl-item.actor-runner::before { border-color: var(--secondary); }
.tl-item.actor-reviewer::before { border-color: var(--ok-dot); }
.tl-item.is-approval::before { border-color: var(--warn-dot); background: var(--warn-dot); }
.tl-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tl-stage {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-surface-muted);
}
.tl-time { font-family: var(--mono); font-size: 12px; color: var(--on-surface-muted); margin-left: auto; }
.tl-title { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--primary); }
.tl-detail { font-size: 14px; line-height: 21px; color: var(--on-surface-variant); margin-top: 3px; }

/* 승인 · 영수증 */
.approval {
  margin-top: 6px;
  background: var(--surface-lowest);
  border: 1px solid rgba(217, 125, 22, .34);
  border-left: 3px solid var(--warn-dot);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.approval h3 { font-size: 18px; font-weight: 600; color: var(--primary); }
.approval .sub { font-size: 14px; color: var(--on-surface-variant); margin-top: 4px; }
.approval ul { margin: 14px 0 0; padding-left: 18px; font-size: 14px; line-height: 22px; color: var(--on-surface-variant); }
.approval-actions { display: flex; gap: 9px; margin-top: 18px; }
.approval-meta { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--on-surface-muted); }

.receipt {
  margin-top: 6px;
  background: var(--ok-bg);
  border: 1px solid rgba(0, 167, 116, .3);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.receipt h3 { font-size: 18px; font-weight: 600; color: var(--ok); }
.receipt table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.receipt td { padding: 7px 0; border-bottom: 1px solid rgba(0, 167, 116, .18); }
.receipt td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; }
.receipt .note { margin-top: 14px; font-size: 14px; color: var(--on-surface-variant); }

/* ---------------------------------------------------------- 오른쪽 탭 */

/* Tabbed Navigation — underline 방식, 활성 탭은 2px Deep Blue + semibold */
.tabs {
  display: flex;
  gap: 2px;
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  border: 0;
  background: transparent;
  color: var(--on-surface-variant);
  padding: 9px 12px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--primary); }
.tab.is-active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

.tabbody { padding: 20px; overflow-y: auto; }
.tabbody h3 { font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 5px; }
.tabbody .lede { font-size: 14px; line-height: 21px; color: var(--on-surface-variant); margin-bottom: 16px; }
.tabbody section + section { margin-top: 26px; }

/* 상태 배지 — dot + label, 배경은 상태색 10% */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  border-radius: 999px;       /* 완전 pill — 버튼과 구분 */
  padding: 3px 10px 3px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.state::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.state-live, .state-configured {
  color: var(--ok); background: var(--ok-bg); border-color: rgba(0, 167, 116, .26);
}
.state-demo { color: var(--info); background: var(--info-bg); border-color: rgba(67, 85, 185, .26); }
.state-mock, .state-dns_configured {
  color: var(--warn); background: var(--warn-bg); border-color: rgba(217, 125, 22, .26);
}
.state-blocked, .state-invalid, .state-failed {
  color: var(--danger); background: var(--danger-bg); border-color: rgba(186, 26, 26, .26);
}
.state-missing, .state-unreachable, .state-deployment_required {
  color: var(--neutral); background: var(--neutral-bg); border-color: var(--outline-variant);
}
.state-verifying { color: var(--info); background: var(--info-bg); border-color: rgba(67, 85, 185, .26); }

.demo-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* 목록 */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 11px 12px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
/* DEPLOYMENT_REQUIRED 처럼 긴 상태명이 설명 칸을 좁히지 않도록 배지를 윗줄에 둔다 */
.row-stack { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.row-stack .state { justify-self: start; }
.row .rtitle { font-size: 14px; font-weight: 600; line-height: 20px; }
.row .rdetail { font-size: 13px; line-height: 19px; color: var(--on-surface-variant); margin-top: 2px; }
.row .rmeta { font-family: var(--mono); font-size: 12px; color: var(--on-surface-muted); margin-top: 4px; }

/* 표 — 헤더는 대문자 마이크로 라벨 */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-surface-muted);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.table td { padding: 9px 0; border-bottom: 1px solid var(--border); }
.table td.num { text-align: right; font-family: var(--mono); font-size: 13px; }
.table tr.total td { font-weight: 700; color: var(--primary); border-bottom: 0; padding-top: 12px; }

/* diff — 회색 컨테이너 + JetBrains Mono, 전폭 배경 강조 */
.diff {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  color: var(--on-surface-variant);
}
.diff .add { color: var(--ok); background: var(--diff-add-bg); display: block; }
.diff .del { color: var(--danger); background: var(--diff-del-bg); display: block; }
.diff .hunk { color: var(--secondary); display: block; }
.diff .meta { color: var(--on-surface-muted); display: block; }

/* 미리보기 화면 */
.mock-app {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-lowest);
}
.mock-bar {
  background: var(--surface-low);
  padding: 8px 11px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--on-surface-muted);
  border-bottom: 1px solid var(--border);
}
.mock-body { padding: 16px; }
.mock-body h4 { font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 13px; }
.mock-filters { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.mock-filters label { font-size: 13px; color: var(--on-surface-variant); }
.mock-filters select {
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-lowest);
  color: var(--on-surface);
}
.mock-filters select:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(67,85,185,.16); }
.mock-filters .count { font-size: 13px; color: var(--on-surface-muted); margin-left: auto; }
.mock-scroll { overflow-x: auto; }
/* 좁은 패널에서 글자가 끊기지 않도록 표는 줄바꿈 없이 가로 스크롤한다 */
.mock-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.mock-table th, .mock-table td { padding-right: 14px; }
.mock-table th:last-child, .mock-table td:last-child { padding-right: 0; }
.mock-table th {
  text-align: left; padding: 6px 0;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-surface-muted);
  border-bottom: 1px solid var(--border);
}
.mock-table td { padding: 9px 0; border-bottom: 1px solid var(--border); }
.mock-status {
  font-size: 12px; border-radius: 999px; padding: 2px 10px;
  background: var(--neutral-bg); color: var(--on-surface-variant);
}
.mock-status[data-s="in-progress"] { background: var(--info-bg); color: var(--info); }
.mock-status[data-s="answered"] { background: var(--ok-bg); color: var(--ok); }

/* TRACE / 로그 */
.log {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--on-surface-variant);
}
.trace-row {
  display: grid;
  grid-template-columns: 62px 72px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 19px;
}
.trace-row .t { font-family: var(--mono); font-size: 12px; color: var(--on-surface-muted); }
.trace-row .c { font-family: var(--mono); font-size: 11px; color: var(--secondary); }
.trace-row .m { color: var(--on-surface-variant); }
.trace-row.blocked .m { color: var(--danger); }
.trace-row.awaiting .m { color: var(--warn); }

.hint { font-size: 13px; line-height: 19px; color: var(--on-surface-muted); margin-top: 12px; }
.kvlist { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 14px; }
.kvlist dt { color: var(--on-surface-muted); font-size: 13px; }
.kvlist dd { margin: 0; font-family: var(--mono); font-size: 13px; }

/* ---------------------------------------------------------- 반응형 */

@media (max-width: 1440px) {
  .layout { grid-template-columns: 248px minmax(0, 1fr) 388px; }
  .pane-center { padding: 24px 26px 56px; }
}
@media (max-width: 1280px) {
  .layout { grid-template-columns: 224px minmax(0, 1fr) 352px; }
  .topstats { gap: 18px; }
  .pane-center { padding: 22px 22px 52px; }
}
@media (max-width: 1120px) {
  .layout { grid-template-columns: 204px minmax(0, 1fr) 320px; }
  body { font-size: 15px; }
  .topstat dd { font-size: 13px; }
  .dag-node { flex-basis: 160px; }
}
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .pane-left { border-right: 0; border-bottom: 1px solid var(--border); }
  .pane-right { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
  .pane { overflow-y: visible; }
  .topstats { width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------- DEMO 배너 */

.demo-banner {
  margin-bottom: 20px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--warn-bg);
  border: 1px solid rgba(217, 125, 22, .26);
  color: var(--warn);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
}

/* ---------------------------------------------------------- 수정 요청 입력창 */

/* 항상 보인다. 화면 아래에 붙어 Workspace 를 가리지 않는다. */
.composer {
  border-top: 1px solid var(--border);
  background: var(--surface-lowest);
  padding: 12px 24px 14px;
}
.composer-label {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 7px;
}
.composer-row { display: flex; gap: 9px; align-items: center; }
.composer-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-lowest);
  color: var(--on-surface);
}
.composer-input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(67, 85, 185, .16);
}
.composer-note { margin-top: 7px; font-size: 12.5px; color: var(--on-surface-muted); }

/* ---------------------------------------------------------- Wizard */

.wizard { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.wizard-backdrop { position: absolute; inset: 0; background: rgba(17, 28, 45, .42); }
.wizard-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.wizard-step {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em;
  color: var(--secondary);
  margin-bottom: 4px;
}
.wizard-title { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; color: var(--primary); }

.wizard-body { padding: 22px 24px; overflow-y: auto; }
.wizard-lede { font-size: 14px; line-height: 21px; color: var(--on-surface-variant); margin-bottom: 14px; }

.wizard-input, .wizard-textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-lowest);
  color: var(--on-surface);
}
.wizard-textarea { resize: vertical; line-height: 22px; }
.wizard-input:focus, .wizard-textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(67, 85, 185, .16);
}

.wizard-options { display: grid; gap: 9px; }
.wizard-option {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-lowest);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wizard-option:hover { background: var(--surface-low); border-color: var(--outline-variant); }
.wizard-option.is-active { background: var(--surface-container); border-color: var(--secondary); }
.wo-name { font-size: 15px; font-weight: 600; color: var(--primary); }
.wo-summary { font-size: 13px; color: var(--on-surface-variant); }
.wo-stack { font-family: var(--mono); font-size: 12px; color: var(--on-surface-muted); }

.wizard-summary { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; margin-bottom: 16px; }
.wizard-summary dt { font-size: 13px; color: var(--on-surface-muted); }
.wizard-summary dd { margin: 0; color: var(--on-surface); }
.wizard-warn {
  font-size: 13px;
  line-height: 20px;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid rgba(217, 125, 22, .26);
  border-radius: var(--r);
  padding: 11px 13px;
}

.wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 24px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-low);
}
.wizard-demo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--warn); }
.wizard-actions { display: flex; gap: 9px; }

@media (max-width: 720px) {
  .wizard-summary { grid-template-columns: 1fr; gap: 2px 0; }
  .wizard-foot { flex-direction: column; align-items: stretch; }
}