/* 낮 시안 "눈 내린 낮": 밤 화면을 뒤집지 않고 낮을 따로 그린다. 기본 화면(style.css) 위에 덮어쓴다.
   - 바탕은 옅은 겨울 하늘(위가 조금 진한 하늘색, 아래로 눈밭처럼 하얗게). 유키오 흰 몸이 묻히지 않게 뒤에 하늘색 빛을 고인다.
   - 얼음 가루는 밝은 바탕 위 검은 점(먼지처럼 보였다)이 아니라 하얀 눈송이로. 위쪽 하늘에서만 보이고 아래 눈밭에서는 사라진다.
   - 글자는 유키오 바이저의 남색, 판은 젖빛 유리 위에 하얀 판, 경고는 진한 호박과 진한 빨강으로 낮빛에서도 읽히게. */
html[data-daylook="day"] {
  --d-ink: #0e1a33; --d-muted: #4a5870; --d-faint: #7d8aa0; --d-line: rgba(14, 26, 51, 0.16); --d-line-strong: rgba(14, 26, 51, 0.5);
  --ink: var(--d-ink); --ink-muted: var(--d-muted); --ink-faint: var(--d-faint); --line: var(--d-line); --line-strong: var(--d-line-strong);
  --alert: #8a4a00; --alert-fill: #ffb547; --on-alert: #2a1700; --lamp-red: #c0281b;
}
html[data-daylook="day"], html[data-daylook="day"] body { background: #dfe8f1; }

/* 하늘 */
html[data-daylook="day"] .col { --yk-dust: #ffffff; --yk-dust-alert: #ffffff;
  background:
    radial-gradient(55% 40% at var(--hx, 50%) var(--hy, 30%), rgba(118, 162, 214, 0.38), rgba(118, 162, 214, 0) 70%),
    linear-gradient(180deg, #bcd4ee 0%, #d6e5f4 34%, #ecf2f8 64%, #f8fafc 100%); }
html[data-daylook="day"] .col::before { background: radial-gradient(120% 95% at 50% 36%, rgba(255, 255, 255, 0) 60%, rgba(150, 172, 200, 0.22) 100%); }
html[data-daylook="day"] .col::after { opacity: 0.04; }
html[data-daylook="day"] .col > .yk-air-canvas { opacity: 0.95; }

/* 유키오 뒤 하늘빛 고임(흰 몸이 바탕에 묻히지 않게), 그림자는 푸른 기운으로 옅게 */
html[data-daylook="day"] .halo { background: radial-gradient(closest-side, rgba(96, 146, 206, 0.42), rgba(96, 146, 206, 0.12) 55%, rgba(96, 146, 206, 0)); }
html[data-daylook="day"] .stage-slot .yk-stage-img { filter: drop-shadow(0 14px 16px rgba(40, 70, 120, 0.28)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.6));
  -webkit-box-reflect: below -4% linear-gradient(to bottom, rgba(0, 0, 0, 0) 66%, rgba(255, 255, 255, 0.22)); }
/* 받침대: 얼음판(위는 하얗게 빛나고 옆은 푸른 얼음) */
html[data-daylook="day"] #ykPedestalTop stop:nth-child(1) { stop-color: #dbe8f6; }
html[data-daylook="day"] #ykPedestalTop stop:nth-child(2) { stop-color: #b9cfe8; }
html[data-daylook="day"] #ykPedestalTop stop:nth-child(3) { stop-color: #8fb0d6; }
html[data-daylook="day"] #ykPedestalSide stop:nth-child(1) { stop-color: #b7cbe2; }
html[data-daylook="day"] #ykPedestalSide stop:nth-child(2) { stop-color: #7f9dc0; }
html[data-daylook="day"] .stage-slot .yk-p-top { stroke: rgba(255, 255, 255, 0.9); }
html[data-daylook="day"] .stage-slot .yk-p-rim { stroke: #ffffff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); }
html[data-daylook="day"] .yk-p-dial { stroke: rgba(14, 26, 51, 0.35); }
html[data-daylook="day"] .yk-p-dial-major, html[data-daylook="day"] .yk-p-orbit, html[data-daylook="day"] .yk-p-listen, html[data-daylook="day"] .yk-p-wait { stroke: #3d6fb0; }
html[data-daylook="day"] .yk-p-shadow { fill: #6f8db3; opacity: 0.35; }

/* 판: 하얀 젖빛 판, 모서리 괄호는 남색 */
html[data-daylook="day"] .cards .yk-plate { --yk-bc: rgba(14, 26, 51, 0.55);
  background-color: rgba(255, 255, 255, 0.82);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), 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));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 34px rgba(40, 70, 120, 0.16); }
html[data-daylook="day"] .cards .yk-plate[data-active] { --yk-bc: #2b5fa8; }
html[data-daylook="day"] .cards[data-focus] .yk-plate:not([data-active]) { filter: saturate(0.6) opacity(0.62); }
html[data-daylook="day"] .plate-tag { background: var(--d-ink); color: #ffffff; }
html[data-daylook="day"] .plate-tag[data-off] { background: none; color: var(--d-ink); box-shadow: inset 0 0 0 1.5px var(--d-line-strong); }
html[data-daylook="day"] #say .yk-w[data-now] { text-decoration-color: #2b5fa8; }
html[data-daylook="day"] .vrow .yk-choice-code { color: var(--d-ink); box-shadow: inset 0 0 0 1.5px var(--d-line-strong); }

/* 선택지: 하얀 판에 남색 테두리. 경고 때는 호박 테두리와 호박 번호 */
html[data-daylook="day"] .choices .yk-choice { background-color: rgba(255, 255, 255, 0.78); color: var(--d-ink);
  box-shadow: inset 0 0 0 1.5px var(--d-line-strong), 0 10px 24px rgba(40, 70, 120, 0.12); }
html[data-daylook="day"] .choices .yk-choice-code { color: var(--d-ink); box-shadow: inset 0 0 0 1.5px var(--d-line-strong); }
html[data-daylook="day"] .choices .yk-choice--alert { box-shadow: inset 0 0 0 2.5px #e08a00, 0 10px 24px rgba(160, 100, 0, 0.14); }
html[data-daylook="day"] .choices .yk-choice[data-heard] { box-shadow: inset 0 0 0 3px #2b5fa8; background-color: #e6efff; }
html[data-daylook="day"] .yk-window-track { background: rgba(14, 26, 51, 0.12); }
html[data-daylook="day"] .yk-window-bar { background: #2b5fa8; }

/* 경고: 낮빛에서도 읽히게 진한 호박, 바탕은 옅은 살구빛 하늘 */
html[data-daylook="day"] .col[data-mode="alert"] { background:
  radial-gradient(55% 40% at var(--hx, 50%) var(--hy, 30%), rgba(255, 181, 71, 0.4), rgba(255, 181, 71, 0) 70%),
  linear-gradient(180deg, #f6dcb0 0%, #f8e8cc 38%, #fbf4e8 70%, #fdfaf4 100%); }
html[data-daylook="day"] .col[data-mode="danger"] { --alert: #b3241a; --alert-fill: #e5483b; background:
  radial-gradient(55% 40% at var(--hx, 50%) var(--hy, 30%), rgba(229, 72, 59, 0.3), rgba(229, 72, 59, 0) 70%),
  linear-gradient(180deg, #f6cdc8 0%, #f9e2df 40%, #fcf3f2 72%, #fefafa 100%); }
html[data-daylook="day"] .col[data-mode="danger"] .cards .yk-plate { background-color: rgba(255, 255, 255, 0.85); --yk-bc: #c0281b; }
html[data-daylook="day"] .yk-alert::after { box-shadow: none; }
html[data-daylook="day"] .band { background: linear-gradient(180deg, rgba(255, 181, 71, 0.55), rgba(255, 181, 71, 0.25)); }
html[data-daylook="day"] .as-me { fill: var(--d-ink); filter: none; }
html[data-daylook="day"] .as-x { filter: none; }

/* 상태판, 마이크, 설정 */
html[data-daylook="day"] .glance-stop, html[data-daylook="day"] .glance-facts, html[data-daylook="day"] .glance-tip { border-top-color: var(--d-line); }
html[data-daylook="day"] .mic-live { --mic: #2b5fa8; --mic-glow: rgba(43, 95, 168, 0.35); }
html[data-daylook="day"] .mic-live-dot { background: radial-gradient(circle at 50% 35%, #ffffff, #e9f0f8 70%); color: var(--d-ink); box-shadow: inset 0 0 0 1.5px #2b5fa8, 0 8px 20px rgba(40, 70, 120, 0.18); }
html[data-daylook="day"] .ptt-icon { stroke: var(--d-ink); }
html[data-daylook="day"] .ptt-icon .ptt-mic { stroke: #2b5fa8; }

/* 낮 움직임: 밤의 빛 번짐 대신 낮에만 있는 두 가지. 둘 다 느리고 드물게(곁눈을 끌지 않게).
   1) 위쪽 하늘에서 햇빛에 반짝이는 눈송이. 9개가 10초 안에 하나씩 차례로, 한 번에 많아야 하나.
   2) 받침대 얼음판 위를 7초에 한 번 지나가는 햇빛 한 줄기. */
.day-sky, .day-sheen { display: none; }
html[data-daylook="day"] .day-sky { display: block; position: absolute; left: 0; right: 0; top: 0; height: 48%; z-index: 0; pointer-events: none; }
/* 하얀 바탕 위에서도 보이게, 반짝이 둘레에 옅은 하늘색 그늘을 둔다(햇빛에 빛나는 눈 결정처럼) */
html[data-daylook="day"] .day-sky i { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 50%, rgba(255, 255, 255, 0)) center / 100% 2.5px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 50%, rgba(255, 255, 255, 0)) center / 2.5px 100% no-repeat,
    radial-gradient(closest-side, #ffffff 0, #ffffff 22%, rgba(255, 255, 255, 0) 60%);
  filter: drop-shadow(0 0 2px rgba(60, 110, 180, 0.55)) drop-shadow(0 0 8px rgba(255, 255, 255, 1));
  animation: day-twinkle 10.2s ease-in-out infinite; }
@keyframes day-twinkle {
  0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  6% { opacity: 1; transform: scale(1) rotate(25deg); }
  13% { opacity: 0; transform: scale(0.5) rotate(50deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(50deg); } }
html[data-daylook="day"] .day-sheen { display: inline; }
html[data-daylook="day"] .day-sheen-bar { opacity: 0; animation: day-sheen 7s var(--ease-weight) infinite; }
@keyframes day-sheen {
  0% { opacity: 0; transform: translateX(0) skewX(-24deg); }
  8% { opacity: 1; }
  38% { opacity: 1; }
  46% { opacity: 0; transform: translateX(300px) skewX(-24deg); }
  100% { opacity: 0; transform: translateX(300px) skewX(-24deg); } }
@media (prefers-reduced-motion: reduce) { html[data-daylook="day"] .day-sky i, html[data-daylook="day"] .day-sheen-bar { animation: none; } }
html[data-daylook="day"] .day-sheen-bar { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); }