/* 온누리페이백 접수 — 모바일 앱 화면 (화면설계서 Case 1 와이어프레임 기준)
   상단바(뒤로·화면명·단계 n/6) + 본문 + 하단 고정 버튼. 데스크톱에서는 가운데 480px 열.
   글꼴 Pretendard(CDN, 실패 시 시스템 글꼴). 본문 15px, 핵심 값만 굵게, 선은 연하게 */
:root {
  --app-primary: #1e4fd8;
  --app-primary-press: #173fae;
  --app-primary-weak: #eef3ff;
  --app-primary-line: #c7d5fa;
  --app-ink: #191f28;
  --app-ink-2: #4e5968;
  --app-muted: #8b95a1;
  --app-line: #e5e8eb;
  --app-line-strong: #d1d6db;
  --app-panel: #f5f6f8;
  --app-dark: #2b2f36;
  --app-danger: #e5484d;
  --app-ok: #0f9d6b;
  --app-radius: 14px;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 30, 79, 216;
  --bs-body-color: var(--app-ink);
  --bs-border-color: var(--app-line);
  --bs-body-font-size: .9375rem;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 12px;
}

html { font-size: 16px; background: #eceef1; -webkit-text-size-adjust: 100%; }

body.app {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: .9375rem;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--app-ink);
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

strong, b { font-weight: 600; }

/* 상단바 */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .25rem;
  height: 3.5rem;
  padding: 0 1.25rem 0 .375rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 0 var(--app-line);
}
.app-bar .app-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--app-ink);
}
.app-bar .app-back:active { background: var(--app-panel); }
.app-bar .app-back svg { width: 1.375rem; height: 1.375rem; }
.app-bar .app-title { flex: 1; margin: 0 0 0 .25rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.app-bar .app-step { color: var(--app-primary); background: var(--app-primary-weak); border: 1px solid var(--app-primary-line); border-radius: 999px;
                    padding: .125rem .625rem; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 단계 진행 선 (상단바 아래) */
.app-bar .app-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.app-bar .app-progress i { display: block; height: 100%; background: var(--app-primary); border-radius: 0 3px 3px 0; }
.app-bar .app-menu { font-size: .875rem; color: var(--app-muted); }

/* 본문 */
.app-body { flex: 1; padding: 1.25rem 1.25rem calc(var(--app-actions-h, 7rem) + .75rem); }   /* 아래 고정 버튼 줄 높이만큼 비워 마지막 줄이 가려지지 않게 (site.js 가 실제 높이를 잼) */
.app-body.no-actions { padding-bottom: 2rem; }
.app-lead { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
.section-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.app-note { font-size: .8125rem; color: var(--app-muted); line-height: 1.55; }
.app-meta { font-size: .8125rem; color: var(--app-muted); margin-bottom: 1rem; }
.text-sub { color: var(--app-ink-2); }

/* 하단 고정 버튼 — 화면(뷰포트) 맨 아래에 고정. 11-06 운영 Android WebView 에서 sticky 가 목록이 늘거나 키보드를 닫은 뒤
   예전 높이로 계산돼 화면 중간에 뜨고 아래가 비는 문제 → fixed 로 바꾸고, 본문 아래 여백은 버튼 줄 실제 높이(--app-actions-h)만큼 */
.app-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 20;
  display: grid;
  gap: .5rem;
  /* 아래 여백: 제스처·내비게이션 바(safe-area)가 있으면 그만큼만, 없으면 .5rem (11-06 사용자 "버튼 위치를 아래로") — 두 번 더하지 않음 */
  padding: .5rem 1.25rem max(.5rem, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff .5rem);
}

/* 버튼 */
.btn { transition: background-color .12s, border-color .12s, color .12s, transform .08s; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn-app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.375rem;
  border-radius: var(--app-radius);
  font-size: 1rem;
  font-weight: 600;
}
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-press); --bs-btn-hover-border-color: var(--app-primary-press);
               --bs-btn-active-bg: var(--app-primary-press); --bs-btn-active-border-color: var(--app-primary-press);
               --bs-btn-disabled-bg: #e5e8eb; --bs-btn-disabled-border-color: #e5e8eb; --bs-btn-disabled-color: #b0b8c1; --bs-btn-disabled-opacity: 1; }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--app-primary-weak);
                       --bs-btn-hover-color: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary-line);
                       --bs-btn-active-bg: var(--app-primary-weak); --bs-btn-active-color: var(--app-primary); --bs-btn-active-border-color: var(--app-primary-line); }
.btn-line { border: 1px solid var(--app-line-strong); background: #fff; color: var(--app-ink-2); border-radius: 10px; padding: .5rem .875rem; font-size: .875rem; font-weight: 500; }
.btn-line:active { background: var(--app-panel); }
.btn-text-danger { color: var(--app-muted); background: none; border: 0; font-size: .8125rem; padding: .5rem; text-decoration: underline; text-underline-offset: 3px; }

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(30, 79, 216, .15);
  border-color: var(--app-primary);
}

/* 입력 */
.form-label { font-size: .875rem; font-weight: 600; color: var(--app-ink-2); margin-bottom: .5rem; }
.form-label .req { color: var(--app-primary); }
.form-control, .form-select { border-color: var(--app-line-strong); color: var(--app-ink); }
.form-control::placeholder { color: #b0b8c1; }
.form-control-lg, .form-select-lg { min-height: 3.25rem; border-radius: 12px; font-size: 1rem; padding-left: 1rem; padding-right: 1rem; }
.form-check-input { width: 1.375rem; height: 1.375rem; margin-top: 0; border-color: var(--app-line-strong); border-radius: 6px !important; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-label { padding-left: .5rem; font-size: .9375rem; }

/* 칩 (신분증 종류·구간 탭) */
.chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips[hidden] { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  border: 1px solid var(--app-line-strong);
  background: #fff;
  color: var(--app-ink-2);
  border-radius: 999px;
  padding: 0 .875rem;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.btn-check:checked + .chip, .chip.active { border-color: var(--app-primary); background: var(--app-primary-weak); color: var(--app-primary); font-weight: 600; }
.chip.dark.active { border-color: var(--app-ink); background: var(--app-ink); color: #fff; }
.chip-label { display: inline-flex; align-items: center; background: var(--app-primary-weak); color: var(--app-primary); border-radius: 8px; padding: .25rem .625rem; font-weight: 600; font-size: .8125rem; }

/* 카드·패널 */
.app-card { border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; margin-bottom: .75rem; overflow: hidden; }
.app-card.pad { padding: 1rem 1.125rem; }
.app-card.accent { border-color: var(--app-primary-line); box-shadow: 0 0 0 1px var(--app-primary-line); }
.app-panel { background: var(--app-panel); border-radius: var(--app-radius); padding: 1.125rem; margin-bottom: .75rem; }
.app-rows > * { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .8125rem 1.125rem; }
.app-rows > * + * { border-top: 1px solid var(--app-line); }
.app-rows .k { color: var(--app-ink-2); font-size: .875rem; }
.app-rows .v { font-weight: 600; text-align: right; }
.app-rows .v.big { font-size: 1.125rem; font-weight: 700; }
.kv { display: flex; justify-content: space-between; gap: .75rem; padding: .3125rem 0; font-size: .875rem; }
.kv > :first-child { color: var(--app-ink-2); }
.kv .v { font-weight: 600; text-align: right; color: var(--app-ink); }
.kv.limit { font-size: .9375rem; }
.kv.limit > span { white-space: nowrap; }
.app-hero { background: var(--app-primary); color: #fff; border-radius: var(--app-radius); padding: 1.25rem 1.375rem; margin-bottom: .75rem; }
.app-hero .label { font-size: .875rem; opacity: .85; }
.app-hero .amount { font-size: 2.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.app-hero .small { opacity: .8; font-size: .8125rem; }
/* M-05 지급 금액: 금액(위) + 인정 영수증(아래) 한 카드 */
.pay-card { margin-top: .25rem; }
.pay-card .app-hero { border-radius: 0; margin: 0; padding: 1.75rem 1.375rem 1.5rem; text-align: center; }
.pay-card .app-hero .amount { font-size: 2.5rem; }
.pay-card .app-rows .total { background: var(--app-panel); }
.pay-card .app-rows .total .k { color: var(--app-ink); font-weight: 600; }
.pay-card .app-rows .total .v { font-size: 1.0625rem; font-weight: 700; }
.text-ok { color: var(--app-ok); }

/* 검증 4항목 (M-04) */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.check-grid > span { border: 1px solid var(--app-line); border-radius: 10px; padding: .5rem .75rem; font-size: .8125rem; color: var(--app-ink-2); }
.check-grid > span.bad { border-color: #fbd0d1; color: #c5282e; background: #fff5f5; }

/* 촬영 버튼 (M-01 신분증 · M-03 영수증): 동그란 카메라 버튼 하나 — 누르면 단말 카메라, 촬영 확인 즉시 인식 */
.camera-cta { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 1.5rem 0 1rem; text-align: center; }
.camera-cta-label { font-weight: 700; color: var(--app-ink); margin-top: .25rem; }
.shutter { display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; border-radius: 50%;
           border: 0; background: var(--app-primary); color: #fff; box-shadow: 0 0 0 6px var(--app-primary-weak), 0 6px 16px rgba(30, 79, 216, .28); }
.shutter:active { transform: scale(.94); }
.shutter:disabled { opacity: .55; }
/* 화면 가운데 로딩 (영수증 AI 분석 중) — 화면 전체를 덮어 다른 버튼을 누르지 못하게 */
.app-loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
               background: rgba(255, 255, 255, .88); text-align: center; }
.app-loading[hidden] { display: none; }
.app-loading .spinner { width: 3rem; height: 3rem; border: 4px solid var(--app-primary-weak); border-top-color: var(--app-primary); border-radius: 50%;
                        animation: app-spin .8s linear infinite; }
.app-loading .title { font-size: 1.0625rem; font-weight: 700; color: var(--app-ink); }
.app-loading .sub { font-size: .8125rem; color: var(--app-muted); margin-top: -.5rem; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.divider-text { display: flex; align-items: center; gap: .75rem; color: var(--app-muted); font-size: .8125rem; margin: 1.5rem 0 1rem; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; border-top: 1px solid var(--app-line); }

/* 상단 알림 */
.app-alert { border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; line-height: 1.5; }
.app-alert.danger { background: #fff1f1; color: #c5282e; }
.app-alert.ok { background: #ecf8f2; color: #0b7a53; }
.app-alert.warn { background: #fff8e6; color: #8a5a00; }

/* M-06B 일련번호 */
.type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: .875rem; }
.type-tab { border: 1px solid var(--app-line); border-radius: 12px; background: #fff; padding: .75rem .875rem; text-align: left; line-height: 1.45; }
.type-tab strong { display: block; font-size: 1rem; font-weight: 700; color: var(--app-ink); }
.type-tab span { font-size: .8125rem; color: var(--app-muted); }
.type-tab span b { color: var(--app-ink); }
.type-tab.active { border-color: var(--app-primary); box-shadow: 0 0 0 1px var(--app-primary); background: var(--app-primary-weak); }
.type-tab.active strong, .type-tab.active span { color: var(--app-primary); }

.voucher-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .375rem;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: .875rem;
}
.voucher-item {
  height: 2.75rem;
  border: 1px solid var(--app-line-strong);
  background: #fff;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--app-ink);
}
.voucher-item:active:not(:disabled) { transform: scale(.96); }
.voucher-item.selected { background: var(--app-primary); border-color: var(--app-primary); color: #fff; font-weight: 700; }
.voucher-item[hidden] { display: none; }
/* 선택 요약: 선택한 상품권 1장당 한 줄(권종 · 전체 일련번호, 뒷자리 강조 · 삭제) + 매수·금액·일치 */
.sum-bar { border: 1px solid var(--app-line); background: var(--app-panel); border-radius: 12px; padding: .75rem 1rem; font-size: .875rem; color: var(--app-ink-2); }
.sum-bar .sum-line { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sel-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.sel-list[hidden] { display: none; }
.sel-list li { display: flex; align-items: center; gap: .5rem; min-width: 0; background: #fff; border: 1px solid var(--app-primary-line); border-radius: 10px;
               padding: .375rem .375rem .375rem .75rem; }
.sel-list .info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sel-list .t { font-size: .75rem; color: var(--app-muted); }
.sel-list .serial { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; font-size: 1.125rem;
                    color: var(--app-ink-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.sel-list .serial strong { color: var(--app-primary); font-weight: 700; }
.sel-list .del { flex: none; min-width: 3.25rem; height: 2.75rem; border: 1px solid var(--app-line-strong); border-radius: 8px; background: #fff;
                 color: var(--app-ink-2); font-size: .875rem; font-weight: 600; }
.sel-list .del:active { background: var(--app-panel); }
.sel-list li.bad { border-color: #fbd0d1; background: #fff5f5; }
.sel-list li.bad .t, .sel-list li.bad .serial strong { color: #c5282e; }
.sum-bar.ok { border-color: var(--app-primary-line); background: var(--app-primary-weak); color: var(--app-ink); }
.sum-bar .badge-ok { font-weight: 700; color: var(--app-muted); white-space: nowrap; }
.sum-bar.ok .badge-ok { color: var(--app-primary); }
/* 진행 막대: 선택 금액 ÷ 지급액, 넘으면 경고색 */
.sum-progress { height: .5rem; border-radius: 999px; background: #e5e8eb; overflow: hidden; margin-bottom: .625rem; }
.sum-progress .fill { height: 100%; width: 0; border-radius: inherit; background: var(--app-primary); transition: width .2s ease; }
.sum-bar .sel-amount { font-variant-numeric: tabular-nums; }
.sum-bar .sel-amount strong { font-weight: 700; color: var(--app-ink); }
.sum-bar .sel-amount #sel-sum { font-size: 1.0625rem; }
.sum-bar .sel-amount .pay { color: var(--app-primary); font-weight: 600; }
.sum-bar.over { border-color: #fbd0d1; background: #fff5f5; }
.sum-bar.over .sum-progress .fill { background: #e5484d; }
.sum-bar.over .sel-amount strong, .sum-bar.over .badge-ok { color: #c5282e; }

/* 목록 행 (홈·환급소 선택) */
.list-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .9375rem 1.125rem; border: 1px solid var(--app-line); border-radius: var(--app-radius);
            background: #fff; color: var(--app-ink); text-decoration: none; margin-bottom: .5rem; text-align: left; font-size: .9375rem; }
.list-row:active:not(:disabled) { background: var(--app-panel); }
.list-row:disabled { color: #b0b8c1; background: var(--app-panel); }
.list-row.current { border-color: var(--app-primary); box-shadow: 0 0 0 1px var(--app-primary); background: var(--app-primary-weak); }
.list-row small { color: var(--app-muted); font-size: .8125rem; }

/* 접수 정보 카드 (접수 단계 공통 _Header) */
.rcpt-card { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border: 1px solid var(--app-line); border-radius: 12px;
             background: #fff; padding: .625rem .875rem; margin-bottom: .875rem; }
.rcpt-card .no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; font-size: .8125rem; font-weight: 700; color: var(--app-primary); }
.rcpt-card .center { font-size: .8125rem; color: var(--app-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcpt-card .who { flex: none; display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--app-ink); }
.rcpt-card .tel { border: 1px solid var(--app-line); border-radius: 999px; padding: .0625rem .5rem; font-weight: 500; color: var(--app-ink-2); font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }

/* M-06B 지급액 카드 · 단계 제목 · 뒷자리 검색 · 하단 버튼 쌍 */
.pay-box { background: var(--app-primary-weak); border: 1px solid var(--app-primary-line); border-radius: 14px; padding: .875rem 1rem; margin-bottom: 1rem; }
.pay-box .row-line { display: flex; justify-content: space-between; align-items: baseline; }
.pay-box .k { font-weight: 700; color: var(--app-primary); }
.pay-box .v { font-size: 1.75rem; font-weight: 800; color: var(--app-primary); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pay-box .v small { font-size: 1rem; font-weight: 700; margin-left: .125rem; }
.pay-box p { margin: .25rem 0 0; font-size: .8125rem; color: var(--app-ink-2); }
.step-label { display: flex; align-items: center; gap: .375rem; font-weight: 700; font-size: .9375rem; color: var(--app-ink); margin-bottom: .5rem; }
.step-label .num { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
                   background: var(--app-ink); color: #fff; font-size: .75rem; }
.step-label .cur-type { font-size: .8125rem; font-weight: 500; color: var(--app-muted); }
.search-box { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--app-line-strong); border-radius: 12px; background: #fff;
              padding: 0 .5rem 0 .875rem; height: 3.25rem; margin-bottom: .75rem; }
.search-box:focus-within { border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-weak); }
.search-box svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--app-muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1.25rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box .clear { flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--app-panel); color: var(--app-muted); font-size: 1.125rem; line-height: 1; }
.search-box .clear[hidden] { display: none; }
.action-pair { display: grid; grid-template-columns: 1fr 2.2fr; gap: .5rem; }
.action-pair .sub { background: #fff; border: 1px solid var(--app-line-strong); color: var(--app-ink-2); }
.btn-app .count { margin-left: .5rem; padding: .0625rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .8125rem; font-weight: 700; }
.btn-app .count[hidden] { display: none; }

/* M-02 신원 식별 결과 카드 (재촬영 버튼 포함) · 페이백 한도 카드 · 안내 박스 */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; }
.id-card { border: 1px solid var(--app-primary-line); border-radius: 16px; background: #fff; overflow: hidden; margin-bottom: .875rem; }
.id-card .id-body { background: var(--app-primary-weak); padding: .875rem 1rem .75rem; }
.id-card .id-badge { display: inline-flex; align-items: center; gap: .3rem; background: #fff; border: 1px solid var(--app-primary-line); border-radius: 999px;
                     padding: .25rem .75rem .25rem .5rem; font-size: .8125rem; font-weight: 700; color: var(--app-primary); }
.id-card .id-badge svg { width: 1rem; height: 1rem; color: var(--app-primary); }
.id-card .id-name { display: flex; align-items: baseline; gap: .5rem; font-size: 1.75rem; font-weight: 800; color: var(--app-ink); margin: .5rem 0 .625rem; }
.id-card .id-name small { font-size: .8125rem; font-weight: 500; color: var(--app-muted); }
.id-card .id-rows { border-top: 1px dashed var(--app-primary-line); padding-top: .625rem; display: grid; gap: .375rem; }
.id-card .id-rows > div { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; }
.id-card .id-rows span { color: var(--app-ink-2); }
.id-card .id-rows b { font-size: 1rem; color: var(--app-ink); }
.id-card .id-rows b i { font-style: normal; font-weight: 500; color: #b0b8c1; }
.id-card .id-rows b.accent { color: var(--app-primary); font-size: 1.0625rem; }
.id-card .id-note { margin: .5rem 0 0; font-size: .75rem; color: var(--app-muted); }
.id-card .id-foot { padding: .625rem .75rem .75rem; }
.id-card .id-foot button { display: flex; align-items: center; justify-content: center; gap: .375rem; width: 100%; height: 2.875rem; border: 1px solid var(--app-primary-line);
                           border-radius: 10px; background: #fff; color: var(--app-primary); font-weight: 700; font-size: .9375rem; }
.id-card .id-foot button svg { width: 1rem; height: 1rem; }
.id-card .id-foot button:active { background: var(--app-primary-weak); }
.limit-card { border: 1px solid var(--app-line); border-radius: 16px; background: #fff; margin-bottom: .875rem; }
.limit-card .limit-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--app-ink); padding: .75rem 1rem; border-bottom: 1px solid var(--app-line); }
.limit-card .tag { font-size: .75rem; font-weight: 500; color: var(--app-ink-2); background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 6px; padding: .0625rem .4rem; }
.limit-card .limit-row { padding: .75rem 1rem; }
.limit-card .limit-row + .limit-row { border-top: 1px solid var(--app-line); }
.limit-card .kv-line { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; color: var(--app-ink); font-weight: 600; }
.limit-card .kv-line b { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.limit-card .kv-line small { font-size: .8125rem; font-weight: 500; color: var(--app-muted); margin-left: .25rem; font-variant-numeric: tabular-nums; }
.limit-card .muted { color: var(--app-muted); font-weight: 500; }
.limit-card .dash { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--app-panel); font-size: .75rem; }
.limit-card .meter { height: .375rem; border-radius: 999px; background: #e5e8eb; overflow: hidden; margin-top: .5rem; }
.limit-card .meter i { display: block; height: 100%; border-radius: inherit; background: var(--app-primary); }
.info-box { display: flex; align-items: center; gap: .5rem; border: 1px solid #f5d9a8; background: #fff8e6; color: #b45309; border-radius: 12px;
            padding: .625rem .875rem; font-size: .875rem; font-weight: 600; margin-bottom: .75rem; }
.info-box svg { flex: none; width: 1.125rem; height: 1.125rem; }
.info-box.danger { border-color: #fbd0d1; background: #fff1f1; color: #c5282e; }

/* M-04M 사업자등록번호 입력 → 상호 조회 결과 */
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; letter-spacing: .04em; }
.biz-result { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; border-radius: 10px; padding: .625rem .875rem; font-size: .875rem; }
.biz-result[hidden] { display: none; }
.biz-result.ok { background: var(--app-primary-weak); border: 1px solid var(--app-primary-line); }
.biz-result.ok strong { font-size: 1.0625rem; color: var(--app-primary); }
.biz-result.ok span { color: var(--app-ink-2); }
.biz-result.warn { background: #fff8e6; border: 1px solid #f5d9a8; color: #b45309; font-weight: 600; }