/* 無限冒險 遊戲說明 Design System：深藍底、金色描邊的奇幻百科，內容區維持高對比好閱讀。 */
:root{
  --bg:#0B1220; --bg-2:#1B2A4A; --panel:#14223B; --panel-2:#101B31;
  --gold:#D4B06A; --gold-hi:#F5E6C9; --text:#F3F0E8; --text-2:#AAB6CA;
  --line:rgba(212,176,106,.28); --line-soft:rgba(170,182,202,.16);
  --sword:#B5413A; --magic:#7A54C8; --holy:#C9962F; --bow:#3F8F58; --body:#C4603A; --ninja:#2F62B5;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
  --r-s:6px; --r-m:10px; --r-l:14px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --glow:0 0 0 1px rgba(212,176,106,.55),0 0 18px rgba(212,176,106,.25);
  --sidebar:250px; --toc:220px;
  --anchor-offset:24px; /* 錨點落點與畫面頂端的距離，之後若改成固定 Header 只要調這裡 */
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--anchor-offset)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.8 var(--sans)}
a{color:var(--gold-hi);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:3px}
.gd-icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 版型 */
.gd-shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.gd-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:linear-gradient(180deg,#0E1A30,#0A1120);border-right:1px solid var(--line);padding:var(--sp-5) var(--sp-4);scrollbar-width:thin;scrollbar-color:var(--bg-2) transparent}
.gd-main{min-width:0;display:flex;flex-direction:column}
.gd-container{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--sp-6) var(--sp-7);flex:1}
.gd-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
.gd-columns.has-toc{grid-template-columns:minmax(0,1fr) var(--toc)}

/* Sidebar */
/* Logo 素材自帶光效與裝飾：只設寬度、高度自動，不加發光、不裁切 */
.gd-logo{display:block;margin-bottom:var(--sp-4)}
.gd-logo img,.gd-header-logo img{display:block;width:100%;height:auto}
.gd-logo img{max-width:220px;margin:0 auto}
.gd-nav{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.gd-nav-home,.gd-nav a{display:flex;align-items:center;gap:var(--sp-2);border-radius:var(--r-s);color:var(--text-2);min-height:36px;padding:var(--sp-1) var(--sp-3);font-size:14.5px;line-height:1.4;border:1px solid transparent;transition:background .15s,color .15s}
.gd-nav a:hover{background:rgba(212,176,106,.1);color:var(--gold-hi)}
.gd-nav a[aria-current="page"]{color:var(--gold-hi);background:linear-gradient(90deg,rgba(212,176,106,.25),rgba(212,176,106,.05));border-color:var(--gold);box-shadow:var(--glow)}
.gd-nav h2{display:flex;align-items:center;gap:var(--sp-2);font:700 15px/1.4 var(--serif);color:var(--gold);margin:0 0 var(--sp-1);padding:var(--sp-1) var(--sp-2)}
.gd-nav ul{list-style:none;margin:0;padding:0 0 0 var(--sp-3);border-left:1px solid var(--line-soft);margin-left:var(--sp-3)}
.gd-nav-foot{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line-soft);font-size:13px;display:flex;justify-content:space-between}
.gd-nav-foot a{color:var(--text-2)}

/* Header + Breadcrumb */
.gd-header{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--line-soft);background:rgba(11,18,32,.85);min-height:52px}
.gd-menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:var(--panel);color:var(--gold-hi);border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer}
.gd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);font-size:13.5px;color:var(--text-2);list-style:none;margin:0;padding:0}
.gd-crumb li{display:flex;align-items:center;gap:var(--sp-1)}
.gd-crumb a{color:var(--text-2)}
.gd-crumb a:hover{color:var(--gold-hi)}
.gd-crumb .gd-icon{width:13px;height:13px}
.gd-header-logo{display:none}
.gd-header-link{margin-left:auto;font-size:13.5px;color:var(--gold);white-space:nowrap}

/* SearchInput */
.gd-search{position:relative}
.gd-search-box{display:flex;align-items:center;gap:var(--sp-2);background:rgba(16,27,49,.9);border:1px solid var(--line);border-radius:var(--r-s);padding:0 var(--sp-3);color:var(--text-2)}
.gd-search-box:focus-within{border-color:var(--gold);box-shadow:var(--glow)}
.gd-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:14.5px;height:40px}
.gd-search input::placeholder{color:var(--text-2)}
.gd-search-results{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:60vh;overflow-y:auto;background:var(--panel);border:1px solid var(--gold);border-radius:var(--r-m);box-shadow:var(--shadow);padding:var(--sp-2)}
.gd-search-results[hidden]{display:none}
.gd-search-results a{display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-s);color:var(--text)}
.gd-search-results a:hover,.gd-search-results a.on{background:rgba(212,176,106,.14)}
.gd-search-results b{color:var(--gold-hi);font-weight:700}
.gd-search-results small{display:block;color:var(--text-2);font-size:13px;line-height:1.55}
.gd-search-results mark{background:none;color:var(--gold);font-weight:700}
.gd-search-empty{padding:var(--sp-3);color:var(--text-2);font-size:14px}

/* PageBanner：插畫由各頁的 .gd-banner-art 指定，元件不綁特定內容 */
.gd-banner{position:relative;display:flex;flex-direction:column;justify-content:center;aspect-ratio:5/1;width:100%;min-height:150px;margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-6);border-radius:var(--r-l);background:var(--panel-2)}
.gd-banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
.gd-banner h1{position:relative;z-index:2;margin:0;font:900 36px/1.3 var(--serif);letter-spacing:3px;color:var(--gold-hi);display:flex;align-items:center;gap:var(--sp-3);text-shadow:0 2px 12px rgba(0,0,0,.6);text-wrap:balance}
.gd-banner h1 .gd-icon{color:var(--gold);width:40px;height:40px}
.gd-banner p{position:relative;z-index:2;margin:var(--sp-1) 0 0;color:var(--text);max-width:24em}

/* SectionHeading */
.gd-h2{display:flex;align-items:center;gap:var(--sp-3);font:700 24px/1.4 var(--serif);color:var(--gold-hi);margin:var(--sp-7) 0 var(--sp-3);letter-spacing:1px;text-wrap:balance}
.gd-h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.gd-h2 .gd-icon{color:var(--gold)}
.gd-h3{font:700 19px/1.4 var(--serif);color:var(--gold-hi);margin:var(--sp-5) 0 var(--sp-2)}
.gd-sub{color:var(--text-2);margin:0 0 var(--sp-4);max-width:46em}

/* ContentCard */
.gd-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4) var(--sp-5);margin:var(--sp-3) 0}
.gd-card h3{font:700 17px/1.4 var(--serif);color:var(--gold-hi);margin:0 0 var(--sp-2)}
.gd-card p{margin:0 0 var(--sp-2)}
.gd-card p:last-child{margin-bottom:0}
.gd-card ul{margin:0;padding-left:1.2em}
.gd-card li{margin:var(--sp-1) 0}
.gd-card.warn{border-color:#C9962F;background:#2A2413}
.gd-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.gd-grid>.gd-card{margin:0}
.gd-tag{display:inline-block;font-size:12.5px;line-height:1.5;color:var(--gold-hi);border:1px solid var(--line);background:rgba(212,176,106,.12);border-radius:4px;padding:0 var(--sp-2);margin-right:var(--sp-1);white-space:nowrap}

/* DataTable */
.gd-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel-2);margin:var(--sp-3) 0}
.gd-table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px;line-height:1.65}
.gd-table th,.gd-table td{padding:var(--sp-2) var(--sp-3);text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.gd-table thead th{background:linear-gradient(180deg,#22345A,#1B2A4A);color:var(--gold-hi);font-family:var(--serif);white-space:nowrap}
.gd-table tbody th{color:var(--gold-hi);font-weight:700;white-space:nowrap}
.gd-table tbody tr:last-child>*{border-bottom:0}
.gd-table tbody tr:hover>*{background:rgba(212,176,106,.05)}
.gd-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-table .muted{color:var(--text-2)}

/* TableOfContents */
.gd-toc{position:sticky;top:var(--sp-5);align-self:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4);margin-top:var(--sp-5);max-height:calc(100vh - 48px);overflow-y:auto}
.gd-toc h2{font:700 16px/1.4 var(--serif);color:var(--gold-hi);margin:0 0 var(--sp-2)}
.gd-toc ol{list-style:none;margin:0;padding:0}
.gd-toc a{display:block;padding:var(--sp-1) var(--sp-2);font-size:14px;line-height:1.5;color:var(--text-2);border-left:2px solid var(--line-soft)}
.gd-toc li.sub a{padding-left:var(--sp-4);font-size:13.5px}
.gd-toc a:hover{color:var(--gold-hi)}
.gd-toc a.on{color:var(--gold-hi);border-left-color:var(--gold)}

/* 分類入口與職業卡 */
.gd-entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.gd-entry{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:var(--r-m);overflow:hidden;background:linear-gradient(155deg,var(--c,#2D4E8A) -30%,var(--panel) 72%);color:var(--text);transition:border-color .15s}
/* 8:5 是最小高度（扣掉上下 1px 邊框）；系統放大文字時卡片跟著長高，字不會被裁掉 */
.gd-entry::before{content:"";grid-area:1/1;padding-top:calc(62.5% - .75px)}
.gd-entry:hover{border-color:var(--gold-hi);color:var(--text)}
.gd-entry b{font:700 19px/1.4 var(--serif);color:var(--gold-hi)}
.gd-entry span{font-size:13px;line-height:1.5;color:var(--text-2)}
.gd-entry.has-art span{color:var(--text)}
.gd-entry-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform .25s}
.gd-entry-text{grid-area:1/1;position:relative;z-index:1;display:flex;flex-direction:column;padding:34px var(--sp-3) var(--sp-2);background:linear-gradient(0deg,rgba(11,18,32,.92) 0,rgba(11,18,32,.76) calc(100% - 34px),rgba(11,18,32,0) 100%)}
@media (hover:hover){.gd-entry:hover .gd-entry-art{transform:scale(1.04)}}
.gd-jobs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3)}
.gd-job{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1);padding:var(--sp-5) var(--sp-2) var(--sp-4);border:1px solid var(--gold);border-radius:var(--r-m);background:linear-gradient(180deg,var(--c) -10%,var(--panel) 85%);color:var(--text);min-height:178px;transition:transform .15s,box-shadow .15s}
.gd-job:hover{transform:translateY(-2px);box-shadow:var(--glow);color:var(--text)}
.gd-job .gd-icon{width:52px;height:52px;color:var(--gold-hi);margin-bottom:var(--sp-2)}
.gd-job b{font:700 18px/1.3 var(--serif);color:var(--gold-hi)}
.gd-job em{font-style:normal;font-size:14px}
.gd-job span{font-size:12.5px;color:var(--text-2);line-height:1.5}
.gd-job.has-art{padding:var(--sp-3) var(--sp-1) var(--sp-3);min-height:0;gap:0;background:radial-gradient(ellipse 85% 52% at 50% 36%,color-mix(in srgb,var(--c) 42%,transparent),transparent 74%),var(--panel)}
.gd-job.has-art:hover{box-shadow:0 0 0 1px var(--gold)}
.gd-job .gd-job-art{display:block;width:100%;height:auto;aspect-ratio:360/710;object-fit:contain;object-position:center bottom;margin:0}
.gd-job-info{width:100%;display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line-soft)}
.c-sword{--c:var(--sword)}.c-magic{--c:var(--magic)}.c-holy{--c:var(--holy)}.c-bow{--c:var(--bow)}.c-body{--c:var(--body)}.c-ninja{--c:var(--ninja)}

/* 首頁 */
.gd-hero{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:8/3;min-height:300px;margin:var(--sp-5) 0;padding:var(--sp-5);text-align:center;border-radius:var(--r-l);background:url(art/hero.webp) center/cover no-repeat var(--bg)}
.gd-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,rgba(11,18,32,0),#0B1220);border-radius:0 0 var(--r-l) var(--r-l);pointer-events:none}
.gd-hero>[data-search-slot]{position:relative;width:100%;max-width:520px}
.gd-hero h1{position:relative;margin:0;font:900 clamp(44px,4.6vw,60px)/1.2 var(--serif);letter-spacing:8px;background:linear-gradient(180deg,#FFF6DF,#D4B06A 62%,#A07C3B);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.gd-hero>small{position:relative;display:block;letter-spacing:6px;color:var(--gold);font-size:13px;margin-top:var(--sp-1)}
.gd-hero>p{position:relative;font:700 21px/1.5 var(--serif);color:var(--gold-hi);margin:var(--sp-3) 0 var(--sp-4);letter-spacing:3px}
.gd-hero .gd-search{max-width:520px;margin:0 auto;text-align:left}
.gd-hero .gd-search input{height:48px;font-size:16px}
.gd-home{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5);align-items:start}
.gd-side-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.gd-side-card h2{display:flex;align-items:center;gap:var(--sp-2);font:700 17px/1.4 var(--serif);color:var(--gold-hi);margin:0 0 var(--sp-3)}
.gd-side-card h2 .gd-icon{color:var(--gold)}
.gd-news{list-style:none;margin:0;padding:0}
.gd-news li{padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft);font-size:14px;line-height:1.6}
.gd-news li:last-child{border-bottom:0}
.gd-news time{display:block;color:var(--gold);font-size:12.5px;font-variant-numeric:tabular-nums}
/* 公告原文之外的更新說明：金色細線區隔，不和原文混在一起 */
.gd-news-update{display:block;margin-top:var(--sp-1);padding-left:var(--sp-2);border-left:2px solid var(--gold);color:var(--text);font-size:12.5px}
.gd-news-update a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:2px}
.gd-note{color:var(--text-2);font-size:12.5px;margin:var(--sp-2) 0 0}
.gd-chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.gd-chips a{display:flex;align-items:center;justify-content:center;min-height:40px;font-size:14px;border:1px solid var(--line);border-radius:var(--r-s);text-align:center;padding:var(--sp-1)}
.gd-chips a:hover{border-color:var(--gold);background:rgba(212,176,106,.1)}
.gd-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(3,minmax(0,1fr))}
.gd-steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4);font-size:15px}
.gd-steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-hi);font:700 15px var(--serif);margin-bottom:var(--sp-2)}
.gd-more{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-3);color:var(--gold)}

/* 舊頁檢視 */
.gd-frame{display:block;width:100%;min-height:75vh;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;margin-top:var(--sp-5)}
.gd-frame.is-dark{background:var(--bg);visibility:hidden}
.gd-frame.is-dark.is-ready{visibility:visible}
.gd-frame.is-fit{min-height:0}
.gd-footer{border-top:1px solid var(--line-soft);padding:var(--sp-4) var(--sp-6);text-align:center;font-size:13px;color:var(--text-2)}

/* 手機抽屜 */
.gd-scrim{display:none}
/* 分類卡固定 8:5，寬度低於 156px 副標題會換行、標題離開底部暗化區，用斷點避開 */
@media (max-width:1320px){.gd-home{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px){
  .gd-columns.has-toc{grid-template-columns:minmax(0,1fr)}
  .gd-toc{position:static;margin-top:var(--sp-3);max-height:none}
  .gd-entries{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gd-jobs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){.gd-entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .gd-shell{grid-template-columns:minmax(0,1fr)}
  .gd-sidebar{position:fixed;z-index:60;left:0;top:0;width:min(290px,86vw);transform:translateX(-102%);transition:transform .2s}
  .gd-open .gd-sidebar{transform:none}
  .gd-open .gd-scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6)}
  .gd-menu-btn{display:inline-flex}
  /* Logo 上限 142px：高度 60.6px，加邊框後 Header 剛好不超過 64px */
  .gd-header{flex-wrap:wrap;gap:0 var(--sp-3);padding:1px var(--sp-4)}
  .gd-header-logo{display:block;flex:none;width:clamp(130px,38vw,142px);margin:0 auto}
  .gd-crumb{order:1;width:100%;flex-wrap:nowrap;white-space:nowrap;padding-bottom:var(--sp-1)}
  .gd-crumb.is-root{display:none}
  .gd-crumb li:last-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .gd-header-link{margin-left:0;display:inline-flex;align-items:center;min-height:44px}
  .gd-search input{height:44px}
  .gd-container{padding:0 var(--sp-4) var(--sp-6)}
  .gd-steps{grid-template-columns:minmax(0,1fr)}
  .gd-hero{aspect-ratio:auto;min-height:max(460px,calc(37.5vw + 170px));justify-content:flex-end;padding:var(--sp-5) var(--sp-4);background-size:max(800px,100%) auto;background-position:14% 0}
  .gd-hero::before{top:0;bottom:auto;height:max(300px,37.5vw);background:linear-gradient(180deg,rgba(11,18,32,0) 40%,#0B1220 84%);border-radius:0}
  .gd-hero h1{font-size:42px;letter-spacing:4px}
  .gd-banner{aspect-ratio:auto;min-height:150px;padding:var(--sp-4)}
  .gd-banner-art{object-position:58% center}
  .gd-banner::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(90deg,rgba(11,18,32,.88) 0%,rgba(11,18,32,.78) 62%,rgba(11,18,32,.1) 100%)}
  .gd-banner h1{font-size:28px}
  .gd-banner p{max-width:72%}
  .gd-nav a{min-height:44px}
}
@media (max-width:355px){.gd-entries{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){
  .gd-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 職業階級區塊：桌面是比較表，容器變窄時同一份 HTML 轉成卡片，奧義與技能不會被橫向裁切 */
.gd-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);list-style:none;margin:var(--sp-3) 0;padding:0;font-size:13.5px;color:var(--text-2)}
.gd-legend b{color:var(--gold-hi);margin-right:var(--sp-1)}
.gd-rule ul{padding-left:1.2em}
.gd-sys{margin:var(--sp-4) 0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel-2)}
.gd-sys>summary{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-3);min-height:52px;padding:var(--sp-2) var(--sp-4);cursor:pointer;list-style:none;border-radius:inherit}
.gd-sys>summary::-webkit-details-marker{display:none}
.gd-sys>summary:hover{background:rgba(212,176,106,.06)}
.gd-sys>summary .gd-h3{margin:0}
.gd-sys-sum{flex:1;min-width:0;font-size:13.5px;color:var(--text-2)}
.gd-sys>summary .gd-icon{color:var(--gold);transform:rotate(90deg);transition:transform .15s}
.gd-sys[open]>summary .gd-icon{transform:rotate(-90deg)}
.gd-sys-body{padding:0 var(--sp-4) var(--sp-4)}
.gd-sys-head{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.gd-sys-art{display:block;width:100%;height:auto;border-radius:var(--r-s);background:radial-gradient(ellipse 85% 52% at 50% 36%,color-mix(in srgb,var(--c) 42%,transparent),transparent 74%)}
.gd-sys-info .gd-card{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.gd-sys-note{margin:0 0 var(--sp-3);font-size:14px;line-height:1.7;color:var(--text-2)}
.gd-sys-note b{color:var(--gold-hi)}
.gd-tiers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-2)}
.gd-tiers a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:var(--sp-1) 2px;border:1px solid var(--line-soft);border-radius:var(--r-s);background:var(--panel);color:var(--text);text-align:center;line-height:1.35}
.gd-tiers a:hover{border-color:var(--gold);color:var(--gold-hi)}
.gd-tiers span{font-size:12.5px;color:var(--text-2)}
.gd-tiers b{font-size:13.5px;font-weight:700}
.gd-tiers small{font-size:12px;color:var(--gold-hi)}
.gd-tiers a.req{border-color:var(--gold)}
/* 只有第七階有真正的前置職業：第六階與第七階之間才畫實線 */
.gd-tiers a.req::before{content:"";position:absolute;right:100%;top:50%;width:var(--sp-2);height:2px;margin-right:1px;background:var(--gold)}
.gd-tier-wrap{container-type:inline-size;margin-top:var(--sp-4)}
.gd-all,.gd-tier-act,.gd-tier-act[hidden],.gd-all[hidden]{display:none}
.gd-tier{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.gd-tier th,.gd-tier td{padding:var(--sp-3) var(--sp-2);text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.gd-tier thead th{background:linear-gradient(180deg,#22345A,#1B2A4A);color:var(--gold-hi);font-family:var(--serif);white-space:nowrap}
.gd-tier tbody tr:last-child>*{border-bottom:0}
.gd-tier tbody th{white-space:nowrap;font-weight:400}
.gd-tier-no{display:block;font-size:12.5px;color:var(--text-2)}
.gd-tier tbody th b{display:block;font:700 16px/1.35 var(--serif);color:var(--gold-hi)}
.gd-tier-row:target>*,.gd-tier-row:has(:target)>*{background:rgba(212,176,106,.12)}
.gd-vals{display:grid;grid-template-columns:repeat(3,max-content);gap:var(--sp-1) var(--sp-3);list-style:none;margin:0;padding:0}
.gd-vals li{display:flex;flex-direction:column;line-height:1.3}
.gd-vals span{font-size:12.5px;color:var(--text-2)}
.gd-vals b{font-size:14px;font-variant-numeric:tabular-nums}
.gd-vals-all{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-tier .muted{color:var(--text-2)}
.gd-names{list-style:none;margin:0;padding:0}
.gd-names li{display:inline}
.gd-names li:not(:last-child)::after{content:"、"}
.gd-job7{margin:var(--sp-3) 0 0;border-color:var(--gold)}
.gd-job7 h4{font:700 16px/1.4 var(--serif);color:var(--gold-hi);margin:0 0 var(--sp-2)}
@container (max-width:759px){
  .gd-tier,.gd-tier tbody,.gd-tier-row,.gd-tier-row>th,.gd-tier-row>td{display:block}
  .gd-tier thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gd-tier-row{margin-bottom:var(--sp-3);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
  .gd-tier-row:target,.gd-tier-row:has(:target){border-color:var(--gold-hi)}
  .gd-tier-row:last-child{margin-bottom:0}
  .gd-tier-row:target>*,.gd-tier-row:has(:target)>*{background:none}
  .gd-tier tbody .gd-tier-row>*{padding:var(--sp-2) 0;border:0}
  .gd-tier tbody .gd-tier-row>th{display:flex;align-items:baseline;gap:var(--sp-2);padding-top:0;border-bottom:1px solid var(--line-soft);white-space:normal}
  .gd-tier-row>td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12.5px;color:var(--gold)}
  /* 平常一列三格；文字放大、數字放不下時自動換行，不會擠到隔壁 */
  .gd-vals{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2)}
  .gd-vals li{flex:0 0 30%;min-width:max-content}
  .gd-tier tbody .gd-tier-row>.gd-tier-act:not([hidden]){display:block;padding-bottom:0}
  .gd-tier-act button,.gd-all:not([hidden]){display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 var(--sp-2);width:100%;min-height:44px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel-2);color:var(--gold-hi);font:inherit;font-size:14px;cursor:pointer}
  .gd-all:not([hidden]){margin-bottom:var(--sp-3)}
  .gd-more-count{font-size:12.5px;color:var(--text-2)}
  .gd-tier-act .gd-icon{width:16px;height:16px;transform:rotate(90deg);transition:transform .15s}
  .gd-tier-act button[aria-expanded="true"] .gd-icon{transform:rotate(-90deg)}
  .gd-tier-row.is-closed>.gd-tier-more{display:none}
}
/* 六系階級總覽：同系對照表，窄容器時每系變成一組按鈕，不需橫向捲動 */
.gd-matrix-wrap{container-type:inline-size}
.gd-matrix{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:var(--sp-1);font-size:13.5px;line-height:1.35}
.gd-matrix thead th{padding:var(--sp-1);text-align:center;color:var(--gold-hi);font:700 14px/1.4 var(--serif)}
.gd-matrix thead th:first-child{width:76px}
.gd-matrix small{display:block;font:400 12px/1.4 var(--sans)}
.gd-matrix tbody th{padding:0;text-align:left}
.gd-matrix tbody th a{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-2);border-left:3px solid var(--c);color:var(--gold-hi);font:700 15px/1.3 var(--serif)}
.gd-matrix td{padding:0}
.gd-matrix td a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:2px;border:1px solid var(--line-soft);border-radius:var(--r-s);background:var(--panel);color:var(--text);text-align:center}
.gd-matrix td a:hover{border-color:var(--gold);color:var(--gold-hi)}
.gd-matrix td a.req{border-color:var(--gold)}
@container (max-width:639px){
  .gd-matrix,.gd-matrix tbody{display:block}
  .gd-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gd-matrix tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1);margin-bottom:var(--sp-3)}
  .gd-matrix tbody tr:last-child{margin-bottom:0}
  .gd-matrix tbody th{display:block;grid-column:1/-1}
  .gd-matrix td{display:block}
  .gd-matrix td::before{content:attr(data-tier);display:block;font-size:12.5px;color:var(--text-2);text-align:center}
}
/* 首頁六大職業：現有立繪裁成半身，首頁不被拉長 */
.gd-jobs-half .gd-job.has-art .gd-job-art{aspect-ratio:1/1.12;object-fit:cover;object-position:50% 4%}
.gd-job.has-art{position:relative}
.gd-job.has-art:active{border-color:var(--gold-hi);background-color:rgba(212,176,106,.12)}
.gd-job.has-art[aria-current="true"]{border-color:var(--gold-hi);box-shadow:inset 0 0 0 2px var(--gold-hi)}
.gd-job.has-art[aria-current="true"]::after{content:"✓";position:absolute;top:var(--sp-1);right:var(--sp-1);width:24px;height:24px;border-radius:50%;background:var(--gold-hi);color:var(--bg);font:700 14px/24px var(--sans);text-align:center}
.gd-dock{display:none}
/* 右側目錄佔 252px：1400 以下收進底部，把寬度留給比較表，常見筆電寬度才看得到完整表格 */
@media (max-width:1400px){
  html{scroll-padding-bottom:88px}
  .gd-columns.has-toc{grid-template-columns:minmax(0,1fr)}
  .gd-toc{position:static;margin-top:var(--sp-3);max-height:none}
  /* 底部目錄用 sticky 佔實際高度，文字放大時跟著長高，也不會蓋住頁尾內容 */
  .gd-dock{display:flex;gap:var(--sp-2);position:sticky;bottom:0;z-index:40;padding:var(--sp-2) var(--sp-4) max(var(--sp-2),env(safe-area-inset-bottom));background:rgba(11,18,32,.97);border-top:1px solid var(--line)}
  .gd-dock button{flex:1;min-height:44px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--gold-hi);font:inherit;font-size:14.5px;cursor:pointer}
  .gd-dock .gd-dock-toc{flex:2;border-color:var(--gold)}
  body:has(.gd-search input:focus) .gd-dock{display:none}
  .gd-toc.is-sheet{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:55;margin:0;max-height:85vh;max-height:85dvh;overflow-y:auto;border-radius:var(--r-l) var(--r-l) 0 0;padding:var(--sp-4) var(--sp-4) max(var(--sp-4),env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;transition:transform .2s,visibility .2s}
  .gd-toc-open .gd-toc.is-sheet{transform:none;visibility:visible}
  .gd-toc.is-sheet a{display:flex;align-items:center;min-height:44px}
  .gd-toc-open .gd-scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6)}
  .gd-toc-open .gd-toc.is-sheet{transition:transform .2s,visibility 0s}
}
@media (max-width:1180px){
  .gd-tiers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gd-jobs.gd-jobs-art,.gd-jobs.gd-jobs-half{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gd-jobs-art .gd-job.has-art .gd-job-art{aspect-ratio:1/1.12;object-fit:cover;object-position:50% 4%}
  .gd-jobs-art .gd-job b,.gd-jobs-half .gd-job b{font-size:17px}
  .gd-jobs-art .gd-job em,.gd-jobs-half .gd-job em{font-size:12.5px;line-height:1.4}
}
@media (max-width:300px){.gd-jobs.gd-jobs-art,.gd-jobs.gd-jobs-half{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .gd-sys-body{padding:0 var(--sp-3) var(--sp-3)}
  .gd-sys-head{grid-template-columns:96px minmax(0,1fr);gap:var(--sp-3)}
  .gd-sys-info{display:contents}
  .gd-sys-info .gd-card{grid-column:2;margin:0;padding:var(--sp-2) var(--sp-3);font-size:14px;line-height:1.7}
  .gd-sys-note,.gd-tiers{grid-column:1/-1;margin:0}
  .gd-tiers a{min-height:56px}
}
@media (max-width:300px){.gd-sys-head{grid-template-columns:minmax(0,1fr)}.gd-sys-art{max-width:96px}.gd-sys-info .gd-card{grid-column:auto}}