/*! KNGS commerce.css — checkout / success / fail / 약관·환불·개인정보 페이지 (v2 토큰만 사용) */

/* ---------- 공통 페이지 머리 ---------- */
.co-head { padding-top: var(--sp-6); padding-bottom: var(--sp-4); }
.co-head h1 { font-size: var(--fs-h2); letter-spacing: var(--ls-display, -0.04em); margin-top: var(--sp-2); }
.co-head p { color: var(--text-2); margin-top: var(--sp-2); }
.co-steps { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); list-style: none; padding: 0; flex-wrap: wrap; }
.co-steps li { display: inline-flex; align-items: center; gap: 6px; }
.co-steps li + li::before { content: ""; width: 14px; height: 1px; background: var(--line-strong); }
.co-steps [aria-current="step"] { color: var(--accent-text); font-weight: var(--fw-bold); }

/* ---------- 레이아웃 ---------- */
.co-grid { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-12); }
@media (min-width: 1024px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--sp-6); }
  .co-side { position: sticky; top: calc(var(--header-h-compact) + var(--safe-top) + var(--sp-4)); }
}
.co-card { background: var(--panel-bg); border: 1px solid var(--panel-bd); box-shadow: var(--panel-shadow); border-radius: var(--r-xl); padding: var(--sp-5); min-width: 0; }
.co-card + .co-card { margin-top: var(--sp-4); }
.co-card__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h4); font-weight: var(--fw-black); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.co-card__title .badge { margin-left: auto; }
.co-card__title svg { width: 20px; height: 20px; color: var(--accent-text); }
.co-form .form-grid { gap: var(--sp-4); }
.co-form .field .help { font-size: var(--fs-xs); }

/* ---------- 주문 상품 ---------- */
.co-items { display: grid; gap: var(--sp-3); }
.co-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.co-item:last-child { border-bottom: 0; padding-bottom: 0; }
.co-item__media { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--well); box-shadow: var(--well-ring); overflow: hidden; display: grid; place-items: center; }
.co-item__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.co-item__name { font-weight: var(--fw-semibold); line-height: 1.35; color: var(--text); }
.co-item__opt { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.co-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.co-item__price { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); text-align: right; }
.co-item__price small { display: block; font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-medium, 500); }
.co-item__del { font-size: var(--fs-xs); color: var(--text-3); min-height: 36px; padding: 0 6px; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.co-excluded { margin-top: var(--sp-4); }

/* ---------- 요약 ---------- */
.co-sum dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); font-variant-numeric: tabular-nums; }
.co-sum dt { color: var(--text-2); }
.co-sum dd { text-align: right; font-weight: var(--fw-semibold); }
.co-sum .co-total { padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--fs-h4); font-weight: var(--fw-black); color: var(--text); }
.co-sum .co-total + dd { padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--accent-text); }
.co-note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; margin-top: var(--sp-3); }
.co-note + .co-note { margin-top: var(--sp-1); }
.co-free { font-size: var(--fs-xs); color: var(--ice-text, var(--info-text)); margin-top: var(--sp-2); }
.co-pay-desktop { margin-top: var(--sp-4); }
@media (max-width: 1023.98px) { .co-pay-desktop { display: none; } }
.co-sticky .sticky-cta__price b { color: var(--text); }

/* ---------- 토스 결제위젯 영역 ---------- */
.co-widget { border-radius: var(--r-lg); background: #fff; overflow: hidden; min-height: 120px; }
.co-widget + .co-widget { margin-top: var(--sp-3); }
.co-widget:empty { background: var(--surface-2); }
.co-widget-wrap { margin-inline: calc(var(--sp-2) * -1); }

/* ---------- 동의 ---------- */
.co-agree { border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); padding: var(--sp-2) var(--sp-4); }
.co-agree .check { font-weight: var(--fw-semibold); }
.co-agree ul { list-style: none; padding: 0 0 var(--sp-2) 34px; margin: 0; font-size: var(--fs-xs); color: var(--text-2); display: grid; gap: 4px; }
.co-agree a { color: var(--brand-text); text-decoration: underline; }

/* ---------- 테스트 모드 배너 ---------- */
.co-testbar { display: flex; gap: var(--sp-2); align-items: center; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--warning-soft); color: var(--warning-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-top: var(--sp-3); }
.co-testbar svg { width: 18px; height: 18px; flex: none; }

/* ---------- 우편번호 시트 ---------- */
.pc-frame { height: min(70vh, 520px); border-radius: var(--r-md); overflow: hidden; background: #fff; }

/* ---------- 결과 화면 ---------- */
.co-result { text-align: center; padding: var(--sp-8) var(--sp-2) var(--sp-4); }
.co-result__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success-text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 14%, transparent); }
.co-result__icon--fail { background: var(--danger-soft); color: var(--danger-text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 14%, transparent); }
.co-result__icon svg { width: 30px; height: 30px; }
.co-result h1 { font-size: var(--fs-h2); }
.co-result p { color: var(--text-2); margin-top: var(--sp-2); }
.co-orderno { display: inline-flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.co-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
@media (min-width: 600px) { .co-actions { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.co-spinner { width: 40px; height: 40px; margin: 0 auto var(--sp-4); border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent-bright); animation: co-spin 0.9s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .co-spinner { animation-duration: 3s; } }

/* ---------- 법적 고지 페이지 (terms / refund / privacy) ---------- */
.legal { padding-bottom: var(--sp-16); }
.legal .prose { max-width: 76ch; }
.legal .prose h2 { font-size: var(--fs-h4); padding-top: var(--sp-2); }
.legal .prose h3 { font-size: var(--fs-body); }
.legal .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal .prose th, .legal .prose td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.legal .prose th { color: var(--text-3); font-weight: var(--fw-semibold); width: 28%; }
.legal .prose strong { color: var(--text); }
.legal-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); }
.legal-meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }
.todo { display: inline-block; padding: 0 6px; border-radius: var(--r-xs); background: var(--warning-soft); color: var(--warning-text); font-size: 0.85em; font-weight: var(--fw-bold); }
.legal-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

/* ---------- 견적 폼 간소화 (contact) ---------- */
.qform-more { margin-top: var(--sp-4); border-top: 1px dashed var(--line); padding-top: var(--sp-2); }
.qform-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; font-weight: var(--fw-bold); color: var(--text); }
.qform-more > summary::-webkit-details-marker { display: none; }
.qform-more > summary span.text-3 { font-weight: var(--fw-medium, 500); font-size: var(--fs-xs); }
.qform-more > summary svg { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.qform-more[open] > summary svg { transform: rotate(180deg); }
.qform-more > .form-grid { margin-top: var(--sp-3); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.q-done { text-align: center; }
.q-done .co-orderno { margin-top: var(--sp-3); }
.q-done .co-actions { margin-top: var(--sp-4); }
/* 즉시 주문(계좌이체·카드링크·세금계산서) 결제방법 선택 */
.co-paypick { display: grid; gap: var(--sp-2); }
.co-payopt { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md, 12px); cursor: pointer; background: var(--surface-2, transparent); }
.co-payopt:has(input:checked) { border-color: var(--accent, #f26a1b); box-shadow: 0 0 0 1px var(--accent, #f26a1b) inset; }
.co-payopt input { margin-top: 3px; accent-color: var(--accent, #f26a1b); }
.co-payopt b { display: block; font-weight: var(--fw-bold, 700); }
.co-payopt small { display: block; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.co-biz { margin-top: var(--sp-2); }
.co-bank { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md, 12px); border: 1px dashed var(--accent, #f26a1b); text-align: left; }
.co-bank b { font-size: 1.125rem; }