/* 이용권 결제와 연장: 왼쪽에 구매자 정보와 패키지·기간, 오른쪽에 요약 (현재 이용 상태, 금액, 결제 수단, 동의, 결제 단추). */

.checkout {
  padding-top: var(--sp6);
}

.checkout-head {
  margin-bottom: var(--sp6);
  text-align: center;
}

.checkout-head h1 {
  margin: 0 0 var(--sp2);
  font-size: var(--fs-h1);
}

.checkout-head p {
  margin: 0;
  color: var(--text-dim);
}

.checkout-alert {
  max-width: 1040px;
  margin: 0 auto var(--sp4);
}

.checkout-grid {
  display: grid;
  gap: var(--sp5);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .checkout-summary {
    position: sticky;
    top: calc(var(--h-bar) + var(--sp4));
  }
}

.checkout-main {
  display: grid;
  gap: var(--sp5);
  min-width: 0;
}

.checkout-panel {
  display: grid;
  gap: var(--sp4);
  padding: var(--sp5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}

.checkout-panel h2 {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  margin: 0;
  font-size: var(--fs-lg);
}

.checkout-panel .field-hint {
  margin: 0;
}

.checkout-row2 {
  display: grid;
  gap: var(--sp4);
}

@media (min-width: 560px) {
  .checkout-row2 {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-subhead {
  margin-top: var(--sp2) !important;
}

/* 패키지 카드와 기간 단추: 라디오를 감싼 카드. 고른 것은 강조색 테두리. */
.packGrid,
.periodGrid {
  display: grid;
  gap: var(--sp2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.packGrid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.periodGrid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.packCard,
.periodBtn {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--sp3) var(--sp4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  cursor: pointer;
}

.packCard input,
.periodBtn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.packCard:has(input:checked),
.periodBtn:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  outline: 1px solid var(--accent); /* 테두리 안쪽 선 */
  outline-offset: -2px;
}

.packCard:has(input:focus-visible),
.periodBtn:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.packCard-agents,
.periodBtn-months {
  font-weight: 700;
}

.packCard-price,
.periodBtn-total {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.packCard-unit,
.periodBtn-dates,
.periodBtn-perMonth {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.periodBtn-badge {
  justify-self: start;
  padding: 0 var(--sp1);
  border-radius: var(--radius-sm);
  background: var(--ok-fill);
  color: var(--ok-text);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.checkout-fixed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.checkout-fixedValue {
  font-weight: 700;
}

.checkout-buyer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
  margin: 0;
}

.checkout-buyer span {
  color: var(--text-dim);
}

.checkout-more summary {
  cursor: pointer;
  font-weight: 700;
}

.checkout-more[open] {
  display: grid;
  gap: var(--sp3);
}

/* 요약 */
.checkout-summary {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}

.checkout-summaryTop {
  display: grid;
  gap: var(--sp4);
  padding: var(--sp5);
  background: var(--ground);
}

.checkout-summaryKey {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.checkout-summaryPlan {
  margin: calc(var(--sp3) * -1) 0 0;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.checkout-status {
  display: grid;
  gap: 2px;
  padding: var(--sp4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}


.checkout-statusLine {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.checkout-lines {
  display: grid;
  gap: var(--sp1);
  margin: 0;
  font-size: var(--fs-sm);
}

.checkout-lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp3);
}

.checkout-lines dt {
  color: var(--text-dim);
}

.checkout-lines dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.checkout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp3);
  padding-top: var(--sp4);
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.checkout-total span {
  font-size: var(--fs-lg);
}

.checkout-total strong {
  color: var(--accent);
  font-size: var(--fs-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.checkout-summaryPay {
  display: grid;
  gap: var(--sp4);
  padding: var(--sp5) var(--sp5) 0;
}

.checkout-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-methods legend {
  margin-bottom: var(--sp3);
  padding: 0;
  font-weight: 700;
}

/* 결제 수단 단추: 라디오를 둥근 단추로. 하나뿐이면 한 줄을 다 쓴다. */
.payBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--panel-bg);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.payBtn:only-of-type {
  grid-column: 1 / -1;
}

.payBtn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payBtn:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.payBtn:has(input:checked) {
  border-color: var(--accent-btn);
  background: var(--accent-btn);
  color: var(--on-accent);
}

/* 카카오페이: 카카오의 노랑 위에 검은 글자. */
.payBtn-kakao {
  border-color: var(--kakao-deep);
  color: var(--kakao-ink);
}

.payBtn-kakao:has(input:checked) {
  border-color: var(--kakao);
  background: var(--kakao);
  color: var(--kakao-ink);
}

.checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp2);
  font-size: var(--fs-sm);
}

.checkout-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}

.checkout-summaryPay .field-hint {
  margin: calc(var(--sp3) * -1) 0 0;
}

.checkout-center {
  text-align: center;
}

.checkout-note {
  margin: 0;
  padding: var(--sp4) var(--sp5) var(--sp5);
}

.checkout-submit {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-lg);
}


/* 제품 고르기: 결제로 파는 제품이 둘 이상일 때 머리 아래의 탭. */
.checkout-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp2);
  margin: 0 auto var(--sp5);
}

.checkout-product {
  padding: var(--sp2) var(--sp4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--panel-bg);
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.checkout-product.is-current {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

.checkout-quote {
  justify-self: stretch;
  text-align: center;
}

/* 매니저 수: − 와 + 사이의 숫자 칸. */
.managerPick {
  display: inline-flex;
  align-items: stretch;
  justify-self: start;
  overflow: hidden;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.managerPick-btn {
  width: 48px;
  min-height: 48px;
  border: 0;
  background: var(--fill-dim);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
}

.managerPick-btn:hover {
  background: var(--accent-tint);
}

.managerPick-value {
  display: flex;
  align-items: center;
  gap: var(--sp1);
  padding: 0 var(--sp3);
  font-weight: 700;
}

.managerPick-value input {
  width: 3.5em;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: center;
  -moz-appearance: textfield;
}

.managerPick-value input::-webkit-outer-spin-button,
.managerPick-value input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* 패키지가 하나뿐인 제품: 고를 것 없이 포함된 것을 한 줄로. */
.checkout-single {
  display: grid;
  gap: var(--sp1);
  margin: 0;
  padding: var(--sp3) var(--sp4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-tint);
}

.checkout-single span {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* 좌석이 동시에 다루는 수: 강조색 한 줄. */
.checkout-capacity {
  color: var(--accent) !important;
  font-weight: 700;
}

/* 덤 개월: 첫 구매에만, 기간 단추의 강조색 꼬리표. */
.periodBtn-bonus {
  justify-self: start;
  padding: 0 var(--sp1);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 요금 페이지에서 골라 온 구성과, 접어 둔 고르기 (패키지 바꾸기, 매니저 추가, 이용 기간 안내). */
.checkout-picked {
  margin: 0 0 var(--sp3);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.checkout-change {
  margin: var(--sp3) 0;
  border-top: 1px solid var(--border);
}

.checkout-change > summary,
.checkout-noteMore > summary {
  padding: var(--sp3) 0;
  font-weight: 700;
  cursor: pointer;
}

.checkout-optional {
  margin-left: var(--sp2);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.checkout-noteMore {
  margin: 0;
  padding: var(--sp2) var(--sp5) var(--sp4);
  color: var(--text-dim);
}

.checkout-noteMore .checkout-note {
  padding: 0;
}

.checkout-couponApply {
  display: flex;
  gap: var(--sp2);
}

.checkout-couponApply input {
  flex: 1;
  min-width: 0;
}