body { margin: 0; }
  :root {
    --u: 2px;
    --sw: 252;
    --sh: 226;
    --iu: 2px;
    --ink: #5C4063;
    --paper: #FFF4F6;
    --butter: #FFE08F;
    --gold: #E3BE6B;
    --page: #54446A;
    --dialog: #3A2A40;
    --muted: #D9CBE6;
    --font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { background: var(--page); }
  body { color: var(--paper); font-family: var(--font-body); }

  .page {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 16px;
    padding-block: 24px 56px;
  }
  .site {
    display: grid;
    grid-template-areas: "stage" "rooms" "dialog";
    justify-items: center;
    row-gap: 18px;
  }

  .stage { grid-area: stage; position: relative; line-height: 0; }
  #scene {
    display: block;
    width: calc(var(--u) * var(--sw));
    height: calc(var(--u) * var(--sh));
    image-rendering: crisp-edges;
    image-rendering: pixelated;
  }
  .hot {
    position: absolute;
    left: calc(var(--u) * var(--x));
    top: calc(var(--u) * var(--y));
    width: calc(var(--u) * var(--w));
    height: calc(var(--u) * var(--h));
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hot:focus { outline: none; }
  .hot:focus-visible { outline: 2px dashed var(--butter); outline-offset: 2px; }
  .hot-icon {
    position: absolute;
    left: calc(var(--u) * var(--ax) - var(--iu) * 5.5);
    top: calc(var(--u) * var(--ay) - var(--iu) * 12);
    width: calc(var(--iu) * 11);
    height: calc(var(--iu) * 11);
    background-image: var(--icon);
    background-size: 100% 100%;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: drop-shadow(0 var(--iu) 0 rgba(30, 18, 40, 0.55));
    animation: icon-bob 800ms steps(1, end) infinite;
  }
  .hot:nth-of-type(2n) .hot-icon { animation-delay: -400ms; }
  .hot:hover .hot-icon, .hot:focus-visible .hot-icon, .hot.is-active .hot-icon { background-image: var(--icon-hover); }
  .hot.is-seen .hot-icon { background-image: var(--icon-seen); animation: none; }
  .hot.is-seen:hover .hot-icon, .hot.is-seen:focus-visible .hot-icon, .hot.is-seen.is-active .hot-icon { background-image: var(--icon-hover); }
  /* 방 바깥 이동 화살표 */
  /* 방 고르기 목록 — 방 그림 아래. 방이 늘어도 줄바꿈으로 받아요. */
  .rooms {
    grid-area: rooms;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: calc(var(--u) * var(--sw));
  }
  .room-go {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
    padding: 7px 12px;
    color: var(--butter);
    background: rgba(30, 18, 40, 0.35);
    border: 2px solid var(--butter);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .room-go:hover { background: var(--butter); color: #3A2A46; }
  .room-go.is-here {
    color: #3A2A46;
    background: var(--butter);
    border-style: dashed;
    cursor: default;
  }
  .room-go:focus { outline: none; }
  .room-go:focus-visible { outline: 2px dashed var(--butter); outline-offset: 3px; }
  }
  }

  @keyframes icon-bob {
    0% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--iu) * -3)); }
  }

  .dialog {
    grid-area: dialog;
    position: relative;
    width: 100%;
    max-width: 520px;
    min-height: 132px;
    padding: 22px 18px 16px;
    background: var(--dialog);
    border: 3px solid var(--ink);
    box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--dialog), 4px 4px 0 0 #3F3252;
  }
  .dialog-name {
    position: absolute;
    top: -14px;
    left: 14px;
    margin: 0;
    padding: 3px 10px 4px;
    font-size: 15px;
    line-height: 1.2;
    color: var(--ink);
    background: var(--butter);
    border: 2px solid var(--ink);
  }
  .dialog-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .dialog-close:hover { color: var(--paper); }
  .dialog-close:focus-visible { outline: 2px solid var(--butter); outline-offset: -2px; }
  .dialog-text {
    margin: 0;
    padding-inline-end: 30px;
    min-height: 3.2em;
    font-size: 17px;
    line-height: 1.6;
    word-break: keep-all;
    white-space: pre-line;
  }
  .dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-start: 8px; }
  .dialog-page { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .dialog-next {
    font: inherit;
    font-size: 15px;
    min-height: 40px;
    padding: 4px 14px;
    color: var(--ink);
    background: var(--butter);
    border: 2px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
  }
  .dialog-next:focus-visible { outline: 2px solid var(--butter); outline-offset: 3px; }

  .confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; image-rendering: crisp-edges; image-rendering: pixelated; }

  @media (prefers-reduced-motion: reduce) { .hot-icon { animation: none; } }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }