/* ════════════════════════════════════════════════════════════════════════════
   lvly-cloud 컨트롤플레인 — 라이블리 제품 UI 디자인 시스템 v1 이식판
   ────────────────────────────────────────────────────────────────────────────
   왜 별도 파일인가: CP 는 코어 웹(SPA)과 다른 앱이다(내장 http + 서버가 뿜는 정적 HTML).
     코어의 public/styles/*.css·web/*.ts 를 import 할 수 없으므로 **토큰 전량 + 실제로 쓰는
     컴포넌트만** 여기로 이식한다. 전량 복사 금지 — 이 파일에 있는 클래스는 CP 가 쓰는 것뿐이다.

   출처(SoT):
     · 토큰 값 = WIKI ui-design-system-tokens (tokens.css). :root 물리 색 33종은
       코어 public/styles/01-base.css:4–50 과 **값이 1:1로 동일함을 실측 확인**했다.
     · 컴포넌트 값 = 코어 03-components.css(.card/.btn/입력/.note/.pill-state) ·
       02-shell.css(.topbar/.tabs/유틸 필) · 05-admin.css(.field/.admin-hint/.mini-row) ·
       06-learn.css(.guide-hero/.guide-flow/.admin-stack/.card-head-row/.head-badge) ·
       26-docs-guide.css(표) · 27-start-onboarding.css(.ob-* 온보딩 스텝).
     · 코어와 위키 값이 갈리는 지점은 위키의 '정규화' 결정을 따르고 그 자리에 [정규화] 로 표시했다.

   금지(WIKI ui-design-system-agent):
     · 색 var() 폴백 금지(A3) · 유령 변수 금지(A1) · 토큰 밖 리터럴 금지 ·
       radius 는 6/9/12/16/999 5단만 · 채운 컬러 상태 필 금지(→ 점+라벨 or 틴트+진한 텍스트).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 토큰 ─────────────────────────────────────────────────────────────────── */
:root {
  /* 베이스 — 코어 01-base.css :root 와 동일 */
  --bg:            #FFFFFF;
  --bg-tint:       #F6FAFF;
  --bg-tint-2:     #EEF5FF;
  --bg-punch:      #EEF4FF;
  --bg-note:       #F0F5FF;
  --bg-success:    #F3FBF8;
  --bg-sel:        #F4F8FF;
  --canvas:        #E6EBF3;

  /* 브랜드 */
  --blue:          #2D6BF0;
  --blue-deep:     #1E54CC;
  --mint:          #16C79A;
  --mint-deep:     #0FA37E;
  --mint-bright:   #36E0A8;
  --teal:          #1BAEB0;
  --coral:         #E4756B;
  --coral-text:    #B84E44;

  /* 텍스트 */
  --ink:           #15233B;
  --ink-sub:       #5A6B85;
  --ink-note:      #2D4A7A;
  --muted:         #8A99B5;
  --muted-2:       #A6B2C8;
  --muted-3:       #C2CCDD;
  --muted-head:    #7A88A3;

  /* 라인/보더 */
  --line:          #E6ECF5;
  --line-row:      #EDF1F8;
  --line-net:      #DCE6F5;
  --line-net-2:    #CFE0F7;
  --line-note:     #D6E4FF;

  /* 네트워크 보조 노드 */
  --node-blue-soft:#9DBDF2;
  --node-mint-soft:#7FE0C4;

  /* 다크(클로징/푸터 액센트 전용 — 기본 배경 금지) */
  --dark-1:        #15233B;
  --dark-2:        #1C3962;
  --dark-sub:      #AEBFD8;
  --dark-foot:     #7C8DA8;

  /* 상태 트라이어드 — WIKI tokens.css state 완결층 */
  --success-bg:     #F3FBF8;  --success-border: #C9EBDF;
  --success-text:   #0FA37E;  --success-accent: #16C79A;
  --warning-bg:     #FFF6E6;  --warning-border: #F0D59A;
  --warning-text:   #8A5A00;  --warning-accent: #C2822F;
  --danger-bg:      #FDECEC;  --danger-border:  #F5C6C6;
  --danger-text:    #B84E44;  --danger-accent:  #E4756B;
  --info-bg:        #F0F5FF;  --info-border:    #D6E4FF;
  --info-text:      #2D4A7A;  --info-accent:    #2D6BF0;

  /* 형태 [정규화] radius 5단 */
  --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;

  /* 간격 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* 그림자: CP 는 부유물(모달·토스트)이 없어 그림자를 쓰지 않는다 — 기본 카드 그림자 금지(원칙 P3). */

  /* 모션 [정규화] ms 표기 통일 */
  --dur-fast: 120ms; --dur-base: 150ms; --dur-slow: 250ms; --dur-pulse: 2800ms;

  /* 크기 */
  --control-md: 34px; --topbar-h: 64px;

  /* 컨테이너 */
  --container-page: 1200px; --container-admin: 1160px;

  /* 폰트 */
  --font-sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ── 베이스 ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}
b, strong { font-weight: 700; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4 { margin: 0; }

/* 포커스 링 — 전역 표준(2px 블루 · offset 2) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 스킵 링크 — 포커스 시에만 노출 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg); color: var(--blue); font-size: 14px; font-weight: 700;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

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

/* ── 셸: 상단바 ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h); display: flex; align-items: center; gap: 36px;
  padding: 0 var(--space-6); background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.4px;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  align-self: center;
  box-shadow: 0 0 0 3px rgba(22,199,154,.16);
  animation: breathe var(--dur-pulse) ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,199,154,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(22,199,154,.07); }
}
.tabs { display: flex; gap: 4px; height: 100%; margin: 0 auto 0 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none; white-space: nowrap;
  display: flex; align-items: center; padding: 0 16px;
  font-size: 15px; font-weight: 700; color: var(--ink-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--blue); border-bottom-color: var(--blue); }
.topbar-brand { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.topbar-right { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
/* 우측 보조 유틸 — 같은 알약형(헤어라인 + 무채) */
.util-pill {
  display: inline-flex; align-items: center; height: 30px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted-head);
  padding: 0 13px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.util-pill:hover { color: var(--ink-sub); border-color: var(--line-net); background: var(--bg-tint); }
.util-pill.who { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 28px; cursor: default; }
.inline-form { display: inline-flex; margin: 0; }

/* ── 셸: 본문 · 푸터 ─────────────────────────────────────────────────────── */
.shell { max-width: var(--container-page); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
.shell-app { max-width: var(--container-admin); }
.shell-narrow { max-width: 920px; }
.app-footer {
  border-top: 1px solid var(--line); padding: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: baseline;
  max-width: var(--container-page); margin: 0 auto;
}
.app-footer .foot-mark { font-size: 13px; font-weight: 700; color: var(--ink-sub); }
.app-footer .foot-note { font-size: 12.5px; font-weight: 500; color: var(--muted-2); }

/* ── 페이지 머리 · 타이포 ─────────────────────────────────────────────────── */
.sechead { margin-bottom: var(--space-3); }
.sechead h1 { font-size: 22.5px; font-weight: 700; color: var(--ink); line-height: 1.55; }
.sechead .hint { font-size: 13px; font-weight: 500; color: var(--ink-sub); margin: 4px 0 0; line-height: 1.5; word-break: keep-all; }
.sechead-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--muted-head); text-transform: uppercase; margin: 0 0 11px; }
.accent { color: var(--blue); }
/* 문단 기본 마진은 0 — 간격은 간격 유틸(.sp-*)로만 준다(브라우저 1em 기본값 배제) */
.caption { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin: 0; }
.hint { font-size: 13px; font-weight: 500; color: var(--ink-sub); line-height: 1.5; margin: 0; word-break: keep-all; }
.hint b { color: var(--ink); }
.meta { font-size: 12.5px; font-weight: 600; color: var(--muted-head); }
.empty { padding: 22px 2px; color: var(--ink-sub); font-size: 14px; margin: 0; }

/* ── 카드 ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card-head-row { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 14px; flex-wrap: wrap; }
.card-head-row h3 { font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.card-head-act { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.admin-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-tight { display: flex; flex-direction: column; gap: var(--space-2); }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; }
.panel-tint { background: var(--bg-tint); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-2 > * { min-width: 0; }
.row-line { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-line-end { margin-left: auto; }

/* ── 버튼 5단 (primary/ghost/text/danger/text-danger 중 CP 가 쓰는 3단) ──── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1.15;
  border: 1px solid transparent; cursor: pointer; font-weight: 700; border-radius: var(--radius-md); /* [정규화] 11→12 */
  text-decoration: none; padding: 9px 18px; font-size: 14px; white-space: nowrap;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.btn-primary { background: var(--blue); color: var(--bg); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: var(--bg); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); }
.btn-sm { padding: 5px 13px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-text {
  background: none; border: none; color: var(--ink-sub); font-family: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; padding: 4px 6px;
}
.btn-text:hover { color: var(--blue); }
.link { color: var(--blue); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ── 폼 ───────────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 11px; color: var(--ink); font-size: 14px; font-weight: 500;
  min-height: var(--control-md); /* [정규화] 33→34 */
  max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
textarea { resize: vertical; }
.field { margin: var(--space-3) 0; }
.field-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted-head); margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; }
/* 한 줄 폼(입력 + 버튼) — 모바일에서 랩되며 입력이 먼저 전폭을 먹는다 */
.form-line { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.form-line input { flex: 1 1 14rem; min-width: 0; }
.form-line .btn { flex: none; }
.form-line .form-note { flex: 1 1 100%; font-size: 12.5px; font-weight: 500; color: var(--muted-head); margin: 0; }
.form-stack { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.form-stack input { width: 100%; }

/* ── 게이트 카드(로그인·초대) ─────────────────────────────────────────────── */
.gate-wrap { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); }
.gate-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 420px; padding: var(--space-8);
}
.gate-mark { font-size: 22px; margin-bottom: 14px; }
.gate-title { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -.2px; }
.gate-copy { font-size: 14px; font-weight: 500; color: var(--ink-sub); margin: 0 0 18px; line-height: 1.6; word-break: keep-all; }
.gate-error { font-size: 13px; font-weight: 600; color: var(--danger-text); margin: 0 0 14px; }
.gate-alt { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.gate-alt .field-label { margin-bottom: 6px; }
.gate-foot { font-size: 12.5px; font-weight: 500; color: var(--muted-head); margin: 14px 0 0; }

/* ── 배너 (info / warning / error 트라이어드) ────────────────────────────── */
.note {
  background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text);
  border-radius: var(--radius-md); padding: 13px 18px; font-size: 14px; line-height: 1.6;
  word-break: keep-all;
}
.note b { color: inherit; }
.note a { color: var(--blue-deep); font-weight: 700; }
.note a:hover { text-decoration: underline; }
.note-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.note-warn a { color: var(--warning-text); }
.note-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.note-danger a { color: var(--danger-text); }
.note-stack { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }

/* ── 상태 표시: 점 + 라벨 (채운 컬러 필 금지) ───────────────────────────── */
.pill-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 2px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-sub); white-space: nowrap;
}
.pill-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex: none; }
.pill-state.st-running::before, .pill-state.st-ok::before { background: var(--success-accent); }
.pill-state.st-stopped::before { background: var(--muted-2); }
.pill-state.st-provisioning::before, .pill-state.st-deleting::before { background: var(--blue); }
.pill-state.st-warn::before { background: var(--warning-accent); }
.pill-state.st-warn { color: var(--warning-text); }
.pill-state.st-over::before, .pill-state.st-error::before { background: var(--danger-accent); }
.pill-state.st-over, .pill-state.st-error { color: var(--danger-text); }
/* 꼬리표 칩(BETA·필수 등) — 틴트 + 진한 텍스트 */
.head-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-tint-2); color: var(--muted-head); font-size: 11.5px; font-weight: 700;
  line-height: 1.6; white-space: nowrap; letter-spacing: .3px;
}
.head-badge-req { background: var(--bg-punch); color: var(--blue); }

/* ── 사용량 바 (WIKI 확장 L1: 트랙 line-row · h6 · pill · 채움은 상태 토큰) ─ */
.bar { height: 6px; background: var(--line-row); border-radius: var(--radius-pill); overflow: hidden; margin-top: 5px; max-width: 200px; }
.bar > i { display: block; height: 100%; background: var(--blue); border-radius: var(--radius-pill); }
.bar-warn > i { background: var(--warning-accent); }
.bar-over > i { background: var(--danger-accent); }

/* ── 표 — 외곽 없음 + 행 하단 헤어라인, th 틴트 ─────────────────────────── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; padding: 9px 12px; background: var(--bg-tint); color: var(--ink);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-row); color: var(--ink); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--bg-tint); }
.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.dim, .tbl th.dim { color: var(--muted-head); }
.tbl-dense th { padding: 6px 9px; font-size: 11px; font-weight: 700; color: var(--muted-head); background: var(--bg); }
.tbl-dense td { padding: 7px 9px; font-size: 12.5px; }

/* 인라인 코드 칩 · 블록형(링크 등) */
.mono {
  display: inline-block; max-width: 100%;
  font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-tint); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 1.5px 6px; word-break: break-all;
  margin: 0; line-height: 1.6;
}
.mono-block { display: block; padding: 9px 12px; border-radius: var(--radius-md); }
/* 표 안 오류 문구 — 유일하게 줄바꿈을 허용하는 셀 내용 */
.err-text { color: var(--danger-text); font-size: 12px; font-weight: 600; white-space: normal; max-width: 24rem; margin-top: 3px; }

/* ── Guide Hero (마케팅/가이드 표면 전용 — 유일 허용 그라데이션) ─────────── */
.guide-hero {
  background: linear-gradient(135deg, #F4F8FF 0%, #F1FBF7 100%);
  border-color: var(--line-net); padding: 28px 28px 24px;
}
.guide-hero .guide-hero-title {
  font-size: 25px; font-weight: 800; line-height: 1.4; letter-spacing: -0.6px; color: var(--ink);
  margin: 0 0 13px; word-break: keep-all;
}
.guide-hero-lead {
  font-size: 15px; line-height: 1.75; color: var(--ink-sub); margin: 0 0 22px; max-width: 780px;
  word-break: keep-all;
}
.guide-hero-lead b { color: var(--ink); }
.guide-hero-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 22px; align-items: center; }
/* 스텝 플로우 — 아이콘 타일 + 제목 + 한 줄, 사이에 화살표 */
.guide-flow { display: flex; align-items: stretch; gap: 10px; }
.guide-flow-step {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-net);
  border-radius: var(--radius-md); padding: 16px 16px 15px; /* [정규화] radius 13→12 */
}
.guide-flow-icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--blue); background: var(--bg-punch); margin-bottom: 11px;
} /* [정규화] 코어 40px/radius11 → 위키 icon-tile 36px/radius sm */
.guide-flow-icon svg { width: 19px; height: 19px; }
.guide-flow-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.guide-flow-desc { font-size: 13px; line-height: 1.55; color: var(--ink-sub); margin: 0; word-break: keep-all; }
.guide-flow-arrow { flex: none; align-self: center; color: var(--muted-2); font-size: 19px; font-weight: 700; line-height: 1; }
/* '핵심 한 줄' */
.guide-remember {
  display: flex; align-items: center; gap: var(--space-3); margin-top: 20px; padding: 13px 16px;
  background: var(--bg-punch); border: 1px solid var(--line-note); border-radius: var(--radius-md);
}
.guide-remember .key {
  flex: none; font-size: 11.5px; font-weight: 800; color: var(--blue); background: var(--bg);
  border: 1px solid var(--line-net-2); border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap;
}
.guide-remember p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); word-break: keep-all; }

/* 가치 카드 — 아이콘 타일 + 제목 + 본문(Feature Grid 패턴) */
.feat-title { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; margin: 12px 0 6px; }
.feat-desc { font-size: 13.5px; line-height: 1.65; color: var(--ink-sub); margin: 0; word-break: keep-all; }

/* ── 온보딩 스텝(레일 노드 + 본문) — 코어 #/start 문법 ────────────────────── */
.ob-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 9px; }
.ob-count { font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.ob-count b { color: var(--blue); font-size: 18px; }
.ob-note { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.ob-bar { height: 7px; border-radius: var(--radius-pill); background: var(--bg-tint); overflow: hidden; margin: 0 0 20px; }
.ob-bar > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--blue); transition: width var(--dur-slow) ease; }
.ob-list { list-style: none; margin: 0; padding: 0; }
.ob-list > li { display: flex; gap: 14px; align-items: stretch; }
.ob-rail { flex: none; width: 30px; display: flex; flex-direction: column; align-items: center; }
.ob-node {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--bg); border: 2px solid var(--line-net-2); color: var(--muted-head);
}
.ob-line { flex: 1; width: 2px; min-height: 12px; margin: 5px 0; border-radius: 2px; background: var(--line); }
.ob-list > li:last-child .ob-line { display: none; }
/* 진행(다음 할 일) = 블루 링 + 블루 숫자 · 완료 = 민트 링 + 체크(틴트 배경, 채움 금지) */
.ob-list > li.now .ob-node { border-color: var(--blue); color: var(--blue); background: var(--bg-punch); }
.ob-list > li.done .ob-node { border-color: var(--success-accent); color: var(--success-text); background: var(--success-bg); }
.ob-list > li.done .ob-line { background: var(--success-border); }
.ob-body { flex: 1; min-width: 0; padding-bottom: 18px; }
.ob-list > li:last-child .ob-body { padding-bottom: 0; }
.ob-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.ob-list > li.done .ob-title { font-weight: 700; color: var(--ink-sub); }
.ob-how { font-size: 13.5px; line-height: 1.6; color: var(--ink-sub); margin: 6px 0 0; word-break: keep-all; }
.ob-act { margin: 10px 0 0; }
.ob-detail { font-size: 12.5px; font-weight: 600; color: var(--muted-head); margin: 6px 0 0; }
.ob-list > li.done .ob-how, .ob-list > li.done .ob-act { display: none; }

/* ── 워크스페이스 전환 칩 ─────────────────────────────────────────────────── */
.ws-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-sub);
  font-size: 13px; font-weight: 600; transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ws-chip:hover { border-color: var(--blue); color: var(--ink); }
.ws-chip.on { background: var(--bg-punch); border-color: var(--line-net-2); color: var(--blue); font-weight: 700; }
.ws-chip .ws-chip-role { font-size: 11.5px; font-weight: 600; color: var(--muted-head); }
.ws-chip.on .ws-chip-role { color: var(--blue); }

/* 워크스페이스 요약 줄 */
.ws-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.ws-meta { font-size: 12.5px; font-weight: 600; color: var(--muted-head); margin: 4px 0 14px; word-break: break-all; }

/* KPI — stat 숫자 + 라벨 */
.stat-row { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.stat .num { font-size: 26px; font-weight: 800; letter-spacing: -.8px; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 13px; font-weight: 600; color: var(--muted-2); letter-spacing: 0; margin-left: 3px; }
.stat .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin-top: 2px; }

/* ── 간격 유틸 — 간격 스케일 안에서만(인라인 style 금지 규칙 대응) ───────── */
.sp-t2 { margin-top: var(--space-2); }
.sp-t3 { margin-top: var(--space-3); }
.sp-t4 { margin-top: var(--space-4); }
.sp-b2 { margin-bottom: var(--space-2); }
.sp-b3 { margin-bottom: var(--space-3); }
.sp-b4 { margin-bottom: var(--space-4); }

/* ── 반응형 — 기존 브레이크포인트(960/760/720/560)만 사용 ───────────────── */
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: 1fr; }
  .shell, .shell-app { max-width: 100%; }
}
@media (max-width: 760px) {
  .topbar { gap: 14px; padding: 0 14px; }
  .tabs a { padding: 0 10px; font-size: 14px; }
  .shell { padding: var(--space-6) var(--space-4) var(--space-12); }
  .app-footer { padding: var(--space-4); }
  .card { padding: 18px 16px; }
  .guide-hero { padding: 22px 18px 20px; }
  .guide-hero .guide-hero-title { font-size: 22px; }
  .sechead h1 { font-size: 20px; }
}
@media (max-width: 720px) {
  .guide-flow { flex-direction: column; }
  .guide-flow-arrow { transform: rotate(90deg); margin: -3px 0; }
  .stat-row { gap: var(--space-4) var(--space-6); }
}
@media (max-width: 560px) {
  .util-pill.who { max-width: 86px; }
  .btn { padding: 9px 14px; }
}
/* 터치 환경 — 히트영역 확보 */
@media (hover: none) {
  .btn-sm { padding: 7px 13px; }
  .util-pill { height: 34px; }
}