:root {
  color-scheme: dark;
  --ink: #0b0814;
  --ink-2: #130e22;
  --ink-3: #1d1733;
  --line: rgba(255, 255, 255, 0.14);
  --text: #f5f2fb;
  --muted: #c0b9d3;
  --lyric: #ffe14d;
  --on-lyric: #16101f;
  --pink: #ff4d9d;
  --cyan: #4de3ff;
  --display: 'Black Han Sans', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --body: 'Noto Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --radius: 14px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 17px/1.75 var(--body);
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.nb {
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--lyric);
  color: var(--on-lyric);
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
}

.icon {
  flex: none;
}

/* 상단 배너 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 16px;
  background: var(--lyric);
  color: var(--on-lyric);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}

.topbar:hover span {
  text-decoration: underline;
}

/* 헤더 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 8, 20, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
  text-decoration: none;
  line-height: 1;
}

.logo-en {
  color: var(--lyric);
  font: 400 25px/1 var(--display);
  letter-spacing: 0.04em;
}

.logo-ko {
  color: var(--muted);
  font-size: 12px;
}

.site-nav {
  display: flex;
  gap: 22px;
}

.site-nav a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.is-active {
  border-color: var(--lyric);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

/* 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: 700 16px/1.3 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--lyric);
  color: var(--on-lyric);
}

.btn-primary:hover {
  background: #fff0a0;
}

.btn-ghost,
.btn-outline {
  border-color: rgba(255, 255, 255, 0.34);
}

.btn-ghost:hover,
.btn-outline:hover {
  border-color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.btn-outline {
  min-height: 42px;
  padding: 6px 14px;
  font-size: 14px;
  white-space: nowrap;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* 공통 글자 */
.track {
  margin-bottom: 12px;
  color: var(--cyan);
  font: 700 13px/1.4 var(--mono);
  letter-spacing: 0.14em;
}

.lead {
  color: var(--muted);
  font-size: 18px;
}

.note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

/* 글꼴이 늦게 받아져도 대체 글꼴이 얇게 섞여 보이지 않도록 굵기를 맞춥니다 */
h2,
.hero-title,
.page-title {
  font-synthesis: none;
}

h2 {
  font: 700 clamp(30px, 4.6vw, 46px)/1.22 var(--display);
}

h2 + .lead {
  margin-top: 14px;
}

h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}

.page-title {
  font: 700 clamp(36px, 6vw, 56px)/1.2 var(--display);
  margin-bottom: 14px;
}

/* 첫 화면 */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
  background:
    radial-gradient(ellipse 80% 42% at 50% 112%, rgba(77, 227, 255, 0.28), transparent 72%),
    linear-gradient(180deg, #0b0814 0%, #150d2c 100%);
  border-bottom: 1px solid rgba(77, 227, 255, 0.4);
}

.beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.beams i,
.tile-beams i {
  position: absolute;
  top: -8%;
  width: min(44vw, 560px);
  height: 118%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--beam, rgba(255, 77, 157, 0.42)), transparent 78%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  filter: blur(5px);
  animation: sway 11s ease-in-out infinite alternate;
}

.beams i:nth-child(1) {
  left: -6%;
  transform: rotate(-14deg);
  --beam: rgba(255, 77, 157, 0.38);
}

.beams i:nth-child(2) {
  left: 22%;
  transform: rotate(9deg);
  --beam: rgba(77, 227, 255, 0.26);
  animation-duration: 14s;
  animation-delay: -5s;
}

.beams i:nth-child(3) {
  left: 50%;
  transform: rotate(-8deg);
  --beam: rgba(255, 225, 77, 0.24);
  animation-duration: 12s;
  animation-delay: -3s;
}

.beams i:nth-child(4) {
  right: -6%;
  transform: rotate(13deg);
  --beam: rgba(255, 77, 157, 0.36);
  animation-duration: 16s;
  animation-delay: -8s;
}

@keyframes sway {
  from {
    rotate: -5deg;
  }
  to {
    rotate: 5deg;
  }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.hero-title {
  margin-bottom: 20px;
  font: 700 clamp(54px, 8.2vw, 104px)/1.08 var(--display);
}

/* 노래방 자막처럼 왼쪽부터 색이 차오르는 효과 */
.wipe {
  display: block;
  width: fit-content;
  color: var(--lyric);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wipe {
    color: transparent;
    background: linear-gradient(90deg, var(--lyric) 0 50%, #fff 50% 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: wipe 1.1s linear 0.25s forwards;
  }

  .wipe-late {
    animation-duration: 0.8s;
    animation-delay: 1.35s;
  }
}

@keyframes wipe {
  to {
    background-position: 0 0;
  }
}

.hero-copy .lead {
  max-width: 34em;
  color: var(--text);
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.hero-points li {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(11, 8, 20, 0.5);
  font-size: 14px;
  font-weight: 500;
}

/* 대표 이미지: 사진 아래쪽에 노래방 자막처럼 문구를 얹습니다 */
.hero-photo-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: var(--ink-3);
  box-shadow: 0 24px 70px rgba(255, 77, 157, 0.22);
}

.hero-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.subtitle {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 4px;
  padding: 56px 16px 20px;
  background: linear-gradient(0deg, rgba(11, 8, 20, 0.92), transparent);
  text-align: center;
  pointer-events: none;
}

.lyric {
  display: block;
  width: fit-content;
  margin-inline: auto;
  color: var(--lyric);
  font: 400 clamp(26px, 2.8vw, 34px)/1.3 var(--display);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .lyric {
    color: transparent;
    background: linear-gradient(90deg, var(--lyric) 0 50%, #fff 50% 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: lyric-1 8s linear 2s infinite;
  }

  .lyric-2 {
    animation-name: lyric-2;
  }
}

@keyframes lyric-1 {
  0% {
    background-position: 100% 0;
  }
  30%,
  100% {
    background-position: 0 0;
  }
}

@keyframes lyric-2 {
  0%,
  32% {
    background-position: 100% 0;
  }
  62%,
  100% {
    background-position: 0 0;
  }
}

.eq {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
}

.eq i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(0deg, var(--cyan), var(--pink));
  transform-origin: 50% 100%;
  transform: scaleY(0.4);
  animation: eq 1.5s ease-in-out infinite alternate;
}

.eq i:nth-child(3n) {
  animation-duration: 1.1s;
  animation-delay: -0.4s;
}

.eq i:nth-child(3n + 1) {
  animation-duration: 1.8s;
  animation-delay: -0.9s;
}

.eq i:nth-child(4n) {
  animation-duration: 0.9s;
  animation-delay: -0.2s;
}

@keyframes eq {
  from {
    transform: scaleY(0.18);
  }
  to {
    transform: scaleY(1);
  }
}

/* 섹션 */
.section {
  padding: clamp(60px, 8vw, 104px) 0;
}

.section-alt {
  background: var(--ink-2);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.article {
  max-width: 800px;
}

/* 이용 안내 */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
}

.facts dd {
  font-size: 16px;
  line-height: 1.6;
}

.facts a {
  color: var(--lyric);
  font-weight: 700;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  counter-reset: step;
}

.steps li {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  counter-increment: step;
}

.steps li::before {
  content: '0' counter(step);
  display: block;
  margin-bottom: 10px;
  color: var(--lyric);
  font: 400 26px/1 var(--display);
}

.steps strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
}

.steps p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* 서비스 */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.tile {
  position: relative;
  grid-column: span 6;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-3);
}

.tile:nth-child(1) {
  grid-column: span 5;
}

.tile:nth-child(2) {
  grid-column: span 7;
}

.tile:nth-child(3) {
  grid-column: span 7;
}

.tile:nth-child(4) {
  grid-column: span 5;
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(255, 225, 77, 0.14);
  color: var(--lyric);
}

.tile h3,
.tile p {
  position: relative;
}

.tile h3 {
  margin-bottom: 8px;
}

.tile p {
  color: var(--muted);
  font-size: 16px;
}

.tile-stage {
  min-height: 300px;
  background: linear-gradient(180deg, #2a1650, #1a1033);
}

.tile-stage p {
  color: var(--text);
}

.tile-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tile-beams i {
  top: -10%;
  width: 62%;
  height: 130%;
}

.tile-beams i:nth-child(1) {
  left: 42%;
  --beam: rgba(255, 77, 157, 0.42);
}

.tile-beams i:nth-child(2) {
  left: 56%;
  --beam: rgba(255, 225, 77, 0.28);
  animation-duration: 8s;
  animation-delay: -3s;
}

.tile-beams i:nth-child(3) {
  left: 28%;
  --beam: rgba(77, 227, 255, 0.24);
  animation-duration: 13s;
  animation-delay: -6s;
}

.eq-wide {
  position: relative;
  height: 64px;
  margin-top: 22px;
}

/* 룸 사진: 왼쪽 큰 사진 1장, 오른쪽 위 2장, 오른쪽 아래 넓은 사진 1장 */
.rooms {
  margin-top: clamp(40px, 6vw, 64px);
}

.rooms > p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--muted);
}

.rooms figure {
  margin-top: 24px;
}

.room-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  aspect-ratio: 2 / 1;
}

.room-link {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
}

.room-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.room-link::after {
  content: '크게 보기';
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(11, 8, 20, 0.78);
  color: var(--text);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s;
}

.room-link:focus-visible::after {
  opacity: 1;
}

.room-link:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.room-link:last-child {
  grid-column: span 2;
}

/* 왜 퍼펙트 */
.why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.why article {
  padding: 28px 28px 8px;
  border-left: 1px solid var(--line);
}

.why article:first-child {
  padding-left: 0;
  border-left: 0;
}

.why-mark {
  margin-bottom: 18px;
  color: var(--lyric);
  font: 400 clamp(44px, 5.4vw, 66px)/1 var(--display);
}

.why h3 {
  margin-bottom: 8px;
}

.why article > p:last-child {
  color: var(--muted);
  font-size: 16px;
}

/* 가이드 */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.split-head.is-sticky {
  position: sticky;
  top: 100px;
}

/* 왼쪽 제목의 h2와 첫 줄을 맞춥니다 */
.sub-block {
  padding-top: 30px;
}

.sub-block h3 {
  margin-bottom: 8px;
}

.sub-block p {
  color: var(--muted);
}

.sub-stack {
  display: grid;
  gap: 30px;
  padding-top: 30px;
}

.sub-stack .sub-block {
  padding-top: 0;
}

.split-table {
  grid-template-rows: auto 1fr;
}

.split-table .table-wrap {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.split-table .sub-block {
  grid-column: 1;
  grid-row: 2;
  padding-top: 0;
}

.list-title {
  margin-bottom: 8px;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
}

.checks {
  counter-reset: check;
}

.checks li {
  position: relative;
  padding: 16px 0 16px 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  counter-increment: check;
}

.checks li::before {
  content: counter(check);
  position: absolute;
  left: 0;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lyric);
  color: var(--on-lyric);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

.checks strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.55;
}

.compare th,
.compare td {
  padding: 13px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  border-top: 0;
  background: var(--ink-3);
}

.compare thead th:last-child {
  color: var(--lyric);
}

.compare th:first-child {
  width: 20%;
  color: var(--cyan);
}

.liquor-table th:first-child {
  width: 32%;
}

.liquor-table tbody td {
  color: var(--text);
}

.liquor-note {
  padding-top: 28px;
}

/* 철학 */
.band {
  background: var(--lyric);
  color: var(--on-lyric);
}

.band .lead,
.band .sub-block p {
  color: var(--on-lyric);
}

.band .lead {
  font-weight: 500;
}

.band .track {
  color: var(--on-lyric);
}

/* 자주 묻는 질문 */
.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  position: relative;
  padding: 19px 40px 19px 0;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 14px;
  color: var(--lyric);
  font-size: 28px;
  line-height: 1.3;
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item h3 {
  font-size: 18px;
}

.faq-answer {
  padding: 0 40px 22px 0;
  color: var(--muted);
  font-size: 16px;
}

.faq-answer a {
  color: var(--lyric);
}

/* 위치와 예약 */
.loc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.cta-card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255, 225, 77, 0.5);
  border-radius: var(--radius);
  background: var(--ink-3);
}

.cta-label {
  font-weight: 700;
}

.cta-phone {
  display: block;
  margin: 8px 0 12px;
  color: var(--lyric);
  font: 400 clamp(32px, 3.6vw, 42px)/1.15 var(--display);
  text-decoration: none;
  white-space: nowrap;
}

.cta-card p:not(.cta-label) {
  color: var(--muted);
  font-size: 16px;
}

.cta-card .btn-row {
  margin-top: 20px;
}

/* 푸터 */
.site-footer {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1.2fr;
  gap: 36px;
}

.footer-logo {
  margin-bottom: 6px;
}

.footer-name {
  color: var(--text);
  font-weight: 700;
}

.site-footer address {
  font-style: normal;
}

.footer-links {
  display: grid;
  gap: 6px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.footer-notice strong {
  color: var(--text);
}

/* 움직임 효과. 위치 계산이 필요 없는 transform과 opacity만 움직여 화면 밀림을 막습니다 */
.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--lyric), var(--pink));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.ticker {
  overflow: hidden;
  padding: 11px 0;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.ticker-track {
  display: flex;
  width: max-content;
  color: var(--lyric);
  font: 400 18px/1.4 var(--display);
  white-space: pre;
  animation: ticker 60s linear infinite;
}

.ticker-track::before,
.ticker-track::after {
  content: attr(data-text);
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

.rv {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease var(--d, 0ms),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
}

.rv.in {
  opacity: 1;
  transform: none;
}

.kw {
  --kw-on: var(--text);
  --kw-off: rgba(245, 242, 251, 0.28);
  width: fit-content;
  color: transparent;
  background: linear-gradient(90deg, var(--kw-on) 0 49%, var(--lyric) 49.5% 50.5%, var(--kw-off) 51% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 1.1s cubic-bezier(0.4, 0, 0.3, 1);
}

.kw.in {
  background-position: 0 0;
}

.band .kw {
  --kw-on: var(--on-lyric);
  --kw-off: rgba(22, 16, 31, 0.3);
}

.why article.in .why-mark {
  animation: neon 0.8s linear var(--d, 0ms) both;
}

@keyframes neon {
  0% {
    opacity: 0.15;
  }
  14% {
    opacity: 1;
  }
  22% {
    opacity: 0.3;
  }
  36% {
    opacity: 1;
  }
  44% {
    opacity: 0.5;
  }
  60%,
  100% {
    opacity: 1;
  }
}

.hero-copy > .track,
.hero-points,
.hero-copy > .btn-row,
.hero-copy > .note {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-points {
  animation-delay: 0.15s;
}

.hero-copy > .btn-row {
  animation-delay: 0.25s;
}

.hero-copy > .note {
  animation-delay: 0.35s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.65) 50%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}

.btn-primary:hover::after {
  transform: translateX(110%);
  transition: transform 0.7s ease;
}

.btn-primary .icon,
.quick-call .icon {
  animation: ring 3.4s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes ring {
  0%,
  78%,
  100% {
    transform: rotate(0);
  }
  82% {
    transform: rotate(-14deg);
  }
  86% {
    transform: rotate(14deg);
  }
  90% {
    transform: rotate(-10deg);
  }
  94% {
    transform: rotate(8deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(460px circle at var(--hx, 72%) var(--hy, 28%), rgba(255, 225, 77, 0.13), transparent 70%);
    pointer-events: none;
  }

  .hero-photo-frame {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.25s ease-out;
  }

  .tile {
    transition:
      transform 0.25s ease,
      border-color 0.25s ease;
  }

  .tile:hover {
    border-color: rgba(255, 225, 77, 0.5);
    transform: translateY(-4px);
  }

  .tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 225, 77, 0.14), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
  }

  .tile:hover::before {
    opacity: 1;
  }

  .room-link:hover img {
    transform: scale(1.06);
  }

  .room-link:hover::after {
    opacity: 1;
  }
}

/* 지원 브라우저에서 FAQ가 부드럽게 열립니다 */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.3s ease,
      content-visibility 0.3s allow-discrete;
  }

  .faq-item[open]::details-content {
    height: auto;
  }
}

.faq-item summary::after {
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

/* 룸 사진 크게 보기 */
.is-locked {
  overflow: hidden;
}

.lightbox {
  width: min(92vw, 860px, 82vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.lightbox[open] {
  animation: rise 0.25s ease-out;
}

.lightbox::backdrop {
  background: rgba(6, 4, 12, 0.92);
}

.lightbox img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--ink);
}

.lightbox figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.lightbox-btn {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(11, 8, 20, 0.72);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-btn:hover {
  background: var(--lyric);
  color: var(--on-lyric);
}

.lightbox-close {
  top: 10px;
  right: 10px;
}

.lightbox-prev,
.lightbox-next {
  top: calc(50% - 40px);
}

.lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
}

@media print {
  .rv {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .kw {
    background: none;
    color: CanvasText;
  }
}

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

@media (max-width: 1200px) {
  .header-call {
    display: none;
  }
}

@media (max-width: 1080px) {
  .site-nav {
    gap: 14px;
  }

  .site-nav a {
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 76px;
  }

  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
    font-size: 16px;
  }

  .lead {
    font-size: 17px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header-inner {
    position: relative;
    min-height: 62px;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 6px 20px 14px;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }

  .beams {
    opacity: 0.6;
  }

  .hero {
    padding-top: 20px;
  }

  /* 모바일에서는 사진을 맨 위에 두고, 간판이 보이도록 위쪽 기준으로 자릅니다 */
  .hero-photo {
    order: -1;
  }

  .hero-photo-frame img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
  }

  .subtitle {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 22px 8px 8px;
    white-space: nowrap;
  }

  .lyric {
    margin-inline: 0;
    font-size: 18px;
  }

  .hero-grid,
  .split,
  .loc {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-head.is-sticky {
    position: static;
  }

  .sub-block,
  .sub-stack {
    padding-top: 0;
  }

  .split-table {
    grid-template-rows: none;
  }

  .split-table .table-wrap,
  .split-table .sub-block {
    grid-column: auto;
    grid-row: auto;
  }

  .facts,
  .why,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile,
  .tile:nth-child(n) {
    grid-column: 1 / -1;
  }

  .tile-stage {
    min-height: 0;
  }

  .room-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
    aspect-ratio: auto;
  }

  .room-gallery img {
    height: auto;
    aspect-ratio: 1;
  }

  .room-link:first-child {
    grid-row: auto;
  }

  .room-link:last-child img {
    aspect-ratio: 2 / 1;
  }

  .why article,
  .why article:first-child {
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .quick-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink-3);
    border-top: 1px solid var(--line);
  }

  .quick-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 60px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .quick-bar .quick-call {
    background: var(--lyric);
    color: var(--on-lyric);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .btn-row .btn {
    flex: 1 1 100%;
  }

  .compare {
    font-size: 14px;
  }

  .compare th,
  .compare td {
    padding: 11px 10px;
  }

  .compare th:first-child {
    width: 19%;
  }

  .liquor-table th:first-child {
    width: 33%;
  }

  .faq-answer {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .beams i,
  .tile-beams i,
  .eq i,
  .ticker-track,
  .hero-copy > .track,
  .hero-points,
  .hero-copy > .btn-row,
  .hero-copy > .note,
  .btn-primary .icon,
  .quick-call .icon,
  .lightbox[open] {
    animation: none;
  }

  .room-gallery img,
  .hero-photo-frame,
  .tile {
    transition: none;
  }

  .room-link:hover img,
  .tile:hover {
    transform: none;
  }

  .wipe,
  .lyric {
    animation: none;
    background-position: 0 0;
  }
}