:root {
  color-scheme: dark;
  --bg: #101915;
  --ink: #f9f1df;
  --muted: #b9bdb1;
  --gold: #e3bc7b;
  --line: #ffffff24;
  --serif: "Nanum Myeongjo", "Batang", "AppleMyungjo", "Noto Serif CJK KR", serif;
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, a, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.top {
  height: 69px; padding: 0 max(5.5vw, 20px); display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid #ffffff14;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px var(--serif); letter-spacing: .04em; }
.brand img { width: 32px; }
.top-note { color: var(--muted); font-size: 12px; letter-spacing: .13em; }
.sound {
  display: flex; align-items: center; gap: 8px; background: #ffffff06; border: 1px solid var(--line);
  border-radius: 99px; padding: 8px 13px; color: var(--ink); font-size: 12px; white-space: nowrap;
}
.bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.bars i { display: block; background: var(--gold); width: 2px; height: 5px; border-radius: 2px; }
.bars i:nth-child(2) { height: 10px; animation-delay: -.3s; }
.bars i:nth-child(3) { height: 13px; animation-delay: -.6s; }
.sound[aria-pressed=true] .bars i { animation: ripple 1.2s ease-in-out infinite alternate; }
@keyframes ripple { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

.hero { position: relative; display: grid; align-items: center; min-height: clamp(500px, 63vh, 750px); isolation: isolate; overflow: hidden; }
.backdrop, .shade, .scene-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop { z-index: -3; background: #17211a; }
.scene-image { object-fit: cover; object-position: center 58%; opacity: 0; transition: opacity 850ms ease; }
.scene-image.visible { opacity: 1; }
.scene-image[data-image=hall] { object-position: center 53%; }
.shade { z-index: -2; background: linear-gradient(90deg,#080f0bec 0%,#08100bbf 19%,#10191153 54%,#080f0b10 90%), linear-gradient(0deg,#101915 0%,#10191500 33%); }
.scene-body { z-index: 1; position: relative; padding: 50px max(7vw, 24px) 80px; justify-self: start; }
.eyebrow { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .19em; }
.eyebrow span { margin: 0 4px; }
h1, h2, .place strong { font-family: var(--serif); }
h1 { font-weight: 500; margin: 22px 0 19px; font-size: clamp(43px, 6.2vw, 94px); line-height: 1.12; letter-spacing: -.085em; text-shadow: 0 2px 26px #080b0759; }
#scene-description { color: #e8e9dc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.9; margin: 0 0 28px; }
.scene-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.primary, .secondary {
  min-height: 45px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 15px;
  border: 1px solid #f5d69d; border-radius: 5px; background: #f0cf98; color: #272116; font-size: 13px; font-weight: 700;
}
.primary:hover { background: #ffe4b7; }
.primary span { font-size: 17px; font-weight: 400; }
.secondary { border-color: #fff5dc54; background: #141c16c9; color: var(--ink); }
.secondary:hover { background: #31392f; }
.scene-foot {
  position: absolute; z-index: 2; bottom: 22px; left: max(7vw, 24px); right: max(7vw, 24px);
  display: flex; gap: 14px; justify-content: space-between; align-items: end;
}
.soundscape {
  display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 12px;
  border: 1px solid #f7f0db35; border-radius: 99px; color: #e8e7d5; background: #111711a8; font-size: 11px; letter-spacing: .05em;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #a49e83; }
.audio-on .live-dot { background: #bdd0a1; box-shadow: 0 0 10px #c7e0a3; }
.counter { text-align: right; color: #f3dcba; font-size: 12px; }
.counter strong { font: 31px var(--serif); }
progress { display: block; width: clamp(100px, 12vw, 160px); height: 5px; margin-top: 5px; accent-color: var(--gold); }
#performer {
  position: absolute; left: 50%; bottom: 36px; width: clamp(150px, 22vw, 270px); transform: translateX(-50%);
  display: grid; justify-items: center; pointer-events: none; filter: drop-shadow(0 8px 20px #110b07c9);
}
#avatar-label { position: absolute; top: 4%; padding: 5px 11px; border: 1px solid #f5dab462; border-radius: 99px; background: #1a100de6; color: #fce7cb; font-size: 12px; max-width: 100%; overflow-wrap: anywhere; }
.avatar { width: 100%; }
.practicing .shade { background: linear-gradient(90deg,#0d0b08c9,#0d0b080f 58%),linear-gradient(0deg,#101915,#10191500 40%); }
.practicing h1 { font-size: clamp(34px, 4vw, 58px); }
.practicing .scene-body { max-width: 47%; padding-right: 10px; }

.explore { max-width: 1600px; margin: auto; padding: 21px max(7vw, 24px) 44px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 19px; }
.section-heading p:last-child:not(.eyebrow) { margin: 0 0 2px; color: var(--muted); font-size: 12px; }
h2 { font-size: clamp(26px, 3vw, 38px); margin: 7px 0 0; letter-spacing: -.055em; font-weight: 500; }
.places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.place {
  position: relative; overflow: hidden; height: clamp(125px, 13vw, 210px); border-radius: 8px;
  border: 1px solid #e8dbb737; isolation: isolate; background: #283126;
}
.place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .45s ease; }
.place::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#070c09ed,#0b110c1a 76%); }
.place:hover img { transform: scale(1.07); }
.place[aria-current] { border-color: var(--gold); box-shadow: 0 0 0 1px #e3bc7b6b; }
.place-number { position: absolute; top: 11px; left: 11px; color: #ffe1ad; padding: 4px 7px; background: #101711bb; font-size: 10px; border-radius: 3px; }
.place-label { position: absolute; left: 12px; right: 27px; bottom: 13px; display: grid; gap: 4px; }
.place strong { font-size: clamp(16px, 1.8vw, 24px); font-weight: 500; }
.place small { color: #e0e2d4; font-size: 11px; }
.arrow { position: absolute; right: 11px; bottom: 14px; color: var(--gold); }
footer { border-top: 1px solid #ffffff14; display: flex; align-items: center; gap: 9px; padding: 15px max(7vw, 24px); color: var(--muted); font-size: 12px; }
footer img { width: 22px; } footer span:last-child { margin-left: auto; }
dialog { max-width: min(420px, calc(100% - 32px)); width: 100%; border: 1px solid #a88958; border-radius: 13px; padding: 0; background: #1c2620; color: var(--ink); }
dialog::backdrop { background: #080e0cbe; }
form { position: relative; display: grid; padding: 29px; }
form h2 { font-size: 36px; margin: 11px 0 0; }
form p { font-size: 13px; color: var(--muted); line-height: 1.65; }
form label { font-size: 13px; margin: 11px 0 7px; }
form input, form select { min-height: 42px; width: 100%; border: 1px solid var(--line); color: var(--ink); background: #111a15; border-radius: 5px; padding: 8px 11px; }
form .form-note { font-size: 11px; margin: 13px 0; }
.close { position: absolute; top: 10px; right: 11px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); font-size: 25px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 690px) {
  .top { height: 58px; }
  .top-note { display: none; }
  .hero { min-height: 505px; }
  .shade { background: linear-gradient(90deg,#080f0bdb,#08100b56 82%),linear-gradient(0deg,#101915,#10191500 28%); }
  .scene-body { padding-top: 29px; padding-bottom: 64px; }
  .scene-image { object-position: 60% center; }
  .section-heading { display: block; }
  .section-heading p:last-child:not(.eyebrow) { margin-top: 8px; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero.practicing { align-items: start; min-height: 610px; }
  .practicing .scene-body { max-width: none; padding-bottom: 5px; }
  .practicing .scene-body h1 { margin: 12px 0; }
  .practicing #scene-description { margin-bottom: 13px; }
  .practicing .scene-image[data-image=hall] { object-position: center center; }
  #performer { bottom: 50px; width: min(52vw, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* The camera pans across the scene while the avatar moves on the ground plane. */
.top { gap: 10px; }
.top-note { margin: 0 auto 0 17px; }
.hero { min-height: clamp(550px, 69vh, 780px); scroll-margin-top: 4px; }
.scene-image { transform: translateX(var(--view-x, 0%)) scale(1.28); transition: opacity 850ms ease, transform .18s ease-out; }
.hero.is-walking .scene-image { transition: opacity 850ms ease, transform .09s linear; }
.look-surface { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.look-surface:active { cursor: grabbing; }
#walker {
  position: absolute; left: var(--walk-x, 58%); top: var(--walk-y, 86%); width: clamp(116px, 13vw, 172px);
  transform: translate(-50%, -92%) scale(var(--walk-depth, 1)); transform-origin: center 92%;
  pointer-events: none; filter: drop-shadow(0 6px 9px #0d0d08b8);
}
.walker-avatar { display: block; width: 100%; overflow: visible; }
.walker-name {
  position: absolute; z-index: 1; top: 5%; left: 50%; transform: translateX(-50%); max-width: 150%;
  border: 1px solid #efd5a463; background: #19170ee8; color: #f8dfb3; padding: 4px 9px;
  font-size: 12px; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.walker-facing { transform: scaleX(var(--walk-facing, 1)); transform-origin: 50px 93px; }
.in-motion .walker-body { animation: body-step .52s ease-in-out infinite alternate; }
.step-far, .step-near { transform-origin: 50px 105px; }
.swing-far, .swing-near { transform-origin: 51px 67px; }
.in-motion .step-near, .in-motion .swing-far { animation: stride 1.04s ease-in-out infinite; }
.in-motion .step-far, .in-motion .swing-near { animation: stride 1.04s -.52s ease-in-out infinite; }
.walk-paused .walker-avatar * { animation-play-state: paused; }
@keyframes body-step { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes stride { 0%,100% { transform: rotate(17deg); } 50% { transform: rotate(-17deg); } }
.doorway { position: absolute; z-index: 1; inset: 0; opacity: 0; background: #141711; pointer-events: none; }
.scene-body { z-index: 2; pointer-events: none; }
.scene-body button { pointer-events: auto; }
.scene-foot { z-index: 2; pointer-events: none; }
#performer { pointer-events: none; }
.walk-tools {
  position: absolute; z-index: 3; top: 17px; right: max(3vw, 14px); display: flex;
  gap: 3px; padding: 4px; border-radius: 8px; background: #111811d9; border: 1px solid #ffffff35;
}
.walk-tools button {
  display: grid; place-items: center; width: 35px; height: 34px; color: #f5ddb1; font-size: 18px;
  background: transparent; border: 0; border-radius: 4px;
}
.walk-tools button:hover { background: #e8c98c2b; }
.walk-route {
  position: absolute; z-index: 2; top: 18px; left: max(7vw, 24px);
  padding: 9px 12px; border-radius: 7px; background: #111811e6; border: 1px solid #edcf9e66; font-size: 12px;
}
.walk-route progress { width: 100%; }
.is-walking .scene-body { align-self: center; }
.is-walking h1 { font-size: clamp(31px, 4.5vw, 59px); }
.is-walking #scene-description { margin-bottom: 15px; }
.trail-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.trail-links button {
  min-height: 34px; padding: 6px 10px; border: 1px solid #eed9b75c; border-radius: 5px;
  background: #152018c9; color: var(--ink); font-size: 12px;
}
.trail-links button:hover { background: #334438; }
#pace-fields label { display: block; }
@media (max-width: 690px) {
  .top { padding-inline: 14px; }
  .brand { gap: 5px; margin-right: auto; font-size: 16px; }
  .brand img { width: 24px; }
  .top .sound { padding-inline: 9px; }
  .hero, .hero.practicing { align-items: start; min-height: 610px; }
  .hero .scene-body, .hero.is-walking .scene-body { align-self: start; padding-top: 78px; padding-bottom: 0; }
  .hero h1 { font-size: clamp(32px, 8vw, 48px); margin: 11px 0; }
  #scene-description { margin-bottom: 15px; }
  .walk-tools { top: 11px; }
  .walk-route { top: 11px; max-width: 52%; }
  #walker { width: 123px; }
  .walker-name { top: 1%; }
}