/* ============================================================
   CKIT Enhancements — 2026-08-31
   轉化 + SEO/GEO 改版。只做新增，不覆寫原有 css.css 規則。
   品牌綠 #0a9e48 / 字體 Microsoft YaHei / 版面寬度 960px
   ============================================================ */

/* ---------- 共用 ---------- */
.ck-wrap { max-width: 960px; margin: 0 auto; padding: 0 10px; }
.ck-green { color: #0a9e48; }

/* ---------- 1. H1 主標題（Banner 之下，白底，不與底圖水印衝突） ---------- */
.ck-hero { background: #fff; text-align: center; padding: 26px 10px 18px; margin-bottom: 14px; }
.ck-hero h1 { font-size: 30px; line-height: 1.35; font-weight: 700; color: #1b1b1b; margin: 0 0 8px; }
.ck-hero .sub { font-size: 15px; color: #555; line-height: 1.6; margin: 0; }
.ck-hero .sub b { color: #0a9e48; font-weight: 600; }

/* ---------- 2. 信任數字條 ---------- */
.ck-stats { background: #0a9e48; color: #fff; }
.ck-stats .in { max-width: 960px; margin: 0 auto; padding: 16px 10px; display: flex; }
.ck-stats .s { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,.28); }
.ck-stats .s:last-child { border-right: 0; }
.ck-stats .s b { display: block; font-size: 26px; line-height: 1.2; font-weight: 700; }
.ck-stats .s span { display: block; font-size: 12px; margin-top: 3px; opacity: .93; }

/* ---------- 3. 主文案 + CTA ---------- */
.ck-intro { max-width: 960px; margin: 0 auto; padding: 26px 10px; }
.ck-intro h2 { font-size: 21px; color: #1b1b1b; margin: 0 0 10px; font-weight: 700; }
.ck-intro p.lead { font-size: 14px; line-height: 1.85; color: #444; margin: 0 0 16px; }
.ck-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.ck-btn { display: inline-block; padding: 11px 24px; border-radius: 4px; font-size: 15px;
          text-decoration: none; font-weight: 600; transition: opacity .15s; }
.ck-btn:hover { opacity: .88; }
.ck-btn.pri { background: #0a9e48; color: #fff; }
.ck-btn.gho { background: #fff; color: #0a9e48; border: 2px solid #0a9e48; }

/* 四格服務 */
.ck-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ck-svc .s { border: 1px solid #e0e0e0; border-radius: 5px; padding: 14px 12px; text-align: center; }
.ck-svc .s b { display: block; font-size: 14px; color: #1b1b1b; margin-bottom: 5px; }
.ck-svc .s span { display: block; font-size: 12px; color: #777; line-height: 1.6; }

/* ---------- 4. 資質橫幅 ---------- */
.ck-cred { background: #f5f5f5; border-top: 2px solid #0a9e48; border-bottom: 2px solid #0a9e48; }
.ck-cred .in { max-width: 960px; margin: 0 auto; padding: 14px 10px; display: flex;
               align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ck-cred .c { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #333; }
.ck-cred .c i { width: 18px; height: 18px; border-radius: 50%; background: #0a9e48; color: #fff;
                font-style: normal; font-size: 11px; line-height: 18px; text-align: center; flex: none; }

/* ---------- 5. 案例參考 ---------- */
.ck-cases { max-width: 960px; margin: 0 auto; padding: 28px 10px; }
.ck-cases h2 { font-size: 21px; color: #1b1b1b; margin: 0 0 6px; font-weight: 700; }
.ck-cases .sub { font-size: 13px; color: #666; margin: 0 0 16px; }
.ck-cases .sub a { color: #0a9e48; text-decoration: none; font-weight: 600; }
.ck-cases .sub a:hover { text-decoration: underline; }
.ck-cases .g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ck-cases .c { display: block; text-decoration: none; border: 1px solid #e3e3e3; border-radius: 5px;
               overflow: hidden; background: #fff; transition: box-shadow .15s, transform .15s; }
.ck-cases .c:hover { box-shadow: 0 3px 12px rgba(0,0,0,.13); transform: translateY(-2px); }
.ck-cases .c img { width: 100%; height: 118px; object-fit: cover; display: block; background: #eee; }
.ck-cases .c .t { padding: 9px 10px 11px; }
.ck-cases .c .t b { display: block; font-size: 13px; color: #1b1b1b; line-height: 1.4;
                    margin-bottom: 4px; min-height: 36px; }
.ck-cases .c .t span { display: block; font-size: 11px; color: #888; line-height: 1.5; }
.ck-cases .c:hover .t b { color: #0a9e48; }

/* ---------- 6. FAQ（details/summary，AI 搜索愛引用） ---------- */
.ck-faq { background: #fafafa; }
.ck-faq .in { max-width: 960px; margin: 0 auto; padding: 28px 10px; }
.ck-faq h2 { font-size: 21px; color: #1b1b1b; margin: 0 0 14px; font-weight: 700; }
.ck-faq details { border: 1px solid #e3e3e3; border-radius: 5px; background: #fff;
                  margin-bottom: 8px; overflow: hidden; }
.ck-faq summary { padding: 12px 15px; font-size: 14px; font-weight: 600; color: #1b1b1b;
                  cursor: pointer; list-style: none; position: relative; }
.ck-faq summary::-webkit-details-marker { display: none; }
.ck-faq summary::after { content: '+'; position: absolute; right: 15px; top: 50%;
                         transform: translateY(-50%); color: #0a9e48; font-size: 18px; font-weight: 700; }
.ck-faq details[open] summary::after { content: '\2212'; }
.ck-faq details .a { padding: 0 15px 14px; font-size: 13px; line-height: 1.85; color: #555; }
.ck-faq details .a a { color: #0a9e48; text-decoration: none; }
.ck-faq details .a a:hover { text-decoration: underline; }

/* ---------- 7. 底部 CTA ---------- */
.ck-cta2 { background: #0a9e48; color: #fff; text-align: center; }
.ck-cta2 .in { max-width: 960px; margin: 0 auto; padding: 26px 10px; }
.ck-cta2 h2 { font-size: 20px; margin: 0 0 6px; font-weight: 700; }
.ck-cta2 p { font-size: 14px; margin: 0 0 16px; opacity: .95; }
.ck-cta2 .ck-btn.pri { background: #fff; color: #0a9e48; }
.ck-cta2 .ck-btn.gho { background: transparent; color: #fff; border-color: #fff; }

/* ---------- 8. 新 Footer 四欄 ---------- */
#footer .ck-fcols { max-width: 960px; margin: 0 auto; padding: 26px 10px 18px;
                    display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: 20px; }
#footer .ck-fcols h4 { font-size: 14px; color: #0a9e48; margin: 0 0 10px; font-weight: 700; }
#footer .ck-fcols p, #footer .ck-fcols li { font-size: 12.5px; color: #bbb; line-height: 1.85; margin: 0; }
#footer .ck-fcols ul { list-style: none; padding: 0; margin: 0; }
#footer .ck-fcols li a { color: #bbb; text-decoration: none; }
#footer .ck-fcols li a:hover { color: #0a9e48; }
#footer .ck-fcols .co-name { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
#footer .ck-fcols .co-en { color: #888; font-size: 11.5px; margin-bottom: 9px; }
#footer .ck-fcols .badge { display: inline-block; background: rgba(10,158,72,.16); color: #4ecb82;
                           font-size: 11px; padding: 2px 7px; border-radius: 3px; margin: 0 4px 4px 0; }
#footer .ck-copy { border-top: 1px solid #333; text-align: center; color: #888;
                   font-size: 12px; padding: 14px 10px; line-height: 1.8; }
#footer .ck-copy a { color: #888; text-decoration: none; }
#footer .ck-copy a:hover { color: #0a9e48; }

/* ---------- 9. 漂浮聯絡球（桌面） ---------- */
.ck-float { position: fixed; right: 14px; bottom: 90px; z-index: 9000; display: flex;
            flex-direction: column; gap: 9px; }
.ck-float a { width: 52px; height: 52px; border-radius: 50%; display: flex; flex-direction: column;
              align-items: center; justify-content: center; text-decoration: none; color: #fff;
              font-size: 11px; line-height: 1.15; text-align: center; box-shadow: 0 2px 9px rgba(0,0,0,.26);
              transition: transform .15s; }
.ck-float a:hover { transform: scale(1.07); color: #fff; }
.ck-float a.f-wa { background: #25D366; }
.ck-float a.f-wx { background: #07C160; }
.ck-float a.f-tel { background: #0a9e48; }

/* 微信 QR 彈出層 */
.ck-qrbox { position: fixed; right: 78px; bottom: 90px; z-index: 9100; background: #fff;
            padding: 12px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.3); display: none; }
.ck-qrbox.on { display: block; }
.ck-qrbox img { width: 168px; height: 168px; display: block; }
.ck-qrbox p { margin: 8px 0 0; font-size: 12px; color: #555; text-align: center; }
.ck-qrbox .x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
               background: #333; color: #fff; text-align: center; line-height: 22px; cursor: pointer; font-size: 15px; }

/* ---------- 10. 手機底部三鍵行動欄 ---------- */
.ck-mbar { display: none; }

/* ============================================================
   手機版（768px 以下）
   ============================================================ */
@media (max-width: 768px) {
  .ck-hero { padding: 18px 14px 14px; }
  .ck-hero h1 { font-size: 21px; }
  .ck-hero .sub { font-size: 13px; }

  .ck-stats .in { flex-wrap: wrap; padding: 12px 6px; }
  .ck-stats .s { flex: 0 0 50%; border-right: 0; padding: 7px 0; }
  .ck-stats .s b { font-size: 21px; }

  .ck-intro { padding: 20px 14px; }
  .ck-intro h2 { font-size: 18px; }
  .ck-btns { flex-direction: column; }
  .ck-btn { text-align: center; padding: 12px 16px; }
  .ck-svc { grid-template-columns: repeat(2, 1fr); }

  .ck-cred .in { padding: 12px 14px; gap: 8px 14px; }
  .ck-cred .c { font-size: 12px; }

  .ck-cases { padding: 22px 14px; }
  .ck-cases h2 { font-size: 18px; }
  .ck-cases .g { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ck-cases .c img { height: 96px; }
  .ck-cases .c .t b { font-size: 12.5px; min-height: 34px; }
  .ck-cases .c .t span { font-size: 10.5px; }

  .ck-faq .in { padding: 22px 14px; }
  .ck-faq h2 { font-size: 18px; }

  .ck-cta2 .in { padding: 22px 14px; }
  .ck-cta2 h2 { font-size: 18px; }
  .ck-cta2 .ck-btns { flex-direction: column; }

  #footer .ck-fcols { grid-template-columns: 1fr; gap: 16px; padding: 20px 14px 14px; }

  /* 桌面漂浮球在手機隱藏，改用底部三鍵 */
  .ck-float { display: none; }
  .ck-qrbox { right: 50%; transform: translateX(50%); bottom: 76px; }

  .ck-mbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0;
             bottom: 0; z-index: 9000; box-shadow: 0 -2px 10px rgba(0,0,0,.18); }
  .ck-mbar a { display: block; text-align: center; padding: 11px 0; color: #fff;
               text-decoration: none; font-size: 13px; font-weight: 600; }
  .ck-mbar a.m-wa { background: #25D366; }
  .ck-mbar a.m-tel { background: #0a9e48; }
  .ck-mbar a.m-q { background: #1b1b1b; }

  /* 避免內容被底欄遮住 */
  #footer { padding-bottom: 46px; }
}

/* 首頁 H1 只應出現一次；內頁 H1 由各模板自行處理 */
.ck-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip: rect(0 0 0 0); white-space: nowrap; }