/* =====================================================
   AaBore 安博力 — theme-2026.css（2026-10 全站改版：官方資料站風）
   在 main.css／industry.css 之後載入，只覆寫視覺，不動版型結構與內容。
   配色：主色 深墨青 #14343C／連結 青藍 #1F6E86／重點 磚橘 #C4572B／背景 紙色 #F5F4EF
   字體：標題 Noto Serif TC，內文 Noto Sans TC
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700;900&display=swap');

:root {
    --brand:       #14343C;
    --brand-mid:   #1E4A54;
    --brand-dark:  #0B2329;
    --accent:      #1F6E86;
    --accent-lt:   #4C93A8;
    --gold:        #C4572B;   /* 變數名沿用，值改為磚橘重點色 */
    --gold-lt:     #E3916C;
    --gold-dark:   #9C4220;

    --bg:          #F5F4EF;
    --c-gray-50:   #F5F4EF;
    --c-gray-100:  #ECEAE3;
    --c-gray-200:  #E1DED5;
    --c-gray-300:  #CCC8BC;
    --c-gray-500:  #6B675E;
    --c-gray-700:  #3A3832;
    --c-gray-900:  #22211D;

    --font-heading: 'Noto Serif TC', 'Noto Sans TC', serif;

    --radius-sm:  3px;
    --radius-md:  6px;
    --radius-lg:  8px;
    --radius-pill: 6px;

    --shadow-sm:    0 1px 2px rgba(20,52,60,0.05);
    --shadow-card:  0 1px 3px rgba(20,52,60,0.06);
    --shadow-hover: 0 6px 18px rgba(20,52,60,0.10);
    --shadow-xl:    0 10px 30px rgba(20,52,60,0.12);

    --rule: 1px solid var(--c-gray-200);

    /* 全站內嵌樣式有用、但改版前從未定義的變數（--c-blue 用了 1 萬多次，原本等於沒設色） */
    --c-blue:      var(--accent);
    --c-gray-400:  #87827A;
    --c-gray-600:  #57534A;
    --text-light:  var(--c-gray-500);
}

body { color: var(--c-gray-700); background: #fff; }
::selection { background: rgba(196,87,43,0.18); }

/* ---------- 標題字體 ---------- */
h1, h2, .section-title, .blogger-hero__title, .article-wrap h1, .article-wrap h2,
.industry-hero h1, .tool-hero__title, .service-hero h1 {
    font-family: var(--font-heading);
    letter-spacing: 0.01em;
}
.section-title { font-weight: 900; }
.section-title em, .blogger-hero__title em { color: var(--gold); font-style: normal; }
.section-eyebrow {
    color: var(--gold);
    letter-spacing: 0.18em;
    font-size: 0.72rem;
}
.section-header::after {
    content: ''; display: block; width: 48px; height: 2px;
    background: var(--gold); margin: 18px auto 0;
}

/* ---------- 頁首：白底細線 ---------- */
.site-header {
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--c-gray-200);
    box-shadow: none;
}
.nav-link { color: var(--c-gray-700); font-weight: 500; }
.nav-link:hover, .nav-item.is-active > .nav-link { color: var(--brand); }
.nav-item.is-active > .nav-link::after { background: var(--gold); border-radius: 0; height: 2px; }
.header-cta {
    background: var(--brand); color: #fff;
    border-radius: var(--radius-md); padding: 9px 18px;
}
.header-cta:hover { background: var(--brand-mid); color: #fff; box-shadow: none; transform: none; }
.header-search { color: var(--c-gray-700); }
.header-search:hover { color: var(--brand); background: var(--c-gray-100); }
.nav-toggle__bar { background: var(--brand) !important; }
.dropdown, .mega-dropdown { border: var(--rule); box-shadow: var(--shadow-hover); border-radius: var(--radius-md); }
@media (max-width: 768px) {
    .main-nav { background: #fff !important; border-left: var(--rule) !important; }
    .nav-link { color: var(--c-gray-700) !important; border-bottom: var(--rule) !important; }
    .nav-link:hover, .nav-link:active { color: var(--brand) !important; background: var(--bg) !important; }
    .nav-item.is-active > .nav-link { color: var(--gold) !important; }
}

/* ---------- 按鈕：方角、無光暈 ---------- */
.btn { border-radius: var(--radius-md); box-shadow: none !important; transform: none !important; letter-spacing: 0.02em; }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-mid); color: #fff; }
.btn--line { background: var(--c-line); color: #fff; }
.btn--line:hover { background: #05B14A; }
.btn--outline { color: var(--brand); border: 1.5px solid var(--brand); background: #fff; }
.btn--outline:hover { background: var(--brand); color: #fff; }

/* ---------- 主視覺（首頁＋服務頁 blogger-hero）：淺色、刊物感 ---------- */
.blogger-hero {
    background: var(--bg);
    border-bottom: var(--rule);
    padding: 112px 24px 64px;
}
.blogger-hero::before, .blogger-hero::after { display: none; }
.blogger-hero__badge {
    background: transparent; border: 1px solid var(--gold); color: var(--gold);
    border-radius: var(--radius-sm); letter-spacing: 0.12em;
}
.blogger-hero__badge-dot { background: var(--gold); }
.blogger-hero__title { color: var(--brand); font-weight: 900; }
.blogger-hero__subtitle { color: var(--c-gray-700); }
.blogger-hero__check { color: var(--c-gray-700); }
.blogger-hero__check svg, .blogger-hero__check svg * { stroke: var(--accent) !important; }
.blogger-hero__trust-item { color: var(--c-gray-500); }
.blogger-hero__trust-item svg, .blogger-hero__trust-item svg * { stroke: var(--c-gray-500) !important; }
.blogger-hero__card {
    background: #fff; border: var(--rule); border-radius: var(--radius-md);
    backdrop-filter: none; box-shadow: var(--shadow-card);
}
.blogger-hero__card::before { display: none; }
.blogger-hero__card-label { color: var(--c-gray-500); }
.blogger-hero__stat { background: #fff; border: var(--rule); border-radius: var(--radius-sm); }
.blogger-hero__stat-num { color: var(--brand); font-family: var(--font-heading); }
.blogger-hero__stat-label { color: var(--c-gray-700); }
.blogger-hero__stat-source { color: var(--c-gray-500); background: var(--bg); }
.blogger-hero__result { background: var(--brand); border-radius: var(--radius-sm); }
.blogger-hero__result-left, .blogger-hero__result-left * { color: #fff !important; }
.blogger-hero__result-source, .blogger-hero__result > span:last-child { color: rgba(255,255,255,0.75) !important; }
.blogger-hero .btn--ghost { color: var(--brand); border-color: var(--c-gray-300); }
.blogger-hero [style*="color:rgba(255,255,255"], .blogger-hero [style*="color: rgba(255,255,255"] { color: var(--c-gray-500) !important; }

/* ---------- 照片佔位（尚無照片時的空白區塊） ---------- */
.photo-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(20,52,60,0.035) 14px 28px),
        var(--c-gray-100);
    border: 1px dashed var(--c-gray-300);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-gray-500);
    font-size: 0.82rem; letter-spacing: 0.06em;
    overflow: hidden;
}
.photo-slot::before {
    content: attr(data-label);
    padding: 6px 12px;
    background: rgba(255,255,255,0.85);
    border: var(--rule);
    border-radius: var(--radius-sm);
}
.photo-slot--4x3 { aspect-ratio: 4 / 3; }
.photo-slot--wide { aspect-ratio: 21 / 9; }
.photo-slot--cover { aspect-ratio: 16 / 9; margin: 0 0 1.75rem; }
.blogger-hero__dashboard .photo-slot { margin-bottom: 4px; }
@media (max-width: 768px) { .photo-slot--wide { aspect-ratio: 16 / 9; } }

/* ---------- 內容區、卡片、資料框 ---------- */
.service-content { background: #fff; }
.data-box {
    background: #fff; border: var(--rule); border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
}
.data-box .label { border-bottom-color: var(--gold); }
.cta-inline { background: var(--bg); border-left-color: var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- 文章版型 ---------- */
.article-wrap { background: #fff; }
.article-wrap h1 { color: var(--brand); font-weight: 900; line-height: 1.4; }
.article-wrap h2 {
    color: var(--brand); font-weight: 900;
    padding-top: 1.25rem; border-top: var(--rule);
}
.article-wrap h3 { color: var(--brand); font-family: var(--font-body); font-weight: 700; }
.article-wrap p, .article-wrap li { line-height: 1.9; }
.article-wrap a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(31,110,134,0.35); text-underline-offset: 3px; }
.article-wrap a:hover { color: var(--gold-dark); text-decoration-color: currentColor; }
.article-wrap a.btn, .article-wrap .btn, .article-wrap nav a, .article-wrap .toc a, .article-back a { text-decoration: none; }
.article-wrap .toc, .article-wrap nav[aria-label] {
    background: #fff !important; border: var(--rule); border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm) !important;
}
.article-wrap table { font-size: 0.92rem; border-top: 2px solid var(--brand); }
.article-wrap th {
    background: var(--bg); color: var(--brand); font-weight: 700;
    border-bottom: 1px solid var(--c-gray-300);
}
.article-wrap td { border-bottom: var(--rule); }
.article-wrap tr:nth-child(even) td { background: #FAF9F6; }
.article-wrap [role="region"] { border-radius: var(--radius-sm) !important; }
.article-wrap .faq details, .faq-item {
    background: #fff; border: var(--rule); border-radius: var(--radius-sm);
}
.article-wrap .faq summary, .faq-item summary { color: var(--brand); font-family: var(--font-body); }
.article-wrap .faq .answer, .faq-item__answer { color: var(--c-gray-700); }
.article-meta__pillar { border-radius: var(--radius-sm); }

/* ---------- 側欄 ---------- */
.sidebar__block { border: var(--rule); box-shadow: none; border-radius: var(--radius-md); background: #fff; }
.sidebar__block--line { background: var(--brand); border-color: var(--brand); }
.sidebar__btn { border-radius: var(--radius-sm); }

/* ---------- CTA 區塊與延伸閱讀 ---------- */
.cta-block { background: var(--bg); border-top: var(--rule); }
.cta-block__card { border-radius: var(--radius-md); box-shadow: none; border: var(--rule); background: #fff; }
.cta-block__btn { border-radius: var(--radius-md); box-shadow: none !important; transform: none !important; }
.cta-block__btn--tool { background: var(--brand); color: #fff; }
.cta-block__btn--tool:hover { background: var(--brand-mid); color: #fff; }
.related-posts { background: #fff; border-top: var(--rule); }

/* ---------- 產業頁主視覺 ---------- */
.industry-hero {
    background: var(--bg) !important;
    border-bottom: var(--rule);
}
.industry-hero, .industry-hero h1, .industry-hero p, .industry-hero .hero-desc,
.industry-hero .industry-badge, .industry-hero .industry-hero-inner { color: var(--c-gray-700) !important; }
.industry-hero h1 { color: var(--brand) !important; }
.industry-hero::before, .industry-hero::after { display: none !important; }

/* ---------- 頁尾：深墨青 ---------- */
.site-footer { background: var(--brand-dark); }
.footer-tagline, .footer-links__more a { color: var(--gold-lt) !important; }
.footer-links a:hover, .footer-contact__item:hover, .footer-legal a:hover { color: #fff; }
.industry-hero-inner {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
    text-align: left !important;
}
.industry-hero .hero-btns { justify-content: flex-start !important; }
.industry-hero .hero-accent { color: var(--gold) !important; }
@media (max-width: 900px) {
    .industry-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}
.industry-hero-inner { max-width: var(--container-max) !important; padding: 0 24px; }
.industry-hero .hero-btns .btn-outline {
    color: var(--brand) !important; border: 1.5px solid var(--c-gray-300) !important; background: #fff !important;
    border-radius: var(--radius-md);
}
.industry-hero .hero-btns .btn-outline:hover { border-color: var(--brand) !important; }
.industry-hero .hero-btns .btn-line { border-radius: var(--radius-md); }
.industry-badge { background: transparent !important; border: 1px solid var(--gold) !important; color: var(--gold) !important; border-radius: var(--radius-sm) !important; }
.photo-slot--cover { aspect-ratio: 21 / 9; }

/* ---------- 工具頁主視覺 ---------- */
.tool-hero { background: var(--bg); color: var(--c-gray-700); border-bottom: var(--rule); }
.tool-hero::before { display: none; }
.tool-hero__badge { background: transparent; border: 1px solid var(--gold); border-radius: var(--radius-sm); }
.tool-hero__title { color: var(--brand); }
.tool-hero__subtitle { opacity: 1; color: var(--c-gray-700); }
.tool-hero a[style*="rgba(255,255,255"] { background: #fff !important; border: var(--rule); color: var(--brand) !important; border-radius: var(--radius-sm) !important; }
.tool-form { border-radius: var(--radius-md); }
.tool-form__input, .tool-form__select { border-radius: var(--radius-sm); background: #fff; }

/* 按鈕內寫死顏色的圖示改跟文字色 */
.btn--primary svg[fill]:not([fill="none"]), .header-cta svg[fill]:not([fill="none"]) { fill: currentColor; }
.blogger-hero__grid { align-items: start; }
.blogger-hero__left { padding-top: 12px; }

/* ---------- 逐頁掃描後的修正（2026-10-11） ---------- */
/* 外框／幽靈按鈕底色透明：深色區塊裡寫了內嵌白字的按鈕才看得見 */
.btn--outline, .btn--ghost { background: transparent; }
.btn--outline:hover { background: var(--brand); }
/* 淺色主視覺裡原本給深底用的內嵌白字 */
:is(.blogger-hero, .tool-hero, .industry-hero) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color:#FFF"]) {
    color: var(--brand) !important;
}
:is(.blogger-hero, .tool-hero) .btn:is([style*="border-color:rgba(255,255,255"], [style*="border-color: rgba(255,255,255"]) { border-color: var(--c-gray-300) !important; }
/* 文章區的連結色不可蓋掉按鈕字色 */
.article-wrap a:is(.btn, [class*="__btn"], [class*="-btn"], [class*="btn-"]) { text-decoration: none; }
.article-wrap a:is(.btn--primary, .cta-block__btn--tool, .cta-block__btn--line, .related-posts__action-btn--tool,
    .related-posts__action-btn--line, .content-upgrade__btn, .sidebar__btn, .btn--line, .cta-btn) { color: #fff; }
.article-wrap a.btn--outline:not([style*="color"]) { color: var(--brand); }
/* 深色區塊（內嵌深底）裡的標題、段落沿用區塊文字色 */
:is([style*="background:var(--c-navy)"], [style*="background: var(--c-navy)"], [style*="background:var(--brand)"],
    [style*="background:var(--c-navy-dark)"], [style*="background:var(--brand-dark)"], [style*="background:#14343C"])
    :is(h2, h3, h4, p, li, strong, small):not([style*="color"]) { color: inherit; }
:is([style*="background:var(--c-navy)"], [style*="background: var(--c-navy)"], [style*="background:var(--brand)"]) h2 { border-top: 0; padding-top: 0; }
.about-diff-card--featured h3 { color: #fff; }
.about-diff-card--featured p { color: rgba(255,255,255,0.78); }

/* ---------- 其他主視覺統一淺色（service-hero／about／contact／內嵌深底的 page-hero） ---------- */
:is(.service-hero, .about-hero, .contact-hero, .page-hero) {
    background: var(--bg) !important;
    color: var(--c-gray-700) !important;
    border-bottom: var(--rule);
}
:is(.service-hero, .about-hero, .contact-hero, .page-hero)::before,
:is(.service-hero, .about-hero, .contact-hero, .page-hero)::after { display: none !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) :is(h1, h2, .about-hero__title, .contact-hero__title) { color: var(--brand) !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) :is(h1, h2) em { color: var(--gold) !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) :is(p, .service-hero__subtitle, .about-hero__subtitle, .contact-hero__subtitle) { color: var(--c-gray-700) !important; opacity: 1 !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"]) { color: var(--c-gray-700) !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) [style*="background:rgba(255,255,255"] { background: #fff !important; border: var(--rule); }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) .btn:is(.btn--outline, .btn--ghost) { color: var(--brand) !important; border-color: var(--c-gray-300) !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) .btn--primary { color: #fff !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) a:not(.btn) { color: var(--accent) !important; }
:is(.service-hero, .about-hero, .contact-hero, .page-hero) :is(.section-eyebrow, [class*="badge"]) { color: var(--gold) !important; }
.photo-slot--portrait { aspect-ratio: 3 / 4; width: 220px; flex: 0 0 220px; }
@media (max-width: 640px) {
    .about-founder { flex-direction: column; }
    .photo-slot--portrait { width: 160px; flex-basis: auto; }
}

/* 深色框（內嵌深底、首頁結尾 CTA、側欄 LINE 框）裡的一般連結用淺磚橘 */
:is([style*="background:var(--c-navy)"], [style*="background: var(--c-navy)"], [style*="background:var(--brand)"],
    [style*="background:#14343C"], [style*="background:var(--c-navy-dark)"], .final-cta, .sidebar__block--line):not(.page-hero)
    a:not(.btn):not([class*="btn"]):not([style*="background"]) { color: var(--gold-lt) !important; }
/* 透明按鈕原本就是給深底用（白字）；只有改成淺色的主視覺裡改深色字 */
.blogger-hero .btn--ghost, .tool-hero .btn--ghost { background: #fff; }
/* cta-btn 原本沒有任何樣式 */
.cta-btn { display: inline-block; padding: 12px 24px; border-radius: var(--radius-md); font-weight: 700; text-decoration: none; }
.cta-btn--gold { background: var(--gold); color: #fff !important; }
.cta-btn--gold:hover { background: var(--gold-dark); }
/* 內嵌磚橘底（原金色底）的按鈕連結：改白字 */
a:is([style*="background:var(--c-gold)"], [style*="background: var(--c-gold)"], [style*="background:var(--gold)"], [style*="background:#C4572B"]) { color: #fff !important; }
/* 深底裡寫 var(--c-blue) 的字（該變數以前未定義，深底上原本會沿用白字） */
:is([style*="background:var(--c-navy)"], [style*="background: var(--c-navy)"], [style*="background:var(--brand)"],
    [style*="background:#14343C"], [style*="background:var(--c-navy-dark)"], .final-cta):not(.page-hero)
    [style*="color:var(--c-blue)"]:not([style*="background"]) { color: var(--gold-lt) !important; }
.pricing-combo a:not(.btn) { color: var(--gold-lt) !important; }