/* 대형 DID(#/wall, js/screens/wall.js): 1920×1080·3840×2160 가로. 글자·여백은 화면 높이(vh) 기준이라 4K 에서도 같은 모양으로 커진다. 색은 tokens.css 변수만. */
body.wall-mode { background: var(--bg); overflow: hidden; cursor: none; }
body.wall-mode #app { min-height: 0; }
.wall-view { height: calc(100dvh - var(--strip-h, 0px)); outline: none; }
.wl { position: relative; height: 100%; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--brand) 9%, var(--bg)), var(--bg) 60%); color: var(--text); }
.wl-stage { position: absolute; inset: 1.6vh 1.4vw; display: grid; grid-template-rows: auto 1fr; gap: 2.2vh; transform: translate(var(--bx, 0px), var(--by, 0px)); transition: transform var(--d-breath) var(--ease-in-out); }
/* 머리 */
.wl-head { display: flex; align-items: center; gap: 2vw; }
.wl-id { display: grid; gap: .4vh; min-width: 0; }
.wl-ward { font-size: 4.2vh; line-height: 1; letter-spacing: -.02em; }
.wl-sub { color: var(--text-2); font-size: 1.8vh; }
.wl-stats { display: flex; gap: 1.2vw; margin-left: auto; }
.wl-stat { display: inline-flex; align-items: baseline; gap: .6vw; padding: 1vh 1.4vw; border-radius: 1.6vh; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 2vh; font-weight: 650; }
.wl-stat b { font-size: 4vh; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.wl-stat[data-st="critical"] { background: var(--st-critical-bg); border-color: color-mix(in srgb, var(--st-critical-line) 60%, transparent); color: var(--st-critical-fg); }
.wl-stat[data-st="critical"] b { color: var(--st-critical-fg); }
.wl-stat[data-st="caution"] { background: var(--st-delay-bg); border-color: color-mix(in srgb, var(--st-delay-line) 50%, transparent); color: var(--st-delay-fg); }
.wl-stat[data-st="caution"] b { color: var(--st-delay-fg); }
.wl-stat[data-st="active"] b { color: var(--brand); }
.wl-stat[data-st="zero"] b { color: var(--text-3); }
.wl-right { display: grid; justify-items: end; gap: .4vh; }
.wl-clock { font-size: 5.2vh; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wl-conn { display: inline-flex; align-items: center; gap: .5vw; color: var(--text-2); font-size: 1.7vh; }
.wl-conn i { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: var(--st-done-line); }
.wl-conn[data-st="live"] i { animation: mo-breath var(--d-breath) var(--ease-in-out) var(--loop); }
.wl-conn[data-st="poll"] i { background: var(--st-delay-line); }
.wl-conn[data-st="down"] { color: var(--st-critical-fg); font-weight: 700; }
.wl-conn[data-st="down"] i { background: var(--st-critical-line); }
/* 몸통: 왼쪽 봐야 할 침대 · 오른쪽 전체 격자 */
.wl-body { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 1.6vw; min-height: 0; }
.wl-focus { display: grid; gap: 1.4vh; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.wl-f { --tone: var(--brand); position: relative; display: flex; align-items: center; gap: 2vw; padding: 2vh 2vw; border-radius: 2.4vh; background: var(--surface); border: 1px solid var(--border); overflow: hidden; animation: mo-rise var(--d-slow) var(--ease) both; }
.wl-f::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .8vh; background: var(--tone); }
.wl-f[data-tone="caution"] { --tone: var(--st-delay-line); background: color-mix(in srgb, var(--st-delay-bg) 70%, var(--surface)); }
.wl-f[data-tone="critical"] { --tone: var(--st-critical-line); background: color-mix(in srgb, var(--st-critical-bg) 80%, var(--surface)); border-color: color-mix(in srgb, var(--st-critical-line) 60%, transparent); }
.wl-f[data-tone="critical"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .3vh var(--st-critical-line); animation: mo-breath var(--d-breath) var(--ease-in-out) var(--loop); pointer-events: none; }
.wl-fl { flex: none; font-size: 9vh; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-width: 22%; white-space: nowrap; }
.wl-fx { display: grid; gap: .8vh; min-width: 0; }
.wl-fb { font-size: 5vh; line-height: 1.05; font-weight: 800; color: var(--tone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-f[data-tone="active"] .wl-fb { color: var(--text); }
.wl-fs2 { font-size: 2.2vh; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-calm { display: grid; place-content: center; justify-items: center; gap: 1.4vh; height: 100%; border-radius: 2.4vh; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.wl-calm-i { display: grid; place-items: center; width: 12vh; height: 12vh; border-radius: 50%; background: var(--st-done-bg); color: var(--st-done-fg); }
.wl-calm-i svg { width: 6vh; height: 6vh; }
.wl-calm b { font-size: 4vh; }
.wl-calm span:last-child { color: var(--text-2); font-size: 2.2vh; }
.wl-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1.2vh; min-height: 0; }
.wl-t { --tone: var(--text-3); position: relative; display: grid; grid-template-rows: auto 1fr auto; align-items: center; padding: 1.4vh 1.2vw; border-radius: 1.8vh; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.wl-t::after { content: ''; position: absolute; inset: auto 0 0; height: .6vh; background: var(--tone); opacity: .9; }
.wl-t[data-tone="active"] { --tone: var(--brand); }
.wl-t[data-tone="caution"] { --tone: var(--st-delay-line); background: color-mix(in srgb, var(--st-delay-bg) 70%, var(--surface)); }
.wl-t[data-tone="critical"] { --tone: var(--st-critical-line); background: color-mix(in srgb, var(--st-critical-bg) 85%, var(--surface)); border-color: color-mix(in srgb, var(--st-critical-line) 55%, transparent); }
.wl-t[data-tone="done"] { --tone: var(--st-done-line); }
.wl-t[data-phase="none"] { opacity: .45; }
.wl-tl { font-size: 3vh; line-height: 1; font-variant-numeric: tabular-nums; }
.wl-tb { justify-self: center; display: inline-flex; align-items: baseline; gap: .4vh; font-size: 6.4vh; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.wl-t[data-tone="caution"] .wl-tb { color: var(--st-delay-fg); }
.wl-t[data-tone="critical"] .wl-tb { color: var(--st-critical-fg); }
.wl-t[data-tone="done"] .wl-tb { color: var(--st-done-fg); }
.wl-t[data-tone="muted"] .wl-tb { color: var(--text-2); }
.wl-ts { font-size: 1.8vh; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-fs { position: absolute; right: 1.4vw; bottom: 1.6vh; display: inline-flex; align-items: center; gap: .5vw; padding: .8vh 1vw; border-radius: 1vh; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 1.8vh; cursor: pointer; }
body.wall-mode:has(.wl-fs:not([hidden])) { cursor: auto; }
.wl-fs svg { width: 2vh; height: 2vh; }
@media (prefers-reduced-motion: reduce) { .wl-stage { transition: none; } }

.wl-tu { font-size: 2.4vh; font-weight: 700; color: var(--text-2); letter-spacing: 0; }
.wl-stat[data-st="warn"] b { color: var(--st-caution-fg); }
.wl-f[data-phase="alert"][data-tone="caution"] { --tone: var(--st-caution-line); background: color-mix(in srgb, var(--st-caution-bg) 70%, var(--surface)); }
.wl-t[data-phase="alert"][data-tone="caution"] { --tone: var(--st-caution-line); background: color-mix(in srgb, var(--st-caution-bg) 70%, var(--surface)); }
.wl-t[data-phase="alert"][data-tone="caution"] .wl-tb { color: var(--st-caution-fg); }