/* ===== solv 시민 모바일 접수 (실페이지) ===== */
:root{
  --font-sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','NanumSquare_ac','Noto Sans KR',system-ui,sans-serif;
  --font-mono:'SF Mono',ui-monospace,'Menlo','Consolas',monospace;
  --ground:#E9EEF4; --surface:#fff; --surface-2:#F4F7FB; --surface-3:#EAF0F7;
  --ink:#15181A; --ink-2:#556172; --ink-3:#6E7A8C; --line:#E3E9F1; --line-2:#D2DBE7;
  --blue:#0096FF; --blue-strong:#0074E4; --blue-wash:#E4F2FF; --blue-tint:#F1F8FF;
  --ok:#12A66C; --ok-wash:#E1F4EC; --warn:#DE8A1B; --warn-wash:#F9EFD8; --risk:#DE473E; --risk-wash:#FAE6E3;
  --kakao:#FEE500; --kakao-ink:#3C1E1E;
  --shadow-sm:none;
  --shadow-md:none;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0A0F16; --surface:#141B24; --surface-2:#1B2530; --surface-3:#212E3B;
    --ink:#EAF1F8; --ink-2:#A6B3C2; --ink-3:#6D7A8B; --line:#243040; --line-2:#2E3B4C;
    --blue:#3EAEFF; --blue-strong:#2E9BF0; --blue-wash:#102942; --blue-tint:#0E2138;
    --ok:#2FCB8C; --ok-wash:#0E2A20; --warn:#E8A542; --warn-wash:#2B2110; --risk:#F0645B; --risk-wash:#2C1613;
    --shadow-sm:none; --shadow-md:none;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--ground);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
a{color:inherit}

/* 앱셸 (모바일; 데스크톱에서도 중앙 모바일 뷰) */
/* min-height: 모바일 브라우저 크롬 대응(dvh), 미지원 시 100vh 폴백 */
.app{max-width:500px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--surface-2);display:flex;flex-direction:column;position:relative;overflow-x:clip;border-left:1px solid var(--line);border-right:1px solid var(--line)}

.cbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:12px 16px}
.cbar .back{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);flex:none;cursor:pointer;text-decoration:none}
.cbar .back svg{width:18px;height:18px}
.cbar .cb-logo{display:flex;align-items:center}
.cbar .cb-logo img{height:20px;display:block}
.cbar .step-of{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-3);font-family:var(--font-mono)}
.pbar{height:3px;background:var(--surface-3)}
.pbar i{display:block;height:100%;background:var(--blue);transition:width .35s ease;width:25%}

.view{flex:1;padding:20px 18px 120px}
/* 짧은 화면 세로 균형: 콘텐츠가 짧으면 세로 중앙 정렬, 길면 위에서부터(넘침 없이 스크롤).
   .view 는 .app(flex column)의 flex:1 자식이라, 콘텐츠가 뷰포트보다 크면 자연히 위 정렬된다. */
.view.vcenter{display:flex;flex-direction:column;justify-content:center}
.view.vcenter>form{width:100%}
.cstep{display:none}
.cstep.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.eyebrow{font-size:12px;font-weight:800;color:var(--blue);margin-bottom:6px}
.h-step{font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.25;margin:0 0 6px;text-wrap:balance}
.sub-step{font-size:13.5px;color:var(--ink-2);margin:0 0 18px;line-height:1.5}

.fbanner{display:flex;align-items:center;gap:12px;padding:15px;border-radius:var(--r-md);background:var(--blue-tint);border:1px solid var(--blue-wash);margin-bottom:18px}
.fbanner .pin{width:42px;height:42px;border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--blue);flex:none;box-shadow:var(--shadow-sm)}
.fbanner .pin svg{width:22px;height:22px}
.fbanner .k{font-size:11.5px;color:var(--ink-3);font-weight:600}
.fbanner .v{font-size:16px;font-weight:800;letter-spacing:-.02em;margin-top:1px}

.hero-card{text-align:center;padding:26px 18px 22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.hero-illust{width:96px;height:96px;margin:2px auto 14px;border-radius:26px;background:var(--blue);display:grid;place-items:center;box-shadow:0 16px 30px -12px color-mix(in srgb,var(--blue) 60%,transparent)}
.hero-illust svg{width:50px;height:50px;color:#fff}
.hero-card h2{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
.hero-card p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.55}
.assure{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.assure .a{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);padding:6px 11px;border-radius:999px}
.assure .a svg{width:13px;height:13px;color:var(--blue)}

.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.catbtn{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 15px;border:2px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s,background .15s,transform .1s}
.catbtn:active{transform:scale(.98)}
.catbtn .ci{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.catbtn .ci svg{width:23px;height:23px}
.catbtn .cn{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.catbtn .cd{font-size:11.5px;color:var(--ink-3);font-weight:500;margin-top:-4px}
.catbtn[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint)}
.catbtn.full{grid-column:1 / -1;flex-direction:row;align-items:center}
.catbtn.full .cn{margin:0}

.field-label{font-size:13px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:6px}
.field-label .opt{font-size:11px;font-weight:600;color:var(--ink-3);background:var(--surface-3);padding:2px 7px;border-radius:6px}
.ta{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:14px;font-family:inherit;font-size:15px;color:var(--ink);resize:none;min-height:120px;line-height:1.55}
.ta:focus{border-color:var(--blue);outline:none}
.ta:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.photorow{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.photo-add{width:66px;height:66px;border-radius:12px;border:1.5px dashed var(--line-2);background:var(--surface-2);color:var(--ink-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-size:10.5px;font-weight:700;font-family:inherit}
.photo-add svg{width:20px;height:20px}
.photo{width:66px;height:66px;border-radius:12px;background:#c9d4df;background-size:cover;background-position:center;position:relative}
.photo .rm{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:var(--risk);color:#fff;display:grid;place-items:center;font-size:12px;cursor:pointer;line-height:1;font-weight:700}

.ai-help{display:flex;gap:11px;padding:14px;border-radius:var(--r-md);background:var(--blue-wash);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);margin-top:16px}
.ai-help .spark{width:30px;height:30px;border-radius:9px;background:var(--blue);display:grid;place-items:center;flex:none}
.ai-help .spark svg{width:17px;height:17px;color:#fff}
.ai-help .txt{font-size:13px;color:var(--ink-2);line-height:1.5}
.ai-help .txt b{color:var(--blue-strong);font-weight:800}

.choice{display:grid;gap:11px}
.choicebtn{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:left;font-family:inherit;width:100%}
.choicebtn .rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:none;margin-top:1px;display:grid;place-items:center}
.choicebtn .rd svg{width:12px;height:12px;color:#fff;opacity:0}
.choicebtn .ct{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.choicebtn .cds{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.choicebtn[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint)}
.choicebtn[aria-pressed="true"] .rd{border-color:var(--blue);background:var(--blue)}
.choicebtn[aria-pressed="true"] .rd svg{opacity:1}
.contact-fields{margin-top:14px;display:grid;gap:10px;padding:15px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.inp{width:100%;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 13px;font-family:inherit;font-size:14.5px;color:var(--ink)}
.inp:focus{border-color:var(--blue);outline:none}
.inp:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.ifield{display:block}
.ifield .ilbl{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0 0 6px}
.ifield + .ifield{margin-top:10px}
.ifield .ilbl em{font-style:normal;color:var(--ink-3);font-weight:600;margin-left:3px}
.member-badge{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--blue-strong);background:var(--blue-wash);border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);padding:9px 12px;border-radius:10px;font-weight:700}
.member-badge svg{width:15px;height:15px}
.agree{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2);margin-top:4px;cursor:pointer}
.agree .chk{width:20px;height:20px;border-radius:6px;border:2px solid var(--line-2);display:grid;place-items:center;flex:none}
.agree .chk svg{width:12px;height:12px;color:#fff;opacity:0}
.agree.on .chk{background:var(--blue);border-color:var(--blue)}
.agree.on .chk svg{opacity:1}

.success{text-align:center;padding:24px 6px}
.check-ring{width:104px;height:104px;margin:8px auto 18px;border-radius:50%;background:var(--ok-wash);display:grid;place-items:center}
.check-ring svg{width:52px;height:52px;color:var(--ok)}
.success h2{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.success p{font-size:14px;color:var(--ink-2);margin:0 auto;max-width:32ch;line-height:1.55}
.receipt{margin:20px 0 0;padding:16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:left}
.receipt .rrow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13.5px}
.receipt .rrow + .rrow{border-top:1px dashed var(--line)}
.receipt .rrow .rk{color:var(--ink-3);font-weight:600}
.receipt .rrow .rv{font-weight:700;text-align:right}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;line-height:1}
.chip.blue{background:var(--blue-wash);color:var(--blue-strong)}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.warn{background:var(--warn-wash);color:var(--warn)}
.chip.crit{background:var(--risk-wash);color:var(--risk)}
.chip.idle{background:var(--surface-3);color:var(--ink-2)}

.cta-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:500px;padding:12px 18px 18px;background:var(--surface);border-top:1px solid var(--line);z-index:20}
.btn{width:100%;height:54px;border-radius:15px;border:none;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.01em;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:disabled{background:var(--line-2);color:var(--ink-3);cursor:default}
.btn.soft{background:var(--surface);color:var(--blue-strong);border:1.5px solid var(--blue-wash)}
.cta-hint{text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:9px}

/* 처리현황 타임라인 (track) */
.track-head{padding:2px 0 16px}
.track-head .tt{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.tl{display:flex;flex-direction:column;margin-top:6px}
.tl .it{display:grid;grid-template-columns:26px 1fr;gap:12px}
.tl .it .mk{display:flex;flex-direction:column;align-items:center}
.tl .it .kd{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-3);z-index:1}
.tl .it .kd svg{width:14px;height:14px}
.tl .it .ln{width:2px;flex:1;background:var(--line);margin:2px 0}
.tl .it:last-child .ln{display:none}
.tl .it.done .kd{background:var(--ok);color:#fff}
.tl .it.done .ln{background:var(--ok)}
.tl .it.cur .kd{background:var(--blue);color:#fff;outline:4px solid var(--blue-wash)}
.tl .it .bd{padding-bottom:20px}
.tl .it .bt{font-size:15px;font-weight:800;letter-spacing:-.01em}
.tl .it .bm{font-size:12px;color:var(--ink-3);margin-top:2px;font-family:var(--font-mono)}
.tl .it .reply{margin-top:9px;padding:12px;border-radius:12px;background:var(--blue-tint);border:1px solid var(--blue-wash);font-size:12.5px;color:var(--ink-2);line-height:1.5}
/* 처리 현황의 '처리 사진' — 담당자가 처리 후 올린 사진(민원인이 결과를 눈으로 확인한다) */
.tl .it .tphotos{margin-top:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tl .it .tphotos a{display:block;aspect-ratio:1;border-radius:10px;background:#c9d4df center/cover no-repeat;border:1px solid var(--line)}
.notice-box{padding:14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.55;text-align:center}

/* 인라인 필드 검증 오류(입력 바로 아래 · 상단이 아닌 필드 근처) */
.field-err{display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--risk);margin:-4px 0 2px;line-height:1.4}
.field-err.on{display:flex}
.field-err svg{width:14px;height:14px;flex:none}
.inp.invalid,.ta.invalid{border-color:var(--risk)}

/* 조회/안내용 친근 아이콘(짧은 화면 상단 시각 앵커) */
.lead-ic{width:72px;height:72px;margin:0 auto 16px;border-radius:22px;background:var(--blue-wash);color:var(--blue-strong);display:grid;place-items:center}
.lead-ic svg{width:36px;height:36px}
.lead-ic.risk{background:var(--risk-wash);color:var(--risk)}
.help-line{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:12px 2px 0;display:flex;gap:7px}
.help-line svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-3)}
.foot-link{text-align:center;margin-top:20px;font-size:12.5px;color:var(--ink-3)}
.foot-link a{color:var(--blue-strong);text-decoration:none;font-weight:700}
/* 인라인 오류 배너(강조·아이콘 · 상단 not-found 등) */
.alert-line{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:12px;background:var(--risk-wash);border:1px solid color-mix(in srgb,var(--risk) 26%,transparent);color:var(--risk);font-size:13px;font-weight:600;line-height:1.45;margin-bottom:14px;text-align:left}
.alert-line svg{width:18px;height:18px;flex:none}

/* 인증 단계 표시 pill(2차 인증 흐름) */
.step-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--blue-strong);background:color-mix(in srgb,var(--blue) 12%,transparent);border:1px solid color-mix(in srgb,var(--blue) 26%,transparent);padding:5px 11px;border-radius:999px;margin-bottom:12px}
.step-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ── Font Awesome 아이콘(구 인라인 SVG 대체) — 컨테이너별 크기·색 ── */
.cbar .back i{font-size:15px}
.fbanner .pin i{font-size:19px}
.hero-illust i{font-size:42px;color:#fff}
.assure .a i{font-size:11px;color:var(--blue)}
.catbtn .ci i{font-size:20px}
.photo-add i{font-size:16px}
.ai-help .spark i{font-size:13px;color:#fff}
.choicebtn .rd i{font-size:10px;color:#fff;opacity:0}
.choicebtn[aria-pressed="true"] .rd i{opacity:1}
.member-badge i{font-size:13px}
.agree .chk i{font-size:10px;color:#fff;opacity:0}
.agree.on .chk i{opacity:1}
.check-ring i{font-size:38px;color:var(--ok)}
.btn i{font-size:15px}
.tl .it .kd i{font-size:11px}
.field-err i{font-size:13px;flex:none;margin-top:2px}
.lead-ic i{font-size:30px}
.help-line i{font-size:13px;flex:none;margin-top:2px;color:var(--ink-3)}
.alert-line i{font-size:15px;flex:none;margin-top:2px}

/* 접수 랜딩 브랜드 히어로(상단바 없는 1단계) */
.hero-brand{width:92px;height:92px;border-radius:24px;display:block;margin:2px auto 18px}

/* ── 담당자 QR 카메라 스캐너 ── */
button.scan-cta{width:100%;text-align:left;font-family:inherit;cursor:pointer;border:none}
.scan-cta .go{margin-left:auto;flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;font-size:16px}
.qrscan{position:fixed;inset:0;z-index:80;background:#000;display:flex;align-items:center;justify-content:center}
.qrscan[hidden]{display:none}
.qrscan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qrscan-frame{position:relative;width:min(68vw,300px);aspect-ratio:1;border-radius:22px;box-shadow:0 0 0 200vmax rgba(0,0,0,.45);outline:3px solid rgba(255,255,255,.9);z-index:1}
.qrscan-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(50% - min(34vw,150px) - 64px);z-index:2;color:#fff;font-size:13.5px;font-weight:700;background:rgba(0,0,0,.55);border-radius:16px;padding:10px 18px;max-width:92vw;text-align:center;line-height:1.5;word-break:keep-all}
.qrscan-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;z-index:2;height:42px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.45);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.qrscan-close i{margin-right:4px}

/* ── 담당자 앱: 시설 자산 정보 카드 ── */
.asset-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.asset-dd{font-size:12.5px;color:var(--ink-2)}
.asset-dd b{font-family:var(--font-mono);font-size:12.5px}
.asset-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13.5px}
.asset-dl dt{color:var(--ink-3);font-weight:600;white-space:nowrap}
.asset-dl dd{margin:0;color:var(--ink);font-weight:700;text-align:right;word-break:break-all}
.asset-dl dd .ex{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:6px;background:#FDECEA;color:#C43B32;font-size:11.5px;font-weight:800;vertical-align:1px}
.asset-empty{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.6}