/*
  에코114 고객 웹 — 철거지원금 1분 확인 화면 전용 스타일 — 디자인 v2 (2026-10-19)
  기준: 시안 v2 `_design/04_리디자인_시안/index.html` 의 신청서 고르는 칸과 같은 모양(사장님 "너무 마음에 들어").
  옛 시안(S-050)과 생성기(tools/dev/build_jiwongeum_css.py)는 v2 부터 쓰지 않는다.

  지키는 것
  - 치수·색은 tokens.css 의 변수만 쓴다. 여기에 숫자나 색을 새로 적지 않는다.
  - site.css 에 같은 줄이 이미 있는 규칙은 넣지 않는다. form.css·my.css 는 불러오지 않는다.
  - 결과 칸(.amount-panel)은 옅은 미색 카드 — 검은·숲색으로 칠하지 않는다(9/27 사장님 "검은 칸이 버튼으로 착각" · site.css 3번).
  - 맨 아래 4번(버튼 띠를 화면 아래에 붙임)은 동작 규칙이라 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; }
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); }
/* 하나 고르기 — 칸 전체가 눌리는 큰 카드(신청서 form.css 와 같은 모양) */
.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: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); }
.choice input { width: var(--control-size); height: var(--control-size); margin: var(--zero); flex-shrink: var(--zero); accent-color: var(--color-primary); }
.selection-group { margin-top: var(--space-6); }

/* ── 2. 지원금 배치 (S-050) — 머리·제목·질문 사이 ──────────────────────── */
.page-header { gap: var(--space-2); }
.icon-button { display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); flex-shrink: var(--zero); padding: var(--zero); border: none; border-radius: var(--radius-pill); background: var(--color-clear); color: var(--color-text-strong); text-decoration: none; }
.screen-main { padding-block: var(--space-4) 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); }
.question + .question { margin-top: var(--space-7); }

/* ── 3. 결과 (S-050 결과) — 예상 한도·계산 근거·안내 띠 (대상이 아닐 수 있을 때도 같은 안내 띠) ──────────────────────── */
.amount-panel { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-4); background: var(--color-surface); }
.amount-row { align-items: baseline; }
.amount-panel .response-time { flex-wrap: wrap; max-width: var(--full); }
.amount-lead { color: var(--color-text-strong); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-section); }
.basis { margin-top: var(--space-3); }
.notice { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); background: var(--color-primary-weak); border-radius: var(--radius-2); }
.notice svg { flex-shrink: var(--zero); color: var(--color-primary); }
.notice p { color: var(--color-text-strong); font-weight: var(--font-weight-medium); }

/* ── 4. 시안과 일부러 다르게 한 곳 ─────────────────────── */
/*
  시안은 화면을 안쪽 스크롤 상자(.app-scroll)에 넣고 버튼 띠를 격자의 한 줄로 두었다.
  실제 웹은 site.css 와 같은 까닭으로 **일반 문서 스크롤**을 쓴다(안쪽 스크롤은 주소창이 접힐 때
  높이가 튀고, 아이폰에서 뒤로가기 제스처가 걸린다). 그래서 버튼 띠를 상담 띠와 같은 방식
  (position: sticky)으로 화면 아래에 붙인다 — 본문 흐름 안에 자리를 차지하므로 끝까지 내리면
  마지막 내용이 띠 위에 온다. 버튼이 글자를 가리지 않는다.
  스크롤하기 전(맨 위)에 띠 윗선에 반쯤 걸친 것은 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; }
/* 앱 안(웹뷰 · html.in-app)에서는 폰 아래 여백(제스처·버튼 막대)을 앱의 하단 탭이 이미 차지한다 — 웹이 한 번 더 비우면 버튼 밑에 빈 띠가 생긴다(2026-11-08 사장님 "버튼 밑에 공란 못생김"). 앱 안에서는 띠 아래 여백을 기본 간격만. */
html.in-app .dock { padding-bottom: var(--space-3); }
/*
  띠가 누를 수 있는 것을 가리지 않게(실기 점검 W-7 · 2026-09-27 — 사장님 폰 412×800 에서 1단계 "점포·상가"가 7px 만 보이고
  나머지가 [다음] 띠 밑에 깔려, 누르면 [다음]이 눌렸다). 값은 모두 dockGuard.mjs 가 화면에서 재어 넣는다 — 값이 없으면 전과 같다.
  · 스크롤하기 전(맨 위)에만: --dock-clip 은 띠 윗부분(윗선 ~ 첫 버튼 위끝)을 잘라 밑의 것을 드러내고(잘린 자리는 그리지도
    누르지도 않는다 · 버튼은 제자리), --dock-veil 은 띠 바로 위를 흰 바탕으로 덮어 반쯤 걸친 것을 통째로 감춘다(덮은 자리를
    누르면 아무 일도 없다). 스크롤을 시작하면 둘 다 빠진다.
  · 칸에 초점이 가면 브라우저가 칸을 띠 위로 올린다 — 그 기준을 지금 띠의 실제 높이(--dock-block)로. 전에는 상담 띠 기준 높이
    (--dock-reserve · 앱 안에서는 0)라 두 줄 띠(4단계 · 완료)와 앱 안에서 칸이 띠 밑에 남았다. 띠 안의 버튼 자신에 초점이 갈 때는
    화면을 움직이지 않는다(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; }