/* ============================================================
   InfraTree v2 — 요금·결제 (design/specs/checkout.md)
   tokens.css + components.css 위. 플랜 카드는 홈 요금 카드(home.css .home-price)와 같은 모양.
   ============================================================ */
.it-accent { color: var(--it-accent); }
.co-page { max-width: 980px; padding-top: var(--it-sp-5); padding-bottom: var(--it-sp-7); display: grid; gap: var(--it-sp-6); }
.co-muted { color: var(--it-text-2); font-size: var(--it-fs-sm); margin: 0; }
.co-h2 { font-size: var(--it-fs-lg); font-weight: 600; margin: 0 0 var(--it-sp-2); }

/* 머리 */
.co-head { display: grid; gap: var(--it-sp-3); }
.co-lead { margin: 0; color: var(--it-text-2); font-size: var(--it-fs-md); line-height: var(--it-lh); max-width: var(--it-content-max); }
.co-me { display: grid; gap: 2px; }
.co-me-line { margin: 0; font-size: var(--it-fs-sm); color: var(--it-text); }
.co-me-line:empty { display: none; }
.form-status { margin: 0; font-size: var(--it-fs-sm); }
.form-status:empty { display: none; }
.form-status[data-type="error"], .form-status.is-error { color: var(--it-st-danger); }
.form-status[data-type="success"], .form-status.is-success { color: var(--it-accent); }

/* 진행 단계 */
.co-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--it-sp-2); }
.co-step {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--it-sp-2); row-gap: 2px; align-items: center;
  padding: var(--it-sp-3); border: 1px solid var(--it-border); border-radius: var(--it-radius); background: var(--it-panel);
}
.co-step-n {
  grid-row: span 2; width: 24px; height: 24px; border-radius: var(--it-radius-pill); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--it-mono); font-size: var(--it-fs-xs); color: var(--it-text-2); border: 1px solid var(--it-border-2);
}
.co-step-t { font-size: var(--it-fs-sm); font-weight: 600; color: var(--it-text); }
.co-step-d { font-size: var(--it-fs-xs); color: var(--it-muted); line-height: 1.45; }
.co-step.is-done .co-step-n { background: var(--it-accent-dim); border-color: var(--it-accent-line); color: var(--it-accent); }
.co-step.is-current { border-color: var(--it-accent-line); background: var(--it-accent-dim); }
.co-step.is-current .co-step-n { background: var(--it-accent); border-color: var(--it-accent); color: var(--it-on-accent); }

/* 플랜 카드 (홈 요금 카드와 같은 모양) */
.co-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--it-sp-4); align-items: stretch; }
.co-plan { display: grid; gap: var(--it-sp-4); align-content: start; padding: var(--it-sp-5); }
.co-plan.is-pro { border-color: var(--it-accent-line); }
.co-plan-name { font-size: var(--it-fs-lg); font-weight: 700; }
.co-plan-price { font-size: var(--it-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.co-plan-promise { margin: 0; font-size: var(--it-fs-sm); color: var(--it-text-2); line-height: var(--it-lh); }
.co-plan-cycles { display: flex; gap: var(--it-sp-2); flex-wrap: wrap; }
.co-feat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--it-sp-2); font-size: var(--it-fs-sm); color: var(--it-text-body); }
.co-feat li { display: flex; gap: var(--it-sp-2); align-items: flex-start; }
.co-feat .it-icon { flex: none; margin-top: 2px; color: var(--it-text-2); }
.co-plan.is-pro .co-feat .it-icon { color: var(--it-accent); }
.co-plan .it-btn { margin-top: auto; text-decoration: none; }

/* 신청 + 내 신청 상태 */
.co-apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--it-sp-5); align-items: start; }
.co-form { display: grid; gap: var(--it-sp-4); padding: var(--it-sp-5); }
.co-form .it-field-label { display: block; }
.co-summary { display: flex; gap: var(--it-sp-2); flex-wrap: wrap; }
.co-summary:empty { display: none; }
.co-bank { display: grid; gap: var(--it-sp-2); padding: var(--it-sp-4); border: 1px solid var(--it-border); border-radius: var(--it-radius-sm); background: var(--it-panel-2); font-size: var(--it-fs-sm); }
.co-bank p { margin: 0; }
.co-bank[hidden] { display: none; }
.co-fine { margin: 0; font-size: var(--it-fs-xs); color: var(--it-muted); line-height: var(--it-lh); }
.co-fine a { color: var(--it-text-2); }
.co-orders { display: grid; gap: var(--it-sp-2); }
.co-order-list { display: grid; gap: var(--it-sp-3); margin-top: var(--it-sp-2); }
.co-empty { padding: var(--it-sp-5); text-align: center; color: var(--it-text-2); font-size: var(--it-fs-sm); border: 1px dashed var(--it-border-2); border-radius: var(--it-radius); }
.co-order { display: grid; gap: var(--it-sp-3); padding: var(--it-sp-4); }
.co-order-head { display: flex; justify-content: space-between; gap: var(--it-sp-3); align-items: flex-start; }
.co-order-title { font-weight: 600; }
.co-order-amt { font-size: var(--it-fs-sm); color: var(--it-text-2); }
.co-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--it-sp-2) var(--it-sp-4); margin: 0; font-size: var(--it-fs-sm); }
.co-order-grid dt { color: var(--it-muted); font-size: var(--it-fs-xs); }
.co-order-grid dd { margin: 0; color: var(--it-text); overflow-wrap: anywhere; }
.co-order-note { margin: 0; font-size: var(--it-fs-sm); color: var(--it-text-2); }

@media (max-width: 860px) {
  .co-plans, .co-apply { grid-template-columns: minmax(0, 1fr); }
  .co-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}