/* ═════════════════════════ 디자인 토큰 (OKLCH) ═════════════════════════ */

:root {
  color-scheme: dark light;

  --bg:            oklch(15% 0.02 260);
  --surface:       oklch(22% 0.02 260);
  --surface-hi:    oklch(28% 0.02 260);
  --surface-mute:  oklch(20% 0.02 260);
  --border:        oklch(35% 0.02 260);
  --border-hi:     oklch(45% 0.02 260);

  --text:          oklch(96% 0.01 260);
  --text-mute:     oklch(70% 0.02 260);
  --text-dim:      oklch(55% 0.02 260);

  --accent:        oklch(70% 0.17 250);
  --accent-fg:     oklch(15% 0.02 250);
  --warn:          oklch(82% 0.17 85);
  --warn-fg:       oklch(20% 0.05 85);
  --ok:            oklch(70% 0.17 150);
  --ok-fg:         oklch(15% 0.05 150);
  --err:           oklch(65% 0.20 25);
  --err-fg:        oklch(98% 0.02 25);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px;

  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px;

  --shadow-card: 0 1px 2px rgb(0 0 0 / .2), 0 4px 12px rgb(0 0 0 / .15);
  --shadow-pop:  0 4px 16px rgb(0 0 0 / .35);

  --dur-fast: 120ms;
  --dur-med:  220ms;
  --easing:   cubic-bezier(.2, .7, .3, 1);
}

/* 라이트 테마 — 명시적 data-theme="light" 또는 auto + 시스템이 light 일 때 */
[data-theme="light"],
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg:            oklch(98% 0.005 260);
    --surface:       oklch(100% 0 0);
    --surface-hi:    oklch(94% 0.005 260);
    --surface-mute:  oklch(96% 0.005 260);
    --border:        oklch(86% 0.01 260);
    --border-hi:     oklch(76% 0.01 260);

    --text:          oklch(18% 0.02 260);
    --text-mute:     oklch(40% 0.02 260);
    --text-dim:      oklch(55% 0.02 260);

    --accent:        oklch(50% 0.18 250);
    --accent-fg:     oklch(100% 0 0);
    --warn:          oklch(55% 0.18 70);
    --warn-fg:       oklch(100% 0 0);
    --ok:            oklch(48% 0.17 150);
    --ok-fg:         oklch(100% 0 0);
    --err:           oklch(52% 0.22 25);
    --err-fg:        oklch(100% 0 0);

    --shadow-card:   0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .08);
    --shadow-pop:    0 4px 16px rgb(0 0 0 / .12);
  }
}
/* 위 문법이 브라우저에 따라 파싱 안 될 수 있으므로 명시적 규칙 별도
 * 라이트모드 — 경계 가독성을 위해 border 더 진하게 */
[data-theme="light"] {
  --bg:            oklch(96% 0.005 260);        /* surface 와 더 구분 */
  --surface:       oklch(100% 0 0);
  --surface-hi:    oklch(92% 0.01 260);
  --surface-mute:  oklch(98% 0.005 260);
  --border:        oklch(78% 0.01 260);         /* 더 진함 (86→78) */
  --border-hi:     oklch(65% 0.02 260);         /* 더 진함 (76→65) */
  --text:          oklch(15% 0.02 260);         /* 더 진함 */
  --text-mute:     oklch(38% 0.02 260);
  --text-dim:      oklch(50% 0.02 260);
  --accent:        oklch(48% 0.18 250);
  --accent-fg:     oklch(100% 0 0);
  --warn:          oklch(55% 0.18 70);
  --warn-fg:       oklch(100% 0 0);
  --ok:            oklch(44% 0.17 150);
  --ok-fg:         oklch(100% 0 0);
  --err:           oklch(50% 0.22 25);
  --err-fg:        oklch(100% 0 0);
  --shadow-card:   0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .10);
  --shadow-pop:    0 4px 16px rgb(0 0 0 / .14);
  color-scheme: light;
}
/* 라이트모드 전용 미세조정 — row 교차 배경 명확 + 입력칸 border 뚜렷 */
[data-theme="light"] .slot-rows > .slot-row:nth-child(even) {
  background: color-mix(in oklch, var(--surface-mute) 50%, var(--surface-hi));
}
[data-theme="light"] .slot-code-input {
  background: var(--surface);
  border-color: var(--border-hi);
}
[data-theme="light"] .slot-code-input.pending-job {
  background: var(--surface-mute);
}
[data-theme="light"] .slot-row[data-status="awaiting_code"] .slot-code-input {
  background: color-mix(in oklch, var(--warn) 15%, var(--surface));
  border-color: var(--warn);
}
[data-theme="light"] .slot-textarea-wrap,
[data-theme="light"] .slot-rows,
[data-theme="light"] .slots-input,
[data-theme="light"] .slots-status {
  border-color: var(--border-hi);
}

/* 테마 토글 버튼 */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--easing);
}
.theme-toggle:hover { background: var(--surface-hi); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═════════════════════════ 기본 ═════════════════════════ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: var(--fs-md) / 1.5 var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.mono { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═════════════════════════ 버튼 ═════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-hi);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--easing),
              border-color var(--dur-fast) var(--easing);
}
.btn:hover:not(:disabled) { background: var(--border); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }

.btn-warn {
  background: var(--warn);
  color: var(--warn-fg);
  border-color: transparent;
}

.btn-err {
  background: transparent;
  border-color: var(--err);
  color: var(--err);
}
.btn-err:hover:not(:disabled) { background: var(--err); color: var(--err-fg); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-mute);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-hi); color: var(--text); }

.btn-sm { padding: 4px 8px; font-size: var(--fs-sm); }

/* ═════════════════════════ 입력 필드 ═════════════════════════ */

.field { display: flex; flex-direction: column; gap: 4px; }
.field-label {
  font-size: var(--fs-sm); color: var(--text-mute);
}
.field input,
.field select,
.field textarea {
  padding: 10px 12px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--easing);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.field input[aria-invalid="true"] { border-color: var(--err); }

/* ═════════════════════════ 인증(로그인) 페이지 ═════════════════════════ */

.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--sp-6);
}
.auth-card {
  width: 100%; max-width: 380px;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.auth-title { font-size: var(--fs-2xl); }
.auth-sub {
  margin: var(--sp-1) 0 var(--sp-6);
  color: var(--text-mute); font-size: var(--fs-sm);
}
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .btn { width: 100%; padding: 12px; }
.auth-error {
  margin: 0; min-height: 20px;
  color: var(--err); font-size: var(--fs-sm);
}
.auth-remember {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-mute); font-size: var(--fs-sm);
  cursor: pointer; user-select: none;
}
.auth-remember input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
}

/* ═════════════════════════ 대시보드 레이아웃 ═════════════════════════ */

.app-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: nowrap;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  /* overflow: hidden 제거 — 햄버거 드롭다운이 헤더 밖으로 나와야 함 */
  min-width: 0;
}
.app-title {
  font-size: var(--fs-xl); font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;                /* 나머지 요소들을 오른쪽으로 밀어냄 (배지 숨김에도 유지) */
}

.badges {
  display: flex; gap: var(--sp-2); flex-wrap: nowrap;
  align-items: center;
  cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--easing);
  flex-shrink: 1; min-width: 0;
}
.badges:hover { background: var(--surface-hi); }
.badges:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badges-toggle {
  display: inline-flex; align-items: center;
  font-size: 10px; color: var(--text-dim);
  margin-left: var(--sp-1);
  transition: transform var(--dur-fast) var(--easing);
}
.badges-toggle.expanded { color: var(--accent); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  white-space: nowrap;                                 /* 숫자/라벨 쪼개지지 않게 */
}
.badge strong { font-weight: 700; color: var(--text); }
.badge.warn strong { color: var(--warn); }
.badge.err strong { color: var(--err); }
.badge.ok strong { color: var(--ok); }
.badge.accent strong { color: var(--accent); }

.user-menu {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px; border-radius: var(--r-md);
  background: var(--surface-mute);
  font-size: var(--fs-sm);
  white-space: nowrap;                                 /* "관리자 (admin)" 쪼개지지 않게 */
  flex-shrink: 0;                                      /* 축소 방지 */
}
.user-menu > * { white-space: nowrap; }
.user-menu button {
  padding: 2px 10px;
  white-space: nowrap;                                 /* "로그아웃" 세로로 잘리지 않게 */
}

/* 중간 화면 (≤1100px): 요소 축소, 배지 간결 */
@media (max-width: 1100px) {
  .app-header { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .app-title { font-size: var(--fs-lg); }
  .badges { gap: 4px; padding: 1px 4px; }
  .badge { padding: 1px 6px; font-size: var(--fs-xs); }
  .mode-btn-sm { padding: 3px 8px; font-size: 11px; }
  .user-menu { gap: var(--sp-1); font-size: var(--fs-xs); padding: 2px 6px; }
  .theme-toggle { width: 26px; height: 26px; font-size: 13px; }
}

/* 좁은 화면 (≤820px): 非필수 요소 숨김 — 역할 라벨, 내 작업 배지 */
@media (max-width: 820px) {
  .user-menu > span:not(:first-child):not(:nth-child(2)) { display: none; }
  .badge.warn { display: none; }  /* 내 작업 배지 */
}

/* 매우 좁은 화면 (≤680px): 배지 숫자만, 아이콘만 */
@media (max-width: 680px) {
  .badges { display: none; }       /* 통계 배지 전체 숨김 — 클릭해서 stats 패널 볼 수 있음 */
  .app-title { font-size: var(--fs-md); }
  .mode-btn-sm { padding: 2px 6px; font-size: 10px; }
}

.app-main { padding: var(--sp-5); }

/* 통계 상세 패널 (헤더 배지 클릭 시 열림) */
.stats-panel {
  position: relative; z-index: 9;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.stats-table {
  width: 100%; max-width: 560px; margin-left: auto;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-sm);
}
.stats-table th, .stats-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.stats-table tbody tr:last-child td { border-bottom: none; }
.stats-table th {
  color: var(--text-mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: var(--fs-xs);
  background: var(--surface-mute);
}
.stats-table td.num, .stats-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 80px;       /* 숫자 컬럼 최소 폭 — 겹침 방지 */
}
.stats-table td.num.c-ok   { color: var(--ok); }
.stats-table td.num.c-err  { color: var(--err); }
.stats-table .row-hint {
  color: var(--text-dim); font-size: var(--fs-xs); font-weight: normal;
  margin-left: var(--sp-1);
}
/* 좁은 화면에서도 가독성 유지 */
@media (max-width: 600px) {
  .stats-panel { padding: var(--sp-3); }
  .stats-table { max-width: 100%; }
  .stats-table th, .stats-table td { padding: var(--sp-2); }
  .stats-table .row-hint { display: none; }
}

/* ═════════════════════════ 포커스 스트립 ═════════════════════════ */

.focus-strip {
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 2px dashed var(--warn);
  border-radius: var(--r-lg);
  min-height: 100px;
  transition: border-color var(--dur-med) var(--easing);
}
.focus-strip[data-empty="true"] {
  border-style: solid; border-color: var(--border);
  opacity: .7;
}
.focus-strip-title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--warn);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.focus-strip[data-empty="true"] .focus-strip-title { color: var(--text-mute); }

.focus-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
}
.focus-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 180px;
}
.focus-phone {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.focus-detail {
  color: var(--text-mute); font-size: var(--fs-sm);
}

/* ═════════════════════════ 6자리 OTP 입력 ═════════════════════════ */

.otp-box {
  display: inline-flex; gap: var(--sp-2);
}
.otp-box input {
  width: 48px; height: 60px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 700;
  background: var(--surface-mute);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--easing);
}
.otp-box input:focus {
  border-color: var(--warn);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--warn) 30%, transparent);
}

.focus-actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* P0-#3 대기열 미리보기 */
.focus-queue-count {
  color: var(--text-mute); font-size: var(--fs-sm);
  font-weight: 400; letter-spacing: normal; text-transform: none;
}
.focus-queue {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
}
.focus-queue-label {
  color: var(--text-mute); font-size: var(--fs-sm); font-weight: 600;
}
.focus-queue-chip {
  display: inline-flex; gap: var(--sp-2); align-items: center;
  padding: 4px 10px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-sm);
}
.focus-queue-chip .chip-pos {
  color: var(--warn); font-weight: 700;
}
.focus-queue-chip .chip-phone { color: var(--text); }
.focus-queue-chip .chip-name { color: var(--text-mute); }

/* P0-#4 verifying progress bar */
.card-progress.verifying { padding: var(--sp-2) 0; }
.vp-label {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ok); font-size: var(--fs-sm); margin-bottom: var(--sp-2);
}
.vp-percent {
  font-family: var(--font-mono); font-weight: 700;
}
.vp-bar {
  height: 6px;
  background: var(--surface-mute);
  border-radius: 3px;
  overflow: hidden;
}
.vp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), color-mix(in oklch, var(--ok) 60%, var(--accent)));
  transition: width 400ms var(--easing);
}

/* ═════════════════════════ 뷰 토글 (섹션 15) ═════════════════════════ */

.view-toggle {
  display: flex; gap: 2px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.vt-btn {
  padding: 6px 14px;
  background: transparent;
  color: var(--text-mute);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing);
}
.vt-btn:hover:not(.active) {
  background: var(--surface);
  color: var(--text);
}
.vt-btn.active {
  background: var(--surface-hi);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ═════════════════════════ 슬롯 뷰 ═════════════════════════ */

.slots-panel {
  display: flex; flex-direction: column; gap: var(--sp-2);   /* 16 → 8 */
}
[x-cloak] { display: none !important; }

.slots-toolbar {
  display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);                          /* 12/16 → 8/12 */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.slots-toolbar label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--text-mute); font-size: var(--fs-sm);
}
.slots-toolbar select {
  padding: 4px 8px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
}
.batch-counts { color: var(--text-mute); font-size: var(--fs-sm); }
.batch-counts strong { margin: 0 4px; }
.batch-counts .c-ok   { color: var(--ok); }
.batch-counts .c-warn { color: var(--warn); }
.batch-counts .c-acc  { color: var(--accent); }
.batch-counts .c-err  { color: var(--err); }

/* 2컬럼 — 좌(번호 입력) 우(인증코드+상태) 균형 */
.slots-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(320px, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) {
  .slots-grid { grid-template-columns: 1fr; }
}

/* 슬롯 행 좌우 분할 (인증코드 | 상태) — 한 행 안에서 반반 나눔
 * 높이 엄격 고정 — textarea 줄과 1:1 정렬 */
.slot-row-split {
  display: grid;
  grid-template-columns: 28px 1fr 1.5fr;  /* index · code · status */
  gap: var(--sp-2);
  align-items: center;
  height: var(--slot-row-h) !important;
  min-height: var(--slot-row-h) !important;
  max-height: var(--slot-row-h) !important;
  padding: 0 var(--sp-2);
  overflow: hidden;
}
.slot-half {
  display: flex; align-items: center;
  min-width: 0; overflow: hidden;
  height: 100%;
}
.slot-half-code {
  justify-content: flex-start;
}
.slot-half-code::after {
  content: ''; display: inline-block;
  width: 1px; height: 16px;
  background: var(--border);
  margin: 0 var(--sp-2) 0 auto;
}
.slot-code-placeholder {
  color: var(--text-dim); font-family: var(--font-mono);
  opacity: .4; margin-right: auto;
}

/* 인증코드 입력 — awaiting_code 아닌 슬롯 시각 구분 (가독성 우선, 불투명도 최소화) */
.slot-code-input.pending-job {
  border-color: var(--border);
  background: transparent;
  color: var(--text-mute);
}
.slot-code-input.pending-job:focus {
  color: var(--text);
  background: var(--surface);
  border-color: var(--warn);
}
/* awaiting_code 상태 슬롯은 노란 border + 은은한 배경으로 강조 */
.slot-row[data-status="awaiting_code"] .slot-code-input {
  border-color: var(--warn);
  background: color-mix(in oklch, var(--warn) 12%, var(--surface-mute));
}

.slots-input,
.slots-status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);                      /* 16 → 12 */
  display: flex; flex-direction: column; gap: var(--sp-2);   /* 내부 gap 도 12→8 */
}
/* 2컬럼 그리드 통일 — h3, 본문, 액션 버튼 모두 같은 Y 정렬 */
.slots-input,
.slots-status {
  display: grid;
  grid-template-rows: 28px 1fr 40px;   /* h3 28px · 본문 · 액션 40px */
  gap: var(--sp-3);
}
.slots-input h3,
.slots-status h3 {
  height: 28px;
  line-height: 28px;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* h3 옆 힌트는 별도 줄 아닌 inline 유지 */
.slot-hint-inline {
  display: inline-block;
  vertical-align: middle;
}
.slot-input-actions,
.slot-output-actions {
  height: 40px;
  align-items: center;
}

/* gutter + textarea 컴포지션
 * 넓은 화면 (>900px): 좌/우 1~10 행 수평 정렬 위해 높이 엄격 일치
 * 좁은 화면 (≤900px): 각자 편한 높이 (stacked, 정렬 불필요) */
:root {
  --slot-row-h: 36px;            /* 기본(좁은 화면) 슬롯 행 높이 */
  --slot-line-h: 36px;           /* 텍스트에어리어 줄 높이 (slot-row 와 동일) */
}
@media (min-width: 901px) {
  :root {
    --slot-row-h: 32px;          /* 넓은 화면 — compact, 정렬 최우선 */
    --slot-line-h: 32px;
  }
}
/* 슬롯 row 간격 — textarea 줄 사이엔 gap 없으므로 row 간도 0 */
.slot-rows > * + * {
  margin-top: 0;
}
.slot-textarea-wrap {
  display: flex; align-items: stretch;
  width: 100%;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--easing);
}
.slot-textarea-wrap:focus-within {
  border-color: var(--accent);
}
.slot-textarea-gutter {
  display: flex; flex-direction: column;
  padding: 0;                    /* 상하 padding 없앰 — 정확 정렬 */
  background: var(--bg);
  border-right: 1px solid var(--border);
  user-select: none;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  min-width: 36px;
  text-align: right;
}
.slot-textarea-gutter-line {
  height: var(--slot-line-h);
  line-height: var(--slot-line-h);
  padding: 0 var(--sp-2) 0 var(--sp-3);
  white-space: nowrap;
  flex-shrink: 0;                /* 줄 높이 축소 방지 */
}
.slot-textarea {
  flex: 1; min-width: 0;
  padding: 0 var(--sp-3);        /* 상하 padding 없앰 — 첫 줄 정확히 첫 gutter 에 정렬 */
  background: transparent;
  border: none;
  border-radius: 0;
  resize: none;
  tab-size: 2;
  font-size: var(--fs-sm);
  line-height: var(--slot-line-h);
  /* height 는 rows 속성 + line-height 로 자동 계산 */
}
.slot-textarea:focus {
  outline: none;
}

/* 오른쪽 슬롯 행: 고정 높이 — textarea 줄과 1:1 정렬 */
.slot-row {
  height: var(--slot-row-h);
  min-height: var(--slot-row-h);
  padding: 0 var(--sp-3);
  flex-wrap: nowrap;
  overflow: hidden;
}
.slot-rows {
  gap: 0;                        /* gap 제거 — textarea 줄 사이에도 gap 없으므로 일치 */
}

/* 힌트 텍스트 (h3 옆에 작게) */
.slot-hint-inline {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--sp-2);
}
.slot-input-actions,
.slot-output-actions {
  display: flex; gap: var(--sp-2); justify-content: flex-start;
  flex-wrap: wrap;
}
.action-group {
  display: flex; gap: var(--sp-2);
}
.auto-mode-hint {
  width: 100%;
  padding: 8px 12px;
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--text-mute);
  font-size: var(--fs-sm);
}

/* 햄버거 메뉴 — user-menu / theme / phone-setup / logout 통합 */
.hamburger-menu {
  position: relative;
  flex-shrink: 0;
}
.hamburger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 18px; line-height: 1;
}
.hamburger-btn:hover { background: var(--surface-hi); }
.hamburger-btn[aria-expanded="true"] {
  background: var(--surface-hi);
  border-color: var(--border-hi);
}
.hamburger-icon {
  font-size: 16px; font-weight: 700;
  letter-spacing: -1px;
}
.hamburger-panel {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-2);
  z-index: 1000;                  /* 헤더(10) 및 모든 콘텐츠 위에 */
}
.hamburger-user {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}
.hamburger-user-name {
  font-weight: 700;
  color: var(--text);
  font-size: var(--fs-sm);
}
.hamburger-user-role {
  color: var(--text-mute);
  font-size: var(--fs-xs);
}
.hamburger-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--easing);
}
.hamburger-item:hover { background: var(--surface-hi); }
.hamburger-item.danger { color: var(--err); }
.hamburger-item.danger:hover {
  background: color-mix(in oklch, var(--err) 15%, var(--surface-hi));
}
.hamburger-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-1) 0;
}

/* 폰 설정 링크 (admin 전용) — legacy — 햄버거로 통합 */
.phone-setup-link {
  padding: 4px 10px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-mute);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--easing);
}
.phone-setup-link:hover {
  background: var(--surface-hi);
  color: var(--text);
  border-color: var(--border-hi);
}

/* 자동/수동 모드 토글 — 헤더 내 컴팩트 버전 */
.header-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mode-btn-sm {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--easing);
}
.mode-btn-sm:hover { color: var(--text); }
.mode-btn-sm.active {
  background: var(--accent);
  color: var(--accent-fg);
}

/* SMS 게이트웨이 연결 상태 배지 — 섹션 25 */
.sms-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
}
.sms-status-badge {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  background: var(--surface-mute);
  color: var(--text-mute);
  user-select: none;
  transition: background var(--dur-fast) var(--easing),
              color var(--dur-fast) var(--easing),
              border-color var(--dur-fast) var(--easing);
}
.sms-status-badge:hover { border-color: var(--border-hi); }
.sms-status-badge.pending {
  background: var(--surface-mute);
  color: var(--text-mute);
}
.sms-status-badge.healthy {
  background: color-mix(in oklab, var(--ok) 18%, var(--surface));
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 40%, transparent);
}
.sms-status-badge.unhealthy {
  background: color-mix(in oklab, var(--err) 22%, var(--surface));
  color: var(--err);
  border-color: color-mix(in oklab, var(--err) 50%, transparent);
  animation: sms-pulse 1.8s ease-in-out infinite;
}
@keyframes sms-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--err) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--err) 0%, transparent); }
}

.sms-status-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  padding: var(--sp-3);
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 30;
  font-size: var(--fs-xs);
}
.sms-status-popover .row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 2px 0;
}
.sms-status-popover .k { color: var(--text-mute); }
.sms-status-popover .v { color: var(--text); font-weight: 600; }
.sms-status-popover .small-note {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  color: var(--warn);
  justify-content: flex-start;
}

.mode-warn-banner {
  width: 100%;
  margin-top: var(--sp-2);
  padding: 6px 12px;
  background: color-mix(in oklab, var(--warn) 18%, var(--surface));
  color: var(--warn);
  border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}

/* (구) 하단 모드 토글 바 — header 이동으로 사용 안 함 (legacy 호환) */
.mode-toggle-bar {
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.mode-btn {
  padding: 6px 14px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-mute);
  font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing);
}
.mode-btn:hover { background: var(--surface-hi); color: var(--text); }
.mode-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  font-weight: 700;
}
.mode-hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* 자동 모드 대기 표시 (슬롯 좌반) */
.slot-auto-wait {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 26px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}
.slot-auto-wait.waiting {
  color: var(--warn);
  font-weight: 600;
  animation: pulse-dim 2s ease-in-out infinite;
}
@keyframes pulse-dim {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .slot-auto-wait.waiting { animation: none; }
}

/* 딸깍2 스타일 전역 제어 바 — 타이트닝 */
.slot-global-bar {
  display: flex; gap: var(--sp-2); align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-1) var(--sp-3);          /* 8→4 vertical */
  margin-bottom: 0;                          /* 12 → 0 (slots-panel gap 이 담당) */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.slot-global-bar button:disabled {
  opacity: .4; cursor: not-allowed;
}
.batch-summary {
  margin-left: auto;
  color: var(--text-mute);
  font-size: var(--fs-sm);
}

/* 번호 저장 후 안내 */
.slot-hint-text {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  color: var(--text-mute);
  font-size: var(--fs-sm);
}
.slot-hint-text strong { color: var(--warn); }

/* 저장됨-시작 대기 중 슬롯 (pending phone) */
.slot-status-badge.c-warn {
  color: var(--warn);
}

/* 슬롯 상태 로그 (섹션 20) */
.slot-events {
  flex-basis: 100%;             /* 부모 flex 줄바꿈 → 전체 폭 차지 */
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-mute);
}
.slot-events-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: 2px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--easing);
}
.slot-events-summary:hover {
  background: var(--surface-hi);
}
.slot-events-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.slot-events-last {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dim);
}
.slot-events-caret {
  color: var(--text-dim);
  font-size: 10px; flex-shrink: 0;
}
.slot-events-full {
  max-height: 180px;
  overflow-y: auto;
  margin-top: var(--sp-1);
  padding: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.slot-events-item {
  padding: 2px 4px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.slot-events-empty {
  color: var(--text-dim); font-style: italic;
}

.slot-rows {
  display: flex; flex-direction: column; gap: var(--sp-1);
}

.slot-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-3);
  height: var(--slot-row-h);
  min-height: var(--slot-row-h);
  max-height: var(--slot-row-h);
  /* flat 레이아웃 — rounded border 없애서 textarea 줄과 시각적 gap 일치 */
  border: none;
  border-left: 3px solid var(--border-hi);
  border-radius: 0;
  background: var(--surface-mute);
  transition: border-color var(--dur-fast) var(--easing);
  overflow: hidden;
  flex-wrap: nowrap;
}
/* slot-rows 컨테이너 — textarea wrap 과 동일한 border 로 감쌈 (정렬 통일) */
.slot-rows {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 0;                              /* row 간 gap 없음 */
}
/* 행간 시각 구분 — 다크에서 더 눈에 띄게 */
.slot-rows > .slot-row:nth-child(even) {
  background: color-mix(in oklch, var(--surface-mute) 70%, var(--bg));
}
/* 세로 분리선 (인증코드 | 상태) 더 선명하게 */
.slot-half-code::after {
  background: var(--border-hi);
  height: 18px;
}
.slot-row[data-status="pending"]       { border-left-color: var(--border-hi); }
.slot-row[data-status="claimed"]       { border-left-color: var(--text-mute); }
.slot-row[data-status="browsing"]      { border-left-color: var(--accent); }
.slot-row[data-status="awaiting_code"] {
  border-left-color: var(--warn);
  background: color-mix(in oklch, var(--warn) 8%, var(--surface-mute));
}
.slot-row[data-status="verifying"]     { border-left-color: var(--ok); }
.slot-row[data-status="completed"]     { border-left-color: var(--ok); opacity: .75; }
.slot-row[data-status="failed"]        { border-left-color: var(--err); }
.slot-row[data-status="dead"]          { border-left-color: var(--text-dim); opacity: .5; }
.slot-row[data-status="empty"]         { opacity: .4; }

.slot-index {
  min-width: 32px; color: var(--text-dim); text-align: right;
  font-size: var(--fs-sm);
}
.slot-empty {
  color: var(--text-mute);
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  opacity: .85;
}

.slot-content {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto;
  flex-wrap: wrap;
}
.slot-phone { font-size: var(--fs-md); }
.slot-status-badge {
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-hi); color: var(--text-mute);
}
.slot-row[data-status="awaiting_code"] .slot-status-badge {
  background: var(--warn); color: var(--warn-fg);
}
.slot-row[data-status="verifying"] .slot-status-badge {
  background: var(--ok); color: var(--ok-fg); opacity: .7;
}
.slot-row[data-status="completed"] .slot-status-badge {
  background: var(--ok); color: var(--ok-fg);
}
.slot-row[data-status="failed"] .slot-status-badge,
.slot-row[data-status="dead"] .slot-status-badge {
  background: var(--err); color: var(--err-fg);
}
.slot-row[data-status="browsing"] .slot-status-badge {
  background: var(--accent); color: var(--accent-fg);
}

/* (legacy 6-box OTP — 아직 남아있으면 호환) */
.slot-otp { display: inline-flex; gap: 4px; margin-left: auto; }
.slot-otp input {
  width: 32px; height: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  background: var(--surface-mute);
  border: 2px solid var(--border);
  border-radius: 4px;
}
.slot-otp input:focus {
  border-color: var(--warn);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 30%, transparent);
}

/* 단일 인증코드 입력 — 반분할 안에 자동 폭 맞춤 */
.slot-code-input {
  width: 100%; max-width: 140px; height: 26px;
  padding: 0 var(--sp-2);
  background: color-mix(in oklch, var(--bg) 60%, var(--surface-mute));
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-align: center;
}
.slot-code-input::placeholder {
  color: var(--text-mute);
  font-weight: normal;
  letter-spacing: normal;
  font-size: 11px;
  opacity: 1;
}
.slot-code-input:focus {
  outline: none;
  border-color: var(--warn);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--warn) 40%, transparent);
  background: var(--surface);
}
.slot-code-input::placeholder {
  color: var(--text-dim); font-weight: normal; letter-spacing: 0;
}
.slot-code-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 30%, transparent);
}

.slot-vp {
  flex: 1 1 auto; max-width: 200px; margin-left: auto;
}
.slot-vp-bar {
  height: 4px; background: var(--surface-hi); border-radius: 2px; overflow: hidden;
}
.slot-vp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), color-mix(in oklch, var(--ok) 60%, var(--accent)));
  transition: width 400ms var(--easing);
}

.slot-account {
  margin-left: auto; color: var(--ok);
  font-size: var(--fs-sm); font-weight: 600;
}

.slot-inline-actions {
  display: inline-flex; gap: 4px; margin-left: auto;
}
.slot-inline-actions .btn-sm { padding: 2px 8px; font-size: 13px; }

/* 입력 경로 배지 (자동 🤖 / 수동 👤) */
.source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs); font-weight: 600;
  border-radius: 999px;
  background: var(--surface-hi);
  color: var(--text-mute);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.slot-hint {
  color: var(--text-mute); font-size: var(--fs-sm);
  margin-left: 6px;
}

/* P0-#1 중복 감지 시 기존 카드 강조 */
.card-highlight {
  animation: highlight-pulse 2s var(--easing);
}
@keyframes highlight-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--warn) 60%, transparent); }
  50%  { box-shadow: 0 0 0 8px color-mix(in oklch, var(--warn) 40%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--warn) 0%, transparent); }
}
.kbd {
  display: inline-block; padding: 1px 6px;
  background: var(--surface-mute); border: 1px solid var(--border);
  border-radius: 4px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-mute);
}

/* ═════════════════════════ 번호 추가 폼 ═════════════════════════ */

.add-bar {
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}
.add-bar input[type="text"] {
  flex: 1 1 auto;
  padding: 10px 12px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}
.add-bar-hint {
  color: var(--text-mute); font-size: var(--fs-sm);
}

/* ═════════════════════════ 필터 바 ═════════════════════════ */

.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.chip {
  padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.chip.active {
  background: var(--accent); color: var(--accent-fg);
  border-color: transparent;
}
.chip:hover:not(.active) { border-color: var(--border-hi); color: var(--text); }

.filters input[type="search"] {
  margin-left: auto;
  padding: 6px 10px;
  min-width: 200px;
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* ═════════════════════════ 카드 그리드 ═════════════════════════ */

.cards {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (min-width: 1440px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--easing),
              border-color var(--dur-fast) var(--easing);
}
.card:hover { transform: translateY(-1px); border-color: var(--accent); }

.card-header {
  display: flex; align-items: center; gap: var(--sp-2);
}
.card-id {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-mute);
}
.card-status-badge {
  margin-left: auto;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}

/* 상태별 색 */
.card[data-status="pending"]        { border-left-color: var(--border-hi); }
.card[data-status="claimed"]        { border-left-color: var(--text-mute); }
.card[data-status="browsing"]       { border-left-color: var(--accent); }
.card[data-status="awaiting_code"]  {
  border-left-color: var(--warn);
  animation: pulse 1.5s ease-in-out infinite;
}
.card[data-status="verifying"]      { border-left-color: var(--ok); }
.card[data-status="completed"]      {
  border-left-color: var(--ok);
  opacity: .8;
}
.card[data-status="failed"]         { border-left-color: var(--err); }
.card[data-status="dead"]           { border-left-color: var(--text-dim); opacity: .6; }

.card[data-status="awaiting_code"] .card-status-badge { background: var(--warn); color: var(--warn-fg); }
.card[data-status="browsing"]      .card-status-badge { background: var(--accent); color: var(--accent-fg); }
.card[data-status="completed"]     .card-status-badge { background: var(--ok); color: var(--ok-fg); }
.card[data-status="failed"]        .card-status-badge { background: var(--err); color: var(--err-fg); }
.card[data-status="verifying"]     .card-status-badge { background: var(--ok); color: var(--ok-fg); opacity: .7; }
.card[data-status="pending"]       .card-status-badge,
.card[data-status="claimed"]       .card-status-badge,
.card[data-status="dead"]          .card-status-badge {
  background: var(--surface-hi); color: var(--text-mute);
}

@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%      { box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 40%, transparent), var(--shadow-card); }
}

.card-phone {
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600;
}
.card-account {
  color: var(--text-mute); font-size: var(--fs-sm);
}
.card-account .naver-id { font-family: var(--font-mono); }

.card-progress {
  color: var(--text-mute); font-size: var(--fs-sm);
  padding: var(--sp-2) 0;
}

.card-actions {
  display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2);
}

.card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-dim);
}

.card-fail-reason {
  padding: var(--sp-2);
  background: color-mix(in oklch, var(--err) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--err) 40%, transparent);
  border-radius: var(--r-sm);
  color: var(--err);
  font-size: var(--fs-sm);
}

.empty-state {
  text-align: center; padding: var(--sp-10);
  color: var(--text-mute);
}

/* ═════════════════════════ 토스트 ═════════════════════════ */

/* 토스트 — 사용자 요청으로 전체 숨김 (에러 포함) */
.toasts {
  display: none;
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  flex-direction: column-reverse; gap: var(--sp-2);
  pointer-events: none;
  max-width: calc(100vw - var(--sp-8));
  align-items: center;
}
.toast {
  min-width: 260px; max-width: 480px;
  padding: 10px 16px;
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  animation: toast-in var(--dur-med) var(--easing),
             toast-out 400ms var(--easing) 3.5s forwards;  /* 3.5s 부터 페이드 → 4s JS 제거 */
  font-size: var(--fs-sm);
  pointer-events: auto;
}
.toast.warn { border-left-color: var(--warn); }
.toast.err  { border-left-color: var(--err); }
.toast.ok   { border-left-color: var(--ok); }

@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(-10px); opacity: 0; }
}

/* 최대 3개까지만 가시 (older 는 숨김) */
.toasts > .toast:nth-last-child(n+4) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ═════════════════════════ 연결 상태 표시 ═════════════════════════ */

.conn-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
  margin-right: 6px;
  vertical-align: middle;
}
.conn-dot.live { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.conn-dot.dead { background: var(--err); }

/* ═════════════════════════ 단축키 오버레이 ═════════════════════════ */

.shortcut-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / .6);
  display: grid; place-items: center;
}
.shortcut-card {
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-lg);
  min-width: 320px;
}
.shortcut-card h2 { margin-bottom: var(--sp-4); }
.shortcut-card dl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.shortcut-card dt { text-align: right; }
.shortcut-card dd { margin: 0; color: var(--text-mute); }