:root {
  /* Apple iPadOS / macOS Pro Dark Palette (눈이 편안한 매트 다크 톤) */
  --bg-canvas: #0f1115;
  --bg-card: #1c1e24;
  --bg-grouped-row: #242730;
  --bg-grouped-hover: #2d313d;
  --bg-input: #14161b;
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Apple System Accents */
  --apple-blue: #0a84ff;
  --apple-blue-hover: #0070e0;
  --apple-indigo: #5e5ce6;
  --apple-green: #30d158;
  --apple-red: #ff453a;
  --apple-orange: #ff9f0a;
  --font-scale: 1;
}

body.theme-daylight {
  /* Apple iPadOS Pure Light Palette */
  --bg-canvas: #f5f5f7;
  --bg-card: #ffffff;
  --bg-grouped-row: #f9f9fb;
  --bg-grouped-hover: #efeff4;
  --bg-input: #f2f2f7;
  --text-primary: #1d1d1f;
  --text-secondary: #515154;
  --text-muted: #86868b;
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.15);
  --apple-blue: #0071e3;
  --apple-blue-hover: #005bb5;
  --apple-indigo: #5856d6;
  --apple-green: #28cd41;
  --apple-red: #ff3b30;
}

body.theme-dark-blue {
  --bg-canvas: #0b101b;
  --bg-card: #151e2e;
  --bg-grouped-row: #1d293e;
  --bg-grouped-hover: #263550;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   상단 Apple 글로벌 내비게이션 바 & Segmented Control
   ============================================================================ */
.apple-navbar {
  min-height: 74px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--hairline);
  padding: 10px clamp(16px, 2vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-text h1 {
  font-size: calc(19px * var(--font-scale));
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.brand-text p {
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
}

.license-pill {
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  color: var(--apple-green);
  background: rgba(48, 209, 88, 0.12);
  padding: 2px 8px;
  border-radius: 99px;
}

/* Apple Segmented Step Bar */
.apple-segmented-steps {
  background: var(--bg-canvas);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 4px;
}

.seg-step-btn {
  min-height: 48px;
  padding: 6px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: all 0.18s ease;
}

.seg-step-btn:hover {
  color: var(--text-primary);
}

.seg-step-btn.active {
  background: var(--apple-blue);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(10, 132, 255, 0.3);
}

.seg-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seg-step-btn.active .seg-num {
  background: #ffffff;
  color: var(--apple-blue);
}

.seg-label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.seg-label strong {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
}

.seg-label span {
  font-size: calc(11px * var(--font-scale));
  opacity: 0.8;
}

/* 우측 유틸리티 버튼 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.apple-pill-btn {
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-grouped-row);
  color: var(--text-primary);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.15s ease;
}

.apple-pill-btn:hover {
  background: var(--bg-grouped-hover);
}

.apple-pill-btn.voice-btn {
  background: rgba(255, 69, 58, 0.14);
  border-color: rgba(255, 69, 58, 0.35);
  color: #ff6961;
}

.apple-pill-btn.voice-btn.listening {
  background: var(--apple-red);
  color: #ffffff;
}

.credit-plus {
  background: var(--apple-blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.green {
  background: var(--apple-green);
}

.status-dot.amber {
  background: var(--apple-orange);
}

.icon-svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ============================================================================
   메인 스테이지 & Apple Card 컨테이너
   ============================================================================ */
.apple-stage {
  flex: 1;
  padding: clamp(16px, 1.8vw, 28px);
  overflow-y: auto;
}

body.mode-wizard .step-view {
  display: none;
  max-width: 1480px;
  margin: 0 auto;
}

body.mode-wizard .step-view.active-step {
  display: block;
}

body.mode-split .apple-segmented-steps {
  display: none;
}

body.mode-split .step-view {
  display: block !important;
  max-width: 1480px;
  margin: 0 auto 24px auto;
}

.apple-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.apple-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(18px, 1.8vw, 26px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ============================================================================
   버튼 시스템 (정보 텍스트와 100% 시각적으로 구분되는 실제 버튼)
   ============================================================================ */
.apple-btn {
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.apple-btn.subtle {
  background: var(--bg-grouped-row);
  color: var(--text-primary);
  border: 1px solid var(--hairline-strong);
}

.apple-btn.subtle:hover {
  background: var(--bg-grouped-hover);
}

.apple-btn.danger-text {
  color: var(--apple-red);
}

.apple-btn.blue-pill {
  background: rgba(10, 132, 255, 0.16);
  color: var(--apple-blue);
  border: 1px solid rgba(10, 132, 255, 0.3);
}

.apple-btn.blue-pill:hover {
  background: var(--apple-blue);
  color: #ffffff;
}

.apple-btn.indigo-pill {
  background: rgba(94, 92, 230, 0.18);
  color: #8e8ce8;
  border: 1px solid rgba(94, 92, 230, 0.35);
}

.apple-btn.indigo-pill:hover {
  background: var(--apple-indigo);
  color: #ffffff;
}

.apple-btn.secondary-large {
  min-height: 50px;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--bg-grouped-row);
  color: var(--text-primary);
  border: 1px solid var(--hairline-strong);
  font-size: calc(15px * var(--font-scale));
}

.apple-btn.blue-large {
  min-height: 50px;
  padding: 10px 22px;
  border-radius: 12px;
  background: var(--apple-blue);
  color: #ffffff;
  font-size: calc(15px * var(--font-scale));
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.25);
}

.apple-btn.blue-large:hover {
  background: var(--apple-blue-hover);
}

.apple-btn.indigo-prominent {
  min-height: 52px;
  padding: 10px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  color: #ffffff;
  font-size: calc(16px * var(--font-scale));
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(94, 92, 230, 0.35);
}

.apple-btn.indigo-prominent:hover {
  filter: brightness(1.08);
}

/* 새롭게 디자인된 프리미엄 AI 진단 대표 버튼 (Apple Intelligence 감성) */
.apple-btn.ai-hero-btn {
  min-height: 50px;
  padding: 10px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #2563eb 100%);
  color: #ffffff;
  font-size: calc(16px * var(--font-scale));
  font-weight: 800;
  letter-spacing: -0.2px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.apple-btn.ai-hero-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.apple-btn.ai-hero-btn:active {
  transform: translateY(0);
}

.ai-sparkle-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.ai-hero-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 99px;
  margin-left: 2px;
}

.apple-btn.blue-soft-btn {
  min-height: 50px;
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--apple-blue);
  color: #ffffff;
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.24);
}

.apple-btn.blue-soft-btn:hover {
  background: var(--apple-blue-hover);
}

/* 각 코드 행 우측의 간결하고 예쁜 [✦ AI 진단] 버튼 */
.apple-btn.ai-row-btn {
  min-height: 40px;
  padding: 7px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.14) 0%, rgba(124, 58, 237, 0.16) 100%);
  color: #5b21b6;
  border: 1px solid rgba(124, 58, 237, 0.32);
  font-weight: 800;
  font-size: calc(14px * var(--font-scale));
}

body:not(.theme-daylight) .apple-btn.ai-row-btn {
  color: #c4b5fd;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(139, 92, 246, 0.25) 100%);
  border-color: rgba(167, 139, 250, 0.4);
}

.apple-btn.ai-row-btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff !important;
  border-color: transparent;
}

/* ============================================================================
   iOS 스타일 물리 토글 스위치 (켜짐 / 꺼짐 명확 구분)
   ============================================================================ */
.ios-switch-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-grouped-row);
  padding: 6px 14px;
  border-radius: 99px;
  cursor: pointer;
  border: 1px solid var(--hairline);
}

.switch-label {
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  color: var(--text-primary);
}

.ios-switch {
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: #48484a;
  border: none;
  padding: 2px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}

.ios-switch.on {
  background: var(--apple-green);
}

.switch-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  display: block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.ios-switch.on .switch-knob {
  transform: translateX(18px);
}

.switch-state-text {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--text-muted);
  min-width: 28px;
}

.switch-state-text.on {
  color: var(--apple-green);
}

/* ============================================================================
   1단계: 스캐너 바 & 깔끔한 목록형(Inset Grouped List) 고장코드
   ============================================================================ */
.scanner-bar-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scanner-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.scanner-tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.scanner-seg-tab {
  min-height: 48px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg-grouped-row);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  transition: all 0.15s ease;
}

.scanner-seg-tab:hover {
  background: var(--bg-grouped-hover);
  color: var(--text-primary);
}

.scanner-seg-tab.active {
  background: rgba(10, 132, 255, 0.14);
  border-color: var(--apple-blue);
  color: var(--text-primary);
}

.scanner-switches-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 버튼이 아닌 순수 정보 텍스트 (테두리 없음) */
.scanner-quiet-info {
  font-size: calc(13px * var(--font-scale));
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.dot-sep {
  color: var(--text-muted);
}

/* 리스트 상단 고정 마스터 액션 바 (리스트가 길어져도 항상 상단에 노출) */
.list-group-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-master-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.apple-card.top-master-action-bar {
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
  border-bottom: 1px solid var(--hairline);
}

.top-bar-vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.section-eyebrow {
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  color: var(--apple-blue);
  letter-spacing: 0.2px;
}

.top-bar-vehicle-info h2 {
  font-size: calc(21px * var(--font-scale));
  font-weight: 800;
  color: var(--text-primary);
}

.action-helper-caption {
  font-size: calc(14px * var(--font-scale));
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

.top-bar-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Apple Inset Grouped List (목록형 고장코드 행) */
.apple-inset-list {
  background: var(--bg-grouped-row);
  border-radius: 14px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dtc-list-row {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background 0.14s ease;
}

.dtc-list-row:last-child {
  border-bottom: none;
}

.dtc-list-row:hover {
  background: var(--bg-grouped-hover);
}

.dtc-list-row.selected-row {
  background: rgba(10, 132, 255, 0.1);
}

.dtc-row-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 260px;
}

.row-check-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
  color: transparent;
  flex-shrink: 0;
}

.dtc-list-row.selected-row .row-check-circle {
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: #ffffff;
}

.dtc-badge {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: calc(18px * var(--font-scale));
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(255, 69, 58, 0.16);
  color: #ff6961;
  min-width: 88px;
  text-align: center;
  flex-shrink: 0;
}

.dtc-badge.pending {
  background: rgba(255, 159, 10, 0.16);
  color: #ffb340;
}

.dtc-row-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dtc-ko-title {
  font-size: calc(17px * var(--font-scale));
  font-weight: 700;
  color: var(--text-primary);
}

.dtc-en-sub {
  font-size: calc(13px * var(--font-scale));
  color: var(--text-secondary);
}

.dtc-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* 하단 마스터 액션 독(Dock) */
.master-action-dock {
  background: var(--bg-canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dock-left-hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dock-left-hint strong {
  font-size: 15px;
  color: var(--text-primary);
}

.dock-left-hint span {
  font-size: 13px;
  color: var(--text-secondary);
}

.dock-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================================
   2단계: 차량 · 고장코드 · 증상 선택 (깔끔한 Apple 그룹 카드)
   ============================================================================ */
.active-spec-bar {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.spec-bar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-bar-left strong {
  font-size: calc(19px * var(--font-scale));
  font-weight: 800;
}

.spec-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.step2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 18px;
}

.card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 12px;
}

.card-section-header h3 {
  font-size: calc(19px * var(--font-scale));
  font-weight: 800;
}

.group-label {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  color: var(--text-secondary);
  margin: 14px 0 8px 0;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 8px;
}

.apple-choice-card {
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--hairline);
  background: var(--bg-grouped-row);
  color: var(--text-primary);
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.14s ease;
}

.apple-choice-card:hover {
  background: var(--bg-grouped-hover);
}

.apple-choice-card.selected {
  background: rgba(10, 132, 255, 0.15);
  border-color: var(--apple-blue);
  color: var(--apple-blue);
}

.pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.apple-chip {
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--hairline);
  background: var(--bg-grouped-row);
  color: var(--text-primary);
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.apple-chip:hover {
  background: var(--bg-grouped-hover);
}

.apple-chip.selected {
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: #ffffff;
  font-weight: 700;
}

/* 고장코드 입력 및 키패드 */
.dtc-input-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dtc-field-box {
  background: var(--bg-input);
  border: 1.5px solid var(--apple-blue);
  border-radius: 12px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dtc-field-box label {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--text-secondary);
}

.dtc-code-input {
  width: 125px;
  height: 44px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--apple-blue);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: calc(24px * var(--font-scale));
  font-weight: 800;
  text-transform: uppercase;
}

.apple-text-input {
  flex: 1;
  min-width: 200px;
  min-height: 50px;
  background: var(--bg-input);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 0 14px;
  font-size: calc(15px * var(--font-scale));
}

.apple-keypad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-input);
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
}

.keypad-prefixes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.keypad-numbers {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

.key-pad-btn {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--bg-grouped-row);
  color: var(--text-primary);
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.key-pad-btn span {
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  font-weight: 500;
}

.key-pad-btn.prefix {
  background: rgba(10, 132, 255, 0.14);
  color: var(--apple-blue);
}

.key-pad-btn:active {
  background: var(--apple-blue);
  color: #ffffff;
}

/* 증상 목록형 선택 */
.symptom-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.bottom-nav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
}

/* ============================================================================
   3단계: AutoCore AI 점검 리포트 & 목록형(List View) 해외 수리 사례
   ============================================================================ */
.ai-report-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-card-header,
.cases-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.ai-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-badge-pill {
  background: linear-gradient(135deg, #0a84ff, #5e5ce6);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
}

.ai-header-left h3,
.cases-card-header h3 {
  font-size: clamp(17px, calc(1.2vw * var(--font-scale)), 21px);
  font-weight: 800;
}

.ai-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cache-status-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-green);
}

.ai-report-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-summary-banner {
  background: var(--bg-grouped-row);
  border-radius: 14px;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
}

.ai-summary-banner h4 {
  font-size: calc(20px * var(--font-scale));
  font-weight: 800;
  margin-bottom: 8px;
}

.ai-chain-story {
  margin-top: 10px;
  padding: 14px 18px;
  background: rgba(94, 92, 230, 0.12);
  border-left: 4px solid var(--apple-indigo);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: calc(16px * var(--font-scale));
  font-weight: 600;
  line-height: 1.65;
}

/* AI 원인 목록형 행 */
.ai-causes-list {
  background: var(--bg-grouped-row);
  border-radius: 14px;
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.ai-cause-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-cause-row:last-child {
  border-bottom: none;
}

.cause-prob-pill {
  background: rgba(10, 132, 255, 0.16);
  color: var(--apple-blue);
  font-weight: 800;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.ai-two-subcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.ai-subcard {
  background: var(--bg-grouped-row);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-subcard h5 {
  font-size: 14px;
  font-weight: 800;
  color: var(--apple-blue);
}

/* 섹션 B: 밀접도(%) 순위별 해외 수리 사례 목록형 (List View) */
.auto-ko-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-grouped-row);
  padding: 5px 12px;
  border-radius: 99px;
}

.apple-cases-list {
  background: var(--bg-grouped-row);
  border-radius: 14px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.case-list-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  transition: background 0.14s ease;
}

.case-list-row:last-child {
  border-bottom: none;
}

.case-list-row:hover {
  background: var(--bg-grouped-hover);
}

.case-row-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 280px;
}

.match-percent-badge {
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.14);
  color: var(--apple-blue);
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex-shrink: 0;
}

.match-percent-badge strong {
  font-size: 18px;
  font-weight: 800;
}

.match-percent-badge span {
  font-size: 11px;
  font-weight: 600;
}

.case-row-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.case-ko-title {
  font-size: clamp(15px, calc(1.02vw * var(--font-scale)), 18px);
  font-weight: 700;
  color: var(--text-primary);
}

.case-en-query {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.case-row-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================================
   모달 공통 (Apple Sheet 스타일)
   ============================================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.apple-modal {
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  background: var(--bg-card);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  font-size: 19px;
  font-weight: 800;
}

.modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.translator-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.apple-textarea {
  flex: 1;
  min-width: 240px;
  background: var(--bg-input);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 16px;
}

.translator-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.translator-result-box {
  background: var(--bg-grouped-row);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--hairline);
}

.setting-row {
  background: var(--bg-grouped-row);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.setting-info h4 {
  font-size: 15px;
  font-weight: 700;
}

.setting-info p {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================================
   상용 AI 정밀 분석 진행 로딩 모달 & 크레딧 차감 영수증 배너 & 상관관계 박스
   ============================================================================ */
.apple-loading-modal {
  width: 100%;
  max-width: 640px;
  background: var(--bg-card);
  border: 1.5px solid var(--apple-indigo);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}

.loading-top-pill {
  align-self: flex-start;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 99px;
  letter-spacing: 0.3px;
}

.apple-loading-modal h2 {
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 800;
  color: var(--text-primary);
}

.loading-notice-text {
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--bg-grouped-row);
  border-left: 3px solid var(--apple-blue);
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.55;
}

.loading-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.loading-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--apple-blue);
}

.loading-progress-track {
  width: 100%;
  height: 12px;
  background: var(--bg-grouped-row);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
}

.loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a84ff 0%, #5e5ce6 50%, #30d158 100%);
  border-radius: 99px;
  transition: width 0.35s ease;
}

.loading-steps-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.loading-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.loading-step-row.active {
  color: var(--text-primary);
  font-weight: 700;
}

.loading-step-row.done {
  color: var(--apple-green);
}

.step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.loading-step-row.active .step-dot {
  background: var(--apple-blue);
  box-shadow: 0 0 8px var(--apple-blue);
}

.loading-step-row.done .step-dot {
  background: var(--apple-green);
}

/* 크레딧 차감 완료 알림 배너 */
.credit-deduction-banner {
  background: rgba(48, 209, 88, 0.12);
  border: 1.5px solid var(--apple-green);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.deduction-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.deduction-pill {
  background: var(--apple-green);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
}

/* 선행 원인 vs 파생 코드 상관관계 플로우 카드 */
.correlation-flow-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.corr-node {
  background: var(--bg-card);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.corr-node.root-node {
  border-color: var(--apple-red);
  background: rgba(255, 69, 58, 0.08);
}

.corr-node.cascade-node {
  border-color: var(--apple-blue);
  background: rgba(10, 132, 255, 0.08);
}

.corr-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
}

.corr-node.root-node .corr-tag {
  color: var(--apple-red);
}

.corr-node.cascade-node .corr-tag {
  color: var(--apple-blue);
}

.inspection-plan-box {
  background: var(--bg-grouped-row);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inspection-plan-box h5 {
  font-size: 15px;
  font-weight: 800;
  color: var(--apple-indigo);
  margin-bottom: 2px;
}

.plan-step-item {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--hairline);
}

@keyframes creditPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.35); }
  100% { transform: scale(1); }
}

.credit-pulse-anim {
  animation: creditPulse 0.6s ease;
}

/* ============================================================================
   상단 [말하기 · 직접 검색] 스튜디오 버튼 & 음성 단어 칩 편집 모달
   ============================================================================ */
.apple-pill-btn.voice-studio-pill {
  background: linear-gradient(135deg, #ff3b30 0%, #ff6b22 100%);
  border: none;
  color: #ffffff;
  font-weight: 800;
  padding: 7px 16px;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.apple-pill-btn.voice-studio-pill:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.studio-modal-wide {
  max-width: 1140px;
}

.voice-studio-input-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.apple-btn.voice-record-hero {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff3b30 0%, #e11d48 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.28);
}

.apple-btn.voice-record-hero.listening {
  animation: creditPulse 1s infinite;
}

.studio-main-input {
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
}

.studio-preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.studio-tokens-card,
.studio-combos-card {
  background: var(--bg-grouped-row);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tokens-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tokens-header-row strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.tokens-header-row span {
  font-size: 13px;
  color: var(--text-secondary);
}

.studio-token-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.word-token-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--apple-blue);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.14s ease;
}

.word-token-chip.inactive-token {
  opacity: 0.45;
  border-color: var(--hairline-strong);
  text-decoration: line-through;
}

.token-texts {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.token-ko-word {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.token-en-word {
  font-size: 12px;
  font-weight: 600;
  color: var(--apple-blue);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.token-del-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 69, 58, 0.15);
  color: var(--apple-red);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.token-del-btn:hover {
  background: var(--apple-red);
  color: #ffffff;
}

/* ============================================================================
   유튜브 & 해외 수리사례 100% 한글 번역 통합 뷰어 모달 (한글/영문 전환 스위치)
   ============================================================================ */
.viewer-modal-xlarge {
  max-width: 1240px;
  height: 88vh;
}

.viewer-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bg-card);
}

.viewer-title-cluster h2 {
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 800;
}

.viewer-lang-switcher {
  background: var(--bg-grouped-row);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-seg-btn {
  min-height: 38px;
  padding: 6px 16px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-seg-btn.active {
  background: var(--apple-blue);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}

.viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-subtabs-bar {
  padding: 10px 24px;
  background: var(--bg-grouped-row);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  gap: 10px;
}

.viewer-tab-btn {
  min-height: 40px;
  padding: 6px 18px;
  border-radius: 10px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.viewer-tab-btn.active {
  border-color: var(--apple-blue);
  color: var(--apple-blue);
  background: rgba(10, 132, 255, 0.1);
}

.viewer-modal-body {
  flex: 1;
  overflow-y: auto;
}

.viewer-video-player-box {
  background: #000000;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--hairline-strong);
}

.viewer-results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.translated-video-row {
  background: var(--bg-grouped-row);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  transition: background 0.15s ease;
}

.translated-video-row:hover {
  background: var(--bg-grouped-hover);
}

.video-thumb-wrap {
  width: 168px;
  height: 94px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #111;
  cursor: pointer;
}

.video-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration-pill {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.video-info-col {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.video-ko-main-title {
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 800;
  color: var(--text-primary);
}

.video-en-sub-title {
  font-size: 13px;
  color: var(--apple-blue);
  font-weight: 600;
}

.video-meta-line {
  font-size: 12px;
  color: var(--text-secondary);
}

.video-snippet-line {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============================================================================
   3단계 서브 탭 (AI 진단 / 통합 사례 리스트 / 내 수리사례 보관함) & 열람함 배지 & 인라인 영상 플레이어
   ============================================================================ */
.credit-low-badge {
  background: var(--apple-orange);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
}

.verified-match-alert-bar {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14) 0%, rgba(16, 185, 129, 0.12) 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 14px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.verified-alert-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  color: var(--text-primary);
}

.verified-star-pill {
  background: #f59e0b;
  color: #ffffff;
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.step3-subtabs-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.step3-subtab-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 14px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  transition: all 0.16s ease;
}

.step3-subtab-btn:hover {
  background: var(--bg-grouped-hover);
}

.step3-subtab-btn.active {
  border-color: var(--apple-blue);
  background: rgba(10, 132, 255, 0.08);
  box-shadow: 0 4px 16px rgba(10, 132, 255, 0.16);
}

.subtab-step-pill {
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  color: var(--apple-blue);
  background: rgba(10, 132, 255, 0.14);
  padding: 2px 8px;
  border-radius: 6px;
}

.step3-subtab-btn.active .subtab-step-pill {
  background: var(--apple-blue);
  color: #ffffff;
}

.step3-subtab-btn strong {
  font-size: calc(17px * var(--font-scale));
  font-weight: 800;
  color: var(--text-primary);
}

.subtab-desc {
  font-size: calc(13px * var(--font-scale));
  color: var(--text-secondary);
  font-weight: 600;
}

.cases-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.case-filter-btn {
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 11px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg-grouped-row);
  color: var(--text-secondary);
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.case-filter-btn.active {
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.25);
}

/* 열람함 (본 자료) vs 새 자료 구분 배지 */
.viewed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
}

.viewed-badge.read {
  background: rgba(48, 209, 88, 0.16);
  color: #16a34a;
  border: 1px solid rgba(48, 209, 88, 0.4);
}

body:not(.theme-daylight) .viewed-badge.read {
  color: #4ade80;
}

.viewed-badge.unread {
  background: rgba(10, 132, 255, 0.12);
  color: var(--apple-blue);
}

.case-row-viewed {
  background: rgba(120, 120, 128, 0.05);
}

/* 클릭한 영상 행 바로 아래에 열리는 인라인 유튜브 플레이어 박스 */
.inline-video-player-drawer {
  width: 100%;
  margin-top: 12px;
  background: #0d1017;
  border: 2px solid var(--apple-blue);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.inline-player-topbar {
  padding: 10px 16px;
  background: #161b26;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* [★ 이 사례로 해결됨] 저장 버튼 */
.apple-btn.verified-save-btn {
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-weight: 800;
  font-size: 13px;
}

body:not(.theme-daylight) .apple-btn.verified-save-btn {
  color: #fbbf24;
}

.apple-btn.verified-save-btn:hover {
  background: #f59e0b;
  color: #ffffff !important;
}

.apple-btn.verified-save-btn.saved {
  background: var(--apple-green);
  color: #ffffff !important;
  border-color: var(--apple-green);
}

/* ============================================================================
   상단 고정 글자 크기 즉시 조절 컨트롤 & STEP 3-1 큰 글씨 스케일링
   ============================================================================ */
.header-font-sizer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-grouped-row);
  padding: 4px 6px;
  border-radius: 99px;
  border: 1.5px solid var(--hairline-strong);
}

.font-sizer-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  padding: 0 8px;
  white-space: nowrap;
}

.font-step-btn {
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 99px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}

.font-step-btn:hover {
  background: var(--bg-grouped-hover);
}

.font-step-btn.active {
  background: var(--apple-blue);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(10, 132, 255, 0.3);
}

/* STEP 3-1 핵심 진단 요약 내부의 모든 텍스트가 글자 크기 배율(--font-scale)에 즉시 연동되도록 보강 */
.corr-node strong {
  font-size: calc(18px * var(--font-scale)) !important;
  font-weight: 800;
}

.corr-node span {
  font-size: calc(14px * var(--font-scale)) !important;
}

.inspection-plan-box h5 {
  font-size: calc(17px * var(--font-scale));
}

.plan-step-item {
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
  padding: 10px 14px;
}

.ai-cause-row strong {
  font-size: calc(17px * var(--font-scale)) !important;
}

.ai-cause-row span {
  font-size: calc(15px * var(--font-scale)) !important;
}

.ai-subcard h5 {
  font-size: calc(16px * var(--font-scale));
}

.ai-subcard div {
  font-size: calc(15px * var(--font-scale)) !important;
}

.video-ko-main-title {
  font-size: calc(18px * var(--font-scale));
}

.video-snippet-line {
  font-size: calc(14px * var(--font-scale));
}

/* 해외 포럼 · 블로그 본문 리더 (실제 부품/수리 사진 + 한국어 본문 카드) */
.article-section-with-photo {
  background: var(--bg-grouped-row);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: center;
}

@media (max-width: 820px) {
  .article-section-with-photo {
    grid-template-columns: 1fr;
  }
}

.article-photo-box {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: #111;
}

.article-photo-box img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.article-photo-caption {
  padding: 8px 10px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-card);
}

.article-text-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-ko-paragraph {
  font-size: calc(17px * var(--font-scale));
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.65;
}

.article-en-paragraph {
  font-size: calc(14px * var(--font-scale));
  color: var(--text-secondary);
  line-height: 1.5;
}

/* STEP 3-2: 관련 이미지 (부품 · 장착 위치 등) 갤러리 그리드 */
.part-images-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 4px 0;
}

.part-image-card {
  background: var(--bg-grouped-row);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.part-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.part-img-thumb {
  width: 100%;
  height: 195px;
  background: #0f1115;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.part-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.part-img-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 132, 255, 0.92);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
}

.part-img-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.part-img-title {
  font-size: calc(16px * var(--font-scale));
  font-weight: 800;
  color: var(--text-primary);
}

.part-img-desc {
  font-size: calc(13px * var(--font-scale));
  color: var(--text-secondary);
}

.part-img-footer {
  padding: 10px 16px 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 유튜브 인라인 플레이어 하단 실시간 한국어 자동번역 자막 박스 */
.yt-korean-caption-bar {
  background: #10141d;
  border-top: 2px solid #30d158;
  padding: 12px 18px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yt-caption-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: #30d158;
}

.yt-caption-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 135px;
  overflow-y: auto;
}

.yt-caption-item {
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 12px;
  border-radius: 8px;
  border-left: 3px solid #0a84ff;
}

/* ============================================================================
   [v5.0] 연속 대기 음성인식 + 정비 용어 자동고침 + 드래그 앤 드롭 조합 + 중복도 배지
   ============================================================================ */
.voice-options-bar {
  background: var(--bg-grouped-row);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.autocorrect-check-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: calc(14px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
}

.autocorrect-check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--apple-blue);
  cursor: pointer;
}

.voice-wait-status-pill {
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(10, 132, 255, 0.14);
  color: var(--apple-blue);
}

.voice-wait-status-pill.recording {
  background: rgba(255, 69, 58, 0.18);
  color: #ff3b30;
  animation: pulseVoice 1.2s infinite ease-in-out;
}

@keyframes pulseVoice {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.danger-stop-btn {
  background: linear-gradient(135deg, #ff3b30, #d70015) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.35);
}

.autocorrect-alert-banner {
  background: linear-gradient(90deg, rgba(48, 209, 88, 0.14), rgba(10, 132, 255, 0.1));
  border: 1.5px solid #30d158;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: calc(14px * var(--font-scale));
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* 마우스 드래그 앤 드롭 1:1 한↔영 매핑 카드 */
.word-token-chip.draggable-card {
  cursor: grab;
  user-select: none;
  border: 2px solid var(--apple-blue);
  background: var(--bg-card);
  border-radius: 14px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.word-token-chip.draggable-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.18);
}

.word-token-chip.draggable-card.dragging {
  opacity: 0.45;
  transform: scale(0.96);
}

.word-token-chip.draggable-card.drag-over {
  border-color: #ff9f0a;
  box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.3);
}

.drag-grip-handle {
  font-size: calc(16px * var(--font-scale));
  color: var(--text-muted);
  cursor: grab;
  padding-right: 4px;
}

.token-map-arrow {
  font-size: calc(12px * var(--font-scale));
  color: var(--apple-blue);
  font-weight: 800;
}

.token-autocorrect-tag {
  display: inline-block;
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  background: rgba(48, 209, 88, 0.18);
  color: #15803d;
  padding: 2px 7px;
  border-radius: 99px;
}

.live-combined-query-bar {
  margin-top: 10px;
  background: var(--bg-card);
  border: 1.5px dashed var(--apple-blue);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 다중 검색어 조합별 필터 바 & 중복 출현 빈도(Overlap) 배지 */
.viewer-combo-filter-bar {
  padding: 10px 22px;
  background: var(--bg-grouped-row);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.combo-filter-pill {
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.combo-filter-pill.active {
  background: var(--apple-blue);
  color: #ffffff;
  border-color: var(--apple-blue);
}

.overlap-hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff3b30, #ff9500);
  color: #ffffff;
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
}

.overlap-single-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(10, 132, 255, 0.12);
  color: var(--apple-blue);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}

.viewer-ai-suitability-box {
  margin: 12px 22px 0 22px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(10, 132, 255, 0.08));
  border: 2px solid #5e5ce6;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================================
   [v5.1] 전용 카드번호 직접 입력 결제창 & 올인원 PC 터치 숫자 키패드 스타일
   ============================================================================ */
.card-pay-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 860px) {
  .card-pay-layout {
    grid-template-columns: 1fr;
  }
}

.virtual-credit-card-preview {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 55%, #1d4ed8 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 148px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.card-number-4grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.card-num-segment-input {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  border: 2px solid var(--hairline-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: calc(19px * var(--font-scale));
  font-weight: 800;
  text-align: center;
  letter-spacing: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.card-num-segment-input:focus,
.card-field-focused {
  border-color: var(--apple-blue) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22);
  outline: none;
}

.payment-numpad-box {
  background: var(--bg-grouped-row);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.payment-numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pay-num-btn {
  min-height: 54px;
  border-radius: 12px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: calc(20px * var(--font-scale));
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}

.pay-num-btn:active {
  transform: scale(0.96);
  background: rgba(10, 132, 255, 0.15);
}

.receipt-approved-card {
  background: var(--bg-grouped-row);
  border: 2px solid #28cd41;
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* [v5.2] 크레딧 충전 프리셋 & 겹침 없는 직접 입력 바 레이아웃 */
.quick-pay-inline-bar {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.quick-pay-inline-label {
  font-size: calc(14px * var(--font-scale));
  font-weight: 900;
  color: var(--apple-blue);
  white-space: nowrap;
}

.quick-pay-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.quick-pay-amount-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1.5px solid #5e5ce6;
  background: linear-gradient(135deg, #5e5ce6, #0071e3);
  color: #ffffff;
  font-size: calc(15px * var(--font-scale));
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.quick-pay-amount-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 92, 230, 0.35);
}

.charge-custom-input-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: var(--bg-card);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 14px 18px;
}

@media (max-width: 920px) {
  .charge-custom-input-grid {
    grid-template-columns: 1fr;
  }
}

.charge-input-left-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.charge-amount-number-field {
  width: 170px;
  min-width: 140px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 2px solid var(--apple-blue);
  background: var(--bg-grouped-row);
  color: var(--apple-blue);
  font-size: calc(20px * var(--font-scale));
  font-weight: 900;
  text-align: right;
  flex-shrink: 0;
}

.charge-action-right-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}