/* ===== Base / Tokens ===== */
:root{
  --bg:#ffffff; --primary:#8e78ff; --primary-600:#7a63ff; --ink:#2a2342; --sub:#6f6a86;
  --card:#ffffff; --muted:#f1edff; --line:#ece7ff; --shadow:0 10px 30px rgba(140,120,255,.18); --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans TC",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--ink); background:#fff;
}
a{color:inherit; text-decoration:none}
.container{width:min(1160px, 92vw); margin:0 auto}

/* ===== Header（由 partials 注入） ===== */
.header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:flex-start; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.06em; color:var(--primary); font-size:22px}
.brand-badge{width:50px; height:50px; border-radius:10px; display:block; object-fit:cover; box-shadow:0 6px 16px rgba(140,120,255,.35)}
.nav{display:flex; align-items:center; gap:14px; margin-left:auto;}
.nav > a{color:var(--sub); font-weight:500}
.nav > a:hover{color:var(--ink)}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; font-size:14px; letter-spacing:.02em; transition:.2s ease; border:1px solid transparent}
.btn.primary{background:linear-gradient(90deg,#9e8bff,#7a63ff); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff;border-color:var(--line); color:#6f6a86}
.dropdown{position:relative}
.dropdown-toggle{display:inline-flex; align-items:center; gap:6px; padding:10px 12px; border-radius:10px; font-weight:600; color:#6f6a86; cursor:pointer}
.dropdown-toggle:after{content:"▾"; font-size:12px; transform:translateY(-1px); opacity:.7}
.menu{
  position:absolute; top:100%; left:0; margin-top:8px; min-width:180px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 12px 28px rgba(30,10,70,.12); display:none; z-index:1000
}
.menu a{display:block; padding:10px 12px; border-radius:8px; color:var(--ink); font-weight:600; font-size:14px}
.menu a:hover{background:var(--muted); color:#5a49ff}
.dropdown:hover .menu, .dropdown:focus-within .menu{display:block}

/* ===== Mobile Nav / Drawer（供 header partial 使用） ===== */
#nav-toggle{display:none}
.hamburger{display:none; position:relative; width:40px; height:40px; border:none; background:transparent; cursor:pointer; margin-left:12px;}
.hamburger span,.hamburger::before,.hamburger::after{content:""; position:absolute; left:50%; top:50%; width:26px; height:3px; background:#1f1f1f; border-radius:2px; transform:translate(-50%,-50%)}
.hamburger::before{ transform:translate(-50%, calc(-50% - 8px)); }
.hamburger::after{  transform:translate(-50%, calc(-50% + 8px)); }
.drawer-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:.25s ease; z-index:45;}
.drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(90vw, 340px);
  background:#fff; border-left:1px solid var(--line); transform:translateX(100%); transition:transform .28s ease; z-index:50; display:flex; flex-direction:column;
}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line);}
.drawer-title{font-weight:800; color:#6b5cff}
.close-btn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; background:#fff; font-size:18px; color:#6b5cff; font-weight:900;}
.drawer-list{padding:6px 0}
.drawer-item{display:block; padding:16px; border-bottom:1px solid var(--line); color:#2a2342; font-weight:700;}
.drawer-item:hover{background:var(--muted)}
.sub input{display:none}
.sub label.drawer-item{position:relative; cursor:pointer}
.sub label.drawer-item::after{content:"▾"; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(0deg); transition:.2s; font-size:12px; color:#6b5cff;}
.sublist{max-height:0; overflow:hidden; transition:max-height .25s ease; background:#fff;}
.sublist a{display:block; padding:12px 24px; color:#5a5670; border-bottom:1px solid var(--line)}
.sublist a:last-child{border-bottom:none}
.sub input:checked ~ label.drawer-item::after{transform:translateY(-50%) rotate(180deg)}
.sub input:checked ~ .sublist{max-height:200px}
#nav-toggle:checked ~ .drawer-backdrop{opacity:1; pointer-events:auto}
#nav-toggle:checked ~ .drawer{transform:translateX(0)}

/* ===== Footer（由 partials 注入） ===== */
.footer{
  margin-top:56px; padding:36px 0 60px;
  background:linear-gradient(180deg,#f8f6ff,#f3f1ff); border-top:1px solid var(--line)
}
.footer-grid{display:grid; grid-template-columns: 1fr auto; align-items:start; gap:12px}
.social{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.social-icons{display:flex; flex-direction:row; gap:4px}
.store-group{display:flex; flex-direction:column; align-items:flex-start; gap:1px}
/* index / faq 用到的圖示/商店按鈕造型（放 core 無害） */
.icon{width:36px; height:36px; border-radius:10px; background:#ffffff; border:1px solid var(--line); display:grid; place-items:center; font-weight:800; color:#6b5cff}
.store{display:inline-block; padding:10px 14px; border-radius:14px; font-weight:700; font-size:13px}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:18px; padding-top:12px; border-top:1px solid var(--line)
}
.copy{font-size:12px; color:#666}
.legal{display:flex; gap:48px}
.legal a{position:relative; display:inline-block; padding:0; background:transparent; border:none; color:#666; font-weight:400; font-size:12px; line-height:1.1; letter-spacing:0; text-decoration:none}
.legal a::after{content:""; display:block; width:100%; height:1px; background:#cfcfcf; border-radius:1px; margin-top:6px}
.legal a:hover{ color:#7a63ff; } .legal a:hover::after{ background:#8e78ff; }

/* ===== Download Modal（共用；HTML 在 footer partial，JS 控制） ===== */
.dl-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; opacity:0; transition:.2s; z-index:1000;}
.dl-backdrop.open{display:block; opacity:1;}
.dl-modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, 92vw); background:#fff; border-radius:16px; border:1px solid #ece7ff; box-shadow:0 18px 48px rgba(30,10,70,.18);
  padding:20px; z-index:1001; display:none;
}
.dl-modal.open{display:block;}
.dl-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.dl-title{font-weight:900; color:#6b5cff}
.dl-close{width:36px; height:36px; border-radius:10px; border:1px solid #ece7ff; background:#fff; cursor:pointer}
.dl-body{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center}
.dl-stores{display:flex; flex-direction:column; gap:12px}
.dl-stores a img{width:180px; height:58px; border-radius:12px; border:1px solid #ece7ff; background:#fff; object-fit:cover}
.dl-qr{display:flex; align-items:center; justify-content:center; background:#faf8ff; border:1px dashed #e3defa; border-radius:12px; padding:12px}
.dl-qr img{width:160px; height:160px; object-fit:contain}
.dl-tip{margin-top:8px; font-size:12px; color:#777; text-align:center}
@media (max-width:640px){ .dl-body{grid-template-columns:1fr} }

/* ===== Utilities ===== */
.breadcrumbs{width:min(1160px, 92vw); margin:18px auto 0; font-size:13px; color:#8f8aa6;}
.breadcrumbs a{color:#6b5cff; font-weight:700}
.breadcrumbs .sep{margin:0 6px; opacity:.5}

/* ---- Mobile ---- */
@media (max-width: 820px){
  .dropdown, .nav > a:not(.btn){display:none}
  .hamburger{display:block;}
  /* 全站：手機版隱藏頂部「兌換碼」按鈕 */
  .nav .btn.ghost{display:none}
}
@media (max-width: 620px){
  .footer{padding:28px 0 40px}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:10px}
}