/* 유키오 칸 배치와 빛. 색, 글꼴, 부품은 ds/(디자인 시스템 사본)에서 오고, 여기에는 이 화면의 배치와 조명만 둔다.
   차에서는 화면 오른쪽 640×720이 그대로 이 칸이다. 폰에서는 app.js가 폭에 맞춰 통째로 줄인다(zoom).
   두 가지 배치: hero(대화가 없을 때 유키오가 가운데 크게), talk(대화 중 유키오가 왼쪽 위로 물러나고 말과 정보판이 자리를 씀). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #222b38; color: var(--ink); -webkit-text-size-adjust: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 칸(밤): 푸른 회색 밤하늘. 검은 바탕보다 한 단계 밝혀 지도 옆에서 구멍처럼 보이지 않게 한다(2026-10-28 사용자: 밤은 B).
   유키오 뒤에 빛이 고이고, 가장자리는 조금 가라앉는다. 예전의 짙은 검은 밤은 keep-2026-10-27 태그에 있다 */
.col {
  position: relative; width: 640px; height: 720px; margin: 0 auto; padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  background:
    radial-gradient(60% 42% at var(--hx, 50%) var(--hy, 30%), rgba(170, 205, 240, 0.28), rgba(170, 205, 240, 0) 70%),
    radial-gradient(120% 90% at 50% 20%, #3a4a60 0%, #2b3647 55%, #222b38 100%);
}
/* 가장자리 그늘과 필름 결: 화면이 평평한 색판으로 보이지 않게 */
.col::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.22) 100%); }
/* 경고(호박)와 위험(빨강) 바탕도 같은 밝기로 */
.col[data-mode="alert"] { background:
  radial-gradient(60% 42% at var(--hx, 50%) var(--hy, 30%), rgba(255, 181, 71, 0.22), rgba(255, 181, 71, 0) 70%),
  radial-gradient(120% 90% at 50% 20%, #4a3e2c 0%, #352d22 55%, #28221a 100%); }
.col::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.col > .yk-air-canvas { z-index: -1; }
.col > .yk-leader { z-index: 1; }

/* 유키오 자리: hero면 가운데 크게, talk면 왼쪽 위 작게. 자리와 크기가 묵직하게 옮겨 간다 */
.stage-slot { position: absolute; z-index: 2; left: 64px; top: 84px; width: 512px; transition: left 700ms var(--ease-weight), top 700ms var(--ease-weight), width 700ms var(--ease-weight); }
.col[data-layout="talk"] .stage-slot { left: 8px; top: 18px; width: 248px; }
.stage-slot .yk-stage { width: 100%; }
.stage-slot .yk-stage-corner { display: none; }
/* 몸통 조명: 위에서 차가운 빛, 바닥에 비친 모습 */
.stage-slot .yk-stage-img {
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(170, 215, 255, 0.22));
  -webkit-box-reflect: below -4% linear-gradient(to bottom, rgba(0, 0, 0, 0) 64%, rgba(255, 255, 255, 0.16));
}
.stage-slot .yk-p-top { fill: url(#ykPedestalTop); stroke: rgba(207, 230, 245, 0.55); }
.stage-slot .yk-p-side { fill: url(#ykPedestalSide); }
.stage-slot .yk-p-rim { stroke-width: 3; opacity: 0.8; filter: drop-shadow(0 0 6px rgba(207, 230, 245, 0.9)); }

/* 유키오 뒤의 빛 고임(자리를 따라간다) */
.halo { position: absolute; z-index: 0; pointer-events: none; left: 40px; top: 54px; width: 560px; height: 400px;
  background: radial-gradient(closest-side, rgba(150, 195, 240, 0.28), rgba(150, 195, 240, 0.08) 55%, rgba(150, 195, 240, 0));
  transition: left 700ms var(--ease-weight), top 700ms var(--ease-weight), width 700ms var(--ease-weight), height 700ms var(--ease-weight), opacity 400ms; }
.col[data-layout="talk"] .halo { left: -40px; top: -40px; width: 340px; height: 260px; opacity: 0.8; }
body[data-mode="alert"] .halo { background: radial-gradient(closest-side, rgba(255, 181, 71, 0.26), rgba(255, 181, 71, 0.06) 55%, rgba(255, 181, 71, 0)); }
body[data-mode="danger"] .halo { background: radial-gradient(closest-side, rgba(255, 107, 94, 0.3), rgba(255, 107, 94, 0.07) 55%, rgba(255, 107, 94, 0)); }
/* 경고 단계 빨강(바로 세울 일): 호박색 자리에 쓰던 값을 빨강으로 바꿔 끼운다 */
body[data-mode="danger"], .col[data-mode="danger"] { --alert: var(--lamp-red); --alert-fill: var(--lamp-red); --alert-ground: #200d0b; }
.col[data-mode="danger"] { background:
  radial-gradient(60% 42% at var(--hx, 50%) var(--hy, 30%), rgba(255, 107, 94, 0.22), rgba(255, 107, 94, 0) 70%),
  radial-gradient(120% 90% at 50% 20%, #4b2f2c 0%, #372322 55%, #2a1b1a 100%); }

/* 상태와 들은 말: hero면 유키오 아래 가운데, talk면 유키오 오른쪽.
   상태 글자는 사람 말(한국어)이라 고정폭 대문자 대신 본문 글꼴로. 찾는 중에는 무엇을 찾는지가 여기 뜬다("주유소 값 비교하는 중"). */
.who { position: absolute; z-index: 3; left: var(--space-8); right: var(--space-8); top: 440px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); justify-items: center; text-align: center; transition: top 500ms var(--ease-weight); }
.col[data-layout="talk"] .who { left: 262px; right: 64px; top: 40px; justify-items: start; text-align: left; gap: var(--space-2); }
.status { margin: 0; font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }
.status:empty { display: none; }
.col[data-layout="talk"] .status { color: var(--ink-muted); font-size: 22px; line-height: 30px; font-weight: 500; }
/* 대답을 기다릴 때는 아래 막대 줄("말로 대답하세요", "이어 말하세요")이 같은 말을 하니 위 상태 글자를 감춘다 */
body[data-state="waiting"] .status, .col:has(#window:not([hidden])) .status { display: none; }
body[data-mode="alert"] .status, body[data-mode="danger"] .status { color: var(--alert); }
.yk-heard { min-width: 0; }
.col[data-layout="hero"] .yk-heard { font-size: 34px; line-height: 46px; color: var(--ink); justify-content: center; }
.col[data-layout="talk"] .yk-heard { font-size: 24px; line-height: 32px; color: var(--ink-muted); max-width: 100%; }

/* 말과 정보판: talk일 때만 자리가 있다 */
.content { position: relative; z-index: 3; display: grid; gap: var(--space-4); margin-top: 150px; }
.col[data-layout="hero"] .content { display: none; }
#say:empty, #say-prev, #say-prev:empty { display: none; }
/* 말 줄: 이번 대답의 문장을 다 남긴다. 길면 위부터 밀려 올라가 흐려지고 최근 문장이 늘 보인다.
   글자는 처음부터 다 밝고, 지금 읽는 단어에만 밑줄 하나(흐린 글자, 빛 번짐 없음) */
#say { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; max-height: 250px;
  font-size: 36px; line-height: 50px; font-weight: 600; letter-spacing: -0.015em; }
#say[data-over] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px); mask-image: linear-gradient(to bottom, transparent 0, #000 30px); }
#say[data-len="s"] { font-size: 40px; line-height: 54px; }
#say[data-len="l"] { font-size: 32px; line-height: 44px; }
#say .say-in { display: block; }
.col.has-cards #say, .col[data-mode] #say { font-size: 30px; line-height: 40px; max-height: 120px; font-weight: 500; }
.col[data-mode]:not(.has-cards) #say { max-height: 160px; }
#say[data-playing] .yk-w, #say .yk-w { color: var(--ink); text-shadow: none; }
#say .yk-w[data-now] { text-decoration: underline 3px var(--ring); text-underline-offset: 10px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-2); }
.cards:empty { display: none; }
.cards .wide { grid-column: 1 / -1; }
/* 정보판: 떠 있는 판. 위쪽에 얇은 빛, 아래로 가라앉는 그늘 */
.cards .yk-plate { align-content: start;
  background-color: rgba(52, 64, 82, 0.86);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc)), linear-gradient(var(--yk-bc), var(--yk-bc));
  background-size: 100% 100%, var(--yk-arm) 2px, 2px var(--yk-arm), var(--yk-arm) 2px, 2px var(--yk-arm), var(--yk-arm) 2px, 2px var(--yk-arm), var(--yk-arm) 2px, 2px var(--yk-arm);
  background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* 판 글자: 운전석(약 75cm)에서 흘끗 읽히는 크기. 판단에 쓰는 숫자가 가장 크고, 머리 라벨은 장식이라 가장 작다.
   이름은 늘 두 줄 자리를 차지해 두 판의 숫자 높이가 맞는다. 숫자는 본문 글꼴의 고른 폭 숫자(고정폭 글꼴은 쉼표 앞뒤가 벌어진다) */
.cards .yk-plate { padding: 20px 20px 22px; gap: 6px; transition: opacity 300ms var(--ease-out); }
.plate-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.plate-head .yk-label { font-size: 18px; line-height: 24px; }
.plate-tag { flex: none; font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 600; padding: 0 10px; color: var(--ground); background: var(--ring); }
.plate-tag[data-off] { color: var(--ink); background: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.cards .yk-plate-name { font-size: 30px; line-height: 38px; min-height: 76px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cards .yk-readout-num { font-family: var(--font-sans); align-items: baseline; gap: 6px; }
.cards .yk-readout-num b { font-size: 52px; line-height: 56px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cards .yk-unit, .cards .yk-pre { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-style: normal; color: var(--ink-muted); }
.plate-sub { font-size: 26px; line-height: 32px; color: var(--ink-muted); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
/* 지금 말하는 판만 밝히고 나머지는 물러난다(선도 그 판으로 간다) */
.cards[data-focus] .yk-plate:not([data-active]) { filter: brightness(0.75) saturate(0.8); transition: filter 300ms var(--ease-out); }
.cards .yk-plate[data-active] { --yk-bc: var(--ring); }
.vlist { display: grid; gap: var(--space-4); grid-column: 1 / -1; }
.vrow { display: flex; gap: var(--space-4); align-items: center; min-width: 0; }
.vrow-text { display: grid; gap: 2px; min-width: 0; }
.vrow-title { font-size: 28px; line-height: 36px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow-meta { font-size: 20px; line-height: 26px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .yk-choice-code { font-size: 22px; }
/* 경고등 판: 계기판과 같은 기호, 같은 색 */
.lamp-plate { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
.lamp-text { display: grid; gap: 4px; min-width: 0; }
.lamp-plate .yk-plate-name { min-height: 0; font-size: 32px; line-height: 40px; }
.lamp { width: 76px; height: 76px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lamp-plate[data-tone="red"] .lamp { stroke: var(--lamp-red); filter: drop-shadow(0 0 10px rgba(255, 107, 94, 0.5)); }
.lamp-plate[data-tone="amber"] .lamp { stroke: #ffb547; }
.lamp-plate[data-tone="green"] .lamp { stroke: #6fdc8c; }
.lamp-plate[data-tone="blue"] .lamp { stroke: #6fa8ff; }
#alert-slot:empty { display: none; }
/* 경고 머리줄(디자인 시스템 AlertTag)을 운전석 거리에 맞게 키운다. 거리는 숫자를 크게, 몇 분 뒤를 옆에 */
.content .yk-alert-head { font-size: 22px; line-height: 28px; align-items: baseline; }
.content .yk-alert-dist { font-family: var(--font-sans); font-size: 24px; color: var(--ink); }
.content .yk-alert-dist b { font-size: 44px; font-weight: 600; margin-right: 2px; }
.content .yk-alert-dist i { font-style: normal; font-size: 26px; color: var(--ink-muted); margin-left: 12px; }
.content .yk-alert-kind { font-size: 34px; line-height: 42px; }
.content .yk-alert-where { font-size: 24px; line-height: 30px; }
/* 남은 시간은 막대로만. 0.1초마다 바뀌는 숫자는 눈을 끌고 재촉한다(2026-10-27 리뷰) */
.yk-window-left { display: none; }

/* 아래: 선택지와 듣는 시간. 오른쪽 아래는 마이크 단추 자리 */
.end { position: relative; z-index: 3; margin-top: auto; display: grid; gap: var(--space-4); }
.listen-row { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.listen-row > .yk-window { flex: 1 1 auto; min-width: 0; }
/* 폰은 오른쪽 아래가 마이크 단추 자리라 비워 둔다. 선택지가 떠 있으면 이미 대답을 듣고 있으니 단추를 감추고 아래를 넓게 쓴다 */
body[data-device="phone"] .listen-row { margin-right: 96px; }
.col.has-choices .mic { opacity: 0; pointer-events: none; transform: scale(0.9); }
body[data-device="phone"] .col.has-choices .listen-row { margin-right: 0; }
.choices { display: flex; gap: var(--space-6); }
.choices:empty { display: none; }
/* 선택지: 두 개를 같은 무게로. 꽉 채운 흰 판은 이미 고른 것처럼 보이고 밤에 칸에서 가장 밝은 덩어리가 된다.
   운전석에서 먼 자리라 크게(높이 88, 사이 24), 위험 색은 테두리와 번호에만 */
.choices .yk-choice { min-height: 88px; padding: 0 var(--space-4) 0 var(--space-3); gap: var(--space-3); --yk-rule-w: 0px;
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 30px; }
.choices .yk-choice::before { display: none; }
.choices .yk-choice-code { font-size: 22px; padding: 7px 9px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.choices .yk-choice--alert { box-shadow: inset 0 0 0 2px var(--alert), 0 0 24px rgba(255, 181, 71, 0.12); }
.choices .yk-choice--alert .yk-choice-code { background: var(--alert-fill); color: var(--on-alert); box-shadow: none; }
/* 링크로 여는 단추(유튜브 열기, 길 안내 열기): 바탕이 --ink라 위의 글자색 --ink를 되돌린다. 안 되돌리면 "YT", "길"이 안 보인다 */
.choices .yk-choice--primary .yk-choice-code { background: var(--ink); color: var(--ground); box-shadow: none; }
.choices .yk-choice[data-heard] { box-shadow: inset 0 0 0 3px var(--ring); background-color: rgba(207, 230, 245, 0.14); }

/* 마이크 단추: 핸들 버튼이 주인이고, 화면 단추는 오른쪽 아래 둥근 자리 하나 */
.mic { position: absolute; z-index: 4; right: var(--space-8); bottom: var(--space-8); width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 70%);
  border: 1.5px solid rgba(226, 233, 242, 0.55); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 160ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms, opacity 240ms; }
.mic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mic .stop-icon { display: none; fill: currentColor; stroke: none; }
.mic:active { transform: scale(0.95); }
.mic:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
body[data-state="listening"] .mic, body[data-state="waiting"] .mic { border-color: var(--ring); box-shadow: 0 0 0 6px rgba(207, 230, 245, 0.12), 0 0 36px rgba(207, 230, 245, 0.45); }
body[data-state="speaking"] .mic .mic-icon, body[data-state="thinking"] .mic .mic-icon { display: none; }
body[data-state="speaking"] .mic .stop-icon, body[data-state="thinking"] .mic .stop-icon { display: block; }

/* 차에서는 핸들 음성 버튼으로 부른다. 화면 마이크 단추는 폰(핸들 버튼이 없음)에만 둔다 */
body[data-device="car"] .mic { display: none; }

/* 듣는 동안만 보이는 마이크 표시(차). 누르는 단추가 아니라 "지금 듣고 있다"는 표시다.
   대기 화면에서 부르면 아래 가운데 크게(안내 글이 있던 자리), 대화 중 이어 듣기에서는 남은 시간 막대 왼쪽에 작게 붙는다.
   --lv(0~1)는 app.js가 목소리 크기로 60ms마다 바꾼다. 소리가 없을 때도 고리가 천천히 번져 마이크가 열려 있다는 걸 보인다. */
.mic-live { display: none; align-items: center; gap: var(--space-4); flex: none; --mic: var(--ring); --mic-glow: rgba(207, 230, 245, 0.5); }
body[data-device="car"][data-state="listening"] .mic-live, body[data-device="car"][data-state="waiting"] .mic-live { display: flex; }
body[data-mode="alert"] .mic-live { --mic: var(--alert); --mic-glow: rgba(255, 181, 71, 0.5); }
.col[data-layout="hero"] .listen-row { justify-content: center; }
.mic-live-dot { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 70%), #0d131b;
  box-shadow: inset 0 0 0 1.5px var(--mic), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.5); }
.mic-live-dot::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, var(--mic-glow), rgba(0, 0, 0, 0));
  opacity: calc(0.35 + var(--lv, 0) * 0.65); transform: scale(calc(0.85 + var(--lv, 0) * 0.45)); transition: opacity 90ms linear, transform 90ms linear; }
.mic-live-ring { position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--mic); opacity: 0; animation: mic-live-open 1800ms var(--ease-out) infinite; }
@keyframes mic-live-open { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.55); opacity: 0; } }
.mic-live svg { position: relative; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mic-live-bars { display: flex; align-items: center; gap: 6px; height: 56px; }
.mic-live-bars i { display: block; width: 4px; border-radius: 2px; background: var(--mic); height: calc(6px + var(--lv, 0) * var(--h)); opacity: calc(0.35 + var(--lv, 0) * 0.65); transition: height 90ms linear, opacity 90ms linear; }
.mic-live-bars[data-side="l"] i:nth-child(1), .mic-live-bars[data-side="r"] i:nth-child(4) { --h: 14px; }
.mic-live-bars[data-side="l"] i:nth-child(2), .mic-live-bars[data-side="r"] i:nth-child(3) { --h: 26px; }
.mic-live-bars[data-side="l"] i:nth-child(3), .mic-live-bars[data-side="r"] i:nth-child(2) { --h: 38px; }
.mic-live-bars[data-side="l"] i:nth-child(4), .mic-live-bars[data-side="r"] i:nth-child(1) { --h: 50px; }
.col[data-layout="talk"] .mic-live-dot { width: 52px; height: 52px; }
.col[data-layout="talk"] .mic-live svg { width: 24px; height: 24px; }
.col[data-layout="talk"] .mic-live-bars { display: none; }
/* 대기 화면 안내: 핸들 그림과 "핸들의 음성 버튼을 누르고 말해 보세요", 그 아래 물어볼 말 예시 하나(20초마다 바뀐다).
   운전 상태판이 뜨면(주행 중) 안내는 접는다 */
.ptt-hint { position: absolute; z-index: 3; left: var(--space-8); right: var(--space-8); bottom: 48px; display: none; justify-items: center; gap: var(--space-2); text-align: center; }
.ptt-hint p { margin: 0; }
.ptt-how { display: flex; align-items: center; gap: var(--space-3); font-size: 24px; line-height: 32px; color: var(--ink-muted); }
.ptt-icon { width: 46px; height: 42px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ptt-icon .ptt-mic { stroke: var(--ring); }
.ptt-example { font-size: 30px; line-height: 40px; font-weight: 500; color: var(--ink); transition: opacity 400ms var(--ease-out); }
body[data-device="car"][data-state="idle"] .col[data-layout="hero"]:not(.has-glance) .ptt-hint { display: grid; }
.col[data-layout="hero"]:not(.has-glance) .who { top: 440px; }
body[data-state="idle"] .col[data-layout="hero"]:not(.has-glance) .stage-slot { top: 60px; }

/* 운전 상태판(대기 화면, 주행 중): 유키오는 위로 조금 작게 올라가고, 아래에 다음 쉴 곳과 도착 시각.
   부르면(듣는 중) 상태판은 접히고 유키오가 다시 앞으로 나온다 */
.glance { position: absolute; z-index: 3; left: var(--space-8); right: var(--space-8); top: 318px; display: grid; gap: 18px; }
.glance[hidden], body:not([data-state="idle"]) .glance, .col[data-layout="talk"] .glance { display: none !important; }
body[data-state="idle"] .col.has-glance[data-layout="hero"] .stage-slot { left: 130px; top: 22px; width: 380px; }
body[data-state="idle"] .col.has-glance[data-layout="hero"] .halo { left: 100px; top: -20px; width: 440px; height: 320px; }
body[data-state="idle"] .col.has-glance .who { display: none; }
.glance-alert { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: 10px; color: var(--alert); font-size: 26px; line-height: 32px; font-weight: 600; box-shadow: 0 2px 0 var(--alert); }
.glance-alert b { color: var(--ink); font-size: 40px; margin-left: auto; }
.glance-alert .yk-alert-hatch { font-family: var(--font-mono); width: auto; }
.glance-alert + .glance-stop { border-top: 0; padding-top: 4px; }
.glance-alert-lanes { color: var(--ink); font-size: 26px; font-weight: 500; }
.glance-stop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); padding-top: 18px; border-top: 1px solid var(--line); }
.glance-stop-text { display: grid; gap: 2px; min-width: 0; }
.glance-stop .yk-label { font-size: 22px; line-height: 28px; }
.glance-name { font-size: 34px; line-height: 42px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance-sub { font-size: 26px; line-height: 34px; color: var(--ink-muted); white-space: pre; }
.glance-when { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.glance-when b { font-size: 76px; line-height: 72px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.glance-when i { font-style: normal; font-size: 26px; color: var(--ink-muted); }
.glance-facts { display: flex; gap: var(--space-8); padding-top: 18px; border-top: 1px solid var(--line); }
.glance-fact { display: grid; gap: 2px; }
.glance-fact .yk-label { font-size: 22px; line-height: 28px; }
.glance-fact b { font-size: 34px; line-height: 42px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 조수석에서 유키오를 누르면 듣는다 */
.stage-slot { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* 설정 화면은 settings.css */

@media (prefers-reduced-motion: reduce) {
  .stage-slot, .halo, .who, .mic { transition: none; }
  .mic-live-ring { animation: none; opacity: 0.5; }
}

/* 한국어 라벨은 본문 글꼴로. 고정폭 글꼴로 쓰면 띄어쓰기가 두 배로 벌어진다(2026-10-27 2차 리뷰). 고정폭은 숫자와 기호(01, //////)에만 */
.col .yk-label, .col .yk-alert-head, .col .yk-window-head .yk-label { font-family: var(--font-sans); letter-spacing: 0.01em; }
.col .yk-alert-hatch, .col .yk-choice-code { font-family: var(--font-mono); }
.col .yk-alert-hatch { width: auto; }
/* 한 낱말만 다음 줄에 남지 않게 */
#say, .yk-alert-kind { text-wrap: pretty; }
#say .say-more { color: var(--ink-muted); }
/* 유키오에서 판으로 긋던 선은 뺐다. 지금 말하는 판은 괄호를 다시 그어 알린다 */
.col > #lead { display: none; }
/* 선택지가 떠 있을 때 아래 막대 자리를 미리 잡아 둔다. 대답 창이 열리며 선택지가 위로 뛰지 않게 */
.col.has-choices .listen-row { min-height: 52px; }
/* 빨간 경고등 판: 빨간 칸 위에서 따로 놀지 않게 같은 빨강으로, 그림은 계기판과 맞춰 보기 좋게 크게 */
.col[data-mode="danger"] .cards .yk-plate { background-color: rgba(255, 107, 94, 0.07); --yk-bc: var(--lamp-red); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.col[data-mode="danger"] .lamp { width: 96px; height: 96px; }

/* 남는 경고 띠: 대화 중 칸 맨 위 44px. 빨강이 호박보다 앞선다 */
.band { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 48px; display: none; align-items: center; gap: var(--space-3); padding: 0 var(--space-8);
  font-size: 24px; font-weight: 600; color: var(--alert); background: linear-gradient(180deg, rgba(255, 181, 71, 0.16), rgba(255, 181, 71, 0.04)); box-shadow: inset 0 -2px 0 var(--alert); }
.band[data-tone="danger"] { color: var(--lamp-red); background: linear-gradient(180deg, rgba(255, 107, 94, 0.2), rgba(255, 107, 94, 0.05)); box-shadow: inset 0 -2px 0 var(--lamp-red); }
.band b { margin-left: auto; color: var(--ink); font-size: 28px; }
.band .band-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.col.has-band[data-layout="talk"]:not([data-mode]) .band { display: flex; }
.col.has-band[data-layout="talk"]:not([data-mode]) .stage-slot { top: 54px; }
.col.has-band[data-layout="talk"]:not([data-mode]) .who { top: 70px; }
.col.has-band[data-layout="talk"]:not([data-mode]) .content { margin-top: 176px; }
/* 대기 화면 상태판에도 빨간 경고등 줄(사고 띠와 같은 자리) */
.col.has-band[data-layout="hero"] .band[data-tone="danger"] { display: flex; }

/* 상태판의 두 번째 쉴 곳(더 먼 휴게소)은 한 줄로 */
.glance-stop.is-small { padding-top: 10px; }
.glance-stop.is-small .yk-label { display: none; }
.glance-stop.is-small .glance-name { font-size: 28px; line-height: 34px; }
.glance-stop.is-small .glance-sub { font-size: 22px; line-height: 28px; }
.glance-stop.is-small .glance-when b { font-size: 44px; line-height: 44px; }
.col.has-glance .glance:has(.glance-alert) { top: 296px; }
body[data-state="idle"] .col.has-glance[data-layout="hero"]:has(.glance-alert) .stage-slot { top: 8px; width: 340px; left: 150px; }
/* 빨간 경고등 머리줄 아래: 가장 가까운 쉴 곳 */
.yk-alert-near { font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink); }

/* 달리는 중 대기 화면 아래: 부르는 법 한 줄. 상태판이 길면(사고 띠나 쉴 곳 둘) 자리를 양보한다 */
.ptt-mini { position: absolute; z-index: 3; left: var(--space-8); right: var(--space-8); bottom: 30px; margin: 0; display: none; align-items: center; justify-content: center; gap: var(--space-3);
  font-size: 22px; line-height: 30px; color: var(--ink-muted); white-space: nowrap; }
.ptt-mini .ptt-icon { width: 36px; height: 33px; }
.ptt-mini b { font-size: 24px; font-weight: 500; color: var(--ink); transition: opacity 400ms var(--ease-out); }
body[data-device="car"][data-state="idle"] .col.has-glance[data-layout="hero"] .ptt-mini { display: flex; }
.col:has(.glance-alert, .glance-stop.is-small, .glance-tip) .ptt-mini { display: none !important; }
/* 상태판 안내(목적지가 없을 때) */
.glance-tip { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 22px; line-height: 30px; color: var(--ink-muted); }
.glance-tip b { font-size: 28px; line-height: 36px; font-weight: 500; color: var(--ink); }
/* 빨간 경고등 할 일 두 줄: 흰 글씨 */
.yk-alert-todo { font-size: 26px; line-height: 34px; font-weight: 600; color: var(--ink); }
/* 사고 머리줄: 몇 분 거리도 km만큼 잘 보이게 */
.content .yk-alert-dist i { font-size: 30px; color: var(--ink); }
/* 판이 있는 대답: 다섯 줄까지(앞 문장을 덜 빼게), 조금 작게 */
.col.has-cards #say { font-size: 28px; line-height: 38px; max-height: 190px; }
.col.has-cards.has-choices #say { max-height: 114px; }
/* 먼저 묻는 화면(선택지가 뜬 때)은 판을 한 줄 이름으로 줄여 아래 막대("말로 대답하세요")까지 칸 안에 들어오게 */
.col.has-choices .cards .yk-plate { padding: 14px 18px 16px; }
.col.has-choices .cards .yk-plate-name { min-height: 0; -webkit-line-clamp: 1; }
.col.has-choices .cards .yk-readout-num b { font-size: 46px; line-height: 50px; }

/* 지금 읽는 단어 밑줄이 마지막 줄에서 잘리지 않게 */
#say { padding-bottom: 8px; }
#say .yk-w[data-now] { text-underline-offset: 6px; }
/* 사고 머리줄 아래 앞길 한 줄 그림 */
.alert-strip { display: block; width: 100%; height: auto; margin: 10px 0 4px; overflow: visible; }
.as-road { stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; }
.as-ahead { stroke: var(--alert); stroke-width: 6; stroke-dasharray: 10 8; opacity: 0.8; }
.as-tick { stroke: var(--ink-faint); stroke-width: 2; }
.as-km { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 18px; }
.as-me { fill: var(--ink); filter: drop-shadow(0 0 8px rgba(238, 242, 247, 0.8)); }
.as-x { stroke: var(--alert); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 181, 71, 0.7)); }
/* 경고 화면에서 판이 없으면 묻는 말을 크게 */
.col[data-mode]:not(.has-cards) #say { font-size: 34px; line-height: 46px; font-weight: 600; }