/* ============================================================
   components.css — 元件層（design system 的「合約」之二）
   載入順序固定：style.css → theme.css → components.css
                → layout-chrome.css → 頁面 CSS（pages/*.css）

   規則：
   1. 本檔是各共用元件的「權威預設值」。頁面 CSS 載入較晚，
      既有頁面的在地覆寫不受影響（視覺零變更）；新頁面直接
      使用這些 class 即得到預設外觀。
   2. 換皮（reskin）時，設計交付可覆寫本檔與 theme.css，
      不可改 class 名（合約凍結，見 docs/DESIGN_GUIDE.md）。
   3. 按鈕家族的 base（.btn）與 .btn--brown、.btn-submit，以及
      .modal-content/.modal-close-btn 的權威定義在 style.css，不在此重複。
      ⚠ 2026-07-16 更正：本註解原本宣稱 .btn--grey/.btn--green/.btn--red 的
      權威定義也在 style.css——實查 style.css 只有 .btn/.btn:hover/.btn--brown。
      那三個只定義在 admin.css，而 admin.html 是自己一份 head、不 extends base.html，
      前台頁載不到 admin.css、後台也載不到本檔。前台若要用其中任何一個，
      權威定義必須放在本檔（見下方 .btn--grey）。
   ============================================================ */

/* ---------- 次要動作按鈕（灰）---------- */
/* .btn 的 base（style.css）給 color:white、padding、radius，但**沒有 background**；
   底色由修飾 class 負責。前台唯一的灰鈕是 /profile 的登出（共用裝置上最需要看得見的出口）。

   ⚠ 刻意不用後台的 var(--secondary)：它只定義在 admin.css，前台頁載不到 →
   var() 取不到值會讓整個 linear-gradient 宣告無效 → 又落回 UA 淺灰底，
   而且「有宣告 background」這件事還會騙過只比對屬性名的護欄。
   （tests/test_borrowed_component_css_loaded.py 現在會解析 var() 是否在該頁定義得到。）

   淺端 --c-767676 是配白字仍達 WCAG AA 的最淺灰（實測 4.54:1）；後台 --secondary
   的 #8c8c8c 只有 3.36:1，過不了 AA。深端 --c-595959 為 7.0:1。
   使用者年齡偏高、以手機為主（PRODUCT.md），而這顆是共用裝置上最需要看得見的出口，
   故此處不與後台同色。 */
.btn--grey {
    background: linear-gradient(135deg, var(--c-767676), var(--c-595959));
}

/* ---------- Toast 通知 ---------- */
#toast-container,
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    width: 92%;
    max-width: 440px;
}

.toast {
    background: rgba(44, 36, 32, 0.94);
    color: var(--cream-panel, var(--white-warm));
    padding: 14px 20px;
    border-radius: var(--radius-sm, 10px);
    font-size: 1rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 48px var(--c-black-a25), 0 0 0 1px var(--gold-line, var(--gold-line));
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 表單群組 ---------- */
.form-group {
    margin-bottom: 18px;
}

.form-group > label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft, #584635);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

/* ---------- 彈窗本體（米白圓角面板） ---------- */
.modal-box {
    background: var(--white-warm, var(--white-warm));
    border-radius: var(--radius-lg, 24px);
    max-width: 460px;
    width: 100%;
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(42, 26, 10, 0.13));
}

/* ---------- 步驟卡文字 ---------- */
.step-title {
    color: var(--gold-rich, var(--gold-rich));
    font-weight: bold;
    font-size: 1.08rem;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.step-desc {
    color: var(--ink-soft, #584635);
    font-size: 0.92rem;
    line-height: 1.8;
}

/* ---------- LINE 綠鈕（T4-T5 綠金規則：全站「會開 LINE」的唯一元件） ----------
   用法：templates/_line_btn.html macro（含 LINE logo SVG＋連結來源邏輯），
   模板不要手刻 <a class="btn-line">。綠底白字＝LINE 官方品牌配置；
   觸控 ≥44px、圓角走 --radius-15（與站內按鈕家族同尺）。 */
.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 24px;
    background: var(--line-green);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-15);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-line:hover,
.btn-line:focus-visible {
    background: var(--line-green-deep);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-line:active {
    transform: translateY(1px);
}

.btn-line__icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .btn-line {
        transition: none;
    }
    .btn-line:hover,
    .btn-line:focus-visible,
    .btn-line:active {
        transform: none;
    }
}

/* ============================================================
   .visually-hidden：只給輔助技術讀、視覺上不佔位的內容（如 SEO/地標用 <h1>）。

   ⚠ 這條原本只定義在 pages/index.css，而 index.css 只有 index.html 會載
   （見 index.html 的 page_styles block）。所以在別頁寫 class="visually-hidden"
   完全沒有效果——文字會以 h1 原尺寸「直接顯示出來」。P1-15 要在 /profile、
   /committee、/shipclothes 補 <h1> 時踩到這點，故把權威定義搬來 components.css
   （base.html 全站載入），index.css 的複本已移除，維持單一真相。
   ============================================================ */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ============================================================
   .profile-card / .btn-save / .profile-form 表單欄位（P1-19）

   ⚠ 病灶同上面 .visually-hidden：這三者的權威定義原本只在 pages/profile.css，
   而 profile.css 只有 profile.html / slots.html 會載。但 /apply、/donate、
   /events、/lottery 也在用這些 class → 完全沒吃到樣式。實測（2026-07-15）：
     .profile-card  → background transparent、padding 0、border-style none，
                      但 style.css 的 `.profile-card { box-shadow !important }`
                      仍生效 → 「有陰影卻沒有卡片本體」，比全無樣式更怪。
     .btn-save      → 瀏覽器預設灰方塊 rgb(240,240,240) / border 2px outset；
                      /events 的 <a class="btn-save"> 更慘＝預設藍色連結 #0000ee。
     .profile-form 內的 input → 完全未套用（padding 1px 2px、border inset 灰）。

   故照 .visually-hidden 前例，把權威預設值搬來 components.css（base.html 全站載入）。
   值＝逐條對齊 /profile 實測 computed style，確保四頁與 /profile 一致。

   ⚠ pages/profile.css 的複本「刻意保留」（與 .visually-hidden 不同）：
   profile.css 載入較晚會原樣覆寫這些宣告 → /profile 與 /slots computed style
   零變更（已實測驗證）。不移除的原因＝profile.css 受 tests/
   test_profile_color_convergence.py 的色彩 multiset 快照與 color ratchet(26) 鎖住，
   移除等於同時動三個護欄；CSS 去重排在 P1-C/P2，屆時一併收斂為單一真相。

   ⚠ float：.btn-save 帶 float:right＝對齊 /profile，且 apply/donate/lottery 的
   送出鈕都包在 <div style="overflow:hidden">（BFC clearfix，只為了收 float 而存在）。
   /events 的 <a class="btn-save"> 是整寬 block CTA，不能浮動 → 該處行內 float:none。
   ============================================================ */
.profile-card {
    background: var(--c-fffcf5);
    border: 1px solid var(--line-brand);
    border-radius: var(--radius-15);
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
}
.profile-card h3.card-title {
    color: var(--brand);
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--c-e6ba67);
    padding-bottom: 10px;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-save {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 52%, var(--gold-rich) 100%);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: var(--radius-25);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    float: right;
    box-shadow: 0 10px 24px var(--c-143-97-40-a18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px var(--c-143-97-40-a22);
}
.btn-save:active { transform: scale(0.97); }

/* 表單欄位刻意用 .profile-form 收斂 scope：.form-group 另有 donation/fund/shop/
   styleguide 在用，若直接寫 `.form-group input` 會連帶改到那四頁（未在本刀驗證範圍）。 */
.profile-form .form-group input,
.profile-form .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--c-ccc);
    border-radius: var(--radius-6);
    box-sizing: border-box;
    font-size: 0.9375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.profile-form .form-group input:focus,
.profile-form .form-group select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--c-196-137-69-a18);
}

/* ============================================================
   .page-panel — 內容頁共用面板（K4-1；faq/news/calendar/fahui/origin）

   五個內容頁原本各自把同一份 wrapper 配方逐字複製一遍（外距/背景/邊框/圓角/陰影
   完全相同，只有 max-width 與 padding 因頁而異，且 max-width 漂成 760/860/920/960/960）。
   此處收斂成「單一權威定義」：共用值放這裡，每頁差異值走兩個變數——
     --page-panel-max：面板最大寬（各頁 CSS 設定，值＝各頁原本的寬，零外觀變更）
     --page-panel-pad：面板內距（各頁 CSS 設定，含各自的 RWD 覆寫）
   模板端沿用既有 .faq-page/.news-page/.calendar-page/.fahui-page/.origin-page（不改
   HTML 結構、不改 class 名），一併掛進本規則吃到共用配方；新內容頁可直接用 .page-panel。
   改面板外觀（換皮）＝改這一處、五頁同步。tests/test_content_pages_shared_panel.py 守
   「背景/邊框/圓角/陰影 來自本檔、不得被各頁 CSS 各自重寫」。
   ============================================================ */
.page-panel,
.faq-page,
.news-page,
.calendar-page,
.fahui-page,
.origin-page {
    box-sizing: border-box;
    max-width: var(--page-panel-max, 960px);
    margin: 24px auto 48px;
    padding: var(--page-panel-pad, 48px 32px 72px);
    color: var(--ink-site);
    background: var(--white-warm);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ---------- 內容頁小標籤 kicker（K4-3；faq／origin 逐字重複的同一配方）----------
   金色小字、寬字距，壓在大標之上。原本 faq.css 與 origin.css 各寫一份完全相同的宣告。
   收斂為單一 .page-kicker；模板沿用既有 .faq-kicker／.origin-kicker（不改結構）一併掛入。
   新內容頁用 .page-kicker 即得同一外觀。 */
.page-kicker,
.faq-kicker,
.origin-kicker {
    margin: 0 0 8px;
    color: var(--gold-rich);
    font-size: 0.8rem;
    letter-spacing: 0.35em;
}

/* ============================================================
   ⚠ 已盤點但「暫不啟用」權威定義的 class（啟用會改變現有頁面）：
   - .modal-overlay：shop.html 有使用但 shop.css 無定義（靠行內樣式），
     啟用前需先把 shop 的彈窗改為標準結構。
   - .form-control：profile.html 有使用但 profile.css 無定義，
     啟用前需確認 profile 表單外觀。
   接手者啟用時：取消註解＋逐頁截圖比對 shop 與 profile。
   ============================================================ */