/* ============================================================
   촬영문의 페이지 — 피그마 sub_촬영문의_1920 (55:6447) 1920x3384
   ============================================================ */

:root {
  --sans: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --serif: "Nanum Myeongjo", serif;
  --en: "Cormorant Infant", serif;
  --c-green: #4a4c25;
  --c-bg-form: #fbf9f6;
  --c-required: #e94444;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: #111; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* clip — hidden과 달리 body를 스크롤 컨테이너로 만들지 않아 세로 이중 스크롤바 원천 차단 */ }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: 0; cursor: pointer; }

#page { position: relative; width: 1920px; height: 3364px; transform-origin: 0 0; background: #fff; }

/* ---------- 상품 전시 캐러셀 (720~1180) — 피그마 55:6519~6537 ----------
   트랙: 9개 슬라이드(클론 앞뒤 2개씩)가 992px 간격, translateX로 슬라이드
   클론이 2개씩 필요한 이유: 경계 이동 중에도 뷰포트(1920)가 트랙 안에 있어야 함
   중앙 슬롯 left 480 / 활성 dim 0.1, 측면 dim 0.2 */
.iq-showcase {
  position: absolute; left: 0; top: 720px; width: 1920px; height: 460px;
  overflow: hidden;
}
.iq-showcase__track {
  position: absolute; top: 0; left: 0; width: 8896px; height: 460px;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.iq-showcase__track.is-jump { transition: none; }
.iq-showcase__item {
  position: absolute; top: 0; width: 960px; height: 460px;
  left: calc(var(--i) * 992px);
}
.iq-showcase__item img { width: 100%; height: 100%; object-fit: cover; }
/* 데스크톱=와이드 크롭(img-d) / 모바일=세로 크롭(img-m) — html.is-m 토글로 스위치(360 이하) */
.iq-showcase__img-m { display: none; }
.iq-showcase__dim {
  position: absolute; inset: 0; background: #000; opacity: 0.2;
  transition: opacity 0.5s;
}
.iq-showcase__item.is-active .iq-showcase__dim { opacity: 0.1; }

/* 고정 UI 레이어 — 중앙 960px 슬롯 위. 이미지가 넘겨도 자리 고정 */
.iq-showcase__ui { position: absolute; left: 480px; top: 0; width: 960px; height: 460px; z-index: 2; }

/* 활성 상품 정보 — 피그마 55:6523~6530: 중앙 이미지 기준 (40,310) */
.iq-showcase__info {
  position: absolute; left: 40px; top: 310px; width: 880px;
  transition: opacity 0.15s;
}
.iq-showcase__info.is-fading { opacity: 0; }
.iq-showcase__row { display: flex; align-items: baseline; gap: 12px; }
.iq-showcase__row strong { font-weight: 600; font-size: 26px; line-height: 31px; letter-spacing: -0.01em; color: #fff; }
.iq-showcase__row span { font-weight: 400; font-size: 14px; line-height: 16.7px; letter-spacing: -0.02em; color: #fff; }
.iq-showcase__price { margin-top: 8px; font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 27.6px; letter-spacing: 0.01em; color: #fff; }
.iq-showcase__price em { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 15px; margin-left: 4px; }

/* 진행바 — 피그마 55:6535/6537: 전체 824px #D9D9D9, 활성 274px #FFF */
.iq-showcase__line { position: absolute; left: 40px; top: 399px; width: 824px; height: 1px; background: #d9d9d9; }
.iq-showcase__line-active {
  position: absolute; left: 315px; top: 399px; width: 274px; height: 1px; background: #fff;
  transition: left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 화살표 — 피그마 55:6533/6534: 6x12 흰색 셰브론, (888,393)/(914,393).
   클릭 영역은 24x24로 넓히고 셰브론은 디자인 위치 유지 */
.iq-showcase__arrow {
  position: absolute; top: 387px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: opacity 0.2s;
}
.iq-showcase__arrow:hover { opacity: 1; }
.iq-showcase__arrow svg { display: block; }
.iq-showcase__arrow--prev { left: 876px; }
.iq-showcase__arrow--next { left: 902px; }

/* ---------- 폼 섹션 (1320~2603, 배경 #FBF9F6) — 피그마 4040:5450 ---------- */
.iq-form-section {
  position: absolute; left: 0; top: 1320px; width: 1920px; height: 1283px;
  background: var(--c-bg-form);
}

.iq-form__label {
  position: absolute; left: 853px; top: 140px;
  font-family: var(--en); font-weight: 700; font-size: 22px; line-height: 26.6px;
  letter-spacing: -0.05em; text-transform: uppercase; color: var(--c-green);
}
.iq-form__title {
  position: absolute; left: 444px; top: 187px; width: 1024px; text-align: center;
  font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 43.7px;
  letter-spacing: -0.025em; color: #222;
}

/* ---------- 폼 ---------- */
.iq-form {
  position: absolute; left: 444px; top: 311px; width: 1024px;
}

.iq-row { display: flex; gap: 24px; margin-bottom: 30px; }
.iq-row .iq-field { flex: 1; margin-bottom: 0; } /* row 내부 필드는 margin 없음 (row가 담당) */

.iq-field { margin-bottom: 30px; }
.iq-field--full { width: 100%; }
/* textarea 필드는 다음 요소(개인정보)와 간격이 24px (피그마 4040:5460 기준) —
   :last-of-type는 뒤에 .iq-privacy div가 있어 발동하지 않았으므로 :has로 지정 */
.iq-field:has(textarea) { margin-bottom: 24px; }

/* 직계 자식만 — 후손 셀렉터면 .iq-check(체크박스 라벨)까지 덮어써
   margin-bottom/line-height가 침투해 셀 안 수직 중앙이 깨짐 */
.iq-field > label {
  display: block; font-weight: 500; font-size: 18px; line-height: 22px;
  letter-spacing: -0.03em; color: #000; margin-bottom: 14px;
}
.iq-field > label em { font-style: normal; font-weight: 600; color: var(--c-required); }

.iq-field input[type="text"],
.iq-field input[type="tel"],
.iq-field textarea {
  width: 100%; height: 56px; padding: 0 16px;
  background: #fff; border: 1px solid #f1ece5; outline: none;
  font-family: var(--sans); font-size: 16px; line-height: 22px;
  letter-spacing: -0.02em; color: #111;
}
.iq-field input:focus,
.iq-field textarea:focus { border-color: var(--c-green); }
.iq-field input::placeholder,
.iq-field textarea::placeholder { color: #a0a0a0; }
.iq-field textarea { display: block; height: 180px; padding: 16px; resize: vertical; }

.iq-error { display: block; margin-top: 8px; font-size: 14px; color: var(--c-required); }

/* ---------- 체크박스 — 네이티브 input 스타일링 ----------
   컨테이너: 1024x120, padding 32px 40px, border #F1ECE5
   체크박스: appearance:none + 커스텀 스타일 (접근성 유지) */
.iq-checks {
  background: #fff; padding: 32px 40px; /* 높이는 콘텐츠에 맞춤: 1줄 84px, 2줄 122px */
  border: 1px solid #f1ece5;
  display: flex; flex-direction: column; justify-content: center;
}
/* 한 줄에 다 들어가면 한 줄, 부족하면 자동으로 줄바꿈 (세로 간격 18px / 가로 간격 30px) */
.iq-checks__row { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }

.iq-check {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  height: 20px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: #222;
}

.iq-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0;
  border: 2px solid #bdbdbd; border-radius: 3px;
  background: #fff; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.iq-check input[type="checkbox"]::before {
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
  /* SVG 체크마크 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5L4 8L8.5 2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.iq-check input[type="checkbox"]:checked {
  background: var(--c-green);
  border-color: #d7d7d7;
}
.iq-check input[type="checkbox"]:checked::before {
  transform: scale(1);
}
.iq-check input[type="checkbox"]:hover {
  border-color: var(--c-green);
}
.iq-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* ---------- 개인정보 동의 (피그마 4040:5451: 22px 높이) ---------- */
.iq-privacy {
  display: flex; align-items: center; gap: 12px; margin-top: 0;
}
.iq-privacy .iq-check { height: 22px; line-height: 22px; }
.iq-privacy__detail {
  margin-left: auto; font-size: 17px; color: #111;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- 제출 버튼 — 피그마 4040:5540: (792,2403) 336x60 #4A4C25 ---------- */
.iq-submit {
  display: flex; align-items: center; justify-content: center;
  width: 336px; height: 60px; margin: 80px auto 0;
  background: var(--c-green); color: #fff;
  font-weight: 500; font-size: 18px; line-height: 30px;
  letter-spacing: -0.02em; border-radius: 4px;
  transition: filter 0.2s;
}
.iq-submit:hover { filter: brightness(1.15); }

/* ---------- 완료 화면 — 서브 히어로 바로 아래, 불필요한 여백 없음 ---------- */
.iq-done {
  position: absolute; left: 0; top: 560px; width: 1920px; height: 600px;
  background: var(--c-bg-form);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px;
}
.iq-done h2 { font-family: var(--serif); font-size: 38px; color: #222; }
.iq-done p { font-size: 18px; color: #666; }
.iq-done__btn {
  margin-top: 30px; padding: 18px 48px;
  background: var(--c-green); color: #fff; border-radius: 4px;
  font-size: 17px; transition: filter 0.2s;
}
.iq-done__btn:hover { filter: brightness(1.15); }

/* ============================================================
   모바일 (html.is-m — 360 캔버스) — 피그마 촬영문의_360 4110:8627
   360x2499(일반)/1422(완료): GNB 60 / 히어로 60~260 / 캐러셀 320~640 /
   폼 밴드 700~1797 / 푸터. 캐러셀 치수 분기는 js/inquiry.js 참조
   ============================================================ */
html.is-m #page { width: 360px; }

/* ---------- 히어로 (60~260) — 모바일 전용 크롭(iq-hero-m.jpg, 딤 포함) ---------- */
html.is-m .sub-hero { top: 60px; height: 200px; }
html.is-m .sub-hero__img:not(.sub-hero__img--m) { display: none; }
html.is-m .sub-hero__tit { left: 0; top: 82px; width: 100%; text-align: center; }

/* 데스크톱 히어로 타이틀 위치 (inline style → CSS 이동, 모바일 오버라이드용) */
.sub-hero__tit { left: 843px; top: 302px; }

/* ---------- 상품 캐러셀 (320~640) — 카드 280x320 피치 292(중앙 x40) ----------
   활성 카드만 그라디언트 딤 + 하단 정보(세로 스택), 진행바 없음 */
/* 폭 360 재지정 필수 — 데스크톱 1920폭이 남으면 문서 폭이 늘어나고
   (overflow:hidden은 자식만 잘라 자신의 박스 폭은 그대로)
   iOS는 body{overflow-x:hidden}이 뷰포트로 전파되지 않아 실기기에서
   우측 여백·좌우 밀림이 생김. 하위 모바일 규칙 전체가 360폭 가정 */
html.is-m .iq-showcase { top: 320px; height: 320px; width: 360px; }
html.is-m .iq-showcase__track { height: 320px; }
html.is-m .iq-showcase__item { width: 280px; height: 320px; left: calc(var(--i) * 292px); }
html.is-m .iq-showcase__img-d { display: none; }
html.is-m .iq-showcase__img-m { display: block; }
html.is-m .iq-showcase__dim { opacity: 0; }
html.is-m .iq-showcase__item.is-active .iq-showcase__dim {
  opacity: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.7) 85%);
}

/* 고정 UI — 활성 카드(화면 x40~320) 위에 겹침 */
html.is-m .iq-showcase__ui { left: 40px; top: 0; width: 280px; height: 320px; }
html.is-m .iq-showcase__info { left: 16px; top: 208px; width: 248px; }
html.is-m .iq-showcase__row { flex-direction: column; align-items: flex-start; gap: 6px; }
html.is-m .iq-showcase__row strong { font-size: 20px; line-height: 24px; }
html.is-m .iq-showcase__row span { font-size: 14px; line-height: 17px; opacity: 0.9; }
html.is-m .iq-showcase__price { margin-top: 6px; font-weight: 800; font-size: 20px; line-height: 23px; }
html.is-m .iq-showcase__price em { font-size: 14px; }
html.is-m .iq-showcase__line,
html.is-m .iq-showcase__line-active { display: none; }
html.is-m .iq-showcase__arrow { top: 280px; }
html.is-m .iq-showcase__arrow svg { width: 8px; height: 16px; }
html.is-m .iq-showcase__arrow--prev { left: 216px; }
html.is-m .iq-showcase__arrow--next { left: 242px; }

/* ---------- 폼 밴드 (700~1797) ---------- */
html.is-m .iq-form-section { top: 700px; width: 360px; height: 1097px; }
html.is-m .iq-form__label { left: 0; top: 60px; width: 100%; text-align: center; font-size: 16px; line-height: 19px; }
html.is-m .iq-form__title { left: 0; top: 93px; width: 100%; font-size: 28px; line-height: 32px; }
html.is-m .iq-form { left: 20px; top: 157px; width: 320px; }

/* 필드 — 라벨 16/22 + 간격 8 + 입력 50, 필드 간 12 (데스크톱 2열 rows도 세로 적층) */
html.is-m .iq-row { flex-direction: column; gap: 12px; margin-bottom: 12px; }
html.is-m .iq-row .iq-field { margin-bottom: 0; } /* row가 간격 담당 — 데스크톱과 동일 규칙 */
html.is-m .iq-field { margin-bottom: 12px; }
html.is-m .iq-field:has(textarea) { margin-bottom: 16px; } /* 시안: 문의사항→동의 간격 16 */
html.is-m .iq-field > label { margin-bottom: 8px; font-size: 16px; line-height: 22px; }
html.is-m .iq-field input[type="text"],
html.is-m .iq-field input[type="tel"],
html.is-m .iq-field textarea {
  height: 50px; padding: 0 12px; border-radius: 4px;
  font-size: 15px; line-height: 22px;
}
html.is-m .iq-field textarea { height: 160px; padding: 14px 12px; }

/* 체크박스 그룹 — 320x150 박스(보더 포함), 패딩 29/20, 체크 18, 2열 랩 */
html.is-m .iq-checks { height: 150px; padding: 29px 20px; }
html.is-m .iq-checks__row { gap: 18px 16px; }
html.is-m .iq-check { gap: 6px; height: 18px; font-size: 15px; line-height: 18px; }
html.is-m .iq-check input[type="checkbox"] { width: 18px; height: 18px; border-radius: 2px; }
html.is-m .iq-check input[type="checkbox"]::before { width: 9px; height: 9px; }

/* 개인정보 동의 + 제출 */
html.is-m .iq-privacy .iq-check { height: 22px; line-height: 22px; font-size: 15px; }
html.is-m .iq-privacy__detail { font-size: 15px; }
html.is-m .iq-submit { width: 320px; height: 52px; margin: 40px auto 0; font-size: 16px; line-height: 30px; }

/* ---------- 완료 화면 (모바일 260~720) ---------- */
html.is-m .iq-done { top: 260px; width: 360px; height: 460px; }
html.is-m .iq-done h2 { font-size: 28px; }
html.is-m .iq-done p { font-size: 16px; }

/* ============================================================
   태블릿 (html.is-t — 1024 캔버스) — 피그마 촬영문의_1024 277:8887 기반
   캐러셀/폼 밴드를 flow 스택으로 전환 — 캔버스 1024 → tPad·t-native 자동.
   히어로 68~408 / 캐러셀 508~834(카드 680×326, 피치 700, 사이드 152 피크) /
   폼 밴드 934~(헤더 +100, 폼 720 중앙 2열 348, 제출 중앙) / 푸터 간격 120.
   치수 분기는 js/inquiry.js dims() 참조.
   ============================================================ */
html.is-t #page { width: 1024px; height: auto; }

/* 히어로 (68~408) — 데스크톱 이미지 커버 + 타이틀 중앙 40px */
html.is-t .sub-hero { top: 68px; width: 1024px; height: 340px; }
html.is-t .sub-hero__img--m { display: none; }
html.is-t .sub-hero__tit { left: 0; top: 146px; width: 100%; text-align: center; font-size: 40px; line-height: 46px; }

/* ---------- 캐러셀 (508~834) — 카드 680×326, 중앙 슬롯 x172 ---------- */
html.is-t main { padding-top: 408px; }
html.is-t .iq-showcase { position: relative; top: auto; width: 1024px; height: 326px; margin-top: 100px; }
html.is-t .iq-showcase__track { height: 326px; }
html.is-t .iq-showcase__item { width: 680px; height: 326px; left: calc(var(--i) * 700px); }
html.is-t .iq-showcase__item.is-active .iq-showcase__dim {
  opacity: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.6) 85%);
}
html.is-t .iq-showcase__ui { left: 172px; top: 0; width: 680px; height: 326px; }
html.is-t .iq-showcase__info { left: 30px; top: 212px; width: 620px; }
html.is-t .iq-showcase__row { flex-direction: column; align-items: flex-start; gap: 8px; }
html.is-t .iq-showcase__row strong { font-size: 22px; line-height: 27px; }
html.is-t .iq-showcase__row span { font-size: 14px; }
html.is-t .iq-showcase__price { margin-top: 8px; font-size: 22px; line-height: 25px; }
html.is-t .iq-showcase__price em { font-size: 14px; }
/* 진행바는 1024 시안에 없음 — 화살표만 카드 우하단에 */
html.is-t .iq-showcase__line,
html.is-t .iq-showcase__line-active { display: none; }
html.is-t .iq-showcase__arrow { top: 270px; }
html.is-t .iq-showcase__arrow--prev { left: 608px; }
html.is-t .iq-showcase__arrow--next { left: 634px; }

/* ---------- 폼 밴드 (834+100 → 934~) ---------- */
html.is-t .iq-form-section {
  position: relative; top: auto; width: 1024px; height: auto;
  margin-top: 100px; padding: 100px 0 120px;
}
html.is-t .iq-form__label { position: static; width: 100%; text-align: center; font-size: 18px; line-height: 21px; }
html.is-t .iq-form__title { position: static; width: 100%; margin-top: 16px; text-align: center; font-size: 32px; line-height: 37px; }
html.is-t .iq-form {
  position: static; width: 720px; margin: 47px auto 0;
  display: flex; flex-direction: column; gap: 24px;
}
html.is-t .iq-row, html.is-t .iq-field, html.is-t .iq-field:has(textarea) { margin-bottom: 0; }
html.is-t .iq-row .iq-field input[type="text"],
html.is-t .iq-row .iq-field input[type="tel"] { height: 56px; }
html.is-t .iq-field textarea { height: 180px; }

/* 개인정보 동의 + 제출 — 시안: 동의(1823) → 제출(1915, 간격 70) */
html.is-t .iq-privacy__detail { font-size: 17px; }
html.is-t .iq-submit {
  width: auto; height: auto; margin: 46px auto 0;
  padding: 15px 120px; font-size: 18px; line-height: 30px;
}

/* ---------- 완료 화면 (히어로 아래 408~) ---------- */
html.is-t .iq-done { top: 408px; width: 1024px; height: auto; min-height: 460px; padding: 80px 0; }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(10px);
  background: #333; color: #fff; padding: 12px 24px; border-radius: 6px;
  font-size: 15px; z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }