/* 기본 셸: 배경, 단일 카드, 타이포그래피, 버튼, 상태 표시 프리미티브. */

:root {
  color-scheme: dark;

  --ek-bg: #090511;
  --ek-surface: rgba(14, 8, 26, .94);
  --ek-surface-soft: rgba(124, 58, 237, .09);
  --ek-line: rgba(255, 255, 255, .11);
  --ek-line-strong: rgba(167, 139, 250, .32);

  --ek-text: #f5f3ff;
  --ek-text-muted: rgba(245, 243, 255, .64);
  --ek-text-faint: rgba(245, 243, 255, .44);

  --ek-accent: #a78bfa;
  --ek-accent-soft: #c4b5fd;
  --ek-accent-deep: #6d28d9;

  --ek-danger: #fecaca;
  --ek-danger-line: rgba(248, 113, 113, .34);
  --ek-danger-bg: rgba(127, 29, 29, .22);

  --ek-ok: #a7f3d0;
  --ek-warn: #fde68a;

  --ek-card-width: 480px;
  --ek-radius: 20px;

  font-family: Pretendard, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  font-synthesis: none;
  background: var(--ek-bg);
  color: var(--ek-text);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-width: 320px; background: var(--ek-bg); }
h1, h2, h3, p, ol, ul { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
img { display: block; }

:focus-visible { outline: 2px solid var(--ek-accent-soft); outline-offset: 2px; border-radius: 8px; }
[tabindex="-1"]:focus { outline: none; }

/* 배경 — 다크 + 보라 계열 유지 */
.ek-backdrop {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 48% at 12% -8%, rgba(118, 47, 221, .40), transparent 64%),
    radial-gradient(ellipse 52% 46% at 100% 6%, rgba(83, 28, 160, .32), transparent 68%),
    radial-gradient(ellipse 66% 50% at 50% 108%, rgba(53, 20, 110, .30), transparent 72%);
}

/* 좁은 단일 카드, 화면 중앙 */
.ek-shell {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
}
.ek-card {
  width: min(var(--ek-card-width), 100%);
  overflow: hidden;
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-radius);
  background: var(--ek-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.ek-card__body { min-width: 0; }

/* 단계 표시 */
.ek-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding: 13px 16px; margin: 0;
  border-bottom: 1px solid var(--ek-line);
  background: rgba(255, 255, 255, .025);
  list-style: none;
}
.ek-steps li {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 6px 8px; border-radius: 10px;
  color: var(--ek-text-faint);
}
.ek-steps__dot {
  display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  font-size: 10px; font-weight: 800;
}
.ek-steps strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 12px; font-weight: 700; }
.ek-steps .is-active { color: #fff; background: rgba(124, 58, 237, .18); }
.ek-steps .is-active .ek-steps__dot { border-color: var(--ek-accent-soft); background: var(--ek-accent-deep); color: #fff; }
.ek-steps .is-complete { color: var(--ek-accent-soft); }
.ek-steps .is-complete .ek-steps__dot { border-color: rgba(167, 243, 208, .65); background: rgba(5, 150, 105, .18); color: var(--ek-ok); }

/* 패널 — 한 화면 한 가지 */
.ek-pane { display: grid; gap: 14px; padding: 28px 26px 30px; }
.ek-pane--center { text-align: center; }
.ek-pane--center .ek-icon, .ek-pane--center .ek-spinner { justify-self: center; }
.ek-pane h2 { font-size: 21px; line-height: 1.34; letter-spacing: -.035em; word-break: keep-all; }
.ek-lead { color: var(--ek-text-muted); font-size: 13px; line-height: 1.72; word-break: keep-all; }
.ek-note { color: var(--ek-text-faint); font-size: 11px; line-height: 1.6; word-break: keep-all; }

/* 버튼 */
.ek-actions { display: grid; gap: 9px; width: 100%; margin-top: 2px; }
.ek-btn {
  display: grid; place-items: center; width: 100%; min-height: 46px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 12px;
  font-size: 14px; font-weight: 700; text-align: center;
  transition: filter .15s, background .15s, border-color .15s;
}
.ek-btn--primary { color: #fff; background: linear-gradient(105deg, #7c3aed, #a855f7); box-shadow: 0 10px 24px rgba(124, 58, 237, .26); }
.ek-btn--primary:hover:not(:disabled) { filter: brightness(1.07); }
.ek-btn--ghost { border-color: rgba(255, 255, 255, .17); color: #ece9fb; background: transparent; }
.ek-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.ek-btn--quiet { min-height: 34px; border: 0; color: var(--ek-accent-soft); background: transparent; font-size: 12px; font-weight: 700; }

/* 상태 · 오류 */
.ek-error {
  padding: 10px 12px; border: 1px solid var(--ek-danger-line); border-radius: 10px;
  color: var(--ek-danger); background: var(--ek-danger-bg);
  font-size: 12px; line-height: 1.55;
}
.ek-error[hidden] { display: none; }
.ek-status {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border: 1px solid var(--ek-line-strong); border-radius: 12px;
  color: #ede9fe; background: var(--ek-surface-soft);
  font-size: 12px; line-height: 1.55;
}
.ek-status[hidden] { display: none; }
.ek-status::before {
  content: ""; flex: 0 0 13px; width: 13px; height: 13px;
  border: 2px solid rgba(196, 181, 253, .3); border-top-color: var(--ek-accent-soft); border-radius: 50%;
  animation: ek-spin .8s linear infinite;
}
.ek-spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(196, 181, 253, .2); border-top-color: var(--ek-accent-soft); border-radius: 50%;
  animation: ek-spin .8s linear infinite;
}
@keyframes ek-spin { to { transform: rotate(360deg); } }

/* 결과 · 안내 아이콘 */
.ek-icon {
  display: grid; place-items: center; width: 54px; height: 54px;
  border: 1px solid var(--ek-line-strong); border-radius: 50%;
  color: #ddd6fe; background: rgba(124, 58, 237, .16);
  font-size: 25px; font-weight: 800;
}
.ek-icon--ok { color: var(--ek-ok); border-color: rgba(52, 211, 153, .4); background: rgba(5, 150, 105, .17); }
.ek-icon--review { color: var(--ek-warn); border-color: rgba(251, 191, 36, .38); background: rgba(146, 64, 14, .18); }
.ek-icon--stop { color: var(--ek-danger); border-color: var(--ek-danger-line); background: var(--ek-danger-bg); }

/* 안내·오류·전송 완료 화면은 진행 중이 아니다 — 단계 표시를 감춘다. */
.ek-bare .ek-steps { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ek-status::before, .ek-spinner { animation: none; }
  .ek-btn { transition: none; }
}