:root {
  --bg: #0f1513;
  --ink: #f2f5f3;
  --sub: #a3aaa6;
  --line: #2b3530;
  --green: #5fd27a;
  --green-bg: rgba(95, 210, 122, 0.16);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100svh;
  background: linear-gradient(180deg, #0b1a11 0%, #101614 40%, #121418 100%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans JP', 'Noto Sans KR', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }
.hotel { font-size: 12px; letter-spacing: 0.12em; color: var(--green); text-transform: uppercase; }
h1 { margin-top: 6px; font-size: 24px; line-height: 1.35; font-weight: 700; }
.choose { margin-top: 18px; font-size: 13px; color: var(--sub); }
.langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.langs button {
  min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #161c1a; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
}
.langs button[aria-pressed="true"] { border-color: var(--green); background: var(--green-bg); color: var(--green); font-weight: 700; }
.player { margin-top: 16px; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); }
video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 76svh; background: #000; }
.hint { margin-top: 10px; font-size: 12px; color: var(--sub); line-height: 1.6; }
.other { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.other span { display: block; font-size: 12px; color: var(--sub); }
.other a {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  min-height: 52px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.other a::after { content: '→'; color: var(--green); }