:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
  --paper: #f3efe6; --ink: #30372e; --muted: #747a6e; --line: #dbded1;
  --accent: #486346; --accent-soft: #e0e7d8; --white: #fffaf0;
  --glass: rgba(23,29,38,.64); --shadow: rgba(8,13,25,.2);
  --font: -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-family: var(--font); font-size: 14px; background: #22346a; color: var(--white);
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button,input { font: inherit; }
button { cursor: pointer; color: inherit; background: none; border: 0; }
button:disabled { cursor: default; opacity: .4; }
button,summary,a,input { -webkit-tap-highlight-color: transparent; }
button:focus-visible,summary:focus-visible,a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#game { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#game canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: var(--w) !important; height: var(--h) !important; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
body:not([data-view="walk"]) #game { pointer-events: none; }
/* The background remains behind panels, but its canvas accepts direct movement input. */
body:not([data-view="walk"]) #game canvas { pointer-events: auto; }
.scene-shade { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(9,15,27,.22),transparent 55%),linear-gradient(0deg,rgba(9,15,27,.3),transparent 23%); }
/* 겹침 순서는 여기서만 정한다(작을수록 아래). 타이머 < 헤더·하단 < 음악 무대·TV < 말풍선 < 작은 플레이어 < 큰 뷰 배경
   < 팝업·큰 음악 뷰 < 음악 목록 = 토스트 < 메뉴가 열린 헤더 < 캡처·확인 창. 잠깐 여는 팝업은 PixelLayers로 한 번에 하나만 열린다. */
:root { --z-panel: 2; --z-chrome: 3; --z-stage: 4; --z-bubble: 5; --z-player: 6; --z-backdrop: 7; --z-popover: 8; --z-library: 20; --z-toast: 20; --z-header-open: 21; --z-modal: 100; --z-confirm: 101; }
.app-header { position: fixed; z-index: var(--z-chrome); top: calc(25px + env(safe-area-inset-top)); left: calc(32px + env(safe-area-inset-left)); right: calc(32px + env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.app-header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: -.8px; text-shadow: 0 1px 8px var(--shadow); }
.brand small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .7px; margin-top: 4px; opacity: .72; }
.toolbar { display: flex; gap: 8px; }
.tool-button { height: 40px; padding: 0 13px; border: 1px solid rgba(255,250,240,.16); border-radius: 12px; background: var(--glass); display: flex; align-items: center; gap: 7px; font-size: 12px; backdrop-filter: blur(12px); }
.tool-button:hover,.bottom-dock button:hover,.quiet-clock button:hover { background: rgba(61,69,75,.85); }
.tool-button[aria-pressed="true"] { color: #e0edb4; }
.icon-only { width: 40px; padding: 0; justify-content: center; }

h1 { font-size: 15px; font-weight: 600; letter-spacing: -.5px; margin: 0; }
.date-label { color: var(--muted); font-size: 10px; white-space: nowrap; }

input::placeholder { color: #979c90; opacity: 1; }

.text-button { color: var(--muted); font-size: 10px; padding: 10px 0 0; text-decoration: underline; text-underline-offset: 3px; }

.scene-caption { position: fixed; bottom: calc(113px + env(safe-area-inset-bottom)); right: calc(42px + env(safe-area-inset-right)); text-align: right; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.scene-number { font: 10px var(--mono); opacity: .62; letter-spacing: 2px; }
.scene-caption h2 { font-size: 20px; font-weight: 500; letter-spacing: -.7px; margin: 10px 0 7px; }
.scene-caption p { font-size: 11px; opacity: .7; margin: 0; }
.bottom-dock { position: fixed; z-index: var(--z-chrome); right: calc(32px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); display: flex; align-items: center; padding: 5px; border-radius: 13px; border: 1px solid rgba(255,250,240,.16); background: var(--glass); backdrop-filter: blur(12px); }
.bottom-dock button { display: flex; align-items: center; gap: 7px; padding: 10px 12px; font-size: 11px; border-radius: 8px; }
.bottom-dock svg { width: 17px; height: 17px; }
.dock-divider { height: 15px; width: 1px; background: rgba(255,250,240,.17); margin: 0 3px; }
.quiet-clock { position: fixed; z-index: var(--z-chrome); top: calc(100px + env(safe-area-inset-top)); left: calc(32px + env(safe-area-inset-left)); }
.quiet-clock button { display: flex; align-items: center; gap: 10px; background: var(--glass); padding: 12px 16px; border-radius: 12px; }
.quiet-clock #mini-timer { font: 17px var(--mono); font-variant-numeric: tabular-nums; }
.quiet-clock span:last-child { font-size: 10px; opacity: .7; margin-left: 8px; }
.walk-help { position: fixed; top: calc(103px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 11px; margin: 0; padding: 10px 15px; border-radius: 20px; background: var(--glass); text-align: center; pointer-events: none; white-space: nowrap; }

body[data-view="walk"] .scene-caption { display: none; }
body[data-view="quiet"] .scene-shade { opacity: .4; }
.settings-dialog { width: min(420px,calc(100vw - 32px)); padding: 28px; border: 1px solid #fffaf0; border-radius: 18px; color-scheme: light; color: var(--ink); background: var(--paper); box-shadow: 0 16px 80px rgba(8,13,25,.3); max-height: calc(100dvh - 48px); overflow-y: auto; }
.settings-dialog::backdrop { background: rgba(9,15,27,.55); backdrop-filter: blur(4px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.dialog-heading h2 { font-size: 18px; font-weight: 600; letter-spacing: -.5px; margin: 0; }
.dialog-heading p { color: var(--muted); font-size: 12px; margin: 9px 0 0; line-height: 1.6; }
.dialog-heading button { padding: 2px; color: var(--muted); }
.scene-options { display: grid; gap: 9px; }
.scene-options button { display: flex; align-items: center; gap: 14px; padding: 13px; text-align: left; border: 1px solid var(--line); border-radius: 10px; }
.scene-options button[aria-pressed="true"] { border-color: #9eae94; background: var(--accent-soft); }
.scene-options strong { display: block; font-size: 13px; font-weight: 600; }
.scene-options small { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.scene-swatch { flex: 0 0 40px; height: 46px; border-radius: 5px; image-rendering: pixelated; background: linear-gradient(#746588 0 45%,#efa787 45% 65%,#5c5e6d 65% 80%,#383f45 80%); }
.scene-swatch.snow { background: linear-gradient(#232e43 0 40%,#5f6b87 40% 65%,#acb8d0 65% 80%,#65738f 80%); }
.scene-swatch.festival { background: linear-gradient(#222646 0 45%,#57435d 45% 60%,#dfbd77 60% 67%,#424c4b 67%); }
.selected-mark { margin-left: auto; width: 16px; visibility: hidden; color: var(--accent); }
[aria-pressed="true"] > .selected-mark { visibility: visible; }
.sound-toggle { display: flex; align-items: center; gap: 10px; justify-content: center; border: 1px solid var(--line); width: 100%; padding: 13px; border-radius: 9px; margin-bottom: 25px; font-size: 13px; }
.sound-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: #aebe9f; color: var(--accent); }
.sound-slider { display: block; margin: 21px 0; }
.sound-slider span { display: flex; justify-content: space-between; font-size: 12px; }
.sound-slider output { color: var(--muted); font: 11px var(--mono); }
.sound-slider input { display: block; width: 100%; accent-color: var(--accent); margin: 10px 0 0; cursor: pointer; }
.check-setting { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 25px; }
.check-setting input { accent-color: var(--accent); }
.compact-dialog { width: min(340px,calc(100vw - 32px)); }
.compact-dialog label { font-size: 12px; color: var(--muted); }
.minutes-input-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.minutes-input-row input { width: 100%; font: 36px var(--mono); color: var(--ink); padding: 10px; border: 1px solid var(--line); background: #fffdf7; border-radius: 8px; }
.compact-dialog form p { font-size: 11px; color: var(--muted); margin: 12px 0 24px; }
.toast { position: fixed; z-index: var(--z-toast); bottom: calc(95px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: min(460px,calc(100vw - 32px)); padding: 14px 20px; background: var(--paper); color: var(--ink); font-size: 12px; line-height: 1.6; border-radius: 12px; box-shadow: 0 5px 28px var(--shadow); text-align: center; }
.noscript-message { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 30px; background: var(--paper); color: var(--ink); }
@media (min-width: 1600px) {  .app-header { left: calc(32px + env(safe-area-inset-left)); right: calc(32px + env(safe-area-inset-right)); }  .scene-caption,.bottom-dock { right: 5vw; } .quiet-clock { left: 5vw; } }
@media (max-width: 700px) {
  .app-header { top: calc(18px + env(safe-area-inset-top)); left: calc(20px + env(safe-area-inset-left)); right: calc(20px + env(safe-area-inset-right)); }
  .brand { font-size: 19px; gap: 9px; } .brand small { font-size: 9px; letter-spacing: .2px; }
  .toolbar { gap: 6px; } .tool-button { height: 36px; padding: 0 10px; gap: 5px; font-size: 11px; } .tool-button svg { width: 16px; height: 16px; }

  .scene-caption { display: none; } .bottom-dock { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); white-space: nowrap; } .bottom-dock button { padding: 9px 10px; }
  .quiet-clock { left: calc(20px + env(safe-area-inset-left)); top: calc(88px + env(safe-area-inset-top)); } .walk-help { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); font-size: 10px; }
  .settings-dialog { padding: 23px; }
}
@media (max-height: 680px) and (min-width: 701px) {  .app-header { top: 18px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }

/* 픽셀 풍경과 맞춘 사각 프레임과 단단한 명암. 글자는 읽기 쉬운 시스템 글꼴을 유지한다. */
:root {
  --paper: #f4e9cc; --ink: #343c35; --muted: #707765; --line: #c9c5a8;
  --accent: #55704f; --accent-soft: #d8e0c5; --glass: rgba(35,39,50,.92);
  --pixel-edge: #424d40; --pixel-light: #fff8df; --pixel-shadow: #adaf92;
}
svg { fill: currentColor; stroke: none; shape-rendering: crispEdges; }
.brand { text-shadow: 2px 2px 0 rgba(27,34,41,.8); }
.settings-dialog {
  border: 3px solid var(--pixel-edge); border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--pixel-light), 5px 5px 0 rgba(24,31,35,.48);
}

.minutes-input-row input,.sound-toggle,.scene-options button { border-radius: 0; border: 2px solid var(--pixel-edge); }

.minutes-input-row input,.sound-toggle,.scene-options button { box-shadow: inset 2px 2px 0 var(--pixel-light), inset -2px -2px 0 #b5bea3; }

.check-setting { border-top: 2px dashed var(--line); }

.tool-button,.bottom-dock,.quiet-clock button,.walk-help { border: 2px solid #eee8c8; border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), 3px 3px 0 rgba(25,29,38,.7); backdrop-filter: none; }
.tool-button { padding-left: 12px; padding-right: 12px; }
.icon-only { padding: 0; }
.bottom-dock { padding: 4px; }
.bottom-dock button { border-radius: 0; }
.bottom-dock button[aria-pressed="true"] { background: #566c59; box-shadow: inset -2px -2px 0 #37493d; }
.dock-divider { width: 2px; background: #929c86; }
.walk-help { white-space: normal; width: max-content; max-width: calc(100vw - 32px); line-height: 1.5; }
.settings-dialog { background: var(--paper); }
.settings-dialog::backdrop { backdrop-filter: none; }
.dialog-heading { border-bottom: 2px dashed var(--line); padding-bottom: 18px; }
.dialog-heading button { padding: 4px; }
.scene-options button[aria-pressed="true"],.sound-toggle[aria-pressed="true"] { border-color: #587057; }
.scene-swatch { border: 2px solid #707b69; border-radius: 0; }
.sound-slider input { appearance: none; background: transparent; height: 24px; }
.sound-slider input::-webkit-slider-runnable-track { height: 6px; background: #c4cbb3; border: 1px solid #81917a; }
.sound-slider input::-webkit-slider-thumb { appearance: none; width: 14px; height: 18px; margin-top: -7px; border: 2px solid var(--pixel-edge); border-radius: 0; background: #78916e; box-shadow: inset 2px 2px 0 #c2d3ae; }
.sound-slider input::-moz-range-track { height: 4px; background: #c4cbb3; border: 1px solid #81917a; }
.sound-slider input::-moz-range-thumb { width: 10px; height: 14px; border: 2px solid var(--pixel-edge); border-radius: 0; background: #78916e; }
.toast { border: 2px solid var(--pixel-edge); border-radius: 0; box-shadow: 4px 4px 0 rgba(24,31,35,.5); }
@media (max-width: 700px) {
  
  .tool-button { padding-left: 9px; padding-right: 9px; }
  
}

/* 조용한 무채색 픽셀 UI와 하나로 모은 조작바. */
:root {
  --paper: #ebeae5; --ink: #303234; --muted: #737575; --line: #c8c8c2;
  --accent: #55595b; --accent-soft: #dadbd7; --white: #f8f8f5;
  --glass: rgba(36,38,40,.94); --pixel-edge: #444749; --pixel-light: #faf9f5; --pixel-shadow: #adadaa;
}
.brand small,.scene-number,.scene-caption p,.dialog-heading p { display: none; }

.minutes-input-row input,.sound-toggle,.scene-options button { box-shadow: inset 2px 2px 0 var(--pixel-light), inset -2px -2px 0 #bfc1bc; }
.minutes-input-row input { background: #f5f4f0; }

.scene-options button[aria-pressed="true"],.sound-toggle[aria-pressed="true"] { border-color: #767e7a; color: #414744; }
.scene-swatch { border-color: #888c8a; filter: grayscale(.85); }
.sound-slider input::-webkit-slider-runnable-track { background: #cdcfca; border-color: #999e9b; }
.sound-slider input::-webkit-slider-thumb { border-color: var(--pixel-edge); background: #818885; box-shadow: inset 2px 2px 0 #c4c8c4; }
.sound-slider input::-moz-range-track { background: #cdcfca; border-color: #999e9b; }
.sound-slider input::-moz-range-thumb { background: #818885; }
.bottom-dock { gap: 2px; }
.bottom-dock button { min-height: 40px; color: #f1f1ed; }
.bottom-dock button:hover { background: #555958; }
.bottom-dock button[aria-pressed="true"] { background: #626864; box-shadow: inset -2px -2px 0 #414643; }
.bottom-dock #sound-menu[aria-pressed="true"] { color: #f1f1ed; }
.quiet-clock-display { display: flex; align-items: center; gap: 10px; background: var(--glass); padding: 12px 16px; border: 2px solid #eee; border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), 3px 3px 0 rgba(25,29,38,.7); }
.dialog-heading { margin-bottom: 20px; }
@media (max-width: 700px) {
  
  .bottom-dock { width: min(390px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); justify-content: space-around; }
  .bottom-dock button { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 2px; font-size: 9px; }
  .bottom-dock button svg { width: 18px; height: 18px; }
  .walk-help { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* SAJU-DOT의 픽셀 서체와 얇은 프레임을 무채색으로 적용한다. */
@font-face { font-family: Galmuri11; src: url("../assets/ui/fonts/Galmuri11-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Mulmaru; src: url("../assets/ui/fonts/Mulmaru.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { --font: Galmuri11, monospace; --paper: #f5f5f2eF; --pixel-edge: #3d4142; --pixel-light: #fff; }
body { line-height: 1.65; font-synthesis: none; }
button,input,summary { font-family: var(--font); font-weight: 400; letter-spacing: 0; }
.brand,.scene-caption h2,.dialog-heading h2 { font-family: Mulmaru, monospace; font-weight: 400; }
.brand { font-size: 24px; }
.settings-dialog { border: 0; box-shadow: -2px 0 var(--pixel-edge),2px 0 var(--pixel-edge),0 -2px var(--pixel-edge),0 2px var(--pixel-edge),2px 4px 0 rgba(25,27,29,.35),inset 0 2px var(--pixel-light); }

.minutes-input-row input,.sound-toggle,.scene-options button { border-width: 1px; }

.bottom-dock { background: #f5f5f2ef; color: var(--ink); border: 1px solid var(--pixel-edge); box-shadow: 2px 3px 0 rgba(25,27,29,.4); padding: 3px; }
.bottom-dock button { position: relative; min-height: 44px; color: var(--ink); font-size: 12px; }
.bottom-dock button:hover { background: #e0e1dc; }
.bottom-dock button[aria-pressed="true"] { color: #333; background: #dcded9; box-shadow: none; }
.bottom-dock button[aria-pressed="true"]::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; height: 2px; background: #626765; }
.bottom-dock #sound-menu[aria-pressed="true"] { color: #333; }
.quiet-clock-display { border: 1px solid #dedfdb; box-shadow: 2px 2px 0 rgba(25,27,29,.5); }
.dialog-heading { padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.dialog-heading h2 { font-size: 20px; }
.dialog-heading button { min-width: 36px; min-height: 36px; }
.scene-options { gap: 12px; }
.scene-options button { padding: 10px; box-shadow: 2px 2px 0 #d8dad5; }
.scene-options button[aria-pressed="true"] { box-shadow: 2px 2px 0 var(--pixel-edge); }
.scene-options strong { font-size: 15px; font-weight: 400; }
.scene-options small { display: none; }
.scene-swatch { flex-basis: 42px; height: 68px; border-width: 1px; background-position: center; background-size: cover; filter: grayscale(.5); }
.scene-swatch.sunset { background-image: url("../assets/ui/scenes/hangang.png"); }
.scene-swatch.snow { background-image: url("../assets/ui/scenes/nyc.png"); }
.scene-swatch.festival { background-image: url("../assets/ui/scenes/fireworks.png"); }
.help-copy { margin: 0; white-space: pre-line; color: var(--ink); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .brand { font-size: 22px; }
  
  .bottom-dock button { padding: 6px 1px; font-size: 10px; }
  .bottom-dock button svg { width: 18px; height: 18px; }
}

/* 산책 조작과 설정을 한 푸터에 둔다. */
#game { pointer-events: none; }
.bottom-dock { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.dock-actions,.movement-controls { display: flex; align-items: center; gap: 2px; }
.movement-controls { justify-content: center; padding: 5px 3px 7px; border-bottom: 1px dashed #c8c8c2; }
.movement-controls button { min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid #7b807e; box-shadow: 0 2px 0 #b4b8b3; touch-action: none; user-select: none; -webkit-user-select: none; }
.movement-controls button[aria-pressed="true"] { box-shadow: inset 0 1px 0 #aaa; background: #cbcfca; }
.movement-controls button[aria-pressed="true"]::before { display: none; }
.dock-actions button { flex: 1; }
@media (max-width: 700px) {
  .dock-actions { width: 100%; }
  .dock-actions button { min-height: 48px; }
  .movement-controls button { flex: 0 1 auto; flex-direction: row; font-size: 12px; padding: 6px 10px; }
}

/* 메뉴는 상단, 산책 조작은 하단 중앙에 둔다. */
.app-header { gap: 12px; }
.top-actions { display: flex; align-items: center; gap: 2px; padding: 3px; background: #f5f5f2ef; color: var(--ink); border: 1px solid var(--pixel-edge); box-shadow: 2px 3px 0 rgba(25,27,29,.4); }
.top-actions button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 6px 9px; font-size: 12px; white-space: nowrap; }
.top-actions button svg { width: 18px; height: 18px; }
.top-actions button:hover { background: #e0e1dc; }
.top-actions button[aria-pressed="true"] { background: #dcded9; }
.top-actions button[aria-pressed="true"]::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; height: 2px; background: #626765; }
.bottom-dock { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
body[data-view="quiet"] .bottom-dock { display: none; }
.movement-controls { border: 0; padding: 3px; }
@media (min-width: 1600px) { .bottom-dock { left: 50%; right: auto; } }
@media (max-width: 700px) {
  .app-header { left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); }
  .top-actions { gap: 0; padding: 2px; }
  .top-actions button { width: 34px; min-width: 34px; height: 40px; min-height: 40px; padding: 0; }
  .top-actions button span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bottom-dock { width: max-content; }
}

/* 원본 풍경의 하늘·그늘 색을 낮은 채도로 정리한 장면별 UI 팔레트. */
body[data-scene="namsan"] {
  --paper: #f3eff1f2; --ink: #393540; --muted: #746d79; --line: #cec6cd;
  --accent: #615666; --accent-soft: #ded8de; --pixel-edge: #504957; --pixel-light: #fcf9fb;
  --ui-inset: #e2dce2; --ui-input: #faf7f9; --ui-selected: #d3cbd3; --ui-mid: #9e929e;
  --ui-header: rgba(48, 43, 56, .62); --ui-header-hover: rgba(230, 219, 231, .13); --ui-header-ink: #f0e9f0;
  --ui-header-line: rgba(240, 230, 241, .16); --ui-bar: #aaa0ac; --ui-clock-shadow: #d5cbd4;
}
body[data-scene="nyc"] {
  --paper: #efedf0f2; --ink: #38343d; --muted: #746f78; --line: #c9c6cd;
  --accent: #5e5864; --accent-soft: #dcd9df; --pixel-edge: #4c4752; --pixel-light: #faf9fb;
  --ui-inset: #dfdce1; --ui-input: #f8f7f9; --ui-selected: #d0ccd3; --ui-mid: #98929c;
  --ui-header: rgba(40, 35, 45, .64); --ui-header-hover: rgba(222, 218, 226, .13); --ui-header-ink: #eeeaf0;
  --ui-header-line: rgba(232, 226, 236, .16); --ui-bar: #a6a1aa; --ui-clock-shadow: #d1ccd4;
}
body[data-scene="festival"] {
  --paper: #eef0f3f2; --ink: #343944; --muted: #6c7280; --line: #c4c9d1;
  --accent: #566072; --accent-soft: #d9dde5; --pixel-edge: #454d5c; --pixel-light: #f9fafc;
  --ui-inset: #dce0e7; --ui-input: #f7f8fa; --ui-selected: #cbd1db; --ui-mid: #8e98a8;
  --ui-header: rgba(34, 40, 55, .65); --ui-header-hover: rgba(215, 224, 239, .13); --ui-header-ink: #e9edf5;
  --ui-header-line: rgba(220, 228, 243, .16); --ui-bar: #9ba5b5; --ui-clock-shadow: #c8d0dc;
}
.top-actions { background: var(--ui-header); color: var(--ui-header-ink); border-color: var(--ui-header-line); box-shadow: none; }
.top-actions button { color: inherit; text-shadow: 1px 1px 0 rgba(17,17,25,.35); }
.top-actions button:hover,.top-actions button[aria-pressed="true"] { background: var(--ui-header-hover); }
.top-actions button[aria-pressed="true"]::before { background: var(--ui-bar); }
.settings-dialog { background: var(--paper); color: var(--ink); }

.minutes-input-row input { background: var(--ui-input); color: var(--ink); }

input::placeholder { color: var(--muted); }

.minutes-input-row input,.sound-toggle,.scene-options button { box-shadow: inset 1px 1px 0 var(--pixel-light),inset -1px -1px 0 var(--ui-selected); }

.sound-toggle[aria-pressed="true"] { color: var(--ink); }
.scene-options button[aria-pressed="true"],.sound-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--pixel-edge); }
.scene-swatch { border-color: var(--ui-mid); }
.sound-slider input::-webkit-slider-runnable-track { background: var(--ui-inset); border-color: var(--ui-mid); }
.sound-slider input::-webkit-slider-thumb { background: var(--ui-mid); box-shadow: inset 2px 2px 0 var(--ui-selected); }
.sound-slider input::-moz-range-track { background: var(--ui-inset); border-color: var(--ui-mid); }
.sound-slider input::-moz-range-thumb { background: var(--ui-mid); }
.bottom-dock { background: var(--paper); border-color: var(--pixel-edge); color: var(--ink); }
.bottom-dock button { color: var(--ink); }
.bottom-dock button:hover { background: var(--accent-soft); }
.movement-controls button { border-color: var(--ui-mid); box-shadow: 0 2px 0 var(--ui-selected); }
.movement-controls button[aria-pressed="true"] { color: var(--ink); background: var(--ui-selected); box-shadow: inset 0 1px 0 var(--ui-mid); }
.quiet-clock-display { background: var(--ui-header); color: var(--ui-header-ink); border-color: var(--ui-header-line); }

/* YouTube 검색과 영상은 한 화면에서 보이도록 별도 패널로 둔다. */
.music-panel { position: fixed; z-index: var(--z-stage); top: calc(88px + env(safe-area-inset-top)); right: calc(32px + env(safe-area-inset-right)); width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; padding: 12px; color: var(--ink); color-scheme: light; background: #f5f5f2; border: 1px solid var(--pixel-edge); box-shadow: 2px 3px 0 rgba(25,27,29,.4); }
.music-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.music-heading h2 { margin: 0; font: 20px Mulmaru, monospace; }
.music-heading button { width: 36px; height: 36px; display: grid; place-items: center; }
.music-heading-actions { display: flex; align-items: center; gap: 4px; }
.music-heading .music-heading-text { width: auto; min-width: 38px; padding: 4px 6px; font-size: 10px; }
.music-heading .music-heading-text:hover { background: #e0e1dc; }
.youtube-queue-progress { margin-left: auto; color: #626765; font-size: 10px; white-space: nowrap; }
.music-panel.is-mini .youtube-queue-progress { color: #f5f5e9; }
.music-heading svg { width: 16px; height: 16px; }
.youtube-player { flex: none; width: 100%; height: max(200px, 20vw); max-height: 220px; margin: 8px 0; background: #000; }
.youtube-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.music-controls { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.music-search summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; list-style: none; }
.music-search summary::-webkit-details-marker { display: none; }
.music-search summary::after { content: "+"; color: var(--muted); font-size: 17px; }
.music-search[open] summary::after { content: "−"; }
.youtube-status { margin: 8px 0; font-size: 11px; line-height: 1.6; color: #646966; }
.youtube-status:empty { display: none; }
.youtube-selection { margin: 8px 0; padding: 8px; border: 1px solid var(--line); background: var(--ui-input); }
.youtube-selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.youtube-selection h3 { margin: 0; font-size: 12px; font-weight: 400; }
.youtube-selection h3 span { color: #6d726f; }
.youtube-selection-heading button { font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }
.youtube-selection-list { display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; list-style: none; margin: 7px 0; padding: 0 0 3px; }
.youtube-selection-list:empty { display: none; }
.youtube-selection-list li { display: flex; align-items: center; flex: none; background: #dfe1db; }
.youtube-selection-list img { display: block; width: 88px; height: 50px; object-fit: contain; background: #d1d3ce; }
.youtube-selection-list li button { display: grid; place-items: center; width: 26px; min-height: 44px; padding: 0; color: #555b58; font-size: 18px; }
.youtube-selection-list li button:hover { background: #c9cdc5; }
#youtube-play-selection { width: 100%; min-height: 36px; margin-top: 4px; border: 1px solid var(--pixel-edge); background: #555b58; color: #fff; font-size: 12px; box-shadow: inset 1px 1px #858c87; }
.youtube-results { list-style: none; padding: 0; margin: 0; }
.youtube-results li + li { border-top: 1px solid #d1d3ce; }
.youtube-result-row { display: flex; align-items: center; gap: 8px; }
.youtube-select-toggle { display: grid; place-items: center; flex: 0 0 36px; min-height: 44px; cursor: pointer; }
.youtube-select-toggle input { width: 20px; height: 20px; margin: 0; accent-color: #555b58; cursor: pointer; }
.youtube-result { display: flex; align-items: center; min-width: 0; flex: 1; gap: 10px; padding: 8px 0; text-align: left; }
.youtube-result:hover { background: #e5e6e1; }
.youtube-result img { flex: 0 0 120px; width: 120px; height: 70px; object-fit: contain; background: #dedfda; }
.youtube-result span { min-width: 0; }
.youtube-result strong,.youtube-result small { display: block; overflow-wrap: anywhere; }
.youtube-result strong { font-size: 12px; font-weight: 400; line-height: 1.5; }
.youtube-result small { margin-top: 4px; font-size: 10px; color: #6d726f; }
.music-recommendations { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 2px; }
.music-recommendations h3 { margin: 0 0 3px; font-size: 12px; font-weight: 400; }
.youtube-categories { display: flex; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; margin: 10px 0 4px; padding-bottom: 5px; scrollbar-width: thin; }
.youtube-categories button { flex: none; padding: 5px 8px; border: 1px solid #bfc2bc; color: #5f6461; font-size: 11px; white-space: nowrap; }
.youtube-categories button[aria-pressed="true"] { border-color: var(--pixel-edge); color: #fff; background: #555b58; }
.music-panel.is-mini { width: min(300px, calc(100vw - 32px)); padding: 10px 10px 12px; background: #888c87; border: 2px solid #303635; box-shadow: inset 2px 2px #c9cbc0, inset -3px -3px #555d59, 4px 5px 0 rgba(17,20,20,.5); }
.music-panel.is-mini::before { content: ""; position: absolute; left: 28px; top: -10px; width: 34px; height: 8px; background: linear-gradient(45deg,transparent 40%,#303635 40% 60%,transparent 60%) left bottom / 14px 8px no-repeat,linear-gradient(-45deg,transparent 40%,#303635 40% 60%,transparent 60%) right bottom / 14px 8px no-repeat; }
.music-panel.is-mini .music-heading { padding: 0 1px 5px; color: #f5f5e9; }
.music-panel.is-mini .music-heading h2 { font-size: 17px; text-shadow: 1px 1px #414845; }
.music-panel.is-mini .music-heading-text { min-height: 30px; height: 30px; background: #c1c5b8; border: 1px solid #414845; color: #303635; box-shadow: inset 1px 1px #f5f5e9, 1px 2px #4d5550; }
.music-panel.is-mini .music-heading-text:hover { background: #d6d9ce; }
.music-panel.is-mini .youtube-player { margin: 4px 0 10px; box-shadow: 0 0 0 3px #303635, 0 0 0 5px #b9bcb1; }
.music-panel.is-mini::after { content: ""; display: block; flex: none; height: 8px; margin: 1px 2px 0; background: radial-gradient(circle at 5px 4px,#e4a26a 0 2px,transparent 2.5px),repeating-linear-gradient(90deg,#4d5550 0 3px,transparent 3px 6px) right center / 55px 4px no-repeat; }
@media (max-width: 700px) { .music-panel { top: calc(72px + env(safe-area-inset-top)); right: 16px; max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }
@media (max-width: 700px) { body.music-settings-open .music-panel.is-mini { top: calc(8px + env(safe-area-inset-top)); } }

/* 패널은 풍경이 은은하게 비치도록 한다. */

.settings-dialog .scene-options button,.settings-dialog .sound-toggle { color: var(--ink); }
.scene-swatch { filter: none; }

/* 풍경 원본의 포인트 색만 선택 상태와 진행 표시에 사용한다. */

.top-actions button[aria-pressed="true"]::before { background: var(--scene-point, #a0a0a0); }

.scene-options button[aria-pressed="true"] { border-left: 4px solid var(--scene-point, #a0a0a0); }
.movement-controls button[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--scene-point, #a0a0a0); }

/* 각 풍경의 원본 픽셀 팔레트를 패널과 버튼 전체에 사용한다. */
body[data-scene="namsan"] {
  --paper: #fff4e0ef; --ui-panel: rgba(255, 244, 224, .82); --ink: #302e56; --muted: #665494; --line: #bc6a8c;
  --accent: #e4827a; --accent-soft: #ffc87a; --pixel-edge: #454474; --pixel-light: #fff8dc;
  --ui-inset: #d4ccdc; --ui-input: rgba(255, 248, 220, .8); --ui-selected: #ffc87a; --ui-mid: #905e98;
  --ui-header: rgba(48, 46, 86, .78); --ui-header-hover: rgba(228, 130, 122, .46); --ui-header-ink: #fff4e0;
  --ui-header-line: rgba(255, 200, 122, .55); --ui-bar: #ffc87a; --ui-clock-shadow: #e4827a;
}
body[data-scene="nyc"] {
  --paper: #e2e8f4ef; --ui-panel: rgba(226, 232, 244, .82); --ink: #221e2c; --muted: #4c3e52; --line: #8890b0;
  --accent: #7ab0ff; --accent-soft: #b6c0d8; --pixel-edge: #3c3c54; --pixel-light: #fff;
  --ui-inset: #b6c0d8; --ui-input: rgba(255, 255, 255, .8); --ui-selected: #ffe4b4; --ui-mid: #5a5e7e;
  --ui-header: rgba(38, 32, 52, .8); --ui-header-hover: rgba(122, 176, 255, .42); --ui-header-ink: #e2e8f4;
  --ui-header-line: rgba(182, 192, 216, .58); --ui-bar: #7ab0ff; --ui-clock-shadow: #b6c0d8;
}
body[data-scene="festival"] {
  --paper: #fff2c0ef; --ui-panel: rgba(255, 242, 192, .82); --ink: #141c3a; --muted: #363562; --line: #5a6094;
  --accent: #ffd27a; --accent-soft: #6ad8ff; --pixel-edge: #2a3050; --pixel-light: #fff2c0;
  --ui-inset: #a9b3df; --ui-input: rgba(255, 248, 225, .83); --ui-selected: #6ad8ff; --ui-mid: #5a6094;
  --ui-header: rgba(20, 28, 58, .8); --ui-header-hover: rgba(106, 216, 255, .35); --ui-header-ink: #fff2c0;
  --ui-header-line: rgba(255, 210, 122, .6); --ui-bar: #ffd27a; --ui-clock-shadow: #ffd27a;
}
.top-actions { color: var(--ui-header-ink); background: var(--ui-header); border-color: var(--ui-header-line); }
.top-actions button:hover,.top-actions button[aria-pressed="true"] { background: var(--ui-header-hover); }
.settings-dialog { color: var(--ink); }

.scene-options button[aria-pressed="true"],.sound-toggle[aria-pressed="true"] { background: var(--ui-selected); }

.bottom-dock { background: var(--paper); }
.movement-controls button { background: var(--ui-input); color: var(--ink); }
.movement-controls button[aria-pressed="true"] { background: var(--ui-selected); }
.music-panel { background: var(--paper); color: var(--ink); }
.youtube-categories button[aria-pressed="true"] { background: var(--scene-point); color: var(--ink); }
.youtube-categories button { color: var(--ink); border-color: var(--ui-mid); }
.youtube-result:hover,.music-heading .music-heading-text:hover { background: var(--accent-soft); }
.youtube-status,.youtube-result small,.music-recommendations h3 span { color: var(--muted); }
.music-panel.is-mini { background: var(--pixel-edge); border-color: var(--ink); box-shadow: inset 2px 2px var(--ui-mid), inset -3px -3px var(--ink), 4px 5px 0 rgba(17,20,20,.5); }
.music-panel.is-mini .music-heading { color: var(--pixel-light); }
.music-panel.is-mini .music-heading-text { background: var(--ui-selected); border-color: var(--ink); color: var(--ink); box-shadow: inset 1px 1px var(--pixel-light), 1px 2px var(--ink); }
.music-panel.is-mini .music-heading-text:hover { background: var(--scene-point); }
.music-panel.is-mini .youtube-player { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--ui-mid); }

/* 설정창은 각 장면에서 가져온 색을 밝고 부드러운 파스텔로 사용한다. */
body[data-scene="namsan"] .settings-dialog {
  --paper: #fff6f4; --ink: #4a3548; --muted: #796576; --line: #e7ced6;
  --pixel-edge: #9b7a92; --pixel-light: #fffdfc; --accent: #a46c84; --accent-soft: #f8e1e3;
  --ui-inset: #f5e2eb; --ui-input: #fffdfb; --ui-selected: #f8dcda; --ui-mid: #c5a0b4;
  --scene-point: #f1b6b6;
}
body[data-scene="nyc"] .settings-dialog {
  --paper: #f5f7fc; --ink: #394252; --muted: #68758c; --line: #d1daeb;
  --pixel-edge: #8596b4; --pixel-light: #fff; --accent: #718eb9; --accent-soft: #e3ebf8;
  --ui-inset: #e1e8f5; --ui-input: #fcfdff; --ui-selected: #dce9fa; --ui-mid: #a5b8d5;
  --scene-point: #bdd2ef;
}
body[data-scene="festival"] .settings-dialog {
  --paper: #fffaf3; --ink: #484158; --muted: #786b83; --line: #e7d9db;
  --pixel-edge: #a492ae; --pixel-light: #fffefa; --accent: #aa8294; --accent-soft: #fae9d3;
  --ui-inset: #eee5f3; --ui-input: #fffdfa; --ui-selected: #f9e9cd; --ui-mid: #c7b3ce;
  --scene-point: #f5d39c;
}
.settings-dialog { background: var(--paper); color: var(--ink); }
.settings-dialog .scene-options button { gap: 12px; padding: 8px; background: var(--ui-input); border-color: var(--line); box-shadow: 2px 2px 0 var(--ui-inset); }
.settings-dialog .scene-options button:hover { background: var(--accent-soft); }
.settings-dialog .scene-options button[aria-pressed="true"] { background: var(--ui-selected); border-color: var(--pixel-edge); border-left: 3px solid var(--scene-point); box-shadow: 2px 2px 0 var(--ui-mid); }
.settings-dialog .selected-mark { color: var(--accent); }
.scene-thumbnail { display: block; flex: 0 0 108px; width: 108px; height: 68px; object-fit: cover; border: 1px solid var(--pixel-edge); image-rendering: pixelated; }
[data-scene="namsan"] > .scene-thumbnail { object-position: center 46%; }
[data-scene="nyc"] > .scene-thumbnail { object-position: center 55%; }
[data-scene="festival"] > .scene-thumbnail { object-position: center 43%; }

.settings-dialog .sound-toggle[aria-pressed="true"] { background: var(--ui-selected); color: var(--ink); }
.settings-dialog input[type="range"] { accent-color: var(--accent); }
@media (max-width: 360px) { .scene-thumbnail { flex-basis: 88px; width: 88px; height: 62px; } }

/* 모바일에서는 메뉴와 작업 영역을 분리하고, 재생 중 TV와 겹치지 않게 한다. */
@media (max-width: 700px) {
  .app-header { top: calc(8px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .brand { width: max-content; min-height: 30px; font-size: 20px; line-height: 1.3; }
  .top-actions { width: 100%; min-width: 0; justify-content: space-around; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions button { flex: 1 0 44px; flex-direction: column; gap: 2px; width: auto; min-width: 44px; height: 52px; min-height: 52px; }
  .top-actions button span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; font-size: 9px; line-height: 1.2; }

  .quiet-clock { top: calc(112px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
  .settings-dialog { width: min(420px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 18px; -webkit-overflow-scrolling: touch; }
  .dialog-heading button { min-width: 44px; min-height: 44px; }
  .sound-slider input { height: 44px; }
  .bottom-dock { max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); }
  .music-panel { top: calc(112px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: min(380px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .music-controls,.youtube-selection-list { -webkit-overflow-scrolling: touch; }
  .music-heading button { min-width: 44px; min-height: 44px; }
  .music-heading .music-heading-text { min-width: 44px; min-height: 44px; }
  .music-search summary,.youtube-categories button { min-height: 44px; }
  .youtube-selection-list li button { width: 44px; }
  .youtube-select-toggle { flex-basis: 44px; }
  .music-panel.is-mini { top: auto; right: calc(12px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(260px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .music-panel.is-mini .music-heading-text { height: 44px; min-height: 44px; }
  body:not([data-view="quiet"]) .music-panel.is-mini { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.music-settings-open .music-panel.is-mini { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
}

@media (min-width: 520px) and (max-width: 900px) and (max-height: 540px) {
  .app-header { top: calc(8px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); display: flex; }
  .top-actions { width: auto; }
  .top-actions button { flex-direction: row; height: 44px; min-height: 44px; }
  .top-actions button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .quiet-clock { top: calc(68px + env(safe-area-inset-top)); }
  .music-panel:not(.is-mini) { top: calc(68px + env(safe-area-inset-top)); max-height: calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .music-panel.is-mini { top: calc(68px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); bottom: auto; width: min(260px, calc(100vw - 24px)); max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  body.music-settings-open .music-panel.is-mini { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
}
@media (min-width: 520px) and (max-width: 900px) and (max-height: 420px) {
  body.music-mini-active .app-header { right: calc(284px + env(safe-area-inset-right)); }
  body.music-mini-active .top-actions { min-width: 0; overflow-x: auto; }
  .music-panel.is-mini { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
}

/* 풍경·집중·음악·더보기의 네 가지 상단 메뉴. */
.app-header { display: flex; gap: 8px; }
.app-header:has(#more-toggle[aria-expanded="true"],#weather-toggle[aria-expanded="true"]) { z-index: var(--z-header-open); }
.room-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* 좁으면 태그라인만 말줄임으로 줄이고 제목과 인원 숫자는 자르지 않는다. */
.room-identity .brand { flex: 0 1 auto; width: auto; min-width: 0; gap: 8px; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; line-height: 1.05; }
.brand-tagline { font-size: 10px; line-height: 1.3; letter-spacing: 0; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .brand-tagline { font-size: 9px; } }
/* 브랜드 제목 줄 오른쪽에 전체·이 방 인원 두 칸을 가로로 둔다. 뜻은 title·aria-label에 있고 화면엔 숫자만 둔다. */
.presence-status { flex: none; align-self: flex-start; margin-top: 2px; display: inline-flex; gap: 3px; color: var(--ui-header-ink); font-size: 10px; white-space: nowrap; }
/* 연결 전·재접속 중에도 자리를 지켜 브랜드가 좌우로 튀지 않게 한다. */
.presence-status[hidden] { display: inline-flex; visibility: hidden; }
.presence-status b { min-width: 20px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; background: #1b1824; color: #f4eef6; border: 1px solid #4a4458; box-shadow: 1px 1px 0 rgba(0,0,0,.45); }
/* 이 방 인원은 민트 바탕에 짙은 글자로 전체 인원과 구분한다. */
.presence-status b + b { background: #b7d4b2; color: #17231a; border-color: #17231a; }
.app-header .top-actions { position: relative; flex: none; width: auto; min-width: 0; gap: 2px; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.top-actions > button { flex: none; flex-direction: row; min-width: 44px; min-height: 44px; height: 44px; padding: 6px 10px; color: var(--ui-header-ink); text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.top-actions > button[aria-expanded="true"] { background: var(--ui-header); }
#focus-menu { position: relative; }
#focus-menu[data-timer-state="running"]::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 3px; height: 3px; background: var(--scene-point); }
.top-actions > button span { position: static; width: auto; height: auto; clip-path: none; overflow: visible; font-size: 11px; }
.top-actions .extra-actions { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: 168px; max-height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; padding: 5px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.top-actions .extra-actions button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; width: 100%; height: auto; min-height: 44px; padding: 8px 10px; font-size: 12px; }
.top-actions .extra-actions button span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 12px; }
.top-actions .extra-actions button:hover,.top-actions .extra-actions button[aria-pressed="true"] { background: var(--ui-selected); }
.top-actions .extra-actions button[aria-pressed="true"]::before { display: none; }
.scene-caption { display: none; }

@media (max-width: 700px) {
  .app-header { top: calc(8px + env(safe-area-inset-top)); }
  .room-identity { gap: 8px; }
  .room-identity .brand { font-size: 20px; }
  .presence-status { font-size: 9px; }
  .top-actions > button { width: 44px; padding: 0; }
  .top-actions > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .quiet-clock { top: calc(68px + env(safe-area-inset-top)); }
  .music-panel:not(.is-mini) { top: calc(68px + env(safe-area-inset-top)); max-height: calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  
}
@media (min-width: 520px) and (max-width: 900px) and (max-height: 540px) {

  .top-actions > button { width: 44px; padding: 0; }
  .top-actions > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 640px) and (max-height: 420px) {
  body.music-mini-active .presence-status { display: none; }
}

/* 작은 TV의 제목 부분만 이동 손잡이로 사용한다. 영상과 재생 버튼은 그대로 동작한다. */
.music-heading #music-drag { display: flex; align-items: center; gap: 6px; width: auto; min-width: 44px; min-height: 44px; padding: 0; font: inherit; color: inherit; opacity: 1; }
.music-panel.is-mini .music-heading { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.music-panel.is-mini #music-drag:not(:disabled) { cursor: grab; }
.music-panel.is-mini #music-drag::before { content: ""; width: 6px; height: 12px; flex: none; background: radial-gradient(currentColor 1px, transparent 1.5px) 0 0 / 3px 4px; opacity: .5; }
.music-panel.is-dragging .music-heading,.music-panel.is-dragging #music-drag { cursor: grabbing; }
.music-panel.is-dragging .youtube-player { pointer-events: none; }
body.music-settings-open .music-panel.is-mini .music-heading { cursor: default; }

@media (min-width: 520px) and (max-width: 900px) and (max-height: 540px) {
  body:not([data-view="quiet"]) .music-panel.is-mini { bottom: auto; }
  
}

/* 이동 버튼은 배경 없이 도트 아이콘만 하단 중앙에 남긴다. */
.bottom-dock { left: 50%; right: auto; transform: translateX(-50%); padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.bottom-dock .movement-controls { gap: clamp(12px, 3.5vw, 24px); flex-wrap: nowrap; padding: 0; border: 0; }
.bottom-dock .movement-controls button,
.bottom-dock .movement-controls button:hover,
.bottom-dock .movement-controls button[aria-pressed="true"] { flex: 0 0 48px; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 10px; border: 0; background: none; box-shadow: none; color: #fff; }
.bottom-dock .movement-controls button { opacity: .8; }
.bottom-dock .movement-controls button:hover { opacity: 1; }
.bottom-dock .movement-controls button[aria-pressed="true"] { opacity: 1; transform: translateY(1px); }
.bottom-dock .movement-controls button::before { display: none; }
.bottom-dock .movement-controls svg { width: 26px; height: 26px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(16,20,32,.65)); }

/* 음악 목록: 짧은 제목, 작은 썸네일, 오른쪽 담기 버튼. */
.music-panel:not(.is-mini) { padding: 12px 14px; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.music-panel:not(.is-mini) .music-heading { padding-bottom: 4px; }
.music-panel:not(.is-mini) .music-heading h2 { font-size: 18px; }
.music-controls { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.music-search summary { min-height: 44px; color: var(--muted); font-size: 11px; }
.music-search summary::after { font-size: 14px; }
.music-recommendations { border-top: 0; padding-top: 0; }
.youtube-categories { gap: 6px; margin: 4px 0 8px; padding: 0; scrollbar-width: none; }
.youtube-categories::-webkit-scrollbar { display: none; }
.youtube-categories button { min-height: 44px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: 11px; }
.youtube-categories button[aria-pressed="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2px var(--ink); }
.youtube-results li + li { border-top: 0; }
.youtube-result-row { gap: 4px; min-height: 58px; border-radius: 4px; }
.youtube-result-row:hover { background: var(--ui-input); }
.youtube-result { gap: 10px; padding: 7px 0; }
.youtube-result:hover { background: transparent; }
.youtube-result img { flex: 0 0 64px; width: 64px; height: 40px; border-radius: 3px; object-fit: cover; }
.youtube-result span { flex: 1; overflow: hidden; }
.youtube-result strong,.youtube-result small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.youtube-result strong { font-size: 11px; line-height: 1.7; }
.youtube-result small { margin-top: 2px; font-size: 9px; opacity: .7; }
.youtube-select-toggle { position: relative; flex: 0 0 44px; width: 44px; min-height: 44px; color: var(--muted); }
.youtube-select-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.youtube-select-toggle svg { width: 14px; height: 14px; pointer-events: none; }
.youtube-select-toggle .select-check { display: none; }
.youtube-select-toggle input:checked + svg { color: var(--ink); }
.youtube-select-toggle input:checked + svg .select-add { display: none; }
.youtube-select-toggle input:checked + svg .select-check { display: block; }
.youtube-select-toggle:focus-within { outline: 1px solid var(--ink); outline-offset: -7px; }
.youtube-selection { margin: 4px 0 12px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); background: none; }
.youtube-selection h3 { font-size: 10px; color: var(--muted); }
.youtube-selection h3 span { margin-left: 5px; color: var(--ink); }
.selection-actions { display: flex; align-items: center; gap: 8px; }
.youtube-selection-heading button { min-height: 44px; padding: 4px 6px; color: var(--muted); text-decoration: none; font-size: 10px; }
#youtube-play-selection { display: flex; align-items: center; gap: 5px; width: auto; min-height: 36px; margin: 0; padding: 6px 10px; border: 0; border-radius: 3px; background: var(--ink); color: var(--paper); font-size: 10px; box-shadow: none; }
#youtube-play-selection svg { width: 12px; height: 12px; }
.youtube-selection-list { gap: 8px; margin: 4px 0 0; padding: 0 0 4px; scrollbar-width: thin; }
.youtube-selection-list li { position: relative; width: 72px; height: 48px; border-radius: 3px; overflow: hidden; background: none; }
.youtube-selection-list img { width: 72px; height: 48px; object-fit: cover; }
.youtube-selection-list li button { position: absolute; top: 0; right: 0; width: 44px; height: 44px; min-height: 44px; padding: 0 5px 16px 14px; background: linear-gradient(225deg,rgba(0,0,0,.65),transparent 65%); color: #fff; text-shadow: 0 1px 3px #000; font-size: 16px; }
.youtube-selection-list li button:hover { background: linear-gradient(225deg,rgba(0,0,0,.8),transparent 75%); }
.music-panel.is-mini { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.music-panel.is-mini .youtube-player,.music-panel.is-mini button { cursor: auto; }
.music-panel.is-dragging { cursor: grabbing; }
@media (max-width: 700px) {
  #youtube-play-selection { min-height: 44px; }
  .music-panel:not(.is-mini) { width: min(360px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
}

/* 설정은 독립 팝오버로 열고, 다른 뷰의 배치를 변경하지 않는다. */
.settings-dialog[data-popover] { position: fixed; z-index: var(--z-popover); width: min(360px, calc(100vw - 24px)); margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.18); overscroll-behavior: contain; }
.settings-dialog[data-popover] .dialog-heading { align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; border: 0; }
.settings-dialog[data-popover] .dialog-heading h2 { font-size: 18px; }
.settings-dialog[data-popover] .dialog-heading button { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
#scenes-dialog .scene-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
#scenes-dialog .scene-options button { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 4px; border: 1px solid transparent; border-radius: 3px; box-shadow: none; background: transparent; }
#scenes-dialog .scene-options button[aria-pressed="true"] { border: 1px solid var(--pixel-edge); background: var(--ui-selected); box-shadow: none; }
#scenes-dialog .scene-thumbnail { flex: none; width: 100%; height: 52px; border: 0; border-radius: 2px; }
#scenes-dialog .scene-options button > span { width: 100%; min-width: 0; }
#scenes-dialog .scene-options strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
#scenes-dialog .selected-mark { display: none; }
.settings-dialog[data-popover] .sound-toggle { min-height: 44px; margin: 0 0 8px; padding: 8px; border-color: var(--line); border-radius: 3px; box-shadow: none; font-size: 11px; }
.settings-dialog[data-popover] .sound-slider { margin: 6px 0; }
.settings-dialog[data-popover] .sound-slider span { font-size: 11px; }
.settings-dialog[data-popover] .sound-slider input { height: 36px; margin: 0; }
.settings-dialog[data-popover] .help-copy { font-size: 11px; }

/* 데스크톱 초소형 TV. 모바일은 하단의 작은 가로형 플레이어를 사용한다. */
.music-panel.is-mini .music-heading-actions { gap: 0; }
.music-panel.is-mini .music-heading-actions button { width: 36px; min-width: 36px; height: 44px; min-height: 44px; color: inherit; background: none; border: 0; box-shadow: none; }
.music-panel.is-mini .music-heading-actions button:hover,.music-panel.is-mini #music-size[aria-pressed="true"] { background: rgba(255,255,255,.12); }
.music-panel.is-mini.is-tiny { width: 212px; min-width: 212px; padding: 4px; max-height: none; }
.music-panel.is-mini.is-tiny::before,.music-panel.is-mini.is-tiny::after { display: none; }
.music-panel.is-mini.is-tiny .music-heading { gap: 0; padding: 0; }
.music-panel.is-mini.is-tiny .music-heading h2 { margin-right: auto; font-size: 14px; }
.music-panel.is-mini.is-tiny #music-drag { min-width: 44px; gap: 3px; }
.music-panel.is-mini.is-tiny .music-heading-actions button { width: 44px; min-width: 44px; }
.music-panel.is-mini.is-tiny .youtube-player { height: 200px; min-height: 200px; max-height: 200px; margin: 4px 0 0; box-shadow: none; }
.music-panel.is-mini.is-tiny .youtube-queue-progress { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 700px) {
  .music-panel.is-mini .music-heading-actions button { width: 44px; min-width: 44px; }
  .music-panel:not(.is-mini) { left: auto; right: calc(12px + env(safe-area-inset-right)); }

  .settings-dialog[data-popover] .sound-slider input { height: 44px; }
}

.music-panel.is-mini #music-drag { background: transparent; -webkit-tap-highlight-color: transparent; }
.music-panel.is-mini #music-drag:focus:not(:focus-visible),.music-panel.is-dragging #music-drag { outline: none; box-shadow: none; background: transparent; }

/* 선택 화면과 재생 TV는 서로 독립된 뷰다. */
.music-library { position: fixed; z-index: var(--z-library); display: flex; flex-direction: column; width: min(420px, calc(100vw - 24px)); height: min(600px, calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-height: calc(100dvh - 100px); padding: 12px 16px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: inset 1px 1px var(--pixel-light), 3px 3px 0 rgba(24,28,40,.28); color-scheme: light; font-family: var(--font); }
.music-library button,.music-library input,.music-library summary { font-family: inherit; }
.music-library-heading { display: flex; flex: none; align-items: center; gap: 12px; margin-bottom: 6px; }
.music-library-tabs { display: flex; align-items: center; gap: 18px; flex: 1; }
.music-library-tabs button { position: relative; min-height: 44px; padding: 4px 0; font-size: 12px; color: var(--muted); }
.music-library-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 400; }
.music-library-tabs button[aria-selected="true"]::after { content: ""; position: absolute; bottom: 3px; left: 0; width: 4px; height: 4px; background: currentColor; box-shadow: 6px 0 currentColor; }
#music-queue-count { margin-left: 3px; font-size: 10px; opacity: .65; }
.music-library #music-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; }
.music-library #music-close svg { width: 16px; height: 16px; }
.music-library .music-controls { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.music-library .music-search summary { min-height: 40px; padding: 2px 0; font-size: 12px; }
.music-library .youtube-categories { gap: 4px; margin: 0 0 8px; }
.music-library .youtube-categories button { padding: 5px 10px; font-size: 12px; }
.music-library .youtube-result { min-height: 60px; }
.music-library .youtube-result strong { font-size: 11px; font-weight: 400; }
.music-library .youtube-result small { font-size: 9px; }
.music-library .youtube-selection { border: 0; margin: 0; padding: 0; }
.music-library .youtube-selection-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; overflow: visible; margin-top: 8px; }
.music-library .youtube-selection-list li { width: 100%; height: auto; aspect-ratio: 16/10; }
.music-library .youtube-selection-list img { width: 100%; height: 100%; }
.music-library .youtube-selection-heading h3 { font-size: 12px; }
.music-library .youtube-selection-heading button { font-size: 11px; }
.music-library .queue-empty { padding: 32px 8px; margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
.music-panel.is-mini { z-index: var(--z-player); }
@media (min-width: 701px) {
  #scenes-dialog[data-popover] { padding: 16px; }
  #scenes-dialog .dialog-heading { margin-bottom: 12px; }
  #scenes-dialog .dialog-heading h2 { font-size: 22px; }
  #scenes-dialog .scene-options { gap: 12px; }
  #scenes-dialog .scene-options button { gap: 10px; padding: 8px; }
  #scenes-dialog .scene-thumbnail { height: 112px; }
  #scenes-dialog .scene-options strong { font-size: 13px; }
}
@media (max-width: 700px) {
  .music-library { padding: 8px 12px 12px; border-radius: 0; }
  .music-library-heading { margin-bottom: 4px; }
  .music-library .youtube-select-toggle { min-height: 48px; }
  .music-library .youtube-selection-list { gap: 8px; }
}
@media (min-width: 520px) and (max-width: 900px) and (min-height: 340px) and (max-height: 540px) {
  body.music-mini-active .app-header { right: calc(12px + env(safe-area-inset-right)); }
  .music-panel.is-mini { top: calc(68px + env(safe-area-inset-top)); }
}
@media (min-width: 520px) and (max-width: 900px) and (max-height: 339px) {
  body.music-tiny-active .app-header { right: calc(236px + env(safe-area-inset-right)); }
}

/* 음악도 방과 같은 픽셀 서체·사각 프레임·단단한 명암으로 통일한다. */
.music-library { border-color: var(--pixel-edge); }
.music-library button,.music-library input,.music-library summary { font-family: var(--font); font-weight: 400; }
.music-library-heading { border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.music-library .youtube-result-row,.music-library .youtube-result img,.music-library .youtube-selection-list li,.music-library #youtube-play-selection { border-radius: 0; }
.music-library .youtube-result img,.music-library .youtube-selection-list li { border: 1px solid var(--ui-mid); }
.music-library .youtube-result-row:hover { background: var(--ui-input); }
.music-library .youtube-categories button { font-size: 11px; }
.music-library .youtube-categories button[aria-pressed="true"] { background: var(--ui-inset); box-shadow: inset 0 -2px var(--ui-mid); }
.music-library #youtube-play-selection { border: 1px solid var(--pixel-edge); box-shadow: inset 1px 1px rgba(255,255,255,.22), 2px 2px 0 var(--ui-mid); }
.music-library #youtube-play-selection:active { transform: translate(1px,1px); box-shadow: inset 1px 1px rgba(0,0,0,.16); }
.music-library .youtube-selection-list li button,.music-library .youtube-selection-list li button:hover { display: grid; place-items: start end; padding: 6px; background: none; text-shadow: none; }
.music-library .youtube-selection-list li button::before { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 1px solid var(--pixel-edge); background: var(--paper); box-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.music-library .youtube-selection-list li button:hover::before { background: var(--ui-selected); }
.music-library .youtube-selection-list li button svg { position: relative; z-index: 1; width: 12px; height: 12px; color: var(--ink); }
.music-panel.is-mini #music-stop svg { width: 16px; height: 16px; }

/* 플랫폼은 한 줄, 장르는 가로 스크롤. 전체 카탈로그도 목록 안에서만 늘어난다. */
.music-platform-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.music-platforms { display: flex; gap: 3px; min-width: 0; }
.music-platforms button { min-height: 44px; padding: 4px 10px; color: var(--muted); font-size: 11px; }
.music-platforms button[aria-pressed="true"] { color: var(--ink); background: var(--ui-inset); box-shadow: inset 0 -2px var(--ui-mid); }
.music-result-count { flex: none; font-size: 10px; color: var(--muted); }
.music-result-count[aria-busy="true"] { opacity: .6; }
.music-library .youtube-categories { flex-wrap: nowrap; overflow-x: auto; }
.music-library .youtube-categories button { flex: none; }
.music-category-nav { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; margin-bottom: 8px; }
.music-category-nav.is-scrollable { grid-template-columns: 44px minmax(0,1fr) 44px; }
.music-category-viewport { position: relative; min-width: 0; }
.music-library .music-category-nav .youtube-categories { gap: 2px; margin: 0; padding: 2px 4px; scroll-padding-inline: 6px; -webkit-overflow-scrolling: touch; }
.music-library .music-category-nav .youtube-categories button { min-width: 44px; min-height: 44px; padding-inline: 10px; }
.music-category-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); }
.music-category-arrow svg { width: 16px; height: 16px; }
.music-category-arrow:disabled { opacity: .2; cursor: default; }
.music-category-arrow:not(:disabled):hover { background: var(--ui-input); }
.music-category-arrow:focus-visible { outline: 1px solid var(--ink); outline-offset: -6px; }
.music-category-viewport::before,.music-category-viewport::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 12px; pointer-events: none; opacity: 0; }
.music-category-viewport::before { left: 0; background: linear-gradient(to right,var(--paper),transparent); }
.music-category-viewport::after { right: 0; background: linear-gradient(to left,var(--paper),transparent); }
.can-scroll-left .music-category-viewport::before,.can-scroll-right .music-category-viewport::after { opacity: 1; }
.music-library .music-artwork { position: relative; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 40px; overflow: hidden; border: 1px solid var(--ui-mid); background: var(--ui-inset); color: var(--muted); }
.music-library .music-artwork > svg { width: 18px; height: 18px; }
.music-library .music-artwork img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.music-load-more { display: block; width: 100%; min-height: 44px; margin: 8px 0; border: 1px solid var(--line); font-size: 11px; }
.music-load-more:hover { background: var(--ui-input); }
.music-queue-note { margin: 3px 0 8px; font-size: 10px; line-height: 1.6; color: var(--muted); }
.music-queue-note:empty { display: none; }
.music-library .youtube-selection-list .queue-track,.music-library .youtube-selection-list .queue-track:hover { position: relative; inset: auto; display: block; width: 100%; height: 100%; min-height: 44px; padding: 0; background: var(--ui-inset); }
.music-library .youtube-selection-list .queue-track::before { content: none; }
.music-library .youtube-selection-list .queue-track .music-artwork { width: 100%; height: 100%; border: 0; }
.music-library .youtube-selection-list .queue-track .music-artwork > svg { position: static; width: 18px; height: 18px; color: var(--muted); }
.music-library .youtube-selection-list .queue-remove { z-index: 2; }
.queue-unlinked { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 2px; background: var(--paper); color: var(--muted); text-align: center; font-size: 9px; }

/* 집중과 음악은 헤더 버튼으로 각각 열고, 모바일에서 좌우에 나란히 놓는다. */
.music-view-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8,12,20,.64); }
@media (max-width: 700px), (max-width: 900px) and (max-height: 540px) {
  :root { --focus-music-top: calc(68px + env(safe-area-inset-top)); --focus-music-width: calc((100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); --focus-music-height: 88px; }

  #music-panel.is-mini,#music-empty { position: fixed; top: var(--focus-music-top); right: calc(12px + env(safe-area-inset-right)); bottom: auto; left: auto; transform: none; display: flex; flex-direction: column; width: var(--focus-music-width); height: var(--focus-music-height); min-width: 0; max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--pixel-edge); background: var(--paper); touch-action: auto; cursor: auto; box-shadow: 2px 3px 0 rgba(17,20,20,.3); }
  #music-empty { z-index: var(--z-stage); cursor: pointer; color: var(--ink); text-align: left; }
  .music-empty-art { display: grid; flex: 1; min-height: 0; place-items: center; background: var(--ui-inset); }
  .music-empty-art svg { width: 28px; height: 28px; opacity: .55; }
  #music-empty:hover .music-empty-art { background: var(--ui-selected); }
  .music-mini-caption { display: flex; flex: 0 0 36px; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 4px 8px; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink); }
  .music-mini-caption > span { min-width: 0; }
  .music-mini-caption strong,.music-mini-caption small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; line-height: 1.4; }
  .music-mini-caption strong { font-size: 10px; }
  .music-mini-caption small { font-size: 9px; color: var(--muted); }
  .music-mini-caption > svg { width: 14px; height: 14px; }
  #music-panel.is-mini::before,#music-panel.is-mini::after,#music-panel.is-mini .music-heading { display: none; }
  #music-panel.is-mini .youtube-player { height: calc(var(--focus-music-height) - 38px); min-height: 0; max-height: none; margin: 0; box-shadow: none; }
  #music-panel.is-mini:not(.is-expanded) .youtube-player { pointer-events: none; }
  #music-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; touch-action: manipulation; }
  #music-zoom:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
  #music-panel.is-mini.is-expanded { z-index: var(--z-popover); top: calc((100dvh + env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2); right: auto; bottom: auto; left: calc((100vw + env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); transform: translate(-50%,-50%); display: flex; flex-direction: column; width: min(560px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); height: auto; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 6px; border: 2px solid var(--ink); background: var(--pixel-edge); box-shadow: 4px 5px 0 rgba(17,20,20,.5); }
  #music-panel.is-mini.is-expanded .youtube-player { height: auto; aspect-ratio: 16 / 9; min-height: min(200px, 32dvh); max-height: min(306px, 32dvh); }
  .music-expanded-footer { display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; margin-top: 8px; padding: 0 6px 6px; color: var(--pixel-light); overflow: hidden; }
  .music-now-playing { flex: none; min-width: 0; padding: 4px 0 6px; }
  .music-now-playing strong,.music-now-playing span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
  .music-now-playing strong { font-size: 11px; line-height: 1.7; }
  .music-now-playing span { font-size: 9px; line-height: 1.7; opacity: .65; }
  .music-transport-row { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
  .music-transport { display: flex; align-items: center; gap: 4px; }
  .music-transport button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: inherit; }
  .music-transport svg { width: 20px; height: 20px; }
  .music-transport #music-play-pause { width: 48px; height: 48px; border: 1px solid var(--ui-mid); background: rgba(255,255,255,.1); }
  .music-transport button:not(:disabled):hover,#music-collapse:hover { background: rgba(255,255,255,.16); }
  #music-collapse { display: flex; align-items: center; justify-content: center; flex: none; gap: 6px; min-height: 44px; padding: 0 8px; color: inherit; font-size: 10px; }
  #music-collapse svg { width: 16px; height: 16px; }
  .music-playback-status { flex: none; margin: 4px 0; max-height: 40px; overflow-y: auto; font-size: 10px; line-height: 1.7; color: var(--pixel-light); }
  .music-playing-list-heading { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; }
  .music-playing-list-heading h3 { margin: 0; font-size: 11px; font-weight: 400; }
  #music-playing-count { margin-left: 5px; font-size: 9px; opacity: .65; }
  #music-add-tracks { min-height: 44px; padding: 0 8px; font-size: 11px; color: inherit; }
  .music-playing-list { flex: 0 1 auto; min-height: 0; max-height: min(224px, 28dvh); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; border-top: 1px solid rgba(255,255,255,.18); scrollbar-width: thin; }
  .music-playing-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.1); color: inherit; text-align: left; }
  .music-playing-list button[aria-current="true"] { background: rgba(255,255,255,.12); box-shadow: inset 2px 0 var(--scene-point); }
  .music-playing-list button:not(:disabled):hover { background: rgba(255,255,255,.18); }
  .music-playing-list button:focus-visible { outline-offset: -2px; }
  .music-track-number { flex: 0 0 18px; text-align: center; font-size: 9px; opacity: .65; }
  .music-track-copy { min-width: 0; }
  .music-track-copy strong,.music-track-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; line-height: 1.7; }
  .music-track-copy strong { font-size: 10px; }
  .music-track-copy small { font-size: 9px; opacity: .65; }
  .bottom-dock { bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.music-mini-active .app-header { right: calc(12px + env(safe-area-inset-right)); }
}
@media (min-width: 520px) and (max-width: 900px) and (max-height: 540px) {
  :root { --focus-music-height: 88px; }

}
@media (max-width: 900px) and (max-height: 420px) {
  .music-now-playing { display: none; }
}

.sound-credit { margin: 16px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.sound-credit a { color: inherit; text-underline-offset: 2px; }

/* 풍경 선택은 왼쪽, 이동 조작은 가운데에 둔다. */
.app-footer { --footer-bottom: calc(28px + env(safe-area-inset-bottom)); }
.app-footer .bottom-dock { bottom: var(--footer-bottom); }
#scene-select,#capture-screen { position: fixed; z-index: var(--z-chrome); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 4px; color: #fff; opacity: .8; touch-action: manipulation; }
#scene-select { left: calc(32px + env(safe-area-inset-left)); bottom: var(--footer-bottom); opacity: 1; background: linear-gradient(135deg,rgba(241,205,224,.22),rgba(190,220,225,.18) 48%,rgba(196,190,229,.24)), conic-gradient(rgba(255,255,255,.12) 25%,transparent 0 50%,rgba(255,255,255,.12) 0 75%,transparent 0) 0 0 / 12px 12px, rgba(31,31,47,.58); border: 1px solid rgba(255,255,255,.35); box-shadow: 1px 2px 0 rgba(16,20,32,.3); }
#capture-screen { left: calc(32px + env(safe-area-inset-left)); bottom: calc(var(--footer-bottom) + 58px); }
#scene-select:hover,#scene-select:focus-visible,#capture-screen:hover,#capture-screen:focus-visible { opacity: 1; }
#scene-select svg,#capture-screen svg { width: 26px; height: 26px; filter: drop-shadow(2px 2px 0 rgba(16,20,32,.65)); }
#scene-select svg { fill: #fff; filter: drop-shadow(1px 1px 0 rgba(16,20,32,.65)); }
#scene-select span { font-size: 9px; line-height: 1.2; color: #fff; text-shadow: 1px 1px 0 rgba(16,20,32,.8); }
.bottom-dock .movement-controls button:disabled { opacity: .35; pointer-events: none; }
@media (max-width: 700px), (max-width: 900px) and (max-height: 540px) {
  .app-footer { --footer-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #scene-select { left: calc(12px + env(safe-area-inset-left)); }
  #capture-screen { left: calc(12px + env(safe-area-inset-left)); }
}
@media (max-width: 400px) {
  .bottom-dock .movement-controls { gap: 2px; }
  .bottom-dock .movement-controls button,
  .bottom-dock .movement-controls button:hover,
  .bottom-dock .movement-controls button[aria-pressed="true"] { flex-basis: 44px; width: 44px; min-width: 44px; }
}

/* 방 인원은 실제 서버 연결이 확인됐을 때만 표시한다. */
#scenes-dialog .scene-options .scene-room-count { display: block; margin-top: 5px; font-size: 10px; line-height: 1.5; color: var(--accent); }
#scenes-dialog .scene-options .scene-room-count[hidden] { display: none; }

/* Background playback controls stay in developer mode. */
html:not([data-developer="true"]) #scene-play-pause { display: none !important; }

/* Keep left/right controls together and separate the festival jump button. */
.bottom-dock .movement-controls { display: grid; grid-template-columns: repeat(3, 44px) 12px 44px; grid-template-rows: repeat(2, 44px); gap: 3px; align-items: center; }
.bottom-dock .movement-controls button,
.bottom-dock .movement-controls button:hover,
.bottom-dock .movement-controls button[aria-pressed="true"] { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 8px; border: 1px solid rgba(255,255,255,.75); background: rgba(12,17,29,.25); box-shadow: none; }
.bottom-dock .movement-controls button[aria-pressed="true"] { background: rgba(255,255,255,.24); }
.bottom-dock .movement-controls #move-auto[aria-pressed="true"] { background: #f0ce85; border-color: #fff2c8; color: #272235; box-shadow: inset 0 -3px 0 rgba(130,89,43,.4); opacity: 1; }
.bottom-dock .movement-controls #move-auto[aria-pressed="true"] svg { filter: none; }
.jump-cat { display: none; width: 22px; height: 20px; flex: none; background: url("../assets/tv/tv-people.png?v=tall-people-1") -198px -220px / 330px 760px; image-rendering: pixelated; }
.bottom-dock .movement-controls #move-jump { justify-content: center; }
.bottom-dock .movement-controls #move-jump .jump-cat { display: block; }
.bottom-dock .movement-controls [data-move="left"] { grid-column: 1; grid-row: 2; }
.bottom-dock .movement-controls [data-move="right"] { grid-column: 3; grid-row: 2; }
.bottom-dock .movement-controls #move-down { grid-column: 2; grid-row: 2; }
.bottom-dock .movement-controls #move-up { grid-column: 2; grid-row: 1; }
.bottom-dock .movement-controls #move-jump { grid-column: 5; grid-row: 2; }
.bottom-dock .movement-controls #move-auto { grid-column: 5; grid-row: 1; }

/* Keep long presses and repeated taps on the movement pad in the game. */
.bottom-dock, .bottom-dock .movement-controls, .bottom-dock .movement-controls * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-dock .movement-controls { touch-action: none; }
.bottom-dock .movement-controls svg, .bottom-dock .movement-controls .jump-cat { pointer-events: none; }

/* Avoid iOS selection and lookup menus while operating the mobile interface. */
@media (hover: none) and (pointer: coarse) {
  body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, [contenteditable="true"], [contenteditable="true"] * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
}

/* Short landscape phone screens: keep controls in one reachable bottom row. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  .app-header {
    top: calc(4px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
  }
  .app-footer { --footer-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .app-footer .bottom-dock {
    left: calc((100vw + env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);
    right: auto;
    max-width: calc(100vw - 136px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .bottom-dock .movement-controls {
    grid-template-columns: repeat(6, 44px);
    grid-template-rows: 44px;
    gap: clamp(2px, 0.7vw, 6px);
  }
  .bottom-dock .movement-controls [data-move="left"] { grid-column: 1; grid-row: 1; }
  .bottom-dock .movement-controls #move-down { grid-column: 2; grid-row: 1; }
  .bottom-dock .movement-controls #move-up { grid-column: 3; grid-row: 1; }
  .bottom-dock .movement-controls [data-move="right"] { grid-column: 4; grid-row: 1; }
  .bottom-dock .movement-controls #move-auto { grid-column: 5; grid-row: 1; }
  .bottom-dock .movement-controls #move-jump { grid-column: 6; grid-row: 1; }
  #scene-select { left: calc(10px + env(safe-area-inset-left)); }
  #capture-screen { left: calc(10px + env(safe-area-inset-left)); bottom: calc(var(--footer-bottom) + 54px); }
}

/* The scene and keyboard handle movement; keep only jump and auto-walk controls. */
.bottom-dock .movement-controls { display: flex; justify-content: center; gap: 8px; }
.bottom-dock .movement-controls [data-move="left"],
.bottom-dock .movement-controls [data-move="right"],
.bottom-dock .movement-controls [data-move="up"],
.bottom-dock .movement-controls [data-move="down"] { display: none !important; }

/* Keep the header close to the top edge while respecting device safe areas. */
.app-header { top: calc(12px + env(safe-area-inset-top)); }
@media (max-width: 700px), (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  .app-header { top: calc(4px + env(safe-area-inset-top)); }
}

/* 헤더 날씨 칩: 도트 아이콘 옆 현재 기온은 좁은 화면에서도 숨기지 않는다. */
.top-actions > #weather-toggle { width: auto; gap: 4px; padding: 0 8px; }
.top-actions > #weather-toggle .weather-temp { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 11px; font-variant-numeric: tabular-nums; }
/* 오늘 예보 팝오버: 더보기 메뉴와 같은 픽셀 면. 세로 위치는 weather.js가 헤더 아래로 맞춘다. */
.weather-panel { position: fixed; right: calc(12px + env(safe-area-inset-right)); width: min(264px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); overflow-y: auto; display: grid; gap: 8px; padding: 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--pixel-edge); box-shadow: inset 1px 1px var(--pixel-light), 2px 2px 0 rgba(24,28,40,.25); font-size: 11px; line-height: 1.4; text-shadow: none; pointer-events: auto; }
.weather-now { display: flex; align-items: center; gap: 8px; }
/* PC에서는 위쪽 줄을 잡아 옮긴다(음악 플레이어처럼). 모바일은 weather.js가 타이머·음악 칸 아래에 쌓으므로 손잡이를 숨긴다. */
.weather-now { cursor: grab; touch-action: none; }
.weather-panel.is-dragging,.weather-panel.is-dragging .weather-now { cursor: grabbing; user-select: none; }
.weather-panel #weather-drag { flex: none; width: 32px; min-width: 32px; height: 32px; min-height: 32px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--muted); text-shadow: none; cursor: inherit; }
.weather-panel #weather-drag::before { content: ""; width: 6px; height: 12px; background: radial-gradient(currentColor 1px, transparent 1.5px) 0 0 / 3px 4px; }
.weather-panel #weather-drag:hover { background: var(--ui-selected, rgba(0,0,0,.06)); }
@media (max-width: 700px), (max-width: 900px) and (max-height: 540px) {
  .weather-now { cursor: auto; touch-action: auto; }
  .weather-panel #weather-drag { display: none; }
}
.weather-now svg { width: 28px; height: 28px; }
.weather-now b { font-size: 22px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.weather-range,.weather-status { margin: 0; color: var(--muted); }
.weather-label { margin: 4px 0 -4px; color: var(--muted); font-size: 9px; }
/* 오늘 시간대별 기온: 옅은 면과 2px 선, 4px 사각 점(지금은 속이 빈 6px). 값은 점 위, 시각은 아래 흐린 글자. */
.weather-chart { display: block; width: 100%; height: auto; overflow: visible; }
.weather-chart .weather-area { fill: currentColor; opacity: .1; }
.weather-chart .weather-base { stroke: var(--line); stroke-width: 1; }
.weather-chart .weather-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; shape-rendering: geometricPrecision; }
.weather-chart .weather-point { fill: currentColor; }
.weather-chart .weather-point.is-now { fill: var(--paper); stroke: currentColor; stroke-width: 2; }
.weather-chart text { fill: currentColor; font-size: 10px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.weather-chart .weather-time { fill: var(--muted); font-size: 9px; }
/* 주간: 7일 가로 칸(요일·아이콘·최고·최저·강수확률, 0%는 가운데 작은 원 점). */
.weather-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.weather-days li { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 4px 0; font-variant-numeric: tabular-nums; }
.weather-days li:first-child { background: var(--ui-selected, rgba(0,0,0,.06)); }
.weather-days li > span:first-child { font-size: 10px; white-space: nowrap; }
.weather-days svg { width: 16px; height: 16px; }
.weather-days b { font-size: 10px; font-weight: 400; }
.weather-days b + span { color: var(--muted); font-size: 10px; }
.weather-days b + span + span { display: grid; place-items: center; min-height: 12px; color: var(--muted); font-size: 9px; }
.weather-days .is-dry::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
/* 위치·시간대 줄 오른쪽에 내 위치 아이콘 버튼(보이는 면 28px, 누르는 영역 36px). */
.weather-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.weather-place { display: grid; gap: 1px; min-width: 0; margin: 0; color: var(--muted); font-size: 10px; }
.weather-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-place span:first-child { color: var(--ink); }
.weather-panel #weather-locate { flex: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); text-shadow: none; }
.weather-panel #weather-locate::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--ink); }
.weather-panel #weather-locate:hover::before { background: var(--ui-selected, rgba(0,0,0,.06)); }
.weather-panel #weather-locate svg { position: relative; width: 16px; height: 16px; }