/*
  에코114 고객 웹 — 접수 폼·완료 화면 전용 스타일 — 디자인 v2 (2026-10-19)
  기준: 시안 v2 `_design/04_리디자인_시안/index.html` 의 신청서(사장님 "너무 마음에 들어").
  옛 원본(_design/03_상세화면/S-020~S-024 · S-060)과 생성기(tools/dev/build_form_css.py)는 v2 부터 쓰지 않는다.

  지키는 것
  - 치수·색은 tokens.css 의 변수만 쓴다. 여기에 숫자나 색을 새로 적지 않는다.
  - site.css 에 이미 있는 규칙은 넣지 않는다(두 번 선언하면 나중에 어느 쪽이 이기는지 헷갈린다).
  - 고르는 칸은 진짜 라디오·체크(키보드 · 읽는 프로그램 그대로) — 칸 전체가 눌리는 큰 카드로 보이게만 한다.
  - 맨 아래 5번 · 6번 · 7번(버튼 띠 · 글자를 크게 키웠을 때 · 앱에 로그인한 번호)은 동작 규칙이라 v2 에서도 그대로다.
*/


/* ── 1. 입력칸 · 고르는 칸 · 카드 ──────────────────────── */
.svg-defs { position: absolute; width: var(--zero); height: var(--zero); overflow: hidden; }
.button:disabled,.button.secondary:disabled { background: var(--color-surface); color: var(--color-text-weak); border-color: var(--color-border); box-shadow: none; }
.field { margin-top: var(--space-5); }
.field-label { display: block; margin-bottom: var(--space-2); color: var(--color-text-strong); font-size: var(--font-size-body); font-weight: var(--font-weight-strong); }
.field-hint { margin-top: var(--space-2); }
.field-error { color: var(--color-danger); font-size: var(--font-size-small); line-height: var(--line-height-small); margin-top: var(--space-2); }
.input { display: block; width: var(--full); min-width: var(--zero); min-height: var(--input-height); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-2); background: var(--color-bg); color: var(--color-text-strong); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.input::placeholder { color: var(--color-text-weak); opacity: var(--one); }
.input:focus,.input.is-focused { outline: var(--border-width-strong) solid var(--color-primary-strong); outline-offset: var(--zero); border-color: var(--color-primary-strong); box-shadow: var(--zero) var(--zero) var(--zero) var(--dot-ring) color-mix(in srgb, var(--color-primary) var(--ring-mix), transparent); }
.input.is-error { border: var(--border-width-strong) solid var(--color-danger); }
.input:disabled { background: var(--color-surface); color: var(--color-text-weak); opacity: var(--one); -webkit-text-fill-color: var(--color-text-weak); border-color: var(--color-border); }
fieldset { min-width: var(--zero); border: none; padding: var(--zero); margin: var(--zero); }
legend { padding: var(--zero); margin-bottom: var(--space-3); font-weight: var(--font-weight-strong); color: var(--color-text-strong); }
/* 하나 고르기 — 칸 전체가 눌리는 큰 카드(옅은 미색). 고르면 옅은 연두 + 초록 테두리 */
.choice { min-width: var(--touch-min); min-height: var(--touch-min); display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); background: var(--color-surface); color: var(--color-text-strong); font-weight: var(--font-weight-medium); cursor: pointer; }
legend + .choice { margin-top: var(--zero); }
.choice input { width: var(--control-size); height: var(--control-size); margin: var(--zero); flex-shrink: var(--zero); accent-color: var(--color-primary); }
.choice:has(input:checked) { background: var(--color-primary-weak); box-shadow: inset var(--zero) var(--zero) var(--zero) var(--border-width-strong) var(--color-primary); font-weight: var(--font-weight-strong); }
.choice:focus-within { outline: var(--border-width-strong) solid var(--color-primary-strong); outline-offset: var(--space-1); }
/* 공간 종류 그림(아이콘 묶음) — 흰 네모 안 초록 그림, 고르면 초록 네모 안 흰 그림.
   글은 라디오 바로 뒤(랜딩 시험 · 읽는 순서 = 라디오 → 이름)이고 그림은 그 뒤에 둔다 — 보이는 차례만 [그림][이름][라디오]로 바꾼다(order). */
.choice-icon { order: -1; display: grid; place-items: center; width: var(--icon-box-size); height: var(--icon-box-size); flex-shrink: var(--zero); border-radius: var(--radius-1); background: var(--color-bg); color: var(--color-primary); }
.choice:has(.choice-icon) input { order: 1; margin-left: auto; }
.choice-icon svg.ms { width: var(--icon-size); height: var(--icon-size); }
.choice:has(input:checked) .choice-icon { background: var(--color-primary); color: var(--color-on-primary); }
.selection-group { margin-top: var(--space-6); }
/* 여러 개 · 짧은 답 고르기 — 알약 칩 */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { min-width: var(--touch-min); min-height: var(--touch-min); padding: var(--space-2) var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-strong); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); cursor: pointer; }
.chip input { width: var(--control-size); height: var(--control-size); margin: var(--zero); flex-shrink: var(--zero); accent-color: var(--color-primary); }
.chip:has(input:checked) { color: var(--color-primary-strong); background: var(--color-primary-weak); border: var(--border-width-strong) solid var(--color-primary); font-weight: var(--font-weight-strong); }
.chip:focus-within { outline: var(--border-width-strong) solid var(--color-primary-strong); outline-offset: var(--space-1); }
.receipt { padding: var(--space-5); border-radius: var(--radius-4); background: var(--color-surface); }
.receipt-state { display: flex; align-items: center; gap: var(--space-2); color: var(--color-success); font-size: var(--font-size-small); font-weight: var(--font-weight-strong); }
.receipt h4 { margin-top: var(--space-4); font-size: var(--font-size-section); line-height: var(--line-height-section); }
.receipt p { margin-top: var(--space-2); }

/* ── 2. 접수 폼 배치 — 단계 표시·질문 묶음·인증 ──────────────────────── */
.icon-button { display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); padding: var(--zero); border: none; border-radius: var(--radius-pill); background: var(--color-clear); color: var(--color-text-strong); text-decoration: none; }
.step { padding-bottom: var(--space-3); }
.step-count { color: var(--color-primary); font-weight: var(--font-weight-heavy); }
.step-track { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.step-track li { flex: var(--one); height: var(--space-2); background: var(--color-surface); border-radius: var(--radius-pill); }
.step-track li.is-done { background: var(--color-primary); }
.screen-main { padding-block: var(--space-5) var(--space-6); }
.screen-main h1 { font-size: var(--font-size-title); line-height: var(--line-height-title); }
.lead { margin-top: var(--space-3); color: var(--color-text-weak); }
.legend-note { margin-bottom: var(--space-2); }
.field-group .field { margin-top: var(--space-4); }
.select-wrap { position: relative; }
.select { appearance: none; padding-right: calc(var(--space-4) * var(--two) + var(--icon-size)); }
.select.is-empty { color: var(--color-text-weak); }
.select-wrap svg { position: absolute; top: var(--half); right: var(--space-4); transform: translateY(var(--translate-center)); color: var(--color-text-weak); pointer-events: none; }
.followup { margin: var(--space-2) var(--zero) var(--space-4); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-2); box-shadow: inset var(--border-width-accent) var(--zero) var(--zero) var(--color-primary); }
.followup .choice { background: var(--color-bg); }
.followup legend { font-size: var(--font-size-body); }
.followup fieldset + fieldset { margin-top: var(--space-5); }
.auth-button { margin-top: var(--space-2); }
.label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.timer { color: var(--color-primary-strong); font-size: var(--font-size-small); font-weight: var(--font-weight-strong); }
.agree-list { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.agree-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.agree-row .choice { flex: var(--one); min-width: var(--zero); margin-top: var(--zero); padding-inline: var(--zero); background: var(--color-clear); font-weight: var(--font-weight-normal); }
.agree-row .choice:has(input:checked) { background: var(--color-clear); box-shadow: none; font-weight: var(--font-weight-normal); }
.agree-row .text-button { flex-shrink: var(--zero); font-size: var(--font-size-small); }
.sms-note { margin-top: var(--space-3); }
.selection-group .field + .chip-row { margin-top: var(--space-3); }
.notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-2); }
.notice svg { color: var(--color-success); }
.notice p { color: var(--color-text-strong); font-weight: var(--font-weight-medium); }
.address-button { justify-content: flex-start; gap: var(--space-2); }

/* ── 3. 접수 완료 화면 ──────────────────────── */
.complete-head { display: flex; align-items: center; gap: var(--space-4); }
.complete-mark { display: flex; align-items: center; justify-content: center; width: var(--service-symbol-size); height: var(--service-symbol-size); flex-shrink: var(--zero); border-radius: var(--radius-pill); background: var(--color-success); color: var(--color-bg); }
.receipt-number { margin-top: var(--space-4); color: var(--color-text-strong); font-weight: var(--font-weight-strong); }
.complete-panel { margin-top: var(--space-5); }
.panel-line { color: var(--color-text-strong); margin-top: var(--space-2); }
.summary { margin-top: var(--space-5); }
.handler { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.handler svg { color: var(--color-primary); }

/* ── 4. 지역 밖 — 오픈 알림 ──────────────────────── */
.picked { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-2); color: var(--color-text-strong); font-weight: var(--font-weight-strong); }
.picked svg { flex-shrink: var(--zero); color: var(--color-primary); }

/* ── 5. 버튼 띠 — 일반 문서 스크롤 + 화면 아래에 붙는 띠(sticky) ─────────────────────── */
/*
  실제 웹은 site.css 와 같은 까닭으로 **일반 문서 스크롤**을 쓴다(안쪽 스크롤은 주소창이 접힐 때
  높이가 튀고, 아이폰에서 뒤로가기 제스처가 걸린다). 그래서 버튼 띠를 상담 띠와 같은 방식
  (position: sticky)으로 화면 아래에 붙인다 — 본문 흐름 안에 자리를 차지하므로 끝까지 내리면
  마지막 내용이 띠 위에 온다. 버튼이 글자를 가리지 않는다. v2: 반투명 흰 띠(상담 띠와 같은 모양).
  스크롤하기 전(맨 위)에 띠 윗선에 반쯤 걸친 것은 dockGuard.mjs 가 드러내거나 감춘다(아래 --dock-clip · --dock-veil).
*/
.dock { position: sticky; bottom: var(--zero); z-index: var(--z-floating); padding: var(--space-3) var(--page-gutter); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--color-border); background: color-mix(in srgb, var(--color-bg) var(--glass-mix), transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); clip-path: var(--dock-clip, none); }
.dock > * + * { margin-top: var(--space-2); }
.dock .text-button { width: var(--full); justify-content: center; }
/*
  띠가 누를 수 있는 것을 가리지 않게(실기 점검 W-7 · 2026-09-27 — 사장님 폰 412×800 에서 1단계 "점포·상가"가 7px 만 보이고
  나머지가 [다음] 띠 밑에 깔려, 누르면 [다음]이 눌렸다). 값은 모두 dockGuard.mjs 가 화면에서 재어 넣는다 — 값이 없으면 전과 같다.
  · 스크롤하기 전(맨 위)에만: --dock-clip 은 띠 윗부분(윗선 ~ 첫 버튼 위끝)을 잘라 밑의 것을 드러내고(잘린 자리는 그리지도
    누르지도 않는다 · 버튼은 제자리), --dock-veil 은 띠 바로 위를 흰 바탕으로 덮어 반쯤 걸친 것을 통째로 감춘다(덮은 자리를
    누르면 아무 일도 없다). 스크롤을 시작하면 둘 다 빠진다.
  · 칸에 초점이 가면 브라우저가 칸을 띠 위로 올린다 — 그 기준을 지금 띠의 실제 높이(--dock-block)로. 띠 안의 버튼 자신에
    초점이 갈 때는 화면을 움직이지 않는다(site.css 의 상담 버튼과 같은 까닭 — 판정 상자를 비워 둔 높이만큼 위로 옮긴다).
*/
.dock::before { content: ""; position: absolute; left: var(--zero); right: var(--zero); bottom: calc(var(--full) + var(--border-width)); height: var(--dock-veil, var(--zero)); background: var(--color-bg); }
html:has(.dock) { scroll-padding-bottom: var(--dock-block, var(--dock-reserve)); }
.dock .button,.dock .text-button { scroll-margin-top: var(--dock-block, var(--dock-reserve)); scroll-margin-bottom: calc(var(--dock-block, var(--dock-reserve)) * -1); }

/* 화면을 넘길 때 보이는 단계만 남긴다. 자바스크립트가 hidden 을 붙였다 뗀다. */
[hidden] { display: none !important; }


/* ── 6. 글자를 크게 키웠을 때 ─────────────────────── */
/*
  폰에서 글자를 200% 로 키우면 번호 칸의 예시 글자(010-1234-5678)가 칸보다 길어져 끝이 잘린다(320px 폭 · 2026-09-25 D-4).
  예시 글자는 칸 안에서 옆으로 밀어 볼 수도 없으니, **칸 높이의 절반**(--input-height / 2)보다 커지지 않게 한다.
  손님이 치는 글자는 줄이지 않는다 — 길면 칸 안에서 옆으로 밀려 보이는 것이 입력칸의 보통 동작이다.
*/
.input::placeholder { font-size: min(1em, calc(var(--input-height) / 2)); }


/* ── 7. 앱에 로그인한 번호 — 고칠 수 없는 칸 ─────────────────────── */
/*
  앱에 로그인한 손님은 3단계 번호 칸이 로그인한 번호로 채워지고 고칠 수 없다(readonly · 사장님 결정 2026-09-25 #9).
  모습은 사장님 결정 2026-09-26 마-2 "번호 글자는 진하게, 바탕만 옅게" — 바탕만 옅은 바탕(--color-surface), 글자·테두리는 입력칸 그대로.
  disabled 가 아니라 readonly 인 까닭: 읽는 프로그램이 "읽기 전용"으로 읽고, 초점이 가며, 번호를 골라 복사할 수 있다.
*/
.input[readonly] { background: var(--color-surface); }
/* 글자를 크게 키웠을 때 — 고칠 수 없는 칸의 번호는 칸 높이의 절반보다 커지지 않게(320px · 글자 200% 에서 끝자리가 잘렸다 · W4). */
.input[readonly] { font-size: min(var(--font-size-body), calc(var(--input-height) / 2)); }