/* 클래버 — 담당 buy 의 화면 CSS(수강생 화면). 클래스 접두어는 .buy- 만. 토큰은 base.css :root 의 var(--…) 만(hex·rgb 직접 금지), 크기는 rem. */
/* site.css 의 .buy-card · .buy-lines · .buy-points(강의 상세 결제 패널)는 그대로 쓰고 여기서 다시 정의하지 않는다. */

/* ── 공통 카드 조각 ───────────────── */
.buy-sec { display: flex; flex-direction: column; gap: var(--sp-4); }
.buy-sec-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.buy-sec-title .ic { color: var(--accent); }
.buy-sec > .row-between .buy-sec-title { margin: 0; }
.buy-kv { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.buy-kv > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--sp-3); padding: .45rem 0; border-bottom: .0625rem solid var(--line); align-items: center; }
.buy-kv > div:last-child { border-bottom: 0; }
.buy-kv dt { color: var(--ink-3); }
.buy-kv dd { font-weight: 650; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.buy-kv .minus { color: var(--sale); }
.buy-kv-total dt { color: var(--ink); font-weight: 800; }
.buy-kv-total dd { font-size: var(--fs-h4); font-weight: 850; color: var(--accent-ink); }
.buy-kv-pbar .pbar { max-width: 18rem; }
.buy-bullets { display: grid; gap: var(--sp-2); padding-left: 1.1rem; list-style: disc; color: var(--ink-2); }
.buy-sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; margin-top: .125rem; }
.buy-danger-text { color: var(--danger); }
.buy-actions { flex-wrap: wrap; }

/* ── 결제(데모) ───────────────── */
.buy-co { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-5); align-items: start; margin-top: var(--sp-5); }
.buy-co-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.buy-co-side { position: sticky; top: calc(var(--header-h, 4.5rem) + var(--sp-3)); }
.buy-prod { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.buy-prod-thumb .thumb { border-radius: var(--r-sm); }
.buy-prod-info { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.buy-prod-title { font-size: var(--fs-lg); font-weight: 800; line-height: 1.4; }
.buy-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-2); }
.buy-method { position: relative; display: block; cursor: pointer; }
.buy-method input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.buy-method-box { display: flex; align-items: flex-start; gap: var(--sp-3); height: 100%; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); border: .0938rem solid var(--line-input); border-radius: var(--r-sm); background: var(--surface); transition: border-color var(--t-short) var(--ease), background-color var(--t-short) var(--ease); }
.buy-method-box > .ic { margin-top: .125rem; color: var(--ink-3); flex: 0 0 auto; }
.buy-method-box > span { display: flex; flex-direction: column; gap: .125rem; }
.buy-method-box small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.buy-method:hover .buy-method-box { border-color: var(--ink-2); }
.buy-method input:checked + .buy-method-box { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 .0625rem var(--accent); }
.buy-method input:checked + .buy-method-box > .ic { color: var(--accent-ink); }
.buy-method input:focus-visible + .buy-method-box { box-shadow: var(--focus); }
.buy-method input:disabled + .buy-method-box { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.buy-method input[aria-invalid="true"] + .buy-method-box { border-color: var(--danger); }
.buy-demo { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: .0938rem dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-3); }
.buy-demo legend { display: flex; align-items: center; gap: .375rem; padding: 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 750; }
.buy-demo-opts .radio { padding: .3rem 0; font-size: var(--fs-sm); }
.buy-agree-all { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--surface-2); }
.buy-agree-list { display: flex; flex-direction: column; padding: 0 var(--sp-2); }
.buy-agree-list .check { font-size: var(--fs-sm); }
.buy-failbox { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: .0938rem solid var(--danger); border-radius: var(--r-sm); background: var(--danger-soft); }
.buy-failbox p { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; color: var(--danger); font-size: var(--fs-sm); }
.buy-busy { display: flex; align-items: center; gap: .375rem; }

/* ── 결제 완료·실패 ───────────────── */
.buy-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-6) var(--sp-5); }
.buy-result h1 { font-size: var(--fs-h3); font-weight: 850; line-height: 1.3; }
.buy-result > p { max-width: 34rem; }
.buy-ico-ok { background: var(--ok-soft); color: var(--ok); }
.buy-failmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: .0625rem solid var(--line); width: 100%; font-size: var(--fs-sm); }
.buy-failmeta > div { display: flex; gap: var(--sp-2); }
.buy-failmeta dt { color: var(--ink-3); }
.buy-failmeta dd { font-weight: 700; }
.buy-todo { display: grid; gap: var(--sp-2); }
.buy-todo li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-3); }
.buy-todo li > .ic { color: var(--accent); margin-top: .125rem; flex: 0 0 auto; }
.buy-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.buy-why li { display: flex; flex-direction: column; gap: .25rem; padding: var(--sp-3) var(--sp-4); border: .0625rem solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.buy-why span { color: var(--ink-3); }

/* ── 요약 숫자·목록 막대(쿠폰함·결제 내역) ───────────────── */
.buy-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.buy-stats li { display: flex; flex-direction: column; gap: .25rem; padding: var(--sp-4); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); }
.buy-stats strong { font-size: var(--fs-h4); font-weight: 850; }
.buy-listbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.buy-listbar .tabs { flex: 1 1 auto; min-width: 0; }
.buy-sortform { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.buy-sortform .select { width: auto; min-width: 9.5rem; }

/* ── 쿠폰함 ───────────────── */
.buy-coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.buy-coupon { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: 1fr auto; background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); overflow: hidden; }
.buy-coupon-amt { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; padding: var(--sp-3); background: var(--accent-soft); color: var(--accent-ink); border-right: .0938rem dashed var(--line-strong); text-align: center; }
.buy-coupon-amt strong { font-size: var(--fs-h4); font-weight: 850; line-height: 1.15; overflow-wrap: anywhere; }
.buy-coupon-amt span { font-size: var(--fs-xs); font-weight: 700; }
.buy-coupon-body { display: flex; flex-direction: column; gap: .25rem; padding: var(--sp-4) var(--sp-4) var(--sp-2); min-width: 0; }
.buy-coupon-body .ic-sm { vertical-align: -.125rem; margin-right: .25rem; }
.buy-coupon-name { font-size: var(--fs-md); font-weight: 800; line-height: 1.4; }
.buy-coupon-act { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.buy-coupon-act .btn { width: 100%; }
.buy-coupon.is-off .buy-coupon-amt { background: var(--surface-2); color: var(--ink-3); }
.buy-coupon.is-off .buy-coupon-name { color: var(--ink-2); }

/* ── 결제 내역 표 ───────────────── */
.buy-table th[scope="row"] { min-width: 12rem; }

/* ── 영수증·환불 요청 2단 ───────────────── */
.buy-rc { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-5); align-items: start; }
.buy-rc-main { min-width: 0; }
.buy-rc-side { display: flex; flex-direction: column; min-width: 0; }
.buy-rc-side .buy-card { gap: var(--sp-3); }
.buy-rc-side .buy-lines dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.buy-rc-side .steps { grid-auto-flow: row; gap: var(--sp-3); margin: 0; }
.buy-rc-side .steps li { grid-template-columns: 2.235rem minmax(0, 1fr); grid-template-rows: auto; justify-items: start; align-items: center; text-align: left; }
.buy-rc-side .steps li::before { display: none; }
.buy-rflist { display: grid; gap: var(--sp-3); }
.buy-rflist li { padding: var(--sp-3) var(--sp-4); border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.buy-print-only { display: none; }

@media (max-width: 60rem) {
  .buy-co, .buy-rc { grid-template-columns: minmax(0, 1fr); }
  .buy-co-side { position: static; }
  .buy-coupons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.5rem) {
  .buy-stats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .buy-stats li { flex: 0 0 64%; scroll-snap-align: start; }
  .buy-table .table { min-width: 0; }
  .buy-table th[scope="row"] { min-width: 8rem; }
  .buy-table td:first-child { width: 5.5rem; font-size: var(--fs-xs); }
  .buy-table td:first-child .nowrap { display: block; }
  .buy-table th, .buy-table td { padding: .65rem .55rem; font-size: var(--fs-sm); }
  .buy-why { grid-template-columns: minmax(0, 1fr); }
  .buy-sortform { width: 100%; }
  .buy-sortform .select { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 35rem) {
  .buy-prod { grid-template-columns: minmax(0, 1fr); }
  .buy-prod-thumb { max-width: 14rem; }
  .buy-kv > div { grid-template-columns: 5.5rem 1fr; }
  .buy-result { padding: var(--sp-5) var(--sp-4); }
  .buy-result h1 { font-size: var(--fs-h4); }
  .buy-actions .btn { flex: 1 1 100%; }
  .buy-coupon { grid-template-columns: 5.25rem minmax(0, 1fr); }
}

/* ── 인쇄(영수증) ───────────────── */
@media print {
  .site-header, .site-footer, .mbar, .toasts, .skip, .crumbs, .buy-rc-side .btn, .buy-rc-side form, .page-head .btn-row { display: none !important; }
  body { background: var(--surface); }
  .buy-rc { grid-template-columns: minmax(0, 1fr); }
  .buy-receipt .card { box-shadow: none; break-inside: avoid; }
  .buy-print-only { display: block; margin-top: var(--sp-4); color: var(--ink-3); }
}