/* 고객용 접수 화면 (V31 새 디자인) — 밝은 흰 바탕 · 코발트 파랑 포인트 · 큰 둥근 입력칸 · 얇은 진행 막대
   색: 바탕 #f4f6fb · 카드 흰색 · 글씨 #0f1830 · 포인트 코발트 #2748d8 · 강조 노랑 #f5c42c(진행 막대·표시에만)
   기능과 HTML 구조는 그대로 두고 모양만 바꿉니다. 이 파일은 고객 화면(mode-public)에만 적용됩니다. */
body.mode-public{
  --pub-bg:#f4f6fb; --pub-ink:#0f1830; --pub-sub:#4b566e; --pub-line:#dde2ee; --pub-line-2:#e9edf5;
  --pri:#2748d8; --pri-hi:#1f3bb8; --pri-tint:#eaeffd; --pri-ink:#ffffff; --hi:#f5c42c;
  --bg:var(--pub-bg); --surface:#ffffff; --surface-2:#f3f5fa; --ink:var(--pub-ink); --ink-2:var(--pub-sub); --muted:#6b7690;
  --line:var(--pub-line); --line-2:var(--pub-line-2);
  --navy:var(--pri); --navy-ink:var(--pri-ink); --tape:var(--hi); --tape-ink:#2a2410; --focus:var(--pri);
  --paper:var(--pub-bg); --thread:#d6392b; --bad:#d6392b;
  --f-head:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-num:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --r:16px; --r-sm:12px;
  --shadow:0 1px 2px rgba(15,24,48,.05),0 10px 28px -14px rgba(15,24,48,.14);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.mode-public{
  --pub-bg:#0b1020; --pub-ink:#eaeefb; --pub-sub:#b3bcd3; --pub-line:#2a3350; --pub-line-2:#222a43;
  --pri:#8da2ff; --pri-hi:#a9b9ff; --pri-tint:#1a2447; --pri-ink:#0b1020; --hi:#f5c42c;
  --surface:#141b30; --surface-2:#1a2238; --muted:#8e99b5; --thread:#ff8f80; --bad:#ff8f80;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.5) } }
:root[data-theme="dark"] body.mode-public{
  --pub-bg:#0b1020; --pub-ink:#eaeefb; --pub-sub:#b3bcd3; --pub-line:#2a3350; --pub-line-2:#222a43;
  --pri:#8da2ff; --pri-hi:#a9b9ff; --pri-tint:#1a2447; --pri-ink:#0b1020; --hi:#f5c42c;
  --surface:#141b30; --surface-2:#1a2238; --muted:#8e99b5; --thread:#ff8f80; --bad:#ff8f80;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.5) }

body.mode-public{background:var(--pub-bg);color:var(--pub-ink);font-size:16px;-webkit-font-smoothing:antialiased}
.pub-wrap{max-width:720px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}

/* 머리말: 흰 바탕에 큰 제목. 회사 이름은 작은 알약 */
.pub-head{background:var(--surface);color:var(--pub-ink);padding:40px 0 26px;border-bottom:1px solid var(--pub-line-2)}
.pub-company{display:inline-block;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--pri);background:var(--pri-tint);border-radius:999px;padding:4px 12px;letter-spacing:0}
.pub-head h1{font-family:var(--f-head);font-weight:700;font-size:clamp(32px,7.4vw,46px);line-height:1.15;letter-spacing:-.035em;margin:0;color:var(--pub-ink)}
.pub-lede{margin:14px 0 0;max-width:34em;color:var(--pub-sub);font-size:16px;line-height:1.7}

/* 진행 표시: 화면 위에 붙어 따라다니는 얇은 막대. 채운 만큼 노랑 */
.tape-progress{--p:0%;position:sticky;top:0;z-index:20;height:54px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--pub-line-2);overflow:hidden}
.tape-progress::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--pub-line-2);z-index:0}
.tape-progress::before{content:"";position:absolute;left:0;bottom:0;height:5px;width:var(--p);background:var(--hi);z-index:1;transition:width .35s ease;border-radius:0 5px 5px 0}
.tp-inner{position:relative;z-index:2;max-width:720px;height:100%;margin:0 auto;padding:0 18px 3px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tp-label{font-weight:700;font-size:14.5px;color:var(--pub-ink);background:var(--surface-2);border-radius:999px;padding:4px 12px}
.tape-progress.full .tp-label{background:var(--pri);color:var(--pri-ink)}
.tp-est{position:relative;font-weight:700;font-size:13.5px;color:var(--pri);background:var(--pri-tint);border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:370px){ .tp-extra{display:none} }
@media (prefers-reduced-motion: reduce){ .tape-progress::before{transition:none} }

/* 입력 카드 */
body.mode-public main{padding-top:20px;padding-bottom:28px}
body.mode-public #form{border:0;background:transparent;display:flex;flex-direction:column;gap:14px}
body.mode-public #form > fieldset,body.mode-public #form > details.more,body.mode-public .consent{background:var(--surface);border:1px solid var(--pub-line-2);border-radius:var(--r);box-shadow:var(--shadow)}
body.mode-public #form > fieldset{padding:22px 20px 24px}
body.mode-public legend,body.mode-public details.more > summary > span{font-family:var(--f-head);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--pub-ink)}
body.mode-public legend small,body.mode-public details.more > summary small{font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--muted);display:block;margin:4px 0 0;letter-spacing:0}
body.mode-public legend{display:block;margin-bottom:16px}
body.mode-public details.more{border-top:1px solid var(--pub-line-2)}
body.mode-public details.more > summary{padding:20px 20px;align-items:center}
body.mode-public details.more > summary::after{content:"＋";display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pri-tint);color:var(--pri);font-size:17px;font-weight:600;flex:none}
body.mode-public details.more[open] > summary::after{content:"－"}
body.mode-public details.more[open] > summary{border-bottom:1px solid var(--pub-line-2)}
body.mode-public details.more fieldset{padding:18px 20px 22px}
body.mode-public .grid,body.mode-public .grid.wide{grid-template-columns:1fr;gap:16px}
@media (min-width:600px){ body.mode-public .grid{grid-template-columns:1fr 1fr} body.mode-public .grid.wide{grid-template-columns:1fr 1fr} }
body.mode-public .f{gap:7px}
body.mode-public .f label,body.mode-public .f .lab{font-size:14.5px;font-weight:600;color:var(--pub-ink)}
body.mode-public .f .req{color:var(--thread)}
body.mode-public input[type=text],body.mode-public input[type=tel],body.mode-public input[type=email],body.mode-public input[type=number],body.mode-public select,body.mode-public textarea{
  font-size:16px;min-height:50px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface);border:1.5px solid var(--pub-line);color:var(--pub-ink);transition:border-color .15s,box-shadow .15s}
body.mode-public textarea{min-height:88px}
body.mode-public input[type=number]{padding-right:46px}
body.mode-public input::placeholder,body.mode-public textarea::placeholder{color:#9aa4bb}
body.mode-public input:focus,body.mode-public select:focus,body.mode-public textarea:focus{border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent);background:var(--surface)}
body.mode-public .inp .u{right:14px;font-size:13.5px;color:var(--muted)}
body.mode-public .seg{border:0;border-radius:999px;background:var(--surface-2);padding:4px;min-height:50px}
body.mode-public .seg span{padding:11px 4px;font-size:15.5px;border-radius:999px;color:var(--pub-sub)}
body.mode-public .seg input:checked + span{background:var(--pri);color:var(--pri-ink);box-shadow:0 2px 8px -2px color-mix(in srgb,var(--pri) 55%,transparent)}
body.mode-public .seg input:focus-visible + span{outline:2px solid var(--pri);outline-offset:2px}
body.mode-public .hint{font-size:13px}
body.mode-public .chip{padding:9px 15px;font-size:15px;border-radius:999px;background:var(--surface);border:1.5px solid var(--pub-line)}
body.mode-public .chip input{accent-color:var(--pri)}
body.mode-public .f.invalid input,body.mode-public .f.invalid select{border-color:var(--thread);box-shadow:0 0 0 4px color-mix(in srgb,var(--thread) 16%,transparent)}
body.mode-public .f.invalid > label::after{content:" — 확인해 주세요";color:var(--thread);font-weight:600}

/* 줄자로 재는 방법 */
.howto{margin:0 0 16px}
.howto summary{cursor:pointer;font-weight:600;color:var(--pri);display:inline-block;padding:6px 0}
.howto-list{margin:6px 0 4px;padding-left:20px;font-size:14.5px;line-height:1.7}
.howto-list li{margin:4px 0}

/* 동의 */
.consent{padding:22px 20px 20px}
.consent-h{font-family:var(--f-head);font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.consent .agree{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;padding:14px 14px;border:1.5px solid var(--pub-line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.consent .agree input{width:22px;height:22px;margin:0;accent-color:var(--pri);flex:none}
.consent .agree.invalid{border-color:var(--thread);box-shadow:0 0 0 4px color-mix(in srgb,var(--thread) 16%,transparent)}
.consent-terms{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0 2px 16px;font-size:13.5px;line-height:1.6;color:var(--pub-sub)}
.consent-terms dt{font-weight:700;color:var(--pub-ink)}
.consent-terms dd{margin:0}
@media (max-width:420px){ .consent-terms{grid-template-columns:1fr} .consent-terms dd{margin-bottom:6px} }
.consent .agree + .agree, .consent-terms + .agree{margin-top:10px}

/* 제출: 큰 파란 버튼. 좁은 화면에서는 아래에 붙어 따라다님 */
.btn{border-radius:var(--r-sm)}
body.mode-public .btn{border-width:1.5px;font-weight:700}
body.mode-public .btn.primary{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
body.mode-public .btn.primary:hover:not(:disabled){background:var(--pri-hi);border-color:var(--pri-hi)}
.pub-actions{border:0;padding:8px 0 0;flex-direction:column;align-items:stretch}
.btn.big{font-size:17.5px;padding:0 20px;min-height:58px;border-radius:16px;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--pri) 70%,transparent)}
.pub-actions .msg{min-height:1.4em;text-align:center}
@media (max-width:700px){
  .pub-actions{position:sticky;bottom:0;z-index:15;margin:0 -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,var(--pub-bg) 72%,transparent)}
}
.ts-box{margin:12px 0 0;display:flex;justify-content:center}

/* 접수증: 큰 번호가 보이는 깔끔한 카드 */
.done{text-align:center;padding:34px 0 20px}
.tag{position:relative;margin:0 auto 26px;width:min(320px,88vw);background:var(--surface);border:1px solid var(--pub-line-2);border-radius:24px;
  padding:56px 22px 26px;box-shadow:var(--shadow)}
.tag::before{content:"✓";position:absolute;left:50%;top:-24px;width:48px;height:48px;margin-left:-24px;border-radius:50%;background:var(--pri);color:var(--pri-ink);
  display:grid;place-items:center;font-size:24px;font-weight:700;box-shadow:0 8px 20px -6px color-mix(in srgb,var(--pri) 60%,transparent)}
.tag-hole{display:none}
.done .tag-k{margin:0;font-size:14px;font-weight:600;color:var(--pub-sub)}
.done .tag-no{margin:2px 0 6px;font-family:var(--f-head);font-weight:700;font-size:72px;line-height:1.05;letter-spacing:-.03em;color:var(--pri);font-variant-numeric:tabular-nums}
.done .tag-name{margin:0;font-weight:700;font-size:18px;color:var(--pub-ink)}
.done .tag-date{margin:4px 0 0;color:var(--muted);font-size:14px}
.done h2{font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;font-size:28px;margin:0 0 8px}
.done h2:focus{outline:none}
.done p{margin:6px auto;max-width:32em;color:var(--pub-sub);line-height:1.65}
.done .btn{margin-top:18px}

/* 바닥글 */
.pub-foot{padding:22px 0 40px;color:var(--muted);font-size:13.5px;text-align:center}
.pub-foot a{color:var(--pub-sub)}
.pub-foot .staff-link{color:var(--muted)}

/* 개인정보 처리방침 */
.policy-body{padding-top:26px;padding-bottom:20px;line-height:1.75;font-size:15.5px}
.policy-body section{background:var(--surface);border:1px solid var(--pub-line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 20px 10px;margin:0 0 14px}
.policy-body h2{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;font-size:19px;margin:0 0 10px}
.policy-body p{margin:0 0 10px;max-width:62ch}
.policy-body ul{margin:0 0 10px;padding-left:20px}
.policy-tbl{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:14px;line-height:1.55}
.policy-tbl th,.policy-tbl td{border-top:1px solid var(--line);padding:8px 8px 8px 0;text-align:left;vertical-align:top}
.policy-tbl thead th{border-top:0;color:var(--muted);font-weight:600;font-size:13px}
.policy-tbl tbody th{white-space:nowrap;padding-right:14px}
.policy-tbl small{color:var(--muted);word-break:break-all}
@media (max-width:560px){ .policy-tbl thead{display:none} .policy-tbl tr{display:block;border-top:1px solid var(--line);padding:8px 0} .policy-tbl th,.policy-tbl td{display:block;border:0;padding:2px 0} .policy-tbl tbody th{white-space:normal} }
.consent-sub{margin:6px 4px 0}

/* 예상 치수: 진행 막대 오른쪽(짧게) + 접수 버튼 위 칸(자세히) + 접수증 아래 */
body.mode-public .est-card{background:var(--surface);border:1px solid var(--pub-line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 20px 18px;position:relative;overflow:hidden}
body.mode-public .est-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--hi)}
.est-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.est-item{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:var(--pri-tint);border:0}
.est-k{font-size:13.5px;font-weight:600;color:var(--pub-sub)}
.est-big{font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;font-size:44px;line-height:1.05;color:var(--pri);font-variant-numeric:tabular-nums}
.est-big small{font-family:var(--f-body);font-size:16px;font-weight:600;margin-left:3px;color:var(--pub-sub);letter-spacing:0}
.est-sub{font-size:13px;color:var(--muted)}
.est-dims{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:0 0 12px}
.est-dims > div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 2px;border-bottom:1px solid var(--pub-line-2)}
.est-dims dt{font-size:14px;color:var(--pub-sub)}
.est-dims dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.est-dims dd small{font-weight:500;color:var(--muted);margin-left:2px;font-size:12px}
.est-note{margin:6px 0 6px;font-weight:600;font-size:14.5px;padding-left:12px;border-left:4px solid var(--pub-line);border-radius:2px}
.est-note.est-green{border-left-color:var(--ok)} .est-note.est-amber{border-left-color:var(--warn)} .est-note.est-red{border-left-color:var(--thread)}
.est-tip{margin:4px 0;font-size:13.5px;color:var(--pub-sub)}
.est-fine{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.est-done{text-align:left;max-width:560px;margin:22px auto 0}
@media (max-width:420px){ .est-dims{grid-template-columns:1fr} .est-big{font-size:38px} }

/* V30: 단체 접수 링크 표시 · 접수 확인·고치기 */
.org-banner{margin:14px 0 0;display:inline-block;background:var(--hi);color:#2a2410;font-weight:700;font-size:14.5px;border-radius:999px;padding:5px 14px}
.look-open{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pub-head .linkish{color:var(--pri);font-weight:600;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}
.look-open .linkish{display:flex;align-items:center;justify-content:center;text-align:center;font-size:14.5px;line-height:1.35;text-decoration:none;background:var(--surface);border:1.5px solid var(--pub-line);border-radius:var(--r-sm);padding:12px 14px;min-height:50px}
@media (max-width:560px){ .look-open{grid-template-columns:1fr} }
.look-open .linkish:hover{border-color:var(--pri);background:var(--pri-tint)}
.look{padding:20px 20px 16px;margin:0 0 14px;border-radius:var(--r)}
.look-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end;margin-top:12px}
.look-row .btn{height:50px}
@media (max-width:560px){ .look-row{grid-template-columns:1fr} }
.pub-editbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--hi) 28%,var(--surface));color:var(--pub-ink);border:1px solid color-mix(in srgb,var(--hi) 70%,var(--pub-line));border-radius:var(--r-sm);padding:12px 16px;margin:0 0 14px;font-weight:600;font-size:14.5px}
.est-gain{margin:6px 0;font-size:13.5px;color:var(--pub-sub);padding:10px 12px;border-radius:12px;background:var(--surface-2);border:0}