.work_page {
    display: flex;
    justify-content: center;

    padding: 40px 20px;
}

.work_page .work_modal_content {
    width: min(
        1200px,
        calc(100vw - 40px)
    );

    aspect-ratio: 4 / 3;
}


/* =====================================
作品播放器彈窗
===================================== */

#work_modal_mount {
    position: relative;
    z-index: 1;
}



.work_modal_shell {
    width: min(1100px, 90vw);
    min-height: 400px;
    background: white;
}
.work_modal {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.work_modal.is_open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.work_modal_backdrop {
    position: absolute;
    inset: 0;

    background: rgb(0 0 0 / 78%);
    backdrop-filter: blur(6px);
}

.work_modal .work_modal_content {
    position: relative;
    z-index: 1;

    /*
     * 固定整個彈窗比例。
     *
     * 1200px：一般最大寬度
     * 100vw - 40px：不能超出左右空間
     * (100vh - 40px) * 4 / 3：
     * 高度不足時，依 4:3 比例反推最大寬度
     */
    width: min(
        1200px,
        calc(100vw - 40px),
        calc((100vh - 40px) * 4 / 3)
    );

    aspect-ratio: 4 / 3;

    padding: 28px;

    overflow: hidden;

    border: 1px solid #252525;
    border-radius: 20px;

    background: #151515;
    color: #ffffff;

    box-shadow:
        0 20px 80px
        rgb(0 0 0 / 55%);
}

/* 獨立作品頁 */

.work_page .work_modal_content {

    width: min(
        1200px,
        calc(100vw - 40px)
    );

    aspect-ratio: auto;

    overflow: visible;
}


/* =====================================
關閉按鈕
===================================== */

.work_modal_close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #ffffff;

    font-size: 28px;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.work_modal_close:hover {
    background: #73b68f;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}



/* =====================================
左右主版面
===================================== */

.work_modal_layout {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(260px, 0.95fr);
    gap: clamp(16px, 2.4vw, 30px);

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}

.work_page .work_modal_layout {
    padding-top: var(--space-lg);
}


/* =====================================
左側主內容
===================================== */

.work_modal_main {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;
    
    
    overflow: hidden;
}


/* =====================================
YouTube 播放器
===================================== */

.work_modal_player {
    flex: 0 0 auto;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 14px;
    background: #252525;
}

.work_modal_player iframe {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =====================================
作品資訊
===================================== */

.work_modal_info {
    flex: 1 1 auto;

    min-height: 0;

    padding: 22px 0 18px;

    overflow-y: auto;
    overscroll-behavior: contain;
}

.work_modal_info h2 {
    margin:
        0
        0
        clamp(8px, 1.4vh, 14px);

    font-size: clamp(
        20px,
        3.2vmin,
        38px
    );

    line-height: 1.2;
}

.work_modal_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 16px;
}

.work_tag {
    display: inline-flex;
    align-items: center;

    padding: 6px 11px;

    border: 1px solid #73b68f;
    border-radius: 999px;

    color: #9fd8b7;

    font-size: 14px;
    line-height: 1;
}

.work_modal_description {
    margin: 0;

    color: #d0d0d0;
    line-height: 1.8;
    
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    font-size: clamp(
        13px,
        1.75vmin,
        16px
    );
    /*
     * 最多四行高度。
     * 內容不足時依實際高度顯示，
     * 超過後則在這個區塊內捲動。
     */
    max-height: calc(1.8em * 4);
    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

}


/* =====================================
上一部／下一部導覽
===================================== */

.work_modal_navigation {
    flex: 0 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 16px;

    width: 100%;

    padding-top: 18px;
    border-top: 1px solid #303030;
}

.work_modal_navigation button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /*
     * 上一部、下一部完全等寬。
     */
    width: 100%;
    min-width: 0;
    height: 48px;

    padding: 0 18px;

    border: 1px solid #73b68f;
    border-radius: 9px;

    background: transparent;
    color: #ffffff;

    font: inherit;
    cursor: pointer;
    font-size: clamp(
        11px,
        1.7vmin,
        16px
    );

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}

.work_modal_navigation button:hover:not(:disabled) {
    background: #73b68f;
}

.work_modal_navigation button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.work_modal_position {
    min-width: 70px;

    color: #cfcfcf;
    text-align: center;
    white-space: nowrap;
}


/* =====================================
獨立作品頁的返回按鈕
===================================== */



.work_page_back {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 48px;

    padding: 0 18px;

    border: 1px solid #73b68f;
    border-radius: 9px;

    color: #ffffff;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.work_page_back:hover {
    background: #73b68f;
}


/* =====================================
右側歌詞欄
===================================== */

.work_modal_lyrics {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border: 1px solid #373737;
    border-radius: 14px;

    background: #101010;
}


.work_page .work_modal_lyrics { 

    max-height: calc(100vh - 40px - 28px * 2);

    overflow:visible;

}
/* =====================================
歌詞標題
===================================== */

.work_modal_lyrics > h2,
.work_modal_lyrics > h3 {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;

    margin: 0;
    padding: 22px 20px 16px;

    border-bottom: 1px solid #373737;
    background: #101010;

    font-size: 18px;
    line-height: 1.4;
}


/* =====================================
歌詞內容
===================================== */

.work_modal_lyrics_content {
    flex: 1 1 auto;

    min-height: 0;

    padding: 20px;

    overflow-y: auto;
    overflow-x: hidden;

    color: #eeeeee;
    line-height: 2;
    white-space: normal;
    overflow-wrap: anywhere;

    overscroll-behavior: contain;

    /*
     * 讓捲動到段落時不會貼著標題。
     */
    scroll-padding-top: 20px;
}


/* =====================================
彈窗開啟時禁止背景捲動
===================================== */

body.modal_open {
    overflow: hidden;
}


/* =====================================
手機版
===================================== */
/* =====================================
手機版，以及極端寬矮視窗
===================================== */

@media
    (max-width: 800px),
    (max-height: 650px) and (min-aspect-ratio: 16 / 9)
{
    .work_modal {
        align-items: center;
        justify-content: center;

        padding: 10px;
    }

    .work_modal_content {
        width: min(
            760px,
            calc(100vw - 20px)
        );

        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);

        aspect-ratio: auto;

        padding: clamp(
            14px,
            2.4vmin,
            20px
        );

        border-radius: 16px;
    }

    .work_modal_layout {
        display: grid;

        /*
         * 矮視窗時改成單欄，
         * 整個彈窗內部統一捲動。
         */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        gap: 18px;

        width: 100%;
        height: 100%;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;
    }

    .work_modal_main {
        display: flex;
        flex-direction: column;

        min-width: 0;
        min-height: auto;

        overflow: visible;
    }

    .work_page .work_modal_layout {

        min-height: none;

        overflow: visible;
    }

    .work_modal_player {
        width: min(
            100%,
            620px
        );

        margin-inline: auto;

        aspect-ratio: 16 / 9;
    }

    .work_modal_info {
        flex: none;

        min-height: auto;

        padding:
            14px
            0
            12px;

        /*
         * 單欄模式由外層統一捲動，
         * 不再產生第二條捲軸。
         */
        overflow: visible;
    }

    .work_modal_info h2 {
        margin:
            0
            0
            10px;

        font-size: clamp(
            20px,
            4vmin,
            30px
        );
    }

    .work_modal_description {
        /*
         * 仍限制為四行高度，
         * 超出的完整資訊欄可在此捲動。
         */
        max-height: calc(1.8em * 4);

        overflow-y: auto;
        overflow-x: hidden;
    }

    .work_modal_navigation {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 10px;

        padding-top: 12px;
    }

    .work_modal_position {
        grid-column: 1 / -1;
        grid-row: 1;

        padding-bottom: 2px;
    }

    .work_modal_previous {
        grid-column: 1;
        grid-row: 2;
    }

    .work_modal_next {
        grid-column: 2;
        grid-row: 2;
    }

    .work_modal_navigation button {
        height: 42px;

        padding-inline: 10px;

        font-size: clamp(
            13px,
            2.2vmin,
            15px
        );
    }

    .work_modal_lyrics {
        /*
         * 單欄時歌詞放在下方，
         * 保留自己的閱讀捲動區。
         */
        flex: none;

        width: 100%;
        height: min(55vh, 460px);
        min-height: 260px;
    }

    .work_page .work_modal_lyrics {
        height: 100%;
        min-height: 260px;

        overflow: visible;
    }

    .work_modal_close {
        top: 8px;
        right: 10px;

        width: 38px;
        height: 38px;

        font-size: 24px;
    }
}






@media (max-width: 800px) {
    .work_player {
        grid-template-columns: 1fr;
    }

}