/* 隱私權政策 / 服務條款共用樣式（/privacy.html、/terms.html）。
只管「呈現」：法律條文全部留在各頁 HTML，這裡不碰文字。
視覺語言對齊 /guide/guide.css（深色、金色重點、卡片）。
搭配 legal.js 漸進增強（目錄、閱讀進度、回到頂部顯示時機）；沒 JS 時全文照樣可讀。
改版請把兩頁引用的 ?v= 一起更新。 */
html{background:#1c2230}
.legal{
--l-line:#ffffff17; --l-card:#ffffff08; --l-card2:#ffffff0d;
--l-ink2:#d7dcf0; --l-accent2:#ff9f5c;
background:
radial-gradient(90% 50% at 50% -6%, #3a3f74 0%, transparent 60%),
radial-gradient(60% 40% at 100% 30%, #ffcf5c0a 0%, transparent 70%),
var(--pf-bg);
background-attachment:fixed;
overflow-x:hidden;
}
.legal .pf-doc{max-width:720px; padding:max(14px,env(safe-area-inset-top)) 16px 72px; line-height:1.85;
overflow-wrap:anywhere}
.legal .pf-doc p,.legal .pf-doc li{font-size:16px; color:var(--l-ink2); line-height:1.9; letter-spacing:.2px}
.legal .pf-doc b,.legal .pf-doc strong{color:#fff}
.legal .pf-doc a{text-underline-offset:3px; text-decoration-thickness:1px}
.legal .pf-doc .back{margin-bottom:14px; background:#ffffff10; border:1px solid var(--l-line)}
/* ── 頂部標題區 ── */
.lg-hero{position:relative; margin:0 0 18px; padding:22px 18px 20px; border-radius:20px; overflow:hidden;
background:
radial-gradient(80% 120% at 0% 0%, #ffcf5c26, transparent 60%),
radial-gradient(70% 120% at 100% 100%, #7a6cff2e, transparent 60%), #232945;
border:1px solid var(--l-line); box-shadow:0 18px 40px #0007}
.lg-hero::after{content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px; border-radius:50%;
background:radial-gradient(circle, #ffcf5c22, transparent 70%); pointer-events:none}
.lg-icon{width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
color:#2c1f04; margin-bottom:12px; background:linear-gradient(180deg,#ffd970,#ffb83d);
box-shadow:0 4px 0 #b97a12, 0 10px 22px #ffb83d33}
.legal .lg-hero h1{font-size:28px; line-height:1.25; margin:0 0 10px; letter-spacing:1px; text-shadow:0 2px 12px #000a}
.legal .pf-doc .lg-date{display:inline-flex; align-items:center; gap:6px; margin:0; padding:4px 12px;
border-radius:999px; font-size:13px; font-weight:700; color:var(--pf-accent);
background:#ffcf5c14; border:1px solid #ffcf5c40; line-height:1.6}
.legal .pf-doc .lg-date::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--pf-accent);
box-shadow:0 0 8px var(--pf-accent)}
/* ── 導言 ── */
.legal .pf-doc p.lg-lead{margin:0 0 20px; padding:14px 16px; border-radius:14px; font-size:16px;
background:var(--l-card); border:1px solid var(--l-line); border-left:3px solid var(--pf-accent); color:#e6e9f7}
/* ── 目錄（legal.js 產生）── */
.lg-toc{margin:0 0 22px; background:var(--l-card); border:1px solid var(--l-line); border-radius:14px; overflow:hidden}
.lg-toc summary{cursor:pointer; list-style:none; padding:12px 16px; font-weight:800; font-size:15px;
display:flex; align-items:center; gap:8px; color:#fff}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary::after{content:"▾"; margin-left:auto; color:var(--pf-muted); transition:transform .2s}
.lg-toc[open] summary::after{transform:rotate(180deg)}
.lg-toc summary .n{font-size:12px; font-weight:600; color:var(--pf-muted)}
.lg-toc ol{list-style:none; margin:0; padding:0 10px 12px}
.lg-toc li{margin:0 !important}
.lg-toc a{display:flex; gap:10px; align-items:baseline; padding:7px 8px; border-radius:9px; text-decoration:none;
color:var(--l-ink2) !important; font-size:14.5px; line-height:1.5}
.lg-toc a .i{flex:none; min-width:22px; font-size:12px; font-weight:800; color:var(--pf-accent)}
.lg-toc a:hover{background:#ffffff0c; color:#fff !important}
.lg-toc a.on{background:#ffcf5c18; color:#fff !important}
@media (min-width:1180px){
.lg-toc{position:fixed; top:84px; left:calc(50% + 380px); width:220px; max-height:calc(100vh - 120px); overflow:auto; margin:0}
.lg-toc summary{pointer-events:none}
.lg-toc summary::after{display:none}
}
/* ── 段落卡片與標題 ── */
.lg-sec{margin:0 0 14px; padding:18px 16px 8px; border-radius:16px; background:var(--l-card);
border:1px solid var(--l-line); scroll-margin-top:16px}
.lg-sec:target{border-color:#ffcf5c66; box-shadow:0 0 0 3px #ffcf5c1a}
.legal .pf-doc h2{display:flex; align-items:center; gap:12px; font-size:19px; line-height:1.4; margin:0 0 10px;
padding:0 0 12px; border-bottom:1px solid var(--l-line); color:#fff; position:relative}
.legal .pf-doc h2::after{content:""; position:absolute; left:0; bottom:-1px; width:56px; height:2px;
background:linear-gradient(90deg,var(--pf-accent),var(--l-accent2)); border-radius:2px}
.lg-n{flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
font-size:16px; font-weight:900; color:#2c1f04; background:linear-gradient(180deg,#ffd970,#ffb83d);
box-shadow:0 3px 0 #b97a12}
.lg-sep{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.legal .pf-doc h3{font-size:16.5px; color:#fff; margin:18px 0 6px; padding-left:10px; border-left:3px solid var(--pf-accent)}
.legal .pf-doc .lg-sec > p{margin:0 0 12px}
/* 條列：自訂金點 */
.legal .pf-doc .lg-sec ul{list-style:none; margin:0 0 10px; padding:0}
.legal .pf-doc .lg-sec li{position:relative; margin:0 0 10px; padding:0 0 0 20px}
.legal .pf-doc .lg-sec li::before{content:""; position:absolute; left:3px; top:.78em; width:7px; height:7px;
border-radius:2px; transform:rotate(45deg); background:var(--pf-accent); box-shadow:0 0 6px #ffcf5c66}
.legal .pf-doc .lg-sec li > b:first-child{color:var(--pf-accent)}
.legal .pf-doc ol:not(.lg-toc ol){padding-left:1.4em}
.legal .pf-doc ol li::marker{color:var(--pf-accent); font-weight:800}
/* 表格（未來條文若用到） */
.legal .pf-doc table{width:100%; border-collapse:collapse; margin:10px 0 14px; font-size:14.5px;
display:block; overflow-x:auto; border:1px solid var(--l-line); border-radius:12px}
.legal .pf-doc th,.legal .pf-doc td{border-bottom:1px solid var(--l-line); padding:9px 12px; text-align:left; vertical-align:top}
.legal .pf-doc th{background:#ffffff0d; color:#fff; font-weight:800}
/* 最後一節（聯絡我們）：信箱做成醒目膠囊 */
.lg-sec:last-of-type a[href^="mailto:"]{display:inline-block; margin-top:4px; padding:4px 12px; border-radius:999px;
background:#ffcf5c14; border:1px solid #ffcf5c40; text-decoration:none; font-weight:700}
/* ── 頁尾導覽 ── */
.lg-foot{margin-top:28px}
.lg-next{display:block; padding:16px 18px; border-radius:16px; text-decoration:none !important;
background:linear-gradient(135deg,#2f365a,#262c48); border:1px solid var(--l-line); box-shadow:0 10px 26px #0006;
position:relative; transition:transform .12s, border-color .12s}
.lg-next::after{content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--pf-accent)}
.lg-next:hover{border-color:#ffcf5c55; transform:translateY(-1px)}
.lg-next .k{display:block; font-size:12px; color:var(--pf-muted); letter-spacing:1px}
.lg-next b{display:block; font-size:18px; color:#fff; margin:2px 0}
.lg-next .d{display:block; font-size:13.5px; color:var(--l-ink2); padding-right:30px}
.lg-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:18px; font-size:13.5px}
.legal .pf-doc .lg-links a{color:var(--pf-muted); text-decoration:none; display:inline-flex; align-items:center; gap:5px}
.legal .pf-doc .lg-links a:hover{color:#fff}
/* ── 閱讀進度條／回到頂部 ── */
.lg-progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:50; pointer-events:none;
background:linear-gradient(90deg,var(--pf-accent),var(--l-accent2)); transform-origin:0 50%; transform:scaleX(0)}
.lg-top{position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom));
z-index:40; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:20px; font-weight:900; text-decoration:none; color:#2c1f04;
background:linear-gradient(180deg,#ffd970,#ffb83d); box-shadow:0 4px 0 #b97a12, 0 10px 22px #0008;
transition:opacity .2s, transform .2s}
html:not(.lg-js) .lg-top{display:none}
.lg-js .lg-top{opacity:0; transform:translateY(12px); pointer-events:none}
.lg-js .lg-top.show{opacity:1; transform:none; pointer-events:auto}
.lg-top:active{transform:scale(.94)}
@media (min-width:720px){
.legal .pf-doc{padding-top:32px}
.lg-hero{padding:30px 28px 26px}
.legal .lg-hero h1{font-size:34px}
.lg-sec{padding:22px 24px 10px}
.legal .pf-doc h2{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto !important}
.lg-top,.lg-next,.lg-toc summary::after{transition:none}
}
@media print{
.lg-progress,.lg-top,.lg-toc,.lg-foot,.lg-icon,.back{display:none !important}
.legal{background:#fff}
.lg-sec,.lg-hero,.legal .pf-doc p.lg-lead{background:none; border:none; box-shadow:none}
.legal .pf-doc p,.legal .pf-doc li,.legal .pf-doc h1,.legal .pf-doc h2{color:#000}
}