/* 강남 007 공통 스타일: 로즈골드 톤 */
:root {
  --night: #150c0f;
  --wine: #2b141a;
  --wine-line: #5a333d;
  --paper: #fcf5f0;
  --paper-deep: #f6e7df;
  --paper-bright: #fffaf7;
  --ink: #2a181c;
  --ink-soft: #664d52;
  --rule: #e6d1c7;
  --rose: #e9b7a4;
  --rose-light: #f8e0d4;
  --rose-mid: #c98a7d;
  --rose-deep: #8b474e;
  --on-dark: #fbeee8;
  --on-dark-soft: #cdb8b5;
  --rose-gradient: linear-gradient(115deg, #f9e3d7 0%, #e8b49f 40%, #cf9384 62%, #f4d6c7 100%);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-serif: "Bodoni Moda", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.3; margin: 0; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; line-height: 1.4; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* 제목 아래 로즈골드 선 */
main h2::after {
  content: ""; display: block;
  width: 3.25rem; height: 2px; margin-top: .75rem;
  background: var(--rose-gradient);
  transform-origin: left center;
}
main h2.reveal::after { transform: scaleX(0); transition: transform 1s var(--ease-out) .2s; }
main h2.reveal.is-in::after { transform: scaleX(1); }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
main :focus-visible { outline-color: var(--rose-deep); }
.hero :focus-visible, .band :focus-visible { outline-color: var(--rose); }

.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  padding: .6rem 1rem; background: var(--rose); color: var(--night); border-radius: .25rem;
}
.skip-link:focus { top: .75rem; }

/* 스크롤 진행 표시 */
.scroll-progress {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  height: 2px; pointer-events: none;
  background: var(--rose-gradient);
  transform: scaleX(0); transform-origin: left center;
}

/* 스크롤 등장 효과: 스크립트가 붙인 요소에만 적용 */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .85s var(--ease-out) var(--delay, 0ms), transform .85s var(--ease-out) var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 버튼 */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .7rem 1.5rem;
  border: 1px solid transparent; border-radius: .25rem;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .3s ease;
}
.btn--rose { background: var(--rose-gradient); color: #2a1217; }
.btn--rose::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-180%) skewX(-14deg);
  transition: transform .75s var(--ease-out);
}
.btn--rose:hover { box-shadow: 0 10px 28px -10px rgba(233, 183, 164, .75); transform: translateY(-1px); }
.btn--rose:hover::after { transform: translateX(340%) skewX(-14deg); }
.btn--line { background: transparent; border-color: var(--wine-line); color: var(--on-dark); }
.btn--line:hover { border-color: var(--rose); color: var(--rose); }
.btn--ink { background: var(--wine); color: var(--paper); }
.btn--ink:hover { background: var(--rose-deep); }
.btn--small { min-height: 2.5rem; padding: .35rem 1rem; font-size: .95rem; }

/* 헤더 */
.site-header {
  background: var(--night); color: var(--on-dark);
  border-bottom: 1px solid var(--wine);
  transition: background-color .35s ease, border-color .35s ease;
}
.site-header__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem 1.5rem; padding-block: .75rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__plate {
  padding: .05rem .5rem; border-radius: .15rem;
  background: var(--rose-gradient); color: #2a1217;
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .04em;
}
.brand__name { font-family: var(--font-serif); font-weight: 500; }
.site-nav { display: flex; gap: 1.5rem; justify-content: flex-end; }
.site-nav a {
  position: relative; padding-block: .35rem;
  color: var(--on-dark-soft); font-size: .975rem; text-decoration: none;
  transition: color .25s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rose);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--rose); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }

/* 히어로 */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--on-dark); }
.hero::before {
  content: ""; position: absolute; z-index: -2;
  right: -8%; top: -12%; width: min(62rem, 95%); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(233, 183, 164, .24), rgba(183, 110, 121, .12) 55%, transparent 100%);
  animation: glow-breathe 7s ease-in-out infinite;
}
.hero__dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end; gap: 2rem;
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
}
.hero__copy { padding-bottom: clamp(3rem, 7vw, 5.5rem); animation: slide-in 1.1s var(--ease-out); }
.eyebrow { color: var(--rose); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.hero__title {
  margin-top: .75rem; padding-bottom: .04em;
  font-size: clamp(3.1rem, 9vw, 6.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -.01em;
  background: linear-gradient(110deg, #fff3ec 0%, #f2c8b6 22%, #d39a8b 44%, #fbe6da 62%, #eab9a6 82%, #fff3ec 100%) 0 50% / 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: title-shimmer 10s linear infinite;
}
.hero__title span {
  display: block; margin-top: .35rem;
  color: var(--rose); font-size: .46em; font-weight: 500; letter-spacing: .08em;
}
.hero__lede { margin-top: 1.5rem; max-width: 34rem; color: var(--on-dark-soft); font-size: 1.125rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* 대표 사진: 문이 열리며 매장 외관이 나타납니다.
   문의 기본 상태는 열림이라 애니메이션이 없어도 사진이 보입니다. */
.door {
  position: relative; justify-self: center; isolation: isolate;
  width: min(100%, 24rem); aspect-ratio: 3 / 4.1;
  border-radius: 12rem 12rem 0 0; overflow: hidden;
  perspective: 1100px;
  background: var(--wine);
  box-shadow: 0 0 0 1px var(--rose-mid), 0 0 0 7px rgba(233, 183, 164, .08), 0 -20px 90px -20px rgba(233, 183, 164, .5);
}
.door__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
  transform-origin: 75% 40%;
  animation: photo-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
.door::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 62%, rgba(21, 12, 15, .38));
  box-shadow: inset 0 0 0 1px rgba(248, 224, 212, .35), inset 0 0 60px rgba(21, 12, 15, .35);
}
.door__leaf {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #3d1c25 0%, #2a1219 55%, #1c0b10 100%);
  box-shadow: inset -2px 0 0 rgba(248, 224, 212, .4);
  transform: rotateY(100deg); transform-origin: left center; opacity: 0;
  animation: door-open 2.8s var(--ease-out) .5s backwards;
}
.door__leaf::before {
  content: ""; position: absolute; inset: .9rem .9rem 0;
  border: 1px solid rgba(233, 183, 164, .38); border-bottom: 0;
  border-radius: 10rem 10rem 0 0;
}
.door__leaf::after {
  content: ""; position: absolute; left: 2.1rem; right: 2.1rem; bottom: 1.5rem; height: 26%;
  border: 1px solid rgba(233, 183, 164, .26);
}
.plate {
  position: absolute; left: 50%; top: 31%; z-index: 1; transform: translateX(-50%);
  overflow: hidden;
  width: 62%; padding: .7rem .5rem .8rem;
  border-radius: .3rem;
  background: linear-gradient(135deg, #fbe9de 0%, #e2ab97 45%, #c08678 62%, #f6dacb 100%);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .4);
  color: #3a1820; text-align: center; line-height: 1;
}
.plate::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-200%) rotate(14deg);
  animation: plate-sheen 7s ease-in-out 2.6s infinite;
}
.plate strong {
  display: block;
  font-family: var(--font-serif); font-size: clamp(2.6rem, 6vw, 3.9rem); font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.plate span { display: block; margin-top: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .28em; text-indent: .28em; }
.door__handle {
  position: absolute; right: 1.75rem; top: 58%; z-index: 1;
  width: .5rem; height: 3.4rem; border-radius: 1rem;
  background: linear-gradient(90deg, #f9e3d7, #b97a70);
}

/* 한눈에 보는 정보 */
.facts { position: relative; background: var(--paper-deep); border-bottom: 1px solid var(--rule); }
.facts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rose-gradient); }
.facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.facts__item { padding: 1.4rem 1.5rem 1.4rem 0; }
.facts__item + .facts__item { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.facts dt { color: var(--rose-deep); font-size: .875rem; font-weight: 700; }
.facts dd { margin: .2rem 0 0; font-weight: 600; }
.facts dd a { text-underline-offset: .2em; }
.facts dd small { display: block; color: var(--ink-soft); font-size: .9rem; font-weight: 500; }

/* 공통 섹션 */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--ruled { border-top: 1px solid var(--rule); }
.section--deep { background: var(--paper-deep); }
.section__intro { margin-top: .9rem; max-width: 46rem; color: var(--ink-soft); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.5rem 3rem; }
.split__note { margin-top: .9rem; color: var(--ink-soft); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.duo p { margin-top: .7rem; color: var(--ink-soft); }
.duo--spaced { margin-top: 2.5rem; }
.stack > * + * { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
.text-link { color: var(--rose-deep); font-weight: 700; text-underline-offset: .22em; transition: color .2s ease; }
.text-link:hover { color: var(--ink); }

/* 룸 사진 */
.gallery {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .75rem; aspect-ratio: 2 / 1; margin-top: 2.25rem;
}
.gallery__item { min-width: 0; min-height: 0; }
.gallery__item--large { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: .3rem; background: var(--wine); }
.gallery a { display: block; height: 100%; cursor: zoom-in; }
.gallery a:focus-visible { outline-offset: -4px; outline-color: var(--paper-bright); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 2.25rem 1rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(21, 12, 15, .82));
  color: var(--on-dark); font-size: .92rem; font-weight: 600;
}
.gallery__note { margin-top: .9rem; color: var(--ink-soft); font-size: .9rem; }

/* 룸 사진 크게 보기 */
.lightbox {
  width: min(calc(100% - 1.5rem), 56rem); max-height: calc(100% - 1.5rem); padding: 0;
  border: 1px solid var(--wine-line); border-radius: .4rem;
  background: var(--night); color: var(--on-dark);
  overflow: hidden; color-scheme: dark;
}
.lightbox[open] { animation: lightbox-in .35s var(--ease-out); }
.lightbox::backdrop { background: rgba(12, 6, 8, .92); }
.lightbox__figure { display: flex; flex-direction: column; margin: 0; }
.lightbox__image { width: 100%; max-height: calc(100vh - 6.5rem); max-height: calc(100dvh - 6.5rem); object-fit: contain; background: #000; }
.lightbox__caption { padding: .85rem 1rem; font-size: .95rem; text-align: center; }
.lightbox__button {
  position: absolute; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(233, 183, 164, .5); border-radius: 50%;
  background: rgba(21, 12, 15, .78); color: var(--rose-light);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lightbox__button:hover { background: var(--rose); color: var(--night); }
.lightbox__close { top: .75rem; right: .75rem; }
.lightbox__prev { left: .75rem; top: calc(50% - 2.75rem); }
.lightbox__next { right: .75rem; top: calc(50% - 2.75rem); }

/* 운영 방침 목록 */
.rows { list-style: none; }
.row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .4rem 2rem; padding-block: 1.4rem; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; padding-top: 0; }
.row:last-child { padding-bottom: 0; }
.row p { color: var(--ink-soft); }

/* 어두운 띠: 빛이 천천히 움직입니다 */
.band { position: relative; isolation: isolate; overflow: hidden; background: var(--wine); color: var(--on-dark); }
.band::before {
  content: ""; position: absolute; inset: -35%; z-index: -1;
  background:
    radial-gradient(38% 46% at 26% 34%, rgba(233, 183, 164, .2), transparent 72%),
    radial-gradient(34% 44% at 74% 66%, rgba(183, 110, 121, .3), transparent 72%);
  animation: band-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
.band h2 { margin-top: .5rem; }
.band__answer { margin-top: 1.25rem; max-width: 46rem; color: var(--on-dark); font-size: clamp(1.125rem, 2.2vw, 1.3rem); }
.band .duo p { color: var(--on-dark-soft); }

/* 페이지 내용 바로가기 */
.jump { border-bottom: 1px solid var(--rule); }
.jump__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; padding-block: 1.1rem; }
.jump strong { color: var(--rose-deep); font-size: .9rem; }
.jump ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; }
.jump a { display: inline-block; padding-block: .35rem; color: var(--ink-soft); font-size: .95rem; text-underline-offset: .2em; transition: color .2s ease; }
.jump a:hover { color: var(--rose-deep); }

/* 명세 예시 */
.receipt { position: relative; margin-bottom: 2.75rem; padding: 1.5rem 1.5rem 1.25rem; background: var(--paper-bright); }
.receipt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rose-gradient); }
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.6rem; height: .6rem;
  background:
    linear-gradient(135deg, var(--paper-bright) 50%, transparent 50%) 0 0 / 1.2rem .6rem repeat-x,
    linear-gradient(225deg, var(--paper-bright) 50%, transparent 50%) 0 0 / 1.2rem .6rem repeat-x;
}
.receipt__note { margin-top: .25rem; color: var(--ink-soft); font-size: .92rem; }
.receipt__rows { margin: 1rem 0 0; }
.receipt__rows > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .15rem 1rem; padding-block: .7rem; border-top: 1px dashed var(--rule); }
.receipt__rows dt { font-weight: 700; }
.receipt__rows dd { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.receipt__rows > .receipt__total { border-top: 2px solid var(--rose-mid); }
.receipt__total dd { color: var(--ink); }
.asks__title { margin-bottom: .75rem; }
.asks { list-style: none; }
.asks li { padding-block: .75rem; border-top: 1px solid var(--rule); font-weight: 600; }

/* 주류 안내 */
.trio { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.trio li { padding-top: 1rem; border-top: 2px solid var(--rose-mid); }
.trio p { margin-top: .5rem; color: var(--ink-soft); font-size: 1rem; }
.pour { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.25rem 2.5rem; margin-top: 2.5rem; padding: 1.5rem; background: var(--paper-deep); }
.pour__text p { margin-top: .4rem; color: var(--ink-soft); font-size: 1rem; }
.pour__stat { margin: 0; }
.pour__stat strong { display: block; color: var(--rose-deep); font-family: var(--font-serif); font-size: 2.1rem; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.pour__stat span { color: var(--ink-soft); font-size: .9rem; }

/* 체크리스트 */
.checklist { list-style: none; display: grid; gap: .85rem; }
.checklist li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; }
.checklist li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: .3rem; border: 2px solid var(--rose-mid); border-radius: .15rem; }

/* 용어 사전 */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; margin: 2rem 0 0; }
.glossary > div { padding-block: 1rem; border-top: 1px solid var(--rule); }
.glossary dt { font-weight: 700; }
.glossary dd { margin: .25rem 0 0; color: var(--ink-soft); font-size: 1rem; }

/* 예약 순서 */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 2px solid var(--rose-mid); }
.steps li::before {
  content: counter(step);
  display: block; margin-bottom: .6rem;
  color: var(--rose-deep); font-family: var(--font-serif); font-size: 2.2rem; font-weight: 500; line-height: 1;
}
.steps p { margin-top: .4rem; color: var(--ink-soft); font-size: 1rem; }

/* 자주 묻는 질문 */
.faq { border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3rem; padding-block: 1rem;
  font-weight: 700; cursor: pointer; list-style: none;
  transition: color .2s ease;
}
.faq summary:hover { color: var(--rose-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  color: var(--rose-deep); font-family: var(--font-serif); font-size: 1.5rem; line-height: 1;
  transition: transform .35s var(--ease-out);
}
.faq details[open] summary::after { content: "\2212"; transform: rotate(180deg); }
.faq details p { padding-bottom: 1.25rem; max-width: 46rem; color: var(--ink-soft); }
.faq details[open] p { animation: slide-in .45s var(--ease-out); }

/* 위치 안내 */
.info { margin: 0; }
.info__row { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .25rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--rule); }
.info__row:last-child { border-bottom: 1px solid var(--rule); }
.info dt { color: var(--rose-deep); font-weight: 700; }
.info dd { margin: 0; }
.info dd a { text-underline-offset: .2em; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* 404 페이지 머리말 */
.page-head { background: var(--night); color: var(--on-dark); padding-block: clamp(2.25rem, 6vw, 4rem); }
.page-head h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); font-weight: 700; max-width: 48rem; }
.page-head p { margin-top: 1rem; max-width: 42rem; color: var(--on-dark-soft); }

/* 강남 쩜오 목록과 표 */
.bullets { padding-left: 1.2rem; display: grid; gap: .6rem; }
.bullets li::marker { color: var(--rose-mid); }
.compare { width: 100%; border-collapse: collapse; }
.compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.compare th, .compare td { padding: .85rem .75rem .85rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.compare thead th { color: var(--rose-deep); font-size: .9rem; border-bottom: 2px solid var(--rose-mid); }
.compare tbody th { width: 34%; font-weight: 700; }
.compare td { color: var(--ink-soft); }
.compare th small { display: block; margin-top: .1rem; color: var(--rose-deep); font-size: .8rem; font-weight: 600; }
.table-note { margin-top: 1rem; color: var(--ink-soft); font-size: 1rem; }

/* 푸터 */
.site-footer { background: var(--night); color: var(--on-dark-soft); font-size: .95rem; }
.site-footer__inner { padding-block: 3rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 3rem; }
.site-footer h2 { color: var(--on-dark); font-size: 1.1rem; }
.site-footer address { margin-top: .75rem; font-style: normal; }
.site-footer a { text-underline-offset: .2em; transition: color .2s ease; }
.site-footer a:hover { color: var(--rose); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin-top: 1rem; }
.notice { display: grid; gap: .6rem; font-size: .9rem; }
.notice__age { color: var(--rose); font-weight: 700; }
.site-footer__legal { padding-block: 1.25rem; border-top: 1px solid var(--wine); font-size: .85rem; }

/* 모바일 하단 전화 바 */
.call-bar { display: none; }

/* 떠 있는 상담 위젯 */
.consult {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 15;
  animation: consult-in .8s var(--ease-out) 1.2s backwards;
}
.consult__toggle {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  list-style: none; cursor: pointer; border-radius: 1rem;
}
.consult__toggle::-webkit-details-marker { display: none; }
.consult__toggle:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.consult__label {
  position: relative; padding: .3rem .8rem;
  border: 1px solid var(--rose-mid); border-radius: .25rem;
  background: var(--night); color: var(--rose-light);
  font-size: .85rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .7);
}
.consult__label::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--night);
  border-right: 1px solid var(--rose-mid); border-bottom: 1px solid var(--rose-mid);
  transform: rotate(45deg);
}
.consult__avatar {
  position: relative; display: block; isolation: isolate;
  width: 8rem; height: 8rem; border-radius: 50%;
  background: var(--night);
  box-shadow: 0 10px 32px -6px rgba(0, 0, 0, .75), 0 0 26px rgba(240, 150, 170, .55);
  transition: transform .35s var(--ease-out);
}
.consult__toggle:hover .consult__avatar { transform: translateY(-3px) scale(1.03); }
/* 회전하는 로즈골드 테두리와 퍼지는 빛 */
.consult__avatar::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 50%;
  background: conic-gradient(#f9e3d7, #f09fb4, #cf9384, #fbe6da, #f09fb4, #f9e3d7);
  animation: consult-spin 6s linear infinite;
}
.consult__avatar::after {
  content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: 50%;
  border: 2px solid rgba(240, 159, 180, .75);
  animation: consult-pulse 2.6s ease-out infinite;
}
.consult__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.consult__bubble {
  position: absolute; right: -.2rem; top: .35rem; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 1.95rem; height: 1.45rem;
  border-radius: .75rem .75rem .75rem .15rem;
  background: var(--rose-gradient);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.consult__bubble i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #2a1217; animation: consult-dot 1.3s ease-in-out infinite; }
.consult__bubble i:nth-child(2) { animation-delay: .15s; }
.consult__bubble i:nth-child(3) { animation-delay: .3s; }
.consult__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block; padding: 1.5rem .3rem .75rem;
  border-radius: 0 0 4rem 4rem;
  background: linear-gradient(180deg, transparent, rgba(21, 12, 15, .92) 42%);
  color: var(--on-dark); text-align: center; line-height: 1.25;
}
.consult__text strong { display: block; color: var(--rose-light); font-size: .95rem; font-weight: 800; }
.consult__text span { display: block; margin-top: .1rem; font-size: .68rem; font-weight: 500; white-space: nowrap; }
.consult__panel {
  position: absolute; right: 0; bottom: calc(100% + .75rem);
  width: 18rem; max-height: calc(100vh - 13rem); overflow: auto;
  border: 1px solid var(--wine-line); border-radius: .5rem;
  background: var(--night); color: var(--on-dark);
  box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .8), 0 0 30px -8px rgba(240, 159, 180, .4);
  transform-origin: bottom right;
}
.consult[open] .consult__panel { animation: consult-open .4s var(--ease-out); }
.consult__photo { width: 100%; height: 13.5rem; object-fit: cover; object-position: 50% 42%; }
.consult__body { padding: 1rem; }
.consult__body > strong { display: block; color: var(--rose-light); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; }
.consult__body p { margin-top: .2rem; color: var(--on-dark-soft); font-size: .92rem; }
.consult__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .85rem; }
.consult__phone { display: block; margin-top: .7rem; color: var(--rose); font-size: .95rem; font-weight: 700; text-align: center; text-decoration: none; }

/* 연령 확인 */
.age-gate {
  width: min(calc(100% - 2rem), 26rem); padding: 2rem 1.5rem;
  border: 1px solid var(--wine-line); border-radius: .4rem;
  background: var(--night); color: var(--on-dark); text-align: center;
  overflow: hidden auto; color-scheme: dark;
}
.age-gate::backdrop { background: rgba(12, 6, 8, .94); }
.age-gate__mark {
  display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border: 2px solid var(--rose); border-radius: 50%;
  color: var(--rose); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700;
}
.age-gate h2 { margin-top: 1rem; font-size: 1.4rem; }
.age-gate p { margin-top: .75rem; color: var(--on-dark-soft); font-size: 1rem; }
.age-gate__actions { display: grid; gap: .6rem; margin-top: 1.5rem; }
.age-gate button { font: inherit; cursor: pointer; }

/* 움직임 */
@keyframes title-shimmer { to { background-position: 200% 50%; } }
@keyframes glow-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes door-open {
  0% { transform: rotateY(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotateY(100deg); opacity: 0; }
}
@keyframes photo-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes plate-sheen {
  0% { transform: translateX(-200%) rotate(14deg); }
  30%, 100% { transform: translateX(420%) rotate(14deg); }
}
@keyframes band-drift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }
@keyframes slide-in { from { transform: translateY(14px); } }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.97); } }
@keyframes consult-in { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes consult-spin { to { transform: rotate(360deg); } }
@keyframes consult-pulse { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes consult-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes consult-open { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes bar-sheen {
  0%, 62% { transform: translateX(-180%) skewX(-14deg); }
  85%, 100% { transform: translateX(360%) skewX(-14deg); }
}

@media (max-width: 47.99rem) {
  body { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }

  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 1rem; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__copy { padding-bottom: 2.5rem; }
  .hero__actions .btn { flex: 1 1 10rem; }
  .hero__inner { padding-top: 1.25rem; }
  .door { order: -1; width: 100%; aspect-ratio: 1 / .92; margin-bottom: 1.75rem; }
  .plate { top: 30%; width: 50%; }
  .plate strong { font-size: 2.3rem; }
  .plate span { font-size: .65rem; }

  /* 모바일에서는 옆으로 넘겨 봅니다 */
  .gallery {
    display: flex; gap: .6rem; aspect-ratio: auto;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__item { flex: 0 0 84%; aspect-ratio: 1; scroll-snap-align: start; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 3.6rem; }

  .facts__list { grid-template-columns: minmax(0, 1fr); }
  .facts__item, .facts__item + .facts__item { padding: 1rem 0; border-left: 0; }
  .facts__item + .facts__item { border-top: 1px solid var(--rule); }

  .split { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pour__text { grid-column: 1 / -1; }
  .glossary { grid-template-columns: minmax(0, 1fr); }
  .receipt { padding-inline: 1.1rem; }
  .receipt__rows > div { grid-template-columns: minmax(0, 1fr); }
  .info__row { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { flex: 1 1 10rem; }
  .compare tbody th { width: 38%; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }

  .call-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--night); border-top: 1px solid var(--wine-line);
  }
  .call-bar a { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3.75rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .call-bar svg { flex: none; }
  .call-bar__call { position: relative; overflow: hidden; background: var(--rose-gradient); color: #2a1217; }
  .call-bar__call::after {
    content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: bar-sheen 6s ease-in-out infinite;
  }
  .call-bar__telegram { color: #5cc1f5; border-right: 1px solid var(--wine-line); }
  .call-bar__kakao { color: #fee500; }

  /* 모바일 상담 위젯은 작게, 하단 전화 바 위에 둡니다 */
  .consult { right: .6rem; bottom: calc(3.75rem + env(safe-area-inset-bottom) + .6rem); }
  .consult__toggle { gap: .4rem; }
  .consult__label { padding: .15rem .5rem; font-size: .7rem; }
  .consult__avatar { width: 5.25rem; height: 5.25rem; }
  .consult__bubble { top: 0; right: -.25rem; width: 1.6rem; height: 1.2rem; }
  .consult__text { padding: .9rem .1rem .45rem; }
  .consult__text strong { font-size: .72rem; }
  .consult__text span { display: none; }
  .consult__panel { width: min(18rem, calc(100vw - 1.2rem)); max-height: calc(100vh - 15rem); max-height: calc(100dvh - 15rem); }
  .consult__photo { height: 11rem; }
}

@media (min-width: 48rem) {
  .site-header { position: sticky; top: 0; z-index: 10; }
  .site-header.is-scrolled {
    background: rgba(21, 12, 15, .93);
    border-bottom-color: rgba(233, 183, 164, .28);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  [id] { scroll-margin-top: 4.5rem; }
}

@media (min-width: 48rem) and (max-width: 60rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media print {
  .reveal { opacity: 1; transform: none; }
  .call-bar, .scroll-progress, .hero__dust, .consult { display: none; }
}