:root{
  --vhGap: clamp(6px, 1.2vh, 16px);
  --vhGapLg: clamp(12px, 2.2vh, 28px);
  --vhLine: clamp(1.7, 0.35vh + 1.55, 2.05);

  --p-gap: clamp(8px, 1.8vh, 16px);

  /* ✅ 세로 화면(폰 높이)에 따라 전체 간격/줄간격이 더 넓어지도록 */
  --vspace: clamp(10px, 1.4vh, 18px);
  --vspace-lg: clamp(18px, 2.6vh, 34px);
  --lineh: clamp(1.72, 0.35vh + 1.62, 1.98);
  --desc-mt: clamp(18px, 3.2vh, 40px);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.78);
}

@font-face{
  font-family: "YES24";
  src: url("/public/fonts/YES24.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }
html{
  overflow-x: hidden;
  overflow-y: auto;
}
.page{
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  background: #000;
  color: var(--text);
  font-family: "YES24", system-ui, -apple-system, "Pretendard", "Noto Sans KR", Arial, sans-serif;
}

.bg-page1{
  background-image: url("/public/img/page1-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wrap{
  width: min(92vw, 460px);
  padding: calc(clamp(18px, 4vw, 28px) + var(--vspace)) clamp(14px, 3.6vw, 20px) calc(clamp(26px, 6vw, 38px) + var(--vspace));
  display: flex;
  flex-direction: column;
  gap: var(--vspace);
  min-height: 100vh;
}

.hero{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-image{
  width: min(92%, 360px);
  height: auto;
  margin: clamp(6px, 2vw, 14px) auto clamp(10px, 2.2vh, 18px);
  display: block;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,0.22));
}

.hero-desc{
  margin: 0 0 calc(var(--desc-mt) * 0.5);
  font-size: clamp(12px, 2.9vw, 13.5px);
  line-height: var(--lineh);
  color: var(--muted);
  text-shadow: 0 2px 14px rgba(0,0,0,0.15);
  letter-spacing: 0.02em;
}

/* ✅ 크롭된 라인 기준: width는 auto, 높이만 조절 */
.divider-vert{
  display:block;
  height: clamp(28px, 7vw, 44px);
  width: auto;
  margin: var(--vspace-lg) auto 0;
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.25));
}

.hero-pick{
  margin: var(--vspace) 0 0;
  font-size: clamp(12px, 2.9vw, 14px);
  letter-spacing: clamp(0.12em, 0.8vw, 0.18em);
  color: rgba(255,255,255,0.88);
  text-shadow: 0 2px 14px rgba(0,0,0,0.15);
}

.books{
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vspace);
  justify-items: center;
  padding-bottom: var(--vspace);
}

.book-btn{
  width: clamp(92px, 26vw, 120px);
  aspect-ratio: 120 / 88;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.book-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.28));
  transition: transform .12s ease;
}

.book-btn:active .book-img{
  transform: translateY(1px) scale(0.99);
}

@media (max-width: 340px){
  .books{ grid-template-columns: repeat(2, 1fr); }
}

/* 세로가 짧은 기기에서 위아래 여백을 줄여서 꽉 차 보이게 */
@media (max-height: 640px){
  .wrap{
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .hero-desc{
    margin-top: 14px;
  }
  .books{
    gap: 10px;
  }
}

/* 갤럭시 S20 Ultra 같이 세로가 긴 기기에서 콘텐츠를 조금 더 키우고 가운데에 가깝게 */
@media (min-height: 800px){
  .wrap{
    padding-top: clamp(36px, 7vh, 64px);
    padding-bottom: var(--vspace);
  }
  .hero-desc{
    margin-top: clamp(26px, 4vh, 42px);
    line-height: var(--lineh);
  }
  .title-image{
    width: min(96%, 380px);
  }
  .book-btn{
    width: clamp(100px, 28vw, 128px);
  }
}


/* 설명 3문단 그룹 */
.hero-desc-group{
  display: flex;
  flex-direction: column;
  gap: var(--p-gap);
  margin: 0; /* top spacing은 title-image margin-bottom이 담당 */
}

/* hero-desc는 그룹에서 간격을 잡으므로 margin 0 */
.hero-desc{ margin: 0; }


/* ✅ 폰 세로 높이에 따라 전체 간격이 자연스럽게 넓어지도록(Override) */
.wrap{
  padding-top: calc(clamp(18px, 4vw, 28px) + var(--vhGap)) !important;
  padding-bottom: calc(clamp(26px, 6vw, 38px) + var(--vhGapLg)) !important;
}

.title-image{
  margin-bottom: calc(clamp(10px, 2.2vh, 18px) + var(--vhGap)) !important;
}

/* 3문단 간격 + 줄간격 */
.hero-desc-group{
  gap: calc(var(--p-gap, 12px) + var(--vhGap)) !important;
}

.hero-desc{
  line-height: var(--vhLine) !important;
}

/* 라인/문구 간격 */
.divider-vert{
  margin-top: var(--vhGapLg) !important;
}

.hero-pick{
  margin-top: var(--vhGap) !important;
}

/* 책 그리드 간격 */
.books{
  gap: calc(clamp(12px, 3.6vw, 18px) + var(--vhGap)) !important;
}

/* 아주 긴 폰에서 한 단계 더 */
@media (min-height: 820px){
  :root{
    --vhGap: clamp(8px, 1.4vh, 18px);
    --vhGapLg: clamp(16px, 2.6vh, 34px);
  }
}


/* ✅ 가로 잘림 방지(Override) */
.page{ overflow-x: hidden; }

.wrap{
  max-width: calc(100vw - 24px) !important; /* 좌우 안전 여백 */
}

/* ✅ Page1: 설명문·선택 문구 가로로 더 넓게 */
.bg-page1 .wrap{
  width: min(100vw, 620px) !important;
  padding-left: clamp(6px, 1.2vw, 10px) !important;
  padding-right: clamp(6px, 1.2vw, 10px) !important;
}

/* ✅ Page1: 설명문 그룹을 books 섹션 양쪽 끝에 맞게 전체 폭 사용 */
.bg-page1 .hero-desc-group{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  gap: clamp(14px, 2.2vh, 24px) !important;
}

/* ✅ Page1: 설명문 글자 간격 넓게 */
.bg-page1 .hero-desc{
  letter-spacing: 0.22em !important;
}

/* ✅ Page1: "읽고 싶은 책을 골라보세요" 글자 간격 넓혀서 책 라인에 맞게 */
.bg-page1 .hero-pick{
  letter-spacing: clamp(0.28em, 2.2vw, 0.48em) !important;
}

/* ✅ Page1: 좁은 화면에서만 히어로 문단·선택 문구 개행 대신 글자 축소 */
@media (max-width: 480px){
  .bg-page1 .hero-desc,
  .bg-page1 .hero-pick{
    white-space: nowrap;
  }
  .bg-page1 .hero-desc{
    font-size: clamp(9px, 3.6vw, 12px) !important;
    letter-spacing: 0.12em !important;
  }
  .bg-page1 .hero-pick{
    font-size: clamp(9px, 3.6vw, 14px) !important;
    letter-spacing: 0.2em !important;
  }
}

/* 좁은 화면에서 3열 고집하다가 잘리는 문제 방지: auto-fit */
.books{
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
}

/* 버튼 자체도 가로에 맞게 더 줄어들 수 있게 */
.book-btn{
  width: min(26vw, 120px) !important;
  max-width: 100% !important;
}
.book-img{ max-width: 100%; }


/* ✅ books는 항상 3개씩 2줄(3열 고정) + 공간 부족하면 이미지/버튼이 더 작아지도록 */
:root{
  --bookGap: calc(clamp(12px, 3.6vw, 18px) + var(--vhGap, 0px));
}

.books{
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--bookGap) !important;
}

/* 3열 안에서 절대 안 넘치게: 버튼 폭을 컨테이너 기준으로 계산 */
.book-btn{
  width: min(120px, calc((100% - (2 * var(--bookGap))) / 3)) !important;
  aspect-ratio: 120 / 88;
}

.book-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ✅ (최종) 3열 고정 유지 + 책 이미지가 절대 잘리지 않게 */
.books{
  grid-template-columns: repeat(3, 1fr) !important;
}

.book-btn{
  width: min(120px, calc((100% - (2 * var(--bookGap, 16px))) / 3)) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 6px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.book-img{
  width: 100% !important;
  height: auto !important;          /* ✅ 절대 잘림 방지 */
  max-height: 96px !important;      /* 필요하면 100~110으로 조절 */
  object-fit: contain !important;
}


/* ✅ 크기 너무 작아지는 문제 보정 (3열 유지, 기본 크기 유지) */
.wrap{
  width: min(92vw, 560px) !important; /* 기본 max 폭 조금 키움 */
}

/* 데스크탑/태블릿에서는 더 넓게 */
@media (min-width: 900px){
  .wrap{ width: min(70vw, 640px) !important; }
  .hero-desc{ font-size: clamp(13px, 1.1vw, 15px) !important; }
  .hero-pick{ font-size: clamp(13px, 1.1vw, 15px) !important; }
}

/* 3열 고정 + 버튼/이미지 최소 크기 보장 */
.books{
  grid-template-columns: repeat(3, 1fr) !important;
}

.book-btn{
  /* ✅ 가운데(preferred)는 컨테이너 1/3, 너무 작아지지 않게 min 98px, 너무 커지지 않게 max 150px */
  width: clamp(98px, calc((100% - (2 * var(--bookGap, 16px))) / 3), 150px) !important;
  padding: 6px 6px !important;
}

.book-img{
  max-height: clamp(92px, 16vw, 140px) !important; /* 기존 96px 제한 완화 */
}


/* ✅ hero-desc-group 위 여백 조금 더 */
.hero-desc-group{
  margin-top: calc(var(--desc-mt, 22px) + var(--vhGap, 0px) + 10px) !important;
}

/* ✅ books 위 여백 줄이기: auto로 밀어내는걸 제거 */
.books{
  margin-top: clamp(10px, 2vh, 18px) !important;
}


/* ✅ hero-desc-group 위 여백 더 줄임 */
.hero-desc-group{
  margin-top: calc(var(--desc-mt, 22px) + var(--vhGap, 0px) - 6px) !important;
}


/* ✅ 합본 이미지 느낌으로: 제목 위 여백 더 + books 아래 여백 더 */
.title-image{
  margin-top: calc(clamp(6px, 2vw, 14px) + var(--vhGap, 0px) + 14px) !important;
}

/* books 아래 여백 늘리기: wrap bottom padding을 조금 더 */
.wrap{
  padding-bottom: calc(clamp(26px, 6vw, 38px) + var(--vhGapLg, 0px) + 18px) !important;
}


/* ✅ hero-desc-group 위 여백 더 줄이기 */
.hero-desc-group{
  margin-top: calc(var(--desc-mt, 22px) + var(--vhGap, 0px) - 14px) !important;
}

/* ✅ 제목 위 여백은 더 늘리기 */
.title-image{
  margin-top: calc(clamp(6px, 2vw, 14px) + var(--vhGap, 0px) + 26px) !important;
}


/* ✅ (추가) hero-desc-group 위 여백 더 줄이기 */
.hero-desc-group{
  margin-top: calc(var(--desc-mt, 22px) + var(--vhGap, 0px) - 26px) !important;
}

/* ✅ (추가) 제목 위 여백 더 늘리기 */
.title-image{
  margin-top: calc(clamp(6px, 2vw, 14px) + var(--vhGap, 0px) + 40px) !important;
}


/* ✅ 제목 위 여백 더 늘리기 */
.title-image{
  margin-top: calc(clamp(6px, 2vw, 14px) + var(--vhGap, 0px) + 54px) !important;
}

/* ✅ desc-group 아래 여백 없애기(바로 divider로 이어지게) */
.hero-desc-group{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ✅ divider를 desc-group과 hero-pick 사이 정확히 중앙에: 위/아래 동일 여백 */
.divider-vert{
  margin: var(--vhGapLg, 18px) auto !important; /* top/bottom 동일 */
}

/* ✅ hero-pick은 divider가 margin으로 위치를 잡으니 margin-top 0 */
.hero-pick{
  margin-top: 0 !important;
}


/* ✅ 제목 이미지 0.7배 축소 */
.title-image{
  width: calc(min(92%, 360px) * 0.7) !important;
}


/* ✅ "~ 읽고 싶은 책을 골라 보세요 ~" 0.5배 키우기(약 1.5x) */
.hero-pick{
  font-size: clamp(18px, 4.35vw, 21px) !important;
}


/* ✅ 제목 이미지 1.2배 확대 */
.title-image{
  width: calc(min(92%, 360px) * 1.2) !important;
}


/* ✅ 제목 이미지 0.9배 (최근 override들을 덮어씀) */
.title-image{
  width: calc(min(92%, 360px) * 0.9) !important;
}


/* ✅ 제목 이미지 0.8배 (0.9배에서 0.1 더 줄임) */
.title-image{
  width: calc(min(92%, 360px) * 0.8) !important;
}


/* ✅ hero-pick 0.2배 줄이기(현재 값에서 약 0.8x) */
.hero-pick{
  font-size: clamp(14.4px, 3.48vw, 16.8px) !important;
}


/* ✅ hero-pick을 책 그리드 끝-끝 폭(=wrap 전체 폭)에 맞춰 더 넓게 보이게 */
.hero-pick{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  /* 글자 간격을 늘려 "양옆으로 퍼지는" 느낌 */
  letter-spacing: clamp(0.18em, 1.6vw, 0.32em) !important;
  padding: 0 6px !important;
}


/* ✅ hero-pick 기울임 */
.hero-pick{
  font-style: italic !important;
}


/* ===== Page2 ===== */
.bg-page2{
  background-image: url("/public/img/page2-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page2-header{
  position: relative;
  text-align: center;
  padding-top: calc(var(--vhGapLg, 18px) * 0.8);
}

.back-link{
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
  font-size: 18px;
}

.page2-jewel{
  width: clamp(28px, 7vw, 42px);
  height: auto;
  display: block;
  margin: 0 auto clamp(10px, 2vh, 14px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}

.page2-title{
  margin: 0;
  font-size: clamp(22px, 5.4vw, 34px);
  letter-spacing: 0.08em;
}

.page2-sub{
  white-space: pre-line;
  margin: clamp(10px, 2.2vh, 16px) 0 0;
  font-size: clamp(12px, 3.2vw, 14px);
  color: rgba(255,255,255,0.82);
}

.page2-form{
  margin-top: calc(var(--vhGapLg, 18px) * 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--vhGap, 10px) + 8px);
}

.page2-form .q{
  width: 100%;
  text-align: center;
}

.page2-form .q-title{
  text-align: center;
  display: block;
  width: 100%;
  max-width: 100%;
  letter-spacing: clamp(0.12em, 1.2vw, 0.26em);
  padding: 0 6px;
}

/* checks 영역만 왼쪽 정렬 유지(중앙정렬 제외) */
.page2-form .checks{
  align-self: flex-start;
  text-align: left;
}

.q-title{
  display:block;
  margin-bottom: 8px;
  font-size: clamp(13px, 3.4vw, 15px);
  color: rgba(255,255,255,0.92);
}

.input, .textarea{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 12px 12px;
  outline: none;
}

.textarea{ resize: vertical; min-height: 90px; }

.checks{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin: 10px 0;
}

.check{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: rgba(255,255,255,0.86);
}

.check input{ width: 16px; height: 16px; }

.actions{
  display:flex;
  justify-content:center;
  margin-top: calc(var(--vhGapLg, 18px) * 0.8);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 120px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}

.btn .btn-ripple{
  position: absolute;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.22) 35%, rgba(255,255,255,0) 70%);
  opacity: 0.95;
  pointer-events: none;
  animation: btnRippleExpand 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

@keyframes btnRippleExpand{
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0.8; }
  25%  { transform: translate(-50%, -50%) scale(0.4);  opacity: 0.65; }
  50%  { transform: translate(-50%, -50%) scale(0.75); opacity: 0.4; }
  75%  { transform: translate(-50%, -50%) scale(0.95); opacity: 0.18; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
}


/* ===== Page2 tuned for background poster ===== */
.page.bg-page2 .wrap{
  width: min(92vw, 460px);
  max-width: 460px;
}

/* 상단 영역을 좀 더 아래로 내려서(배경 여백 고려) */
.page2-header{
  padding-top: clamp(56px, 9vh, 120px) !important;
}

.page2-jewel{
  width: clamp(34px, 8vw, 48px) !important;
  margin-bottom: clamp(10px, 2.2vh, 18px) !important;
}

.page2-title{
  font-size: clamp(24px, 6vw, 38px) !important;
  letter-spacing: 0.06em !important;
}

.page2-sub{
  margin-top: clamp(10px, 2.2vh, 18px) !important;
  line-height: 1.9 !important;
}

/* 폼 시작 위치를 더 아래로 */
.page2-form{
  margin-top: clamp(26px, 5vh, 56px) !important;
  gap: clamp(52px, 8vh, 80px) !important;
}

/* 질문 타이틀 */
.q-title{
  margin-bottom: 10px !important;
  letter-spacing: 0.02em;
}

/* 입력 박스: 배경과 어울리게 살짝 투명 + 테두리 선명 */
.input, .textarea{
  border: 1px solid rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  backdrop-filter: blur(2px);
}

.input{ height: 46px; }

.textarea{
  min-height: 110px !important;
}

/* 체크박스 영역 왼쪽 정렬 느낌 */
.checks{
  align-items: flex-start;
  padding-left: 2px;
}

.check{
  justify-content: flex-start;
}

/* 버튼을 아래쪽에 더 두고, 둥글게 */
.actions{
  margin-top: clamp(26px, 5vh, 52px) !important;
  padding-bottom: clamp(10px, 2vh, 18px);
}

.btn{
  min-width: 160px !important;
  padding: 14px 22px !important;
  font-size: 16px;
  letter-spacing: 0.12em;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
}


/* ===== Page3 ===== */
.bg-page3{
  overflow-x: hidden;
  max-width: 100vw;
  background-image: url("/public/img/page3-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page3-wrap{
  max-width: 460px;
}

.page3-header{
  text-align:center;
  padding-top: clamp(16px, 3vh, 32px);
}

.page3-poster-section{
  margin-top: clamp(10px, 2vh, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 24px);
}

.page3-poster-img{
  width: 80%;
  max-width: 336px;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  margin-bottom: clamp(20px, 3.5vh, 32px);
}

.page3-event-copy{
  width: 100%;
  max-width: 420px;
  text-align: center;
  color: rgba(255,255,255,0.92);
  font-size: clamp(12px, 3vw, 14px);
  line-height: 1.85;
}

.page3-event-copy p{
  margin: 0 0 clamp(10px, 2vh, 14px);
}

.page3-event-copy p:last-child{ margin-bottom: 0; }

.page3-event-title{
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: clamp(14px, 2.5vh, 22px) !important;
  font-size: clamp(14px, 3.6vw, 17px) !important;
}

.page3-event-title:first-child{ margin-top: 0 !important; }

.page3-event-by{
  font-size: clamp(11px, 2.8vw, 13px);
  color: rgba(255,255,255,0.78);
  margin-top: clamp(8px, 1.5vh, 12px) !important;
  margin-bottom: clamp(28px, 5vh, 44px) !important;
}

.page3-event-ticket{
  letter-spacing: 0.14em;
}
.page3-event-ticket .page3-event-title{
  letter-spacing: 0.14em;
}

.page3-event-ticket-desc{
  letter-spacing: 0.38em;
}

.page3-event-intro{
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page3-event-intro-line{
  white-space: nowrap;
  font-size: clamp(8px, 2.3vw, 14px);
  width: fit-content;
}

.bg-page3 .actions{
  margin-top: clamp(18px, 3.5vh, 28px) !important;
}

.page4-wrap{
  position: relative;
}

.page4-reset-wrap{
  position: absolute;
  bottom: clamp(28px, 5vh, 40px);
  left: clamp(28px, 6vw, 40px);
  z-index: 10;
}

.page4-reset-wrap .btn-reset{
  font-size: 13px;
  padding: 10px 16px !important;
  min-width: auto !important;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page4-reset-wrap .btn-reset-icon{
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 0 1px #fff);
}

.page3-title{
  margin: 0;
  font-size: clamp(26px, 6.5vw, 40px);
  letter-spacing: clamp(0.12em, 1.2vw, 0.28em);
  line-height: 1.05;
  display: block;
  width: 100%;
  text-align: center;
  padding: 0 6px;
}

.page3-title2{
  font-size: clamp(30px, 7.2vw, 44px);
  letter-spacing: clamp(0.14em, 1.4vw, 0.32em);
  font-style: italic;
}

.page3-copy{
  margin-top: clamp(18px, 3.6vh, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vh, 18px);
  color: rgba(255,255,255,0.86);
  text-shadow: 0 2px 14px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 100%;
  padding: 0 6px;
}

.page3-copy p{
  margin: 0;
  font-size: clamp(12px, 3.1vw, 14px);
  line-height: 1.8;
  text-align: center;
  letter-spacing: clamp(0.08em, 0.8vw, 0.2em);
}
.page3-copy .em{ font-weight: 400; color: #FEEFC5; font-style: italic; }

.divider-block{
  margin-top: clamp(14px, 3vh, 22px);
}

.page3-form{
  margin-top: clamp(18px, 4.2vh, 36px);
  display:flex;
  flex-direction: column;
  gap: clamp(26px, 5vh, 44px);
}

.field-label{
  display: block;
  text-align: center;
  margin-bottom: 12px;
  font-size: clamp(13px, 3.4vw, 15px);
  color: rgba(255,255,255,0.9);
  width: 100%;
  max-width: 100%;
  letter-spacing: clamp(0.08em, 0.8vw, 0.2em);
  padding: 0 6px;
}

.line-input{
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.65);
  background: transparent;
  color: rgba(255,255,255,0.92);
  padding: 10px 6px;
  outline: none;
  font-size: 16px;
}

.line-input:focus{
  border-bottom-color: rgba(255,255,255,0.95);
}

.submit-btn{
  min-width: 140px;
}

.thanks{
  margin-top: 20vh;
  text-align:center;
  color: rgba(255,255,255,0.92);
}
.thanks h1{ margin:0 0 12px; font-size: 28px; }
.thanks p{ margin:0 0 18px; line-height: 1.8; color: rgba(255,255,255,0.84); }


/* ===== Page3 tuned (title as image + input/button align) ===== */
.page3-header{
  padding-top: clamp(17px, 3vh, 35px) !important;
}

.page3-title-img{
  width: min(88%, 360px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

.page3-copy{
  margin-top: clamp(22px, 4vh, 36px) !important;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* 폼 라인 입력: 합본처럼 가운데 정렬 + 줄 길이 통일 */
.page3-form{
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  gap: clamp(22px, 4.6vh, 40px) !important;
}

.field-label{
  margin-bottom: 14px !important;
}

.line-input{
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display:block;
  border-bottom-width: 1.5px;
  padding: 12px 6px;
}

/* 제출 버튼: 가운데, 살짝 작게 */
.submit-btn{
  min-width: 110px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
}

.actions{
  margin-top: clamp(18px, 4vh, 34px) !important;
}


/* ===== Page2 title image by theme ===== */
.page2-title-img{
  width: min(86%, 340px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22));
}

.page2-header{
  padding-top: clamp(40px, 7vh, 88px) !important;
}

.page2-jewel{
  width: clamp(30px, 7vw, 42px) !important;
  margin-bottom: clamp(10px, 1.8vh, 14px) !important;
}

/* 텍스트 타이틀 안 쓰므로 숨김 안전장치 */
.page2-title,
.page2-sub{
  display: none !important;
}


/* ===== Page3 separate ribbon + title ===== */
.page3-title-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 16px);
}

.page3-ribbon-img{
  width: min(85%, 340px);
  height: auto;
  display: block;
}

.page3-title-img{
  width: min(90%, 380px) !important;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ===== Page2 image titles ===== */
.page2-title-img{
  width: min(90%, 420px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}

.page2-title,
.page2-sub{
  display: none !important;
}

.page2-header{
  padding-top: clamp(36px, 7vh, 84px) !important;
}

.page2-jewel{
  width: clamp(28px, 7vw, 40px) !important;
  margin-bottom: clamp(8px, 1.6vh, 14px) !important;
}

/* ✅ Page2: 보석 1.3배+, 타이틀 이미지 0.7배 (이미지 목업에 맞춤) */
.page2-jewel{
  width: clamp(42px, 10.5vw, 60px) !important;
  margin-bottom: 0 !important;
}
.page2-title-img{
  width: min(63%, 294px) !important;
}

/* ✅ Page2: 헤더 위 여백 더 */
.page2-header{
  padding-top: clamp(48px, 8.5vh, 100px) !important;
}

/* ✅ Page2: 타이틀 이미지 아래 부제(테마별 문구) */
.page2-subtitle{
  margin: clamp(10px, 2vh, 18px) auto 0;
  width: 92%;
  max-width: 92%;
  font-size: clamp(13px, 3.2vw, 16px);
  line-height: 1.9;
  color: rgba(255,255,255,0.9);
  text-align: center;
  letter-spacing: 0.36em;
  font-style: italic;
}
@media (max-width: 480px){
  .page2-subtitle{
    white-space: nowrap;
    font-size: clamp(9px, 4.2vw, 14px);
    letter-spacing: 0.2em;
  }
}

/* ✅ Page2: "필요하다고" 질문 제목 + 체크박스 글자 크기 13.26px */
.page2-form .q:has(.checks--custom) .q-title,
.page2-form .checks--custom .check-text{
  font-size: 13.26px !important;
}
.page2-form .checks--custom .check-box{
  width: clamp(16px, 3.2vw, 18px) !important;
  height: clamp(16px, 3.2vw, 18px) !important;
}
.page2-form .checks--custom{
  margin-left: clamp(26px, 6.5vw, 40px) !important;
  gap: clamp(6px, 1vh, 9px) !important;
}
/* iPad / iPad Air: 체크박스 영역 블록은 중앙, 체크박스는 한 줄·왼쪽 정렬 */
@media (min-width: 768px) and (max-width: 1400px){
  .bg-page2 .page2-form .checks.checks--custom{
    margin-left: auto !important;
    margin-right: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    max-width: max-content;
  }
  .bg-page2 .page2-form .checks.checks--custom .check-text{
    white-space: normal !important;
    font-size: 13.26px !important;
    letter-spacing: 0.02em !important;
  }
}

/* ✅ Page2: 기타 입력란—왼쪽 더 뒤로, 높이 dreamNow와 동일(38px) */
.page2-form .input.input--etc{
  margin-top: 0 !important;
  margin-left: clamp(58px, 12vw, 72px) !important;
  margin-right: 2.8em !important;
  width: calc(100% - clamp(58px, 12vw, 72px) - 2.8em) !important;
  height: 38px !important;
  display: block !important;
}

/* ✅ Page2: input 직각(모서리 각지게), 좌우 좁게, 위 여백, 높이 0.7배(꿈/지금/올해계획) */
.page2-form .input:not(.input--etc){
  border-radius: 0 !important;
  width: 88% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 20px !important;
  height: 38px !important;
  display: block !important;
}
.page2-form .input.input--etc{
  border-radius: 0 !important;
}


/* ===== Trimmed page3 assets ===== */
.page3-ribbon-img{
  width: clamp(24px, 6vw, 40px) !important;
  margin-bottom: 0 !important;
}

.page3-title-stack{
  gap: clamp(6px, 1vh, 10px) !important;
}

.page3-title-img{
  width: min(92%, 390px) !important;
}


/* ===== Page3 size adjust to match comp ===== */
.page3-wrap{
  max-width: 1120px !important;
  width: min(98vw, 1120px) !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

.page3-header{
  padding-top: clamp(40px, 6.5vh, 68px) !important;
}

.page3-ribbon-img{
  width: clamp(28px, 5.2vw, 42px) !important;
}

.page3-title-stack{
  gap: clamp(8px, 1.2vh, 12px) !important;
  margin-bottom: clamp(40px, 6.25vh, 70px) !important;
}

.page3-title-img{
  width: min(88%, 520px) !important;
}

.page3-copy{
  margin-top: clamp(70px, 10vh, 110px) !important;
  max-width: 860px !important;
  gap: clamp(18px, 2.7vh, 26px) !important;
}

.page3-copy p{
  font-size: clamp(15px, 2.45vw, 21px) !important;
  line-height: 1.9 !important;
  letter-spacing: 0.03em;
}

.page3-copy .em{
  font-size: clamp(17px, 2.8vw, 24px) !important;
  color: #FEEFC5 !important;
  font-style: italic !important;
}

.divider-block{
  margin-top: clamp(28px, 4vh, 40px) !important;
}

/* Page3: 구분선 위아래 여백 동일(페이지 크기 변해도 동일 유지) */
.page3-wrap .divider-block{
  margin-top: clamp(32px, 5.5vh, 52px) !important;
  margin-bottom: clamp(32px, 5.5vh, 52px) !important;
}

.divider-vert{
  width: 12px !important;
  height: auto !important;
  opacity: 0.9;
}

.page3-form{
  margin-top: 0 !important;
  max-width: 100% !important;
  gap: clamp(42px, 6vh, 56px) !important;
}

.field-label{
  font-size: clamp(16px, 2.65vw, 24px) !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.02em;
}

.line-input{
  max-width: 100% !important;
  padding: 16px 8px !important;
  border-bottom-width: 1.5px !important;
  font-size: 18px !important;
}

/* Page3: 입력란 네모박스(사방 테두리) */
.page3-form .line-input{
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.06) !important;
}
.page3-form .line-input:focus{
  border-color: rgba(255,255,255,0.85) !important;
}
.page3-form .line-input--multiline{
  min-height: 2.6em;
  resize: vertical;
}

/* Page3: 본문·필드 라벨·입력란 폰트 크기 13.6px, 글자 간격 넓게 */
.page3-wrap .page3-copy p,
.page3-wrap .page3-copy .em,
.page3-wrap .field-label,
.page3-wrap .line-input{
  font-size: 13.6px !important;
  letter-spacing: 0.36em !important;
}

/* 한 줄로 보이게: 첫 문단 + 마지막 문단 + 두 번째 필드 라벨 글자 간격 줄임 */
/* Page3: 첫·마지막 문단 글자 간격 넓게 */
.page3-wrap .page3-copy p:first-of-type,
.page3-wrap .page3-copy p:last-of-type{
  letter-spacing: 0.18em !important;
}
/* Page3: 두 필드 라벨 글자 간격 */
.page3-form .field-label{
  letter-spacing: 0.15em !important;
}
.page3-form label.field:nth-of-type(2) .field-label{
  letter-spacing: 0.06em !important;
}

/* Page3: 첫·마지막 문단 가로 넓이 = .em 있는 본문과 동일(860px), 한 줄, 중앙 정렬 */
.page3-wrap .page3-copy p:first-of-type,
.page3-wrap .page3-copy p:last-of-type{
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.page3-form .field-label{
  width: 135% !important;
  max-width: 135% !important;
  margin-left: -17.5% !important;
  margin-right: -17.5% !important;
  display: block !important;
  text-align: center !important;
}

/* Page3: contact·schedule 입력란 80% 넓이, 중앙 정렬 */
.page3-form .line-input{
  width: 82% !important;
  max-width: 82% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
}

/* Page4: 입력 텍스트 자간은 일반적인 수준으로 축소 */
.page4-wrap .line-input{
  letter-spacing: 0.02em !important;
}

.actions{
  margin-top: clamp(26px, 4vh, 42px) !important;
  padding-bottom: clamp(42px, 8vh, 80px) !important;
}

.submit-btn{
  min-width: 150px !important;
  padding: 14px 24px !important;
  font-size: 17px !important;
  letter-spacing: 0.22em !important;
}

/* 모바일에서는 원본 합본처럼 여백 조금 더 촘촘하게 */
@media (max-width: 768px){
  .page3-wrap{
    width: min(98vw, 1120px) !important;
  }

  .page3-title-img{
    width: min(90%, 430px) !important;
  }

  .page3-copy{
    margin-top: 32px !important;
    gap: 16px !important;
  }

  .page3-copy p{
    font-size: clamp(12px, 3.7vw, 17px) !important;
    line-height: 1.85 !important;
  }

  .page3-copy .em{
    font-size: clamp(14px, 4vw, 19px) !important;
  }

  .field-label{
    font-size: clamp(13px, 4.1vw, 19px) !important;
    margin-bottom: 14px !important;
  }

  .line-input{
    padding: 12px 6px !important;
    font-size: 16px !important;
  }

  .submit-btn{
    min-width: 126px !important;
    padding: 11px 18px !important;
    font-size: 15px !important;
  }
}

/* Page3: 좁은 화면에서만 본문·필드라벨 개행 대신 글자 축소 */
@media (max-width: 480px){
  .page3-wrap .page3-copy p,
  .page3-wrap .page3-copy .em{
    white-space: nowrap;
    font-size: clamp(9px, 3.8vw, 15px) !important;
    letter-spacing: 0.12em !important;
  }
  /* 첫·마지막 문단만: 글자크기 유지, 개행 금지, 글자간격만 축소 */
  .page3-wrap .page3-copy p:first-of-type,
  .page3-wrap .page3-copy p:last-of-type{
    font-size: 13.6px !important;
    white-space: nowrap;
    letter-spacing: 0.04em !important;
  }
  .page3-form .field-label{
    white-space: nowrap;
    font-size: clamp(9px, 4vw, 16px) !important;
    letter-spacing: 0.08em !important;
  }
  .page3-form label.field:nth-of-type(2) .field-label{
    letter-spacing: 0.05em !important;
  }
}


/* ===== Page2 custom checkboxes ===== */
.checks--custom{
  gap: clamp(12px, 2vh, 18px) !important;
  margin: 14px 0 18px !important;
}

.check--custom{
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(14px, 2vw, 18px) !important;
  cursor: pointer;
}

.check--custom input{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.check-box{
  width: clamp(22px, 4.8vw, 28px);
  height: clamp(22px, 4.8vw, 28px);
  border: 2px solid rgba(255,255,255,0.86);
  background: transparent;
  box-sizing: border-box;
  flex-shrink: 0;
  display: inline-block;
}

.check-text{
  font-size: clamp(15px, 3.5vw, 20px);
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
}

.check--custom input:checked + .check-box{
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.78);
}

.textarea--etc{
  margin-top: 10px;
}


/* ===== Revert divider size on page1/page3 ===== */
.hero .divider-vert,
.page3-wrap .divider-vert,
.divider-block .divider-vert{
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
}

/* ===== Page3 divider: 2배 크기, 진하게, 위아래 여백 동일(반응형) ===== */
.page3-wrap .divider-vert,
.divider-block .divider-vert{
  height: clamp(28px, 5vh, 48px) !important;
  opacity: 0.65 !important;
  margin-top: clamp(32px, 5.5vh, 52px) !important;
  margin-bottom: clamp(32px, 5.5vh, 52px) !important;
}

/* ===== Page2 divider: 길이 더 키움, 위아래 여백 더 줄임 ===== */
.bg-page2 .divider-vert{
  height: clamp(28px, 6vw, 42px) !important;
  width: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== Page1 divider: 길이 90%, 줄어든 만큼 여백 추가 ===== */
.bg-page1 .hero .divider-vert{
  width: auto !important;
  height: clamp(27px, 4.2vh, 42px) !important;
  margin: clamp(20px, 3.25vh, 33px) auto clamp(16px, 2.65vh, 24px) !important;
  opacity: 0.6 !important;
  filter: none !important;
}

/* ===== Page3 requested assets ===== */
.page3-ribbon-img{
  width: auto !important;
  max-width: 36px !important;
  height: auto !important;
  margin-bottom: 0 !important;
  margin-left: 10px !important;
}

.page3-title-img{
  width: min(98%, 620px) !important;
  height: auto !important;
  margin-top: -24px !important;
}


/* ===== Page1·Page2: 클릭 시 파동(리플) + 배경 일렁임 ===== */
.bg-page1 .ripple-overlay,
.bg-page2 .ripple-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  --cx: -9999px;
  --cy: -9999px;
}

.bg-page1 .ripple-overlay--active,
.bg-page2 .ripple-overlay--active {
  pointer-events: auto;
}

.bg-page1 .ripple-ring,
.bg-page2 .ripple-ring {
  position: absolute;
  left: var(--cx, -9999px);
  top: var(--cy, -9999px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(0.15);
  transform-origin: center center;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,0) 45%, rgba(255,255,255,0.85) 52%, rgba(255,255,255,0.22) 58%, rgba(255,255,255,0) 68%),
    radial-gradient(circle, rgba(255,255,255,0) 35%, rgba(110,180,255,0.25) 55%, rgba(255,255,255,0) 75%);
  filter: blur(0.2px) saturate(1.15);
  mix-blend-mode: screen;
  will-change: transform, opacity, left, top;
}

.bg-page1 .ripple-ring.ripple-ring-anim,
.bg-page2 .ripple-ring.ripple-ring-anim {
  animation: rippleRingExpand 750ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.bg-page1 .ripple-distort,
.bg-page2 .ripple-distort {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--cx, -9999px) var(--cy, -9999px), rgba(255,255,255,0) 0%, rgba(255,255,255,0) 7%, rgba(255,255,255,0.12) 9%, rgba(255,255,255,0) 13%, rgba(255,255,255,0.08) 17%, rgba(255,255,255,0) 23%),
    radial-gradient(circle at var(--cx, -9999px) var(--cy, -9999px), rgba(120,160,255,0.08) 0%, rgba(120,160,255,0) 30%);
  mix-blend-mode: screen;
  filter: blur(1.2px) contrast(1.05);
  will-change: opacity, transform, background;
}

.bg-page1 .ripple-distort.ripple-distort-anim,
.bg-page2 .ripple-distort.ripple-distort-anim {
  animation: rippleDistortPulse 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes rippleRingExpand {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.1);  filter: blur(0px); }
  5%   { opacity: 0.7;  transform: translate(-50%, -50%) scale(0.5);  filter: blur(0.1px); }
  12%  { opacity: 0.82; transform: translate(-50%, -50%) scale(2);    filter: blur(0.2px); }
  22%  { opacity: 0.72; transform: translate(-50%, -50%) scale(5);    filter: blur(0.35px); }
  35%  { opacity: 0.58; transform: translate(-50%, -50%) scale(10);   filter: blur(0.5px); }
  50%  { opacity: 0.42; transform: translate(-50%, -50%) scale(16);   filter: blur(0.7px); }
  65%  { opacity: 0.28; transform: translate(-50%, -50%) scale(23);   filter: blur(0.9px); }
  80%  { opacity: 0.14; transform: translate(-50%, -50%) scale(31);   filter: blur(1.1px); }
  92%  { opacity: 0.05; transform: translate(-50%, -50%) scale(37);   filter: blur(1.3px); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(42);   filter: blur(1.5px); }
}

@keyframes rippleDistortPulse {
  0%   { opacity: 0;    transform: scale(1); }
  8%   { opacity: 0.65; transform: scale(1.002) skewY(-0.08deg); }
  20%  { opacity: 0.75; transform: scale(1.006) skewY(-0.22deg); }
  35%  { opacity: 0.58; transform: scale(1.008) skewY(-0.12deg); }
  50%  { opacity: 0.4;  transform: scale(1.005) skewY(0.08deg); }
  65%  { opacity: 0.25; transform: scale(1.003) skewY(0.12deg); }
  80%  { opacity: 0.12; transform: scale(1.001) skewY(0.04deg); }
  100% { opacity: 0;    transform: scale(1) skewY(0deg); }
}

/* 터치한 곳을 중심으로 배경(페이지 전체) 일렁임 */
.bg-page1.page-wobble,
.bg-page2.page-wobble {
  transform-origin: var(--touch-x, 50%) var(--touch-y, 50%);
  animation: pageWobble 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  will-change: transform;
}

@keyframes pageWobble {
  0%   { transform: scale(1)     skewX(0deg)     skewY(0deg); }
  10%  { transform: scale(1.007) skewX(0.08deg)  skewY(0.12deg); }
  22%  { transform: scale(1.012) skewX(0.12deg)  skewY(0.16deg); }
  35%  { transform: scale(0.998) skewX(-0.07deg) skewY(-0.09deg); }
  48%  { transform: scale(1.004) skewX(0.04deg)  skewY(0.06deg); }
  60%  { transform: scale(0.999) skewX(-0.025deg) skewY(-0.03deg); }
  72%  { transform: scale(1.002) skewX(0.012deg) skewY(0.015deg); }
  85%  { transform: scale(1.000) skewX(-0.004deg) skewY(-0.005deg); }
  100% { transform: scale(1)     skewX(0deg)     skewY(0deg); }
}