/* ==========================================================
   와우오더 — 마지막 섹션: 무료 상담 신청 (#end, 푸터 바로 위)
   가운데 두 줄 제목 + 한 줄, 옅은 파랑 판 위에 이번 달 혜택 세 가지 → 간단한 신청서 → 개인정보 동의 → 버튼 → 누적 신청 수.
   바탕은 도입 혜택 섹션과 같은 커튼(.3). 판은 도입 혜택 파랑 카드 계열(테두리·그림자 없음) — 흰 입력칸이 바탕에 묻히지 않게.
   ========================================================== */

/* main.css 의 .page-table section(여백)·.page-table h2(Paperlogy 글꼴)보다 이기도록 section.ct / .ct .ct-title 로 쓴다 */
section.ct { position: relative; overflow: hidden; padding: 132px 0 140px; background: #fff; }
.ct::before {                                   /* 도입 혜택 섹션과 같은 토스 커튼 느낌 파스텔 — 은은하게(처음과 끝이 맞물림) */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/event/event-bg.webp") center / cover no-repeat; opacity: .3;
}
.ct__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 80px; text-align: center; }

/* 머리 — 두 줄 제목("1시간 내로"만 파랑) + 한 줄 */
.ct .ct-title { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #171717; }
.ct .ct-title em { font-style: normal; color: #1d63e6; }
.ct-sub { margin-top: 20px; font-size: 19px; font-weight: 500; line-height: 1.6; color: #555b66; }
.ct-sub b { font-weight: 700; color: #171717; }
.ct-sub__br { display: none; }                  /* 아주 좁은 화면(≤374)에서만 문장 사이에서 줄을 바꾼다 — "그대로예요."만 떨어지지 않게 */

/* 판 — 혜택 + 신청서를 한 덩어리로. 도입 혜택 파랑 카드(#f1f6fd → #d7e4f7)보다 한 단계 옅게, 아래가 살짝 진하다.
   판 안쪽 폭(container)을 기준으로 혜택 그림 크기를 정해서, 화면 폭이 바뀌어도 구도가 그대로 줄어든다 */
.ct-stage {
  position: relative; max-width: 720px; margin: 52px auto 0; padding: 56px 60px 44px; border-radius: 24px;
  background: linear-gradient(180deg, #f3f7fe 0%, #e2ebf9 100%); container-type: inline-size;
}
.ct-form { position: relative; }

/* 혜택 세 가지 — 가운데 토스 세트가 가장 크고 앞, 양옆은 살짝 뒤로 조금 겹쳐 한 무리로.
   600 폭 기준(스테이션 left 21 · 폭 178 / 토스 폭 244 / 봉투 right 21 · 폭 174, 높이 201)을 % · cqw 로. 앞 값은 container 단위를 모르는 옛 브라우저용 */
.ct-gifts { position: relative; height: 201px; height: 33.5cqw; pointer-events: none; }
.ct-gift { position: absolute; bottom: 0; margin: 0; }
.ct-gift img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(23, 31, 48, .14)); }
.ct-gift--station { left: 3.5%;  width: 29.7%; z-index: 1; }
.ct-gift--toss    { left: 50%;   width: 40.6%; z-index: 2; transform: translateX(-50%); }
.ct-gift--cash    { right: 3.5%; width: 29%;   z-index: 1; }
.ct-gift figcaption {                                   /* 흰 알약 이름표(도입 혜택 섹션과 같은 모양) */
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 12px; border-radius: 100px; background: #fff; box-shadow: 0 4px 12px rgba(23, 23, 23, .14);
  font-size: 13px; font-weight: 700; line-height: 1.2; color: #171717;
}
.ct-gift--toss figcaption { top: -14px; }

/* 신청서 — 매장 상태 두 칸 · 성함 · 전화번호 · 테이블 대수. 흰 칸 + 옅은 테두리, 포커스 파랑 · 오류 #d71900 */
.ct-fields { display: grid; gap: 10px; max-width: 480px; margin: 32px auto 0; text-align: left; }
.ct-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 56px; padding: 5px; border-radius: 14px; background: #dfe6f1; }   /* 매장 상태 두 칸 */
.ct-seg__opt { position: relative; cursor: pointer; }
.ct-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ct-seg__opt span {
  display: grid; place-items: center; height: 100%; border-radius: 10px;
  font-size: 16px; font-weight: 700; color: #8a93a0; transition: background-color .2s, color .2s, box-shadow .2s;
}
.ct-seg__opt input:checked + span { background: #fff; color: #171717; box-shadow: 0 2px 8px rgba(23, 31, 48, .10); }
.ct-seg__opt input:focus-visible + span { outline: 2px solid #1d63e6; outline-offset: 2px; }
.ct-field { position: relative; }
.ct-input {
  display: block; width: 100%; height: 56px; padding: 0 18px; border: 1px solid #d3dbe7; border-radius: 12px; background-color: #fff;
  font: inherit; font-size: 17px; font-weight: 500; color: #171717; outline: none; transition: border-color .2s, box-shadow .2s;
}
.ct-input::placeholder { color: #9aa3b0; }
.ct-input:focus { border-color: #1d63e6; box-shadow: 0 0 0 1px #1d63e6; }
.ct-field.is-error .ct-input { border-color: #d71900; box-shadow: 0 0 0 1px #d71900; }
.ct-select {                                            /* 테이블 대수 — 고르는 칸, 오른쪽 작은 회색 삼각형. 고르기 전엔 자리표시처럼 회색 */
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238b929c'/%3E%3C/svg%3E") right 20px center / 10px 6px no-repeat;
}
.ct-select:invalid { color: #9aa3b0; }
.ct-select option { color: #171717; }
.ct-err { margin-top: 6px; padding-left: 4px; font-size: 13px; font-weight: 600; color: #d71900; }
.ct-err[hidden] { display: none; }

/* 개인정보 동의(처음부터 체크) — 신청서와 버튼 사이 가운데 */
.ct-under { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; font-size: 14px; color: #5b6472; }
.ct-agree { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ct-agree input { position: absolute; opacity: 0; pointer-events: none; }
.ct-agree__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #b9c2cf; transition: background-color .15s; }
.ct-agree__box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ct-agree input:checked + .ct-agree__box { background: #1d63e6; box-shadow: none; }
.ct-agree input:checked + .ct-agree__box svg { opacity: 1; }
.ct-agree input:focus-visible + .ct-agree__box { outline: 2px solid #1d63e6; outline-offset: 2px; }
.ct-agree.is-error { color: #d71900; }
.ct-agree__more { color: #7b8392; text-decoration: underline; text-underline-offset: 2px; }

/* 버튼 — 세 칸이 다 채워지기(골라지기) 전엔 회색, 채워지면 먹색(.is-ready). 회색일 때 눌러도 어디가 비었는지 알려 준다 */
.ct-btn {
  display: block; width: 100%; max-width: 480px; height: 58px; margin: 16px auto 0; border: 0; border-radius: 12px;
  background: #c4cad3; font: inherit; font-size: 18px; font-weight: 800; color: #fff; cursor: pointer; transition: background-color .2s;
}
.ct-form.is-ready .ct-btn { background: #171717; }
.ct-form.is-ready .ct-btn:hover { background: #2a2b30; }
.ct-btn:disabled, .ct-form.is-ready .ct-btn:disabled { background: #8b929c; cursor: default; }
.ct-btn:focus-visible { outline: 3px solid #1d63e6; outline-offset: 3px; }

/* 누적 신청 수 — "233명"은 크기 그대로, 색으로만 강조 */
.ct-count { margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.4; color: #171717; }
.ct-count b { font-weight: 800; color: #1d63e6; }

/* 접수 완료 — 신청서 · 동의 · 버튼 자리에 체크가 그려지고 한 줄 */
.ct-done { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 480px; margin: 32px auto 0; padding: 22px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px #1d63e6, 0 14px 28px rgba(23, 31, 48, .08); }
.ct-done:focus { outline: none; }                /* 접수 뒤 포커스를 받지만 파란 테두리가 이미 있다 */
.ct-done svg { flex: none; width: 36px; height: 36px; }
.ct-done circle { fill: none; stroke: #1d63e6; stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: ct-draw .6s ease-out forwards; }
.ct-done path { fill: none; stroke: #1d63e6; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ct-draw .4s .45s ease-out forwards; }
.ct-done p { font-size: 17px; font-weight: 700; color: #171717; text-align: left; }
.ct-done small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: #5b6472; }
@keyframes ct-draw { to { stroke-dashoffset: 0; } }

/* ---------- 반응형 ---------- */
@media (max-width: 1199px) {
  .ct__inner { padding: 0 40px; }
  .ct-stage { padding: 52px 40px 40px; }
}
@media (max-width: 899px) {
  section.ct { padding: 96px 0 104px; }
  .ct .ct-title { font-size: 32px; }
  .ct-sub { margin-top: 14px; font-size: 16px; }
  .ct-stage { margin-top: 40px; padding: 48px 28px 32px; }
  .ct-count { font-size: 18px; }
}
@media (max-width: 699px) {
  /* 좁은 화면 — 혜택을 판 폭에 맞게 크게(이름표 없이 그림만) */
  .ct-gifts { height: 140px; height: 35cqw; }
  .ct-gift--station { left: 2%; width: 31%; }
  .ct-gift--toss { width: 41%; }
  .ct-gift--cash { right: 2%; width: 30%; }
  .ct-gift figcaption { display: none; }
  .ct-fields { margin-top: 26px; }
  .ct-under { flex-wrap: wrap; row-gap: 8px; }
  .ct-done { margin-top: 26px; }
}
@media (max-width: 599px) {
  section.ct { padding: 80px 0 88px; }
  .ct__inner { padding: 0 20px; }
  .ct .ct-title { font-size: 26px; }
  .ct-sub { font-size: 15px; }
  .ct-stage { margin: 32px -4px 0; padding: 28px 16px 22px; border-radius: 22px; }
  .ct-fields { gap: 8px; }
  .ct-seg { height: 52px; }
  .ct-seg__opt span { font-size: 15px; }
  .ct-input { height: 52px; padding: 0 16px; font-size: 16px; }
  .ct-select { background-position: right 18px center; }
  .ct-under { margin-top: 18px; font-size: 13px; }
  .ct-btn { height: 54px; margin-top: 14px; font-size: 17px; }
  .ct-count { margin-top: 14px; font-size: 16px; }
}
@media (max-width: 374px) {
  .ct-sub__br { display: inline; }
}