/* SCREEN-2 · 정보 입력 — S2 에이전트 전용 CSS (Figma 5546-12380)
 * 좌측 폼 + 우측 sticky 요약(2-column). 공용 카드는 checkout.css. 여기엔 .ck-s2* 만. */

/* ---- 2-column 레이아웃 (full-bleed) ----
 * .ck-flow(max-width:1000px) 안에 있지만, 우측 회색 패널을 뷰포트 오른쪽
 * 끝까지 흘려보내기 위해 .ck-s2 를 100vw 로 break-out 한다.
 * (school_layout body overflow-x:hidden 이라 가로 스크롤 안 생김)
 * .checkout-main 의 상하 padding(40px / 80px)을 음수 margin 으로 상쇄해
 * 회색 패널이 네비게이션 바로 아래(콘텐츠 영역 top)부터 시작하도록 한다. */
.ck-s2 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -40px;            /* checkout-main 상단 padding 상쇄 → 네비 바로 아래부터 회색 시작 */
  margin-bottom: -80px;         /* checkout-main 하단 padding 상쇄 → 회색 패널 맨 아래까지 */
  max-width: none;

  display: grid;
  /* 좌측 폼 컬럼을 최대 1000px 로 캡 + 중앙정렬 → 넓은 모니터에서 폼-패널 갭이
     무한정 벌어지지 않게 한다(1920px 에서 756px 공백 → 276px 로 고정).
     회색 패널은 아래 ::after 로 뷰포트 오른쪽 끝까지 연장해 full-bleed 를 유지. */
  grid-template-columns: minmax(0, 1000px) 440px;
  justify-content: center;
  align-items: stretch;
}

/* ===================================================================
 * 좌측 폼
 * =================================================================== */
.ck-s2-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 24px);
  /* 좌측 폼: 좌측 거터 64px, 콘텐츠 폭 ~620px, 상단 padding 으로 폼은 회색보다 약간 내려옴 */
  box-sizing: border-box;
  padding: 40px 40px 80px 64px;
  width: 100%;
  max-width: 724px;            /* 64(좌) + 620(콘텐츠) + 40(우) */
  justify-self: start;
}

.ck-s2-title {
  margin: 0;
  padding: 8px 0 4px;
  color: var(--text-default, #27262E);
  font-size: var(--text-heading-xl-font-size, 30px);
  line-height: var(--text-heading-xl-line-height, 39px);
  font-weight: 800;
}

.ck-s2-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 8px);
}

.ck-s2-section-title {
  margin: 0;
  color: var(--text-neutral, #5D5E69);
  font-size: var(--text-body-md-b-font-size, 14px);
  line-height: var(--text-body-md-b-line-height, 19.6px);
  font-weight: 700;
}

/* ---- 흰 패널 카드 ---- */
.ck-s2-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 16px);
  padding: var(--spacing-lg, 24px);
  background: var(--bg-default, #FFF);
  border: 1px solid var(--border-alternative, #E9EAF2);
  border-radius: var(--rounded-md, 16px);
  box-shadow: 0px 1px 2px 0px rgba(28, 27, 31, 0.12),
              0px 0px 3px 0px rgba(28, 27, 31, 0.04);
}

/* ===================================================================
 * 섹션 1 · 이용 시작일
 * =================================================================== */
.ck-s2-startrow {
  display: flex;
  gap: 6px;
  width: 100%;
}
.ck-s2-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--input-border-default, #E9EAF2);
  border-radius: var(--rounded-sm, 8px);
  background: var(--input-background-default, #FFF);
  padding: 0 12px;
  height: 48px;
}
.ck-s2-field--term { flex: 0 0 160px; max-width: 160px; }
.ck-s2-field--date { flex: 1 1 auto; }

.ck-s2-field select,
.ck-s2-field input[type="date"] {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--input-label-value, #27262E);
  font-family: inherit;
  font-size: var(--text-body-lg-m-font-size, 16px);
  line-height: var(--text-body-lg-m-line-height, 22.4px);
  font-weight: 500;
}

/* 기간 select — caret 아이콘 */
.ck-s2-field--term select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background: url("../quote-caret.png") no-repeat right center / 24px;
  padding-right: 28px;
}

/* 시작일 date — 달력 아이콘. 네이티브 날짜 텍스트는 투명 처리하고 .ck-s2-date-display 로
   "2026. 07. 06. (월)" 형태를 오버레이한다(요일을 날짜에 붙여 한 덩어리로 표시). */
.ck-s2-field--date input[type="date"] {
  position: relative;
  cursor: pointer;
  color: transparent;                         /* 네이티브 날짜 텍스트 숨김 → 오버레이로 대체 */
  background: url("../quote-calendar.png") no-repeat right 0 center / 24px;
  padding-right: 28px;
}
.ck-s2-field--date input[type="date"]::-webkit-datetime-edit { color: transparent; }
.ck-s2-field--date input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

/* 시작일 표시 오버레이 — "2026. 07. 06. (월)". 클릭은 아래 input(달력)으로 통과 */
.ck-s2-date-display {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--input-label-value, #27262E);
  font-size: var(--text-body-lg-m-font-size, 16px);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

/* 이용 기간 범위 줄 */
.ck-s2-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ck-s2-range-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-neutral, #5D5E69);
  font-size: var(--text-body-md-sb-font-size, 14px);
  line-height: var(--text-body-md-sb-line-height, 19.6px);
  font-weight: 600;
}
.ck-s2-range-icon { font-size: 14px; line-height: 1; }
.ck-s2-range-icon svg, .ck-s2-memberrow-icon svg { display: block; }
.ck-s2-range-value {
  color: var(--text-strong, #5748F2);
  font-size: var(--text-body-md-sb-font-size, 14px);
  line-height: var(--text-body-md-sb-line-height, 19.6px);
  font-weight: 600;
  text-align: right;
}

/* ===================================================================
 * 안내 박스 (light / green / note)
 * =================================================================== */
.ck-s2-info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px;
  border-radius: var(--rounded-sm, 8px);
}
.ck-s2-info--light { background: var(--bg-neutral, #F5F6F9); }
.ck-s2-info--green { background: var(--color-green-50, #E8FCEA); }
.ck-s2-info--note  { background: var(--bg-alternative, #F0F2F6); }

.ck-s2-info-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: var(--icon-fill-neutral, #7A7B89);
  margin-top: 1px;
}
.ck-s2-info-icon--green { color: var(--text-semi-strong, #10988D); }

.ck-s2-info-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-neutral, #5D5E69);
  font-size: var(--text-caption-lg-sb-font-size, 12px);
  line-height: var(--text-caption-lg-sb-line-height, 16.8px);
  font-weight: 500;
}
.ck-s2-info-text p { margin: 0; }
.ck-s2-info-text strong { font-weight: 600; }

.ck-s2-info-list {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-left: 0;      /* ⓘ 가 이미 마커라 disc+16px 들여쓰기는 중복 → 제거(아이콘-글씨 간격 tight) */
  list-style: none;
  color: var(--text-neutral, #5D5E69);
  font-size: var(--text-caption-lg-sb-font-size, 12px);
  line-height: var(--text-caption-lg-sb-line-height, 16.8px);
  font-weight: 500;
}
.ck-s2-info-list li { margin: 0; }
.ck-s2-info-list strong {
  color: var(--text-semi-strong, #10988D);
  font-weight: 600;
}

/* ===================================================================
 * 섹션 2 · 이용 인원
 * =================================================================== */
.ck-s2-memberrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ck-s2-memberrow-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-neutral, #5D5E69);
  font-size: var(--text-body-md-sb-font-size, 14px);
  line-height: var(--text-body-md-sb-line-height, 19.6px);
  font-weight: 600;
}
.ck-s2-memberrow-icon { font-size: 14px; line-height: 1; }
.ck-s2-memberrow-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--input-label-value, #27262E);
  font-size: var(--text-body-lg-m-font-size, 16px);
  line-height: var(--text-body-lg-m-line-height, 22.4px);
  font-weight: 500;
  text-align: right;
}
.ck-s2-self { color: var(--input-label-value, #27262E); }

/* 인원 스텝퍼 */
.ck-s2-stepper {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}
.ck-s2-step {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--button-border-contained, rgba(28, 27, 31, 0.04));
  background: var(--button-background-contained-neutral-default, #F5F6F9);
  color: var(--text-default, #27262E);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.ck-s2-step.js-members-minus {
  border-radius: var(--rounded-sm, 8px) 0 0 var(--rounded-sm, 8px);
  margin-right: -1px;
}
.ck-s2-step.js-members-plus {
  border-radius: 0 var(--rounded-sm, 8px) var(--rounded-sm, 8px) 0;
  margin-left: -1px;
}
.ck-s2-step:disabled,
.ck-s2-step[disabled] {
  opacity: 0.54;
  cursor: default;
}
.ck-s2-stepper input[type="number"] {
  width: 64px;
  height: 48px;
  border: 1px solid var(--input-border-default, #E9EAF2);
  background: var(--input-background-default, #FFF);
  text-align: center;
  color: var(--input-label-value, #27262E);
  font-family: inherit;
  font-size: var(--text-body-lg-m-font-size, 16px);
  font-weight: 500;
  outline: none;
  -moz-appearance: textfield;
  position: relative;
  z-index: 1;
}
.ck-s2-stepper input[type="number"]::-webkit-outer-spin-button,
.ck-s2-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===================================================================
 * 섹션 3 · 결제 정보 (소속)
 * =================================================================== */
.ck-s2-field-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ck-s2-field-label {
  color: var(--input-label-title, #27262E);
  font-size: var(--text-body-lg-b-font-size, 16px);
  line-height: var(--text-body-lg-b-line-height, 22.4px);
  font-weight: 700;
}
.ck-s2-field-desc {
  margin: -6px 0 0;
  color: var(--input-label-sub-description, #7A7B89);
  font-size: var(--text-body-sm-m-font-size, 13px);
  line-height: var(--text-body-sm-m-line-height, 18.2px);
  font-weight: 500;
}
.ck-s2-text-input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--input-border-default, #E9EAF2);
  border-radius: var(--rounded-sm, 8px);
  background: var(--input-background-default, #FFF);
  color: var(--input-label-value, #27262E);
  font-family: inherit;
  font-size: var(--text-body-lg-m-font-size, 16px);
  line-height: var(--text-body-lg-m-line-height, 22.4px);
  font-weight: 500;
  outline: none;
}
.ck-s2-text-input::placeholder {
  color: var(--input-label-placeholder, #CACBD8);
}
.ck-s2-text-input:disabled {
  background: var(--bg-neutral, #F5F6F9);
  color: var(--text-alternative, #7A7B89);
  cursor: default;
}
/* checkout.css 의 .js-school-error 는 빈 값일 때 공간을 안 차지하도록 */
.ck-s2 .js-school-error:empty { display: none; }

/* ===================================================================
 * 커스텀 체크박스 (소속없음 / 약관동의)
 * =================================================================== */
.ck-s2-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.ck-s2-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ck-s2-check-mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--rounded-2xs, 4px);
  background: url("../quote-checkbox.png") no-repeat center / 24px;
}
.ck-s2-check input[type="checkbox"]:checked + .ck-s2-check-mark {
  background-image: url("../quote-check-active.png");
}
.ck-s2-check-text {
  color: var(--text-default, #27262E);
  font-size: var(--text-body-md-sb-font-size, 14px);
  line-height: var(--text-body-md-sb-line-height, 19.6px);
  font-weight: 600;
}
.ck-s2-terms-link {
  color: var(--text-link, #0D94FF);
  text-decoration: none;
}
.ck-s2-terms-link:hover { text-decoration: underline; }

/* ===================================================================
 * 우측 sticky 요약
 * =================================================================== */
/* 우측 회색 패널 — 뷰포트 오른쪽 끝까지 bleed, 전체 높이 stretch.
 * 패널 배경(#ECEEF2)은 페이지 배경(#F4F5F8)보다 한 톤 어둡다.
 * 카드: 패널 왼쪽 edge 에서 40px, 뷰포트 오른쪽 끝에서 64px 안쪽. */
.ck-s2-summary {
  position: relative;
  align-self: stretch;
  background: #ECEEF2;
  box-sizing: border-box;
  padding: 40px 64px 80px 40px;
}

/* 회색 패널을 뷰포트 오른쪽 끝까지 연장 — 중앙정렬로 패널이 우측 끝에서 떨어질 때도
   full-bleed 유지. body overflow-x:hidden 이라 100vw 넘침은 가로 스크롤 없이 클립된다. */
.ck-s2-summary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100vw;
  background: #ECEEF2;
}
.ck-s2-summary-inner {
  position: sticky;
  top: 88px;                   /* 고정 네비(≈65px) 아래로 살짝 띄움 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
}

/* 우측 요약 카드들은 옅은 그림자(Figma shadow/xs) */
.ck-s2-summary .ck-summary-card,
.ck-s2-summary .ck-dates-card {
  box-shadow: 0px 1px 1px 0px rgba(28, 27, 31, 0.12),
              0px 0px 3px 0px rgba(28, 27, 31, 0.04);
}

.ck-s2-agree { padding: 4px 0; align-items: flex-start; }
.ck-s2-agree .ck-s2-check-text { line-height: var(--text-body-md-sb-line-height, 19.6px); }

/* 제출 버튼 — .ck-btn-primary 룩 기반 */
.ck-s2-submit {
  width: 100%;
  height: 48px;
  border: 1px solid var(--button-border-contained, rgba(28, 27, 31, 0.04));
  border-radius: var(--button-radius-lg, 8px);
  color: #FFF;
  font-family: inherit;
  font-size: var(--text-body-lg-sb-font-size, 16px);
  line-height: var(--text-body-lg-sb-line-height, 22.4px);
  font-weight: 600;
  cursor: pointer;
}
/* 활성: 보라→블루 그라데이션 */
.ck-s2-submit.is-active {
  background: linear-gradient(90deg,
    var(--color-violet-400, #8478FF) 0%,
    var(--color-blue-400, #3DA9FF) 100%);
}
/* 비활성: 옅게 / disabled */
.ck-s2-submit:not(.is-active) {
  background: var(--button-background-contained-gradient-disabled, #C8C3FF);
  cursor: default;
}

/* ===================================================================
 * 반응형 — ~900px 이하 한 컬럼으로 스택
 * =================================================================== */
@media (max-width: 900px) {
  /* full-bleep breakout 유지하되 한 컬럼 스택. 회색 패널은 폼 아래 full-width 로. */
  .ck-s2 {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ck-s2-form {
    max-width: none;
    padding: 24px 24px 16px;
  }
  .ck-s2-summary {
    padding: 16px 24px 40px;
  }
  .ck-s2-summary::after { display: none; }   /* 스택 레이아웃에선 회색 연장 불필요 */
  .ck-s2-summary-inner {
    position: static;
    top: auto;
  }
}