.sanim, .sanim * { box-sizing: border-box; }
.pillar-preview:has(.sanim) {
background: #fff;
}
.sanim {
position: absolute;
inset: 0;
overflow: hidden;
background: #fff;
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.sanim-stage {
position: absolute;
inset: 7.3% 4.1%;
display: flex;
flex-direction: column;
font-size: 8.5px;
font-size: calc(5.2px + .82cqw);
color: #2B292D;
--sp-1: .5em;
--sp-2: .9em;
--sp-3: 1.5em;
--sanim-a: 24.5%;
--sanim-b: 64.5%;
--sanim-w: 35.5%;
--sanim-rowh: 23.3%;
--sanim-pad: 1.5%;
}
@container (max-width: 280px) {
.sanim .sanim-stage { inset: 5.8% 3.2625%; }
.sanim .sanim-shot  { flex-basis: 30%; }
.sanim .sanim-meta  { margin-left: var(--sp-2); }
.sanim .sanim-chip  { padding: .34em .46em; }
}
.sanim-head { display: flex; align-items: center; flex: 0 0 auto; }
.sanim-shot {
position: relative; flex: 0 0 32%; aspect-ratio: 16 / 9;
overflow: hidden; border-radius: .3em; background: rgba(43, 41, 45, .08);
}
.sanim-frame {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
}
.sanim .dw-live { top: 8.9%; left: 5%; z-index: 2; font-size: .86em; }
.sanim-meta { flex: 1 1 auto; min-width: 0; margin-left: var(--sp-3); }
.sanim-title { display: block; font-size: 1.45em; font-weight: 700; line-height: 1.25; }
.sanim-rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.sanim-chip {
padding: .34em .62em; border-radius: .3em; background: rgba(43, 41, 45, .055);
font-size: .88em; font-weight: 600; line-height: 1.35; color: rgba(43, 41, 45, .5);
white-space: nowrap;
}
.sanim-chip--on { background: #00ffff; color: #2B292D; font-weight: 700; }
.sanim-cols {
position: relative; flex: 0 0 auto;
height: calc(1.0625em + var(--sp-1) + 1px);
margin-top: var(--sp-3);
padding-bottom: var(--sp-1);
border-bottom: 1px solid rgba(43, 41, 45, .1);
}
.sanim .sanim-col { position: absolute; top: 0; }
.sanim .sanim-col--a { left: calc(var(--sanim-a) + var(--sanim-pad)); }
.sanim .sanim-col--b { left: calc(var(--sanim-b) + var(--sanim-pad)); }
.sanim-list { position: relative; flex: 1 1 auto; margin-top: var(--sp-2); }
.sanim-row { position: absolute; right: 0; left: 0; height: var(--sanim-rowh); }
.sanim-row--1 { top: 0; }
.sanim-row--2 { top: calc(50% - var(--sanim-rowh) / 2); }
.sanim-row--3 { top: calc(100% - var(--sanim-rowh)); }
.sanim-date {
position: absolute; top: 50%; left: 0; width: 20%; transform: translateY(-50%);
font-size: .95em; font-weight: 600; line-height: 1.2; color: rgba(43, 41, 45, .62);
white-space: nowrap;
}
.sanim-slot {
position: absolute; top: 0; bottom: 0; width: var(--sanim-w);
display: flex; align-items: center;
padding-left: var(--sanim-pad);
overflow: hidden; border-radius: .25em;
background: rgba(43, 41, 45, .045); box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .16);
}
.sanim-slot--a { left: var(--sanim-a); }
.sanim-slot--b { left: var(--sanim-b); }
.sanim-slot-time {
position: relative;
font-size: .95em; font-weight: 700; line-height: 1.2; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sanim-fill {
position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
transform: scaleX(0); transform-origin: 0 50%; background: #00ffff;
}
.sanim-row--1 .sanim-fill { transform: none; opacity: .45; }
.sanim-row--2 .sanim-slot--a .sanim-fill { animation: sanim-fill-2a 14s linear infinite; }
.sanim-row--2 .sanim-slot--b .sanim-fill { animation: sanim-fill-2b 14s linear infinite; }
.sanim-row--3 .sanim-slot--a .sanim-fill { animation: sanim-fill-3a 14s linear infinite; }
.sanim-row--3 .sanim-slot--b .sanim-fill { animation: sanim-fill-3b 14s linear infinite; }
@keyframes sanim-fill-2a {
0%            { transform: scaleX(0); opacity: 1; }
14%, 15.5%    { transform: scaleX(1); opacity: 1; }
18%, 95%      { transform: scaleX(1); opacity: .45; }
97.2%, 97.4%  { transform: scaleX(1); opacity: 0; }
97.41%, 100%  { transform: scaleX(0); opacity: 1; }
}
@keyframes sanim-fill-2b {
0%, 20%       { transform: scaleX(0); opacity: 1; }
34%, 35.5%    { transform: scaleX(1); opacity: 1; }
38%, 95%      { transform: scaleX(1); opacity: .45; }
97.2%, 97.4%  { transform: scaleX(1); opacity: 0; }
97.41%, 100%  { transform: scaleX(0); opacity: 1; }
}
@keyframes sanim-fill-3a {
0%, 40%       { transform: scaleX(0); opacity: 1; }
54%, 55.5%    { transform: scaleX(1); opacity: 1; }
58%, 95%      { transform: scaleX(1); opacity: .45; }
97.2%, 97.4%  { transform: scaleX(1); opacity: 0; }
97.41%, 100%  { transform: scaleX(0); opacity: 1; }
}
@keyframes sanim-fill-3b {
0%, 60%       { transform: scaleX(0); opacity: 1; }
74%, 75.5%    { transform: scaleX(1); opacity: 1; }
78%, 95%      { transform: scaleX(1); opacity: .45; }
97.2%, 97.4%  { transform: scaleX(1); opacity: 0; }
97.41%, 100%  { transform: scaleX(0); opacity: 1; }
}
.pillar-panel:not(.is-active) .sanim,
.pillar-panel:not(.is-active) .sanim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.sanim *, .sanim *:before { animation: none !important; }
.sanim-row--2 .sanim-slot--a .sanim-fill { transform: scaleX(.55); }
}