是語意標籤（給機器讀），瀏覽器預設 italic + block 會改變版面；
這裡還原成一般行內文字，畫面與原本完全相同，只是多了語意。 */
.contact-info-list address { display: inline; font-style: normal; margin: 0; }
/* 案例規格表（輔導標準／客戶／產業／年月）。標籤與值並排，手機改上下堆疊。 */
.case-spec {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 18px;
margin: 0 0 24px;
padding: 16px 18px;
background: var(--c-bg-alt);
border-left: 3px solid var(--c-primary);
border-radius: 4px;
font-size: 0.94rem;
}
.case-spec dt { color: var(--c-text-light); white-space: nowrap; }
.case-spec dd { margin: 0; color: var(--c-text); }
.case-spec a { color: var(--c-primary); text-decoration: underline; }
.case-spec a:hover { color: var(--c-primary-dark); }
@media (max-width: 600px) {
.case-spec { grid-template-columns: 1fr; gap: 2px 0; }
.case-spec dt { margin-top: 8px; font-size: 0.85rem; }
}
/* 服務頁「相關輔導實績」列表 */
.related-cases-list { list-style: none; padding: 0; margin: 0; }
.related-cases-list li { padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.related-cases-list li:last-child { border-bottom: none; }
.related-cases-list a { color: var(--c-text); }
.related-cases-list a:hover { color: var(--c-primary); }
.related-cases-list .case-date { color: var(--c-text-light); font-size: 0.82rem; margin-left: 8px; }
/* 預覽模式提示帶（只有登入後台的管理者看得到停用項目時才出現） */
.preview-bar {
position: sticky;
top: 0;
z-index: 200;
background: #f2a71b;
color: #3a2a00;
padding: 10px 20px;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
/* 服務頁常見問答（_SPEC 柒）。用 dl/dt/dd：語意上就是「詞條與解釋」，
而且純文字抽取時問答會保持配對，比 div 湯對 LLM 友善。 */
.faq-list { margin: 0; }
.faq-list dt {
font-weight: 700;
color: var(--c-primary-dark);
margin-top: 22px;
padding-left: 26px;
position: relative;
line-height: 1.6;
}
.faq-list dt::before {
content: "Q";
position: absolute;
left: 0;
color: var(--c-accent);
font-weight: 700;
}
.faq-list dt:first-child { margin-top: 0; }
.faq-list dd {
margin: 8px 0 0 26px;
color: var(--c-text);
line-height: 1.8;
}
/* ===== 首頁章節（2026-09-03 改版，計畫見 claude工作區/首頁改版-施作計畫.md）=====
每個章節一個 h2，服務清單每項一個 h3。標題階層不只是視覺——
AI 抓網頁會沿著標題切塊，切得乾淨引用才會準。 */
.index-section h2,
.index-services h2,
.index-faq h2,
.index-cases h2,
.cta h2 {
font-size: 1.7rem;
color: var(--c-primary-dark);
margin: 0 0 20px;
}
.index-section:nth-of-type(even),
.index-services { background: #f7f9fa; }
/* 服務清單：桌機三欄、平板兩欄、手機一欄 */
.index-service-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}
.index-service-item {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 6px;
padding: 18px 20px;
}
.index-service-item h3 { font-size: 1.02rem; margin: 0 0 8px; line-height: 1.45; }
.index-service-item h3 a { color: var(--c-primary-dark); text-decoration: none; }
.index-service-item h3 a:hover { color: var(--c-primary); text-decoration: underline; }
.index-service-item p { margin: 0; font-size: 0.88rem; color: var(--c-text-light); line-height: 1.7; }
/* 服務分組（2026-09-06 B2）：六組卡片，組名 h3、項目連結清單 */
.index-service-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}
.index-service-group {
background: #fff;
border: 1px solid var(--c-border);
border-top: 3px solid var(--c-primary);
border-radius: 6px;
padding: 18px 20px;
}
.index-service-group h3 { font-size: 1.05rem; margin: 0 0 10px; color: var(--c-primary-dark); }
.index-service-group ul { list-style: none; margin: 0; padding: 0; }
.index-service-group li { padding: 6px 0; border-top: 1px solid #eef1f3; font-size: 0.93rem; line-height: 1.5; }
.index-service-group li:first-child { border-top: 0; }
.index-service-group li a { color: var(--c-text); text-decoration: none; }
.index-service-group li a:hover { color: var(--c-primary); text-decoration: underline; }
@media (max-width: 900px) { .index-service-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .index-service-groups { grid-template-columns: 1fr; } }
/* 輔導流程 timeline（2026-09-06 B3）：processintro 富文本本身是 h3 + p 交錯，
純 CSS 把每個 h3 變成節點、左側畫一條直線。標題文字裡的「1. 」序號留著，讀屏與 AI 抓文都看得到 */
.index-process .rich-content { position: relative; padding-left: 40px; }
.index-process .rich-content::before {
content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
width: 2px; background: var(--c-border);
}
.index-process .rich-content h3 {
position: relative; font-size: 1.05rem; margin: 22px 0 6px; color: var(--c-primary-dark);
}
.index-process .rich-content h3::before {
content: ""; position: absolute; left: -35px; top: 0.35em;
width: 12px; height: 12px; border-radius: 50%;
background: var(--c-primary); box-shadow: 0 0 0 4px #fff;
}
.index-process .rich-content h3:first-of-type { margin-top: 12px; }
.index-process .rich-content h3 + p { margin: 0 0 8px; color: var(--c-text-light); }
/* 首頁客戶 Logo Swiper（2026-09-06 B4，手機版 grid 破版改 Swiper） */
.index-logos h2 { font-size: 1.7rem; color: var(--c-primary-dark); margin: 0 0 20px; }
.logo-swiper .logo-wall-item img { max-width: 110px; margin: 0 auto; }
.logo-swiper { padding: 4px 0; }
.index-more { margin: 24px 0 0; }
.index-more a { color: var(--c-primary); font-weight: 600; }
@media (max-width: 900px) {
.index-service-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.index-service-list { grid-template-columns: 1fr; }
}
/* ===== Hero 腰帶 CTA（2026-09-03，仿舊站首圖底部的深藍色帶）=====
半透明底 + 毛玻璃：讓底下的輪播圖透出來，腰帶像疊在圖上而不是切掉一塊。
backdrop-filter 不支援的瀏覽器會退回純半透明，仍然可讀。 */
.hero-band {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 3;
width: min(880px, calc(100% - 40px));
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 16px 28px;
background: rgba(7, 62, 80, 0.78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-top: 3px solid var(--c-accent);
color: #fff;
text-decoration: none;
font-size: 1.22rem;
font-weight: 700;
letter-spacing: .02em;
box-shadow: 0 -4px 18px rgba(0,0,0,.28);
transition: background .2s, transform .2s;
}
.hero-band:hover {
background: rgba(11, 94, 120, 0.9);
color: #fff;
transform: translateX(-50%) translateY(-2px);
}
.hero-band-icon { flex: 0 0 auto; color: #06C755; } /* LINE 品牌綠 */
.hero-band:hover .hero-band-icon { color: #34e07a; }
.hero-band-arrow { font-size: 1.6rem; line-height: 1; opacity: .85; }
/* 輪播的圓點預設貼在最底下，會被腰帶蓋住；有腰帶時把圓點抬到腰帶上方 */
.hero:has(.hero-band) .hero-swiper .swiper-pagination { bottom: 78px; }
/* 手機：不壓圖、貼在 hero 下方整寬，字才不會擠 */
@media (max-width: 700px) {
.hero:has(.hero-band) .hero-swiper .swiper-pagination { bottom: 10px; }
.hero-band {
position: static;
transform: none;
width: 100%;
font-size: .98rem;
padding: 14px 16px;
gap: 10px;
box-shadow: none;
background: rgba(7, 62, 80, 0.95);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.hero-band:hover { transform: none; }
.hero-band-icon { width: 22px; height: 22px; }
}
/* ===== 首頁 CTA 區（2026-09-03 美化）=====
原本是純色底＋一行字＋一顆按鈕，四平八穩但沒有重量。
改成深色漸層＋左側強調線的卡片，讓它在一整頁白底章節裡看起來像個「該按的東西」。 */
.cta {
background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
/* 右上角一塊淡淡的光暈，避免大面積純色顯得平。用 radial-gradient 不多一張圖 */
.cta::before {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: 60%;
height: 180%;
background: radial-gradient(closest-side, rgba(242,167,27,.18), transparent);
pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 760px; }
.cta h2 { color: #fff; margin: 0 0 14px; font-size: 1.75rem; }
.cta .rich-content { color: rgba(255,255,255,.92); text-align: left; }
.cta .rich-content ul { list-style: none; padding: 0; margin: 16px 0 0; }
/* 用打勾而不是項目符號：這一區列的是「你會得到什麼」，打勾比圓點更貼近語意 */
.cta .rich-content li {
position: relative;
padding: 6px 0 6px 28px;
line-height: 1.75;
}
.cta .rich-content li::before {
content: "✓";
position: absolute;
left: 0;
top: 6px;
color: var(--c-accent);
font-weight: 700;
}
.cta-headline { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; }
.cta .btn-cta {
margin-top: 24px;
padding: 14px 34px;
font-size: 1.05rem;
font-weight: 700;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0,0,0,.22);
transition: transform .2s, box-shadow .2s;
}
.cta .btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
/* ===== 內頁橫幅：沒有 h1 的頁面（案例詳細頁）標題要一樣大 =====
案例詳細頁的 h1 是案例標題本身，橫幅那行「ISO輔導案例」只能是 （一頁一個 h1）。
但它原本套的是 .category-eyebrow——小字、全大寫、0.75 透明度，跟其他頁 2rem 白字差很多，
看起來就像壞掉（2026-09-03 user 反映）。這裡只改長相，語意維持
。 */
.page-banner .category-eyebrow {
color: #fff;
font-size: 2rem;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
opacity: 1;
margin: 0;
}
@media (max-width: 700px) {
.page-banner .category-eyebrow { font-size: 1.5rem; }
}
/* ---------- 捲入顯示（2026-09-06，配 site.js 末段）---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-step { opacity: 0; transform: translateX(-12px); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal-step::before { transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1); transition-delay: inherit; }
.reveal-step.is-in { opacity: 1; transform: none; }
.reveal-step.is-in::before { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-step, .reveal-step::before { opacity: 1; transform: none; transition: none; }
}