/* 來源：E:/sunling921/html/sunling-legal-pages.css（設計交付包）
 *
 * 原檔有會外漏到全站的規則，已改寫：
 *   body → .sl-page（拿掉 margin）
 *   * → .sl-page *
 *   a → .sl-page a
 *
 * :root 的變數保留原樣 —— 已比對過，跟現有 style.css 沒有同名變數。
 * 其餘規則一個字元都沒改。
 *
 * 搬進來的日期：2026-09-21
 */
:root{--blue:#26398c;--ink:#1f2937;--muted:#58677a;--mist:#eaf3f8;--warm:#faf9f5;--yellow:#f6d74a;--line:#d9e1e8}.sl-page *{box-sizing:border-box}.sl-page{background:#f1f5f6;color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
.page{max-width:1120px;margin:24px auto;background:var(--warm);box-shadow:0 12px 32px rgba(24,39,76,.09)}.sl-page a{color:inherit}
.legal-hero{padding:60px 52px 48px;background:linear-gradient(122deg,#fff 0%,#fdfdfb 51%,#dcecf3 100%)}
.legal-kicker{display:inline-block;padding:7px 10px;background:#fff0a6;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.09em}
.legal-hero h1{margin:16px 0 10px;color:var(--blue);font-size:38px;line-height:1.28}
.legal-hero p{max-width:690px;margin:0;color:#4c5d73;font-size:14px;line-height:1.9}
.legal-meta{margin-top:17px;color:#6d7d8f;font-size:12px}
.legal-content{max-width:860px;margin:0 auto;padding:56px 52px 72px;background:#fff}
.legal-content h2{margin:40px 0 12px;padding-top:6px;border-top:1px solid var(--line);color:var(--blue);font-size:22px;line-height:1.45}
.legal-content h2:first-child{margin-top:0}
.legal-content p,.legal-content li{color:var(--muted);font-size:14px;line-height:1.9}
.legal-content p{margin:0 0 14px}
.legal-content ul{margin:0 0 15px;padding-left:22px}
.legal-content a{color:var(--blue);font-weight:700;text-underline-offset:3px}
.legal-note{margin:25px 0 0;padding:17px 19px;border-left:4px solid var(--yellow);background:var(--mist);color:#4c5d73;font-size:13px;line-height:1.8}

.tag-main{padding:58px 52px 72px;background:var(--mist)}
.tag-head{display:flex;align-items:end;justify-content:space-between;gap:25px}
.tag-head h1{margin:8px 0 0;color:var(--blue);font-size:32px}
.tag-head p{max-width:410px;margin:0;color:var(--muted);font-size:13px;line-height:1.8;text-align:right}
.tag-intro{display:flex;align-items:center;gap:16px;margin:28px 0 30px;padding:15px 18px;border-left:4px solid var(--yellow);background:#fff;color:#526276;font-size:13px;line-height:1.7}
.tag-intro b{flex:0 0 auto;color:var(--blue)}
.tag-intro a{flex:0 0 auto;margin-left:auto;color:var(--blue);font-weight:700;text-decoration:none}
.tag-sections{display:grid;gap:16px}
.tag-section{padding:23px 24px 25px;border:1px solid #cbdbe5;background:rgba(255,255,255,.78)}
.tag-section h2{margin:0;color:var(--blue);font-size:18px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tag-cloud a{padding:9px 13px;border:1px solid #c8d7e1;background:#fff;color:var(--blue);font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s,background .2s}
.tag-cloud a:hover,.tag-cloud a:focus-visible{transform:translateY(-3px);border-color:var(--blue);background:var(--blue);color:#fff;outline:2px solid var(--yellow);outline-offset:2px}
.tag-cloud a:nth-child(3n){font-size:16px}
.tag-cloud a:nth-child(4n){background:#fff5bd}
.tag-update{margin:22px 0 0;color:#69798b;font-size:12px;line-height:1.8}

.shipping-main{padding:58px 52px 72px;background:var(--mist)}
.shipping-card{max-width:750px;margin:0 auto;padding:35px;background:#fff;border:1px solid var(--line)}
.shipping-card h1{margin:9px 0;color:var(--blue);font-size:32px}
.shipping-card p{color:var(--muted);font-size:14px;line-height:1.9}
.shipping-status{margin:22px 0;padding:16px 18px;border-left:4px solid var(--yellow);background:#fff8dc;color:#665514;font-size:14px;line-height:1.75}
.shipping-card a{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:11px 16px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;text-decoration:none}

@media(max-width:900px){.sl-page{background:var(--warm)}.page{margin:0;box-shadow:none}
  .legal-hero,.legal-content,.tag-main,.shipping-main{padding-left:22px;padding-right:22px}
  .legal-hero{padding-top:47px;padding-bottom:39px}
  .legal-hero h1,.shipping-card h1{font-size:31px}
  .legal-content{padding-top:45px}.legal-content h2{font-size:20px}
  .tag-head{display:block}.tag-head h1{font-size:28px}.tag-head p{max-width:none;margin-top:9px;text-align:left}
  .tag-intro{display:block;margin-top:22px}.tag-intro span{display:block;margin-top:5px}.tag-intro a{display:inline-block;margin:9px 0 0}
  .tag-section{padding:20px}.shipping-card{padding:25px}
}

/* 購物指南與功能籌備頁：先說明現況，再提供可使用的下一步。 */
.commerce-main{background:var(--mist)}
.commerce-hero{padding:58px 52px 50px;background:linear-gradient(122deg,#fff 0%,#fdfdfb 52%,#dcecf3 100%)}
.commerce-hero h1,.coming-main h1{margin:16px 0 13px;color:var(--blue);font-size:38px;line-height:1.35}
.commerce-hero p{max-width:670px;margin:0;color:#4c5d73;font-size:14px;line-height:1.9}
.commerce-actions,.coming-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}
.commerce-actions a,.coming-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;text-decoration:none}
.commerce-actions a.is-outline,.coming-actions a.is-outline{border:1px solid var(--blue);background:transparent;color:var(--blue)}
.commerce-section{padding:54px 52px 60px;background:#fff}
.commerce-section-head span{color:#637790;font-size:11px;font-weight:800;letter-spacing:.1em}
.commerce-section-head h2{margin:7px 0 24px;color:var(--blue);font-size:27px}
.commerce-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.commerce-steps li{padding:20px 18px;border:1px solid var(--line);background:#fbfcfc}
.commerce-steps b{display:block;margin-bottom:18px;color:#e0b800;font-size:22px;line-height:1}
.commerce-steps h3{margin:0 0 8px;color:var(--blue);font-size:16px}
.commerce-steps p{min-height:72px;margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.commerce-steps a{color:var(--blue);font-size:12px;font-weight:700;text-decoration:none}
.commerce-status{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:35px 52px 40px;background:#f3e7ae}
.commerce-status h2{margin:9px 0 7px;color:var(--blue);font-size:22px}
.commerce-status p{max-width:680px;margin:0;color:#4c5d73;font-size:13px;line-height:1.8}
.commerce-status>a{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:43px;padding:10px 15px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;text-decoration:none}
.coming-main{padding:70px 52px 76px;background:linear-gradient(132deg,#fdfdfb 0%,#e7f1f5 100%)}
.coming-main>p{max-width:680px;margin:0;color:#4c5d73;font-size:15px;line-height:1.9}
.coming-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.coming-grid section{padding:22px 20px;border:1px solid #c8d9e3;background:rgba(255,255,255,.82)}
.coming-grid h2{margin:0 0 9px;color:var(--blue);font-size:18px}
.coming-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.coming-note{margin-top:22px;padding:16px 18px;border-left:4px solid var(--yellow);background:#fff;color:#526276;font-size:13px;line-height:1.8}
@media(max-width:900px){
  .commerce-hero,.commerce-section,.commerce-status,.coming-main{padding-left:22px;padding-right:22px}
  .commerce-hero,.coming-main{padding-top:48px;padding-bottom:50px}
  .commerce-hero h1,.coming-main h1{font-size:31px}
  .commerce-section{padding-top:42px;padding-bottom:46px}.commerce-section-head h2{font-size:24px}
  .commerce-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.commerce-steps p{min-height:0}
  .commerce-status{display:block;padding-top:30px;padding-bottom:34px}.commerce-status>a{margin-top:18px}
  .coming-grid{grid-template-columns:1fr}
}
@media(max-width:520px){.commerce-steps{grid-template-columns:1fr}}

/* ============================================================
 * 移植補充（不在設計交付包裡）
 *
 * 文章頁的外層原本是 class="article box"，但舊站 style.css 有
 *   .article h1 { background: 紅色漸層; display:block !important }
 * 會把設計稿的標題塗成紅底。外層改成 legal-article 之後那條就不再命中，
 * 但原本掛在 .article 底下的附件按鈕樣式也一起失效，這裡補回來。
 * ============================================================ */
.legal-article .download_wrapper { margin: 24px 0; }
.legal-article .download_wrapper .button { display: inline-flex; align-items: center; gap: 8px; }