/* 配信画像・CSS・JSは各バリエーションに実ファイルを持ちます。 */
.button.storyboard-link { background: #f4f3f0; border-color: #d8d7d2; color: var(--ink); white-space: nowrap; }
.button.storyboard-link:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.episode-actions .button { white-space: nowrap; padding-inline: clamp(8px, 1.1vw, 19px); font-size: clamp(12px, 1.2vw, 16px); gap: 7px; }
.storyboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.storyboard-version { font-size: 14px; font-weight: 800; }
.storyboard-toolbar button { min-height: 44px; padding: 8px 20px; border: 1px solid #ccc; border-radius: 24px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; }
.storyboard-toolbar button:hover:not(:disabled) { border-color: var(--accent-dark); }
.storyboard-toolbar .storyboard-zoom { border-color: var(--accent-dark); color: var(--accent-dark); }
.storyboard-toolbar button:disabled { opacity: .45; cursor: wait; }
#storyboard-modal .modal-dialog { max-width: 1320px; width: calc(100% - 48px); margin: 24px auto; min-height: calc(100% - 48px); }
#storyboard-modal .modal-content { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; }
#storyboard-modal .modal-header, #storyboard-modal .modal-footer, .storyboard-toolbar { flex-shrink: 0; }
.storyboard-viewer { position: relative; height: min(67vh, 820px); min-height: 100px; overflow: auto; overscroll-behavior: contain; background: #eeede9; }
.storyboard-viewer:focus-visible { outline-offset: -4px; }
#storyboard-image { width: 100%; height: 100%; }
#storyboard-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
#storyboard-image img[hidden] { display: none; }
.storyboard-viewer.is-zoomed #storyboard-image { min-width: 1600px; height: auto; }
.storyboard-viewer.is-zoomed img { height: auto; }
.storyboard-status { position: absolute; inset: 0; display: grid; place-content: center; padding: 28px; text-align: center; font-size: 14px; }
.storyboard-status[hidden] { display: none; }
#storyboard-modal .modal-footer { padding-block: 12px; }
#storyboard-fallback { gap: 10px; }
#storyboard-fallback[hidden] { display: none; }

@media (max-width: 575.98px) {
    .episode-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
    .episode-actions .button { min-width: 0; min-height: 48px; padding-inline: 8px; font-size: 12px; gap: 5px; }
    .episode-actions .icon { width: 14px; height: 14px; }
    #storyboard-modal .modal-dialog { width: calc(100% - 16px); margin: 8px auto; min-height: calc(100% - 16px); }
    #storyboard-modal .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    #storyboard-modal .modal-title { font-size: 14px; }
    .storyboard-viewer:not(.is-zoomed) { height: min(67vh, calc((100vw - 16px) * .713)); }
    .storyboard-toolbar { padding: 10px 14px; gap: 8px; }
    .storyboard-toolbar button { font-size: 13px; padding-inline: 16px; }
    #storyboard-modal .modal-footer { gap: 3px; }
}