/* gbook.css — 留言板頁 */

.gbook-main {
    padding: var(--topbar-h) 0 60px;
}

.gbook-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== 页头 ===== */
.gbook-page-hd {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.gbook-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Layout ===== */
.gbook-layout {
    /* 對齊參考站量到的版位：主欄自適應＋固定 320px 側欄，欄距 50px */
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
    align-items: start;
}

/* ===== 留言列表 ===== */
.gbook-list-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* grid item 預設 min-width:auto，內容太寬時會撐開整條 grid 軌道，
       導致 .gbook-item 超出 .gbook-layout 寬度；需明確歸零才能正常收縮 */
    min-width: 0;
}

.gbook-list {
    /* 每則留言之間用 gap 分隔，不再靠 border-bottom 畫線 */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
}

.gbook-item {
    /* 頭像與內容並排；分隔改由 .gbook-list 的 gap 負責，這層不再有邊框與內距 */
    display: flex;
    gap: 16px;
}

.gbook-item:hover {
    background: var(--bg-elevated);
}

.gbook-item:last-child {
    border-bottom: none;
}

.gbook-avatar {
    width: 44px;
    height: 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
}

.gbook-body {
    /* 每則留言自成一張卡片（參考站的 .message-content）：獨立邊框、圓角、內距 */
    flex: 1;
    min-width: 0;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.gbook-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.gbook-uname {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.gbook-time {
    font-size: 12px;
    color: var(--text-3);
}

.gbook-content {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
    word-break: break-word;
}

.gbook-reply {
    /* 站方回覆：獨立區塊而非左側細線，圓角與內距對齊參考站的 .admin-reply */
    margin-top: 14px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.gbook-reply strong {
    color: var(--accent);
    white-space: nowrap;
}

.gbook-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gbook-empty iconify-icon {
    font-size: 40px;
    color: var(--text-3);
}

/* 分頁（沿用全站共用 widget/pagination 結構與 $__PAGING__，本頁改為圓形膠囊樣式） */
.gbook-list-wrap .pagination {
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    margin: 0;
}

.gbook-list-wrap .pg-btn,
.gbook-list-wrap .pg-num {
    border-radius: 50%;
    border: none;
    margin-left: 0;
    background: var(--bg-elevated);
    color: var(--text-2);
}

.gbook-list-wrap .pg-btn:hover,
.gbook-list-wrap .pg-num:hover {
    background: var(--accent);
    color: #fff;
}

.gbook-list-wrap .pg-num.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.gbook-list-wrap .pg-info {
    margin-left: auto;
}

/* ===== 留言表單 ===== */
.gbook-form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: calc(var(--topbar-h) + 12px);
    /* 跟 .gbook-list-wrap 同理：grid item 預設 min-width:auto 在窄寬度下可能被撐開 */
    min-width: 0;
}

.gbook-form-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.gbook-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gbook-textarea {
    width: 100%;
    min-height: 140px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-1);
    font-size: 15px;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}

.gbook-textarea:focus {
    border-color: var(--accent);
}

.gbook-remain {
    font-size: 12px;
    color: var(--text-3);
    text-align: right;
}

.gbook-remain em {
    color: var(--accent);
    font-style: normal;
}

.gbook-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gbook-verify-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: 13px;
    outline: none;
}

.gbook-verify-input:focus {
    border-color: var(--accent);
}

.gbook-captcha-img {
    height: 36px;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.gbook-submit-btn {
    /* 膠囊形提交鈕，對齊參考站的 .submit-btn */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: opacity .15s;
}

.gbook-submit-btn:hover {
    background: var(--accent-2-alt);
}

/* ===== RWD ===== */
@media (max-width: 900px) {
    .gbook-layout {
        grid-template-columns: 1fr;
    }

    .gbook-form-wrap {
        position: static;
    }
}

@media (max-width: 600px) {
    /* 手機版：留言項目跟留言表單左右內距對齊，維持一致的左右間隔 */
    .gbook-item {
        padding: 14px 16px;
        gap: 12px;
    }

    .gbook-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .gbook-form-wrap {
        padding: 16px;
    }

    .gbook-main {
        padding-bottom: 80px;
    }
}

/* ==========================================
   讓 .gbook-form-wrap 的 sticky 真的生效
   ========================================== */

/* main.css 在 html／body 設了 overflow-x: hidden（用途是擋掉 .mob-nav-drawer 被
   translateX 推到畫面外時多出來的橫向捲動空間）。CSS 規範規定兩軸不能一個 visible
   一個非 visible，所以 overflow-y 的計算值會被自動升級成 auto——實測線上頁面的
   html 與 body 都是 `hidden / auto`。這會讓 html／body 各自變成獨立的捲動容器，
   而不是由瀏覽器視窗直接管理捲動，sticky 因此吸附不住（規範 §17.26）。

   ⚠️ 規範 §17.26 寫的修法是「補上 overflow-y: visible」，那其實無效——
   只要 overflow-x 還是 hidden，明寫的 visible 一樣會被計算成 auto。
   必須兩軸都放開才行。

   這裡把規則寫在 gbook.css 而不是 main.css，是因為這支 CSS 只有留言板頁會載入，
   等於天然把影響範圍限縮在這一頁，不動到其他頁面的捲動結構。
   再限定桌機寬度：側邊表單的 sticky 只在桌機有意義，而抽屜選單也只在窄螢幕才會用到，
   兩者剛好不重疊，放開 overflow-x 不會讓窄螢幕冒出橫向捲動。 */
@media (min-width: 1200px) {
    html,
    body {
        overflow-x: visible;
        overflow-y: visible;
    }
}