/* 판매·등록·수납·환불 시트(B5) — 시안 proto/sales_settings.html 'B-2. 판매 시트' 규칙을 옮김(값은 tokens.css 토큰만).
   역할 글자·색은 시안과 같다: 구획 이름 .t-label · 값 .t-value · 보조 .t-sub · 미납 .t-warn(빨강) · 필수 점 .dot.is-warn → 채우면 .is-go */

/* 시트 틀 */
.side-sheet.is-full .sheet-title .t-sub { margin-top: 2px; }
.ss-sheet { display: flex; flex-direction: column; gap: 24px; }
.ss-form { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-form:disabled .input, .ss-form:disabled .search { background: var(--mute-bg); color: var(--muted); }
.ss-form:disabled .choice, .ss-form:disabled .ss-check, .ss-form:disabled .seg { opacity: .6; }
.ss-form .sheet-sec + .sheet-sec { padding-top: 24px; border-top: 1px solid var(--line); }
.ss-form .sheet-sec[hidden] + .sheet-sec { padding-top: 0; border-top: 0; }
.ss-stack-4 { --gap: 4px; }
.ss-stack-8 { --gap: 8px; }
.ss-stack-10 { --gap: 10px; }
.ss-stack-16 { --gap: 16px; }
.ss-strong { color: var(--ink); font-weight: 700; }

/* 줄 머리 · 필수 점 */
.ss-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.ss-req { display: inline-flex; align-items: center; gap: 6px; }
.ss-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ss-inline > .ico { flex: none; color: var(--faint); }

/* 회원 */
.ss-member { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-input); box-shadow: inset 0 0 0 1px var(--line); }
.ss-member-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ss-member-top .cell-two { flex: 1; min-width: 0; }
.ss-results:empty { display: none; }
.ss-results { border-radius: var(--r-input); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ss-results .op-loading { padding: 12px 16px; }
.ss-results > .field-error { padding: 12px 16px; }
.ss-pick { display: flex; flex-direction: column; }
.ss-pick .pop-item + .pop-item { border-top: 1px solid var(--line); }
.ss-pick .pop-item:disabled { cursor: default; }
.ss-pick .pop-item:disabled .t-name { color: var(--muted); }
.ss-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-grid2 > .is-full { grid-column: 1 / -1; }
.ss-phone-check:empty { display: none; }
.ss-fold-body { gap: 14px; }
.ss-fold-body .filters { flex-wrap: wrap; overflow: visible; }
.ss-branch { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: var(--r-input); background: var(--mute-bg); }
.ss-branch .choice { width: 100%; min-height: 56px; }

/* 동의 기록(체크 줄 · 세 값 줄) */
.ss-check { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 0; text-align: left; border-top: 1px solid var(--line); }
.ss-check:first-child { border-top: 0; }
.ss-check .box { position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-input); transition: background-color var(--t-micro) var(--ease-micro); }
.ss-check[aria-checked="true"] .box { background: var(--ink); box-shadow: none; }
.ss-check[aria-checked="true"] .box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ss-check:disabled { cursor: default; opacity: .55; }
.ss-check .ck-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-check .ck-amt { flex: none; font-weight: 700; }
.ss-consent { display: flex; flex-direction: column; }
.ss-consent-q { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 52px; padding: 10px 0; border-top: 1px solid var(--line); }
.ss-consent-q .cell-two { flex: 1 1 200px; min-width: 0; }
.ss-consent .notice-line { margin-top: 8px; }
.ss-consent-hint { margin-top: 8px; }
.ss-consent-write .seg { flex-wrap: wrap; }

/* 담기 */
.ss-lines { display: flex; flex-direction: column; }
.ss-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.ss-lines > :first-child .ss-line, .ss-lines > .ss-line:first-child { border-top: 0; }
.ss-line-wrap { display: flex; flex-direction: column; }
.ss-line-wrap + .ss-line-wrap .ss-line, .ss-line + .ss-line-wrap .ss-line { border-top: 1px solid var(--line); }
.ss-line-sub { white-space: normal; }
.ss-access { white-space: normal; }
.ss-line-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.ss-line-amt .t-value { white-space: nowrap; }
.ss-line-amt .btn-text { min-height: 24px; padding: 0; }
.ss-line-date { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; }
.ss-line-date .input { max-width: 200px; }
.ss-empty-cart { padding: 4px 0; }
.ss-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.ss-total .t-name { font-variant-numeric: tabular-nums; }
.locker[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }

/* 금액 */
.ss-alloc-wrap { padding: 0; }
.ss-alloc { width: 100%; }
.ss-alloc td, .ss-alloc th { height: auto; padding-top: 8px; padding-bottom: 8px; }
.ss-date-ro { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--input); padding: 0 14px; border-radius: var(--r-input); background: var(--mute-bg); }
.ss-date-ro .ico { width: 20px; height: 20px; color: var(--faint); }
.seg.is-off { opacity: .5; }
.ss-act-row { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px; }

/* 아래 고정 */
.ss-foot { display: flex; flex-direction: column; gap: 10px; }
.ss-foot-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ss-foot-sum:empty, .ss-foot-err:empty, .ss-foot-extra:empty { display: none; }
.ss-foot-sum .t-sub b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-foot-sum .t-sub b.t-warn { color: var(--stop); }

/* 완료 */
.ss-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 8px 8px; }
.ss-done > .droplet { width: 34px; height: 48px; margin-bottom: 16px; }
.ss-done .t-section:focus { outline: none; }
.ss-done .notice-line { align-self: stretch; text-align: left; }
.ss-done-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 12px; }
.ss-reg-done { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-input); background: var(--go-bg); }
.ss-reg-done .sd-mark { flex: none; width: 32px; height: 32px; margin: 0; }
.ss-reg-done .t-name { font-weight: 700; }

/* 영수증 */
.receipt { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--r-card); text-align: left; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-input); }
.rc-table td, .rc-table th { height: auto; padding-top: 8px; padding-bottom: 8px; }
.rc-table td .t-sub { display: block; }
.rc-sum { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line-strong); }
.rc-sum dt { color: var(--muted); font-size: var(--fs-13); }
.rc-sum dd { margin: 0; text-align: right; font-weight: 700; font-size: var(--fs-14); }

/* 환불 단계 표시 */
.rf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.rf-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: var(--r-input); background: var(--mute-bg); color: var(--muted); font-size: var(--fs-13); font-weight: 600; }
.rf-step.is-now { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.rf-step.is-done { color: var(--ink); }
.rf-num { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-input); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.rf-step.is-now .rf-num { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.rf-step.is-done .rf-num { background: var(--go-bg); color: var(--go); box-shadow: none; }
.rf-num .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.rf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 머리 줄 찾기의 [새 회원으로 등록] */
.hb-register { margin-top: 8px; }

/* 폰 = 화면 전체 시트(시안 B-2 @media) */
@media (max-width: 767px) {
  .side-sheet.is-full { width: 100vw; }
  .side-sheet.is-full .sheet-head { padding-left: 20px; }
  .side-sheet.is-full .sheet-body { padding: 20px; gap: 20px; }
  .side-sheet.is-full .sheet-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .ss-form .sheet-sec + .sheet-sec { padding-top: 20px; }
  .ss-line { grid-template-columns: minmax(0, 1fr) auto 32px; }
  .rf-step { padding: 8px; }
}

/* 영수증 인쇄 — 인쇄할 때만 영수증 한 장(screens/receipt.js printReceipt) */
@media print {
  html.is-print-receipt body * { visibility: hidden !important; }
  html.is-print-receipt .receipt, html.is-print-receipt .receipt * { visibility: visible !important; }
  html.is-print-receipt .receipt { position: absolute; left: 0; top: 0; width: 100%; margin: 0; box-shadow: none; }
}

/* 빈 자리(결과 모름 띠·등록 결과·오류 줄)가 비어 있으면 간격을 만들지 않는다 */
.ss-sheet > :empty, .ss-form > div:empty, .ss-form .sheet-sec > div:empty, .ss-form .stack > div:empty { display: none; }
.ss-inline > span { min-width: 0; flex: 1 1 0; }
/* 빈 락커 번호판 — 한 번에 4줄쯤, 나머지는 안에서 굴린다 */
.ss-form .lockers { max-height: 212px; overflow-y: auto; padding: 2px; margin: -2px; }
.ss-sheet .field > .seg { align-self: flex-start; }