/* =====================================================================
 * ZEP School 결제 플로우 — 공용 CSS (파운데이션)
 * 페이지 에이전트는 이 파일을 수정하지 않습니다. screenN.css 에서 화면별 스타일만.
 * 디자인 토큰은 zus(index.css)의 CSS 변수를 fallback 과 함께 사용.
 * ===================================================================== */

:root {
  --ck-bg: #F5F6F9; /* Figma bg/neutral */
  --ck-card: #FFFFFF;
  --ck-radius: var(--rounded-md, 16px);
  --ck-shadow: 0px 1px 2px 0px rgba(28, 27, 31, 0.12), 0px 0px 6px 0px rgba(28, 27, 31, 0.04);
  --ck-label: var(--text-neutral, #5D5E69);
  --ck-sub: var(--text-alternative, #7A7B89);
  --ck-strong: var(--text-default, #27262E);
  --ck-primary: var(--primary-default, #6758FF);
  --ck-primary-strong: var(--text-strong, #5748F2);
  --ck-border: var(--Input-border-default, #E9EAF2);
  --ck-gradient: linear-gradient(270deg, #6758FF 0%, #3DA9FF 100%);
}

* { box-sizing: border-box; }

/* checkout.css 는 결제 페이지에서만 로드됨 → body 배경을 결제 배경색으로.
   (school_layout body 는 흰색이라 overscroll/여백에서 흰색이 비치는 문제 방지) */
html, body { background: var(--ck-bg); }

/* 표준 school_layout 헤더/푸터를 재사용하고, navbar 아래 결제 영역만 스타일링 */
.checkout-page {
  background: var(--ck-bg);
  min-height: calc(100vh - 57px);
  color: var(--ck-strong);
  font-family: "Pretendard JP", Pretendard, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- 본문 컨테이너 ---- */
.checkout-main { padding: 40px 24px 80px; }
.ck-flow, .ck-s4 { max-width: 1000px; margin: 0 auto; }
.ck-section[hidden] { display: none; }

/* =====================================================================
 * 공용 카드 (요약 / 상세 / 시작·만료일)
 * ===================================================================== */
.ck-summary-card,
.ck-detail-card,
.ck-dates-card {
  background: var(--ck-card);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  padding: 24px;
}

.ck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 16px;
}
.ck-row-top { align-items: flex-start; }
.ck-row-label {
  color: var(--ck-label);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.ck-row-value {
  color: var(--ck-strong);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
/* .ck-row 는 flex 라 UA [hidden] 을 덮어씀 → 할인 행 토글용으로 명시 */
.ck-row[hidden] { display: none; }

/* 카드별 폰트 스펙 (디자인 감사 반영) — 공용 .ck-row-* 를 카드별로 오버라이드 */
.ck-summary-card .ck-row-label { font-size: 13px; line-height: 18.2px; font-weight: 600; }  /* 왼쪽 라벨 */
.ck-summary-card .ck-row-value { font-size: 14px; line-height: 19.6px; font-weight: 700; }  /* 오른쪽 값 */
.ck-dates-card .ck-row-label,
.ck-dates-card .ck-row-value  { font-size: 14px; line-height: 19.6px; font-weight: 500; }   /* 시작일/만료일 */
.ck-detail-card .ck-row-label { font-size: 13px; line-height: 18.2px; font-weight: 600; }    /* 소속 블럭 왼쪽 라벨 */
.ck-detail-card .ck-row-value { font-weight: 500; }                                          /* 소속 블럭 오른쪽 값 */

/* 선택한 플랜 뱃지 — ⚡ 아이콘(그라디언트) + 퍼플 텍스트 */
.ck-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ck-primary-strong);
  font-weight: 700;
}
.ck-plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--ck-gradient);
  color: #fff;              /* 번개 SVG(currentColor) = 흰색 */
  flex: 0 0 auto;
}
.ck-plan-icon svg { display: block; }

/* 요약 카드 총액 */
.ck-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--ck-border);
}
.ck-total-label { color: var(--ck-strong); font-size: 15px; font-weight: 700; }
.ck-total-value { color: var(--ck-strong); font-size: 20px; line-height: 28px; font-weight: 700; }  /* 금액 표기 */

/* 상세 카드 이용기간 범위 (소속 블럭 오른쪽과 함께 500) */
.ck-detail-range { color: var(--ck-strong); font-weight: 500; font-size: 14px; }

/* =====================================================================
 * 버튼 베이스 (그라데이션 primary / 보조 outline)
 * 화면별 미세조정은 screenN.css 에서.
 * ===================================================================== */
.ck-btn-primary {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--button-radius-lg, 8px);
  background: var(--ck-gradient);
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.ck-btn-primary:disabled,
.ck-btn-primary:not(.is-active) {
  background: var(--button-background-contained-gradient-disabled, #C8C3FF);
  cursor: default;
}
.ck-btn-outline {
  width: 100%;
  height: 48px;
  border: 1px solid var(--ck-primary);
  border-radius: var(--button-radius-lg, 8px);
  background: #FFF;
  color: var(--ck-primary-strong);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* =====================================================================
 * 행정실 전달용 링크 모달 (공용)
 * ===================================================================== */
.ck-modal[hidden] { display: none; }
.ck-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ck-modal-dim { position: absolute; inset: 0; background: rgba(28, 27, 31, 0.24); }
.ck-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #FFF;
  border-radius: 16px;
  box-shadow: 0px 4px 8px 3px rgba(42, 39, 65, 0.10);
  padding: 24px;
}
.ck-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ck-modal-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ck-strong); }
.ck-modal-x { border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ck-sub); }
.ck-modal-desc { margin: 12px 0 16px; font-size: 13px; line-height: 1.5; color: var(--ck-label); }
/* 링크칩 — 🔗 아이콘 + URL(클릭 시 새 탭). 옛 linkbox+인라인 복사버튼 대체 */
.ck-modal-linkchip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--ck-border);
  border-radius: 8px;
  background: var(--gray-50, #F8F9FC);
  text-decoration: none;
  color: var(--ck-primary-strong);
  font-size: 13px;
  font-weight: 500;
}
.ck-modal-linkchip:hover { border-color: var(--ck-primary); }
.ck-modal-linkchip-icon { flex: 0 0 auto; display: inline-flex; color: var(--ck-sub); }
.ck-modal-linkchip-icon svg { display: block; }
.ck-modal-linkchip-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ck-modal-toast {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ck-primary-strong);
}
.ck-modal-toast[hidden] { display: none; }

/* 진입 게이트(진행 중 결제) 버튼 행 */
.ck-resume-actions { display: flex; gap: 8px; margin-top: 8px; }
.ck-resume-actions--stack { flex-direction: column; }  /* 활성 플랜 게이트: 버튼 세로 스택 */
.ck-resume-actions .ck-btn-primary,
.ck-resume-actions .ck-btn-outline,
.ck-resume-actions .ck-btn-soft {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* 안내 모달 메인 버튼: 그라데이션 → 솔리드 #6758FF (본 플로우 버튼은 그라데이션 유지) */
.ck-resume-actions .ck-btn-primary { background: var(--ck-primary); }
/* 보조 버튼(회색 필) — 모달 하단 '문의하기 / 취소하고 새로 시작 / 닫기'. 완료화면 '홈으로 가기'와 색 통일 */
.ck-btn-soft {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--button-radius-lg, 8px);
  background: var(--button-background-contained-neutral-default, #F5F6F9);
  color: var(--text-neutral, #5D5E69);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.ck-btn-soft:hover { background: #EDEFF3; }

/* 소속 입력 에러 상태 (S2 가 재사용) */
.is-error { border-color: var(--red-default, #FF5353) !important; }
.js-school-error { color: var(--red-default, #FF5353); font-size: 13px; font-weight: 500; }

/* ---- 결제 준비 오버레이 (js-pay-now / js-copy-link 클릭 시) ---- */
.ck-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 27, 31, 0.45);
  backdrop-filter: blur(2px);
}
.ck-loading-overlay[hidden] { display: none; }
.ck-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  background: var(--ck-card, #fff);
  border-radius: var(--ck-radius, 16px);
  box-shadow: var(--ck-shadow, 0 4px 24px rgba(0,0,0,0.16));
}
.ck-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(124, 77, 255, 0.2);
  border-top-color: var(--brand, #7C4DFF);
  border-radius: 50%;
  animation: ck-spin 0.8s linear infinite;
}
.ck-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-default, #27262E);
}
@keyframes ck-spin { to { transform: rotate(360deg); } }