/* Film: framed custom player with chapter rail (reference console-panel style). */
.ft-head { margin-bottom: 48px; }
.ft-panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ft-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 46px; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--f-mono); color: var(--mist); }
.ft-bar__l { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ft-bar__l b { font: 500 14px/1 var(--f-body); color: var(--fg); letter-spacing: -0.01em; }
.ft-bar__file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bar__r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mist); }
.ft-bar__r b { color: var(--fg); font-weight: 500; }
.ft-live { width: 7px; height: 7px; flex: none; background: var(--line-strong); transition: background .3s var(--ease); }
.ft-panel.is-playing .ft-live { background: var(--accent-line); animation: ftblink 1.2s steps(1) infinite; }
@keyframes ftblink { 50% { opacity: .25; } }

.ft-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding: 32px var(--gutter); background: var(--surface-raised); }
.ft-stage { min-width: 0; }

/* video */
.ft-video { position: relative; aspect-ratio: 16 / 9; background: #fafaf8; border: 1px solid var(--line); overflow: hidden; cursor: pointer; isolation: isolate; }
.ft-video.is-45 { aspect-ratio: 4 / 5; }
.ft-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fafaf8; transition: transform 1.2s var(--ease-out); }
.ft-panel:not(.is-started) .ft-video:hover video { transform: scale(1.015); }
.ft-big { position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: stretch; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.ft-video.is-45 .ft-big { top: 71%; }
.ft-big__sq { width: 60px; height: 60px; display: grid; place-items: center; background: var(--accent); color: #fff; transition: background .2s var(--ease); }
.ft-big__sq .ic { width: 22px; height: 22px; margin-left: 3px; }
.ft-big__lbl { display: grid; align-content: center; gap: 6px; padding: 0 20px 0 16px; background: #ffffff; border: 1px solid #dcdcdc; border-left: 0; text-align: left; }
.ft-big__lbl b { font: 500 15px/1 var(--f-body); color: #111111; letter-spacing: -0.01em; white-space: nowrap; }
.ft-big__lbl span { font: 400 11px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #6f6f6f; white-space: nowrap; }
.ft-big:hover .ft-big__sq, .ft-big:focus-visible .ft-big__sq { background: color-mix(in srgb, var(--accent) 86%, #000); }
.ft-big:hover { transform: translate(-50%, -50%) translateY(-2px); }
.ft-panel.is-playing .ft-big, .ft-panel.is-started:not(.is-ended):not(.is-error) .ft-big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.96); }
.ft-buffer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); background-size: 40% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity .2s var(--ease); }
.ft-panel.is-waiting .ft-buffer { opacity: 1; animation: ftbuf 1s linear infinite; }
@keyframes ftbuf { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* controls bar */
.ft-ctrl { display: flex; align-items: stretch; height: 48px; margin-top: -1px; background: var(--bg); border: 1px solid var(--line); }
.ft-btn { flex: none; width: 48px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--fg-2); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.ft-btn:last-child { border-right: 0; border-left: 1px solid var(--line); }
.ft-btn#ftMute { border-right: 0; border-left: 1px solid var(--line); }
.ft-btn:hover { background: var(--surface); color: var(--fg); }
.ft-btn .ic { width: 18px; height: 18px; }
.ft-btn--play { color: var(--fg); }
.ft-i-pause, .ft-panel.is-playing .ft-i-play { display: none; }
.ft-panel.is-playing .ft-i-pause { display: block; }
.ft-i-mute, .ft-panel.is-muted .ft-i-vol { display: none; }
.ft-panel.is-muted .ft-i-mute { display: block; }
.ft-time { flex: none; display: flex; align-items: center; padding: 0 16px; font: 400 12px/1 var(--f-mono); color: var(--fg); white-space: nowrap; }
.ft-time i { font-style: normal; color: var(--mist); margin-left: 6px; }
.ft-prog { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 16px 0 4px; cursor: pointer; outline: none; touch-action: none; }
.ft-prog:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-line); }
.ft-segs { position: relative; display: flex; gap: 3px; width: 100%; height: 22px; align-items: center; }
.ft-seg { position: relative; height: 4px; background: var(--line); overflow: hidden; transition: height .2s var(--ease-out); }
.ft-prog:hover .ft-seg, .ft-prog.is-drag .ft-seg { height: 7px; }
.ft-seg i { position: absolute; inset: 0; background: var(--accent-line); transform-origin: left; transform: scaleX(0); }
.ft-seg.is-cur { background: var(--line-strong); }
.ft-head-x { position: absolute; top: 50%; width: 2px; height: 14px; margin-top: -7px; background: var(--fg); pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.ft-panel.is-started .ft-head-x { opacity: 1; }
.ft-tip { position: absolute; bottom: calc(100% + 6px); left: 0; padding: 6px 9px; background: var(--fg); color: var(--bg); font: 500 11px/1 var(--f-mono); letter-spacing: 0.03em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s var(--ease), transform .2s var(--ease-out); z-index: 4; }
.ft-tip.on { opacity: 1; transform: none; }

/* chapter rail */
.ft-side { display: flex; flex-direction: column; min-width: 0; }
.ft-side__head { display: flex; justify-content: space-between; align-items: center; height: 36px; border-bottom: 1px solid var(--line); }
.ft-side__hint { color: var(--line-strong); }
.ft-chapters { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; grid-auto-rows: 1fr; }
.ft-chapters li { border-bottom: 1px solid var(--line); }
.ft-chapters button { position: relative; width: 100%; height: 100%; min-height: 50px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 2px 0 14px; background: transparent; border: 0; text-align: left; cursor: pointer; color: var(--mist); transition: color .2s var(--ease), background .2s var(--ease), padding .3s var(--ease-out); }
.ft-chapters button::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--accent-line); transform: scaleY(0); transition: transform .3s var(--ease-out); }
.ft-chapters button:hover { color: var(--fg); background: var(--bg); }
.ft-ch__n { font: 500 11px/1 var(--f-mono); letter-spacing: 0.06em; color: var(--line-strong); transition: color .2s var(--ease); }
.ft-ch__t { font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-ch__s { font: 400 11px/1 var(--f-mono); color: var(--mist); }
.ft-ch__f { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent-line); transform-origin: left; transform: scaleX(0); }
.ft-chapters button.is-cur { color: var(--fg); background: var(--bg); padding-left: 18px; }
.ft-chapters button.is-cur::before { transform: scaleY(1); }
.ft-chapters button.is-cur .ft-ch__n { color: var(--accent-text); }

/* fullscreen */
.ft-video:fullscreen { aspect-ratio: auto; border: 0; background: #000; }
.ft-video:fullscreen video { object-fit: contain; background: #000; }
.ft-video:-webkit-full-screen { aspect-ratio: auto; border: 0; background: #000; }
.ft-video:-webkit-full-screen video { object-fit: contain; background: #000; }

@media (max-width: 1100px) {
  .ft-body { grid-template-columns: minmax(0, 1fr); }
  .ft-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 24px; }
  .ft-side__head { margin-top: 4px; }
}
@media (max-width: 700px) {
  .ft-head { margin-bottom: 32px; }
  .ft-body { padding: 16px; gap: 24px; }
  .ft-bar__file { display: none; }
  .ft-chapters { grid-template-columns: minmax(0, 1fr); }
  .ft-chapters button { min-height: 46px; }
  .ft-time { padding: 0 10px; font-size: 11px; }
  .ft-time i { display: none; }
  .ft-btn { width: 44px; }
  .ft-big__sq { width: 54px; height: 54px; }
  .ft-big__lbl { padding: 0 14px 0 12px; }
  .ft-big__lbl b { font-size: 14px; }
}
.ft-panel.is-ended .ft-big { top: 86%; }
.ft-panel.is-ended .ft-video.is-45 .ft-big { top: 84%; }