/* =========================================
   創書閣樓：作品列表頁
========================================= */


/* =========================================
   整體頁面
========================================= */

.draft-library-page {
    min-height: calc(100svh - 72px);

    padding:
        22px
        0
        28px;

    overflow-x: hidden;

    background-color:
        var(--bg-lightbrown);

    color:
        var(--text-darkbrown);
}


/* =========================================
   系列
========================================= */

.draft-library-series {
    width: 100%;
}


.draft-library-series-header {
    width:
        min(1280px, calc(100% - 48px));

    margin:
        0
        auto
        6px;
}


.draft-library-series-title {
    margin: 0;

    color:
        var(--title-darkbrown);

    font-size:
        clamp(1.25rem, 2vw, 1.55rem);

    line-height: 1.5;
    letter-spacing: 0.08em;

    font-weight: 500;
}


/* =========================================
   Carousel
========================================= */

.draft-library-shelf {
    width: 100%;

    display: flex;
    align-items: center;

    gap:
        clamp(20px, 3vw, 38px);

    /*
       左右留出足夠空間，
       第一張與最後一張也能移到中央。
    */
    padding:
        14px
        40vw
        14px;

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x mandatory;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    cursor: grab;

    user-select: none;

    /*
       手機仍可正常上下捲動頁面，
       左右手勢交給 Carousel。
    */
    touch-action: pan-y;

    scrollbar-width: none;
}


.draft-library-shelf::-webkit-scrollbar {
    display: none;
}


/* 正在拖曳 */

.draft-library-shelf.is-dragging {
    cursor: grabbing;

    scroll-snap-type: none;
}


/* =========================================
   每一本作品
========================================= */

.draft-library-card {
    /*
       基本值。
       桌機、手機下面還會再依尺寸覆寫。
    */
    flex:
        0
        0
        clamp(190px, 32vh, 300px);

    scroll-snap-align: center;

    display: block;

    /*
       JS 會依照卡片與中央的距離，
       自動修改這兩個變數。
    */
    --draft-card-scale: 0.82;
    --draft-card-opacity: 0.72;

    transform:
        scale(var(--draft-card-scale));

    transform-origin:
        center center;

    opacity:
        var(--draft-card-opacity);

    color:
        var(--text-darkbrown);

    cursor: pointer;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}


/* 中央選中的作品 */

.draft-library-card.is-selected {
    --draft-card-scale: 1;
    --draft-card-opacity: 1;
}


/* =========================================
   書封
========================================= */

.draft-library-cover {
    position: relative;

    width: 100%;

    aspect-ratio:
        2 / 3;

    overflow: hidden;

    background-color:
        var(--bg-card-lightbrown);

    border:
        2px solid
        var(--title-darkbrown);

    transition:
        border-color 0.25s ease;
}


/* 測試用假書封 */

.draft-library-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 10px;

    padding: 20px;

    color:
        var(--title-darkbrown);

    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.06em;

    font-weight: 500;

    text-align: center;
}


/* =========================================
   主推標示
========================================= */

.draft-library-featured-label {
    color:
        var(--selected-darkgreen);

    font-size: 0.84rem;
    letter-spacing: 0.12em;
}


/* =========================================
   書名
========================================= */

.draft-library-title {
    min-height: 52px;

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

    margin: 0;

    padding:
        9px
        8px;

    background-color:
        var(--bg-lightbrown);

    border:
        2px solid
        var(--title-darkbrown);

    border-top: none;

    color:
        var(--title-darkbrown);

    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.08em;

    font-weight: 500;

    text-align: center;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


/* 中央作品 */

.draft-library-card.is-selected
.draft-library-cover,
.draft-library-card.is-selected
.draft-library-title {
    border-color:
        var(--selected-darkgreen);
}


.draft-library-card.is-selected
.draft-library-title {
    color:
        var(--selected-darkgreen);
}


/* =========================================
   尚未公開
========================================= */

.draft-library-card--locked
.draft-library-cover {
    background-color:
        rgba(58, 51, 43, 0.12);

    /*
       下方仍保留書名高度，
       但視覺上和封面連成一張牌。
    */
    border-bottom: none;
}


.draft-library-title--locked {
    color: transparent;

    background-color:
        rgba(58, 51, 43, 0.12);

    border-top: none;
}


.draft-library-lock-mark {
    color:
        rgba(58, 51, 43, 0.38);

    font-size: 1.8rem;
    line-height: 1;
}


/* =========================================
   開始閱讀
========================================= */

.draft-library-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 24px;

    padding:
        0
        20px
        12px;
}


.draft-library-read-button {
    min-width: 150px;
    min-height: 44px;

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

    padding:
        9px
        24px;

    background-color:
        var(--bg-darkbrown);

    border:
        1px solid
        var(--bg-darkbrown);

    color:
        var(--text-lightbrown);

    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease;
}


.draft-library-read-button:hover:not(:disabled) {
    background-color:
        var(--selected-darkgreen);

    border-color:
        var(--selected-darkgreen);
}


/* 尚未公開作品 */

.draft-library-read-button.is-disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}


/* =========================================
   桌機版
   851px 以上

   依照視窗高度放大作品卡。
========================================= */

@media (min-width: 851px) {

    .draft-library-card {
        flex-basis:
            clamp(
                240px,
                calc(66.667svh - 205px),
                350px
            );
    }

}


/* =========================================
   850px 以下
========================================= */

@media (max-width: 850px) {

    .draft-library-page {
        padding-top: 18px;
    }


    .draft-library-series-header {
        width:
            calc(100% - 32px);
    }


    .draft-library-card {
        flex-basis:
            clamp(190px, 36vh, 285px);
    }


    .draft-library-shelf {
        gap: 20px;

        padding-top: 14px;
        padding-bottom: 14px;
    }

}


/* =========================================
   600px 以下
========================================= */

@media (max-width: 600px) {

    .draft-library-series-header {
        width:
            calc(100% - 24px);
    }


    .draft-library-series-title {
        font-size: 1.15rem;
    }


    /*
       一般手機主要由螢幕寬度控制書封。
    */
    .draft-library-card {
        flex:
            0
            0
            min(70vw, 230px);
    }


    .draft-library-shelf {
        gap: 16px;

        padding-left: 40vw;
        padding-right: 40vw;

        padding-top: 10px;
        padding-bottom: 10px;
    }


    .draft-library-title {
        min-height: 46px;

        font-size: 0.92rem;
    }



    /*
       手機版開始閱讀按鈕縮小。
    */
    .draft-library-read-button {
        min-width: 120px;
        min-height: 36px;

        padding:
            5px
            14px;

        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }

}


/* =========================================
   400px 以下
========================================= */

@media (max-width: 400px) {

    .draft-library-page {
        padding-top: 14px;
    }


    .draft-library-series-header {
        width:
            calc(100% - 20px);
    }


    .draft-library-card {
        flex-basis:
            min(72vw, 220px);
    }


    .draft-library-shelf {
        gap: 14px;

        padding-top: 8px;
        padding-bottom: 8px;
    }


    .draft-library-placeholder {
        padding: 14px;

        font-size: 0.9rem;
    }


    .draft-library-read-button {
        min-width: 112px;
        min-height: 34px;

        padding:
            4px
            12px;

        font-size: 0.76rem;
        letter-spacing: 0.07em;
    }

}


/* =========================================
   小手機 + 矮螢幕
   例如 320 × 568

   故意放在 400px 規則後面，
   確保矮手機的尺寸不會被蓋掉。
========================================= */

@media (max-width: 600px) and (max-height: 620px) {

    .draft-library-page {
        padding-top: 8px;
        padding-bottom: 6px;
    }


    .draft-library-series-header {
        margin-bottom: 0;
    }


    .draft-library-card {
        flex:
            0
            0
            min(60vw, 190px);
    }


    .draft-library-shelf {
        padding-top: 4px;
        padding-bottom: 4px;
    }


 


    .draft-library-read-button {
        min-width: 108px;
        min-height: 32px;

        padding:
            4px
            10px;

        font-size: 0.74rem;
        letter-spacing: 0.06em;
    }

}


/* =========================================
   高手機
   例如 390 × 844

   一般手機的 230px 上限會讓高螢幕
   下方留下太多空間，因此允許卡片放大。
========================================= */

@media (max-width: 600px) and (min-height: 700px) {

    .draft-library-card {
        flex:
            0
            0
            min(76vw, 300px);
    }

}


/* =========================================
   高平板
   例如 768 × 1024

   850px 規則原本最高只有 285px，
   對高平板而言太小，因此另外放寬。
========================================= */

@media
    (min-width: 601px)
    and (max-width: 850px)
    and (min-height: 900px) {

    .draft-library-card {
        flex-basis:
            min(52vw, 400px);
    }

}



/* =========================================
   創書閣樓：單一作品頁
   例如《蓬萊》
========================================= */


/* =========================================
   整體頁面
========================================= */

.draft-page {
    min-height:
        calc(100svh - 72px);

    padding:
        clamp(24px, 3vw, 40px)
        0
        clamp(72px, 8vw, 110px);

    background-color:
        var(--bg-lightbrown);

    color:
        var(--text-darkbrown);
}


/* =========================================
   整體版面
========================================= */

.draft-shell {
    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin:
        0
        auto;
}


.draft-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        clamp(240px, 22vw, 300px);

    gap:
        clamp(20px, 2.2vw, 30px);

    align-items: start;

    /*
       Banner 與右側作者卡
       使用相同高度。
    */
    --draft-hero-height:
        clamp(220px, 22vw, 320px);
}


.draft-current-work {
    min-width: 0;
}


/* =========================================
   作品 Banner
========================================= */

.draft-hero {
    width: 100%;
    height:
        var(--draft-hero-height);

    margin: 0;

    overflow: hidden;

    background-color:
        var(--bg-card-lightbrown);

    border:
        1px solid
        rgba(58, 51, 43, 0.2);
}


.draft-hero img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================
   書名與作者署名
========================================= */

.draft-work-header {
    padding-top: 20px;
}


.draft-title-row {
    display: flex;

    align-items: flex-end;
    justify-content: center;
}


.draft-work-title {
    margin: 0;

    color:
        var(--title-darkbrown);

    font-family:
        var(--font-title);

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height: 1.3;
    letter-spacing: 0.18em;

    font-weight: 400;

    text-align: center;
}


/*
   桌機已有右側作者卡，
   因此不重複顯示作者名稱。
*/

.draft-mobile-author {
    display: none;
}


/* =========================================
   作品標籤
========================================= */

.draft-tag-list {
    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    margin:
        20px
        0
        0;

    padding: 0;

    list-style: none;
}


.draft-tag {
    display: inline-flex;

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

    min-height: 32px;

    padding:
        5px
        12px;

    background-color:
        transparent;

    border:
        1px solid
        rgba(58, 51, 43, 0.34);

    color:
        var(--text-darkbrown);

    font-size: 0.82rem;
    line-height: 1.4;
    letter-spacing: 0.06em;
}


/* =========================================
   簡介｜目錄｜留言｜筆記
========================================= */

.draft-tabs {
    display: flex;

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

    margin-top:
        clamp(28px, 4vw, 42px);

    padding-bottom: 12px;

    border-bottom:
        1px solid
        rgba(58, 51, 43, 0.18);

    white-space: nowrap;
}


.draft-tab {
    appearance: none;

    margin: 0;

    padding:
        6px
        4px
        8px;

    background-color:
        transparent;

    border: none;

    border-bottom:
        1px solid transparent;

    color:
        var(--text-darkbrown);

    font-family: inherit;

    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.1em;

    cursor: pointer;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.draft-tab:hover {
    color:
        var(--selected-darkgreen);
}


.draft-tab.is-active {
    color:
        var(--selected-darkgreen);

    border-bottom-color:
        var(--selected-darkgreen);
}


.draft-tab:focus-visible {
    outline:
        2px solid
        var(--selected-darkgreen);

    outline-offset: 3px;
}


.draft-tab-separator {
    margin:
        0
        8px;

    color:
        rgba(70, 63, 55, 0.4);

    font-size: 0.85rem;
    line-height: 1;
}


/* =========================================
   分頁內容共通區
========================================= */

.draft-panels {
    padding-top:
        clamp(32px, 5vw, 52px);
}


.draft-panel {
    width:
        min(100%, 860px);

    min-height: 260px;

    margin:
        0
        auto;
}


.draft-panel[hidden] {
    display: none;
}


/* =========================================
   簡介
========================================= */

.draft-prose {
    color:
        var(--text-darkbrown);

    font-size:
        clamp(1rem, 1.15vw, 1.06rem);

    line-height: 2.05;
    letter-spacing: 0.04em;
}


.draft-prose p {
    margin:
        0
        0
        1.6em;
}


.draft-prose p:last-child {
    margin-bottom: 0;
}


/* =========================================
   目錄
========================================= */

.draft-chapter-list {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top:
        1px solid
        rgba(58, 51, 43, 0.18);
}


.draft-chapter-item {
    border-bottom:
        1px solid
        rgba(58, 51, 43, 0.18);
}


.draft-chapter-item a,
.draft-chapter-row {
    display: grid;

    grid-template-columns:
        56px
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: center;

    min-height: 70px;

    padding:
        18px
        4px;

    color:
        var(--text-darkbrown);
}


.draft-chapter-item a {
    transition:
        background-color 0.25s ease;
}


.draft-chapter-item a:hover {
    background-color:
        rgba(226, 235, 214, 0.5);
}


.draft-chapter-number {
    color:
        var(--selected-darkgreen);

    font-size: 0.84rem;
    letter-spacing: 0.12em;
}


.draft-chapter-name {
    color:
        var(--title-darkbrown);

    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.05em;
}


.draft-chapter-date {
    color:
        rgba(70, 63, 55, 0.58);

    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.04em;

    white-space: nowrap;
}


.draft-chapter-item.is-unavailable {
    opacity: 0.62;
}


/* =========================================
   創作筆記
========================================= */

.draft-note {
    padding-left:
        clamp(18px, 3vw, 28px);

    border-left:
        2px solid
        rgba(53, 94, 59, 0.55);
}


.draft-note-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;
}


.draft-note-date {
    grid-column: 1;

    justify-self: start;

    color:
        var(--selected-darkgreen);

    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
}


.draft-note-title {
    grid-column: 2;

    justify-self: center;

    margin: 0;

    color:
        var(--title-darkbrown);

    font-size: 0.96rem;
    line-height: 1.6;
    letter-spacing: 0.08em;

    font-weight: 500;

    text-align: center;
}


.draft-note p {
    margin:
        0
        0
        1.1em;

    color:
        var(--text-darkbrown);

    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
}


.draft-note p:last-child {
    margin-bottom: 0;
}


/* =========================================
   右側欄
========================================= */

.draft-sidebar {
    min-width: 0;
}


/* =========================================
   作者資訊卡
========================================= */

.draft-author-card {
    height:
        var(--draft-hero-height);

    display: flex;
    flex-direction: column;

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

    padding:
        clamp(24px, 3vw, 34px);

    overflow: hidden;

    background-color:
        var(--bg-card-lightbrown);

    border:
        1px solid
        rgba(58, 51, 43, 0.2);
}


.draft-author-mark {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-bottom: 20px;

    overflow: hidden;

    border:
        1px solid
        rgba(58, 51, 43, 0.2);
}


.draft-author-mark img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.draft-author-kicker {
    margin:
        0
        0
        8px;

    color:
        var(--selected-darkgreen);

    font-size: 0.7rem;
    line-height: 1.4;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.draft-author-name {
    margin: 0;

    color:
        var(--title-darkbrown);

    font-family:
        var(--font-title);

    font-size:
        clamp(1.25rem, 2vw, 1.6rem);

    line-height: 1.5;
    letter-spacing: 0.1em;

    font-weight: 400;
}


.draft-author-description {
    margin:
        18px
        0
        0;

    color:
        rgba(70, 63, 55, 0.78);

    font-size:
        clamp(0.82rem, 1vw, 0.92rem);

    line-height: 1.85;
    letter-spacing: 0.04em;
}


/* =========================================
   已完結作品
========================================= */

.draft-archive {
    margin-top:
        clamp(28px, 3vw, 38px);
}


.draft-archive[hidden] {
    display: none;
}


.draft-archive-title {
    margin:
        0
        0
        16px;

    color:
        var(--title-darkbrown);

    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.12em;

    font-weight: 400;
}


.draft-archive-list {
    display: grid;

    gap: 14px;
}


.draft-archive-card {
    position: relative;

    display: flex;

    align-items: flex-end;

    width: 100%;

    aspect-ratio:
        3 / 1;

    padding: 14px;

    overflow: hidden;

    background-color:
        var(--bg-darkbrown);

    border:
        1px solid
        rgba(58, 51, 43, 0.24);

    color:
        var(--text-lightbrown);
}


.draft-archive-card::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(24, 21, 18, 0.78),
            rgba(24, 21, 18, 0.08)
        );
}


.draft-archive-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.draft-archive-card:hover img {
    transform:
        scale(1.03);
}


.draft-archive-status,
.draft-archive-name {
    position: relative;

    z-index: 2;
}


.draft-archive-status {
    margin-right: 10px;

    font-size: 0.66rem;
    letter-spacing: 0.1em;
}


.draft-archive-name {
    font-size: 0.92rem;
    letter-spacing: 0.08em;
}


/* =========================================
   850px 以下
   手機與窄版
========================================= */

@media (max-width: 850px) {

    .draft-page {
        padding-top: 20px;
        padding-bottom: 72px;
    }


    .draft-shell {
        width:
            min(
                720px,
                calc(100% - 32px)
            );
    }


    .draft-layout {
        display: block;
    }


    /*
       窄版不顯示右側作者卡。
       作者改放在作品名稱旁。
    */
    .draft-sidebar {
        display: none;
    }


    .draft-hero {
        height: auto;

        aspect-ratio:
            16 / 7;
    }


    .draft-work-header {
        padding-top: 16px;
    }


    /*
       左空白｜中央書名｜右作者
       保持書名真正置中。
    */
    .draft-title-row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: end;
    }


    .draft-work-title {
        grid-column: 2;

        font-size:
            clamp(1.8rem, 7vw, 2.6rem);
    }


    .draft-mobile-author {
        display: block;

        grid-column: 3;

        justify-self: end;

        margin:
            0
            0
            5px
            12px;

        color:
            rgba(70, 63, 55, 0.68);

        font-size: 0.72rem;
        line-height: 1.4;
        letter-spacing: 0.05em;

        white-space: nowrap;
    }


    .draft-tag-list {
        margin-top: 18px;
    }


    .draft-tabs {
        margin-top: 28px;
    }


    .draft-panels {
        padding-top: 32px;
    }


    .draft-panel {
        min-height: 220px;
    }

}


/* =========================================
   600px 以下
========================================= */

@media (max-width: 600px) {

    .draft-shell {
        width:
            calc(100% - 24px);
    }


    .draft-tag-list {
        gap: 8px;
    }


    .draft-tag {
        min-height: 30px;

        padding:
            4px
            9px;

        font-size: 0.76rem;
    }


    .draft-tab {
        padding-left: 2px;
        padding-right: 2px;

        font-size: 0.82rem;
        letter-spacing: 0.06em;
    }


    .draft-tab-separator {
        margin:
            0
            5px;

        font-size: 0.78rem;
    }


    .draft-chapter-item a,
    .draft-chapter-row {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            16px
            2px;
    }


    .draft-chapter-date {
        grid-column: 2;

        justify-self: start;
    }

}


/* =========================================
   400px 以下
========================================= */

@media (max-width: 400px) {

    /*
       螢幕太窄時，
       書名與作者改成上下排列。
    */
    .draft-title-row {
        grid-template-columns: 1fr;

        row-gap: 6px;
    }


    .draft-work-title {
        grid-column: 1;

        justify-self: center;

        font-size:
            clamp(1.7rem, 9vw, 2.2rem);
    }


    .draft-mobile-author {
        grid-column: 1;

        justify-self: end;

        margin: 0;
    }


    .draft-note-header {
        grid-template-columns: 1fr;

        row-gap: 8px;
    }


    .draft-note-date {
        grid-column: 1;

        justify-self: start;
    }


    .draft-note-title {
        grid-column: 1;

        justify-self: center;
    }

}