/* ==========================================================================
   PJ-260926 前台職缺列表 index.html 頁面限定樣式骨架
   --------------------------------------------------------------------------
   建立：PJ-01（施工者 ticket-gods41f，2026-09-26 Asia/Taipei）：token＋骨架。
   視覺實作：PJ-02（施工者 ticket-gomm26f，2026-09-26 Asia/Taipei）：第 10 節
     為列表頁完整實作（L01–L15），樣式一律掛 pj- class 或 #site-header 覆寫；
     design 稿 class 僅作為 DOM 別名相容，不在本檔直接撰寫。

   作用域保證
   - 每一條規則都以 body.pj-index 起頭；最上層 selector 一律是 body.pj-index 或
     body.pj-index 下的 pj-* class，不以 element 或既有 class（.hero/.job-card/
     .btn…）開頭，不會外溢到 member/login/resume/MBTI/admin。
   - token 只在 body.pj-index 上以自訂屬性宣告；PJ-01 階段頁面 DOM 沒有任何
     pj-* class，因此本檔對渲染結果零影響（見 screenshots before/after 比對）。
   - 不得為了「順手」在此檔加入 .hero / .job-card / .btn 等既有 class 的覆寫；
     那會改動現有頁面外觀，屬 PJ-02 範圍。

   色票來源（DESIGN_SPEC.md 對照表；真相來源為當下工作區 css/member.css
   body.mc-member tokens，含使用者未提交修改）
     reference --bg          -> --pj-bg           #F7F6F1  (member --mc-bg)
     reference --paper       -> --pj-paper        #FFFEFA  (member --mc-paper)
     reference --ink         -> --pj-ink          #213F36  (member --mc-ink)
     reference --green       -> --pj-green        #234D40  (member --mc-green)
     reference --dark        -> --pj-green-dark   #183C30  (member --mc-green-dark)
     reference --soft        -> --pj-soft         #E8EDE1  (member --mc-green-soft)
     reference --tint        -> --pj-tint         #EDF1E9  (member --mc-green-tint)
     reference --line        -> --pj-line         #E1E4D9  (member --mc-line)
     reference --muted       -> --pj-muted        #5F6E63  (member --mc-muted)
     reference --orange      -> --pj-orange       #BC6848  (member --mc-orange)
     reference --orange-ink  -> --pj-orange-ink   #9C4F2E  (member --mc-orange-ink)
     reference --sand        -> --pj-sand         #F4E7D7  (member --mc-sand)
     reference --radius      -> --pj-radius       20px
   （--pj-muted-2 #55645A 僅存在於 member.css，為既有輔助色，一併帶入。）

   載入順序（index.html）
     theme-base.css -> home.css -> header.css -> pj-index.css（最後，PJ-02 覆寫生效）
   theme-base.css 決策（FUNCTION_MAP S1）：維持原 link 不動，零風險；
     該檔為純 :root 變數、本頁 css 未引用、admin 共用，本張不得修改。
   ========================================================================== */

/* ── 1. 頁面 token（僅自訂屬性；不改變既有元素渲染） ─────────────────── */
body.pj-index {
    --pj-bg: #F7F6F1;
    --pj-paper: #FFFEFA;
    --pj-ink: #213F36;
    --pj-green: #234D40;
    --pj-green-dark: #183C30;
    --pj-soft: #E8EDE1;
    --pj-tint: #EDF1E9;
    --pj-line: #E1E4D9;
    --pj-muted: #5F6E63;
    --pj-muted-2: #55645A;
    --pj-orange: #BC6848;
    --pj-orange-ink: #9C4F2E;
    --pj-sand: #F4E7D7;

    --pj-font: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    --pj-radius: 20px;
    --pj-radius-card: 16px;
    --pj-radius-sm: 10px;
    --pj-radius-pill: 6px;
    --pj-page-max: 1220px;
    --pj-page-pad: 24px;
    --pj-header-h: 74px;
    --pj-focus: 3px solid var(--pj-orange-ink);
    --pj-focus-offset: 4px;
    --pj-tap-min: 44px;
    --pj-aside-w: 270px;
    --pj-card-shadow-hover: 0 5px 20px #213f3608;
}

/* ── 2. 骨架：頁面容器 ────────────────────────────────────────────────── */
body.pj-index .pj-page {
    max-width: var(--pj-page-max);
    margin: 0 auto;
    padding: 30px var(--pj-page-pad) 40px;
}

/* 頁首 skip link（A11y）：預設移出畫面，聚焦時顯示；樣式只在 body.pj-index 生效 */
body.pj-index .pj-skip {
    position: fixed;
    top: -80px;
    left: 20px;
    z-index: 99;
    min-height: var(--pj-tap-min);
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--pj-paper);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-pill);
    color: var(--pj-green);
}
body.pj-index .pj-skip:focus { top: 10px; }

/* ── 3. 骨架：hero ────────────────────────────────────────────────────── */
body.pj-index .pj-hero {
    position: relative;
    overflow: hidden;
    background: var(--pj-soft);
    border: 1px solid #DFE5D6;
    border-radius: var(--pj-radius);
    padding: 42px 40px;
    min-height: 300px;
}
body.pj-index .pj-hero-copy { position: relative; z-index: 1; max-width: 68%; }
body.pj-index .pj-hero h1 { font-size: 42px; line-height: 1.45; font-weight: 600; letter-spacing: .035em; margin: 12px 0 14px; }
body.pj-index .pj-hero p { color: #516349; max-width: 38em; font-size: 14px; }
body.pj-index .pj-hero .pj-btn { margin-top: 24px; }
body.pj-index .pj-eyebrow {
    font-size: 10px;
    letter-spacing: .17em;
    font-weight: 700;
    color: var(--pj-muted);
    text-transform: uppercase;
}
body.pj-index .pj-hero .pj-eyebrow { color: #516349; }

/* ── 4. 骨架：按鈕與連結（.pj-btn 由 PJ-02 掛到新 DOM） ───────────────── */
body.pj-index .pj-btn {
    min-height: var(--pj-tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    border: 1px solid var(--pj-green);
    border-radius: 9px;
    background: var(--pj-green);
    color: var(--pj-paper);
    font: 500 14px/1.4 var(--pj-font);
    text-decoration: none;
    cursor: pointer;
}
body.pj-index .pj-btn:hover:not(:disabled) { background: var(--pj-green-dark); }
body.pj-index .pj-btn.secondary {
    background: var(--pj-paper);
    color: var(--pj-green);
    border-color: var(--pj-line);
}
body.pj-index .pj-btn:disabled {
    background: var(--pj-soft);
    color: var(--pj-muted);
    border-color: var(--pj-line);
    cursor: not-allowed;
}
body.pj-index .pj-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--pj-tap-min);
    color: var(--pj-green);
    font-size: 13px;
}
body.pj-index .pj-text-link:hover { text-decoration: underline; }

/* ── 5. 骨架：區段標題與筆數 ──────────────────────────────────────────── */
body.pj-index .pj-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 34px 0 17px;
}
body.pj-index .pj-section-head p { font-size: 12px; color: var(--pj-muted); }
body.pj-index .pj-count {
    background: var(--pj-soft);
    font-size: 12px;
    border-radius: 20px;
    padding: 4px 11px;
    margin-left: 9px;
    vertical-align: middle;
}

/* ── 6. 骨架：列表版型（兩欄職缺卡＋會員引導側欄） ───────────────────── */
body.pj-index .pj-listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pj-aside-w);
    gap: 26px;
    align-items: start;
}
body.pj-index .pj-jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
body.pj-index .pj-job-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--pj-paper);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-card);
    padding: 24px;
    transition: border-color .16s, box-shadow .16s;
}
body.pj-index .pj-job-card:hover {
    border-color: #A4B49A;
    box-shadow: var(--pj-card-shadow-hover);
}
body.pj-index .pj-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
body.pj-index .pj-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--pj-radius-pill);
    background: var(--pj-tint);
    color: var(--pj-green);
    display: inline-block;
}
body.pj-index .pj-job-title { font-size: 20px; line-height: 1.55; display: inline-block; }
body.pj-index .pj-job-title:hover { text-decoration: underline; }
body.pj-index .pj-meta {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    color: var(--pj-muted);
    font-size: 12px;
    margin-top: 12px;
}
body.pj-index .pj-salary { font-size: 18px; font-weight: 600; margin: 18px 0 9px; letter-spacing: .01em; }
body.pj-index .pj-salary small { display: block; font-weight: 400; color: var(--pj-muted); }
body.pj-index .pj-description {
    font-size: 13px;
    color: var(--pj-muted);
    margin-bottom: 24px;
    overflow-wrap: anywhere;
}
body.pj-index .pj-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--pj-line);
    padding-top: 16px;
    margin-top: auto;
}

/* ── 7. 骨架：會員引導側欄與最新消息 ─────────────────────────────────── */
body.pj-index .pj-aside { display: grid; gap: 20px; min-width: 0; }
body.pj-index .pj-note { background: #EFEBDD; border-radius: var(--pj-radius-card); padding: 26px; }
body.pj-index .pj-note .pj-eyebrow { color: var(--pj-orange-ink); }
body.pj-index .pj-note h2 { font-size: 21px; line-height: 1.7; margin: 16px 0 12px; }
body.pj-index .pj-note p { font-size: 12px; color: var(--pj-muted); }
body.pj-index .pj-note .pj-text-link { color: var(--pj-orange-ink); margin-top: 15px; }
body.pj-index .pj-aside-caption { font-size: 12px; color: var(--pj-muted); padding: 0 6px; }
body.pj-index .pj-news-card {
    background: var(--pj-paper);
    border: 1px solid var(--pj-line);
    border-radius: 14px;
    padding: 23px 26px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 24px;
    align-items: start;
}
body.pj-index .pj-news-card time { font-size: 12px; color: var(--pj-muted); }
body.pj-index .pj-news-card h3 { font-size: 15px; margin-bottom: 5px; }
body.pj-index .pj-news-card p { font-size: 13px; color: var(--pj-muted); }

/* ── 8. 骨架：footer 與狀態盒（loading／empty／error 共用） ───────────── */
body.pj-index .pj-footer {
    border-top: 1px solid var(--pj-line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 42px;
    padding-top: 20px;
    font-size: 11px;
    color: var(--pj-muted);
}
body.pj-index .pj-state-box {
    grid-column: 1 / -1;
    text-align: center;
    padding: 55px 24px;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-card);
    background: var(--pj-paper);
}
body.pj-index .pj-state-box h2 { margin: 12px 0; }
body.pj-index .pj-state-box p { color: var(--pj-muted); font-size: 14px; margin-bottom: 20px; }
body.pj-index .pj-state-symbol { font-size: 28px; color: var(--pj-orange-ink); }

/* ── 9. 響應式骨架（701–1049 一欄卡＋側欄；≤700 全單欄） ─────────────── */
@media (max-width: 1049px) {
    body.pj-index .pj-listing-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; }
    body.pj-index .pj-job-card { padding: 20px; }
    body.pj-index .pj-jobs-grid { grid-template-columns: 1fr; }
    body.pj-index .pj-hero h1 { font-size: 36px; }
}
@media (max-width: 700px) {
    body.pj-index .pj-page { padding: 23px 20px 32px; }
    body.pj-index .pj-hero { padding: 28px 25px; min-height: 310px; }
    body.pj-index .pj-hero-copy { max-width: 100%; }
    body.pj-index .pj-hero h1 { font-size: 31px; }
    body.pj-index .pj-listing-layout,
    body.pj-index .pj-jobs-grid { grid-template-columns: 1fr; }
    body.pj-index .pj-job-card { padding: 24px; }
    body.pj-index .pj-news-card { grid-template-columns: 1fr; gap: 10px; padding: 24px; }
    body.pj-index .pj-aside-caption { display: none; }
    body.pj-index .pj-footer { margin-top: 30px; }
}

/* ── 10. PJ-02 實作（2026-09-26，施工者 ticket-gomm26f） ────────────────
   依 design/index.html 實作 L01–L15：頁面基底、header 覆寫、hero 植物 SVG、
   卡片細節、資格提示、狀態盒、響應式與 reduced-motion。
   所有規則仍以 body.pj-index 起頭（pj_scope_audit static 稽核通過條件）；
   design 稿的 class（.hero/.btn/.job-card…）以別名方式掛在 DOM 上供選擇器
   相容，但**樣式一律由 pj- class 承載**，不在此檔寫未加 scope 的規則。
   home.css 已整檔更新為 reset（見該檔註解），故 design 別名無殘留舊樣式。
   ──────────────────────────────────────────────────────────────────────── */

/* 10.1 頁面基底（字型／色票／互動型別） */
body.pj-index {
    margin: 0;
    background: var(--pj-bg);
    color: var(--pj-ink);
    font: 15px/1.75 var(--pj-font);
}
body.pj-index a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
body.pj-index button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.pj-index h1, body.pj-index h2, body.pj-index h3, body.pj-index p { margin: 0; }
body.pj-index h2 { font-size: 21px; line-height: 1.5; font-weight: 600; }
body.pj-index h3 { font-size: 19px; font-weight: 600; }
body.pj-index svg { display: block; }
/* hidden 必須壓過 .pj-btn 的 display:inline-flex（重試鈕／原因文字切換） */
body.pj-index [hidden] { display: none !important; }
/* 焦點樣式：3px orange-ink，非僅靠顏色傳達（DESIGN_SPEC 元件章） */
body.pj-index :focus-visible { outline: 3px solid var(--pj-orange-ink); outline-offset: 4px; }

/* 10.2 錨點捲動：sticky header 不遮蔽 #main/#jobs/#news（L01 捲至列表） */
body.pj-index #main, body.pj-index #jobs, body.pj-index #news { scroll-margin-top: 90px; }

/* 10.3 頁面頂列（eyebrow ＋短語） */
body.pj-index .pj-page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}
body.pj-index .pj-small { font-size: 12px; }

/* 10.4 hero：標題強調色與植物裝飾 */
body.pj-index .pj-hero h1 span { color: #5A7455; }
body.pj-index .pj-botanical {
    position: absolute;
    right: 20px;
    bottom: -18px;
    width: 320px;
    height: 310px;
    pointer-events: none;
}

/* 10.5 職缺卡細節：job number、meta 圖示、卡片操作列 */
body.pj-index .pj-job-number {
    font-size: 11px;
    color: var(--pj-muted);
    letter-spacing: .15em;
}
body.pj-index .pj-meta span { display: inline-flex; align-items: center; gap: 5px; }
body.pj-index .pj-meta svg { width: 15px; height: 15px; }
body.pj-index .pj-card-actions .pj-btn { padding: 8px 14px; font-size: 12px; }

/* 10.6 資格原因文字與重試鈕（disabled 必須可見原因） */
body.pj-index .pj-notice {
    font-size: 12px;
    color: var(--pj-orange-ink);
    padding: 12px;
    background: var(--pj-sand);
    border-radius: 8px;
    margin-top: 12px;
}
body.pj-index .pj-retry { margin-top: 10px; }

/* 10.7 狀態盒骨架線與最新消息容器 */
body.pj-index .pj-skeleton {
    height: 18px;
    background: var(--pj-soft);
    border-radius: 6px;
    margin: 15px auto;
    max-width: 65%;
}
body.pj-index .pj-skeleton.short { max-width: 40%; }
body.pj-index .pj-news-list { display: grid; gap: 16px; }

/* 10.8 public header 覆寫（C01/C04/C05：DOM 由 header.js 產生，僅外觀頁面限定覆寫；
        不修改 header.js/header.css） */
body.pj-index #site-header .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--pj-header-h);
    padding: 0 max(var(--pj-page-pad), calc((100% - var(--pj-page-max)) / 2 + var(--pj-page-pad)));
    background: var(--pj-paper);
    border-bottom: 1px solid var(--pj-line);
}
body.pj-index #site-header .site-logo {
    color: var(--pj-ink);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
    overflow-wrap: anywhere;
    opacity: 1;
}
body.pj-index #site-header .site-logo:hover { opacity: 1; color: var(--pj-ink); }
body.pj-index #site-header .site-logo::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pj-orange);
    margin-left: 3px;
    vertical-align: middle;
}
body.pj-index #site-header .site-nav { gap: 26px; }
body.pj-index #site-header .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--pj-tap-min);
    padding: 10px 0;
    color: var(--pj-ink);
    font-size: 13px;
    font-weight: 500;
    transition: color .2s;
}
body.pj-index #site-header .site-nav a:hover { color: var(--pj-orange-ink); }
body.pj-index #site-header .site-nav a.site-btn {
    padding: 8px 20px;
    border: 1px solid var(--pj-line);
    border-radius: 8px;
    background: var(--pj-paper);
    color: var(--pj-green);
    transition: border-color .2s, background-color .2s;
}
body.pj-index #site-header .site-nav a.site-btn:hover {
    border-color: var(--pj-green);
    background: var(--pj-soft);
    color: var(--pj-green);
}

/* 10.9 響應式補充（701–1049 與 ≤700；與第 9 節骨架規則併存） */
@media (max-width: 1049px) {
    body.pj-index .pj-botanical { width: 265px; right: -20px; }
}
@media (max-width: 700px) {
    body.pj-index #site-header .site-header { height: 66px; padding: 0 20px; }
    body.pj-index #site-header .site-logo { font-size: 22px; max-width: 48%; }
    body.pj-index #site-header .site-nav { gap: 14px; }
    body.pj-index #site-header .site-nav a { font-size: 12px; padding: 8px 0; }
    body.pj-index #site-header .site-nav a.site-btn { padding: 7px 14px; }
    body.pj-index .pj-page-top { margin-bottom: 17px; }
    body.pj-index .pj-eyebrow { font-size: 9px; }
    body.pj-index .pj-hero p { font-size: 12px; max-width: 80%; }
    body.pj-index .pj-hero .pj-btn { position: relative; z-index: 2; margin-top: 22px; }
    body.pj-index .pj-botanical { width: 160px; height: 200px; right: -38px; bottom: -30px; opacity: .5; }
    body.pj-index .pj-section-head { margin-top: 28px; }
    body.pj-index .pj-section-head h2 { font-size: 19px; }
    body.pj-index .pj-section-head p { font-size: 11px; }
    body.pj-index .pj-note h2 { font-size: 20px; margin: 10px 0; }
    body.pj-index .pj-aside { margin-top: 2px; }
    body.pj-index .pj-state-box { padding: 40px 20px; }
}

/* 10.10 減少動態偏好（頁面限定，不用 `body.pj-index *`） */
@media (prefers-reduced-motion: reduce) {
    body.pj-index .pj-job-card,
    body.pj-index .pj-btn,
    body.pj-index #site-header .site-nav a,
    body.pj-index #site-header .site-nav a.site-btn { transition: none !important; }
}