/*
  에코114 고객 웹 — 내 요청 화면 전용 스타일 — 디자인 v2 (2026-10-19)
  기준: 시안 v2 `_design/04_리디자인_시안/index.html` 의 내 요청(사장님 "너무 마음에 들어") — 지금 단계는 숲색 칸으로 크게,
  담당자는 둥근 얼굴 칸 + 전화·문자 단추 나란히, 지난·남은 단계는 짧은 줄. 옛 시안(S-040)과 생성기(tools/dev/build_my_css.py)는 v2 부터 쓰지 않는다.

  지키는 것
  - 치수·색은 tokens.css 의 변수만 쓴다. 여기에 숫자나 색을 새로 적지 않는다.
  - site.css 에 같은 줄이 이미 있는 규칙은 넣지 않는다. form.css 는 불러오지 않는다.
  - 6번(버튼 띠) · 7번(앱 안의 "←" · 담당자 카드 단추 글 통째로 아래 줄 — W30) · 8번 · 9번(탈퇴)은 동작 규칙이라 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-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); }
.receipt { padding: var(--space-5); border-radius: var(--radius-4); background: var(--color-surface); }

/* ── 2. 내 요청 배치 — 진행 줄기 · 담당자 카드 · 접수 내용 · 비어 있음 ──────────────────────── */
.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); }
.request-id { margin-top: var(--space-2); color: var(--color-text-weak); font-size: var(--font-size-small); font-weight: var(--font-weight-strong); }
.section { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.section .section-head { margin-bottom: var(--space-4); }
/* 진행 줄기 — 지금 단계만 숲색 큰 칸(site.css .process-feature), 지난·남은 단계는 바탕 없는 짧은 줄 */
.track { display: grid; gap: var(--space-1); margin-top: var(--space-5); }
.track .process-step:not(.process-feature) { padding-block: var(--space-2); background: var(--color-clear); }
.track .process-step:not(.process-feature) .process-index { box-shadow: inset var(--zero) var(--zero) var(--zero) var(--border-width-strong) var(--color-border); }
.track .process-step:not(.process-feature) h3 { font-size: var(--font-size-body); font-weight: var(--font-weight-strong); }
.process-step.is-todo .process-index,.process-step.is-todo h3 { color: var(--color-text-weak); }
.process-step.is-done .process-index { background: var(--color-primary-weak); color: var(--color-primary); box-shadow: none; }
/* 담당자 — 둥근 얼굴 칸(옅은 연두) + 이름 · 전화·문자 단추 나란히(들어가지 않으면 위아래로) */
.handler-card { display: flex; align-items: center; gap: var(--space-4); }
.handler-photo { display: flex; align-items: center; justify-content: center; width: calc(var(--service-symbol-size) + var(--space-2)); height: calc(var(--service-symbol-size) + var(--space-2)); flex-shrink: var(--zero); border-radius: var(--radius-pill); background: var(--color-primary-weak); color: var(--color-primary); }
.handler-name { flex: var(--one); min-width: var(--zero); }
.handler-name strong { display: block; font-size: var(--font-size-body); line-height: var(--line-height-section); font-weight: var(--font-weight-heavy); letter-spacing: var(--letter-spacing); }
.handler-name span { display: block; margin-top: var(--space-1); color: var(--color-text-weak); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--full), var(--card-basis)), var(--grid-flex))); gap: var(--space-2); margin-top: var(--space-5); }
.card-actions > * + * { margin-top: var(--zero); }
.summary-line { margin-top: var(--space-2); color: var(--color-text-strong); }
.empty { margin-top: var(--space-7); }
.empty p { 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); }

/* ── 3. 담당자가 아직 없을 때 ──────────────────────── */
.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. 로그인이 안 됐을 때 — 번호·인증번호 부품(접수 3단계와 같다) ──────────────────────── */
.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); }
.sms-note { margin-top: var(--space-3); }

/* ── 5. 불러오는 중 · 오류 ──────────────────────── */
.state-frame { padding: var(--space-5); border-radius: var(--radius-4); background: var(--color-surface); }
.state-frame h4 { font-size: var(--font-size-section); line-height: var(--line-height-section); }
.state-frame p { margin-top: var(--space-3); }
.state-frame .button { margin-top: var(--space-5); }
.state-frame .skeleton.block { margin-top: var(--space-5); }
.error-heading { color: var(--color-danger); }
.skeleton { height: var(--skeleton-line-height); background: var(--color-border); border-radius: var(--radius-pill); }
.skeleton + .skeleton { margin-top: var(--space-3); }
.skeleton.short { width: var(--short); }
.skeleton.block { height: var(--skeleton-block-height); border-radius: var(--radius-2); }

/* ── 6. 버튼 띠 — 일반 문서 스크롤 + 화면 아래에 붙는 띠(sticky · 접수 폼과 같다) ─────────────────────── */
/*
  실제 웹은 site.css 와 같은 까닭으로 **일반 문서 스크롤**을 쓴다. 버튼 띠를 상담 띠와 같은 방식(position: sticky)으로
  화면 아래에 붙인다 — 본문 흐름 안에 자리를 차지하므로 끝까지 내리면 마지막 내용이 띠 위에 온다. v2: 반투명 흰 띠.
  스크롤하기 전(맨 위)에 띠 윗선에 반쯤 걸친 것은 dockGuard.mjs 가 드러내거나 감춘다(아래 --dock-clip · --dock-veil · 실기 점검 W-7).
  칸에 초점이 가면 브라우저가 칸을 띠 위로 올린다 — 기준은 지금 띠의 실제 높이(--dock-block).
*/
.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; }
.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; }


/* ── 7. 이 화면에서 더한 것 ─────────────────────── */
/* 불러오는 중·오류 틀의 위 여백 */
.screen-main > .state-frame { margin-top: var(--space-6); }
/*
  앱 안(웹뷰)에서는 맨 위 "←"(홈으로)를 숨긴다 — 이 화면은 앱 하단 탭 "내 요청"의 첫 화면이라 돌아갈 곳이 없다(개발문서 §9-2).
  한 건을 연 화면(?id=)에서는 my.mjs 가 <html> 에 my-detail 을 붙여 "←" 가 다시 보이고, 목록으로 돌아간다(myView.backLinkView).
*/
html.in-app:not(.my-detail) #back { display: none; }
/*
  담당자 카드의 [전화하기] · [문자하기] — 그림 옆 칸에 단추 글이 다 들어가지 않으면 글이 **통째로 그림 아래 줄로** 간다
  (줄바꿈 허락 — flex-wrap). 320px · 글자 200% 에서 "전화하|기"로 갈리던 것(2026-09-27 W28 · 사장님 절대 규칙 — 상위 CLAUDE.md §6-1).
  같은 끊김을 전 화면에서 잰다: python tools/dev/eojeol_break.py
*/
.card-actions .button { flex-wrap: wrap; }
/* 두 단추를 나란히 둘 때 그림과 글이 한 줄에 들어가게 좌우 여백만 줄인다(v2 · 좁으면 위 줄처럼 아래 줄로) */
.card-actions .button { padding-inline: var(--space-3); }


/* ── 8. 글자를 크게 키웠을 때 ─────────────────────── */
/* 번호 칸의 예시 글자가 칸보다 길어 잘리지 않게 칸 높이의 절반보다 커지지 않게 한다(320px · 글자 200% · D-4). 손님이 치는 글자는 줄이지 않는다. */
.input::placeholder { font-size: min(1em, calc(var(--input-height) / 2)); }


/* ── 9. 탈퇴 — 맨 아래 단추 · 확인 창 · 탈퇴했어요 (사장님 결정 2026-09-26 나-1 · 나-2 · 나-4 · W16) ─────────────────────── */
/*
  · 확인 창 — 안내창(.static-note · 채팅 머리의 "안내"와 같은 부품). 창은 둘(확인 · 진행 중 접수가 있을 때 한 번 더) — 모양은 같다.
  · [탈퇴하기] — 차분한 짙은 색(--color-panel · 겁주는 빨강 대신) · 누르는 동안 짙은 회색(--color-text). 보내는 중(꺼짐)에는 꺼진 버튼 모습.
  · 맨 아래 "회원 탈퇴" — 윗선 있는 구역(.section) 안의 글자 버튼. 앱 안(웹뷰)에서는 숨긴다(앱 "더보기" 맨 아래에 같은 단추).
  · dialog:not([open]) — 창을 모르는 옛 브라우저에서 창 내용이 본문에 드러나지 않게(채팅 chat.css 와 같은 줄).
*/
/* 안내창 네 줄은 옛 시안 줄 그대로(시험) — v2 토큰으로 모서리 16 · 초록 회색 테두리가 된다 */
.static-note { width: calc(var(--full) - var(--space-6)); max-width: var(--dialog-max); max-height: calc(var(--viewport-block) - var(--space-7)); margin: auto; padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-2); background: var(--color-bg); color: var(--color-text); font: inherit; word-break: keep-all; overflow-wrap: anywhere; }
.static-note::backdrop { background: var(--color-backdrop); }
.static-note h2 { font-size: var(--font-size-section); line-height: var(--line-height-section); }
.static-note p { margin-block: var(--space-4) var(--space-5); }
dialog:not([open]) { display: none; }
.leave-dialog .field-error { margin-block: var(--zero) var(--space-4); }
.leave-actions > * + * { margin-top: var(--space-2); }
.button.calm:not(:disabled) { border-color: var(--color-panel); background: var(--color-panel); color: var(--color-on-panel); }
.button.calm:not(:disabled):active { border-color: var(--color-text); background: var(--color-text); }
.leave-area { padding-bottom: var(--space-6); }
.leave-area > .section { margin-top: var(--zero); }
html.in-app .leave-area { display: none; }