/* daydrift 2판 — 손그림 월페이퍼 위에 뜬 개인 홈 창 하나. 값은 tokens.css 변수만 쓴다.
   스크롤이 없다: 무대·창은 position: fixed — 뷰포트 높이 단위로 상자를 만들지 않아 iOS 주소창이 접혀도 튀지 않는다.
   창 층은 도트 서체(Galmuri11)라 위치·크기·행 높이가 전부 정수 px 다(wireframe 3-1) — 반 픽셀에 앉으면 글자가 뭉갠다. */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, p, ul) { margin: 0; }
:where(ul) { padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

html,
body {
  height: 100%;
  /* 스크롤 없음은 사용자 필수다 — 넘칠 것을 만들지 않고, 여기선 고무줄 스크롤만 막는다 */
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  font-family: var(--font-dot);
  font-size: var(--text-dot);
  line-height: var(--text-dot--line-height);
  color: var(--color-ink);
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

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

/* 픽셀 아이콘 — 11×11 격자를 화면 1px 칸에 그대로 */
.px {
  display: block;
  flex: none;
  inline-size: var(--spacing-icon);
  block-size: var(--spacing-icon);
  fill: currentColor;
  shape-rendering: crispEdges;
  /* 11 칸 아이콘을 16·24 줄 가운데에 두면 반 픽셀이 생긴다 — 위 여백 1px 로 바깥 상자를 12 로 만든다 */
  margin-block-start: 1px;
}

/* ── 0 무대 (1판 그대로) ────────────────────────────────────────────────
   그림 상자(.art)를 object-fit: cover 와 같은 셈으로 화면에 앉힌다 — 자리표시자·빛 층·그림이 같은 좌표계를 쓴다. */
.stage {
  --ratio: var(--art-wide-ratio);
  --ax: var(--art-wide-x);
  --ay: var(--art-wide-y);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  background: var(--color-bg);
}

.art {
  --w: max(100cqw, 100cqh * var(--ratio));
  --h: max(100cqh, 100cqw / var(--ratio));
  position: absolute;
  inline-size: var(--w);
  block-size: var(--h);
  left: calc((100cqw - var(--w)) * var(--ax));
  top: calc((100cqh - var(--h)) * var(--ay));
}

.art__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* 자리표시자 — 그림이 화면을 채운 상태를 흉내 낸다(장면 색 + 지붕 창살·바닥 결 + 주인공 자리 라벨) */
.ph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 78% 38%, color-mix(in srgb, var(--color-glow) 55%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--color-sky) 0%, var(--color-sky) 9%, var(--color-glow) 34%, var(--color-bg) 64%, var(--color-wood) 100%);
  transition: opacity var(--duration-image) var(--ease-out);
}

.ph--tall { display: none; }

.ph__roof,
.ph__floor,
.ph__window,
.ph__hero {
  position: absolute;
  display: block;
}

.ph__roof {
  inset: 0 0 auto;
  block-size: 13%;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--color-ink) 45%, transparent) 0 2px, transparent 2px),
    repeating-linear-gradient(to right, transparent 0 7.5%, color-mix(in srgb, var(--color-ink) 40%, transparent) 7.5% calc(7.5% + 2px));
}

.ph__window {
  left: 72%;
  top: 18%;
  inline-size: 20%;
  block-size: 44%;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), color-mix(in srgb, var(--color-ink) 50%, transparent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-sky) 70%, transparent), color-mix(in srgb, var(--color-glow) 60%, transparent));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-ink) 50%, transparent);
  opacity: 0.7;
}

.ph__floor {
  inset: auto 0 0;
  block-size: 40%;
  background: repeating-linear-gradient(to bottom, transparent 0 7%, color-mix(in srgb, var(--color-shade) 16%, transparent) 7% calc(7% + 1px));
  mask-image: linear-gradient(to bottom, transparent, var(--color-shade) 35%);
}

/* 주인공 상자 — 작업대·빈 의자(가로판 x 52–96% · y 38–88%). 창은 이 상자에 앉지 않는다 */
.ph__hero {
  left: 52%;
  top: 38%;
  inline-size: 44%;
  block-size: 50%;
  border: 1px dashed color-mix(in srgb, var(--color-shade) 45%, transparent);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--spacing-icon-gap);
  padding: var(--spacing-dot);
  text-align: center;
  color: var(--color-shade);
}

.ph__label { font-weight: 700; }
.ph__sub { opacity: 0.8; }

/* 그림이 디코드되면 자리표시자를 걷는다(Crossfade). 다 걷힌 뒤엔 접근성 트리에서도 빠진다 */
.stage.is-loaded .ph {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-image) var(--ease-out), visibility 0s linear var(--duration-image);
}

/* 빛 층 — 빛 줄기 · 먼지 (1판 그대로) */
.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.beam {
  position: absolute;
  left: 55%;
  top: 0;
  inline-size: 45%;
  block-size: 90%;
  background: linear-gradient(to bottom right,
    transparent 30%,
    color-mix(in srgb, var(--color-glow) 26%, transparent) 41%,
    transparent 47%,
    color-mix(in srgb, var(--color-glow) 16%, transparent) 53%,
    color-mix(in srgb, var(--color-glow) 22%, transparent) 59%,
    transparent 69%);
  mask-image: radial-gradient(ellipse 80% 75% at 85% 15%, var(--color-shade) 25%, transparent 80%);
  mix-blend-mode: screen;
  animation: glow var(--duration-glow) var(--ease-drift) infinite alternate;
}

.dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  inline-size: var(--s);
  block-size: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-glow) 35%, transparent 72%);
  scale: 1.6;
  opacity: 0;
  animation: float var(--d) var(--ease-drift) var(--w) infinite;
}

@keyframes glow {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@keyframes float {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  20% { opacity: 0.85; }
  75% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
}

[data-view="art"] .stage { cursor: pointer; }

/* ── 1 창 ────────────────────────────────────────────────────────────────
   가로 화면(비 ≥ 1.2) = 왼쪽 아래. 폭 = 주인공 왼변 − 가장자리 − 11 을 11 의 배수로 내림, 상한 528(wireframe 4-1).
   주인공 왼변(화면 x) = min(0.52·vw, 0.6·vw − 0.08·1.768·vh) — 그림 cover 셈에서 나온다. */
.win {
  --edge-t: max(var(--spacing-edge), env(safe-area-inset-top));
  --edge-r: max(var(--spacing-edge), env(safe-area-inset-right));
  --edge-b: max(var(--spacing-edge), env(safe-area-inset-bottom));
  --edge-l: max(var(--spacing-edge), env(safe-area-inset-left));
  --hero-l: min(
    var(--art-wide-hero-x) * 100vw,
    var(--art-wide-x) * 100vw - (var(--art-wide-x) - var(--art-wide-hero-x)) * var(--art-wide-ratio) * 100vh
  );
  --win-floor: calc(var(--spacing-dot) * 28);  /* 308 — 이보다 좁은 가로 화면은 없다고 보고, 있어도 글자가 넘치지 않게 */
  position: fixed;
  z-index: 3;
  left: var(--edge-l);
  bottom: var(--edge-b);
  /* round() 를 모르는 브라우저는 앞 줄 — 폭이 반 픽셀일 수 있을 뿐 배치는 같다 */
  inline-size: max(var(--win-floor), min(var(--spacing-win-w), calc(var(--hero-l) - var(--edge-l) - var(--spacing-win-gap))));
  inline-size: max(var(--win-floor), min(var(--spacing-win-w), round(down, calc(var(--hero-l) - var(--edge-l) - var(--spacing-win-gap)), var(--spacing-dot))));
  container: win / inline-size;
  background: var(--color-window);
  border: 1px solid var(--color-frame);
  box-shadow: var(--shadow-window);
  transform-origin: left bottom;
  /* 첫 진입 Pop in — 그림 뒤 200ms, 계단 3칸 150ms. 한 번 돌고 끝난다(끝 상태는 transform 없음 = 정수 px) */
  animation: win-in var(--duration-win-in) var(--ease-step-3) var(--delay-win-in) backwards;
  transition:
    opacity var(--duration-minimize) var(--ease-step-4),
    transform var(--duration-minimize) var(--ease-step-4),
    visibility 0s linear 0s;
}

@keyframes win-in {
  from { opacity: 0; transform: scale(0.92); }
}

/* 1-1 제목 띠 — 32 = 글자 줄 16 + 위아래 8 */
.bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-icon-gap);
  block-size: var(--spacing-row-bar);
  padding-inline: var(--spacing-dot-bar);
  background: var(--color-blue-tint);
  white-space: nowrap;
}

.bar__name {
  font-weight: 700;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__count {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.lbl { color: var(--color-ink-soft); }

/* 오늘 방문 숫자 — 주황 세 곳 중 하나. 제목 띠 위라 면 주황(2.74)이 아니라 주황 글자색(4.94) */
.bar__today {
  font-weight: 400;
  color: var(--color-accent-ink);
}

.bar__min { margin-inline-start: var(--spacing-dot-bar); }

/* 단추 공통 — 옅은 파랑 면 · 1px 틀 · 픽셀 그림자 1px. 보이는 상자 24 = 테두리 2 + 글자 줄 16 + 위아래 3 */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-icon-gap);
  block-size: var(--spacing-button);
  padding-inline: var(--spacing-dot-inline);
  background: var(--color-blue-pale);
  border: 1px solid var(--color-frame);
  box-shadow: var(--shadow-button);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* 누름 영역 44 — 보이는 상자는 그대로, 의사 요소로만 늘린다(wireframe 3-4).
   absolute 의사 요소의 inset 은 테두리 안쪽(패딩 상자)에서 잰다 — 테두리 1px 를 더해야 바깥으로 10px 가 된다(qa-2 P2-1, 실측 42 → 44) */
.btn::after,
.tab::after,
.chip::after {
  content: "";
  position: absolute;
}
.btn::after { inset: -11px; }   /* 보이는 24 → 누름 44 = 테두리 1 + 10 씩 */

/* [내리기] 는 위로만 늘린다 — 아래는 탭 줄이라 겹치지 않게(위 16 + 24 + 아래 4 = 44, 창 윗변 너머 11px). 값마다 테두리 1 을 더했다 */
.bar__min::after { inset: -17px -1px -5px; }

.btn--sq {
  justify-content: center;
  inline-size: var(--spacing-button);
  padding: 0;
}
.btn--sq .px { margin-inline-start: 1px; }   /* 같은 이유 — 안 폭 22 에 바깥 12 */

.btn:active,
.chip:active {
  transform: translate(var(--spacing-press), var(--spacing-press));
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .tab:not([aria-current]):hover { background: var(--color-window); }
}

/* 1-2 탭 줄 — 32 = 탭 31 + 아래 1px 실선. 현재 탭은 실선을 덮어 끊는다(폴더 탭) */
.tabs__list {
  display: flex;
  block-size: var(--spacing-row-bar);
  border-block-end: 1px solid var(--color-frame);
}

.tab {
  position: relative;
  display: block;
  padding: var(--spacing-dot-bar) var(--spacing-dot) calc(var(--spacing-dot-bar) - 1px);
  background: var(--color-blue-pale);
  border-inline-end: 1px dotted var(--color-dot);
  white-space: nowrap;
}

/* 탭 누름 영역 — 아래로 실선 1 + 본문 위 여백 11 + 1 (31 + 13 = 44). 탭은 위아래 테두리가 없어 inset 그대로다 */
.tab::after { inset: 0 0 calc(var(--spacing-dot) * -1 - 2px); }
/* [홈] 은 글자 하나라 폭 35 — 이웃 탭 쪽으로는 못 늘리니 창 바깥(왼쪽 가장자리 여백)으로 9 를 늘려 44 */
.tab[aria-current]::after { inset-inline-start: min(0px, calc(100% - 44px)); }

.tab[aria-current] {
  margin-block-end: -1px;
  padding-block-end: var(--spacing-dot-bar);
  background: var(--color-window);
  box-shadow: inset 0 2px 0 var(--color-blue);
  font-weight: 700;
}
.tab[aria-current]:focus-visible { box-shadow: inset 0 2px 0 var(--color-blue), var(--shadow-focus); }

/* 본문 — 여백 11, 행 사이 11 */
.win__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--spacing-dot);
  padding: var(--spacing-dot);
}

/* 1-3 프로필 — 넓은 66 = 닉네임 줄 42 + 8 + 소개 16 · 폰 44 = 28 + 0 + 16 */
.profile {
  --avatar: var(--spacing-avatar);
  --nick-size: var(--text-dot-3);
  --nick-line: var(--text-dot-3--line-height);
  --profile-h: var(--spacing-row-profile);
  display: grid;
  grid-template-columns: var(--avatar) minmax(0, 1fr);
  column-gap: var(--spacing-dot);
  block-size: var(--profile-h);
}

.avatar {
  display: block;
  inline-size: var(--avatar);
  block-size: var(--avatar);
  /* 테두리를 상자 안에 두면 64 칸에 11 칸이 5.8px 씩 앉아 번진다 — 틀선은 바깥 그림자 1px 로 */
  box-shadow: 0 0 0 1px var(--color-frame);
  shape-rendering: crispEdges;
}
.px-sky { fill: var(--color-blue-tint); }
.px-glow { fill: var(--color-glow); }
.px-wood { fill: var(--color-wood); }
.px-seat { fill: var(--color-bg); }
.px-shade { fill: var(--color-shade); }

.profile__text {
  display: grid;
  grid-template-rows: var(--nick-line) var(--text-dot--line-height);
  row-gap: calc(var(--profile-h) - var(--nick-line) - var(--text-dot--line-height));
  min-inline-size: 0;
}

.profile__top {
  display: flex;
  align-items: center;   /* 칩 22 를 닉네임 줄 42·28 가운데 — (42−22)/2 = 10 · (28−22)/2 = 3, 정수 */
  gap: var(--spacing-dot);
  min-inline-size: 0;
  white-space: nowrap;
}

/* 닉네임 — 화면에서 가장 큰 글자는 이것 하나(원칙 2) */
.nick {
  font-size: var(--nick-size);
  line-height: var(--nick-line);
  font-weight: 700;
}

.mood {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-icon-gap);
  padding-inline: var(--spacing-dot-inline);
  padding-block: 2px;   /* 칩 22 = 점선 2 + 2 + 16 + 2 — 닉네임 줄 42·28 가운데 10·3, 정수 */
  background: var(--color-blue-pale);
  border: 1px dotted var(--color-dot);
}

.intro {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 1-4 배경음악 막대 — 32 = 점선 2 + 글자 줄 16 + 위아래 7 */
.bgm {
  display: flex;
  align-items: center;
  gap: var(--spacing-dot-inline);
  block-size: var(--spacing-row-bar);
  padding-inline: 2px var(--spacing-dot-inline);
  background: var(--color-blue-pale);
  border: 1px dotted var(--color-dot);
  white-space: nowrap;
}

/* 재생 표시는 테이프 단추처럼 "눌려 걸린" 모양 — 색 말고도 상태가 보인다(주황 ▶ + 내려앉은 단추 + 움직이는 막대) */
.bgm__btn[aria-pressed="true"] {
  transform: translate(var(--spacing-press), var(--spacing-press));
  box-shadow: none;
  background: var(--color-window);
  color: var(--color-accent);
}
.bgm__btn[aria-pressed="false"] { color: var(--color-ink-soft); }

.bgm__song {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 곡명 Marquee — 칸보다 길 때만(main.js 가 .is-marquee). 1px 씩 계단으로 흐른다 — 매끈한 이동은 도트를 반 픽셀에 앉힌다 */
.bgm__song.is-marquee {
  text-overflow: clip;
  /* 오른쪽 끝을 풀어 준다. main.js 가 칸 안에서 끝나는 마지막 낱말 끝을 재 --song-cut(낱말 끝 + 띄어쓰기 5)·--song-fade(5)를 주면
     페이드가 띄어쓰기 한 칸 위에만 걸린다 — 멈춤 구간에 반 글자가 남지 않는다(qa-2 P3-1, 360 폭 "유" 반쪽).
     값이 없으면(첫 낱말도 안 들어가는 칸) 칸 끝 24px 페이드 */
  --cut: var(--song-cut, 100%);
  --fade: var(--song-fade, var(--spacing-row-guest));
  mask-image: linear-gradient(to right, var(--color-ink) calc(var(--cut) - var(--fade)), transparent var(--cut));
}
.bgm__song.is-marquee .bgm__track {
  display: inline-flex;
  gap: var(--spacing-row-guest);
  animation: marquee var(--marquee-dur, 6s) steps(var(--marquee-steps, 240)) infinite;
}
.bgm__song.is-marquee:hover .bgm__track,
.bgm:focus-within .bgm__track { animation-play-state: paused; }

/* 앞 30% 는 멈춤(DWELL, lessons #45) — 처음 보는 사람이 곡명 머리부터 읽는다. steps 는 구간마다 걸려 움직이는 70% 만 1px 계단 */
@keyframes marquee {
  0%, 30% { transform: none; }
  100% { transform: translateX(calc(var(--marquee-dist, 0px) * -1)); }
}

/* 소리 막대 3 — 3px × 11, 사이 4 = 17. 아래에서 자라는 계단 4칸 */
.bgm__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-icon-gap);
  block-size: var(--spacing-icon);
  margin-block-start: 1px;   /* 아이콘과 같은 이유 */
}
.bgm__bars i {
  display: block;
  inline-size: 3px;
  block-size: var(--spacing-icon);
  background: var(--color-accent);
  transform-origin: bottom;
  animation: bars var(--duration-bars) var(--ease-step-4) infinite;
}
.bgm__bars i:nth-child(2) { animation-delay: -300ms; animation-duration: calc(var(--duration-bars) * 0.8); }
.bgm__bars i:nth-child(3) { animation-delay: -600ms; animation-duration: calc(var(--duration-bars) * 1.2); }

@keyframes bars {
  0% { transform: scaleY(0.36); }
  25% { transform: scaleY(1); }
  50% { transform: scaleY(0.64); }
  75% { transform: scaleY(0.82); }
  100% { transform: scaleY(0.36); }
}

/* 멈춤 표시 — 막대가 서고(가운데 높이 아님 = 낮게) 옅은 잉크로. 주황 2곳이 된다(DESIGN 세기) */
[data-bgm="pause"] .bgm__bars i {
  animation: none;
  transform: scaleY(0.36);
  background: var(--color-ink-soft);
}
[data-bgm="pause"] .bgm__track { animation-play-state: paused; }

/* 1-5 방명록 한 줄 — 24 = 글자 줄 16 + 위아래 4 */
.guest {
  display: flex;
  align-items: center;
  gap: var(--spacing-icon-gap);
  block-size: var(--spacing-row-guest);
  white-space: nowrap;
}

/* 새 글 점 — 주황 세 곳 중 하나. 5px 네모(도트) */
.guest__new {
  flex: none;
  margin-block-start: 1px;   /* 5px 점을 24 줄 가운데 — 바깥 6 */
  inline-size: var(--spacing-dot-inline);
  block-size: var(--spacing-dot-inline);
  background: var(--color-accent);
}

.guest__list {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  block-size: var(--text-dot--line-height);
  margin-inline-start: var(--spacing-icon-gap);
}

.guest__item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-guest) var(--ease-step-2), visibility 0s linear var(--duration-guest);
}
.guest__item.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-guest) var(--ease-step-2), visibility 0s linear 0s;
}

.who { color: var(--color-blue); }

.guest__count { font-variant-numeric: tabular-nums; }

/* 1-6 고지 띠 — 47 = 점선 1 + 5 + 18 + 18 + 5 */
.fine {
  padding: 5px var(--spacing-dot-bar);
  font-size: var(--text-fine);
  line-height: var(--text-fine--line-height);
  border-block-start: 1px dotted var(--color-dot);
}

/* ── 2 [창 다시 열기] 칩 — #view=art 에서만. 창이 붙어 있던 모서리에 ─────────────── */
.chip {
  position: fixed;
  z-index: 3;
  left: max(var(--spacing-edge), env(safe-area-inset-left));
  bottom: max(var(--spacing-edge), env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-icon-gap);
  block-size: var(--spacing-row-bar);
  padding-inline: var(--spacing-dot-bar);
  background: var(--color-window);
  border: 1px solid var(--color-frame);
  box-shadow: var(--shadow-window);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-chip) var(--ease-step-2), visibility 0s linear var(--duration-chip);
}
.chip::after { inset: -7px -1px; }   /* 보이는 32 → 누름 44 = 패딩 상자 30 + 7 씩(테두리 바깥 6) */

[data-view="art"] .win {
  opacity: 0;
  transform: scale(0.25);
  visibility: hidden;
  transition:
    opacity var(--duration-minimize) var(--ease-step-4),
    transform var(--duration-minimize) var(--ease-step-4),
    visibility 0s linear var(--duration-minimize);
}

[data-view="art"] .chip {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-chip) var(--ease-step-2) var(--duration-minimize), visibility 0s linear 0s;
}

/* ── 3 쪽지 — 누른 탭 바로 아래로 펼친다(위치는 main.js 가 정수 px 로) ───────────────── */
.note {
  position: fixed;
  inset: auto;
  top: var(--note-top, 0);
  left: var(--note-left, 0);
  inline-size: var(--note-w, var(--spacing-note-w));
  margin: 0;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-window);
  border: 1px solid var(--color-frame);
  box-shadow: var(--shadow-note);
  overflow: visible;
  transform-origin: var(--note-origin, left top);
  opacity: 0;
  transform: scale(0.92);
  /* 닫기 Fade out 100ms — display·overlay 를 늦춰 사라지는 모습이 보이게 */
  transition:
    opacity var(--duration-note-out) var(--ease-in),
    transform var(--duration-note-out) var(--ease-in),
    overlay var(--duration-note-out) allow-discrete,
    display var(--duration-note-out) allow-discrete;
}

.note:popover-open {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-note-in) var(--ease-step-2),
    transform var(--duration-note-in) var(--ease-step-2),
    overlay var(--duration-note-in) allow-discrete,
    display var(--duration-note-in) allow-discrete;
}

@starting-style {
  .note:popover-open { opacity: 0; transform: scale(0.92); }
}

.note::backdrop { background: transparent; }

.note__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-dot-bar);
  block-size: var(--spacing-row-bar);
  padding-inline: var(--spacing-dot-bar) 4px;
  background: var(--color-blue-tint);
}

.note__title { font-weight: 700; }

.note__body {
  display: grid;
  justify-items: start;
  gap: var(--spacing-dot);
  padding: var(--spacing-dot) var(--spacing-dot) 0;
}

.note__text {
  font-family: var(--font-body);
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
}

.note__guests { gap: var(--spacing-dot-bar); }
.note__meta { display: flex; gap: var(--spacing-dot-inline); }

.note__fine {
  padding: var(--spacing-dot) var(--spacing-dot) var(--spacing-dot);
  color: var(--color-ink-soft);
}

/* ── 그림 고르기·배치 — 짧은 가로 화면 ─────────────────────────────────── */
@media (max-height: 500px) and (min-aspect-ratio: 6/5) {
  .stage { --ay: var(--art-wide-y-short); }
}

/* ── 세로 화면(비 < 1.2) — 세로판 그림, 창은 왼쪽 위(유리 지붕 띠) ───────────────── */
@media (max-aspect-ratio: 6/5) {
  .stage {
    --ratio: var(--art-tall-ratio);
    --ax: var(--art-tall-x);
    --ay: var(--art-tall-y);
  }

  .ph--wide { display: none; }
  .ph--tall { display: block; }

  .ph--tall .ph__roof { block-size: 14%; }
  .ph--tall .ph__hero { left: 44%; top: 44%; inline-size: 55%; block-size: 25%; }  /* 세로판 작업대·의자 x 44–99% · y 44–69% */
  .ph--tall .ph__window { left: 56%; top: 16%; inline-size: 30%; block-size: 26%; }
  .ph--tall .ph__floor { block-size: 38%; }

  .beam { left: 35%; top: 14%; inline-size: 65%; block-size: 60%; }

  .win {
    top: var(--edge-t);
    bottom: auto;
    inline-size: min(var(--spacing-win-w), calc(100vw - var(--edge-l) - var(--edge-r)));
    inline-size: min(var(--spacing-win-w), round(down, calc(100vw - var(--edge-l) - var(--edge-r)), var(--spacing-dot)));
    transform-origin: left top;
  }

  .chip {
    top: max(var(--spacing-edge), env(safe-area-inset-top));
    bottom: auto;
  }
}

/* ── 폰 구성 ① 세로 화면 폭 < 560 — 창 = 화면 폭 − 가장자리 둘, 프로필 44 ───────────── */
@media (max-aspect-ratio: 6/5) and (max-width: 559px) {
  .win { inline-size: calc(100vw - var(--edge-l) - var(--edge-r)); }

  .profile {
    --avatar: var(--spacing-avatar-sm);
    --nick-size: var(--text-dot-2);
    --nick-line: var(--text-dot-2--line-height);
    --profile-h: var(--spacing-row-profile-sm);
  }

  .dust i:nth-child(n + 9) { display: none; }
}

/* ── 폰 구성 ② 가로 화면에서 창 폭 < 377(--spacing-win-w-min — 컨테이너 쿼리는 변수를 못 읽고, 재는 폭은 틀 2 를 뺀 안 폭이라 375) ──
   닉네임 줄 실측: 36px 굵게 4자 144 + 11 + 기분 칩 121("지금 기분 나른함", qa-2) = 276 ≤ 창 − 101 → 창 ≥ 377 (720×450 · 667×375 가 폰 구성) */
@container win (width < 375px) {
  .profile {
    --avatar: var(--spacing-avatar-sm);
    --nick-size: var(--text-dot-2);
    --nick-line: var(--text-dot-2--line-height);
    --profile-h: var(--spacing-row-profile-sm);
  }
}

/* 아주 좁은 창 — 기분 칩의 "지금" 을 접는다. 폰 닉네임 줄 96 + 11 + 121 = 228 ≤ 창 − 79 → 창 ≥ 307(안 폭 305).
   "오늘의" 였을 때(133)는 667×375 의 창 308 에서 접혔고, "지금" 은 들어간다 — 지금 재는 폭에서는 접히는 곳이 없다(안전 규칙) */
@container win (width < 305px) {
  .mood__pre { display: none; }
}

/* 창 폭 451 미만 — 제목 띠의 홈 이름을 숨긴다(읽어 주는 글로는 남긴다) */
@container win (width < 451px) {
  .bar__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ── 탭이 안 보이면 반복 모션을 멈춘다 ─────────────────────────────────── */
[data-paused] .beam,
[data-paused] .dust i,
[data-paused] .bgm__bars i,
[data-paused] .bgm__track { animation-play-state: paused; }

/* ── 움직임 줄이기 — 반복 0 · 전환 즉시 · 숫자는 처음부터 28 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .beam { animation: none; opacity: 1; }
  .dust { display: none; }
  .win { animation: none; }
  .bgm__bars i { animation: none; transform: scaleY(0.64); }
  .bgm__song .bgm__track { animation: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}