@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 930;
  font-style: normal;
  font-display: swap;
  src: url(fonts/pretendard-subset.woff2) format('woff2-variations')
}

:root {
  --i-t2: url(img/i-t2.webp);
  --i-ubud: url(img/i-ubud.webp);
  --i-seminyak: url(img/i-seminyak.webp);
  --i-nusadua: url(img/i-nusadua.webp);
  --i-jimbaran: url(img/i-jimbaran.webp);
  --i-s13: url(img/i-s13.webp);
}

:root {
  --g-svc1: url(img/g-svc1.webp);
  --g-svc2: url(img/g-svc2.webp);
  --g-svc3: url(img/g-svc3.webp);
  --g-svc4: url(img/g-svc4.webp);
  --g-svc5: url(img/g-svc5.webp);
  --g-ben_gift: url(img/g-ben_gift.webp);
  --g-ben_coupon: url(img/g-ben_coupon.webp);
  --g-ben_bag: url(img/g-ben_bag.webp);
  --g-ben_lounge: url(img/g-ben_lounge.webp);
  --v-rv_park: url(img/v-rv_park.webp);
  --v-rv_jung: url(img/v-rv_jung.webp);
  --v-rv_sita: url(img/v-rv_sita.webp);
  --v-rv_ilove: url(img/v-rv_ilove.webp);
  --b-r28: url(img/b-r28.webp);
  --b-r20: url(img/b-r20.webp);
  --b-r05: url(img/b-r05.webp);
  --m-r00: url(img/m-r00.webp);
  --t-r00: url(img/t-r00.webp);
  --m-r01: url(img/m-r01.webp);
  --t-r01: url(img/t-r01.webp);
  --m-r02: url(img/m-r02.webp);
  --t-r02: url(img/t-r02.webp);
  --m-r03: url(img/m-r03.webp);
  --t-r03: url(img/t-r03.webp);
  --m-r04: url(img/m-r04.webp);
  --t-r04: url(img/t-r04.webp);
  --m-r05: url(img/m-r05.webp);
  --t-r05: url(img/t-r05.webp);
  --m-r06: url(img/m-r06.webp);
  --t-r06: url(img/t-r06.webp);
  --m-r07: url(img/m-r07.webp);
  --t-r07: url(img/t-r07.webp);
  --m-r08: url(img/m-r08.webp);
  --t-r08: url(img/t-r08.webp);
  --m-r09: url(img/m-r09.webp);
  --t-r09: url(img/t-r09.webp);
  --m-r10: url(img/m-r10.webp);
  --t-r10: url(img/t-r10.webp);
  --m-r11: url(img/m-r11.webp);
  --t-r11: url(img/t-r11.webp);
  --m-r13: url(img/m-r13.webp);
  --t-r13: url(img/t-r13.webp);
  --m-r14: url(img/m-r14.webp);
  --t-r14: url(img/t-r14.webp);
  --m-r15: url(img/m-r15.webp);
  --t-r15: url(img/t-r15.webp);
  --m-r16: url(img/m-r16.webp);
  --t-r16: url(img/t-r16.webp);
  --m-r17: url(img/m-r17.webp);
  --t-r17: url(img/t-r17.webp);
  --m-r18: url(img/m-r18.webp);
  --t-r18: url(img/t-r18.webp);
  --m-r19: url(img/m-r19.webp);
  --t-r19: url(img/t-r19.webp);
  --m-r20: url(img/m-r20.webp);
  --t-r20: url(img/t-r20.webp);
  --m-r21: url(img/m-r21.webp);
  --t-r21: url(img/t-r21.webp);
  --m-r22: url(img/m-r22.webp);
  --t-r22: url(img/t-r22.webp);
  --m-r23: url(img/m-r23.webp);
  --t-r23: url(img/t-r23.webp);
  --m-r24: url(img/m-r24.webp);
  --t-r24: url(img/t-r24.webp);
  --m-r25: url(img/m-r25.webp);
  --t-r25: url(img/t-r25.webp);
  --m-r26: url(img/m-r26.webp);
  --t-r26: url(img/t-r26.webp);
  --m-r27: url(img/m-r27.webp);
  --t-r27: url(img/t-r27.webp);
  --m-r28: url(img/m-r28.webp);
  --t-r28: url(img/t-r28.webp);
  --m-r29: url(img/m-r29.webp);
  --t-r29: url(img/t-r29.webp);
  --m-r30: url(img/m-r30.webp);
  --t-r30: url(img/t-r30.webp);
  --m-r31: url(img/m-r31.webp);
  --t-r31: url(img/t-r31.webp);
  --i-hero2: url(img/i-hero2.webp);
  --i-hero2m: url(img/i-hero2m.webp);
}

/* Hallmark · macrostructure: Tiled Guide (photo-led, scan-first) · genre: editorial
 * 커버는 이전 매거진 커버 유지, 아래는 전부 사진 밴드 + 압축 타일.
 * 원칙: 보이는 글은 섹션당 2줄 이하, 긴 설명은 <details> 안으로(DOM 유지 → SEO).
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

:root {
  --paper: #FFFFFF;
  --paper-2: #F7F7F7;
  --ink: #15110D;
  --ink-2: #5B5349;
  --soft: #7A6F63;
  --rule: #E8E6E2;
  --gold: #8A672E;
  --gold-l: #C6A567;
  --wine: #7E3B2E;
  --tint: #F4F2EE;
  --f-disp: var(--f-sans);
  --f-ser: var(--f-sans);
  --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --navh: 54px;
}

* { box-sizing: border-box }
html, body { overflow-x: clip }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: calc(var(--navh) + 12px) }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-weight: 400; font-size: 15.5px; line-height: 1.85; word-break: keep-all; -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0 }
ul, ol { list-style: none }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.4; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; font-style: normal }
.ph { background-size: cover; background-position: center; background-repeat: no-repeat }
.num { font-variant-numeric: tabular-nums }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px }
@media (prefers-reduced-motion:reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}
.w { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.rv { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.rv.in { opacity: 1; transform: none }
.zm .ph { transform: scale(1.06); transition: transform 1.8s var(--ease) }
.zm.in .ph { transform: none }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

/* ───────── 커버 (유지) ───────── */
@media (max-width:620px) {
  .c-top .w { letter-spacing: .14em; gap: 10px }
  .c-top .w>span:nth-child(2) { display: none }
}

/* ───────── 버튼 ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 32px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; background: var(--ink); color: var(--paper); transition: transform .16s, background-color .2s }
.btn:active { transform: scale(.98) }
.btn.lt { background: #fff; color: var(--ink) }
.btn.o { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5) }
.btn.ol { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule) }
.btn.g { background: var(--wine); color: #fff; box-shadow: 0 10px 26px rgba(126, 59, 46, .28); min-width: min(100%, 300px) }
.btn.g:hover { background: #6E3126 }
.btn.g::after { content: "→"; font-size: 15px; transition: transform .18s }
.btn.g:hover::after { transform: translateX(3px) }
.btn.full { width: 100% }
.btn.sm { min-height: 46px; padding: 0 20px; font-size: 14px }

/* ───────── 퀵 내비 ───────── */
.qnav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule) }
.qnav .w { display: flex; align-items: center; gap: 8px; height: var(--navh) }
.qnav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 }
.qnav ul::-webkit-scrollbar { display: none }
.qnav li a { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--tint); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color .18s, color .18s }
.qnav li a .n { font-family: var(--f-disp); font-size: 11px; color: var(--gold) }
.qnav li a.on { background: var(--ink); color: var(--paper) }
.qnav li a.on .n { color: var(--gold-l) }
.qnav .cta { flex: none; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--wine); color: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap }
@media (max-width:760px) {
  .qnav .cta { display: none }
}

/* ───────── 섹션 공통 ───────── */
.sec { padding-block: clamp(44px, 5.6vw, 80px) }
.sec.tint { background: #F8F8F7 }
.hd { display: grid; gap: 12px; margin-bottom: clamp(20px, 2.6vw, 32px); max-width: 40ch }
@media (min-width:1000px) {
  .hd { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; row-gap: 10px }
  .hd .k { grid-column: 1; grid-row: 1; margin-bottom: 4px }
  .hd h2 { grid-column: 1; grid-row: 2 }
  .hd p { grid-column: 2; grid-row: 2; align-self: end; margin-bottom: 6px }
  .hd .more { grid-column: 2; grid-row: 3; margin-top: -2px }
}
.hd .k { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .24em; color: var(--gold); font-weight: 600 }
.hd .k i { font-family: var(--f-disp); font-size: 13px; font-style: normal }
.hd h2 { font-family: var(--f-sans); font-weight: 700; font-size: clamp(22px, 2.9vw, 36px); line-height: 1.38; letter-spacing: -.03em; max-width: 22ch; overflow-wrap: anywhere; min-width: 0 }
@media (min-width:1000px) {
  .hd h2 { max-width: none }
}
@media (min-width:880px) {
  .hd h2 { max-width: none }
}
.hd h2 em { font-style: normal; color: var(--wine) }
.hd p { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; max-width: 52ch }
.more { margin-top: 14px }
.more summary { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--soft); cursor: pointer; list-style: none; border-bottom: 1px solid var(--rule); padding-bottom: 3px }
.more summary::-webkit-details-marker { display: none }
.more summary::after { content: "＋"; font-size: 12px }
.more[open] summary::after { content: "－" }
.more .mx { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 2; max-width: 62ch }
.more .mx p+p { margin-top: .8em }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(24px, 3vw, 36px) }

/* ───────── 사진 밴드 ───────── */
.band { position: relative; height: clamp(230px, 30vw, 400px); overflow: hidden; display: flex; align-items: flex-end; color: #fff }
.band .ph { position: absolute; inset: 0 }
.band .ph.top { background-position: 50% 8% }
.band .ph.mid { background-position: 50% 80% }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 7, 5, .1), rgba(10, 7, 5, 0) 34%, rgba(10, 7, 5, .58)) }
.band .t { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(16px, 2.4vw, 26px) }
.band .t b { display: block; font-family: var(--f-sans); font-size: clamp(19px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.02em }
.band .t span { display: block; font-size: 12.5px; opacity: .88; margin-top: 4px; letter-spacing: .04em }

/* ───────── 타일 그리드 (선택 가이드) ───────── */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (min-width:860px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
}
.tile { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; color: #fff; display: flex; align-items: flex-end }
.tile .ph { position: absolute; inset: 0 }
.tile::after { content: ""; position: absolute; inset: 16% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(10, 7, 5, .5) 46%, rgba(10, 7, 5, .86)) }
.tile .b { position: relative; z-index: 1; padding: 16px; display: grid; gap: 5px }
.tile .n { font-family: var(--f-disp); font-size: 12px; opacity: .82 }
.tile h3 { font-family: var(--f-sans); font-size: clamp(18px, 2vw, 23px); font-weight: 700 }
.tile p { font-size: 12.5px; opacity: .9; line-height: 1.6 }

/* ───────── 아이콘 행 (가격 요소 / 서비스) ───────── */
.icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden }
@media (min-width:700px) {
  .icons { grid-template-columns: repeat(5, minmax(0, 1fr)) }
}
.icons.five4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (min-width:700px) {
  .icons.five4 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
}
.ic { background: var(--paper); padding: 20px 14px 18px; display: grid; gap: 7px; justify-items: center; text-align: center }
.sec.tint .ic { background: var(--paper-2) }
.ic svg { width: 26px; height: 26px; color: var(--gold); stroke-width: 1.4; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round }
.ic b { font-size: 14.5px; font-weight: 700 }
.ic span { font-size: 12px; color: var(--soft); line-height: 1.6 }

/* ───────── 티어 카드 ───────── */
.tiers { display: grid; gap: 12px }
@media (min-width:860px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
.tier { border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 2px rgba(21, 17, 13, .04), 0 12px 30px rgba(21, 17, 13, .06); display: grid; align-content: start }
.sec.tint .tier { background: #fff }
.tier .pic { aspect-ratio: 4/3; position: relative; overflow: hidden }
.tier .pic .ph { position: absolute; inset: 0 }
.tier .pic .bdg { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: var(--wine); color: #fff }
.tier .b { padding: 18px 20px 20px; display: grid; gap: 8px }
.tier h3 { font-family: var(--f-sans); font-weight: 700; font-size: 20px }
.tier .chips { display: flex; flex-wrap: wrap; gap: 5px }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--tint); padding: 6px 11px; border-radius: 999px }
.tier .pr { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--soft) }
.tier .pr b { display: block; font-family: var(--f-ser); font-size: 16px; color: var(--ink); font-weight: 400; margin-bottom: 3px }

/* ───────── 3단 비교 (여행방식) ───────── */
.ways { display: grid; gap: 10px }
@media (min-width:820px) {
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
}
.way { border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); padding: 22px 20px 24px; display: grid; gap: 10px; align-content: start }
.sec.tint .way { background: #fff; box-shadow: none }
.way.hl { box-shadow: inset 0 0 0 2px var(--wine) }
.way .top { display: flex; align-items: center; gap: 10px }
.way svg { width: 24px; height: 24px; color: var(--gold); stroke-width: 1.4; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round }
.way h3 { font-family: var(--f-sans); font-weight: 700; font-size: 20px }
.way .bdg { margin-left: auto; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--wine); color: #fff; white-space: nowrap }
.way .sub { font-size: 13.5px; font-weight: 700; color: var(--wine) }
.way ul { display: grid; gap: 7px; margin-top: 2px }
.way li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7 }
.way li i { font-style: normal; color: var(--gold); font-size: 12px; padding-top: 3px }
.note-line { margin-top: clamp(18px, 2.4vw, 26px); text-align: center; font-family: var(--f-sans); font-weight: 600; font-size: clamp(16px, 1.9vw, 21px); line-height: 1.8; color: var(--ink) }
.note-line em { font-style: normal; color: var(--wine) }

/* ───────── 가로 스크롤 레일 ───────── */
.rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; padding-inline: max(20px, env(safe-area-inset-left, 0px), calc((100vw - 1200px)/2 + 20px)); scroll-padding-inline: max(20px, env(safe-area-inset-left, 0px), calc((100vw - 1200px)/2 + 20px)) }
.rail::-webkit-scrollbar { display: none }
.rcard { flex: none; width: clamp(210px, 24vw, 290px); scroll-snap-align: start; position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; color: #fff; display: flex; align-items: flex-end }
.rcard .ph { position: absolute; inset: 0 }
.rcard::after { content: ""; position: absolute; inset: 18% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(10, 7, 5, .48) 46%, rgba(10, 7, 5, .88)) }
.rcard .b { position: relative; z-index: 1; padding: 16px; display: grid; gap: 6px; width: 100% }
.rcard h3 { font-family: var(--f-sans); font-size: 21px; font-weight: 700 }
.rcard .tags { display: flex; flex-wrap: wrap; gap: 5px }
.rcard .tags span { font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.rcard p { font-size: 12.5px; opacity: .9; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.rcard .add { justify-self: start; margin-top: 4px; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); white-space: nowrap; transition: background-color .18s, color .18s }
.rcard .add[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: none }
.rail-hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--soft); margin-top: 12px }
.rail-hint svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5 }

/* ───────── 2단 비교 (풀빌라 vs 리조트) ───────── */
.vs { display: grid; gap: 10px; margin-top: clamp(18px, 2.4vw, 28px) }
@media (min-width:760px) {
  .vs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
}
.vs-c { position: relative; border-radius: 16px; overflow: hidden; min-height: clamp(230px, 28vw, 330px); display: flex; align-items: flex-end; color: #fff }
.vs-c .ph { position: absolute; inset: 0 }
.vs-c::after { content: ""; position: absolute; inset: 20% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(10, 7, 5, .5) 44%, rgba(10, 7, 5, .88)) }
.vs-c .b { position: relative; z-index: 1; padding: 20px; display: grid; gap: 7px; width: 100% }
.vs-c h3 { font-family: var(--f-sans); font-weight: 700; font-size: 22px }
.vs-c .tags { display: flex; flex-wrap: wrap; gap: 5px }
.vs-c .tags span { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }

/* ───────── 일정 타임라인 ───────── */
.days { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; padding-inline: max(20px, env(safe-area-inset-left, 0px), calc((100vw - 1200px)/2 + 20px)); scroll-padding-inline: max(20px, env(safe-area-inset-left, 0px), calc((100vw - 1200px)/2 + 20px)) }
.days::-webkit-scrollbar { display: none }
.day { flex: none; width: clamp(170px, 19vw, 216px); scroll-snap-align: start; display: grid; gap: 0; border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 2px rgba(21, 17, 13, .04), 0 10px 24px rgba(21, 17, 13, .06) }
.sec.tint .day { background: #fff }
.day .pic { aspect-ratio: 4/3; position: relative; overflow: hidden }
.day .pic .ph { position: absolute; inset: 0 }
.day .pic .dn { position: absolute; left: 10px; top: 10px; z-index: 1; font-family: var(--f-disp); font-size: 12px; font-weight: 600; color: #fff; background: rgba(10, 7, 5, .46); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px }
.day .b { padding: 14px 15px 16px; display: grid; gap: 4px }
.day h3 { font-size: 15.5px; font-weight: 700 }
.day p { font-size: 12.5px; color: var(--soft); line-height: 1.6 }
.day.last { background: var(--tint); box-shadow: none; place-content: center; text-align: center; padding: 20px }
.sec.tint .day.last { background: var(--tint) }

/* ───────── 후기 플레이스홀더 ───────── */
.revs { display: grid; gap: 10px }
@media (min-width:760px) {
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
}
.rev { border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); padding: 22px 20px; display: grid; gap: 10px }
.sec.tint .rev { background: #fff; box-shadow: none }
.rev .who { display: flex; align-items: center; gap: 10px }
.rev .av { width: 38px; height: 38px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 13px; color: var(--soft) }
.rev .who b { font-size: 14.5px; font-weight: 700; display: block }
.rev .who span { font-size: 12px; color: var(--soft) }
.rev .ph-txt { display: grid; gap: 7px; margin-top: 2px }
.rev .ph-txt i { display: block; height: 9px; border-radius: 999px; background: var(--tint) }
.rev .ph-txt i:nth-child(2) { width: 88% }
.rev .ph-txt i:nth-child(3) { width: 62% }
.rev .meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px }
.rev .soon { font-size: 12.5px; color: var(--soft); margin-top: 4px }

/* ───────── 혜택 ───────── */
.bens { display: grid; gap: 10px }
@media (min-width:820px) {
  .bens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
}
.ben { border-radius: 16px; padding: 24px 22px 26px; display: grid; gap: 9px; align-content: start; background: #fff; box-shadow: 0 1px 2px rgba(21, 17, 13, .04), 0 12px 30px rgba(21, 17, 13, .06) }
.ben .n { font-family: var(--f-disp); font-size: 20px; color: var(--gold) }
.ben h3 { font-family: var(--f-sans); font-weight: 700; font-size: 19px }
.ben .hl { font-size: 15.5px; font-weight: 700; color: var(--wine) }
.ben .todo { font-size: 12.5px; color: var(--soft); background: var(--tint); padding: 9px 12px; border-radius: 10px; line-height: 1.7 }
.ben.dark { background: #FBF1EE; color: var(--ink); box-shadow: inset 0 0 0 1.5px #EBD3CC }
.ben.dark .hl { color: var(--wine) }
.ben.dark .todo { background: #fff; color: var(--ink-2) }
.ben.dark .n { color: var(--wine) }

/* ───────── 폼 ───────── */
.form-sec { background: #F6F5F2; color: var(--ink); padding-block: clamp(48px, 6.4vw, 92px) }
.form-sec .hd h2 { color: var(--ink) }
.form-sec .hd .k { color: var(--gold) }
.form-sec .hd p { color: var(--ink-2) }
.form-sec .w { display: grid; gap: clamp(26px, 3.6vw, 56px) }
@media (min-width:940px) {
  .form-sec .w { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: start }
}
.fdates { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px }
.fdates span { font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--wine); box-shadow: 0 1px 2px rgba(21, 17, 13, .06) }
.faddr { margin-top: 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.95 }
.faddr a { border-bottom: 1px solid var(--rule) }
.card { background: #fff; color: var(--ink); border-radius: 20px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 1px 2px rgba(21, 17, 13, .05), 0 18px 44px rgba(21, 17, 13, .08) }
.f { display: grid; gap: 18px }
.fld { display: grid }
.fld .lb { display: flex; align-items: baseline; gap: 7px; font-size: 13px; font-weight: 700; margin-bottom: 9px }
.fld .lb em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--wine) }
.fld .lb .opt { color: var(--soft); font-weight: 500 }
.inp { width: 100%; height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--rule); background: #fff; font: inherit; font-size: 16px; color: var(--ink) }
.inp:focus { outline: 0; border-color: var(--ink) }
.inp:disabled { background: var(--tint); color: var(--soft) }
.fld.bad .inp { border-color: var(--wine) }
.err { display: none; font-size: 12.5px; color: var(--wine); font-weight: 600; margin-top: 6px }
.fld.bad .err { display: block }
.dts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
@media (max-width:430px) {
  .dts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.dts label { position: relative }
.dts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.dts span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; border-radius: 12px; background: var(--tint); font-family: var(--f-disp); font-size: 21px; font-weight: 600; transition: background-color .18s, color .18s }
.dts span small { font-family: var(--f-sans); font-size: 11px; font-weight: 600; color: var(--soft); margin-top: 2px; letter-spacing: .06em }
.dts input:checked+span { background: var(--ink); color: var(--paper) }
.dts input:checked+span small { color: rgba(255, 253, 248, .62) }
.chips-f { display: flex; flex-wrap: wrap; gap: 6px }
.chips-f label { position: relative }
.chips-f input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.chips-f span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--tint); font-size: 13.5px; font-weight: 600; transition: background-color .18s, color .18s }
.chips-f input:checked+span { background: var(--ink); color: var(--paper) }
.chips-f input:disabled+span { background: var(--wine); color: #fff; opacity: 1 }
.chip-note { font-size: 12.5px; color: var(--soft); margin-top: 9px; min-height: 1.2em }
.chk { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin-top: 10px; cursor: pointer }
.chk input { width: 18px; height: 18px; accent-color: var(--wine); flex: none }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.8 }
.agree input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--wine); flex: none }
.agree a { border-bottom: 1px solid var(--rule); color: var(--soft) }
.priv { margin-top: 9px; font-size: 12px; color: var(--soft); background: var(--tint); border-radius: 10px; padding: 11px 13px; line-height: 1.75 }
.sub-note { text-align: center; font-size: 12.5px; color: var(--soft) }
.f .bag { font-size: 13px; color: var(--ink-2) }
.f .bag b { color: var(--wine) }
.done { display: none; text-align: center; padding-block: 14px }
.f.ok .fset { display: none }
.f.ok .done { display: block }
.done .ok { width: 50px; height: 50px; border-radius: 50%; background: var(--tint); color: var(--wine); display: grid; place-items: center; margin: 0 auto 14px }
.done .ok svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2 }
.done h3 { font-family: var(--f-sans); font-weight: 700; font-size: 22px }
.done p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.95 }
.done .row { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap }

/* ───────── 오시는 길 ───────── */
.loc-grid { display: grid; gap: 12px }
@media (min-width:900px) {
  .loc-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) }
}
.map { position: relative; display: block; border-radius: 16px; overflow: hidden; min-height: clamp(230px, 26vw, 320px); background: #E9E0CF }
.map svg { position: absolute; inset: 0; width: 100%; height: 100% }
.map .pin { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 7px }
.map .pin b { background: var(--ink); color: var(--paper); font-size: 13.5px; padding: 9px 14px; border-radius: 999px; white-space: nowrap; font-weight: 600 }
.map .pin i { width: 13px; height: 13px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 6px rgba(126, 59, 46, .2) }
.map .open { position: absolute; right: 14px; bottom: 14px; font-size: 13px; font-weight: 700; background: #fff; padding: 8px 13px; border-radius: 999px }
.info { border-radius: 16px; background: var(--paper-2); padding: 24px 22px }
.sec.tint .info { background: #fff }
.info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; font-size: 14.5px }
.info dt { font-size: 12px; font-weight: 700; color: var(--soft); padding-top: 2px }
.info dd { line-height: 1.8 }
.info .row { display: flex; gap: 7px; margin-top: 20px; flex-wrap: wrap }
footer { border-top: 1px solid var(--rule); padding-block: 30px calc(96px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; color: var(--soft); line-height: 2 }
footer b { display: block; font-family: var(--f-ser); font-size: 15px; color: var(--ink); margin-bottom: 6px }
footer .lk { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap }
footer a { border-bottom: 1px solid var(--rule) }
.fab { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, calc(100% + 30px)); z-index: 60; display: flex; gap: 7px; align-items: center; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 14px 34px rgba(21, 17, 13, .3); transition: transform .4s var(--ease); max-width: calc(100% - 20px) }
.fab.on { transform: translate(-50%, 0) }
.fab .t { font-size: 13px; white-space: nowrap }
.fab .t b { font-family: var(--f-disp); color: var(--gold-l); font-size: 15px; font-weight: 600 }
.fab .go { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--wine); color: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap }
@media (min-width:980px) {
  .fab { left: auto; right: max(24px, env(safe-area-inset-right, 0px)); transform: translate(0, calc(100% + 30px)) }
  .fab.on { transform: translate(0, 0) }
}
@media (min-width:1180px) {
  .rail-hint.only-m { display: none }
}
@media (min-width:940px) {
  .form-sec .side { position: sticky; top: calc(var(--navh) + 20px) }
}
.rev .ph-note { font-size: 12px; color: var(--soft); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule) }
.ben .todo small { display: block; font-size: 11.5px; margin-top: 4px; opacity: .85 }
.sec .cta-row { margin-top: clamp(22px, 2.8vw, 34px) }

/* --- touch targets (>=44px) --- */
.more>summary { min-height: 44px; display: flex; align-items: center }
.rcard .add { min-height: 44px }
#privTog { padding: 0; margin: 0; white-space: nowrap; display: inline }
footer .lk a { display: inline-flex; align-items: center; min-height: 44px }
footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) }
@media (min-width:980px) {
  footer { padding-bottom: clamp(40px, 4vw, 60px) }
}
.faddr a, .info a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px }
.chk { min-height: 44px }
.agree { min-height: 44px; padding-block: 4px }

/* ---------- cover ---------- */
.cover { position: relative; min-height: min(104svh, 860px); display: flex; flex-direction: column; color: #fff; overflow: hidden; isolation: isolate }
.cover .m-ph { position: absolute; inset: 0; background-image: var(--i-hero2m); background-position: 50% 36%; background-size: cover; z-index: -2 }
@media (min-width:880px) {
  .cover .m-ph { background-image: var(--i-hero2); background-position: 50% 58% }
}
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 11, 6, .28), rgba(18, 11, 6, .06) 30%, rgba(18, 11, 6, .1) 56%, rgba(18, 11, 6, .5)), linear-gradient(98deg, rgba(18, 11, 6, .5), rgba(18, 11, 6, .24) 34%, rgba(18, 11, 6, .04) 62%, rgba(18, 11, 6, 0) 78%) }
.c-top { padding-top: max(14px, env(safe-area-inset-top, 0px)) }
.c-top .w { display: flex; align-items: center; gap: 10px; min-height: 52px }
.c-top .bd { font-size: 15px; font-weight: 800; letter-spacing: -.01em }
.c-top .sub { font-size: 12px; opacity: .78; letter-spacing: .01em }
@media (max-width:560px) {
  .c-top .sub { display: none }
}
.c-top .kk { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); font-size: 13px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.c-mid { flex: 1; display: flex; align-items: flex-end; padding-block: clamp(26px, 5vw, 56px) clamp(26px, 6vw, 70px) }
@media (min-width:880px) {
  .c-mid { align-items: center }
}
.c-mid .w { width: 100% }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); font-size: clamp(12px, 1.4vw, 13.5px); font-weight: 700; letter-spacing: -.01em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.cover h1 { margin-top: clamp(14px, 2vw, 20px); font-family: var(--f-sans); font-weight: 800; font-size: clamp(40px, 8.2vw, 88px); line-height: 1.1; letter-spacing: -.035em; text-shadow: 0 2px 28px rgba(16, 8, 4, .4); overflow-wrap: anywhere; min-width: 0 }
.cover h1 em { font-style: normal; color: #F4D199 }
.cover .lead { margin-top: clamp(12px, 1.6vw, 18px); font-family: var(--f-ser); font-size: clamp(15px, 1.8vw, 20px); line-height: 1.72; opacity: .94; text-shadow: 0 1px 14px rgba(16, 8, 4, .4) }
.dates { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: clamp(20px, 2.8vw, 32px) }
.dates .d { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 22px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 10px 26px rgba(16, 8, 4, .26) }
.dates .d b { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; letter-spacing: -.02em; line-height: 1 }
.dates .d i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--wine) }
.dates .enc { display: flex; flex-direction: column; justify-content: center; padding: 9px 16px; border-radius: 14px; font-size: 11.5px; line-height: 1.5; letter-spacing: .02em; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.dates .enc b { font-size: 13.5px; font-weight: 700 }
.cover .place { margin-top: 12px; font-size: 13.5px; opacity: .9 }
.c-cta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(20px, 2.6vw, 28px) }
.c-cta .btn { flex: 0 0 auto; min-width: 232px; justify-content: center }
.cover .meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; opacity: .88; line-height: 1.7 }
.cover .meta span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere }
.cover .meta b { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; background: var(--wine); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; opacity: 1 }
@media (max-width:560px) {
  .cover h1 { font-size: clamp(36px, 11vw, 52px) }
  .c-cta { display: grid; grid-template-columns: 1fr }
  .c-cta .btn { min-width: 0; width: 100% }
}

/* ---------- reviews (real) ---------- */
.rev .txt { font-size: 14px; line-height: 1.85; color: var(--ink-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden }
.rev .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px }
.rev .tags span { font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--ink-2) }
.rev .stay { font-size: 12.5px; color: var(--soft); padding-top: 12px; border-top: 1px solid var(--rule) }
.rev .lnk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12.5px; font-weight: 700; color: var(--wine) }
.rev .lnk::after { content: "\2197"; font-size: 12px }
.rev { display: grid; align-content: start }
.rev .stay { align-self: end }
.rev .txt { -webkit-line-clamp: 4 }

/* --- 품평회 반영: 터치 타깃·대비 --- */
#destChips label { min-height: 44px }
.qnav li a { min-height: 44px }
.ic span { color: #6F655A }
.err { display: none }
.bad .err { display: block }

/* ===== 모바일 압축 (품평회 반영) ===== */
@media (max-width:759px) {
  /* 가격 3카드 -> 가로 레일 */
  .tiers { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; padding-bottom: 4px }
  .tiers::-webkit-scrollbar { display: none }
  .tier { flex: 0 0 82vw; scroll-snap-align: start }
  /* 여행방식 3카드 -> 탭 */
  .waytabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--tint); margin-bottom: 12px }
  .waytabs button { flex: 1; min-height: 44px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: none; transition: background-color .18s, color .18s }
  .waytabs button[aria-selected="true"] { background: var(--ink); color: var(--paper) }
  .ways .way { display: none }
  .ways .way.on { display: grid }
  /* 후기 4카드 -> 가로 레일 */
  .revs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; padding-bottom: 4px }
  .revs::-webkit-scrollbar { display: none }
  .rev { flex: 0 0 84vw; scroll-snap-align: start }
  .rev .txt { -webkit-line-clamp: 4 }
  /* 서비스 5카드 -> 2열 작은 카드 */
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .svc .b { padding: 11px 12px 13px; gap: 3px }
  .svc .n { display: none }
  .svc h3 { font-size: 14.5px }
  .svc p { display: none }
  .svcs .svc:last-child { grid-column: 1/-1 }
  .svcs .svc:last-child .ph { aspect-ratio: 3/1.4 }
  .svcs .svc:last-child p { display: block; font-size: 13px }
  /* 자세히 보기는 모바일에서 더 작게 */
  .more>summary { min-height: 44px; font-size: 12px }
}
@media (min-width:760px) {
  .waytabs { display: none }
}

/* ---------- 후기 카드: 사진 ---------- */
.rev { padding: 0; overflow: hidden; grid-template-rows: auto 1fr }
.rev .rp { aspect-ratio: 3/2; background-size: cover; background-position: 50% 50% }
.rev .rb { padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; grid-template-rows: auto auto auto 1fr auto }
.rev .rb .stay { align-self: end }
@media (max-width:759px) {
  .rev .rp { aspect-ratio: 16/10 }
}

/* ---------- 가로 레일: 드래그 커서 + 화살표 ---------- */
@media (hover:hover) and (pointer:fine) {
  .rail, .days, .tiers, .revs, .thumbs { cursor: grab }
  .rail.grab, .days.grab, .tiers.grab, .revs.grab, .thumbs.grab { cursor: grabbing; scroll-behavior: auto }
  .grab>* { user-select: none }
  .grab .ph { pointer-events: none }
}
.rail:focus-visible, .days:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 14px }
.rail-nav { display: none; gap: 8px; max-width: 1200px; margin: 12px auto 0; padding-inline: 20px }
.rail-nav.show { display: flex }
.rnav { width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(21, 17, 13, .06), 0 8px 20px rgba(21, 17, 13, .1); transition: opacity .18s }
.rnav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.rnav[disabled] { opacity: .3 }
@media (max-width:759px) {
  .rail-nav { display: none !important }
}

/* ================= 예약 폼 리디자인 ================= */
.form-sec { background: #fff; padding-block: clamp(40px, 6vw, 88px) }
.form-sec .w { display: block }
.fwrap { display: grid; gap: 14px; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(21, 17, 13, .05), 0 24px 60px rgba(21, 17, 13, .10) }
@media (min-width:980px) {
  .fwrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 }
}
.fside { position: relative; min-height: 260px; color: #fff; display: flex; align-items: flex-end; isolation: isolate }
.fside .ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 60% }
.fside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 12, 6, .08), rgba(20, 12, 6, .3) 45%, rgba(20, 12, 6, .82)) }
.fs-in { padding: clamp(24px, 3.4vw, 44px); width: 100% }
.fs-k { font-size: 11px; letter-spacing: .24em; font-weight: 700; color: #F4D199 }
.fside h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.03em; margin-top: 8px; font-weight: 800; text-shadow: 0 2px 20px rgba(0, 0, 0, .35) }
.fs-dates { display: flex; gap: 8px; margin-top: 18px }
.fs-dates span { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(0, 0, 0, .22) }
.fs-dates b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1 }
.fs-dates i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--wine) }
.fs-ad { margin-top: 12px; font-size: 13.5px; opacity: .9 }
.fs-pts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px }
.fs-pts li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600 }
.fs-pts svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .22); stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
@media (min-width:980px) {
  .fside { min-height: 100% }
  .fside::after { background: linear-gradient(180deg, rgba(20, 12, 6, .04), rgba(20, 12, 6, .22) 40%, rgba(20, 12, 6, .84)) }
}
@media (max-width:979px) {
  .fs-pts { display: none }
  .fside { min-height: 230px }
}
.fcard { border-radius: 0; box-shadow: none; padding: clamp(22px, 3.4vw, 44px) }
.fhead { margin-bottom: 18px }
.fhead h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em }
.fhead p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px }
.fset { display: grid; gap: 18px }
.f2 { display: grid; gap: 18px }
@media (min-width:640px) {
  .f2 { grid-template-columns: 1fr 1fr; gap: 14px }
}
.fld { display: grid; gap: 7px }
.lb { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px }
.lb em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--wine); padding: 2px 7px; border-radius: 999px; background: #FBF1EE }
.lb .opt { font-size: 11.5px; font-weight: 500; color: var(--soft) }
.inp { width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 15.5px; box-shadow: inset 0 0 0 1.5px #E5E3DF; transition: box-shadow .16s }
.inp::placeholder { color: #B5AFA6 }
.inp:focus { outline: none; box-shadow: inset 0 0 0 2px var(--wine), 0 0 0 4px rgba(126, 59, 46, .12) }
.inp:disabled { background: #F6F5F2; color: var(--soft) }
.bad .inp { box-shadow: inset 0 0 0 2px #B3473A }
.tel_wrap { display: flex; align-items: center; gap: 8px; }
.err { font-size: 12.5px; color: #B3473A }
.dts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.dts label { position: relative }
.dts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.dts span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #E5E3DF; transition: background-color .16s, box-shadow .16s, color .16s }
.dts span b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 }
.dts span small { font-size: 12px; font-weight: 600; color: var(--soft) }
.dts input:focus-visible+span { box-shadow: inset 0 0 0 2px var(--wine), 0 0 0 4px rgba(126, 59, 46, .12) }
.dts input:checked+span { background: var(--wine); color: #fff; box-shadow: none }
.dts input:checked+span small { color: rgba(255, 255, 255, .8) }
.wedrow { display: grid; gap: 10px }
@media (min-width:640px) {
  .wedrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center }
}
.chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 12px; background: #F6F5F2; font-size: 13.5px; color: var(--ink-2); cursor: pointer; margin: 0 }
.chk input { width: 18px; height: 18px; accent-color: var(--wine); margin: 0 }
.chips-f { display: flex; flex-wrap: wrap; gap: 7px }
.chips-f label { position: relative; cursor: pointer }
.chips-f input { position: absolute; inset: 0; opacity: 0; margin: 0 }
.chips-f span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #E5E3DF; font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: all .16s }
.chips-f input:checked+span { background: var(--ink); color: #fff; box-shadow: none }
.chips-f label.fixed span { background: var(--wine); color: #fff; box-shadow: none }
.chips-f input:disabled:not(:checked)+span { opacity: .4 }
.chips-f input:focus-visible+span { box-shadow: inset 0 0 0 2px var(--wine), 0 0 0 4px rgba(126, 59, 46, .12) }
.chip-note { font-size: 12.5px; color: var(--soft) }
.bag { font-size: 13px; padding: 11px 14px; border-radius: 12px; background: #F6F5F2; color: var(--ink-2) }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; padding: 12px 14px; border-radius: 12px; background: #F6F5F2 }
.agree input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--wine); flex: none }
.agree a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rule) }
.priv { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule) }
.btn.full { width: 100%; min-height: 62px; font-size: 17px; border-radius: 16px }
.sub-note { text-align: center; font-size: 12.5px; color: var(--soft); margin-top: -6px }
#destChips label { min-height: 40px }

/* ================= 커버 단순화: 버튼 제거, 날짜는 우하단 텍스트 ================= */
.c-date { position: relative; z-index: 1; padding-bottom: clamp(26px, 4vw, 48px) }
.c-date .w { display: flex; flex-direction: column; align-items: flex-end; text-align: right }
.cd { display: flex; align-items: baseline; gap: 12px; line-height: 1 }
.cd b { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.04em; text-shadow: 0 2px 24px rgba(16, 8, 4, .35) }
.cd b span { font-weight: 500; margin: 0 .04em; opacity: .85 }
.cd i { font-style: normal; font-size: clamp(16px, 1.8vw, 24px); font-weight: 700; color: #F4D199; text-shadow: 0 1px 12px rgba(16, 8, 4, .4) }
.cd-ad { margin-top: 10px; font-size: clamp(13px, 1.1vw, 15px); opacity: .9; text-shadow: 0 1px 12px rgba(16, 8, 4, .4) }
.cover .lead { max-width: 34ch }
@media (min-width:880px) {
  .c-mid { align-items: center; padding-block: clamp(26px, 5vw, 56px) 0 }
  .cover { min-height: min(96svh, 820px) }
}

/* ================= 모바일 보완 v14 ================= */

/* 커버: 모바일 전용 세로 사진 한 장, 글은 위쪽 하늘, 날짜는 우하단 */
@media (max-width:879px) {
  .cover { min-height: min(100svh, 860px) }
  .cover .m-ph { background-image: var(--i-hero2m); background-position: 50% 50% }
  .cover::after { background: linear-gradient(180deg, rgba(18, 11, 6, .52), rgba(18, 11, 6, .22) 34%, rgba(18, 11, 6, 0) 52%, rgba(18, 11, 6, .1) 74%, rgba(18, 11, 6, .6)) }
  .c-mid { align-items: flex-start; padding-block: 18px 0 }
  .cover h1 { font-size: clamp(36px, 10.5vw, 50px); line-height: 1.1 }
  .cover .lead { font-size: 14.5px; line-height: 1.65 }
  .cover .lead br { display: none }
  .c-date { padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)) }
  .cd b { font-size: clamp(42px, 12.5vw, 56px) }
  .cd i { font-size: 16px }
  .cd-ad { font-size: 13px }
}

/* 탭 메뉴: 모바일은 5개 균등 폭, 스크롤 없이 한 줄 */
@media (max-width:759px) {
  .qnav .w { padding-inline: 12px; gap: 0 }
  .qnav ul { gap: 4px; overflow: visible }
  .qnav li { flex: 1 1 0; min-width: 0 }
  .qnav li a { justify-content: center; gap: 0; padding: 0 4px; font-size: 12.5px; min-height: 40px; border-radius: 12px }
  .qnav li a .n { display: none }
}

/* 가격 5요소: 모바일은 5줄 리스트(빈 칸 없음) */
@media (max-width:699px) {
  .icons { grid-template-columns: 1fr; gap: 0; background: none; border: 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule) }
  .icons .ic { grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; justify-items: start; align-items: center; text-align: left; padding: 14px 18px; border-top: 1px solid var(--rule) }
  .icons .ic:first-child { border-top: 0 }
  .icons .ic svg { grid-row: 1/3; width: 30px; height: 30px; justify-self: center }
  .icons .ic b { font-size: 15.5px }
  .icons .ic span { font-size: 12.5px; line-height: 1.5 }
  .icons .ic span br { display: none }
  .icons .ic span .sep { display: inline; font-style: normal }
}
}

/* ================= v15: 상단 브랜드줄 제거 · 타이틀 위로 · 카톡 플로팅 ================= */
.c-mid { align-items: flex-start; padding-top: max(40px, env(safe-area-inset-top, 0px), 8vh) }
@media (min-width:880px) {
  .c-mid { align-items: flex-start; padding-block: clamp(72px, 11vh, 130px) 0 }
}
@media (max-width:879px) {
  .c-mid { padding-block: max(40px, calc(env(safe-area-inset-top, 0px) + 28px)) 0 }
}
.kfab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 61; display: flex; align-items: center; gap: 8px; transition: bottom .4s var(--ease), transform .18s }
.kfab .ki { width: 56px; height: 56px; border-radius: 999px; background: #FEE500; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .1) }
.kfab .ki svg { width: 28px; height: 28px; fill: #191919 }
.kfab .kl { display: none; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(21, 17, 13, .14) }
.kfab:hover { transform: translateY(-2px) }
@media (hover:hover) {
  .kfab:hover .kl { display: inline-flex }
}
@media (max-width:979px) {
  .fabwrap.on~.kfab { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 68px) }
}
@media (min-width:980px) {
  .kfab .kl { display: inline-flex }
  .fab { right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 72px); transform: translate(0, calc(100% + 120px)) }
  .fab.on { transform: translate(0, 0) }
  .kfab { right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)) }
}
@media (max-width:879px) {
  .c-date { padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 76px) }
}

/* ================= v16: 모바일 섹션 배경 구분 ================= */
.ic .sep { display: none }
@media (max-width:879px) {
  .sec.tint { background: #F3EEE6 }
  .sec.tint .ic { background: #fff }
  .sec.tint .icons { box-shadow: inset 0 0 0 1px #E6DFD3 }
  .sec.tint .ic { border-top-color: #E6DFD3 }
  .sec.tint .tier, .sec.tint .rev, .sec.tint .info, .sec.tint .day { box-shadow: 0 1px 2px rgba(21, 17, 13, .04), 0 10px 24px rgba(21, 17, 13, .06) }
  .sec.tint .day.last { background: #FBF8F3 }
  #why { background: #FFFFFF }
  #benefit { background: #F7EFEA }
  #benefit .ic { background: #fff }
}

/* ================= v19: 날짜·장소 텍스트 (배경 없음, 같은 크기) ================= */
.c-date { position: relative; z-index: 1; padding-bottom: clamp(26px, 4vw, 48px) }
.c-date .w { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 6px }
.cd { display: flex; align-items: baseline; gap: 12px; line-height: 1 }
.cd b { font-size: clamp(40px, 5.6vw, 80px); font-weight: 800; letter-spacing: -.04em; text-shadow: 0 2px 24px rgba(16, 8, 4, .4) }
.cd b span { font-weight: 500; margin: 0 .04em; opacity: .85 }
.cd i { font-style: normal; font-size: clamp(16px, 1.8vw, 24px); font-weight: 700; color: #F4D199; text-shadow: 0 1px 12px rgba(16, 8, 4, .4) }
.cd-pl { line-height: 1.1; margin: 0 }
.cd-pl b { font-size: clamp(28px, 4.2vw, 60px); font-weight: 800; letter-spacing: -.035em; text-shadow: 0 2px 24px rgba(16, 8, 4, .4) }
.cd-pl em { font-style: normal; color: #F4D199 }
.cd-ad { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: clamp(14px, 1.2vw, 18px); font-weight: 600; opacity: .95; text-shadow: 0 1px 12px rgba(16, 8, 4, .45) }
.cd-ad svg { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
@media (max-width:879px) {
  .c-mid { padding-block: max(84px, calc(env(safe-area-inset-top, 0px) + 72px), 12svh) 0 }
  .c-date { padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 76px) }
  .cd b { font-size: clamp(40px, 12vw, 54px) }
  .cd i { font-size: 16px }
  .cd-pl b { font-size: clamp(26px, 7.8vw, 36px) }
  .cd-ad { font-size: 14px }
}

/* ================= v20: 제목 > 날짜 > 장소 위계 ================= */
.cover h1 { font-size: clamp(44px, 8.8vw, 104px); line-height: 1.06 }
.cover .lead { font-size: clamp(16px, 1.9vw, 22px) }
.cd b { font-size: clamp(36px, 4.6vw, 64px) }
.cd i { font-size: clamp(15px, 1.5vw, 20px) }
.cd-pl b { font-size: clamp(24px, 3.3vw, 46px) }
.cd-ad { font-size: clamp(13px, 1.1vw, 16px) }
@media (max-width:879px) {
  .cover h1 { font-size: clamp(44px, 13.6vw, 62px); line-height: 1.06; margin-top: 12px }
  .cover .lead { font-size: 15.5px }
  .cd b { font-size: clamp(34px, 10vw, 44px) }
  .cd i { font-size: 15px }
  .cd-pl b { font-size: clamp(22px, 6.6vw, 30px) }
  .cd-ad { font-size: 13.5px }
}

/* ================= v22: 숨통 — 섹션·제목·카드 간격 확대 ================= */
.sec { padding-block: clamp(72px, 9vw, 136px) }
.hd { margin-bottom: clamp(32px, 4.2vw, 56px); gap: 14px }
.hd p { margin-top: 2px }
.more { margin-top: 18px }
.cta-row { margin-top: clamp(36px, 4.4vw, 60px) }
.sec .cta-row { margin-top: clamp(36px, 4.4vw, 60px) }
.tiers, .ways, .revs, .bens, .svcs { gap: 16px }
@media (min-width:860px) {
  .tiers { gap: 20px }
}
@media (min-width:820px) {
  .ways { gap: 20px }
}
@media (min-width:760px) {
  .revs { gap: 20px }
}
.days { gap: 14px }
.waytabs { margin-bottom: 20px }
.form-sec { padding-block: clamp(72px, 9vw, 136px) }
@media (max-width:759px) {
  .sec { padding-block: 64px }
  .hd { margin-bottom: 28px }
  .tiers, .revs { gap: 12px }
  .svcs { gap: 10px }
  .cta-row { margin-top: 32px }
}

/* ================= v23: 유럽 박람회 보조 CTA (04 일정부터 등장) ================= */
.fabwrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none }
.fabwrap>* { pointer-events: auto }
.fab { position: fixed }

/* PC: 바 안 고스트 버튼 */
.fab .eu { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--paper); font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32); transition: background-color .18s, box-shadow .18s; overflow: hidden; max-width: 0; padding-inline: 0; opacity: 0 }
.fab .eu svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.fab .eu:hover { background: rgba(255, 255, 255, .1) }
@media (min-width:980px) {
  .fab .eu { display: inline-flex; transition: max-width .45s var(--ease), padding .45s var(--ease), opacity .3s }
  .fabwrap.eu-on .fab .eu { max-width: 240px; padding-inline: 16px; opacity: 1 }
}

/* 모바일: 바 위 얇은 띠 */
.eu-strip { position: fixed; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 64px); transform: translate(-50%, calc(100% + 90px)); display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 10px 28px rgba(21, 17, 13, .18), inset 0 0 0 1px var(--rule); font-size: 12.5px; white-space: nowrap; max-width: calc(100% - 20px); transition: transform .45s var(--ease) .08s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.eu-strip .es-k { color: var(--soft); font-weight: 500 }
.eu-strip .es-t { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--wine) }
.eu-strip .es-t svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.fabwrap.eu-on .eu-strip { transform: translate(-50%, 0) }
@media (max-width:979px) {
  .fabwrap.on.eu-on~.kfab { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 116px) }
}
@media (max-width:379px) {
  .eu-strip .es-k { display: none }
}
@media (min-width:980px) {
  .eu-strip { display: none }
}

/* ================= v24: PC 메인 임팩트 ================= */

/* 1) 사진 천천히 줌 (Ken Burns) */
@keyframes kb {
  from { transform: scale(1.06) translate(1.2%, 0.6%) }
  to { transform: scale(1) translate(0, 0) }
}
@media (min-width:880px) {
  .cover .m-ph { transform-origin: 60% 45%; animation: kb 14s cubic-bezier(.2, .6, .2, 1) both; will-change: transform }
}

/* 2) 따뜻한 빛 + 비네트로 깊이 */
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 78% 18%, rgba(255, 214, 150, .28), rgba(255, 214, 150, 0) 70%), radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, 0) 55%, rgba(10, 6, 3, .35) 100%) }

/* 3) 제목: 더 크게 + 박람회 아래 금색 획 */
@media (min-width:880px) {
  .cover h1 { font-size: clamp(56px, 9.6vw, 120px); line-height: 1.02; letter-spacing: -.04em }
}
.cover h1 em.ul { position: relative; display: inline-block; padding-bottom: .06em }
.cover h1 em.ul .stroke { position: absolute; left: -2%; right: -2%; bottom: -.06em; width: 104%; height: .22em; overflow: visible }
.cover h1 em.ul .stroke path { fill: none; stroke: #F4D199; stroke-width: 9; stroke-linecap: round; opacity: .9; stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.1s cubic-bezier(.3, .7, .2, 1) .9s forwards }
@keyframes draw {
  to { stroke-dashoffset: 0 }
}

/* 4) 등장 애니메이션(순차) */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px) }
  to { opacity: 1; transform: none }
}
.cover .eyebrow, .cover h1, .cover .lead, .cover .cd, .cover .cd-pl, .cover .cd-ad { opacity: 0; animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards }
.cover .eyebrow { animation-delay: .15s }
.cover h1 { animation-delay: .3s }
.cover .lead { animation-delay: .5s }
.cover .cd { animation-delay: .65s }
.cover .cd-pl { animation-delay: .78s }
.cover .cd-ad { animation-delay: .9s }

/* 5) 스크롤 유도 */
.c-scroll { position: absolute; left: 50%; bottom: clamp(18px, 2.6vw, 34px); transform: translateX(-50%); z-index: 2; width: 28px; height: 46px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); display: none; justify-content: center; opacity: 0; animation: rise .9s ease 1.3s forwards }
.c-scroll span { width: 3px; height: 9px; border-radius: 3px; background: #fff; margin-top: 8px; animation: wheel 1.8s ease-in-out 1.6s infinite }
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1 }
  70% { transform: translateY(16px); opacity: 0 }
  100% { transform: translateY(0); opacity: 0 }
}
@media (min-width:880px) {
  .c-scroll { display: flex }
}
@media (prefers-reduced-motion:reduce) {
  .cover .eyebrow, .cover h1, .cover .lead, .cover .cd, .cover .cd-pl, .cover .cd-ad, .c-scroll { opacity: 1 }
  .cover h1 em.ul .stroke path { stroke-dashoffset: 0 }
}

/* ================= v25: 메인 A안 — 신뢰 숫자 + '발리 신혼여행' 강조 ================= */
.cover h1 em { color: #F4D199 }
.cover h1 em.ul .stroke { height: .18em; bottom: -.04em }
.cover h1 em.ul .stroke path { stroke-width: 7; opacity: .75 }
.trust { list-style: none; padding: 0; margin: clamp(22px, 2.6vw, 36px) 0 0; display: flex; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; opacity: 0; animation: rise .9s cubic-bezier(.2, .7, .2, 1) .7s forwards }
.trust li { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 4px; align-items: baseline; padding-left: 16px; border-left: 2px solid rgba(244, 209, 153, .7) }
.trust b { font-size: clamp(28px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, .35) }
.trust i { font-style: normal; font-size: clamp(14px, 1.3vw, 18px); font-weight: 700; color: #F4D199 }
.trust span { grid-column: 1/-1; font-size: 12.5px; line-height: 1.45; opacity: .88; margin-top: 6px }
.trust em { display: inline-block; font-style: normal; font-size: 10px; line-height: 1.4; padding: 1px 6px; border-radius: 999px; background: rgba(255, 80, 80, .85); color: #fff; vertical-align: middle; margin-left: 4px }
.cover .cd { animation-delay: .85s }
.cover .cd-pl { animation-delay: .98s }
.cover .cd-ad { animation-delay: 1.1s }
@media (max-width:879px) {
  .trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px }
  .trust li { padding-left: 10px; column-gap: 3px }
  .trust b { font-size: clamp(22px, 6.4vw, 28px) }
  .trust i { font-size: 12.5px }
  .trust span { font-size: 11px; line-height: 1.4; margin-top: 4px }
  .trust em { font-size: 9px; padding: 0 5px }
}
@media (prefers-reduced-motion:reduce) {
  .trust { opacity: 1 }
}

/* ================= v27: 플로팅 재배치 — 바 하단 중앙 · 유럽은 옆 버튼 · 카톡은 호버 라벨 ================= */
.fabwrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px max(24px, env(safe-area-inset-bottom, 0px)); pointer-events: none; transform: translateY(calc(100% + 40px)); transition: transform .45s var(--ease) }
.fabwrap.on { transform: none }
.fabwrap>* { pointer-events: auto }
.fabrow { display: flex; align-items: center; gap: 10px; max-width: 100% }
.fab { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; transition: none; max-width: 100% }

/* 유럽: 바 옆 별도 알약 버튼 (PC) */
.fab .eu { display: none }
.fabrow .eu { display: none; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 18px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 14px 34px rgba(21, 17, 13, .22), inset 0 0 0 1px var(--rule); white-space: nowrap; font-size: 13.5px; max-width: 0; padding-inline: 0; opacity: 0; overflow: hidden; transition: max-width .5s var(--ease), padding .5s var(--ease), opacity .3s .1s }
.fabrow .eu .eu-k { color: var(--soft); font-weight: 500 }
.fabrow .eu .eu-t { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--wine) }
.fabrow .eu svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.fabrow .eu:hover { background: #FBF1EE }
@media (min-width:980px) {
  .fabrow .eu { display: inline-flex }
  .fabwrap.eu-on .fabrow .eu { max-width: 420px; padding: 0 20px 0 18px; opacity: 1 }
  .eu-strip { display: none !important }
}

/* 모바일: 바 위 띠, 바는 카톡 버튼 위로 */
.eu-strip { position: static; left: auto; bottom: auto; transform: none; max-height: 0; opacity: 0; overflow: hidden; min-height: 0; padding-block: 0; transition: max-height .45s var(--ease), opacity .3s, padding .45s var(--ease) }
.fabwrap.eu-on .eu-strip { max-height: 60px; opacity: 1; min-height: 40px }
@media (max-width:979px) {
  .fabwrap { padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 56px + 12px) }
  .fabrow .eu { display: none }
  .kfab { bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important }
}

/* 카톡: 라벨은 호버 때만 */
.kfab .kl { display: inline-flex; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s }
.kfab:hover .kl, .kfab:focus-visible .kl { opacity: 1; transform: none }
@media (hover:none) {
  .kfab .kl { display: none }
}
.eu-strip { max-width: 100%; justify-content: center }
@media (max-width:479px) {
  .eu-strip .es-k { display: none }
  .eu-strip { font-size: 13px }
}
.fabwrap.eu-on .eu-strip { transform: none }

/* ================= v29: 모바일 바 맨 아래 왼쪽 · 유럽 버튼 깜빡임 ================= */
@media (max-width:979px) {
  .fabwrap { align-items: center; padding: 0 12px max(12px, env(safe-area-inset-bottom, 0px)); left: 0; right: 0; width: auto }
  .fab { max-width: 100%; padding: 5px 5px 5px 14px; gap: 6px }
  .fab .t { font-size: 12.5px }
  .fab .go { padding: 0 14px; min-height: 42px; font-size: 13px }
  .eu-strip { max-width: 100% }
  .kfab { right: max(12px, env(safe-area-inset-right, 0px)) }
  .kfab .ki { width: 52px; height: 52px }
}
@keyframes euBlink {
  0%, 78%, 100% { box-shadow: 0 14px 34px rgba(21, 17, 13, .22), inset 0 0 0 1px var(--rule); transform: none }
  82% { box-shadow: 0 14px 34px rgba(126, 59, 46, .35), 0 0 0 6px rgba(126, 59, 46, .18), inset 0 0 0 1.5px var(--wine); transform: translateY(-2px) }
  86% { box-shadow: 0 14px 34px rgba(21, 17, 13, .22), inset 0 0 0 1px var(--rule); transform: none }
  90% { box-shadow: 0 14px 34px rgba(126, 59, 46, .35), 0 0 0 6px rgba(126, 59, 46, .18), inset 0 0 0 1.5px var(--wine); transform: translateY(-2px) }
  94% { box-shadow: 0 14px 34px rgba(21, 17, 13, .22), inset 0 0 0 1px var(--rule); transform: none }
}
@keyframes euText {
  0%, 78%, 100% { color: var(--wine) }
  82%, 90% { color: #B3473A }
  86%, 94% { color: var(--wine) }
}
.fabwrap.eu-on .fabrow .eu { animation: euBlink 7s ease-in-out 2s infinite }
.fabwrap.eu-on .fabrow .eu .eu-t { animation: euText 7s ease-in-out 2s infinite }
.fabwrap.eu-on .eu-strip { animation: euBlink 7s ease-in-out 2s infinite }
.fabwrap.eu-on .eu-strip .es-t { animation: euText 7s ease-in-out 2s infinite }
@media (prefers-reduced-motion:reduce) {
  .fabrow .eu, .eu-strip, .eu-t, .es-t { animation: none !important }
}

/* ================= v32: 폼 라벨 · 오시는 길 정보 — 브라우저 무관하게 정렬 ================= */
.lb, .fld .lb { display: block; margin: 0 0 9px; line-height: 1.5 }
.lb em, .fld .lb em { display: inline-block; vertical-align: middle; margin-left: 6px; position: relative; top: -1px; line-height: 1.4 }
.lb .opt { display: inline-block; vertical-align: middle; margin-left: 6px }
.info dl { display: block; margin: 0 }
.info dl>div { display: flex; align-items: baseline; gap: 0 18px; margin: 0 0 12px }
.info dl>div:last-child { margin-bottom: 0 }
.info dt { flex: 0 0 32px; margin: 0; padding-top: 4px; font-size: 12px; font-weight: 700; color: var(--soft) }
.info dd { flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.8 }

/* ================= v35: 박람회 혜택 — 실제 혜택 4종 + 이미지 ================= */
.bens { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (min-width:980px) {
  .bens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
}
.ben { padding: 0; overflow: hidden; border-radius: 18px; display: grid; grid-template-rows: auto 1fr; gap: 0; background: #fff }
.ben .bp { aspect-ratio: 4/3; background-size: cover; background-position: 50% 50% }
.ben .bb { padding: 16px 18px 20px; display: grid; gap: 7px; align-content: start }
.ben .bc { justify-self: start; font-size: 11.5px; font-weight: 700; color: var(--wine); background: #FBF1EE; padding: 4px 9px; border-radius: 999px; line-height: 1.4 }
.ben h3 { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.4; letter-spacing: -.02em; font-weight: 700; overflow-wrap: anywhere }
.ben h3 i { font-style: normal; font-weight: 500; color: var(--soft); margin: 0 2px }
.ben h3 b { color: var(--wine); font-weight: 800 }
.ben p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6 }
.ben.dark { background: #fff; box-shadow: 0 0 0 2px var(--wine), 0 14px 34px rgba(126, 59, 46, .14) }
.ben.dark .bc { background: var(--wine); color: #fff }
.ben-note { margin-top: 14px; font-size: 12.5px; color: var(--soft); text-align: center }
@media (max-width:759px) {
  .bens { gap: 10px }
  .ben .bb { padding: 12px 13px 14px; gap: 6px }
  .ben h3 { font-size: 14.5px }
  .ben p { font-size: 11.5px }
  .ben .bc { font-size: 10.5px; padding: 3px 8px }
  .bens { grid-template-columns: 1fr; gap: 10px }
  .ben { grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: none; align-items: center }
  .ben .bp { aspect-ratio: auto; height: 100%; min-height: 124px }
  .ben .bb { padding: 14px 14px 14px 14px; gap: 6px }
  .ben h3 { font-size: 16px }
  .ben p { font-size: 12px }
  .ben.dark { order: -1 }
  .ben.dark { grid-template-columns: 148px minmax(0, 1fr) }
  .ben.dark .bp { min-height: 140px }
  .ben.dark h3 { font-size: 17px }
}

/* ================= v38: 예산형 가격 표기 · 모바일 혜택 사진 폭 통일 ================= */
.tier .pr { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; row-gap: 3px }
.tier .pr small { font-size: 12px; font-weight: 600; color: var(--ink-2) }
.tier .pr b { display: inline; font-family: var(--f-sans); font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--wine); margin: 0 }
.tier .pr b i { font-style: normal; font-weight: 500; font-size: 18px; margin-left: 1px }
.tier .pr span { grid-column: 1/-1; font-size: 11.5px; color: var(--soft) }
@media (max-width:759px) {
  .ben, .ben.dark { grid-template-columns: 140px minmax(0, 1fr) }
  .ben .bp, .ben.dark .bp { min-height: 136px }
  .ben.dark .bp { background-position: 74% 50% }
}

/* ---------- service photo cards ---------- */
.svcs { display: grid; gap: 10px }
@media (min-width:640px) {
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
}
@media (min-width:1000px) {
  .svcs { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .svcs .svc:nth-child(4) { grid-column: 1/2 }
  .svcs .svc:nth-child(5) { grid-column: 2/3 }
}
@media (min-width:1180px) {
  .svcs { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .svcs .svc { grid-column: span 2 }
  .svcs .svc:nth-child(4) { grid-column: 2/4 }
  .svcs .svc:nth-child(5) { grid-column: 4/6 }
}
.svc { background: #fff; border-radius: 16px; overflow: hidden; display: grid; align-content: start; box-shadow: 0 1px 2px rgba(21, 17, 13, .05), 0 12px 30px rgba(21, 17, 13, .06) }
.svc .ph { aspect-ratio: 3/2; background-size: cover; background-position: 50% 50% }
.svc .b { padding: 16px 18px 20px; display: grid; gap: 6px }
.svc .n { font-family: var(--f-disp); font-size: 13px; color: var(--gold); letter-spacing: .06em }
.svc h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.svc p { font-size: 13.5px; color: var(--ink-2); line-height: 1.75 }

/* ---------- resort slider ---------- */
.slider { position: relative; margin-top: clamp(16px, 2.2vw, 24px) }
.track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(20px, calc((100vw - 1240px)/2 + 20px)); padding-bottom: 4px }
.track::-webkit-scrollbar { display: none }
@media (hover:hover) and (pointer:fine) {
  .track { cursor: grab }
  .track.grab { cursor: grabbing; scroll-behavior: auto }
  .track.grab .slide { user-select: none }
  .track.grab .shot, .track.grab .th { pointer-events: none }
}
.track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 18px }
.slide { flex: 0 0 min(86vw, 760px); scroll-snap-align: center; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(21, 17, 13, .05), 0 16px 40px rgba(21, 17, 13, .08); display: grid; align-content: start }
.slide .shot { aspect-ratio: 3/2; background-size: cover; background-position: 50% 52%; transition: background-image .25s }
.slide .bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px 14px }
.slide .nm { flex: 1 1 180px; min-width: 0 }
.slide .ar { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--gold) }
.slide h3 { font-family: var(--f-sans); font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; letter-spacing: -.02em; margin-top: 3px; overflow-wrap: anywhere }
.slide .nm p { font-size: 12.5px; color: var(--soft); margin-top: 3px }
.slide .add { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--tint); color: var(--ink); white-space: nowrap; transition: background-color .18s, color .18s }
.slide .add[aria-pressed="true"] { background: var(--ink); color: var(--paper) }
.thumbs { display: flex; gap: 6px; padding: 0 18px 18px; overflow-x: auto; scrollbar-width: none }
.thumbs::-webkit-scrollbar { display: none }
.th { flex: none; width: 72px; height: 52px; border-radius: 9px; background-size: cover; background-position: 50% 50%; box-shadow: inset 0 0 0 1px rgba(21, 17, 13, .08); opacity: .62; transition: opacity .18s, box-shadow .18s }
.th.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--gold) }
.s-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px }
.nav { flex: none; width: 46px; height: 46px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(21, 17, 13, .06), 0 8px 20px rgba(21, 17, 13, .1); display: inline-flex; align-items: center; justify-content: center }
.nav svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.nav[disabled] { opacity: .34 }
.dots { display: flex; gap: 2px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; margin-inline: -6px }
.dots button { width: 24px; height: 44px; display: grid; place-items: center; background: none }
.dots button::after { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--rule); transition: background-color .2s, width .2s }
.dots button.on { width: 34px }
.dots button.on::after { width: 22px; background: var(--gold) }
.count { font-size: 13px; color: var(--soft); white-space: nowrap }
.count b { font-family: var(--f-disp); font-size: 16px; color: var(--ink); font-weight: 600 }
@media (max-width:560px) {
  .slide { flex-basis: 88vw }
  .th { width: 60px; height: 44px }
}

/* ================= v34: PC 가로 레일 — 본문 폭 안에 가두고, 다음 카드가 살짝 보이게 ================= */
@media (min-width:1000px) {
  .days, .track, .rail { max-width: 1200px; margin-inline: auto; padding-inline: 20px; scroll-padding-inline: 20px; box-sizing: border-box; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) }
  /* 일정 7장: 5장 + 반 장 */
  .day { width: calc((100% - 5*14px)/5.5) }
  /* 리조트 슬라이드: 2장 + 반 장 */
  .slide { flex-basis: calc((100% - 2*12px)/2.5); scroll-snap-align: start }
  .slide .shot { aspect-ratio: 4/3 }
  .slide h3 { font-size: 19px }
  .slide .add { min-height: 40px; padding: 0 13px; font-size: 12.5px }
  .slide .bar { padding: 14px 16px 10px }
  .thumbs { padding: 0 16px 16px }
  .th { width: 64px; height: 46px }
  .rail-nav { max-width: 1200px }
}

/* 가로 스크롤 영역이 세로 스와이프를 가로채지 않도록 */
.track, .rail, .days, .tiers, .revs, .thumbs { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y }

/* 모바일: 주소창이 접히며 뷰포트 높이가 바뀌어도 메인 높이가 흔들리지 않게 JS가 한 번 고정한 값 사용 */
@media (max-width:879px) {
  .cover { min-height: var(--cover-h, min(100svh, 820px)) }
}

/* 모바일: 제목 블록을 위로 올려 상하 여백 확보, 장소 문구 길이에 맞춰 크기 조정 */
@media (max-width:879px) {
  .c-mid { align-items: center; padding-block: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)) 12px }
  .cd-pl b { font-size: clamp(22px, 6.2vw, 28px) }
}

/* 카카오톡 버튼: 메인(커버) 구간에서는 숨김 */
.kfab { transition: opacity .25s, transform .2s, visibility .25s }
.kfab.hide { opacity: 0; visibility: hidden; pointer-events: none }

/* 모바일: 상단 어두운 그라데이션을 줄이고 제목을 더 위로 */
@media (max-width:879px) {
  .cover::after { background: linear-gradient(180deg, rgba(18, 11, 6, .18), rgba(18, 11, 6, 0) 30%, rgba(18, 11, 6, 0) 52%, rgba(18, 11, 6, .1) 72%, rgba(18, 11, 6, .6)) }
  .c-mid { align-items: flex-start; padding-block: max(40px, calc(env(safe-area-inset-top, 0px) + 32px)) 12px }
}

/* 메인: 배경 어두움을 더 줄이고, 흰 글씨는 은은한 검정 그림자로 가독성 확보 */
.cover::after { background: linear-gradient(180deg, rgba(18, 11, 6, .08), rgba(18, 11, 6, 0) 30%, rgba(18, 11, 6, 0) 55%, rgba(18, 11, 6, .06) 75%, rgba(18, 11, 6, .34)) }
.cover::before { opacity: .5 }
.cover .eyebrow, .cover .lead, .c-top .bd, .c-top .sub, .c-top .kk, .trust b, .trust i, .trust span, .cd b, .cd i, .cd-pl b, .cd-ad { text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 14px rgba(0, 0, 0, .35) }
.cover h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 4px 26px rgba(0, 0, 0, .4) }
.cover h1 em { text-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 4px 22px rgba(0, 0, 0, .4) }

/* 폼: 전송 실패 안내 / 전송 중 버튼 */
.f-fail { display: none; margin-top: 10px; text-align: center }
.f-fail.show { display: block }
#submitBtn[disabled] { opacity: .6; cursor: progress }

/* ================= v42: 모바일 글자 크기 상향 (+2px 내외) ================= */
@media (max-width:879px) {
  body { font-size: 17.5px }
  .hd h2 { font-size: clamp(25px, 6.6vw, 31px) }
  .hd p { font-size: 16.5px }
  .more summary { font-size: 15px }
  .mx p { font-size: 16px }
  .tile h3 { font-size: 20px }
  .tile p { font-size: 14.5px }
  .ic b { font-size: 17px }
  .ic span { font-size: 14.5px }
  .tier h3 { font-size: 22px }
  .tier .chip, .chip { font-size: 14.5px }
  .tier .pr small, .tier .pr span { font-size: 14px }
  .way .sub { font-size: 15.5px }
  .way li { font-size: 15.5px }
  .rcard h3 { font-size: 23px }
  .rcard p { font-size: 14.5px }
  .rcard .tags span { font-size: 13.5px }
  .day h3 { font-size: 17.5px }
  .day p { font-size: 14.5px }
  .rev .txt { font-size: 16px }
  .rev .who b { font-size: 16.5px }
  .rev .who span, .rev .stay, .rev .lnk { font-size: 14px }
  .svc h3 { font-size: 19px }
  .svc p { font-size: 15.5px }
  .ben h3 { font-size: 18px }
  .ben p { font-size: 14px }
  .ben .bc { font-size: 13px }
  .note-line { font-size: 18px }
  .rail-hint, .sub-note, .chip-note, .ben-note { font-size: 14.5px }
  .lb { font-size: 15px }
  .lb .opt { font-size: 13.5px }
  .inp { font-size: 17px }
  .chips-f span { font-size: 15.5px }
  .fhead p { font-size: 15.5px }
  .fs-ad { font-size: 15.5px }
  .btn { font-size: 17.5px }
  .btn.sm { font-size: 15.5px }
  .info dd, .info dt { font-size: 16px }
  footer { font-size: 14.5px }
  .fab .t { font-size: 14.5px }
  .fab .t b { font-size: 17px }
  .qnav li a { font-size: 15px }
}

/* ================= v43: 모션 레이어 (패럴랙스 · 스태거 · 인포그래픽) ================= */

/* 스크롤 진행 바 */
.sprog { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 70; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--wine), var(--gold-l)); opacity: 0; transition: opacity .3s }
.sprog.on { opacity: 1 }

/* 패럴랙스 대상: transform만 건드림 */
.band { overflow: hidden }
.band .ph { will-change: transform; transform: translate3d(0, var(--py, 0), 0) scale(1.18) }
.cover .m-ph { will-change: transform }
@media (min-width:880px) {
  .cover .m-ph { animation: none; transform: translate3d(0, var(--py, 0), 0) scale(1.06) }
}

/* 섹션 헤더 스태거 */
.hd .k, .hd h2, .hd p, .hd .more { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
.hd.in .k { opacity: 1; transform: none }
.hd.in h2 { opacity: 1; transform: none; transition-delay: .1s }
.hd.in p { opacity: 1; transform: none; transition-delay: .22s }
.hd.in .more { opacity: 1; transform: none; transition-delay: .32s }

/* 큰 섹션 번호(고스트) — 헤더 뒤에서 느리게 */
.hd { position: relative }
.hd .gn { position: absolute; left: -.06em; top: -.38em; font-size: clamp(88px, 12vw, 170px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--wine); opacity: 0; pointer-events: none; z-index: -1; transform: translate3d(0, calc(var(--gy, 0px)), 0); transition: opacity 1s var(--ease) }
.hd.in .gn { opacity: .06 }
.sec.tint .hd .gn { opacity: 0; }
.sec.tint .hd.in .gn { opacity: .07 }

/* 카드 스태거 (nth-child 지연) */
.tiles>.rv, .tiers>.rv, .ways>.rv, .rail>.rv, .vs>.rv, .days>.rv, .revs>.rv, .svcs>.rv, .bens>.rv, .icons>.ic, .routes>.rv, .durs>.rv, .seasons>.rv, .moves>.rv { transition-duration: .8s }
.tiles>.rv:nth-child(2), .tiers>.rv:nth-child(2), .ways>.rv:nth-child(2), .rail>.rv:nth-child(2), .vs>.rv:nth-child(2), .days>.rv:nth-child(2), .revs>.rv:nth-child(2), .svcs>.rv:nth-child(2), .bens>.rv:nth-child(2), .routes>.rv:nth-child(2), .durs>.rv:nth-child(2), .seasons>.rv:nth-child(2), .moves>.rv:nth-child(2) { transition-delay: .1s }
.tiles>.rv:nth-child(3), .tiers>.rv:nth-child(3), .ways>.rv:nth-child(3), .rail>.rv:nth-child(3), .days>.rv:nth-child(3), .revs>.rv:nth-child(3), .svcs>.rv:nth-child(3), .bens>.rv:nth-child(3), .routes>.rv:nth-child(3), .durs>.rv:nth-child(3), .seasons>.rv:nth-child(3), .moves>.rv:nth-child(3) { transition-delay: .2s }
.tiles>.rv:nth-child(4), .rail>.rv:nth-child(4), .days>.rv:nth-child(4), .revs>.rv:nth-child(4), .svcs>.rv:nth-child(4), .bens>.rv:nth-child(4), .routes>.rv:nth-child(4), .seasons>.rv:nth-child(4) { transition-delay: .3s }
.days>.rv:nth-child(5), .svcs>.rv:nth-child(5), .rail>.rv:nth-child(5) { transition-delay: .4s }
.days>.rv:nth-child(6) { transition-delay: .5s }
.days>.rv:nth-child(7) { transition-delay: .6s }

/* 가격 5요소: 아이콘 선 그리기 + 순차 등장 */
.icons .ic { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease) }
.icons.in .ic { opacity: 1; transform: none }
.icons.in .ic:nth-child(2) { transition-delay: .08s }
.icons.in .ic:nth-child(3) { transition-delay: .16s }
.icons.in .ic:nth-child(4) { transition-delay: .24s }
.icons.in .ic:nth-child(5) { transition-delay: .32s }
.icons .ic svg * { stroke-dasharray: 120; stroke-dashoffset: 120 }
.icons.in .ic svg * { animation: icodraw 1.1s cubic-bezier(.3, .7, .2, 1) forwards }
.icons.in .ic:nth-child(2) svg * { animation-delay: .12s }
.icons.in .ic:nth-child(3) svg * { animation-delay: .24s }
.icons.in .ic:nth-child(4) svg * { animation-delay: .36s }
.icons.in .ic:nth-child(5) svg * { animation-delay: .48s }
@keyframes icodraw {
  to { stroke-dashoffset: 0 }
}

/* 예산형 가격: 숫자 롤업은 JS, 카드 사진은 살짝 확대 해제(.zm 기존) */
.tier .pr b.num { display: inline-block }

/* 일정 레일: 카드 사이 점선 연결 + DAY 배지 팝 */
.days { position: relative }
.days::before { content: ""; position: absolute; left: 20px; right: 20px; top: calc(var(--dayline, 56px)); height: 0; border-top: 2px dashed var(--gold-l); opacity: .55; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease) .2s; z-index: 0; pointer-events: none }
.days.in::before { transform: scaleX(1) }
.day { position: relative; z-index: 1 }
.day .dn { transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .3s .35s }
.day.in .dn { transform: none; opacity: 1 }

/* 혜택: 쿠폰 카드 숨쉬기(PC), 배지 등장 */
@media (min-width:880px) and (hover:hover) {
  .ben.dark { animation: benfloat 5s ease-in-out 1.2s infinite }
}
@keyframes benfloat {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
}
.ben .bc { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s }
.ben.in .bc { opacity: 1; transform: none }

/* 후기 카드: 사진 살짝 들어오기 */
.rev .rp { transform: scale(1.06); transition: transform 1.4s var(--ease) }
.rev.in .rp { transform: none }

/* CTA 버튼: 6초마다 한 번 광택 */
.btn.g { position: relative; overflow: hidden }
.btn.g::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: sheen 6s ease-in-out 2s infinite }
@keyframes sheen {
  0%, 12% { left: -40% }
  22%, 100% { left: 130% }
}

/* 밴드 캡션 등장 */
.band .t b, .band .t span { display: block; opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s }
.band .t span { transition-delay: .35s }
.band.in .t b, .band.in .t span { opacity: 1; transform: none }

/* 신뢰 숫자 뒤 라인 그로우 */
.trust li { transition: border-color .8s }

/* 리조트 슬라이더: 첫 노출 때 살짝 밀었다 돌아오기 (스와이프 힌트) */
@keyframes peek {
  0%, 100% { transform: translateX(0) }
  40% { transform: translateX(-28px) }
}
.slider.peek .track { animation: peek 1.1s cubic-bezier(.3, .7, .2, 1) .4s 1 }
@media (prefers-reduced-motion:reduce) {
  .sprog, .hd .gn { display: none }
  .hd .k, .hd h2, .hd p, .hd .more, .icons .ic, .ben .bc, .day .dn { opacity: 1 !important; transform: none !important; transition: none !important }
  .icons .ic svg * { stroke-dasharray: none; stroke-dashoffset: 0; animation: none }
  .band .ph, .cover .m-ph { transform: none !important }
  .days::before { transform: none }
  .btn.g::before, .ben.dark { animation: none !important }
  .rev .rp { transform: none }
}

/* ================= v44: 모션 2단계(B) / 3단계(C) — html[data-motion] 로 켬 ================= */

/* 2) 제목 단어 단위 등장 */
html[data-motion] .hd h2 .hw { display: inline-block; white-space: nowrap; margin-right: .26em; opacity: 0; transform: translateY(.6em); transition: opacity .6s var(--ease), transform .7s var(--ease) }
html[data-motion] .hd h2 .hw:last-child, html[data-motion] .hd h2 .hw.e { margin-right: 0 }
html[data-motion] .hd.in h2 .hw { opacity: 1; transform: none }
html[data-motion] .hd.in h2 { opacity: 1; transform: none; transition-delay: 0s }

/* 3) 사진 마스크 리빌 */
html[data-motion] .tile .ph, html[data-motion] .tier .pic .ph, html[data-motion] .rcard .ph, html[data-motion] .svc .ph, html[data-motion] .vs-c .ph, html[data-motion] .day .pic .ph { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .2, 1), transform 1.8s var(--ease) }
html[data-motion] .in>.ph, html[data-motion] .in .pic>.ph, html[data-motion] .tile.in .ph, html[data-motion] .rcard.in .ph, html[data-motion] .svc.in .ph, html[data-motion] .vs-c.in .ph { clip-path: inset(0 0 0 0) }
html[data-motion] .rev .rp { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .2, 1), transform 1.6s var(--ease) }
html[data-motion] .rev.in .rp { clip-path: inset(0) }

/* 6) 리조트 이름 마퀴 */
.mq { overflow: hidden; white-space: nowrap; margin: clamp(14px, 2vw, 22px) 0 clamp(10px, 1.4vw, 16px); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.mq .in { display: inline-flex; gap: 0; animation: mq 60s linear infinite; will-change: transform }
.mq:hover .in { animation-play-state: paused }
.mq span { display: inline-flex; align-items: center; gap: 14px; padding: 0 14px; font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; color: var(--ink-2); letter-spacing: -.01em }
.mq span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-l) }
.mq i { font-style: normal; font-size: .8em; color: var(--gold); font-weight: 700; letter-spacing: .06em }
@keyframes mq {
  to { transform: translateX(-50%) }
}

/* 1) 스크롤텔링 일정 (PC ≥980) */
@media (min-width:980px) {
  html[data-motion="c"] .days { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); overflow: visible; max-width: 1200px; margin-inline: auto; padding-inline: 20px; mask-image: none; -webkit-mask-image: none; align-items: start }
  html[data-motion="c"] .days::before { display: none }
  html[data-motion="c"] .days .stk { position: sticky; top: calc(var(--navh) + 24px); aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: var(--tint); box-shadow: 0 20px 50px rgba(21, 17, 13, .12) }
  html[data-motion="c"] .days .stk .ph { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.4s var(--ease) }
  html[data-motion="c"] .days .stk .ph.on { opacity: 1; transform: none }
  html[data-motion="c"] .days .stk .lab { position: absolute; left: 20px; bottom: 18px; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .4) }
  html[data-motion="c"] .days .stk .lab b { display: block; font-size: 13px; letter-spacing: .14em; opacity: .9 }
  html[data-motion="c"] .days .stk .lab span { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px }
  html[data-motion="c"] .days .stk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45)); pointer-events: none }
  html[data-motion="c"] .days .stk .bar { position: absolute; left: 20px; right: 20px; top: 16px; height: 3px; background: rgba(255, 255, 255, .3); border-radius: 3px; overflow: hidden }
  html[data-motion="c"] .days .stk .bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .5s var(--ease) }
  html[data-motion="c"] .days .col { display: grid; gap: clamp(40px, 9vh, 96px); padding: 10vh 0 30vh }
  html[data-motion="c"] .days .day { min-height: 96px }
  html[data-motion="c"] .days .day { width: auto; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; scroll-snap-align: none; opacity: .45; transform: none; transition: opacity .4s, box-shadow .4s, background-color .4s }
  html[data-motion="c"] .days .day.on { opacity: 1; box-shadow: 0 14px 34px rgba(126, 59, 46, .14); background: #fff }
  html[data-motion="c"] .days .day .pic { display: none }
  html[data-motion="c"] .days .day .b { padding: 0 }
  html[data-motion="c"] .days .day .dn2 { font-family: var(--f-sans); font-size: 12px; letter-spacing: .12em; color: var(--gold); font-weight: 700; opacity: 1; transform: none }
  html[data-motion="c"] .days .day.on .dn2 { color: var(--wine) }
  html[data-motion="c"] .days .day h3 { font-size: 19px }
  html[data-motion="c"] .days .day.last { grid-template-columns: 1fr; text-align: left; padding: 18px 20px; background: var(--tint) }
  html[data-motion="c"] .days .day.last .dn { position: static; background: none; color: var(--gold); padding: 0 }
  html[data-motion="c"] #plan .rail-hint svg { display: none }
}

/* 3단계(C) */

/* 8) 3D 틸트 */
@media (min-width:880px) and (hover:hover) {
  html[data-motion="c"] .ben, html[data-motion="c"] .tier, html[data-motion="c"] .tile { transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .3s }
  html[data-motion="c"] .ben.dark { animation: none }
}

/* 9) 커스텀 커서 */
@media (min-width:880px) and (hover:hover) {
  html[data-motion="c"] .cur { position: fixed; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--wine); pointer-events: none; z-index: 99; transform: translate(-50%, -50%); transition: width .25s, height .25s, background-color .25s, opacity .3s; mix-blend-mode: multiply; opacity: 0 }
  html[data-motion="c"] .cur.show { opacity: .9 }
  html[data-motion="c"] .cur.big { width: 72px; height: 72px; background: rgba(126, 59, 46, .18); mix-blend-mode: normal; box-shadow: inset 0 0 0 1.5px var(--wine) }
  html[data-motion="c"] .cur.big::after { content: attr(data-t); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--wine); letter-spacing: .02em }
  html[data-motion="c"] .cur.link { width: 36px; height: 36px; background: rgba(126, 59, 46, .22) }
}

/* 7) 리조트 가로 핀 (PC ≥1000) */
@media (min-width:1000px) {
  html[data-motion="c"] .pinwrap { position: relative }
  html[data-motion="c"] .pinwrap .slider { position: sticky; top: calc(var(--navh) + 16px) }
  html[data-motion="c"] .pinwrap .track { overflow-x: hidden; scroll-snap-type: none; mask-image: none; -webkit-mask-image: none }
  html[data-motion="c"] .pinwrap .slide { flex-basis: calc((100% - 2*12px)/3) }
  html[data-motion="c"] .pinhint { position: absolute; right: max(20px, calc((100vw - 1200px)/2 + 20px)); top: -34px; font-size: 12px; letter-spacing: .1em; color: var(--gold); font-weight: 700 }
}
@media (prefers-reduced-motion:reduce) {
  html[data-motion] .hd h2 .hw { opacity: 1; transform: none }
  html[data-motion] .tile .ph, html[data-motion] .tier .pic .ph, html[data-motion] .rcard .ph, html[data-motion] .svc .ph, html[data-motion] .vs-c .ph, html[data-motion] .day .pic .ph, html[data-motion] .rev .rp { clip-path: none }
  .mq .in { animation: none }
}

/* ================= v45: 모션 증폭 (data-motion="b" 기본) ================= */

/* 메인: 스크롤 연동 — 사진 확대+어두워짐, 글은 위로 밀리며 사라짐 */
html[data-motion] .cover .c-mid, html[data-motion] .cover .c-date { will-change: transform, opacity; transform: translate3d(0, var(--hy, 0), 0); opacity: var(--ho, 1) }
html[data-motion] .cover::after { transition: none }
html[data-motion] .cover .m-ph { transform: translate3d(0, var(--py, 0), 0) scale(var(--hs, 1.02)) !important; animation: none !important }
html[data-motion] .cover .dim { position: absolute; inset: 0; z-index: 0; background: #0d0906; opacity: var(--hd, 0); pointer-events: none }

/* 스크롤 유도: 하단 중앙 */
html[data-motion] .scue { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 11px; letter-spacing: .18em; opacity: .85; animation: rise .9s var(--ease) 1.6s both }
html[data-motion] .scue i { display: block; width: 1px; height: 38px; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0)); animation: scue 1.6s ease-in-out infinite }
@keyframes scue {
  0% { transform: scaleY(0); transform-origin: top }
  50% { transform: scaleY(1); transform-origin: top }
  51% { transform-origin: bottom }
  100% { transform: scaleY(0); transform-origin: bottom }
}
@media (max-width:879px) {
  html[data-motion] .scue { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 8px) }
}

/* 패럴랙스 폭 ↑ (JS에서 % 계산), 밴드 캡션 크기 ↑ */
html[data-motion] .band { height: clamp(260px, 38vw, 520px) }
html[data-motion] .band .ph { transform: translate3d(0, var(--py, 0), 0) scale(1.3) }
html[data-motion] .band .t b { font-size: clamp(26px, 3.6vw, 46px); letter-spacing: -.03em }

/* 고스트 번호: 더 크고 더 진하게, 섹션 밖으로 삐져나오게 */
html[data-motion] .hd .gn { font-size: clamp(140px, 22vw, 320px); top: -.42em; left: -.08em; color: var(--wine) }
html[data-motion] .hd.in .gn { opacity: .09 }
html[data-motion] .sec.tint .hd.in .gn { opacity: .11 }
html[data-motion] .sec { overflow: visible }

/* 카드 등장: 더 멀리서, 살짝 커지며 */
html[data-motion] .rv { transform: translateY(44px) scale(.97) }
html[data-motion] .rv.in { transform: none }
html[data-motion] .tiles>.rv:nth-child(even), html[data-motion] .svcs>.rv:nth-child(even), html[data-motion] .revs>.rv:nth-child(even) { transform: translateY(72px) scale(.97) }
html[data-motion] .tiles>.rv.in, html[data-motion] .svcs>.rv.in, html[data-motion] .revs>.rv.in { transform: none }

/* 제목 단어: 더 큰 폭 + 살짝 회전 */
html[data-motion] .hd h2 .hw { transform: translateY(1em) rotate(2deg); transform-origin: 0 100% }

/* 섹션 번호 라벨(01 GUIDE)이 선으로 그어지며 등장 */
html[data-motion] .hd .k { position: relative; padding-left: 34px }
html[data-motion] .hd .k::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--wine); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease) .1s }
html[data-motion] .hd.in .k::before { transform: scaleX(1) }

/* 가격 5요소: 등장 시 배경이 와인→흰색으로 쓸려감 */
html[data-motion] .icons .ic { position: relative; overflow: hidden }
html[data-motion] .icons .ic::after { content: ""; position: absolute; inset: 0; background: var(--wine); transform: translateX(-101%); pointer-events: none }
html[data-motion] .icons.in .ic::after { animation: wipe .9s cubic-bezier(.7, 0, .2, 1) forwards }
html[data-motion] .icons.in .ic:nth-child(2)::after { animation-delay: .1s }
html[data-motion] .icons.in .ic:nth-child(3)::after { animation-delay: .2s }
html[data-motion] .icons.in .ic:nth-child(4)::after { animation-delay: .3s }
html[data-motion] .icons.in .ic:nth-child(5)::after { animation-delay: .4s }
@keyframes wipe {
  0% { transform: translateX(-101%) }
  45% { transform: translateX(0) }
  100% { transform: translateX(101%) }
}

/* 예산형 카드: 가격 숫자 크게 튀어오르기 */
html[data-motion] .tier .pr b.num { transform: translateY(12px); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .5s, opacity .4s .5s }
html[data-motion] .tier.in .pr b.num { transform: none; opacity: 1 }

/* 여행방식 추천 배지 펄스 */
html[data-motion] .way.hl .bdg { animation: pulse 2.4s ease-in-out 1.5s infinite }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 59, 46, .35) }
  60% { box-shadow: 0 0 0 10px rgba(126, 59, 46, 0) }
}

/* 일정 스토리(PC): 사진 전환을 슬라이드로, 활성 카드 강조 ↑ */
@media (min-width:980px) {
  html[data-motion="c"] .days .stk .ph { transform: translateY(6%) scale(1.08); transition: opacity .55s var(--ease), transform 1.1s var(--ease) }
  html[data-motion="c"] .days .stk .ph.on { transform: none }
  html[data-motion="c"] .days .day { opacity: .35; transform: translateX(0) }
  html[data-motion="c"] .days .day.on { opacity: 1; transform: translateX(10px); box-shadow: 0 18px 44px rgba(126, 59, 46, .18) }
  html[data-motion="c"] .days .day.on h3 { color: var(--wine) }
  html[data-motion="c"] .days .stk .lab span { font-size: 34px }
}

/* 모바일 일정: 카드가 옆에서 밀려 들어오기 */
@media (max-width:979px) {
  html[data-motion] .days>.rv { transform: translateX(40px) }
  html[data-motion] .days>.rv.in { transform: none }
}

/* 후기: 큰 따옴표 등장 */
html[data-motion] .rev .rb { position: relative }
html[data-motion] .rev .rb::before { content: "\201C"; position: absolute; right: 16px; top: 4px; font-size: 84px; line-height: 1; font-weight: 800; color: var(--wine); opacity: 0; transform: translateY(10px); transition: opacity .8s .3s, transform .8s var(--ease) .3s }
html[data-motion] .rev.in .rb::before { opacity: .12; transform: none }

/* 혜택 60만원 배지 흔들기 */
html[data-motion] .ben.dark .bp { animation: none }
html[data-motion] .ben.dark.in .bp { animation: wob 1.2s cubic-bezier(.36, .07, .19, .97) .6s 1 }
@keyframes wob {
  10%, 90% { transform: translateX(-1px) rotate(-.6deg) }
  20%, 80% { transform: translateX(2px) rotate(.6deg) }
  30%, 50%, 70% { transform: translateX(-3px) rotate(-1deg) }
  40%, 60% { transform: translateX(3px) rotate(1deg) }
}

/* 폼 섹션 등장: 카드가 아래서 크게 */
html[data-motion] .fwrap.rv { transform: translateY(60px) scale(.96) }
html[data-motion] .fwrap.rv.in { transform: none }

/* 마퀴 속도 ↑, 글자 ↑ */
html[data-motion] .mq .in { animation-duration: 38s }
html[data-motion] .mq span { font-size: clamp(15px, 1.6vw, 20px); font-weight: 700 }
@media (prefers-reduced-motion:reduce) {
  html[data-motion] .cover .c-mid, html[data-motion] .cover .c-date, html[data-motion] .cover .m-ph { transform: none !important; opacity: 1 !important }
  html[data-motion] .scue, html[data-motion] .cover .dim { display: none }
  html[data-motion] .rv, html[data-motion] .hd h2 .hw, html[data-motion] .tier .pr b.num, html[data-motion] .fwrap.rv { transform: none !important; opacity: 1 !important }
  html[data-motion] .icons .ic::after, html[data-motion] .way.hl .bdg, html[data-motion] .ben.dark.in .bp { animation: none !important }
}

/* ================= v46: 살아있는 배경 (틴트 섹션 그라데이션 블롭 + 그레인) ================= */
html[data-motion] .sec { position: relative; isolation: isolate }
html[data-motion] .sec>.w, html[data-motion] .sec>.rail, html[data-motion] .sec>.days, html[data-motion] .sec>.slider, html[data-motion] .sec>.mq { position: relative; z-index: 1 }
html[data-motion] .sec.tint { background: linear-gradient(160deg, #FBF8F4 0%, #F4EDE4 55%, #F7EFE9 100%) }
@media (max-width:879px) {
  html[data-motion] .sec.tint { background: linear-gradient(165deg, #FAF5EF 0%, #F2E9DF 60%, #F6EDE6 100%) }
  html[data-motion] #benefit { background: linear-gradient(165deg, #FBF3EE, #F3E6E0) }
}
html[data-motion] .sec.tint::before, html[data-motion] .sec.tint::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; filter: none }
html[data-motion] .sec.tint::before { width: min(70vw, 760px); height: min(70vw, 760px); right: -18%; top: -10%; background: radial-gradient(closest-side, rgba(126, 59, 46, .13), rgba(126, 59, 46, .05) 55%, rgba(126, 59, 46, 0) 100%); animation: blobA 26s ease-in-out infinite alternate }
html[data-motion] .sec.tint::after { width: min(56vw, 620px); height: min(56vw, 620px); left: -14%; bottom: -16%; background: radial-gradient(closest-side, rgba(198, 165, 103, .22), rgba(198, 165, 103, .08) 55%, rgba(198, 165, 103, 0) 100%); animation: blobB 32s ease-in-out infinite alternate }
@keyframes blobA {
  0% { transform: translate3d(0, 0, 0) scale(1) }
  50% { transform: translate3d(-9%, 12%, 0) scale(1.12) }
  100% { transform: translate3d(-16%, -6%, 0) scale(.95) }
}
@keyframes blobB {
  0% { transform: translate3d(0, 0, 0) scale(1) }
  50% { transform: translate3d(14%, -10%, 0) scale(1.1) }
  100% { transform: translate3d(6%, -18%, 0) scale(1.18) }
}

/* 흰 섹션도 완전 평면이 아니게: 모서리에 아주 옅은 광 */
html[data-motion] .sec:not(.tint) { background: radial-gradient(120% 70% at 100% 0%, rgba(198, 165, 103, .09), rgba(198, 165, 103, 0) 60%), #fff }
html[data-motion] .form-sec { position: relative; isolation: isolate; background: linear-gradient(160deg, #F7F1EA, #FBF7F3 60%, #F3EAE2) }
html[data-motion] .form-sec::before { content: ""; position: absolute; z-index: 0; width: min(60vw, 640px); height: min(60vw, 640px); right: -12%; top: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 59, 46, .12), rgba(126, 59, 46, 0) 100%); animation: blobA 30s ease-in-out infinite alternate; pointer-events: none }
html[data-motion] .form-sec>.w { position: relative; z-index: 1 }

/* 그레인 */
html[data-motion] .grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 58; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; animation: grain 1.2s steps(4) infinite }
@keyframes grain {
  0% { transform: translate(0, 0) }
  25% { transform: translate(-2%, 1.5%) }
  50% { transform: translate(1.5%, -2%) }
  75% { transform: translate(-1%, -1%) }
  100% { transform: translate(2%, 2%) }
}
@media (max-width:879px) {
  html[data-motion] .grain { animation: none; opacity: .045 }
}

/* 밴드 사이 구분선 대신 색 띠가 흐르는 라인 */
html[data-motion="c"] .sec.tint .hd::after { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 3px; background: linear-gradient(90deg, var(--wine), var(--gold-l)); border-radius: 3px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease) .2s }
html[data-motion="c"] .sec.tint .hd.in::after { transform: scaleX(1) }
@media (prefers-reduced-motion:reduce) {
  html[data-motion] .sec.tint::before, html[data-motion] .sec.tint::after, html[data-motion] .form-sec::before, html[data-motion] .grain { animation: none }
}

/* ================= v47: 리뷰 반영 ================= */
.icons+.hd, .rail-hint+.hd, .vs+.hd { margin-top: clamp(64px, 8vw, 112px) !important }
.svc h3 { font-size: 15.5px }
@media (max-width:879px) {
  .svc h3 { font-size: 17.5px }
  .icons+.hd, .rail-hint+.hd, .vs+.hd { margin-top: 56px !important }
}

/* ================= v48: 컬러 플로우 배경 (html[data-bg="flow"]) — 섹션마다 색이 깊어지고 스크롤에 따라 섞임 ================= */
html[data-bg="flow"] body { background: var(--flow, #fff); transition: none }
html[data-bg="flow"] .sec, html[data-bg="flow"] .sec.tint, html[data-bg="flow"] .form-sec, html[data-bg="flow"] #benefit, html[data-bg="flow"] #why { background: transparent !important }
html[data-bg="flow"] .sec.tint::before, html[data-bg="flow"] .sec.tint::after, html[data-bg="flow"] .form-sec::before { display: none }
html[data-bg="flow"] .grain { opacity: .04 }

/* 어두운 섹션: 섹션 글자만 반전 — 카드 내부는 원래 색 유지 */
html[data-bg="flow"] .sec.dk { color: #fff }
html[data-bg="flow"] .sec.dk .hd h2, html[data-bg="flow"] .sec.dk .hd p, html[data-bg="flow"] .sec.dk .k, html[data-bg="flow"] .sec.dk .note-line, html[data-bg="flow"] .sec.dk .rail-hint, html[data-bg="flow"] .sec.dk .more summary, html[data-bg="flow"] .sec.dk .mx p, html[data-bg="flow"] .sec.dk .ben-note, html[data-bg="flow"] .sec.dk>.w>.chip { color: #fff }
html[data-bg="flow"] .sec.dk .hd p, html[data-bg="flow"] .sec.dk .rail-hint, html[data-bg="flow"] .sec.dk .more summary, html[data-bg="flow"] .sec.dk .ben-note { opacity: .82 }
html[data-bg="flow"] .sec.dk .hd h2 em, html[data-bg="flow"] .sec.dk .note-line em, html[data-bg="flow"] .sec.dk .k i { color: var(--gold-l) }
html[data-bg="flow"] .sec.dk .hd .k::before { background: var(--gold-l) }
html[data-bg="flow"] .sec.dk .hd .gn { color: #fff }
html[data-bg="flow"] .sec.dk .hd.in .gn { opacity: .07 }
html[data-bg="flow"] .sec.dk .more { border-color: rgba(255, 255, 255, .25) }
html[data-bg="flow"] .sec.dk .btn.ol { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5) }
html[data-bg="flow"] .sec.dk .btn.g { background: #fff; color: var(--wine); box-shadow: 0 10px 26px rgba(0, 0, 0, .25) }
html[data-bg="flow"] .sec.dk .btn.g:hover { background: #FBF4EC }
html[data-bg="flow"] .sec.dk .rail-hint svg, html[data-bg="flow"] .sec.dk .more summary::after { color: #fff }

/* 흰 카드 안쪽은 전부 원래 잉크색으로 복구 */
html[data-bg="flow"] .sec.dk .tier, html[data-bg="flow"] .sec.dk .way, html[data-bg="flow"] .sec.dk .day, html[data-bg="flow"] .sec.dk .rev, html[data-bg="flow"] .sec.dk .svc, html[data-bg="flow"] .sec.dk .ben, html[data-bg="flow"] .sec.dk .ic, html[data-bg="flow"] .sec.dk .info, html[data-bg="flow"] .sec.dk .card, html[data-bg="flow"] .sec.dk .rcard, html[data-bg="flow"] .sec.dk .slide { color: var(--ink) }
html[data-bg="flow"] .sec.dk .rev .txt, html[data-bg="flow"] .sec.dk .svc p, html[data-bg="flow"] .sec.dk .ben p, html[data-bg="flow"] .sec.dk .tier .chip, html[data-bg="flow"] .sec.dk .day p { color: var(--ink-2) }
html[data-bg="flow"] .sec.dk .rev .who span, html[data-bg="flow"] .sec.dk .rev .stay { color: var(--soft) }
html[data-bg="flow"] .sec.dk .rev .lnk, html[data-bg="flow"] .sec.dk .svc .n, html[data-bg="flow"] .sec.dk .ben .bc { color: var(--wine) }
html[data-bg="flow"] .sec.dk .ben.dark .bc { background: var(--wine); color: #fff }
html[data-bg="flow"] .sec.dk .ben.dark { color: var(--ink) }

/* 어두운 배경 위 카드 테두리 */
html[data-bg="flow"] .sec.dk .rev, html[data-bg="flow"] .sec.dk .svc, html[data-bg="flow"] .sec.dk .ben, html[data-bg="flow"] .sec.dk .tier, html[data-bg="flow"] .sec.dk .day { border-color: rgba(255, 255, 255, .14) }
html[data-bg="flow"] .sec.dk .mq span { color: rgba(255, 255, 255, .85) }
html[data-bg="flow"] .sec.dk .mq i { color: var(--gold-l) }

/* 밴드는 그대로. 퀵내비는 반투명 유지 */

/* ================= v49: CTA 아래 숨 쉬는 여백 ================= */
.cta-row { margin-bottom: clamp(20px, 3vw, 44px) }
.sec { padding-bottom: clamp(76px, 9.5vw, 148px) }
.sec>.w>.cta-row:last-child, .sec>.w:last-child>.cta-row:last-child { margin-bottom: clamp(8px, 1.4vw, 20px) }
.band+.sec, .sec+.band { margin-top: clamp(8px, 1.6vw, 26px) }
@media (max-width:879px) {
  .cta-row { margin-top: 40px; margin-bottom: 30px }
  .sec { padding-bottom: 84px }
}

/* ================= v50: 풀빌라 VS 리조트 설명 · 여백 · 날짜 피커 ================= */
.vs-c .vsx { margin: 1px 0 9px; font-size: 13.5px; line-height: 1.65; color: #fff; opacity: .92; text-shadow: 0 1px 10px rgba(0, 0, 0, .45) }
@media (max-width:879px) {
  .vs-c .vsx { font-size: 14px }
}
.vs-c { min-height: clamp(300px, 34vw, 420px) }
.vs-c::after { inset: 12% 0 0 }
.vs+.hd { margin-top: clamp(88px, 10.5vw, 156px) !important }
@media (max-width:879px) {
  .vs+.hd { margin-top: 76px !important }
}
.wedrow .inp[type=date] { cursor: pointer }

/* ================= v56: 신뢰 숫자 — 단위가 숫자 옆에 붙도록 ================= */
.trust li { grid-template-columns: auto minmax(0, 1fr) }
.trust i { justify-self: start; align-self: baseline; white-space: nowrap }
@media (min-width:560px) and (max-width:1100px) {
  .trust { gap: clamp(14px, 2vw, 30px) }
}

/* v58: 밴드 배경 선명도 — transform:scale()로 확대하면 브라우저가 래스터를 확대 전 크기로 굽고 GPU로 늘려서(특히 will-change + 고DPI) 흐릿해진다. → 요소 자체를 세로로 크게 만들고 transform은 "이동"만 하게 바꾼다. */
.band .ph { inset: auto 0; top: -11%; height: 122%; transform: translate3d(0, var(--py, 0), 0) }
html[data-motion] .band .ph { top: -24%; height: 148%; transform: translate3d(0, var(--py, 0), 0) }
@media (prefers-reduced-motion:reduce) {
  .band .ph { top: -11%; height: 122%; transform: none !important }
}

/* seo_patch: 히어로 picture */
.cover .m-ph { background-image: none !important }
.cover .m-ph picture, .cover .m-ph img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.cover .m-ph img { object-fit: cover; object-position: 50% 58% }
@media (max-width:879px) {
  .cover .m-ph img { object-position: 50% 40% }
}

/* mobile font size up */
@media (max-width:759px) {
  body { font-size: 17.5px }
  .btn { font-size: 18px }
  .btn.g::after { font-size: 17px }
  .btn.sm { font-size: 17px }
  .qnav li a { font-size: 16.5px }
  .qnav li a .n { font-size: 14px }
  .qnav .cta { font-size: 16.5px }
  .hd .k { font-size: 14px }
  .hd .k i { font-size: 16px }
  .hd h2 { font-size: clamp(24px, 2.9vw, 38px) }
  .hd p { font-size: 17.5px }
  .more summary { font-size: 16px }
  .more summary::after { font-size: 15px }
  .more .mx { font-size: 17px }
  .band .t b { font-size: clamp(21px, 2.4vw, 30px) }
  .band .t span { font-size: 15.5px }
  .tile .n { font-size: 15px }
  .tile h3 { font-size: clamp(20px, 2vw, 25px) }
  .tile p { font-size: 15.5px }
  .ic b { font-size: 17.5px }
  .ic span { font-size: 15px }
  .tier .pic .bdg { font-size: 14.5px }
  .tier h3 { font-size: 22px }
  .chip { font-size: 15.5px }
  .tier .pr { font-size: 15.5px }
  .tier .pr b { font-size: 18px }
  .way h3 { font-size: 22px }
  .way .bdg { font-size: 14px }
  .way .sub { font-size: 16.5px }
  .way li { font-size: 16.5px }
  .way li i { font-size: 15px }
  .note-line { font-size: clamp(18px, 1.9vw, 23px) }
  .rcard h3 { font-size: 23px }
  .rcard .tags span { font-size: 14.5px }
  .rcard p { font-size: 15.5px }
  .rcard .add { font-size: 15.5px }
  .rail-hint { font-size: 15.5px }
  .vs-c h3 { font-size: 24px }
  .vs-c .tags span { font-size: 15px }
  .day .pic .dn { font-size: 15px }
  .day h3 { font-size: 17.5px }
  .day p { font-size: 15.5px }
  .rev .av { font-size: 16px }
  .rev .who b { font-size: 17.5px }
  .rev .who span { font-size: 15px }
  .rev .soon { font-size: 15.5px }
  .ben .n { font-size: 22px }
  .ben h3 { font-size: 21px }
  .ben .hl { font-size: 17.5px }
  .ben .todo { font-size: 15.5px }
  .fdates span { font-size: 16px }
  .faddr { font-size: 16.5px }
  .fld .lb { font-size: 16px }
  .fld .lb em { font-size: 14px }
  .inp { font-size: 18px }
  .err { font-size: 15.5px }
  .dts span { font-size: 23px }
  .dts span small { font-size: 14px }
  .chips-f span { font-size: 16.5px }
  .chip-note { font-size: 15.5px }
  .chk { font-size: 16.5px }
  .agree { font-size: 16.5px }
  .priv { font-size: 15px }
  .sub-note { font-size: 15.5px }
  .f .bag { font-size: 16px }
  .done h3 { font-size: 24px }
  .done p { font-size: 17.5px }
  .map .pin b { font-size: 16.5px }
  .map .open { font-size: 16px }
  .info dl { font-size: 17.5px }
  .info dt { font-size: 15px }
  footer { font-size: 15.5px }
  footer b { font-size: 17px }
  .fab .t { font-size: 16px }
  .fab .t b { font-size: 17px }
  .fab .go { font-size: 16.5px }
  .rev .ph-note { font-size: 15px }
  .ben .todo small { font-size: 14.5px }
  .c-top .bd { font-size: 17px }
  .c-top .sub { font-size: 15px }
  .c-top .kk { font-size: 16px }
  .eyebrow { font-size: clamp(15px, 1.4vw, 16.5px) }
  .cover .lead { font-size: clamp(17px, 1.8vw, 22px) }
  .dates .d b { font-size: clamp(26px, 3.4vw, 36px) }
  .dates .d i { font-size: 16px }
  .dates .enc { font-size: 14.5px }
  .dates .enc b { font-size: 16.5px }
  .cover .place { font-size: 16.5px }
  .cover .meta { font-size: 15.5px }
  .cover .meta b { font-size: 16px }
  .rev .txt { font-size: 17px }
  .rev .tags span { font-size: 14.5px }
  .rev .stay { font-size: 15.5px }
  .rev .lnk { font-size: 15.5px }
  .rev .lnk::after { font-size: 15px }
  .waytabs button { font-size: 16.5px }
  .svc h3 { font-size: 17.5px }
  .svcs .svc:last-child p { font-size: 16px }
  .more>summary { font-size: 15px }
  .fs-k { font-size: 14px }
  .fside h2 { font-size: clamp(26px, 2.6vw, 36px) }
  .fs-dates b { font-size: 26px }
  .fs-dates i { font-size: 15.5px }
  .fs-ad { font-size: 16.5px }
  .fs-pts li { font-size: 16.5px }
  .fhead h3 { font-size: 22px }
  .fhead p { font-size: 16.5px }
  .lb { font-size: 16px }
  .lb em { font-size: 14px }
  .lb .opt { font-size: 14.5px }
  .inp { font-size: 17.5px }
  .err { font-size: 15.5px }
  .dts span b { font-size: 24px }
  .dts span small { font-size: 15px }
  .chk { font-size: 16.5px }
  .chips-f span { font-size: 16.5px }
  .chip-note { font-size: 15.5px }
  .bag { font-size: 16px }
  .agree { font-size: 16.5px }
  .priv { font-size: 15.5px }
  .btn.full { font-size: 19px }
  .sub-note { font-size: 15.5px }
  .cd i { font-size: clamp(18px, 1.8vw, 26px) }
  .cd-ad { font-size: clamp(16px, 1.1vw, 17px) }
  .cover .lead { font-size: 17.5px }
  .cd i { font-size: 18px }
  .cd-ad { font-size: 16px }
  .qnav li a { font-size: 15.5px }
  .icons .ic b { font-size: 17.5px }
  .icons .ic span { font-size: 15.5px }
  .kfab .kl { font-size: 16px }
  .cd i { font-size: clamp(18px, 1.8vw, 26px) }
  .cd-pl b { font-size: clamp(30px, 4.2vw, 62px) }
  .cd-ad { font-size: clamp(17px, 1.2vw, 20px) }
  .cd i { font-size: 18px }
  .cd-pl b { font-size: clamp(28px, 7.8vw, 38px) }
  .cd-ad { font-size: 17px }
  .cover .lead { font-size: clamp(18px, 1.9vw, 24px) }
  .cd i { font-size: clamp(17px, 1.5vw, 22px) }
  .cd-pl b { font-size: clamp(26px, 3.3vw, 48px) }
  .cd-ad { font-size: clamp(16px, 1.1vw, 18px) }
  .cover .lead { font-size: 17.5px }
  .cd i { font-size: 17px }
  .cd-pl b { font-size: clamp(24px, 6.6vw, 32px) }
  .cd-ad { font-size: 16.5px }
  .fab .eu { font-size: 16.5px }
  .eu-strip { font-size: 15.5px }
  .trust b { font-size: clamp(30px, 3.2vw, 48px) }
  .trust i { font-size: clamp(17px, 1.3vw, 20px) }
  .trust span { font-size: 15.5px }
  .trust em { font-size: 13px }
  .trust b { font-size: clamp(24px, 6.4vw, 30px) }
  .trust i { font-size: 15.5px }
  .trust span { font-size: 14px }
  .trust em { font-size: 12px }
  .fabrow .eu { font-size: 16.5px }
  .eu-strip { font-size: 16px }
  .fab .t { font-size: 15.5px }
  .fab .go { font-size: 16px }
  .info dt { font-size: 15px }
  .ben .bc { font-size: 14.5px }
  .ben h3 { font-size: clamp(17.5px, 1.2vw, 20px) }
  .ben p { font-size: 15.5px }
  .ben-note { font-size: 15.5px }
  .ben h3 { font-size: 17.5px }
  .ben p { font-size: 14.5px }
  .ben .bc { font-size: 13.5px }
  .ben h3 { font-size: 18px }
  .ben p { font-size: 15px }
  .ben.dark h3 { font-size: 19px }
  .tier .pr small { font-size: 15px }
  .tier .pr b { font-size: 26px }
  .tier .pr b i { font-size: 20px }
  .tier .pr span { font-size: 14.5px }
  .svc .n { font-size: 16px }
  .svc h3 { font-size: 19px }
  .svc p { font-size: 16.5px }
  .slide .ar { font-size: 14px }
  .slide h3 { font-size: clamp(21px, 2.2vw, 25px) }
  .slide .nm p { font-size: 15.5px }
  .slide .add { font-size: 16px }
  .count { font-size: 16px }
  .count b { font-size: 18px }
  .cd-pl b { font-size: clamp(24px, 6.2vw, 30px) }
}

/* mobile titles */
@media (max-width:759px) {
  .hd h2, .hd h2[style] { font-size: clamp(28px, 8.2vw, 34px) !important; line-height: 1.32; max-width: none }
  .hd .k { font-size: 15px }
  .hd .k i { font-size: 17px }
  .hd p { font-size: 18px; line-height: 1.8 }
  .tier h3, .way h3 { font-size: 25px }
  .vs-c h3, .fhead h3 { font-size: 26px }
  .ben h3, .slide h3 { font-size: 23px }
  .svc h3, .day h3 { font-size: 21px }
  .cover h1 { font-size: clamp(46px, 14.4vw, 64px) }
}

/* mobile spacing */
@media (max-width:759px) {
  .sec { padding-block: 68px }
  .hd { gap: 16px; margin-bottom: 30px }
  .hd p { margin-top: 4px }
  .sec .cta-row { margin-top: 32px }
  .tiers, .ways, .revs, .bens, .svcs { gap: 16px }
  .icons .ic, .ic { padding: 24px 14px 22px; gap: 9px }
  .tier .b { padding: 22px 22px 24px; gap: 11px }
  .tier .pr { margin-top: 6px; padding-top: 15px }
  .way { padding: 28px 22px 30px; gap: 13px }
  .way ul { gap: 11px }
  .way li { line-height: 1.75 }
  .ben { padding: 30px 24px 32px; gap: 12px }
  .vs-c .b { padding: 24px; gap: 10px }
  .day .b { padding: 16px 16px 18px; gap: 7px }
  .day p { line-height: 1.7 }
  .rev .rb { padding: 22px 22px 24px; gap: 13px }
  .rev .txt { line-height: 1.9 }
  .info { padding: 28px 24px }
  .info dl { gap: 16px 18px }
  .info .row { margin-top: 24px }
  .fhead { margin-bottom: 24px }
  .f2 { gap: 22px }
  .fld { gap: 10px }
  .lb { margin-bottom: 2px }
  footer { line-height: 2.1 }
}

/* 직접 다녀온 리조트: 흐르는 글씨 흰색 띠 */
.mq { position: relative; background: #fff; border-block: 1px solid var(--rule); padding: clamp(11px, 1.5vw, 15px) 0; margin: clamp(14px, 2vw, 22px) 0 clamp(18px, 2.4vw, 28px); mask-image: none; -webkit-mask-image: none }
.mq::before, .mq::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 1; pointer-events: none }
.mq::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)) }
.mq::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)) }

/* 오시는 길: 구글지도 임베드 */
.map { min-height: clamp(340px, 48vw, 520px) }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }

/* STAY 지역 카드 4장: PC는 슬라이드 없이 4칸으로 한 번에, 모바일·태블릿은 기존 슬라이드 */
@media (min-width:900px) {
  .rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: visible; scroll-snap-type: none; max-width: 1200px; margin-inline: auto; padding-inline: 20px; box-sizing: border-box; cursor: default; mask-image: none; -webkit-mask-image: none }
  .rcard { width: auto }
  .rail-hint.only-m { display: none }
  .rail-nav { display: none !important }
}