/* 비상주 셀프 신청(web/apply) — 4단계 새 흐름(디자인 ilter_docs/design/handoff/virtual_apply, 10/27).
   sign.css 위에 이 화면에만 필요한 것. 인라인 style 없음(CSP) — 상태는 클래스·속성([aria-pressed] [aria-invalid] [disabled] [hidden])으로만.
   색은 아래 :root 변수(README 표, 라이트/다크). tokens.css 의 같은 이름(--ink --seal --line --sub --card)도 여기 값으로 맞춘다(오류·완료 화면도 같은 색). */
:root {
  --pg: #F6F3EC; --card: #FFFFFF; --ink: #1C1B19; --inv: #F6F3EC; --sub: #5E5A52; --line: #E2DDD2; --soft: #EFEBE2;
  --seal: #B5372E; --okbg: #E3EFE6; --okfg: #24603A; --ybg: #FBF0C4; --yfg: #6B5300; --err: #9C3D12; --wm: rgba(28, 27, 25, .07);
  --ph: #9A958B; --paper: var(--pg); --canvas: var(--pg); --surface: var(--card); --text: var(--ink); --danger: var(--err);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg: #141311; --card: #1F1E1B; --ink: #F1EDE4; --inv: #1C1B19; --sub: #A8A296; --line: #36342F; --soft: #2A2925;
    --seal: #C9473C; --okbg: #1F3327; --okfg: #8CCB9F; --ybg: #3A3318; --yfg: #E8D58A; --err: #F0A17A; --wm: rgba(241, 237, 228, .07);
    --ph: #77726A; --paper: var(--pg); --canvas: var(--pg); --surface: var(--card); --text: var(--ink); --danger: var(--err);
  }
}
:root[data-theme="dark"] {
  --pg: #141311; --card: #1F1E1B; --ink: #F1EDE4; --inv: #1C1B19; --sub: #A8A296; --line: #36342F; --soft: #2A2925;
  --seal: #C9473C; --okbg: #1F3327; --okfg: #8CCB9F; --ybg: #3A3318; --yfg: #E8D58A; --err: #F0A17A; --wm: rgba(241, 237, 228, .07);
  --ph: #77726A; --paper: var(--pg); --canvas: var(--pg); --surface: var(--card); --text: var(--ink); --danger: var(--err);
}
html, body { background: var(--pg); }
body { color: var(--ink); }
.app.va { max-width: none; background: var(--pg); }
.is-hidden { display: none !important; }
[hidden] { display: none !important; }

/* ---- 상단(sticky): ILTER · 비상주 신청 · n/4 · 진행 막대 · 고른 조건 한 줄 ---- */
.va-head { position: sticky; top: 0; z-index: 8; background: var(--pg); border-bottom: 1px solid var(--line); }
.va-head-in { max-width: 1200px; margin: 0 auto; padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.va-head-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.va-back { width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; color: var(--ink); font: 400 26px/1 var(--font-ui); cursor: pointer; }
.va-logo { font: 800 20px var(--font-doc); letter-spacing: 1px; }
.va-head-sub { font-size: 13px; color: var(--sub); }
.va-step-label { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.va-prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.va-prog i { height: 4px; border-radius: 2px; background: var(--line); }
.va-prog i.on { background: var(--ink); }
.va-sum { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.va-sum-t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--sub); }
.va-sum-t b { color: var(--ink); white-space: nowrap; }
.va-pill { flex: none; height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 700 13px var(--font-ui); cursor: pointer; }

/* ---- 본문 ---- */
.va-main { flex: 1; width: 100%; margin: 0 auto; padding: 24px 16px 40px; box-sizing: border-box; }
.va-sec { display: flex; flex-direction: column; gap: 28px; position: relative; }
.va-title { display: flex; flex-direction: column; gap: 8px; }
.va-title h1 { margin: 0; font: 800 26px/1.3 var(--font-doc); letter-spacing: -.5px; }
.va-title p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sub); }
.va-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.va-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.va-group-h b { font-size: 15px; }
.va-group-h span { font-size: 12.5px; color: var(--sub); }
.va-group.is-off .va-opts, .va-group.is-off .va-group-h b { opacity: .4; }

/* 고르기 칸(계약자·기간·보증금·내는 방법·사업자 있어요/새로 낼 예정·국적) */
.va-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.va-opts.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.va-opts.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.va-opts.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.va-opt {
  min-height: 60px; min-width: 0; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-family: var(--font-ui); text-align: center;
}
.va-opt b { font-size: 15px; word-break: keep-all; }
.va-opts.n3 .va-opt b, .va-opts.n4 .va-opt b, .va-opts.n5 .va-opt b { font-size: 14px; }
.va-opt span { font-size: 12px; opacity: .75; word-break: keep-all; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.va-opts.n5 .va-opt { min-height: 64px; padding: 6px 2px; }
.va-opts.n5 .va-opt span { font-size: 11.5px; }
.va-opt.tall { min-height: 68px; padding: 8px 10px; }
.va-opt.flat { min-height: 52px; }
.va-opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--inv); }
.va-opt:disabled { opacity: .4; cursor: not-allowed; }
.va-note { padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 13px; line-height: 1.65; color: var(--ink); }
.va-note.lg { padding: 14px 16px; font-size: 14px; line-height: 1.6; }

/* 1단계 결과: 390 = 아래 sticky 바, 넓은 화면 = 오른쪽 카드(sticky) */
.va-s1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.va-s1-left { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.va-res { display: none; }
.va-bar {
  position: sticky; bottom: 0; z-index: 6; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -14px 28px -18px rgba(0, 0, 0, .3);
}
.va-bar-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.va-bar-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-bar-l span { font-size: 12px; line-height: 1.45; color: var(--sub); }
.va-price { font-size: 28px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.va-save { flex: none; font-size: 12px; font-weight: 700; padding: 5px 8px; border-radius: 8px; background: var(--okbg); color: var(--okfg); white-space: nowrap; }
.va-floor { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--inv); }
.va-res-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.va-res-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.va-res-rows span { color: var(--sub); }
.va-res-rows b { font-variant-numeric: tabular-nums; text-align: right; }
.va-small { font-size: 12.5px; color: var(--sub); text-align: center; line-height: 1.5; }

/* 버튼 */
.va-btn {
  height: 52px; width: 100%; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: 700 16px var(--font-ui); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box;
}
.va-btn.seal { border: 0; background: var(--seal); color: #fff; }
.va-btn.ink { border-color: var(--ink); }
.va-btn:disabled { opacity: .4; cursor: not-allowed; }
.va-actions { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 3; }
.va-form-error { margin: 0; color: var(--err); font-size: 13.5px; line-height: 1.5; }
.va-form-error:empty { display: none; }

/* 입력 칸: 높이 52 · 글자 16px(iOS 확대 방지) · 오류 = 칸 아래 한 줄 + 테두리 같은 색 */
.va-fields { display: flex; flex-direction: column; gap: 16px; }
.va-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.va .va-field label, .va .va-lab { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.va-tag { font-size: 12px; font-weight: 500; color: var(--sub); font-variant-numeric: tabular-nums; }
.va-tag.read { font-weight: 600; color: var(--okfg); }
.va-tag.timer { font-weight: 600; }
.va .va-in {
  height: 52px; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font: 16px var(--font-ui); outline: none; -webkit-appearance: none; appearance: none;
}
.va .va-in::placeholder { color: var(--ph); }
.va .va-in:focus { border-color: var(--ink); }
.va .va-in[aria-invalid="true"] { border-color: var(--err); }
.va .va-in.code { font-size: 18px; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
.va-err { font-size: 12.5px; color: var(--err); }
.va-hint { font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.va-inrow { display: flex; gap: 8px; }
.va-inrow .va-in { flex: 1; min-width: 0; }
.va-inrow .va-btn { flex: none; width: auto; padding: 0 14px; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; border-color: var(--ink); }

/* 2단계 등록증 올리기 */
.va-consent { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.va-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0 4px; cursor: pointer; font-size: 14px; line-height: 1.6; color: var(--ink); }
.va-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ink); }
.va-check.center { align-items: center; padding: 0; }
.va-link { align-self: flex-start; margin-left: 32px; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--sub); text-decoration: underline; }
.va-upload {
  min-height: 148px; border-radius: 16px; border: 1.5px dashed var(--ink); background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; cursor: pointer; text-align: center; position: relative;
}
.va-upload b { font-size: 18px; }
.va-upload span { font-size: 13px; color: var(--sub); }
.va-upload.is-off { opacity: .45; cursor: not-allowed; }
.va-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.va-upload:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.va-reading { padding: 22px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.va-reading b { font-size: 17px; }
.va-reading span { font-size: 13.5px; color: var(--sub); }
.va-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.va-track i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--ink); animation: vaSlide 1.1s ease-in-out infinite; }
@keyframes vaSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.va-banner { padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.va-banner b { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; }
.va-banner.ok { background: var(--okbg); color: var(--okfg); }
.va-banner.warn { background: var(--ybg); color: var(--yfg); }
.va-banner button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: inherit; font: 700 13px var(--font-ui); text-decoration: underline; cursor: pointer; }

/* 3단계 미리보기 */
.va-wm { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 150px; align-items: center; justify-items: center; }
.va-wm span { font: 800 24px var(--font-doc); color: var(--wm); transform: rotate(-24deg); white-space: nowrap; user-select: none; }
.va-key { position: relative; z-index: 3; background: var(--card); border: 1.5px solid var(--ink); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.va-key > b { font-size: 17px; }
.va-key-rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.va-key-rows b { font-size: 13.5px; }
.va-key-rows p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.va-key-rows small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--sub); }
.va-key-rows a { color: var(--sub); font-size: 12.5px; }
.va-keychk { min-height: 52px; display: flex; gap: 10px; align-items: center; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--pg); cursor: pointer; font-size: 15px; font-weight: 700; }
.va-keychk input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }
.va-doc { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.va-doc-head { display: flex; flex-direction: column; gap: 4px; text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.va-ver { align-self: center; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--sub); }
.va-doc-head b { font: 800 21px var(--font-doc); }
.va-doc-head span { font-size: 12.5px; color: var(--sub); }
.va-doc-rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.va-doc-rows .k { font-size: 13px; font-weight: 700; color: var(--sub); }
.va-doc-rows .v { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14.5px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.va-y { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 6px; background: var(--ybg); color: var(--yfg); }
mark.va-y { display: inline; padding: 1px 6px; }
.va-full { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--pg); color: var(--ink); font: 700 14px var(--font-ui); cursor: pointer; }
.va-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.8; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.va-seals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.va-seals div { min-height: 104px; border-radius: 10px; border: 1.5px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; }
.va-seals b { font-size: 13px; }
.va-seals span { font-size: 12px; color: var(--sub); }
.va-center { font-size: 13px; line-height: 1.5; text-align: center; }

/* 4단계 */
.va-rc { padding: 12px 14px; border-radius: 12px; background: var(--soft); display: flex; flex-direction: column; gap: 10px; }
.va-rc-row { display: flex; align-items: center; gap: 10px; }
.va-rc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.va-rc-t span { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.va-rc-t small { font-size: 12px; color: var(--sub); }
.va-agrees { display: flex; flex-direction: column; gap: 2px; }
.va-agree-row { display: flex; align-items: center; gap: 6px; }
.va-agree-row .va-check { flex: 1; min-width: 0; padding: 8px 0; align-items: center; }
.va-view { flex: none; min-height: 44px; min-width: 44px; padding: 0 6px; border: 0; background: none; color: var(--sub); font: 13px var(--font-ui); text-decoration: underline; cursor: pointer; }
.va-agree-body { margin: 0 0 8px 32px; padding: 12px; border-radius: 8px; border: 1px dashed var(--line); font-size: 12.5px; line-height: 1.6; color: var(--sub); }
.va-langs { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.va-langs > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.6; }
.va-langs > div > b { font-size: 11.5px; color: var(--sub); padding-top: 2px; }
.va .id-ai-choice .agreement { background: var(--card); }

/* 5단계·오류 화면(sign.css state-screen 위) */
.va-done { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 32px 16px; }
.va-done h1 { margin: 0; font: 800 26px/1.3 var(--font-doc); }
.va-done p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sub); max-width: 320px; }
.va-done .va-btn { width: auto; padding: 0 28px; }
.va-spin { width: 48px; height: 48px; border-radius: 24px; border: 4px solid var(--line); border-top-color: var(--ink); animation: spin .9s linear infinite; }
.va-okmark { width: 64px; height: 64px; border-radius: 32px; background: var(--okbg); color: var(--okfg); display: flex; align-items: center; justify-content: center; }
.va-okmark i { width: 22px; height: 12px; border-left: 4px solid currentColor; border-bottom: 4px solid currentColor; transform: rotate(-45deg) translate(2px, -3px); }
.state-screen .retry-note { font-size: 13px; color: var(--sub); margin: -12px 0 20px; }
.state-screen button.btn + a.btn, .state-screen button.btn + button.btn { margin-top: 10px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--seal); animation: spin 0.9s linear infinite; margin-bottom: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
.topbar .brand { font: 800 18px var(--font-doc); letter-spacing: 1px; }
[data-owner-notice] { text-align: left; }
[data-owner-notice] .or-ko { font-weight: 600; }
[data-owner-notice] .or-tr { font-size: 12px; margin-top: 4px; opacity: 0.85; }
.state-screen [data-owner-notice] { margin-top: 18px; max-width: 420px; }
.notice { background: var(--ybg); color: var(--yfg); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-top: 10px; }
.notice.info { background: var(--soft); color: var(--ink); }
.id-ai-choice > .t { font-weight: 600; margin-bottom: 4px; }
.id-ai-choice .or-tr { font-size: 12px; margin-top: 4px; opacity: 0.85; }
.id-ai-choice .field-hint { font-size: 12.5px; color: var(--sub); margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) { .va-track i, .va-spin, .spinner { animation: none; } }

/* 넓은 화면(1440 시안): 1단계 = minmax(0,1fr) 420px · 오른쪽 결과 sticky, 2~4단계 = 가운데 760 */
@media (min-width: 900px) {
  .va-head-in { padding: 14px 40px 16px; }
  .va-main { max-width: 760px; padding: 48px 40px 120px; }
  .va-main.wide { max-width: 1200px; }
  .va-title h1, .va-done h1 { font-size: 36px; }
  .va-s1 { grid-template-columns: minmax(0, 1fr) 420px; }
  .va-res { position: sticky; top: 160px; display: flex; flex-direction: column; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
  .va-res > span { font-size: 13px; line-height: 1.5; color: var(--sub); }
  .va-res-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .va-res-price .va-price { font-size: 44px; letter-spacing: -1px; }
  .va-res .va-save { align-self: flex-start; font-size: 13px; padding: 6px 10px; }
  .va-bar { display: none; }
  .va-key, .va-doc { padding: 32px 36px; }
  .va-key-rows > div { grid-template-columns: 140px minmax(0, 1fr); }
  .va-doc-rows > div { grid-template-columns: 160px minmax(0, 1fr); }
  .va-wm { grid-template-columns: repeat(4, 1fr); }
}