/* 담당 pass — 보호자 화면 CSS. 클래스 접두어 .pass- 만, 색·크기는 var(--토큰)·rem 만(base.css). kit/병렬작업계약.md */

/* ── 공통: 섹션 머리 ───────────────── */
.pass-sec { margin-top: var(--sp-6); }
.pass-sec-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pass-sec-head h2 { font-size: var(--fs-h4); font-weight: 800; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pass-sec-head p { margin-top: .25rem; }

/* ── 이용권: 보유 카드 ─────────────── */
.pass-own { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--sp-4); }
.pass-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-lg); }
.pass-card.is-off { background: var(--surface-3); }
.pass-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pass-card-name h3 { font-size: var(--fs-lg); font-weight: 800; }
.pass-card-name p { display: flex; align-items: center; gap: .25rem; margin-top: .125rem; }
.pass-card-badges { display: flex; gap: .375rem; flex-wrap: wrap; }
.pass-left { padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--accent-soft); }
.pass-card.is-off .pass-left { background: var(--surface-2); }
.pass-left-num { display: flex; align-items: baseline; gap: .375rem; }
.pass-left-num strong { font-size: 2rem; line-height: 1.15; font-weight: 850; color: var(--accent-ink); }
.pass-card.is-off .pass-left-num strong { color: var(--ink-2); }
.pass-left-num span { font-weight: 700; color: var(--ink-2); }
.pass-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem var(--sp-3); font-size: var(--fs-sm); }
.pass-meta dt { color: var(--ink-3); }
.pass-meta dd { font-weight: 650; font-variant-numeric: tabular-nums; }
.pass-note { display: flex; align-items: flex-start; gap: .375rem; font-size: var(--fs-sm); color: var(--ink-2); }
.pass-note .ic { margin-top: .25rem; color: var(--accent-ink); }
.pass-card-foot { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }

/* ── 이용권: 상품 카드 ─────────────── */
.pass-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-4); }
.pass-prod { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-5); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-lg); }
.pass-prod h3 { font-size: var(--fs-lg); font-weight: 800; }
.pass-prod-desc { color: var(--ink-2); }
.pass-price { font-size: var(--fs-h4); font-weight: 850; margin-top: auto; padding-top: .25rem; }
.pass-prod.is-stop { background: var(--surface-3); border-style: dashed; }
.pass-prod.is-stop h3, .pass-prod.is-stop .pass-price { color: var(--ink-3); }

/* ── 구매·현장 결제: 단계 상자와 고르기 카드 ───── */
.pass-step { min-width: 0; }
.pass-step > legend.pass-step-title { float: left; width: 100%; }
.pass-step > legend.pass-step-title + * { clear: both; }
.pass-step-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--sp-3); }
.pass-step-no { font-size: var(--fs-xs); font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--r-pill); padding: .125rem .5rem; }
.pass-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.pass-opts-2 { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.pass-opt { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3.75rem; padding: .75rem 1rem; border: .0938rem solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color var(--t-short) var(--ease), background var(--t-short) var(--ease); }
.pass-opt:hover { border-color: var(--ink-2); }
.pass-opt input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: .0938rem solid var(--line-input); background: var(--surface); cursor: pointer; margin: 0; }
.pass-opt input:checked { border-color: var(--accent); box-shadow: inset 0 0 0 .3125rem var(--accent); }
.pass-opt input:focus-visible { box-shadow: var(--focus); }
.pass-opt input:checked:focus-visible { box-shadow: inset 0 0 0 .3125rem var(--accent), var(--focus); }
.pass-opt input[aria-invalid="true"] { border-color: var(--danger); }
.pass-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pass-opt.is-stop, .pass-opt:has(input:disabled) { cursor: not-allowed; background: var(--surface-3); border-style: dashed; }
.pass-opt input:disabled { background: var(--surface-2); cursor: not-allowed; }
.pass-opt-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1 1 auto; }
.pass-opt-name { font-weight: 750; display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.pass-opt-sub { font-size: var(--fs-sm); color: var(--ink-3); }
.pass-opt-price { font-weight: 800; white-space: nowrap; }
.pass-opt.is-stop .pass-opt-name, .pass-opt.is-stop .pass-opt-price { color: var(--ink-3); }
.pass-opt-ico { width: 2.25rem; height: 2.25rem; }
.pass-fail { margin-top: var(--sp-2); padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--surface-3); border: .0625rem dashed var(--line-strong); }
.pass-sum-total dd { font-size: var(--fs-h4); font-weight: 850; color: var(--accent-ink); }
.pass-err-sub { display: block; color: var(--ink-2); font-size: var(--fs-sm); margin-top: .125rem; }

/* 휴대폰: 구매 요약 금액 + 버튼을 아래 탭 바 위에 고정 */
.pass-mbar { display: none; }
@media (max-width: 760px) {
  .pass-has-mbar { padding-bottom: calc(var(--tabbar-h) + 4.75rem + env(safe-area-inset-bottom)); }
  .pass-mbar { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .625rem var(--gutter); background: var(--surface); border-top: .0625rem solid var(--line); box-shadow: var(--shadow-up); }
  .pass-mbar > div { display: flex; flex-direction: column; line-height: 1.3; }
  .pass-mbar strong { font-size: var(--fs-lg); font-weight: 850; }
  .pass-mbar .btn { flex: 0 0 auto; }
  .pass-has-mbar .toasts { bottom: calc(var(--tabbar-h) + 5.5rem); }
}

/* ── 구매 완료 ─────────────────────── */
.pass-done { text-align: center; padding: var(--sp-5) var(--sp-4) 0; }
.pass-done .ico-box { margin: 0 auto var(--sp-3); }
.pass-done h1 { font-size: var(--fs-h3); font-weight: 800; }
.pass-done p { color: var(--ink-2); margin-top: .375rem; }
.pass-done-ok .ico-box { background: var(--ok-soft); color: var(--ok); }
.pass-done-warn .ico-box { background: var(--warn-soft); color: var(--warn); }
.pass-done-danger .ico-box { background: var(--danger-soft); color: var(--danger); }
.pass-done-muted .ico-box { background: var(--surface-2); color: var(--ink-2); }
.pass-done-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-4); border-bottom: .0625rem solid var(--line); }
.pass-done-name { font-size: var(--fs-h4); font-weight: 800; }
.pass-done-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.pass-done-num { font-size: 1.75rem; font-weight: 850; line-height: 1.2; color: var(--accent-ink); }
@media (max-width: 560px) {
  .pass-done-top, .pass-done-stats { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .pass-done-btns .btn { width: 100%; }
}

/* ── 현장 결제 요청 ─────────────────── */
.pass-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--surface-3); border: .0625rem solid var(--line); }
.pass-mini dt { font-size: var(--fs-sm); color: var(--ink-3); }
.pass-mini dd { font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pass-mini { grid-template-columns: minmax(0, 1fr); gap: .375rem; } .pass-mini > div { display: flex; justify-content: space-between; gap: var(--sp-3); } }
.pass-req-sum { display: flex; flex-direction: column; gap: .5rem; }
.pass-req-prod { font-size: var(--fs-lg); font-weight: 800; }
.pass-req-dog { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: var(--r); background: var(--surface-3); margin: .25rem 0; }
.pass-flow { display: flex; flex-direction: column; gap: .5rem; counter-reset: none; }
.pass-flow li { display: flex; flex-direction: column; padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--surface-3); }
.pass-flow span { font-size: var(--fs-sm); color: var(--ink-3); }
.pass-reqs { background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); overflow: hidden; }
.pass-reqs li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: .875rem 1rem; border-bottom: .0625rem solid var(--line); }
.pass-reqs li:last-child { border-bottom: 0; }
.pass-reqs li.is-cur { background: var(--accent-soft); }
.pass-reqs a { text-decoration: underline; text-underline-offset: .1875rem; text-decoration-color: var(--line-strong); }
.pass-reqs a:hover { color: var(--accent-ink); }
.pass-reqs .strong { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ── 차감 내역 ─────────────────────── */
.pass-hist-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.pass-hist-sum > div { padding: var(--sp-4); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; gap: .125rem; }
.pass-hist-v { font-size: var(--fs-h4); font-weight: 850; }
.pass-hist-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-2); }
.pass-hist-sort .select { min-width: 11rem; }
.pass-hist-table th small { display: block; font-weight: 500; font-size: var(--fs-xs); margin-top: .125rem; }
.pass-hist-lbl { display: none; }
@media (max-width: 760px) {
  .pass-hist-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 표 → 카드, 담당자 메모 숨김 */
  .pass-hist-wrap { border: 0; background: transparent; overflow: visible; }
  .pass-hist-table { min-width: 0; }
  .pass-hist-table thead, .pass-hist-memo { display: none; }
  .pass-hist-table, .pass-hist-table tbody { display: block; }
  .pass-hist-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem var(--sp-3); padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); }
  .pass-hist-table tbody tr:hover { background: var(--surface); }
  .pass-hist-table th, .pass-hist-table td { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; padding: 0; border: 0; text-align: left; }
  .pass-hist-table .num { text-align: left; }
  .pass-hist-table .pass-hist-memo { display: none; }
  .pass-hist-lbl { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 650; }
}