/* 화면별 모듈: PC QR 핸드오프 + 진행 체크리스트, 모바일 신분증 촬영, 모바일 얼굴 촬영, 결과.
   PC 는 QR 전용(좁은 카드)이고 촬영 요소는 모바일(전체 화면)에만 존재한다.
   색은 전부 styles.css 의 토큰을 참조한다 — 이 파일에 색 리터럴을 새로 만들지 않는다. */

/* ---------- PC: QR 핸드오프 ---------- */
.ek-qr {
  display: grid; justify-items: center; gap: 12px; width: 100%;
  padding: 18px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface-sunken);
}
.ek-qr__frame {
  display: grid; place-items: center; width: 188px; height: 188px; padding: 12px;
  /* QR quiet zone 은 스캐너를 위해 순수 흰색이어야 한다 — 토큰으로 치환하지 말 것. */
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 15, 22, .10);
}
.ek-qr__frame img { width: 160px; height: 160px; max-width: 100%; max-height: 100%; object-fit: contain; }
.ek-qr__expiry { min-height: 18px; color: var(--ink-muted); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.ek-qr--pending { min-height: 232px; align-content: center; }
.ek-qr--pending p { color: var(--ink-muted); font-size: 13px; }

/* 진행 체크리스트 — 폰이 단계를 넘기면 서버 status 근거로 체크로 바뀐다 */
.ek-check { display: grid; width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ek-check li {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  color: var(--ink-muted); font-size: 13.5px; font-weight: 600; text-align: left;
}
.ek-check li + li { border-top: 1px solid var(--line); }
.ek-check__box {
  display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  color: transparent; font-size: 11px; font-weight: 800; line-height: 1;
}
.ek-check__state { margin-left: auto; color: var(--ink-faint); font-size: 12px; font-weight: 700; }
.ek-check .is-active { color: var(--ink); }
.ek-check .is-active .ek-check__box { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent-weak); }
.ek-check .is-active .ek-check__state { color: var(--accent-strong); }
.ek-check .is-done { color: var(--ink); }
.ek-check .is-done .ek-check__box { border-color: var(--accent); color: var(--accent-contrast); background: var(--accent); }
.ek-check .is-done .ek-check__state { color: var(--accent-strong); }

/* 폴링 중임을 알리는 한 줄 */
.ek-watch { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; text-align: center; word-break: keep-all; }
.ek-watch::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ek-pulse 1.6s ease-in-out infinite; }
@keyframes ek-pulse { 50% { opacity: .3; transform: scale(.7); } }

/* 서버가 알려준 단계 전환 안내 */
.ek-stage-note {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  color: var(--accent-strong); background: var(--accent-weak);
  font-size: 12.5px; line-height: 1.6; word-break: keep-all;
}

/* ---------- 모바일: 신분증 종류 선택 ---------- */
.ek-choices { display: grid; gap: 10px; }
.ek-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 16px;
  color: var(--ink); background: var(--surface);
  font-size: 15px; font-weight: 700; text-align: left;
  transition: border-color .15s, background .15s;
}
.ek-choice::after { content: ""; margin-left: auto; flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.ek-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); }
.ek-choice[aria-pressed="true"]::after { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3.5px var(--surface); }

/* ---------- 모바일: 신분증 촬영 슬롯 ---------- */
.ek-slot {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sunken);
}
.ek-slot--id { aspect-ratio: 8 / 5; }
.ek-slot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ek-slot__hint { position: relative; z-index: 2; display: grid; justify-items: center; gap: 9px; padding: 0 24px; text-align: center; }
.ek-slot__icon { color: var(--ink-faint); }
.ek-slot__icon svg { width: 34px; height: 34px; }
.ek-slot__label {
  padding: 3px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-muted);
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
}
.ek-slot__caption { color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; word-break: keep-all; }

/* 촬영 전 가이드. 벤더 문서의 권장(정면·거리·조명·가림 없음)을 짧은 목록으로 옮긴 것이다 —
   문장으로 길게 쓰면 읽히지 않는다. 촬영 중에는 `.ek-hide-while-capturing` 로 감춘다. */
.ek-tips { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ek-tips li {
  position: relative; padding-left: 22px;
  color: var(--ink-muted); font-size: 13px; line-height: 1.55; word-break: keep-all;
}
.ek-tips li::before {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* 촬영 가이드용 액센트 코너 마커 */
.ek-corner { position: absolute; z-index: 3; width: 22px; height: 22px; border-color: var(--accent); border-style: solid; }
.ek-corner.tl { top: 12px; left: 12px; border-width: 2.5px 0 0 2.5px; border-radius: 7px 0 0 0; }
.ek-corner.tr { top: 12px; right: 12px; border-width: 2.5px 2.5px 0 0; border-radius: 0 7px 0 0; }
.ek-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 7px; }
.ek-corner.br { right: 12px; bottom: 12px; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 7px 0; }

/* ---------- 모바일: 얼굴 촬영 (여기만 어둡게) ---------- */
.ek-face {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%; aspect-ratio: 3 / 4; max-height: 54dvh; border-radius: 24px; background: var(--shot-bg);
}
/* 안내 화면의 미리보기는 폭을 채운다. 정사각형에 높이 상한을 걸면 폭이 화면보다 좁아지고,
   flex 컬럼에서 좁은 항목은 왼쪽에 붙어 가이드 목록과 어긋나 보인다(2026-09-10 실기 확인). */
.ek-face--intro { aspect-ratio: 4 / 3; max-height: 30dvh; }
.ek-face video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.ek-guide { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; pointer-events: none; }
.ek-guide__circle { width: min(62%, 210px); aspect-ratio: 1; border: 2px dashed var(--shot-line); border-radius: 50%; }
.ek-guide p { color: var(--shot-ink-muted); font-size: 13px; word-break: keep-all; }

/* 촬영 중 오버레이 — 원형 가이드/진행 링 + 하단 캡션 한 줄만 */
.ek-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none;
}
.ek-overlay .ek-guide__circle { border-style: solid; border-color: var(--accent); }
.ek-overlay .ek-caption { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
.ek-caption {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--shot-scrim); color: var(--shot-ink);
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.ek-rec-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--shot-rec); animation: ek-rec 1s infinite; }
@keyframes ek-rec { 50% { transform: scale(.66); opacity: .55; } }

/* 남은 시간 비례 원형 진행 링 (--ring: 1 → 0).
   mask 를 못 쓰는 브라우저에서는 conic-gradient 가 얼굴을 덮는 원판이 되므로,
   기본값은 테두리만 있는 원이고 mask 가 지원될 때만 진행 링으로 승격한다. */
.ek-ring {
  width: min(64%, 220px); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--shot-line);
}
@supports (-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000)) {
  .ek-ring {
    border: 0;
    background: conic-gradient(var(--accent) calc(var(--ring, 1) * 360deg), var(--shot-track) 0);
    /* `closest-side` 가 없으면 기본값이 `farthest-corner` 라, 정사각 박스에서 그라디언트
       반지름이 가시 원 반지름의 약 1.41배가 된다. 그러면 `50%` 기준점이 원 밖으로 밀려
       구멍이 작아지고 링이 얼굴을 덮는다(2026-09-10 실기 확인). */
    -webkit-mask: radial-gradient(closest-side circle, transparent calc(100% - 6px), #000 calc(100% - 6px));
            mask: radial-gradient(closest-side circle, transparent calc(100% - 6px), #000 calc(100% - 6px));
  }
}

.ek-fallback { color: var(--warn); font-size: 12.5px; line-height: 1.6; word-break: keep-all; }

/* ---------- 모바일: 앱처럼 전체 화면 ---------- */
.ek-mobile .ek-shell { padding: 0; place-items: stretch; }
.ek-mobile .ek-card {
  width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
}
.ek-mobile .ek-card__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ek-mobile .ek-pane {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px calc(14px + env(safe-area-inset-bottom));
}
.ek-mobile .ek-pane h2 { font-size: 24px; }
.ek-mobile .ek-pane--center { align-items: center; justify-content: center; }
/* 세로 배분 — 상단 쏠림 방지.
   CTA 가 없는 화면은 남는 공간을 밀어낼 대상이 없어 콘텐츠가 위에 붙는다. 가운데로 둔다.
   CTA 가 있는 화면은 첫 요소에도 auto 여백을 줘, 남는 공간이 위와 버튼 앞으로 반반 나뉘게 한다.
   :has() 미지원 브라우저는 기존 상단 정렬로 남는다(깨지지 않는다). */
.ek-mobile .ek-pane:not(:has(.ek-actions)):not(.ek-pane--center) { justify-content: center; }
/* CTA 가 있는 화면은 미리보기/촬영 영역이 남는 공간을 흡수한다 — 실제 카메라 앱과 같은 배분.
   제목은 위에, 버튼은 아래에 두고 가운데를 채운다. */
.ek-mobile .ek-pane > .ek-face, .ek-mobile .ek-pane > .ek-slot { flex: 1 1 auto; min-height: 0; }
/* 성장할 요소가 없는 화면(결과·안내 등)은 `.ek-actions` 의 auto 여백이 남는 공간을 전부 가져가
   justify-content 가 무력화된다. 첫 요소에도 auto 여백을 줘 위·아래로 반씩 나눈다. */
.ek-mobile .ek-pane:has(.ek-actions):not(:has(.ek-face)):not(:has(.ek-slot)) > :first-child { margin-top: auto; }
/* 하단 고정 버튼 */
.ek-mobile .ek-actions {
  position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 4px;
  /* `transparent` 대신 투명 흰색 — 구형 Safari 의 회색 프린지를 피한다. */
  background: linear-gradient(to top, var(--surface) 72%, rgba(255, 255, 255, 0));
}
/* 촬영 기기 자신에게 QR·PC 전용 요소를 보여주지 않는다 (모바일 경로에서는 렌더되지도 않는 이중 방어) */
.ek-mobile .ek-qr, .ek-mobile .ek-qr--pending, .ek-mobile .ek-watch, .ek-mobile .ek-check { display: none; }

/* ---------- 촬영 중: 화면 전체를 어둡게 ---------- */
.ek-capturing { background: var(--shot-bg); }
.ek-capturing .ek-shell { padding: 0; place-items: stretch; }
.ek-capturing .ek-card { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; background: var(--shot-bg); }
.ek-capturing .ek-pane { padding: 0; gap: 0; }
.ek-capturing .ek-hide-while-capturing { display: none; }
.ek-capturing .ek-face { aspect-ratio: auto; height: 100dvh; max-height: none; border-radius: 0; }

/* ---------- 모바일: 신분증 라이브 촬영 (페이지 안의 카메라) ---------- */
/* 얼굴 단계와 같은 원칙 — 피사체 대비를 위해 이 화면만 어둡게 간다. */
.ek-shot {
  position: fixed; inset: 0; z-index: 1;
  display: grid; place-items: center; overflow: hidden;
  background: var(--shot-bg);
}
.ek-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 신분증 비율 직사각 가이드 프레임. 바깥은 아주 큰 box-shadow 로 덮어 어둡게 만든다.
   프레임의 실제 렌더 크기를 그대로 측정해 원본 해상도 좌표로 환산하므로,
   여기 값이 바뀌어도 크롭 영역이 같이 따라온다. */
.ek-shot__frame {
  position: relative; z-index: 2;
  width: min(88vw, calc(56dvh * var(--doc-frame-aspect)));
  aspect-ratio: var(--doc-frame-aspect);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax var(--shot-veil);
}
.ek-shot__frame img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: 15px; object-fit: cover; }
.ek-shot__frame .ek-corner { width: 26px; height: 26px; }
.ek-shot__frame .ek-corner.tl { top: -2px; left: -2px; border-radius: 8px 0 0 0; }
.ek-shot__frame .ek-corner.tr { top: -2px; right: -2px; border-radius: 0 8px 0 0; }
.ek-shot__frame .ek-corner.bl { bottom: -2px; left: -2px; border-radius: 0 0 0 8px; }
.ek-shot__frame .ek-corner.br { right: -2px; bottom: -2px; border-radius: 0 0 8px 0; }

.ek-shot__caption {
  position: absolute; z-index: 3; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom));
  transform: translateX(-50%); max-width: calc(100% - 40px);
  white-space: normal; text-align: center; word-break: keep-all;
}
.ek-shot__error { position: fixed; z-index: 5; left: 20px; right: 20px; bottom: calc(212px + env(safe-area-inset-bottom)); }

/* 하단 고정 셔터 — 촬영 중 크롬을 감춰도 이 줄은 남아야 한다. */
.ek-mobile .ek-actions--shot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  margin: 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--shot-bg) 58%, var(--shot-fade));
}
.ek-actions--shot .ek-btn { max-width: 340px; justify-self: center; }
.ek-actions--shot .ek-btn--quiet { color: var(--shot-ink-muted); }
.ek-actions--shot .ek-btn--quiet:hover:not(:disabled) { color: var(--shot-ink); }
.ek-shutter {
  display: grid; place-items: center; justify-self: center;
  width: 72px; height: 72px; padding: 0;
  border: 3px solid var(--shot-ink); border-radius: 50%; background: transparent;
}
.ek-shutter::after { content: ""; width: 56px; height: 56px; border-radius: 50%; background: var(--shot-ink); transition: transform .12s; }
.ek-shutter:active::after { transform: scale(.88); }
.ek-shutter:disabled { border-color: var(--shot-line); }
.ek-shutter:disabled::after { background: var(--shot-line); }

@media (prefers-reduced-motion: reduce) {
  .ek-watch::before, .ek-rec-dot { animation: none; }
  .ek-choice, .ek-shutter::after { transition: none; }
}

/* ---------- 반응형 (PC 경로의 좁은 창) ---------- */
@media (max-width: 700px) {
  :root { --card-width: 100%; }
  .ek-shell { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
  .ek-pane { padding: 24px 20px 26px; }
}

@media (max-width: 390px) {
  .ek-pane { padding: 20px 16px 24px; }
  .ek-mobile .ek-pane { padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); }
  .ek-pane h2, .ek-mobile .ek-pane h2 { font-size: 21px; }
  .ek-steps strong { font-size: 11px; }
  .ek-steps li + li::before { flex-basis: 18px; width: 18px; margin: 0 8px; }
  .ek-choice { min-height: 56px; font-size: 14px; }
  .ek-qr__frame { width: 172px; height: 172px; }
  .ek-qr__frame img { width: 146px; height: 146px; }
}