/* ============================================================
   Aurora Theme — "2026 Generative-UI" 비주얼 리프레시 (추가형 오버라이드 · 최소·안전판)
   ============================================================ */

:root {
  --violet: oklch(0.64 0.16 300);
  --violet-soft: oklch(0.64 0.16 300 / 0.14);
}

/* 오로라 베이스 — 콘텐츠 컨테이너 배경에 직접(컨테이너가 html을 덮으므로).
   중앙 + 코너 글로우. z-index·position 미변경 → 렌더 안전. */
html { background: #07060b !important; }
.wizard-shell, .app-shell {
  background:
    radial-gradient(50% 38% at 50% 30%,  oklch(0.58 0.17 300 / 0.30), transparent 62%),
    radial-gradient(60% 50% at 12% 0%,   oklch(0.60 0.18 300 / 0.40), transparent 58%),
    radial-gradient(58% 50% at 92% 100%, oklch(0.68 0.16 26  / 0.34), transparent 60%),
    radial-gradient(80% 70% at 50% 120%, oklch(0.56 0.15 332 / 0.30), transparent 70%),
    #07060b !important;
}
.motion-backdrop { opacity: 0.18 !important; }

/* 히어로 타이포만 우선 적용 (배경/스택 변경 없음 — 렌더 안전 확인용) */
.wf-hero { text-align: center; padding: 48px 0 28px !important; }
.wf-hero h1 {
  font-size: clamp(34px, 5.2vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  color: #f6f4fb !important;
}
.wf-hero p {
  font-size: clamp(14px, 1.4vw, 17px) !important;
  font-weight: 400 !important;
  color: oklch(0.74 0.02 290) !important;
  max-width: 30em; margin: 16px auto 0 !important;
  letter-spacing: -0.005em; line-height: 1.6;
}

/* ── 크롬 정돈 (요소 스코프 — z-index/position 미변경, 렌더 안전) ── */
.wf-top {
  background: oklch(0.12 0.02 295 / 0.42) !important;
  border-bottom: 1px solid oklch(0.7 0.1 300 / 0.10) !important;
}
.wf-mode-tabs button.on {
  background: linear-gradient(135deg, var(--violet-soft), transparent 70%) !important;
  border-color: var(--violet) !important;
}
.wf-mode-tabs button.on strong { color: oklch(0.86 0.08 305) !important; }
.wf-form-card {
  background: oklch(0.12 0.02 290 / 0.45) !important;
  border: 1px solid oklch(0.7 0.1 300 / 0.10) !important;
}
.wf-action .btn[data-variant="primary"] {
  box-shadow: 0 8px 30px oklch(0.58 0.17 300 / 0.22), 0 2px 8px oklch(0.66 0.15 28 / 0.12);
}
.wf-result-head h2 { letter-spacing: -0.03em; font-weight: 650; }
.pi-tab[aria-selected="true"] { color: oklch(0.86 0.07 305) !important; }
.wf-step.is-active .wf-step-circle {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 4px var(--violet-soft);
}

/* ── 단계바 — Aurora 근흑 배경에서 또렷하게 ────────────────────── */
.wf-stepbar { gap: 4px; }
.wf-step-circle {
  border-color: oklch(0.7 0.1 300 / 0.35) !important;
  background: oklch(0.16 0.02 290 / 0.6) !important;
  color: var(--text-dim) !important;
}
.wf-step.is-active .wf-step-circle { color: #fff !important; }
.wf-step.is-active .wf-step-label { color: oklch(0.90 0.06 305) !important; }
.wf-step-line { background: oklch(0.7 0.1 300 / 0.18) !important; }

/* ── Step2 분석 화면 — 글로우 스피너 + 정제 레이아웃 ──────────── */
.wf-step2 { padding: 96px 20px !important; }
.wf-spin-big {
  width: 72px !important; height: 72px !important;
  border: 3px solid oklch(0.7 0.1 300 / 0.16) !important;
  border-top-color: var(--violet) !important;
  border-right-color: oklch(0.66 0.15 28 / 0.7) !important;
  box-shadow: 0 0 36px oklch(0.60 0.18 300 / 0.35);
}
.wf-analyze-phase {
  font-size: 19px !important; font-weight: 600 !important;
  color: #f4f1fb !important; letter-spacing: -0.01em;
  min-height: 24px;
}
.wf-analyze-bar {
  width: 420px !important; max-width: 76vw; height: 5px !important;
  background: oklch(0.7 0.1 300 / 0.14) !important; border-radius: 3px;
}
.wf-analyze-bar > div {
  background: linear-gradient(90deg, var(--violet), oklch(0.68 0.16 28)) !important;
  box-shadow: 0 0 14px oklch(0.60 0.18 300 / 0.5);
}
.wf-analyze-tips {
  border-left: 2px solid var(--violet) !important;
  background: oklch(0.60 0.18 300 / 0.06) !important;
  border-radius: 0 6px 6px 0;
}
.wf-analyze-tips strong { color: oklch(0.86 0.08 305) !important; }

/* ════════════════════════════════════════════════════════════
   iOS / 모바일 (홈화면 PWA) — 안전영역 + 아이폰 폭 반응형
   status-bar black-translucent → 콘텐츠가 노치/다이내믹아일랜드 밑으로
   들어가므로 상단 크롬에 safe-area-inset-top 패딩.
   ════════════════════════════════════════════════════════════ */
/* 노치 안전영역 — 상단/하단 크롬 */
.app-header { padding-top: env(safe-area-inset-top, 0px); }
.wf-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; }
#boot { padding-top: env(safe-area-inset-top, 0px); }
@supports (padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

@media (max-width: 640px) {
  /* 위저드 — 아이폰 폭 */
  .wf-body { padding: 12px !important; }
  .wf-hero { padding: 28px 4px 18px !important; }
  .wf-hero h1 { font-size: 30px !important; }
  .wf-mode-tabs { flex-direction: column !important; }
  .wf-mode-tabs button { width: 100% !important; }

  /* 단계바 — 라벨 숨기고 원만, 가로 컴팩트 */
  .wf-stepbar { gap: 2px !important; overflow-x: auto; }
  .wf-step-sub { display: none !important; }
  .wf-step-label { font-size: 11px !important; }
  .wf-step-line { margin: 0 6px !important; }

  /* 결과 — kpi + 인스펙터 세로 스택 */
  .wf-detail-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .wf-kpi-list { grid-template-columns: repeat(2, 1fr) !important; }
  .wf-personas-grid { grid-template-columns: 1fr !important; }

  /* PersonaInspector 탭 — 그룹 세로 적층, 터치 타겟 확대 */
  .pi-actions { flex-direction: column; }
  .pi-tabs { width: 100%; }
  .pi-tabgroup + .pi-tabgroup { padding-left: 0 !important; border-left: none !important; padding-top: 6px; border-top: 1px solid var(--border); }
  .pi-tab { padding: 9px 12px !important; }      /* ≥44px 터치 */
  .pi-export { width: 100%; }
  .pi-export button { flex: 1; padding: 9px 10px !important; }

  /* 넓은 테이블/매트릭스 — 가로 스크롤 허용 */
  .sa-tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .sa-totals { flex-wrap: wrap; }
  .sa-tot { min-width: 45%; }
  .kb-channels .kb-ch { flex: 1 1 100% !important; }

  /* KPI 카드(상단 6분할) → 2열 */
  .wf-detail-side { min-height: auto !important; }

  /* 편집요청 FAB가 가리지 않게 본문 하단 여백 */
  .wf-body { padding-bottom: 80px !important; }
}