/* 빛의 흐름 타임라인 · 공통 (2026-09-29). 결과 영상 아래에 두는 필름 바코드 + 형태별 레인 + 전환 표시.
   페이지 색은 --lt-accent 로 넘긴다(기본값은 페이지의 --accent). */
.light-timeline{--lt-accent:var(--accent,#3a63c4);--lt-ink:#111;margin-top:22px}
.lt-now{display:flex;align-items:baseline;gap:14px;height:27px;font-size:18px;line-height:1.5}
.lt-time{flex:none;min-width:58px;font-variant-numeric:tabular-nums;font-weight:650;color:var(--lt-accent)}
.lt-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-body{position:relative;display:grid;grid-template-columns:minmax(var(--lt-name-w,64px),max-content) 1fr;row-gap:10px;align-items:center;margin-top:36px}
.lt-name{font-size:15px;color:#666;line-height:1.2;padding-right:10px;white-space:nowrap}
.lt-track{position:relative;height:20px;background:#f2f2f2}
.lt-film{height:58px;background:#000 var(--lt-film) 0 0/100% 100% no-repeat;cursor:pointer;touch-action:pan-y}
.lt-film .lt-zone{position:absolute;top:6px;font-size:14px;line-height:1;color:#fff;opacity:.9;pointer-events:none;white-space:nowrap}
.lt-shift{position:absolute;top:-8px;bottom:-8px;width:0;border-left:1px dashed var(--lt-ink);pointer-events:none}
.lt-shift em{position:absolute;top:-25px;left:0;transform:translateX(-50%);font-style:normal;font-size:14px;color:var(--lt-ink);white-space:nowrap;background:#fff;padding:0 4px}
.lt-seg{position:absolute;top:0;bottom:0;padding:0;border-radius:2px;background:var(--lt-lane,#111);min-width:3px;color:var(--lt-lane,#111)}
.lt-seg:hover{filter:brightness(1.6)}
.lt-seg.is-now{box-shadow:0 0 0 2px #fff,0 0 0 3.5px currentColor}
.lt-lane[data-tone="accent"]{--lt-lane:var(--lt-accent)}
.lt-lane[data-tone="mid"]{--lt-lane:#7a8797}
.lt-axis{position:relative;height:18px;font-size:14px;color:#777;font-variant-numeric:tabular-nums}
.lt-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.lt-axis span:first-child{transform:none}.lt-axis span:last-child{transform:translateX(-100%)}
.lt-playhead{position:absolute;top:-4px;height:calc(100% - 22px);width:2px;margin-left:-1px;background:#e8e8e8;box-shadow:0 0 0 1px var(--lt-ink);pointer-events:none;left:var(--lt-name-w,64px)}
.lt-note{font-size:15px;line-height:1.6;color:#777;margin-top:16px;text-align:center;word-break:keep-all}
@media(max-width:700px){
 .lt-now{font-size:16px;gap:10px;height:48px;align-items:flex-start}
 .lt-label{white-space:normal;word-break:keep-all;overflow:visible}
 .lt-body{--lt-name-w:52px;row-gap:9px}
 .lt-name{font-size:14px}
 .lt-film{height:46px}
 .lt-note{font-size:14px;margin-top:12px}
}