@charset "utf-8";

/* ============================================================
   예약 폼 페이지 전용 (reservation.html)
   Figma node 1745:11901 "bespoke_reservation" (1920 × 7773)

   공통 부분은 css/bespoke_base.css에 있습니다.
   여기에는 이 페이지에만 있는 것만 둡니다.
   ============================================================ */

/* fieldset은 브라우저 기본 테두리와 여백이 있어 지웁니다.
   min-width: 0이 없으면 fieldset 안의 grid가 줄어들지 않습니다. */
.reservation_fieldset {
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   원단 카드 사진 — 상자 비율을 4:3으로 못 박습니다 (2026-08-10)

   원단 사진 6장을 `assets/reservation/`의 400×300 크롭에서
   `assets/main/`의 원본 JPG로 바꿨습니다(bespoke 메인 Materials 섹션과
   같은 파일을 함께 씁니다 — 13MB를 한 벌만 두려는 것입니다).

   ★ **이 규칙이 없으면 카드가 세로로 늘어납니다.** `bespoke_base.css`의
   `.bespoke_choice_media img`가 `height: auto`라 그려지는 높이를 사진의
   원본 비율이 정합니다. 이전 크롭은 4:3(가로)이었는데 새 원본은 3:4(세로)라,
   그대로 두면 사진이 350×263 → 350×467이 되고 **카드가 378 → 582px로
   늘어납니다**(1280 실측). 그래서 상자에 비율을 주고 사진은 그 안을
   `object-fit: cover`로 채우게 했습니다 — 카드 크기·간격·격자는 그대로입니다.

   ★ **실루엣 카드(1:1, 400×400)에는 걸면 안 됩니다.** 그쪽 사진 3장은
   대응하는 새 JPG가 없어 예전 그대로입니다. `[name="fabric"]`으로
   원단 카드만 고릅니다. `bespoke_base.css`는 예약·완료 페이지가 함께
   쓰는 공용 파일이라 건드리지 않았습니다.
   ------------------------------------------------------------ */
.bespoke_choice:has(.bespoke_choice_input[name="fabric"]) .bespoke_choice_media {
  aspect-ratio: 400 / 300;
}

.bespoke_choice:has(.bespoke_choice_input[name="fabric"]) .bespoke_choice_media img {
  height: 100%;
}

/* ------------------------------------------------------------
   히어로와 진행 단계 띠

   Figma 주석: "이 섹션 스티키 해놓고 하단에 1단계부터 4단계 구간
   스크롤할 때 해당 섹션에 머무르면 그 구간 텍스트 컬러 변환됨"
   → 띠만 화면 위에 붙이고, 현재 구간 칸을 진하게 바꿉니다.
   ------------------------------------------------------------ */
.reservation_hero {
  padding-top: 64px;
}

@media (min-width: 1280px) {
  .reservation_hero {
    padding-top: 130px;
  }
}

/* ------------------------------------------------------------
   진행 단계 띠 — 폼을 보는 내내 화면에 붙어 있습니다.

   ★ 이 페이지의 고정 UI는 둘이고 **성격이 반대**입니다.
   · 헤더 — 스크롤 방향에 따라 나타났다 사라집니다(common.js). 유지해야 합니다.
   · 이 띠 — 언제나 보여야 합니다. 잘못 고른 단계로 되돌아가는 길입니다.

   그래서 띠가 붙는 자리는 **헤더의 상태에 따라 달라집니다.**

     헤더 표시 → top = 헤더 높이   [헤더][띠][내용]
     헤더 숨김 → top = 0           [띠][내용]

   ★ **헤더는 `transform: translateY(-100%)`로 사라집니다 — 자리를 비우지
   않고 그림만 치웁니다.** 그래서 띠의 `top`을 헤더 높이로 고정해 두면,
   헤더가 사라진 뒤에도 그 높이만큼 **빈 띠가 남고 그 사이로 내용이
   지나갑니다.** 아래 `--steps_top`을 JS가 헤더의 `is_hidden`에 맞춰
   0과 헤더 높이 사이에서 바꿔 줍니다.

   기준값은 `.reservation_form`의 변수 **두 개뿐**이고, 붙는 자리도
   앵커 여백도 전부 거기서 계산합니다. 폭마다 px를 적어 두지 않습니다.
   ------------------------------------------------------------ */
.reservation_form {
  /* JS가 실제 크기로 덮어씁니다. 아래 값은 JS가 없을 때의 대비책입니다.
     헤더는 `min-height`라 내용에 따라 토큰보다 커질 수 있어(1280에서
     토큰 64 / 실제 66) 실측이 필요합니다. */
  --steps_header_h: var(--header_height);
  --steps_bar_h: 72px;
  --steps_top: var(--steps_header_h);
}

.reservation_steps {
  position: sticky;
  top: var(--steps_top);
  z-index: 30;
  margin-top: 56px;
  background-color: var(--color_bg);
  /* 헤더가 미끄러지는 것과 같은 길이·곡선으로 따라 올라갑니다.
     붙어 있지 않은 동안에는 `top`이 아무 일도 하지 않으므로
     페이지 위쪽 레이아웃에는 영향이 없습니다. */
  transition: top var(--duration_base) var(--easing_base);
}

@media (min-width: 1280px) {
  .reservation_steps {
    margin-top: 120px;
  }
}

.reservation_steps_link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* 띠가 화면 위에 붙어 있어 링크로 뛰면 제목을 가립니다.
   위의 기준값 **두 개로 계산합니다** — 폭마다 px를 적어 두지 않습니다.
   (예전에는 130 / 80을 폭마다 박아 두었는데, 띠 높이가 바뀔 때마다
   따로 고쳐야 했고 실제로 모자랐습니다.)

   `--steps_top`이 아니라 `--steps_header_h`를 씁니다 — 뛰는 도중에 헤더가
   나타날 수 있으므로 **헤더가 보이는 경우를 기준으로** 잡아야 제목이
   가려지지 않습니다. 헤더가 숨은 채로 뛰면 그만큼 여유 있게 멈춥니다. */
#step_design,
#step_schedule,
#step_details,
#step_confirm {
  scroll-margin-top: calc(var(--steps_header_h) + var(--steps_bar_h) + 12px);
}

/* ------------------------------------------------------------
   회의 방식 선택 (아틀리에 방문 / 전화)

   두 칸 모두 markup에서는 is_secondary이고,
   라디오가 켜진 쪽만 CSS가 딥그린으로 바꿉니다.
   상태를 HTML class로 박아두면 JS 없이는 안 바뀝니다.
   ------------------------------------------------------------ */
.reservation_mode {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 56px;
}

@media (min-width: 768px) {
  .reservation_mode {
    gap: 30px;
    margin-bottom: 80px;
  }
}

.reservation_mode_option {
  cursor: pointer;
}

.reservation_mode_option .bespoke_button {
  width: 100%;
}

.reservation_mode_option:has(input:checked) .bespoke_button {
  border-color: var(--color_point);
  background-color: var(--color_point);
  color: var(--color_text_inverse);
}

.reservation_mode_option:has(input:focus-visible) .bespoke_button {
  outline: 2px solid var(--color_point);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   달력 + 시간표

   Figma 데스크톱: 달력 540px, 시간표 660px, 사이 228px.
   좁은 화면에서는 세로로 쌓습니다.
   ------------------------------------------------------------ */
.reservation_schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 1280px) {
  .reservation_schedule {
    grid-template-columns: minmax(0, 540px) minmax(0, 660px);
    justify-content: start;
    column-gap: clamp(40px, 8vw, 228px);
  }
}

.reservation_calendar,
.reservation_timetable {
  padding-top: 40px;
  border-top: 1px solid var(--color_border);
}

.reservation_calendar_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.reservation_calendar_month {
  font-family: var(--font_body);
  font-size: var(--fs_ui_16);
  font-weight: 500;
  line-height: 1.5;
}

.reservation_calendar_nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.reservation_calendar_nav img {
  display: block;
  width: 24px;
  height: 24px;
}

/* 다음 달 화살표는 같은 아이콘을 좌우로 뒤집어 씁니다. */
.reservation_calendar_nav.is_next img {
  transform: scaleX(-1);
}

.reservation_calendar_nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.reservation_calendar_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.reservation_calendar_table th {
  padding-bottom: 20px;
  color: var(--color_text_muted);
  font-size: var(--fs_ui_14);
  font-weight: 400;
  text-align: center;
}

.reservation_calendar_table th abbr {
  text-decoration: none;
}

.reservation_calendar_table td {
  padding: 6px 0;
  text-align: center;
}

@media (min-width: 768px) {
  .reservation_calendar_table td {
    padding: 11px 0;
  }
}

.reservation_day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color_text);
  font-family: var(--font_body);
  font-size: var(--fs_ui_16);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration_fast) var(--easing_base),
              color var(--duration_fast) var(--easing_base);
}

.reservation_day:hover {
  background-color: var(--color_surface_subtle);
}

.reservation_day.is_selected {
  background-color: var(--color_point);
  color: var(--color_text_inverse);
}

.reservation_day:disabled {
  color: var(--color_text_subtle);
  cursor: not-allowed;
}

.reservation_day:disabled:hover {
  background-color: transparent;
}

/* 시간표 — Figma 3열 × 2행, 칸 200 × 70 */
.reservation_time_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .reservation_time_list {
    grid-template-columns: repeat(3, minmax(0, 200px));
    gap: 30px;
  }
}

.reservation_time {
  display: block;
  cursor: pointer;
}

.reservation_time_face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px;
  border: 1px solid var(--color_border);
  background-color: var(--color_surface);
  color: var(--color_text);
  font-family: var(--font_body);
  font-size: var(--fs_ui_16);
  line-height: 1.5;
  text-align: center;
  transition: background-color var(--duration_base) var(--easing_base),
              border-color var(--duration_base) var(--easing_base),
              color var(--duration_base) var(--easing_base);
}

@media (min-width: 768px) {
  .reservation_time_face {
    min-height: 70px;
  }
}

/* 마우스를 올리면 선택했을 때와 같은 색을 미리 보여줍니다.
   (hover: hover)로 감싼 이유 — 손가락으로 만지는 화면에서는 한 번 누른 칸에
   :hover가 그대로 남아 선택된 것처럼 보입니다. 마우스가 있는 환경에만 적용합니다. */
@media (hover: hover) {
  .reservation_time:hover .reservation_time_face {
    border-color: var(--color_point);
    background-color: var(--color_point);
    color: var(--color_text_inverse);
  }
}

/* 실제로 고른 칸. hover보다 특정도가 높아 마우스를 떼도 색이 유지됩니다. */
.reservation_time:has(input:checked) .reservation_time_face {
  border-color: var(--color_point);
  background-color: var(--color_point);
  color: var(--color_text_inverse);
}

.reservation_time:has(input:focus-visible) .reservation_time_face {
  outline: 2px solid var(--color_point);
  outline-offset: 3px;
}

/* 모두 동의하기 — 개별 항목의 부모라는 것이 보이게 한 줄 띄우고
   글자만 조금 진하게 둡니다. 체크박스 모양은 `.bespoke_check_input`
   그대로라 아래 개별 항목과 크기·색이 같습니다. */
.reservation_check_all {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color_border);
}

.reservation_check_all .bespoke_check_label {
  color: var(--color_text);
  font-weight: 500;
}

/* 시간을 안 골랐을 때 시간표 바로 아래에 뜹니다.
   비어 있으면 base의 .bespoke_status:empty가 숨깁니다. */
#schedule_status {
  margin-top: 20px;
}

/* ------------------------------------------------------------
   개인 정보
   ------------------------------------------------------------ */
.reservation_notes {
  margin-top: 56px;
}

@media (min-width: 768px) {
  .reservation_notes {
    margin-top: 70px;
  }
}

/* ------------------------------------------------------------
   약관과 전송
   ------------------------------------------------------------ */
.reservation_confirm_rule {
  margin-block: 40px;
}

@media (min-width: 768px) {
  .reservation_confirm_rule {
    margin-block: 56px;
  }
}

.reservation_submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {
  .reservation_submit {
    flex-direction: row;
    align-items: center;
    gap: 30px;
  }
}

/* 전송이 막혀 있을 때만 안내 문구가 보입니다.
   base의 .bespoke_status가 :empty일 때 숨깁니다. */
.reservation_submit .bespoke_status {
  max-width: 405px;
}