/* 광동 검색광고 랜딩 공통 — 휴대폰은 캔버스 그대로, 1024px 이상은 PC 레이아웃
   토큰: 잉크 #181614 · 종이 #F5F3ED · 밤 #1A1614 · 테라코타 #AE5237 / #D98A6A */
:root { --g: 18px; --ease: cubic-bezier(.23, 1, .32, 1) }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: #E7E3DA }
img { max-width: 100% }
.lp { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; overflow: clip !important; box-shadow: 0 0 0 1px rgba(24,22,20,.06) }
#form { scroll-margin-top: 16px }
:focus-visible { outline: 2px solid #AE5237; outline-offset: 2px }

/* 하단 바: 신청서가 보이면 숨긴다 */
.lp-bar { position: fixed !important; left: 50% !important; right: auto !important; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; box-sizing: border-box; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; z-index: 20; transition: transform 280ms var(--ease), opacity 200ms ease }
.lp-bar.is-off { transform: translate(-50%, 110%); opacity: 0; pointer-events: none }

/* 섹션 묶음: 휴대폰에서는 없는 것처럼 */
.s-head, .s-body { display: contents }

/* 히어로 위 센터 이름 · 사진 캡션 대비 */
.hero .cap span[style*="#D98A6A"] { color: #F0B497 !important }
.hero-in > .cap { opacity: .9 !important }
.s-fig { overflow: hidden }
.s-fig::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(180deg, rgba(26,22,20,0), rgba(26,22,20,.72)); pointer-events: none }
.s-fig figcaption { z-index: 1 }
.s-fig img { width: 100% !important }

/* 체크 · 부위 선택 뒤 바로 신청 */
.go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: #AE5237; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 14px; transition: transform 160ms var(--ease), opacity 200ms ease }
.go:active { transform: scale(.97) }
.go[hidden] { display: none }

/* 오시는 길 */
.visit { margin-top: 18px; padding: 24px 20px; background: #EFECE3; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.65; color: #181614 }
.visit .cap { font-size: 9.5px; color: #AE5237 }
.visit-h { font-family: 'Noto Serif KR', serif; font-weight: 500; font-size: 19px; letter-spacing: -.02em }
.visit p { margin: 0; color: #4A4842 }
.visit-map { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; color: #181614 !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid #181614 }
.visit dl { margin: 6px 0 0; border-top: 1px solid rgba(24,22,20,.13) }
.visit dl div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(24,22,20,.13) }
.visit dt { font-size: 12px; color: #6E6D64; padding-top: 2px }
.visit dd { margin: 0; display: flex; flex-direction: column; gap: 2px }
.visit dd a { color: #181614 !important; font-weight: 600; text-decoration: none; font-size: 15px }
.visit dd span { font-size: 12px; color: #6E6D64 }

/* 휴대폰 화면 다듬기: 줄 끝 한 단어 방지 · 슬라이드 첫 장 여백 · 누르는 영역 44px */
.lp { text-wrap: pretty }
.lp h1, .lp h2, .lp h3 { text-wrap: balance }
.nw { white-space: nowrap }
.rail { scroll-padding-inline: 18px; overscroll-behavior-x: contain; scrollbar-width: none }
.rail::-webkit-scrollbar { display: none }
.visit dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 }
@media (max-width: 1023px) {
  .hero-in .cap[style*="opacity: 0.6"] { margin-top: 14px }
  .lp a[href*="youtube.com/results"] { display: inline-flex; align-items: center; min-height: 44px; padding-left: 12px }
  .lp a.tap[aria-label^="전화"] { width: 44px !important; height: 44px !important }
  .kd-booking .bk-arrow { width: 44px !important; height: 44px !important }
  .kd-booking .bk-day { width: 40px !important; height: 40px !important }
}
@media (max-width: 419px) {
  /* 4칸 단계표는 좁은 화면에서 2 × 2 */
  .lp [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  .lp [style*="repeat(4, minmax(0, 1fr))"] > * { padding: 14px 14px !important }
  /* 사진 위 두 칸 카드 제목 */
  .lp figure[style*="height: 260px"] figcaption b { font-size: 17px !important }
}
@media (max-width: 374px) {
  .lp h1[style*="font-size: 34px"] { font-size: 31px !important }
  .lp h2[style*="font-size: 26px"] { font-size: 23.5px !important }
  .lp h2[style*="font-size: 24px"] { font-size: 22px !important }
}
@media (max-width: 340px) {
  .lp h1[style*="font-size: 34px"] { font-size: 28px !important }
  .lp p[style*="font-size: 21px"] { font-size: 19px !important }
}

@media (min-width: 1024px) {
  :root { --g: max(56px, calc((100vw - 1180px) / 2)) }
  body { background: #F5F3ED }
  .lp { max-width: none; box-shadow: none; font-size: 16px !important }

  /* 히어로: 왼쪽 정렬, 화면 높이 */
  .hero { height: min(88vh, 880px) !important; min-height: 660px }
  .hero-ov { background: linear-gradient(90deg, rgba(26,22,20,.9) 0%, rgba(26,22,20,.62) 42%, rgba(26,22,20,.12) 78%), linear-gradient(180deg, rgba(26,22,20,.45), rgba(26,22,20,0) 30%, rgba(26,22,20,.6)) !important }
  .hero img[fetchpriority] { object-position: 70% 35% !important }
  .hero-hd { height: 84px !important; padding: 0 var(--g) !important }
  .hero-in { left: var(--g) !important; right: auto !important; top: auto !important; bottom: 200px; width: min(680px, 52vw); gap: 22px !important }
  .hero-in h1 { font-size: clamp(44px, 4.2vw, 60px) !important; line-height: 1.3 !important }
  .hero-in p { font-size: 17px !important; max-width: 560px }
  .hero-fl { left: var(--g) !important; right: auto !important; bottom: 56px !important; width: min(600px, 46vw) }

  /* 섹션: 가운데 1180 열, 제목 왼쪽 · 본문 오른쪽 */
  .s { padding-left: var(--g) !important; padding-right: var(--g) !important; padding-top: 112px !important }
  .s-flush { padding-left: calc(var(--g) - 18px) !important; padding-right: calc(var(--g) - 18px) !important; padding-top: 112px !important }
  .s-2col { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 6vw, 112px); align-items: start }
  .s-2col > .s-head { display: flex; flex-direction: column; gap: inherit; position: sticky; top: 56px }
  .s-2col > .s-body { display: flex; flex-direction: column; gap: inherit; min-width: 0 }
  .s h2 { font-size: clamp(30px, 2.6vw, 38px) !important }
  .s-dark .s-body a[href*="youtube.com"] { max-width: 560px }
  .s-dark { margin-top: 112px !important; padding-top: 96px !important; padding-bottom: 96px !important }
  .s-cta p { font-size: 42px !important }
  .s-cta { padding-top: 136px !important }

  /* 가로 카드: 넓은 화면에서는 한 줄에 채운다 */
  .rail { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto }
  .rail > * { width: auto !important; min-width: 0 }
  .rail img { width: 100% !important }
  .rail > a > span:first-child { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 }
  .s-body .rail { margin: 0 !important; padding: 0 !important }

  /* 전면 사진 */
  .s-fig { margin-top: 112px !important }
  .s-fig img { height: min(44vw, 560px) !important }
  .s-fig figcaption { left: var(--g) !important; bottom: 32px !important }
  .s-fig figcaption span:first-child { font-size: 20px !important }
  .s-fig figcaption span:last-child { font-size: 14px !important }

  /* 신청서 + 오시는 길 나란히 */
  .s-form { margin: 72px 0 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(48px, 6vw, 112px); align-items: start }
  .s-form .bk { max-width: none; padding: 36px 36px 30px }
  .s-form .visit { order: -1; margin: 0; position: sticky; top: 56px; padding: 40px; font-size: 15px }
  .s-form .visit-h { font-size: 26px }
  .s-foot { padding-top: 72px !important; padding-bottom: 72px !important; font-size: 13px !important }

  /* 하단 바 → 오른쪽 아래 떠 있는 버튼 */
  .lp-bar { left: auto !important; right: 28px !important; bottom: 24px; transform: none; width: auto; max-width: none; border-radius: 999px; padding: 8px !important; grid-template-columns: auto auto auto !important; box-shadow: 0 18px 44px rgba(26,22,20,.28) }
  .lp-bar > a:last-child { padding: 0 22px }
  .lp-bar.is-off { transform: translateY(140%) }
}