/* 基礎變數 */
:root { --c-bg:#f3f7fb; --c-paper:#ffffff; --c-ink:#12233f; --c-muted:#60718b; --c-line:#d9e4f1; --c-blue:#1e66d0; --c-navy:#123a78; --c-teal:#16887f; --c-gold:#cf8617; --g-hero:linear-gradient(135deg,#eef7ff 0%,#ffffff 58%,#fff8eb 100%); --shadow:0 18px 42px rgba(18,35,70,.11); }
/* 全域排版 */
body.product-detail-page { margin:0; min-height:100vh; background:var(--c-bg); color:var(--c-ink); font-family:Arial,"Microsoft JhengHei","PingFang TC",sans-serif; }
.fw-black { font-weight:900; }
.site-header { background:rgba(255,255,255,.9); border-bottom:1px solid rgba(217,228,241,.9); backdrop-filter:blur(12px); }
.site-header .navbar { min-height:70px; }
.site-header .navbar-brand { color:var(--c-navy); }
.site-header .nav-link { color:#1d3768; font-weight:800; }
.site-header .nav-link.active,.site-header .nav-link:hover { color:var(--c-blue); }
.site-footer { margin-top:50px; padding:30px 0; border-top:1px solid var(--c-line); background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); color:var(--c-muted); }
.site-footer-inner { width:min(1180px,calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; justify-content:space-between; gap:18px 28px; }
.site-footer-copy { min-width:0; }
.site-footer-head { display:flex; align-items:center; gap:12px; }
.site-footer-mascot { width:64px; height:64px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(18,35,70,.12)); }
.site-footer-brand { display:inline-flex; align-items:center; color:var(--c-navy); font-size:18px; font-weight:900; }
.site-footer-tagline { display:block; margin-top:4px; line-height:1.6; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; }
.footer-links a { color:var(--c-navy); font-weight:800; text-decoration:none; padding:6px 0; }
.visitor-stats { display:flex; flex-wrap:wrap; gap:8px; color:var(--c-muted); font-size:13px; }
.visitor-stats .visitor-stat { min-height:32px; display:inline-flex; gap:5px; align-items:center; color:inherit; text-decoration:none; border:1px solid var(--c-line); border-radius:999px; background:rgba(255,255,255,.82); padding:5px 10px; box-shadow:0 6px 18px rgba(18,35,70,.06); }
.visitor-stats a.visitor-stat:hover,.footer-links a:hover { color:var(--c-blue); }
.visitor-stat-primary { border-color:rgba(30,102,208,.22) !important; background:#eef6ff !important; }
.visitor-stat-label { min-height:32px; display:inline-flex; align-items:center; color:var(--c-navy); font-weight:900; }
.visitor-stats strong { color:var(--c-navy); }
@media (max-width:720px) { .site-footer-inner { grid-template-columns:1fr; } .footer-links { justify-content:flex-start; } .site-footer-mascot { width:56px; height:56px; } }
.member-pill { border:1px solid rgba(30,102,208,.18); border-radius:999px; background:#f5f9ff; }
.eyebrow { margin:0 0 8px; color:var(--c-teal); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:0; }
/* 商品詳情 */
.product-hero { padding:74px 0 34px; background:var(--g-hero); }
.product-hero h1 { color:#0d2f68; font-size:clamp(36px,5vw,64px); line-height:1.08; font-weight:900; }
.product-hero p { max-width:760px; color:#445671; line-height:1.7; }
.product-price { color:var(--c-blue); font-size:clamp(42px,5vw,64px); line-height:1; font-weight:900; }
.product-code { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.product-code span { border:1px solid rgba(30,102,208,.18); border-radius:999px; background:#fff; color:var(--c-navy); padding:7px 11px; font-size:13px; font-weight:900; }
.detail-main { margin-top:-24px; position:relative; z-index:1; }
.detail-card { border:1px solid var(--c-line); border-radius:8px; background:#fff; padding:clamp(20px,4vw,32px); box-shadow:0 10px 26px rgba(18,35,70,.08); }
.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--c-line); border-radius:8px; background:var(--c-line); }
.detail-grid div { min-height:116px; display:grid; gap:6px; align-content:center; background:#fff; padding:18px; }
.detail-grid span { color:var(--c-muted); font-size:13px; font-weight:900; }
.detail-grid strong { color:#10285b; font-size:clamp(20px,2.4vw,30px); line-height:1.12; }
.step-list { display:grid; gap:12px; counter-reset:steps; }
.step-list article { display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; border:1px solid var(--c-line); border-radius:8px; background:#fbfdff; padding:16px; }
.step-list article::before { counter-increment:steps; content:counter(steps); width:40px; height:40px; display:grid; place-items:center; border-radius:999px; background:var(--c-blue); color:#fff; font-weight:900; }
.step-list h2 { margin:0; color:#10285b; font-size:21px; font-weight:900; }
.step-list p,.note-list li { color:var(--c-muted); line-height:1.65; }
.note-list { margin:0; padding-left:20px; }
.empty-box { min-height:420px; display:grid; place-items:center; text-align:center; }
@media (max-width:991.98px) { .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { .detail-grid { grid-template-columns:1fr; } .step-list article { grid-template-columns:1fr; } }