/* ClubSys 產品站 — features.html / guide.html 專用補充樣式（先載 cs.css 再載這份；顏色一律用 cs.css 變數） */

/* 頁首（比首頁 hero 收斂） */
.phead{padding:clamp(44px,6vw,80px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--rule)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:.86rem;color:var(--ink-3)}
.crumb li+li::before{content:"/";margin-right:6px;color:var(--rule-2)}
.crumb a:hover{color:var(--wine)}
.phead-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:end}
.phead h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.2;font-weight:900}
.phead h1 em{font-style:normal;color:var(--wine)}
.phead .lede{margin:0;color:var(--ink-2);font-size:1.05rem}

/* 模組索引：沿用 .mods／.mod，改成可點的連結 */
.idx-h{font-size:1.35rem;font-weight:900;margin:clamp(36px,5vw,52px) 0 14px}
.mods.idx{grid-template-columns:repeat(7,1fr)}
a.mod{transition:color .18s,background-color .18s}
a.mod:hover{color:var(--wine);background-color:var(--wine-soft)}
a.mod:hover svg{color:var(--wine)}
a.mod small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:-6px}

/* 錨點跳轉時不被固定導覽列蓋住 */
.sec[id],.tp[id],.gsec[id]{scroll-margin-top:84px}
.ftabs+.ftabs{margin-top:56px}
.tp-txt.solo{margin-top:0}
.grp-k{font-size:.86rem;font-weight:700;color:var(--wine);letter-spacing:.08em;margin:0 0 10px}

.gal-one{margin:clamp(48px,6vw,72px) 0 0;max-width:900px}
.gal-one figcaption{margin-top:10px;font-size:.9rem;color:var(--ink-2)}
.cinfo a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}

/* 日常營運小模組：沿用 .rules／.rule 卡片，五格 */
.rules.minis{grid-template-columns:repeat(3,1fr)}
.rule ul{list-style:none;margin:10px 0 0;padding:0}
.rule li{padding:6px 0 6px 14px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-2);line-height:1.65;position:relative}
.rule li::before{content:"";position:absolute;left:0;top:1em;width:5px;height:5px;background-color:var(--wine)}

/* 系統管理：單一面板 */
.sys-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.sys-grid .shot+.shot{margin-top:24px}
.sys-grid .specs{margin-top:0}
.sys-grid .specs div{grid-template-columns:84px 1fr}

/* 使用說明：左目錄、右內容 */
.guide{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.toc{position:sticky;top:84px}
.toc h2{font-size:1rem;font-weight:900;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:grid;grid-template-columns:28px 1fr;gap:4px;padding:9px 6px;border-bottom:1px solid var(--rule);font-size:.93rem;line-height:1.45;color:var(--ink-2)}
.toc a span{font-family:var(--serif);font-weight:900;color:var(--ink-3)}
.toc a:hover,.toc a.on{color:var(--wine)}
.toc a.on{background-color:var(--wine-soft);font-weight:700}
.toc a.on span{color:var(--wine)}

.gsec{padding:0 0 clamp(44px,5vw,64px);margin-bottom:clamp(44px,5vw,64px);border-bottom:1px solid var(--rule)}
.gsec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.gsec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.gsec-h .no{font-family:var(--serif);font-size:2rem;font-weight:900;color:var(--wine);line-height:1}
.gsec h2{font-size:clamp(1.45rem,2.4vw,1.8rem);font-weight:900;line-height:1.3}
.who{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.gsec>p{margin:14px 0 0;color:var(--ink-2);max-width:42em}
.gsteps{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rule);counter-reset:gs;max-width:46em}
.gsteps li{counter-increment:gs;display:grid;grid-template-columns:36px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:.97rem;line-height:1.75}
.gsteps li::before{content:counter(gs);font-family:var(--serif);font-weight:900;font-size:1.2rem;color:var(--wine);line-height:1.5}
.gsteps b{color:var(--ink)}
.gsub{font-size:1.1rem;font-weight:900;margin:24px 0 0}
.gsub+.gsteps{margin-top:10px}
.note{margin:18px 0 0;max-width:46em;border-left:2px solid var(--sage);padding:4px 0 4px 16px;font-size:.92rem;color:var(--ink-2);line-height:1.75}
.note b{color:var(--ink)}
.gsec .shot{margin-top:24px;max-width:860px}

/* responsive */
@media(max-width:960px){
  .phead-in,.sys-grid{grid-template-columns:1fr}
  .rules.minis{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .guide{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{position:sticky;top:57px;z-index:20;margin-inline:calc(var(--gut)*-1);padding:8px var(--gut);background-color:var(--paper);border-bottom:1px solid var(--rule)}
  .toc h2{display:none}
  .toc ol{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .toc li{flex:none;scroll-snap-align:start}
  .toc a{display:flex;gap:6px;white-space:nowrap;border:1px solid var(--rule-2);border-radius:999px;padding:6px 12px;font-size:.88rem}
  .toc a.on{border-color:var(--wine)}
  .gsec[id]{scroll-margin-top:130px}
}
@media(max-width:640px){
  .mods.idx{grid-template-columns:repeat(4,1fr)}
  .rules.minis{grid-template-columns:1fr}
  .sys-grid .specs div{grid-template-columns:1fr}
  .gsteps li{grid-template-columns:28px 1fr}
}