/* 두두택배 - 네 화면(접수・완료・목록・조회)이 함께 쓰는 디자인 정본.
   여기만 고치면 네 화면 생김새가 같이 바뀐다. */

:root {
    /* CU 색감 - 보라 + 라임그린 (편의점 간판 톤). 정확한 CI 값을 주시면
       이 네 줄만 바꾸면 화면 전체가 따라 바뀐다. */
    --brand: #6A2C91; --brand-dark: #4A1D6B; --accent: #8CC63F;
    --brand-soft: #f4edfa;
    --bg: #eef1f4; --card: #ffffff; --border: #d7dde3; --text: #1c2733; --muted: #667485;
    --ok-bg: #f4faea; --ok-border: #cfe8a3;
    --bad-bg: #fbeceb; --bad-border: #eab6b0; --bad-text: #c0392b;
    --warn-bg: #fff8e6; --warn-border: #f0d68a; --warn-text: #8a6d1f;
    --calc-bg: #faf7fd; --calc-border: #e0d0ee;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    background: var(--bg);
    color: var(--text);
    padding: 20px 16px 60px;
  }
  /* 위 막대와 아래 내용의 폭을 같게 둔다. 예전엔 막대 1120px / 카드 620px
   이라 위는 안 움직이고 아래만 좁아 보였다. */
.page { max-width: 760px; margin: 0 auto; }
  .topbar { background: var(--brand); color: #fff; padding: 16px 22px; border-radius: 14px 14px 0 0; }
  .topbar .brand { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
  .topbar .sub { font-size: 12px; opacity: .85; margin-top: 4px; }

  .layout {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
    background: var(--card); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 14px 14px; overflow: hidden; align-items: start;
  }
  .form-panel { padding: 22px; border-right: 1px solid var(--border); }
  .calc-panel { padding: 22px; background: var(--calc-bg); }
  @media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .form-panel { border-right: none; border-bottom: 1px solid var(--border); }
  }

  h2 { font-size: 16px; margin: 0 0 14px; }
  h3 { font-size: 13px; color: var(--muted); margin: 18px 0 8px; }

  .field-note { font-size: 11.5px; color: var(--muted); margin: -8px 0 14px; line-height: 1.5; }
  .hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
  .auto-tag { display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand); border-radius: 4px; padding: 2px 6px; vertical-align: middle; }
  .auto-box { padding: 11px 12px; border: 1px dashed var(--calc-border); border-radius: 8px; background: #eef2f7; font-size: 15px; font-weight: 800; color: var(--brand-dark); }
  .auto-box.empty { font-weight: 400; font-size: 13px; color: var(--muted); }
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .field.wide, .field.dims { grid-column: 1 / -1; }
  .field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
  .req { color: var(--bad-text); font-weight: 700; font-size: 11px; }
  input[type="text"], input[type="number"], select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 15px; background: #fff; font-family: inherit;
  }
  .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .inline-warning { min-height: 18px; margin-top: 6px; font-size: 12.5px; }
  .badge { display: inline-block; padding: 5px 9px; border-radius: 6px; }
  .badge.bad { background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad-text); }
  .badge.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); }

  .soft-confirm { margin-top: 10px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--warn-text); }
  .soft-confirm label { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--text); }

  .error-box { margin-top: 14px; min-height: 1px; }
  .error-title { font-size: 12.5px; font-weight: 700; color: var(--bad-text); margin-bottom: 4px; }
  .error-box ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--bad-text); line-height: 1.6; }

  .btn-row { display: flex; gap: 10px; margin-top: 18px; }
  .submit-btn {
    flex: 2; padding: 15px; font-size: 16px; font-weight: 800; color: #fff;
    background: var(--brand); border: none; border-radius: 10px; cursor: pointer;
  }
  .submit-btn:disabled { background: #a9b6c4; cursor: not-allowed; }
  .submit-btn:not(:disabled):active { background: var(--brand-dark); }
  .reset-btn {
    flex: 1; padding: 15px; font-size: 14px; font-weight: 700; color: var(--text);
    background: #fff; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  }

  .calc-pending { color: var(--muted); font-size: 13px; padding: 34px 10px; text-align: center; border: 1px dashed var(--calc-border); border-radius: 10px; background: #fff; }
  .calc-step { background: #fff; border: 1px solid var(--calc-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; }
  .calc-step-title { font-weight: 700; color: var(--brand-dark); margin-bottom: 4px; font-size: 13px; }
  .calc-step-body { color: var(--text); line-height: 1.65; }
  .calc-step.reject { background: var(--bad-bg); border-color: var(--bad-border); }
  .calc-step.reject .calc-step-title { color: var(--bad-text); }
  .calc-step.pending-note { background: #f6f8fa; color: var(--muted); }

  table.rate-table { width: 100%; border-collapse: collapse; font-size: 11.5px; background: #fff; }
  table.rate-table th, table.rate-table td { border: 1px solid var(--border); padding: 6px 5px; text-align: center; }
  table.rate-table th { background: #eef2f6; }
  table.rate-table tr.grade-match td:first-child { background: #dbe9f7; font-weight: 700; }
  table.rate-table td.cell-match { background: var(--brand); color: #fff; font-weight: 800; }

  .receipt-section { margin-top: 18px; }
  .receipt-card { background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 12px; padding: 18px; text-align: center; }
  .receipt-title { font-weight: 800; font-size: 15px; }
  .receipt-tno { font-size: 20px; font-weight: 800; color: var(--brand-dark); margin: 8px 0; }
  .receipt-line { font-size: 13px; margin-top: 4px; }
  .receipt-price { font-size: 24px; font-weight: 800; color: var(--brand-dark); margin: 10px 0; }

  .list-section { margin-top: 20px; }
    .list-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .list-section table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 11.5px; background: #fff; }
  .list-section th, .list-section td { border: 1px solid var(--border); padding: 6px 5px; text-align: left; }
  .list-section th { background: #eef2f6; }
  .empty-row td { text-align: center; color: var(--muted); padding: 14px; }

/* ── 화면 이동 막대 (네 화면 공통) ───────────────────────────── */
.nav { display: flex; gap: 2px; background: var(--brand-dark); padding: 0 10px; }
.nav a {
  padding: 11px 18px; font-size: 13.5px; font-weight: 700;
  color: rgba(255,255,255,.72); text-decoration: none; border-radius: 8px 8px 0 0;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav a.on { color: var(--brand-dark); background: var(--card); }

/* ── 완료·목록·조회 화면이 쓰는 흰 판 ───────────────────────── */
.panel {
  background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 14px 14px; padding: 26px 22px;
}
.panel h2 { font-size: 16px; margin: 0 0 14px; }
.center-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.btn-main, .btn-sub {
  padding: 14px 26px; font-size: 15px; font-weight: 800; border-radius: 10px;
  text-decoration: none; display: inline-block; cursor: pointer; border: none;
}
.btn-main { background: var(--brand); color: #fff; }
.btn-sub { background: #fff; color: var(--text); border: 1px solid var(--border); }
.empty-state { text-align: center; color: var(--muted); padding: 44px 10px; font-size: 14px; }
.count-line { font-size: 12.5px; color: var(--muted); margin: 0 0 10px 2px; }
.receipt-card .receipt-tno { font-size: 30px; letter-spacing: 1px; }
.receipt-card .receipt-price { font-size: 34px; }

/* ══════════════════════════════════════════════════════════════
   CU 키오스크식 단계 화면 (회고 13줄 - "지역은 버튼으로 고르게")
   손가락으로 누르는 화면이라 드롭다운을 쓰지 않는다. 버튼은 최소 56px.
   ══════════════════════════════════════════════════════════════ */
.wizard { max-width: 100%; }

/* 진행 막대 */
.steps { display: flex; gap: 6px; margin-bottom: 6px; }
.steps .dot { flex: 1; height: 6px; border-radius: 3px; background: var(--border); transition: background .2s; }
.steps .dot.done { background: var(--brand); }
.steps .dot.on { background: var(--accent); }
.big-price { border-width: 2px !important; }
.step-count { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; font-weight: 700; }

.step { display: none; }
.step.on { display: block; }
.step-q { font-size: 21px; font-weight: 800; margin: 0 0 6px; line-height: 1.4; }
.step-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; line-height: 1.6; }

/* 고르는 버튼 격자 */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
.opt {
  min-height: 58px; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; font-size: 15px; font-weight: 700; color: var(--text);
  cursor: pointer; font-family: inherit; line-height: 1.35; transition: all .12s;
}
.opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.opt.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.opt .opt-sub { display: block; font-size: 11px; font-weight: 600; opacity: .72; margin-top: 3px; }
.opt-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }

/* 입력 줄 */
.f { margin-bottom: 16px; }
.f label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.f input { width: 100%; padding: 15px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 17px; font-family: inherit; }
.f input:focus { outline: none; border-color: var(--brand); }
.f .err { min-height: 17px; font-size: 12.5px; color: var(--bad-text); margin-top: 5px; font-weight: 600; }
.f .ok { color: #1c7a3e; }
.dim3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* 아래 버튼 */
.step-actions { display: flex; gap: 10px; margin-top: 24px; }
.step-actions button { min-height: 56px; border-radius: 12px; font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; border: none; }
#prevBtn { flex: 1; background: #fff; color: var(--text); border: 1.5px solid var(--border); }
#nextBtn { flex: 2.2; background: var(--brand); color: #fff; }
#nextBtn:disabled { background: #b6c2cf; cursor: not-allowed; }

/* 마지막 확인 */
.sum { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
.sum-row:last-child { border-bottom: none; }
.sum-row .k { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.sum-row .v { font-weight: 700; text-align: right; }
.big-price { text-align: center; padding: 22px 10px; background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 12px; margin: 14px 0; }
.big-price .won { font-size: 40px; font-weight: 800; color: var(--brand-dark); line-height: 1.1; }
.big-price .eta { font-size: 13.5px; color: var(--muted); margin-top: 7px; }
details.why { margin-top: 12px; border: 1px solid var(--calc-border); border-radius: 10px; background: var(--calc-bg); }
details.why summary { padding: 13px 14px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--brand-dark); }
details.why .why-body { padding: 0 14px 12px; }

/* 📱 모바일 */
/* 태블릿 폭에서도 가장자리 여백을 줄인다 */
@media (max-width: 800px) {
  body { padding: 10px 10px 40px; }
  .topbar { padding: 14px 16px; }
  .topbar .brand { font-size: 20px; }
}
@media (max-width: 560px) {
  body { padding: 0 0 12px; }
  .page { max-width: 100%; }
  .topbar { border-radius: 0; }
  .panel { border-radius: 0; border-left: none; border-right: none; padding: 20px 16px 24px; }
  .nav { padding: 0; }
  .nav a { flex: 1; text-align: center; padding: 13px 4px; font-size: 12.5px; border-radius: 0; }
  .topbar { padding: 13px 16px; }
  .topbar .brand { font-size: 18px; }
  .topbar .sub { font-size: 11.5px; }
  .step-q { font-size: 19px; }
  .opt-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .dim3 { grid-template-columns: 1fr; gap: 10px; }
  .big-price .won { font-size: 34px; }
  .sum-row { font-size: 13.5px; }
}

/* ── "목록에 없어요" — 화면이 함부로 판단하지 않고 사람에게 넘기는 자리 ── */
.escape { margin-top: 14px; }
.escape button {
  width: 100%; min-height: 46px; border: 1.5px dashed var(--border); border-radius: 12px;
  background: #fff; color: var(--muted); font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.escape button:hover { border-color: var(--brand); color: var(--brand); }
.escape-note {
  display: none; margin-top: 10px; padding: 14px; border-radius: 12px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  font-size: 13px; line-height: 1.75; color: var(--warn-text);
}
.escape-note.on { display: block; }
.escape-note b { color: var(--text); }

/* ── 지역 찾기 ─────────────────────────────────────────── */
.search-box { position: relative; margin-bottom: 12px; }
.search-box input {
  width: 100%; padding: 14px 14px 14px 42px; border: 1.5px solid var(--border);
  border-radius: 12px; font-size: 15.5px; font-family: inherit; background: #fff;
}
.search-box input:focus { outline: none; border-color: var(--brand); }
.search-box .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .45; font-size: 15px; }
.search-none {
  padding: 18px 14px; border: 1.5px dashed var(--border); border-radius: 12px;
  font-size: 13.5px; color: var(--muted); line-height: 1.8; text-align: center;
}
.search-none b { color: var(--text); }

/* ── 접기·펴기 안내 (지점 정보 등) ─────────────────────── */
/* 260807 접었다 펴는 칸이 너무 커서 '꼭 읽어야 하는 것' 처럼 보였다.
   필요한 사람만 누르는 자리라 눈에 덜 띄게 낮춘다. 펴면 그때 상자가 생긴다. */
details.info { margin-top: 8px; border: 0; background: none; }
details.info summary { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 2px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--muted); list-style: none; }
details.info summary::-webkit-details-marker { display: none; }
details.info summary::before { content: '＋'; font-size: 11px; font-weight: 800; opacity: .7; }
details.info[open] summary::before { content: '－'; }
details.info summary:hover { color: var(--brand); text-decoration: underline; }
details.info[open] summary { color: var(--brand); font-weight: 700; margin-bottom: 4px; }
details.info .info-body { padding: 12px 14px; font-size: 13px; line-height: 1.9;
  color: var(--muted); border: 1px solid var(--border); border-radius: 10px; background: #fff; }
details.info table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
details.info th, details.info td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: left; }
details.info th { color: var(--muted); font-weight: 700; }

/* ── 도움말 한 줄 ──────────────────────────────────────── */
.f .tip { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

/* ── 진행 막대를 눌러서 단계를 오간다 ──────────────────── */
.steps .dot { cursor: default; }
.steps .dot.can { cursor: pointer; }
.steps .dot.can:hover { opacity: .7; }
.steps { margin-bottom: 8px; }

/* ── 고른 것을 확실히 보여 준다 ────────────────────────── */
.picked-line {
  margin-top: 14px; padding: 13px 14px; border-radius: 12px;
  background: var(--brand-soft); border: 1.5px solid var(--brand);
  font-size: 14px; font-weight: 700; color: var(--brand-dark);
}
.picked-line .sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   규정 보기 창
   ══════════════════════════════════════════════════════════════ */
.modal-back {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(20, 12, 30, .55); padding: 24px 16px;
  align-items: center; justify-content: center;
}
.modal-back.on { display: flex; }
.modal {
  background: var(--card); border-radius: 18px; width: 100%; max-width: 640px;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.modal-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px;
  background: var(--brand); color: #fff;
}
.modal-title { font-size: 18px; font-weight: 800; }
.modal-sub { font-size: 12.5px; opacity: .85; margin-top: 4px; line-height: 1.5; }
.modal-x {
  margin-left: auto; background: rgba(255,255,255,.16); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 10px; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.modal-x:hover { background: rgba(255,255,255,.3); }
.modal-body { overflow-y: auto; padding: 20px 22px; -webkit-overflow-scrolling: touch; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); }
.modal-foot .btn-main { width: 100%; }

.rsec { margin-bottom: 26px; }
.rsec h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 800; margin: 0 0 11px; color: var(--text); }
.rno {
  width: 24px; height: 24px; border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rtab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtab th, .rtab td { padding: 9px 8px; border: 1px solid var(--border); text-align: left; }
.rtab th { background: #f6f3f9; color: var(--muted); font-weight: 700; font-size: 12px; }
.rtab tr.hl td { background: #fdf6d8; }
.rtab td.hl2 { background: var(--accent); color: #23330c; font-weight: 800; }
.rbox { padding: 14px; background: var(--brand-soft); border-radius: 11px; font-size: 13.5px; line-height: 1.85; }
.rlist { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.95; }
.rnote { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin: 9px 0 0; }
.rnote2 { font-size: 12px; color: var(--muted); }
.rask { color: var(--warn-text); font-size: 11.5px; }
.rmine { padding: 13px 15px; border-radius: 12px; background: #fdf6d8; border: 1.5px solid #e8d489; margin-bottom: 22px; }
.rmine-t { font-size: 13.5px; font-weight: 700; }
.rmine-s { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.rtno { font-size: 24px; font-weight: 800; color: var(--brand); letter-spacing: 2px; }
.rtno2 { font-size: 24px; font-weight: 800; color: var(--muted); letter-spacing: 2px; }

/* 규정 열기 단추 */
.rules-open {
  display: block; width: 100%; margin-top: 14px; min-height: 48px;
  border: 1.5px solid var(--brand); border-radius: 12px; background: #fff;
  color: var(--brand); font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.rules-open:hover { background: var(--brand-soft); }
.rules-link {
  background: none; border: none; color: var(--brand); font-size: 12.5px; font-weight: 700;
  text-decoration: underline; cursor: pointer; font-family: inherit; padding: 0;
}

@media (max-width: 560px) {
  .modal-back { padding: 0; }
  .modal { max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .rtab { font-size: 12px; }
  .rtab th, .rtab td { padding: 7px 5px; }
}

/* ══════════════════════════════════════════════════════════════
   영수증 - 항목과 내용을 줄맞춰 찍는다. 글자를 늘어놓지 않는다.
   ══════════════════════════════════════════════════════════════ */
.receipt {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; max-width: 420px; margin: 0 auto;
}
.receipt-top { padding: 20px 18px 16px; text-align: center; background: var(--brand-soft); border-bottom: 1px dashed var(--border); }
.receipt-ok { font-size: 14px; font-weight: 700; color: var(--brand-dark); }
.receipt-no-label { font-size: 11.5px; color: var(--muted); margin-top: 12px; letter-spacing: .5px; }
.receipt-no { font-size: 27px; font-weight: 800; color: var(--brand); letter-spacing: 2.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.receipt-no .head { color: var(--brand-dark); }
.receipt-no-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

.receipt-rows { padding: 4px 18px; }
.rrow { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #f0eef3; font-size: 13.5px; }
.rrow:last-child { border-bottom: none; }
.rrow .rk { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.rrow .rv { font-weight: 700; text-align: right; word-break: break-all; }
.rgroup { padding: 12px 18px 4px; font-size: 11.5px; font-weight: 800; color: var(--brand); letter-spacing: .4px; }

.receipt-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px; border-top: 2px dashed var(--border); background: var(--ok-bg); }
.receipt-total .tk { font-size: 14px; font-weight: 700; }
.receipt-total .tv { font-size: 27px; font-weight: 800; color: var(--brand-dark); }
.receipt-eta { padding: 12px 18px 18px; text-align: center; font-size: 13px; background: var(--ok-bg); }
.receipt-eta b { font-size: 15px; }
.receipt-cut { height: 14px; background:
  radial-gradient(circle at 7px 0, transparent 7px, var(--card) 7px) repeat-x;
  background-size: 14px 14px; }
@media (max-width: 560px) { .receipt { max-width: 100%; } .receipt-no { font-size: 23px; letter-spacing: 1.5px; } }

/* ══════════════════════════════════════════════════════════════
   단계 이름표 (CU 키오스크 윗줄처럼 어디까지 왔는지 이름으로 보인다)
   ══════════════════════════════════════════════════════════════ */
.steptabs { display: flex; gap: 3px; margin: 0 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.steptabs .st {
  flex: 1 0 auto; min-width: 62px; padding: 9px 8px; text-align: center;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: #f2eef6; border-radius: 8px; white-space: nowrap; cursor: default;
}
.steptabs .st.can { cursor: pointer; }
.steptabs .st.can:hover { background: var(--brand-soft); color: var(--brand); }
.steptabs .st.done { background: var(--brand-soft); color: var(--brand); }
.steptabs .st.on { background: var(--brand); color: #fff; }
.steptabs .st .n { display: block; font-size: 10px; opacity: .75; margin-bottom: 2px; }

/* 물품 종류 큰 버튼 */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.cat {
  min-height: 92px; padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 14px;
  background: #fff; font-family: inherit; cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.cat .ci { font-size: 26px; line-height: 1; }
.cat .cn { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cat:hover { border-color: var(--brand); background: var(--brand-soft); }
.cat.on { border-color: var(--brand); background: var(--brand); }
.cat.on .cn { color: #fff; }

/* 보낼 수 없는 물건 안내 (CU 이용불가상품 자리) */
.cantsend { margin-top: 16px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 12px; background: #fbfafc; }
.cantsend h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--bad-text); }
.cantsend ul { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.85; color: var(--muted); }
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .steptabs .st { min-width: 56px; font-size: 10.5px; padding: 8px 5px; }
}

/* ══════════════════════════════════════════════════════════════
   운송장 (스티커로 뽑아 상자에 붙이는 것)
   실제 송장처럼 굵은 테두리 + 칸 나눔. 흑백으로 뽑아도 읽히게
   색이 아니라 선과 굵기로 구분한다.
   ══════════════════════════════════════════════════════════════ */
.waybill {
  border: 2.5px solid #111; border-radius: 4px; background: #fff; max-width: 460px;
  margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  overflow: hidden;
}
.wb-top { display: flex; align-items: center; border-bottom: 2.5px solid #111; }
.wb-logo { padding: 9px 12px; font-weight: 800; font-size: 14px; letter-spacing: .5px; border-right: 2px solid #111; white-space: nowrap; }
.wb-grade { flex: 1; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: 3px; }
.wb-region { padding: 9px 12px; font-size: 13px; font-weight: 800; border-left: 2px solid #111; white-space: nowrap; }

.wb-no { text-align: center; padding: 13px 8px 11px; border-bottom: 2px dashed #111; }
.wb-no .lbl { font-size: 10.5px; letter-spacing: 2px; color: #555; }
.wb-no .num { font-size: 31px; font-weight: 800; letter-spacing: 4px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.wb-no .num .h { color: #6A2C91; }
.wb-bars { display: flex; gap: 2px; justify-content: center; height: 34px; margin-top: 8px; padding: 0 14px; }
.wb-bars i { display: block; background: #111; height: 100%; }

.wb-party { display: flex; border-bottom: 1.5px solid #111; }
.wb-party:last-of-type { border-bottom: 2.5px solid #111; }
.wb-tag { width: 46px; flex-shrink: 0; border-right: 1.5px solid #111; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; writing-mode: vertical-rl; letter-spacing: 3px; padding: 10px 0; }
.wb-tag.to { background: #111; color: #fff; }
.wb-body { flex: 1; padding: 10px 12px; }
.wb-name { font-size: 17px; font-weight: 800; }
.wb-line { font-size: 12.5px; margin-top: 3px; color: #333; line-height: 1.55; }
.wb-line b { font-weight: 700; }

.wb-goods { display: flex; }
.wb-cell { flex: 1; padding: 9px 10px; border-right: 1.5px solid #111; }
.wb-cell:last-child { border-right: none; }
.wb-cell .ck { font-size: 10px; color: #666; }
.wb-cell .cv { font-size: 13.5px; font-weight: 800; margin-top: 2px; }
.wb-pay { display: flex; align-items: center; border-top: 2.5px solid #111; }
.wb-pay .pk { padding: 11px 12px; font-size: 12px; font-weight: 700; border-right: 1.5px solid #111; }
.wb-pay .pv { flex: 1; text-align: right; padding: 11px 14px; font-size: 22px; font-weight: 800; }
.wb-foot { padding: 8px 12px; border-top: 1.5px dashed #111; font-size: 11px; color: #444; text-align: center; line-height: 1.6; }

.wb-actions { display: flex; gap: 9px; margin-top: 18px; }
.wb-actions > * { flex: 1; min-height: 52px; border-radius: 12px; font-size: 14px; font-weight: 800;
  font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center; line-height: 1.35; }
.wb-print { background: var(--brand); color: #fff; border: none; }
.wb-again { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.wb-end { background: var(--accent); color: #23330c; border: none; }
@media (max-width: 560px) {
  .waybill { max-width: 100%; }
  .wb-no .num { font-size: 25px; letter-spacing: 2px; }
  .wb-actions { flex-direction: column; }
}
@media print {
  body { padding: 0; background: #fff; }
  .topbar, .nav, .wb-actions, .rules-open, .center-actions, .modal-back { display: none !important; }
  .panel { border: none; padding: 0; }
  .waybill { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   CU 초록 되살리기
   스크린샷을 보면 하단 이동 버튼(메인화면·이전화면)이 초록이고,
   보내는 사람은 보라 뱃지 / 받는 사람은 초록 뱃지로 갈라 놓았다.
   ══════════════════════════════════════════════════════════════ */
:root { --cu-green: #4CAF50; --cu-green-dark: #2E7D32; --cu-green-soft: #edf7ee; }
#prevBtn { background: var(--cu-green); color: #fff; border: none; }
#prevBtn:hover { background: var(--cu-green-dark); }
.steptabs .st.done { background: var(--cu-green-soft); color: var(--cu-green-dark); }
.btn-sub { border-color: var(--cu-green); color: var(--cu-green-dark); }
.wb-again { background: var(--cu-green); color: #fff; border: none; }

/* 사람 뱃지 - 보내는 분 보라 / 받는 분 초록 */
.who { display: flex; gap: 11px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid #f0eef3; }
.who:last-child { border-bottom: none; }
.who-tag { width: 62px; flex-shrink: 0; padding: 9px 6px; border-radius: 9px; text-align: center;
  font-size: 12px; font-weight: 800; color: #fff; line-height: 1.35; }
.who-tag.from { background: var(--brand); }
.who-tag.to { background: var(--cu-green); }
.who-body { flex: 1; }
.who-name { font-size: 15px; font-weight: 800; }
.who-line { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.6; }

/* ── 저울 ─────────────────────────────────────────────────── */
.scale { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px 16px; background: #fff; }
.scale-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.scale-title { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.scale-read { font-size: 30px; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.scale-read .u { font-size: 15px; color: var(--muted); margin-left: 3px; }
.scale-bar { height: 22px; border-radius: 11px; background: #eee9f0; overflow: hidden; position: relative; }
.scale-fill { height: 100%; width: 0; border-radius: 11px; transition: width .28s ease, background .28s; background: var(--cu-green); }
.scale-fill.g2 { background: #7CB342; }
.scale-fill.g3 { background: #F9A825; }
.scale-fill.g4 { background: #EF6C00; }
.scale-fill.over { background: var(--bad-text); }
.scale-marks { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: var(--muted); }
.scale-grade { margin-top: 12px; padding: 11px 13px; border-radius: 11px; background: var(--brand-soft);
  font-size: 13.5px; font-weight: 700; color: var(--brand-dark); text-align: center; }
.scale-grade.over { background: var(--bad-bg); color: var(--bad-text); }

/* ── 결제 방법 ────────────────────────────────────────────── */
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pay { min-height: 108px; border: 2px solid var(--border); border-radius: 15px; background: #fff;
  font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px; padding: 14px 10px; transition: all .12s; }
.pay .pi { font-size: 27px; }
.pay .pn { font-size: 16px; font-weight: 800; }
.pay .pw { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.45; }
.pay:hover { border-color: var(--brand); }
.pay.on { border-color: var(--brand); background: var(--brand); }
.pay.on .pn, .pay.on .pw { color: #fff; }
.pay.on .pw { opacity: .85; }

/* ── 포장 유의 · 면책 동의 ───────────────────────────────── */
.packbox { margin-top: 15px; border: 1.5px solid var(--warn-border); border-radius: 13px;
  background: var(--warn-bg); padding: 14px 15px; }
.packbox h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--warn-text); }
.packbox ul { margin: 0 0 12px; padding-left: 17px; font-size: 12.5px; line-height: 1.85; color: #6b5518; }
.agree { display: flex; align-items: flex-start; gap: 9px; padding-top: 11px; border-top: 1px solid var(--warn-border);
  font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; line-height: 1.6; }
.agree input { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; accent-color: var(--brand); }
@media (max-width: 560px) { .pay-grid { grid-template-columns: 1fr; } .scale-read { font-size: 25px; } }

/* ══════════════════════════════════════════════════════════════
   260807 눌러 보고 고친 것들
   ══════════════════════════════════════════════════════════════ */

/* 1. 물품 종류를 4개씩 두 줄로 (6+2 로 갈리면 허전하다) */
.cat-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* 2. 운송장 물품 칸 두 줄 사이에 선 */
.wb-goods + .wb-goods { border-top: 1.5px solid #111; }

/* 3. 접수 목록 - 글자가 세로로 쪼개지지 않게. 좁으면 옆으로 민다 */
.list-section table { min-width: 1180px; }
.list-section th, .list-section td { white-space: nowrap; }
.list-section td:nth-child(8) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* 5. 저울을 진짜 저울처럼 */
.scale { padding: 0; border: none; background: none; }
.scale-plate {
  height: 26px; margin: 0 26px; border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #d8d3de 0%, #b9b2c2 100%);
  border: 1.5px solid #a49bb0; border-bottom: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #6b6377; font-weight: 700; letter-spacing: 4px;
}
.scale-body {
  border: 1.5px solid var(--border); border-radius: 16px; background: #f7f5f9;
  padding: 16px 16px 14px; box-shadow: inset 0 2px 0 #fff;
}
.scale-lcd {
  background: #14181a; border-radius: 10px; padding: 14px 16px; text-align: right;
  font-family: "SF Mono", "Menlo", "Consolas", monospace; position: relative;
  border: 2px solid #2c3236;
}
.scale-lcd .digits { font-size: 40px; font-weight: 700; color: #7dfa8d; letter-spacing: 2px; line-height: 1; text-shadow: 0 0 12px rgba(125,250,141,.45); }
.scale-lcd .u { font-size: 17px; color: #4e9c58; margin-left: 7px; }
.scale-lcd .led { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); text-align: left; }
.scale-lcd .led i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #2c3236; margin-bottom: 5px; }
.scale-lcd .led i.on { background: #7dfa8d; box-shadow: 0 0 7px #7dfa8d; }
.scale-lcd .led span { font-size: 8.5px; color: #4e9c58; letter-spacing: .5px; }
.scale-bar { margin-top: 13px; }
.scale-foot { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 11.5px; color: var(--muted); }
.scale-foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cu-green); flex-shrink: 0; }
@media (max-width: 560px) { .scale-lcd .digits { font-size: 32px; } }

/* ── 관리자 들어가는 문 (오른쪽 위) ───────────────────────── */
.topbar { position: relative; }
.admin-link {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  padding: 7px 13px; border-radius: 9px; background: rgba(255,255,255,.16);
  color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 700;
}
.admin-link:hover { background: rgba(255,255,255,.3); }
@media (max-width: 560px) { .admin-link { right: 12px; padding: 6px 10px; font-size: 11.5px; } }

/* ── 비밀번호 묻는 칸 ─────────────────────────────────────── */
.lock { max-width: 340px; margin: 30px auto; text-align: center; }
.lock .ico { font-size: 40px; }
.lock h3 { font-size: 17px; font-weight: 800; margin: 14px 0 6px; }
.lock p { font-size: 13px; color: var(--muted); margin: 0 0 20px; line-height: 1.7; }
.lock input {
  width: 100%; padding: 15px; border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 20px; text-align: center; letter-spacing: 8px; font-family: inherit;
}
.lock input:focus { outline: none; border-color: var(--brand); }
.lock .err { min-height: 20px; font-size: 13px; color: var(--bad-text); font-weight: 700; margin-top: 9px; }
.lock button { width: 100%; min-height: 52px; margin-top: 6px; border: none; border-radius: 12px;
  background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-out { background: none; border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }

/* 버튼 안 글자가 낱말 중간에서 잘리지 않게 (경비실에 맡기/기 처럼) */
.opt, .cat .cn, .pay .pn, .pay .pw { word-break: keep-all; overflow-wrap: break-word; }
#noteGrid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

/* 면책 동의 문구가 낱말 중간에서 안 끊기게 */
.agree { align-items: center; }
.agree span { word-break: keep-all; overflow-wrap: break-word; line-height: 1.75; }

/* ══════════════════════════════════════════════════════════════
   DODO 로고
   CU 간판처럼 두 톤으로 간다 - 앞 DO 는 흰색, 뒤 DO 는 라임 초록.
   글꼴 파일을 받지 않고 굵기·자간·네모 마크만으로 만든다
   (CLAUDE.md "빌드 도구 없음" - 바깥에서 받아오는 것을 늘리지 않는다).
   ══════════════════════════════════════════════════════════════ */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--cu-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.logo-mark svg { display: block; }
.logo-word {
  font-size: 25px; font-weight: 900; letter-spacing: -.6px; color: #fff; line-height: 1;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.logo-word b { color: var(--accent); font-weight: 900; }
.logo-word .dot { color: var(--accent); }
.logo-sub {
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,.9);
  border-left: 1px solid rgba(255,255,255,.35); padding-left: 9px; margin-left: 2px;
  letter-spacing: 1px;
}
@media (max-width: 560px) {
  .logo-word { font-size: 21px; }
  .logo-mark { width: 28px; height: 28px; border-radius: 8px; }
  .logo-sub { font-size: 11px; padding-left: 7px; }
}

/* 260807 1단계 - 지금 계신 곳 안내 */
.near { margin: 10px 0 14px; padding: 11px 13px; border-radius: 10px;
        font-size: 14px; line-height: 1.65; }
.near.ok   { background: #F1F8E9; border: 1px solid var(--accent); color: #33691E; }
.near.warn { background: #FFF8E1; border: 1px solid #FFB300; color: #7A5300; }
.near b    { font-weight: 800; }

/* 260807 물품 종류 버튼에 보기 붙이기 - "이불은 의류인가?" 를 없앤다 */
.cat .ceg { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
            color: var(--muted); line-height: 1.35; letter-spacing: -.2px; }
.cat.on .ceg { color: #33691E; }
.why-small { font-size: 12.5px; opacity: .85; }

/* 260807 완료 화면 - 결제는 카운터에서. 이 화면은 돈을 받지 않는다 */
.paynow { border-radius: 14px; padding: 16px 18px; margin: 0 0 16px;
          text-align: center; border: 2px solid; }
.paynow.need  { background: #FFF8E1; border-color: #FFB300; color: #6D4C00; }
.paynow.later { background: #F1F8E9; border-color: var(--accent); color: #33691E; }
.paynow .pn-t   { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.paynow .pn-won { font-size: 34px; font-weight: 900; margin: 4px 0 6px; letter-spacing: -1px; }
.paynow .pn-s   { font-size: 13px; font-weight: 600; line-height: 1.6; }

/* 운송장 도장 - 붙여 놓고 멀리서도 보이게 */
.wb-pay { position: relative; }
.wb-stamp { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) rotate(-7deg);
            border: 2.5px solid; border-radius: 7px; padding: 4px 9px;
            font-size: 13px; font-weight: 900; line-height: 1.15; text-align: center;
            letter-spacing: -.4px; }
.wb-stamp span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0; }
.wb-stamp.need  { color: #C62828; border-color: #C62828; }
.wb-stamp.later { color: #1B5E20; border-color: #1B5E20; }
@media print {
  .paynow { display: none !important; }   /* 스티커에는 안 나오게 */
  .wb-stamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 260807 시·도 찾기 - 주소칸과 구별되게 작게 */
.search-box.mini { margin: 0 0 10px; }
.search-box.mini input { font-size: 13.5px; padding-top: 11px; padding-bottom: 11px; }

/* 260807 못 찾을 때만 쓰는 검색 상자.
   위에 두었더니 "무조건 써야 하는 것" 처럼 보였다. 버튼 아래로 내리고 낮췄다. */
.findbox { margin-top: 14px; padding: 12px 13px; border: 1px dashed var(--border);
           border-radius: 12px; background: #FAFAFA; }
.findbox .fb-t { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.findbox .search-box.mini { margin: 0; }
.findbox .near { margin: 10px 0 0; }
.findbox .search-none { margin-top: 10px; }

/* 260807 보내는 쪽 / 받는 쪽 색 딱지.
   같은 뜻인데 '접수 지점'·'도착 지역'·'보내는 분'·'받는 분' 네 말을 쓰고 있었다.
   말은 '보내는 쪽 / 받는 쪽' 둘로 줄이고, 색으로 어느 쪽인지 보이게 한다.
   운송장 스티커의 보내는곳·받는곳 색과 같은 색이라 화면과 스티커가 이어진다. */
.side { display: inline-flex; gap: 6px; margin-bottom: 9px; }
.side.from, .side.to, .side span {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: -.2px; }
.side.from, .side span.from { background: var(--brand); color: #fff; }
.side.to,   .side span.to   { background: var(--cu-green, #4CAF50); color: #fff; }
.side.both { gap: 5px; }

/* 260807 시·도를 고른 뒤 '자세한 주소' 칸이 눈에 안 들어온다는 피드백.
   고르기 전에는 흐리게 두고, 고르는 순간 켜지면서 한 번 반짝인다.
   순서 번호를 붙여 1 다음이 2 라는 것을 글 없이 보이게 했다. */
.nextup-no { display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; margin-right: 5px; border-radius: 50%;
  background: var(--muted); color: #fff; font-size: 11.5px; font-weight: 800; }
.opt-label .nextup-no { background: var(--brand); }

.f.nextup { margin-top: 16px; padding: 14px 15px; border-radius: 13px;
  border: 2px dashed var(--border); background: #FAFAFA; transition: all .2s; }
.f.nextup label { color: var(--muted); }
.f.nextup input { background: #F5F5F5; }

.f.nextup.on { border: 2px solid var(--cu-green, #4CAF50); background: #F6FBF3; }
.f.nextup.on label { color: #2E7D32; }
.f.nextup.on .nextup-no { background: var(--cu-green, #4CAF50); }
.f.nextup.on input { background: #fff; border-color: var(--cu-green, #4CAF50); }
.f.nextup.on { animation: nextup-pop .5s ease-out; }
@keyframes nextup-pop {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,80,.45); }
  100% { box-shadow: 0 0 0 12px rgba(76,175,80,0); }
}