/* ── 플레이스198 디자인 시스템 ───────────────────────── */
:root {
  /* 낮 */
  --day-bg: #fafaf8; --day-ink: #1a1a1a; --day-sub: #6b6b6b; --day-line: #e6e4df;
  /* 밤 */
  --night-bg: #14101c; --night-ink: #f3eefc; --night-sub: #b9b0cc; --night-line: #2a2438;
  --glow-a: #ff5fb4; --glow-b: #8b5cff;
  /* 그린화이트 */
  --sage-bg: #f3f6ef; --sage-ink: #23301f; --sage-accent: #5d7a52; --sage-line: #dfe6d8;

  /* 현재 테마(스크롤에 따라 JS가 바꿈) */
  --bg: var(--day-bg); --ink: var(--day-ink); --sub: var(--day-sub); --line: var(--day-line);

  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-title: "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --max: 1200px; --gutter: clamp(16px, 4vw, 48px);
  --r-s: 12px; --r-m: 16px; --r-l: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.7 var(--font-body); letter-spacing: -.01em; word-break: keep-all;
  transition: background-color 1.6s var(--ease), color 1.6s var(--ease);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
:focus-visible { outline: 2px solid var(--glow-b); outline-offset: 3px }

h1, h2, h3 { font-family: var(--font-title); font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -.02em }
h1 { font-size: clamp(30px, 6vw, 72px) }
h2 { font-size: clamp(26px, 4vw, 44px) }
h3 { font-size: clamp(19px, 2.2vw, 24px) }
.eyebrow { font: 500 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sub) }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--sub); max-width: 60ch }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) }
section { position: relative; padding: clamp(56px, 12vw, 160px) 0 }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 64px) }

/* 버튼 */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; transition: transform .3s var(--ease), background .3s, color .3s; white-space: nowrap }
.btn:hover { transform: translateY(-2px) }
.btn-solid { background: var(--ink); color: var(--bg) }
.btn-ghost { border: 1px solid var(--line) }
.btn-glow { background: var(--ink); color: var(--bg) }

/* 헤더 */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; transition: padding .4s var(--ease), background .4s, backdrop-filter .4s }
.header.is-scrolled { padding: 10px var(--gutter); background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line) }
.logo { font: 700 18px/1 var(--font-body); letter-spacing: .12em }
.nav { display: none; gap: 28px; font-size: 14px; font-weight: 500 } .header > .btn { display: none } @media (min-width: 900px) { .header > .btn { display: inline-flex } }
.nav a { opacity: .75; transition: opacity .2s } .nav a:hover { opacity: 1 }
@media (min-width: 900px) { .nav { display: flex } .clock { bottom: 28px } }

/* 하단 고정 바 */
.dock { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  display: flex; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(0,0,0,.18) }
.dock a { padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap }
.dock a.primary { background: var(--ink); color: var(--bg) }
.dock .amount { display: none; font-variant-numeric: tabular-nums; opacity: .8 }
.dock.has-amount .amount { display: inline }

/* 섹션 자리(1단계) */
.placeholder { border: 1px dashed var(--line); border-radius: var(--r-l); padding: 40px; color: var(--sub); font-size: 14px }

/* 테마 구간 표시용 */
[data-theme="night"] { --bg: var(--night-bg); --ink: var(--night-ink); --sub: var(--night-sub); --line: var(--night-line) }
[data-theme="sage"]  { --bg: var(--sage-bg);  --ink: var(--sage-ink);  --sub: var(--sage-accent); --line: var(--sage-line) }

/* 히어로: 고정 + 낮→밤 */
.hero { min-height: 100svh; display: grid; align-items: end; padding: 0; overflow: hidden; color: #fff; background: #0e0b14 }
.hero-media { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 55% }
.hero-layer { position: absolute; inset: 0; bottom: auto; width: 100%; height: max(100%, 100lvh); object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity .6s linear }
.hero-layer.is-on { opacity: 1 }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 55%, rgba(8,6,12,.88) 100%) }
.hero-copy { position: relative; z-index: 1; padding-bottom: clamp(110px, 14vh, 150px); display: grid; gap: 14px; max-width: min(var(--max), 100%) }
.hero .eyebrow { color: rgba(255,255,255,.78) }
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.55) }
.hero .lead { color: rgba(255,255,255,.88); font-size: 16px; text-shadow: 0 1px 12px rgba(0,0,0,.5) }
@media (min-width: 900px) { .hero-copy { gap: 18px } .hero .lead { font-size: clamp(17px, 1.6vw, 20px) } }
.hero .line { display: block; overflow: hidden }
.reveal { opacity: 0; transform: translateY(28px) }
body.is-ready .reveal { animation: rise .9s var(--ease) forwards }
body.is-ready .hero .eyebrow { animation-delay: .25s } body.is-ready .hero h1 .reveal { animation-delay: .4s } body.is-ready .hero .line:nth-child(2) .reveal { animation-delay: .52s }
body.is-ready .hero .lead { animation-delay: .7s } body.is-ready .hero-actions { animation-delay: .85s } body.is-ready .scroll-hint { animation-delay: 1.3s }
@keyframes rise { to { opacity: 1; transform: none } }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap }
.btn-outline { border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.btn-outline:hover { background: #fff; color: #111 } .btn-outline i { font-style: normal; transition: transform .3s } .btn-outline:hover i { transform: translateX(4px) }
.link-arrow { font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px } .link-arrow::after { content: " ↓"; opacity: .7 }
.clock { position: absolute; right: var(--gutter); top: 88px; z-index: 1; text-align: right; display: grid; gap: 2px }
.clock-time { font: 600 clamp(28px, 4vw, 52px)/1 var(--font-title); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(0,0,0,.5) }
.clock-cap { font: 500 12px/1 var(--font-body); letter-spacing: .12em; opacity: .8 }
.scroll-hint { display: none; position: absolute; left: var(--gutter); bottom: 28px; z-index: 1; font: 500 12px/1 var(--font-body); letter-spacing: .12em; align-items: center; gap: 10px; opacity: 0 }
.scroll-hint span { width: 1px; height: 36px; background: linear-gradient(#fff, transparent); animation: drip 1.6s ease-in-out infinite }
@keyframes drip { 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 (min-width: 900px) { .scroll-hint { display: flex } }

.light-label { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 150px; z-index: 2; color: #fff; display: grid; gap: 6px; max-width: var(--max); margin: 0 auto }
.light-label .eyebrow { color: rgba(255,255,255,.75) }
.light-label h2 { font-size: clamp(48px, 9vw, 120px); line-height: 1; letter-spacing: -.03em; text-shadow: 0 4px 40px rgba(0,0,0,.5) }
.light-desc { margin: 0; font-size: clamp(15px, 1.6vw, 20px); color: rgba(255,255,255,.85) }
.swatches { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 70px; z-index: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px } .swatches::-webkit-scrollbar { display: none }
.swatch { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 13px; font-weight: 600; background: rgba(0,0,0,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s }
.swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--c) }
.swatch:hover { transform: translateY(-2px) }
.swatch.is-active { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 0 30px color-mix(in srgb, var(--c) 45%, transparent) }
.light-note { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px; z-index: 2; font-size: 12px; color: rgba(255,255,255,.6); margin: 0 }
/* 전구 색 체험(히어로 스위칭) */
.lab { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .6s var(--ease) } .lab[hidden] { display: none }
.hero.is-lab .lab { opacity: 1 }
.hero.is-lab .hero-copy, .hero.is-lab .clock, .hero.is-lab .scroll-hint { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s .4s }
.hero-copy, .clock { transition: opacity .4s }
.lab-open { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); color: #fff; cursor: pointer; font-family: inherit } .lab-open::after { content: " ✦" }
.lab-close { position: absolute; right: var(--gutter); top: 88px; z-index: 3; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.3); color: #fff; font: 600 13px/1 var(--font-body); cursor: pointer; backdrop-filter: blur(8px) }
.lab-close:hover { background: #fff; color: #111 }
@media (max-width: 899px) { .light-label { bottom: 250px } .light-label h2 { font-size: 56px } .swatches { bottom: 150px; flex-wrap: wrap; overflow: visible } .light-note { bottom: 96px } }

/* 섹션 고정 리빌 */
.pin-reveal > .wrap > *, .pin-reveal .cards .card, .pin-reveal .calc, .pin-reveal .bridal-grid > *, .pin-reveal .stats > div { will-change: transform, opacity }

/* 핫스팟 */
.hot { position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.35); transform: translate(-50%,-50%); z-index: 2 }
.hot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #fff; animation: pulse 2s ease-out infinite }
@keyframes pulse { from { transform: scale(.8); opacity: .9 } to { transform: scale(1.9); opacity: 0 } }
.hot span { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 6px); background: #14101c; color: #fff; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .25s var(--ease); max-width: 70vw; z-index: 5 }
.hot.flip span { bottom: auto; top: 22px; transform: translate(-50%, -6px) } .hot.edge-l span { left: 0; transform: translate(0, 6px) } .hot.edge-r span { left: auto; right: 0; transform: translate(0, 6px) }
.hot:hover span, .hot:focus-visible span, .hot.is-open span { opacity: 1; transform: translate(-50%, 0) } .hot.flip:hover span, .hot.flip.is-open span { transform: translate(-50%, 0) } .hot.edge-l:hover span, .hot.edge-l.is-open span, .hot.edge-r:hover span, .hot.edge-r.is-open span { transform: translate(0, 0) }

.hot-out { display: none !important } @media (pointer: coarse) { .hot-out { display: block; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; background: rgba(20,16,28,.85); color: #fff; font-size: 14px; font-weight: 500; padding: 10px 14px; border-radius: 10px; opacity: 0; transform: translateY(6px); transition: .25s var(--ease); pointer-events: none } .hot-out.is-on { opacity: 1; transform: none } .tour-card .hot-out { bottom: 76px } }

/* 공간 투어(가로) */
.tour { padding: 0; overflow: hidden }
.tour-pin { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; padding: 96px 0 40px }
.tour-track { display: flex; gap: 20px; padding: 0 var(--gutter); will-change: transform; width: 100%; overflow-x: auto } .tour.is-pinned .tour-track { overflow: visible }
.tour-card { position: relative; margin: 0; width: min(60vw, 640px); aspect-ratio: 16/10; border-radius: var(--r-l); overflow: hidden; background: #1f1a2b; flex: none }
.tour-card img { width: 100%; height: 100%; object-fit: cover }
.tour-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 20px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; display: grid; gap: 4px }
.tour-card figcaption b { font: 600 20px/1.2 var(--font-title) } .tour-card figcaption span { font-size: 14px; opacity: .85 }
.tour-end { display: grid; align-content: center; padding: clamp(24px, 3.4vw, 44px); background: #1f1a2b; color: var(--night-ink) }
.tour-end .amen { display: grid; gap: 10px; width: 100% }
.tour-end h3 { color: #fff; font-size: clamp(22px, 2.4vw, 30px) }
.tour-end ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px }
.tour-end li { padding: 14px 0; font-size: 17px; line-height: 1.4; color: #fff; border-bottom: 1px solid rgba(255,255,255,.16) }
@media (max-width: 899px) { .tour-end { padding: 16px 18px; align-content: center } .tour-end .amen { gap: 4px } .tour-end h3 { display: none } .tour-end ul { margin-top: 4px; column-gap: 14px } .tour-end li { font-size: 13px; padding: 6px 0; line-height: 1.35 } }  /* 모바일: 사진 카드와 같은 높이(16:10) 안에 들어가게 압축 */
.tour-progress { margin: 0 var(--gutter); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden } .tour-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--glow-a), var(--glow-b)) }
@media (max-width: 899px) { .tour-pin { min-height: auto } .tour-track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px } .tour-card { scroll-snap-align: start; width: 84vw } .tour-progress { display: none } }

.tour-head { display: grid; gap: 10px; width: 100% } .tour-head .lead { font-size: 16px }

/* 카드 */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr) } @media (min-width: 900px) { .cards { gap: 16px; grid-template-columns: repeat(4, 1fr) } }
.card { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4/5; background: #222; color: #fff; transform-style: preserve-3d; transition: box-shadow .5s }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease) }
.card:hover img { transform: scale(1.06) } .card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.35) }
.card-body { position: absolute; inset: auto 0 0 0; padding: 60px 14px 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: grid; gap: 6px }
.card-body p { margin: 0; font-size: 13px; opacity: .9 } .card h3 { font-size: 18px } @media (min-width: 900px) { .card-body { padding: 60px 20px 22px } .card-body p { font-size: 14px } }
.card.in { animation: cardIn .8s var(--ease) both } @keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotateX(8deg) } }

/* 계산기 */
.calc { display: grid; gap: 24px; border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(18px, 3vw, 32px); background: color-mix(in srgb, var(--bg) 92%, var(--ink) 8%) }
@media (min-width: 900px) { .calc { grid-template-columns: 1.4fr 1fr } }
.calc fieldset { border: 0; padding: 0; margin: 0 0 26px } .calc legend { font-weight: 700; margin-bottom: 12px }
.seg { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
.seg label { cursor: pointer } .seg input { position: absolute; opacity: 0 }
.seg span { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-m); transition: .25s } .seg em { font-style: normal; font-size: 13px; color: var(--sub) }
.seg input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) } .seg input:focus-visible + span { outline: 2px solid var(--glow-b) }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px } .row[hidden] { display: none } .row > label { font-weight: 500 }
.stepper { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px }
.stepper button { width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1 } .stepper button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent) }
.stepper output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums } .stepper span { font-size: 13px; color: var(--sub); padding-right: 6px }
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500 } .toggle input { position: absolute; opacity: 0 }
.toggle span { width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: .25s; flex: none } .toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.3) }
.toggle input:checked + span { background: var(--sage-accent) } .toggle input:checked + span::after { left: 23px } .toggle input:focus-visible + span { outline: 2px solid var(--glow-b) }
.hint { font-size: 13px; color: var(--sub); margin: 8px 0 0 }
.calc-total { display: grid; align-content: start; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px } @media (min-width: 900px) { .calc-total { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 28px } }
.total { margin: 0; font: 700 clamp(36px, 5vw, 56px)/1 var(--font-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--sub) } .breakdown li { display: flex; justify-content: space-between; gap: 12px }

/* 브샤 */
.bridal-grid { display: grid; gap: 32px } @media (min-width: 900px) { .bridal-grid { grid-template-columns: 1.15fr 1fr; align-items: start; column-gap: 56px } .bridal-left { position: sticky; top: 96px } }
.bridal-media { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 70px rgba(35,48,31,.25) } .bridal-media img { width: 100%; height: auto }
.bridal-copy { display: grid; gap: 16px }
.spec { margin: 0; display: grid; gap: 10px } .spec div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 15px } .spec dt { color: var(--sub); font-weight: 600 } .spec dd { margin: 0 }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .mini img { border-radius: var(--r-m); aspect-ratio: 4/5; object-fit: cover; width: 100% }

/* 후기 */
.stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 8px } .stats div { display: grid; gap: 2px } .stats b { font: 700 40px/1 var(--font-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums } .stats span { font-size: 13px; color: var(--sub) }
.marquee { overflow: hidden; margin: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 48s linear infinite } .marquee[data-dir="-1"] .marquee-track { animation-direction: reverse }
.marquee:hover .marquee-track { animation-play-state: paused }
.marquee q { quotes: none; flex: none; padding: 12px 16px; border: 1px solid var(--line); border-radius: 22px; display: flex; align-items: center; font-size: 14px; line-height: 1.5; max-width: min(78vw, 520px); background: color-mix(in srgb, var(--bg) 85%, var(--ink) 15%) }
@keyframes marquee { to { transform: translateX(-50%) } }

.moments { display: flex; gap: 12px; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none } .moments::-webkit-scrollbar { display: none }
.moments figure { flex: 0 0 min(78vw, 420px); scroll-snap-align: start }
.moments figure { margin: 0; border-radius: var(--r-m); overflow: hidden; position: relative } .moments img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease) } .moments figure:hover img { transform: scale(1.05) }
.moments figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; font-size: 13px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)) }

/* 오시는 길 */
.map-grid { display: grid; gap: 40px } @media (min-width: 900px) { .map-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 48px } .map-grid > :nth-child(2) { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 96px } .map-grid > :nth-child(3), .map-grid > :nth-child(4) { grid-column: 1 } }
.btns { display: flex; gap: 10px; flex-wrap: wrap }
.map-frame { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line) } .map-frame iframe { width: 100%; height: 100%; border: 0; filter: saturate(.9) }
.rules { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px } .rules li { padding: 14px 0; font-weight: 600; border-bottom: 1px solid var(--line) }
.faq { display: grid; gap: 6px; margin-top: 12px } .faq details { border-bottom: 1px solid var(--line) } .faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between } .faq summary::after { content: "+"; opacity: .5 } .faq details[open] summary::after { content: "−" } .faq p { margin: 0 0 14px; color: var(--sub); font-size: 15px }

/* 커스텀 커서 */
.cursor { position: fixed; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); pointer-events: none; z-index: 99; transform: translate(-50%,-50%); transition: width .25s, height .25s, background .25s; mix-blend-mode: difference; display: none; align-items: center; justify-content: center; font: 600 11px/1 var(--font-body); color: #fff }
@media (pointer: fine) { .cursor { display: flex } }
.cursor.is-big { width: 64px; height: 64px; background: #fff; mix-blend-mode: difference }

/* 푸터 */
footer { padding: 48px 0 120px; font-size: 13px; color: var(--sub); border-top: 1px solid var(--line) } footer .wrap { display: grid; gap: 8px } footer a { text-decoration: underline; text-underline-offset: 3px } footer .row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 20px; margin-top: 0 } footer .row:last-child { margin-top: 12px; opacity: .8 }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .reveal { opacity: 1 !important; transform: none !important }
}

.wrap.hint { margin-left: auto; margin-right: auto }

/* 데스크톱: 카드 8장(4×2)이 한 화면에 들어와야 섹션 고정이 된다 */
@media (min-width: 900px) { #occasions { padding: 96px 0 40px } #occasions .sec-head { margin-bottom: 28px } #occasions .card { aspect-ratio: auto; height: calc((100svh - 372px) / 2); min-height: 200px } }

/* 해시 링크로 들어와도 고정 헤더에 제목이 가리지 않게 */
section[id] { scroll-margin-top: 70px }
/* 모바일 메뉴 */
.menu-btn { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer }
.menu-btn i { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .3s var(--ease) }
.menu-btn[aria-expanded=true] i:first-child { transform: translateY(4px) rotate(45deg) } .menu-btn[aria-expanded=true] i:last-child { transform: translateY(-4px) rotate(-45deg) }
@media (max-width: 899px) { .nav.is-open { display: grid; gap: 0; position: absolute; inset: 100% 0 auto 0; padding: 8px var(--gutter) 16px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) } .nav.is-open a { padding: 14px 0; font-size: 16px; opacity: 1; border-bottom: 1px solid var(--line) } .nav.is-open a:last-child { border: 0 } }
@media (min-width: 900px) { .menu-btn { display: none } }

/* 브라이덜: 연출 컷 + 진행 순서 */
.bridal-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px } .bridal-shots figure { margin: 0; position: relative; border-radius: var(--r-m); overflow: hidden } .bridal-shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover }
.bridal-shots figcaption { position: absolute; inset: auto 0 0 0; padding: 24px 10px 8px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)) } .bridal-shots .hint { grid-column: 1 / -1; margin: 0 }
.bridal-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px } @media (min-width: 900px) { .bridal-steps { grid-template-columns: repeat(4, 1fr) } }
.bridal-steps li { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-m); font-size: 13px } .bridal-steps li::before { content: ""; width: 26px; height: 26px; margin-bottom: 4px; background: center / contain no-repeat } .bridal-steps li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23587a4d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%225%22 width=%2217%22 height=%2215%22 rx=%222.5%22/%3E%3Cpath d=%22M3.5 10h17M8 3v4M16 3v4%22/%3E%3C/svg%3E") } .bridal-steps li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23587a4d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z%22/%3E%3Cpath d=%22M18.5 16v4M16.5 18h4%22/%3E%3C/svg%3E") } .bridal-steps li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23587a4d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 8.5h3l1.6-2.5h6.8L17 8.5h3V19H4z%22/%3E%3Ccircle cx=%2212%22 cy=%2213.5%22 r=%223.3%22/%3E%3C/svg%3E") } .bridal-steps li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23587a4d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E") } .bridal-steps span { color: var(--sub) }
@media (max-width: 420px) { .dock a { padding: 12px 12px; font-size: 13px } }
.bridal-left { display: grid; gap: 14px } @media (min-width: 900px) { .mini img { aspect-ratio: 4/3 } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
/* 모바일 계산기: 촘촘하게 */
@media (max-width: 899px) { .calc { gap: 16px; padding: 16px } .calc fieldset { margin-bottom: 18px } .calc legend { margin-bottom: 8px } .seg label span { padding: 12px } .calc-total .total { font-size: 40px } .calc-total { padding-top: 16px } }
.tour-hint { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 500 12px/1 var(--font-body); letter-spacing: .12em } .tour-hint span { order: 1; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); animation: slide-x 1.6s ease-in-out infinite } @keyframes slide-x { 0% { transform: scaleX(0); transform-origin: left } 50% { transform: scaleX(1); transform-origin: left } 51% { transform-origin: right } 100% { transform: scaleX(0); transform-origin: right } } .tour-hint em { font-style: normal } .tour-hint .h-d { display: none }
@media (min-width: 900px) { .tour-hint .h-m { display: none } .tour-hint .h-d { display: inline } }
.bridal-shots figure { cursor: pointer; outline-offset: 2px; transition: transform .2s } .bridal-shots figure:hover { transform: translateY(-2px) } .bridal-shots figure.is-on { outline: 2px solid var(--ink, #23301f) } .bridal-media.is-shot .hot, .bridal-media.is-shot .hot-out { display: none !important }
.moments { cursor: grab } .moments.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto } .moments img { -webkit-user-drag: none; user-select: none }
.moments-nav { display: none; gap: 8px; justify-content: flex-end; max-width: var(--max); margin: 12px auto 0; padding: 0 var(--gutter) } .moments-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; font-size: 16px; cursor: pointer; opacity: .8 } .moments-nav button:hover { opacity: 1 }
@media (hover: hover) and (pointer: fine) { .moments-nav { display: flex } }