/* 자돈사 · 육성비육사 일보 선명 스타일 (2026-10-11, 시안 3 = 선명 + 오늘 볼 것, docs/STYLE-VIVID.md)
   body 에 dv 를 붙인다. 그리기는 shared/daily-vivid.js.
   - 동 카드는 그 묶음 색(--group-color, 화면이 이미 정한 색) 번짐 + 제목 앞 동그란 색 점
   - 맨 위 토탈은 색 띠 + 큰 숫자, 폐사 카드는 폐사가 있을 때만 빨강
   - 방 줄은 움직인 방만 칠하고(안 움직인 방은 조용히), 폐사 난 방엔 빨간 '폐사 n'
   - 표로 보기는 0 이 아닌 전입 · 전출 · 출하 · 폐사 칸만 칠한다
   - 토탈 밑 '오늘 볼 것': 폐사 난 방 · 이동한 방을 한 줄씩, 누르면 그 방으로 */
body.dv { --c-in: var(--t-blue, #4ea8ff); --c-out: var(--t-orange, #fb923c); --c-ship: var(--t-blue, #4ea8ff); --c-dead: var(--t-red, #ef4444); }

/* 동 카드 */
body.dv .accordion-section { --gc: var(--group-color, var(--accent)); border-color: color-mix(in srgb, var(--gc) 40%, var(--line)) !important;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gc) 14%, transparent), transparent 55%), var(--surface) !important; }
body.dv .accordion-header h3 { display: flex !important; align-items: center; gap: 10px; font-weight: 900 !important; }
body.dv .accordion-header h3::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc) 22%, transparent); }
body.dv .total-section [id$="-total-current"] { color: var(--gc) !important; font-size: 1.35rem !important; font-weight: 900 !important; }
body.dv .total-section .v-dead-on { color: var(--c-dead) !important; font-weight: 900 !important; }

/* 맨 위 토탈 · 폐사 카드 */
body.dv .summary-card.v-key { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important; background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important; }
body.dv .summary-card.v-key::before, body.dv .summary-card.dead.v-on::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
body.dv .summary-card.v-key .summary-value { color: var(--accent) !important; font-size: 1.7rem !important; font-weight: 900 !important; }
body.dv .summary-card.dead { position: relative; overflow: hidden; }
body.dv .summary-card.dead.v-on { border-color: color-mix(in srgb, var(--c-dead) 45%, var(--line)) !important; background: color-mix(in srgb, var(--c-dead) 8%, var(--surface)) !important; }
body.dv .summary-card.dead.v-on::before { background: var(--c-dead); }
body.dv .summary-card.dead:not(.v-on) .summary-value { color: var(--ink-soft) !important; opacity: .6; }

/* 방 줄: 움직인 방만 칠한다 */
body.dv .room-card { transition: background .25s, border-color .25s; }
body.dv .room-card.v-chg { border-color: color-mix(in srgb, var(--gc) 50%, var(--line)) !important; background: color-mix(in srgb, var(--gc) 9%, var(--bg)) !important; box-shadow: inset 4px 0 0 var(--gc) !important; }
body.dv .room-card.v-chg .rs-flow b { color: var(--gc) !important; font-size: 1.15rem; font-weight: 900; }
body.dv .room-summary .rs-dead { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 9px; border-radius: 11px; background: var(--c-dead); color: var(--bg); font-size: .76rem; font-weight: 900; white-space: nowrap; }
body.dv .room-summary .rs-pill.on { background: color-mix(in srgb, var(--gc) 22%, transparent) !important; color: var(--ink) !important; border-color: color-mix(in srgb, var(--gc) 55%, var(--line)) !important; }
body.dv .room-card.v-flash { animation: dv-flash 1.6s ease-out; }
@keyframes dv-flash { 0%, 40% { box-shadow: inset 4px 0 0 var(--gc), 0 0 0 3px color-mix(in srgb, var(--gc) 55%, transparent); } }

/* 표로 보기: 0 이 아닌 칸만 */
body.dv .room-card input.v-on { font-weight: 900 !important; color: var(--ink) !important; background: color-mix(in srgb, var(--col) 15%, var(--bg)) !important; border-color: color-mix(in srgb, var(--col) 60%, var(--line)) !important; box-shadow: inset 4px 0 0 var(--col) !important; }
body.dv .room-card .calculated-value { color: var(--gc) !important; font-weight: 900 !important; }

/* 오늘 볼 것 */
body.dv .dv-today { margin: 12px 0 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-dead) 35%, var(--line));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c-dead) 12%, transparent), transparent 55%), var(--surface); }
body.dv .dv-today.calm { border-color: var(--line); background: var(--surface); }
body.dv .dv-today h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; font-weight: 900; color: var(--ink); }
body.dv .dv-today h3 i { width: 12px; height: 12px; border-radius: 50%; background: var(--c-dead); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-dead) 22%, transparent); }
body.dv .dv-today.calm h3 i { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
body.dv .dv-today .ln { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
body.dv .dv-today .ln:last-child { margin-bottom: 0; }
body.dv .dv-today .ln > b { min-width: 62px; font-size: .82rem; color: var(--ink-soft); }
body.dv .dv-today .none { font-size: .85rem; color: var(--ink-soft); }
body.dv .dv-today button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 0; border-radius: 12px; font: inherit; font-size: .8rem; font-weight: 800; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--cc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 45%, transparent); }
body.dv .dv-today button em { font-style: normal; font-weight: 900; color: var(--cc); }
@media (prefers-reduced-motion: reduce) { body.dv .room-card { transition: none; } body.dv .room-card.v-flash { animation: none; } }
@media print { body.dv .dv-today { display: none; } }