/* 에일리오 결제 화면 (10-10) — Graphite Atelier 토큰. 밝은 바탕에는 늘 진한 글자를 명시. */
.checkout { color: var(--color-ink); }
.checkout-head h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); text-wrap: balance; color: var(--color-ink); }
.checkout-head p { color: var(--color-ink-2); }
.co-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-6); align-items: start; }
.co-sum, .co-pay, .co-done { border-radius: var(--radius-hero); background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); padding: var(--space-6); }
.co-sum dl, .co-recap { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.co-sum dl > div, .co-recap > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.co-sum dt, .co-recap dt { font-size: var(--text-sm); color: var(--color-ink-3); }
.co-sum dd, .co-recap dd { margin: 0; color: var(--color-ink); }
.co-sum dd b { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.co-sum dd small, .co-recap dd small { color: var(--color-ink-3); }
.co-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-5); }
.co-tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; line-height: 1.25; }
.co-tabs button small { font-size: 11px; font-weight: 500; color: var(--color-ink-3); }
.co-tabs button[disabled] { opacity: 0.45; cursor: not-allowed; }
.co-widget { min-height: 200px; border-radius: var(--radius-card); background: #ffffff; color: #111214; }
.co-agree { margin-top: var(--space-2); }
.co-go { width: 100%; margin-top: var(--space-4); }
.co-note { margin: 0 0 var(--space-3); padding: 10px 12px; border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.co-note b { color: var(--color-ink); }
.co-ppbtn { min-height: 120px; border-radius: var(--radius-card); background: #ffffff; color: #111214; padding: var(--space-3); }
.co-err { padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-danger-wash); color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; }
.co-legal { margin-top: var(--space-5); font-size: var(--text-xs); line-height: 1.6; color: var(--color-ink-3); }
.co-legal a { color: var(--color-ink-2); }
.co-admin { margin: 0 0 var(--space-5); padding: 12px 14px; border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink); font-size: var(--text-sm); }
.co-admin b { color: var(--color-ink); }
.co-gate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; }
.co-gate p { flex-basis: 100%; color: var(--color-ink-2); }
.co-gate b { color: var(--color-ink); }
.co-done { max-width: 40rem; margin: var(--space-6) auto 0; }
.co-done h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); color: var(--color-ink); text-wrap: balance; }
.co-done > p { color: var(--color-ink-2); }
.co-recap { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.co-recap dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.co-done__go { justify-content: flex-start; margin-top: var(--space-6); }
.co-done--fail h1 { color: var(--color-ink); }

/* 요금제 화면 */
.plan__next { margin-top: -4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-ink); }
.plan__usd { display: block; margin-top: 6px; text-align: center; font-size: var(--text-xs); color: var(--color-ink-3); }

/* 결제 내역(계정 창) */
.pay-cur { margin-bottom: var(--space-4); padding: 10px 12px; border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink); font-size: var(--text-sm); }
.pay-cur b { color: var(--color-ink); }
.pay-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; }
.pay { padding: var(--space-4) 0; border-top: 1px solid var(--color-line); color: var(--color-ink); }
.pay:first-child { border-top: 0; padding-top: 0; }
.pay__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pay__top b { font-family: var(--font-display); font-weight: 650; color: var(--color-ink); }
.pay__meta { margin-top: 4px; font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.pay__rule { margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-3); }
.pay__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.pay__id { margin-left: auto; font-size: 11px; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.pay-st { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-line-strong); background: var(--color-surface); color: var(--color-ink-2); font-size: 11.5px; font-weight: 600; }
.pay-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-3); }
.pay-st--paid::before { background: var(--color-success); }
.pay-st--partial_refunded::before, .pay-st--review::before { background: var(--color-accent); }
.pay-st--failed::before { background: var(--color-danger); }
.pay-tag { font-size: var(--text-xs); color: var(--color-ink-2); }

@media (max-width: 1023px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .co-sum, .co-pay, .co-done { padding: var(--space-5) var(--space-4); }
  .co-sum dd b { font-size: var(--text-xl); }
  .pay__id { margin-left: 0; flex-basis: 100%; }
}