/* ===========================================================
   결제 동선 — 요금 · 결제 · 결제 결과 · 내 구독
   네 화면이 이 파일 하나를 함께 쓴다. 여기 손대면 넷이 같이 움직인다.

   2026-08-23 시안 이식: rem 과 하드코딩 색을 토큰과 13단 스케일로 바꿨다.
   =========================================================== */

.co-main {
  min-height: calc(100vh - var(--header-height));
  padding: 56px 20px 96px;
  background: var(--surface-sunken);
}

.co-wrap {
  max-width: 480px;
  margin: 0 auto;
}

/* 안내 배너 — 결제는 되돌리기 어려우니 상태를 분명히 말한다 */
.co-test-badge {
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--t-13);
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

.co-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 35, 59, .06);
}

.co-card.center { text-align: center; }

.co-label {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  margin-bottom: 12px;
}

.co-title {
  font-size: var(--t-24);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  margin-bottom: 18px;
}

.co-price {
  font-size: var(--t-16);
  color: var(--ink-500);
  margin-bottom: 24px;
}

/* 사람이 플랜을 비교하는 단위라 금액만 크게 띄운다 */
.co-price strong {
  font-size: var(--t-40);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}

.co-period {
  color: var(--ink-400);
  font-size: var(--t-15);
}

.co-benefits {
  list-style: none;
  padding: 20px 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.co-benefits li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: var(--t-14);
  line-height: 1.7;
  color: var(--ink-500);
}

.co-benefits li:last-child { margin-bottom: 0; }

.co-benefits li strong { color: var(--ink-900); }

/* 체크는 아이콘이 아니라 글자다 — 목록이 길어 SVG 를 쓰면 마크업이 무거워진다 */
.co-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--ok);
}

/* 주 동작이라 50px. 시안의 결제 버튼과 같은 높이다 */
.co-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ink-900);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--t-15);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.co-btn:hover { background: var(--ink-hover); }

.co-btn:disabled {
  background: var(--ink-300);
  border-color: var(--ink-300);
  cursor: default;
}

.co-btn.secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-700);
}

.co-btn.secondary:hover { background: var(--surface-sunken); }

/* 해지는 되돌릴 수 없다. 주 동작과 같은 무게로 두지 않는다 */
.co-btn.danger {
  background: var(--surface);
  border-color: var(--danger-line);
  color: var(--danger);
}

.co-btn.danger:hover { background: var(--danger-soft); }

.co-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.co-note {
  margin-top: 16px;
  font-size: var(--t-13);
  line-height: 1.8;
  color: var(--ink-400);
  text-wrap: pretty;
}

.co-note strong { color: var(--ink-900); }

.co-error {
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--t-14);
  line-height: 1.7;
}

.co-error-code {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  color: var(--ink-400);
}

/* ── 쿠폰 (2026-08-23) ────────────────────────────────────
   금액은 서버가 정한 값만 그린다. 적용/해제는 주문을 다시 만드는 링크다. */
.co-coupon {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}

.co-coupon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.co-coupon-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--ink-700);
}

.co-coupon-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 32px 미만은 손가락으로 못 누른다 */
.co-coupon-toggle {
  flex-shrink: 0;
  height: var(--control-sm);
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--t-12);
  color: var(--ink-500);
}

.co-coupon-toggle:hover { background: var(--surface-sunken); }

.co-coupon-toggle.apply {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
}

.co-coupon-toggle.apply:hover { background: var(--accent-strong); }

.co-amounts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.co-amount-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: var(--t-13);
  color: var(--ink-500);
}

.co-amount-row.discount { color: var(--accent); }

.co-amount-row.total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--t-15);
  font-weight: 700;
  color: var(--ink-900);
}

/* 다음 달부터 정가라는 것을 말하지 않으면 다음 결제에서 놀란다 */
.co-coupon-note {
  margin: 10px 0 0;
  font-size: var(--t-12);
  line-height: 1.7;
  color: var(--ink-400);
}

/* 해지 사유(2차 명세 21장). 눈에 띄되 해지를 막지 않게 조용한 톤으로 둔다. */
.cancel-reason {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.cancel-reason legend {
  padding: 0 6px;
  font-size: var(--t-13);
  color: var(--ink-500);
}

.cancel-reason legend span {
  font-size: var(--t-12);
  color: var(--ink-300);
}

.cancel-reason label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--ink-500);
  cursor: pointer;
}

/* 기타를 고른 동안에만 열리는 입력란 */
.cancel-detail {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.cancel-detail-label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--t-12);
  color: var(--ink-400);
}

.cancel-detail textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-700);
  font-family: inherit;
  font-size: var(--t-13);
  line-height: 1.7;
  resize: vertical;
}

.cancel-detail textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.cancel-detail textarea::placeholder { color: var(--ink-300); }

@media (max-width: 520px) {
  .co-main { padding: 32px 16px 64px; }
  .co-card { padding: 24px 20px; }
  .co-title { font-size: var(--t-20); }
  .co-price strong { font-size: var(--t-32); }
}

/* ── 선결제 (2026-08-23) ────────────────────────────────────────
   월 환산 가격을 앞세운다. 월 구독과 견줄 수 있는 단위가 그것뿐이라,
   318,600원만 크게 쓰면 비싸 보이기만 하고 무엇과 비교할지가 없다. */
.co-prepaid {
  margin: 18px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.co-prepaid-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--ink-700);
}

.co-prepaid-badge {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-11);
  font-weight: 600;
}

.co-prepaid-price {
  margin-top: 8px;
  font-size: var(--t-17);
  color: var(--ink-700);
}

.co-prepaid-price strong {
  font-size: var(--t-26);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.co-prepaid-note {
  margin-top: 4px;
  font-size: var(--t-13);
  color: var(--ink-400);
}

/* 월 구독과 선결제를 결제 화면에서 바꾼다. 둘 다 팔 때만 나온다 */
.co-switch {
  display: flex;
  gap: 10px;
  margin: 18px 0 4px;
}

.co-switch-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-400);
  font-size: var(--t-12);
  text-decoration: none;
}

.co-switch-item strong { font-size: var(--t-15); color: var(--ink-700); }
.co-switch-item:hover { border-color: var(--line-strong); }

/* 고른 것. 색이 아니라 테두리로 말한다 — 결제 화면에 색을 더 넣지 않는다 */
.co-switch-item.on {
  border-color: var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--ink-900);
  color: var(--ink-500);
}

.co-switch-item.on strong { color: var(--ink-900); }