/* L98 LIFE 隱私權政策頁 UIUX
   檔案位置：/assets/css/l98-privacy-policy.css
*/

:root{
    --l98-bg:#f7f4ef;
    --l98-card:#ffffff;
    --l98-ink:#1d2630;
    --l98-muted:#6d7785;
    --l98-soft:#eef2f7;
    --l98-line:rgba(31,42,55,.10);
    --l98-brand:#1f7a8c;
    --l98-brand2:#72c6b6;
    --l98-warm:#fff7e8;
    --l98-warn:#fff4db;
    --l98-danger:#9f4b24;
    --l98-shadow:0 18px 48px rgba(31,42,55,.10);
    --l98-radius:26px;
    --l98-topbar-h:64px;
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    background:var(--l98-bg);
}

body{
    margin:0;
    color:var(--l98-ink);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans TC",
        "PingFang TC",
        "Microsoft JhengHei",
        Arial,
        sans-serif;
    line-height:1.75;
    background:
        radial-gradient(circle at 18% 0%, rgba(114,198,182,.20), transparent 36%),
        radial-gradient(circle at 90% 12%, rgba(255,196,87,.16), transparent 32%),
        var(--l98-bg);
}

a{color:inherit}

.l98-policy-page{
    min-height:100vh;
    padding-top:calc(var(--l98-topbar-h) + env(safe-area-inset-top));
}

.l98-topbar{
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    right:0;
    height:calc(var(--l98-topbar-h) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--l98-line);
}

.l98-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-width:0;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.02em;
    color:var(--l98-ink);
}

.l98-brand img{
    width:34px;
    height:34px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(31,42,55,.13);
}

.l98-brand span{
    font-size:17px;
    white-space:nowrap;
}

.l98-menu-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:72px;
}

/* 備援 MENU：若原系統有自己的 menu_render，會優先使用原本的 */
.l98-menu-btn{
    border:1px solid rgba(31,42,55,.12);
    background:#fff;
    color:var(--l98-ink);
    border-radius:999px;
    padding:8px 11px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    box-shadow:0 8px 24px rgba(31,42,55,.08);
    cursor:pointer;
}

.l98-menu-btn span{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--l98-brand);
    display:block;
}

.l98-menu-btn b{
    margin-left:4px;
    font-size:12px;
    letter-spacing:.08em;
}

.l98-menu-panel{
    position:fixed;
    inset:0;
    z-index:1200;
    background:rgba(16,24,40,.22);
    display:none;
    align-items:flex-start;
    justify-content:flex-end;
    padding:calc(74px + env(safe-area-inset-top)) 14px 14px;
}

.l98-menu-panel.is-open{display:flex}

.l98-menu-card{
    width:min(280px, calc(100vw - 28px));
    background:#fff;
    border-radius:24px;
    box-shadow:var(--l98-shadow);
    padding:18px;
    border:1px solid var(--l98-line);
    position:relative;
}

.l98-menu-card a{
    display:block;
    text-decoration:none;
    padding:13px 14px;
    border-radius:16px;
    font-weight:750;
    color:var(--l98-ink);
}

.l98-menu-card a:hover,
.l98-menu-card a.active{
    background:var(--l98-soft);
    color:var(--l98-brand);
}

.l98-menu-close{
    position:absolute;
    top:10px;
    right:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:var(--l98-soft);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.l98-policy-main{
    width:min(1080px, 100%);
    margin:0 auto;
    padding:22px 16px 52px;
}

.l98-hero{
    position:relative;
    overflow:hidden;
    padding:34px 22px;
    border-radius:32px;
    background:
        linear-gradient(135deg, rgba(31,122,140,.96), rgba(114,198,182,.88)),
        var(--l98-brand);
    color:#fff;
    box-shadow:var(--l98-shadow);
}

.l98-hero:after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-70px;
    top:-80px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
}

.l98-hero-badge{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.26);
    font-size:13px;
    font-weight:800;
}

.l98-hero h1{
    position:relative;
    z-index:1;
    margin:16px 0 8px;
    font-size:clamp(30px, 6vw, 48px);
    line-height:1.15;
    letter-spacing:.03em;
}

.l98-hero p{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0;
    font-size:17px;
    opacity:.94;
}

.l98-hero-meta{
    position:relative;
    z-index:1;
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.l98-hero-meta span{
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.20);
    font-size:13px;
    font-weight:750;
}

.l98-toc{
    margin:16px 0;
    display:flex;
    gap:10px;
    overflow:auto;
    padding:2px 2px 8px;
    -webkit-overflow-scrolling:touch;
}

.l98-toc a{
    flex:0 0 auto;
    text-decoration:none;
    background:rgba(255,255,255,.86);
    border:1px solid var(--l98-line);
    color:var(--l98-ink);
    border-radius:999px;
    padding:9px 13px;
    font-size:14px;
    font-weight:800;
    box-shadow:0 6px 18px rgba(31,42,55,.06);
}

.l98-toc a:hover{
    color:var(--l98-brand);
    border-color:rgba(31,122,140,.28);
}

.l98-policy-card{
    background:rgba(255,255,255,.92);
    border:1px solid var(--l98-line);
    border-radius:var(--l98-radius);
    box-shadow:var(--l98-shadow);
    padding:26px;
}

.l98-policy-card section{
    scroll-margin-top:92px;
    padding:24px 0;
    border-bottom:1px solid var(--l98-line);
}

.l98-policy-card section:first-child{padding-top:4px}
.l98-policy-card section:last-child{border-bottom:0;padding-bottom:4px}

.l98-policy-card h2{
    margin:0 0 12px;
    font-size:24px;
    line-height:1.35;
    letter-spacing:.01em;
}

.l98-policy-card h3{
    margin:20px 0 8px;
    font-size:18px;
    line-height:1.4;
    color:#263544;
}

.l98-policy-card p{
    margin:10px 0;
    color:#344253;
    font-size:16px;
}

.l98-policy-card ul{
    margin:10px 0 0;
    padding-left:20px;
}

.l98-policy-card li{
    margin:8px 0;
    color:#344253;
}

.l98-note,
.l98-warning{
    margin:18px 0 0;
    padding:15px 16px;
    border-radius:18px;
    border:1px solid rgba(31,122,140,.16);
    background:#f0fbf8;
    color:#263544;
}

.l98-warning{
    border-color:rgba(159,75,36,.20);
    background:var(--l98-warn);
    color:var(--l98-danger);
}

.l98-contact-box{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-top:18px;
}

.l98-contact-box div{
    border:1px solid var(--l98-line);
    border-radius:18px;
    background:linear-gradient(180deg, #fff, #fafafa);
    padding:15px;
}

.l98-contact-box span{
    display:block;
    font-size:12px;
    color:var(--l98-muted);
    font-weight:800;
    margin-bottom:4px;
}

.l98-contact-box strong{
    display:block;
    font-size:15px;
    overflow-wrap:anywhere;
}

.l98-footer{
    width:min(1080px, 100%);
    margin:0 auto;
    padding:8px 16px 34px;
    color:var(--l98-muted);
    font-size:13px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.l98-footer-links{
    display:flex;
    gap:12px;
}

.l98-footer a{
    text-decoration:none;
    color:var(--l98-muted);
}

.l98-footer a:hover{color:var(--l98-brand)}

@media (max-width: 760px){
    :root{--l98-topbar-h:60px}

    .l98-topbar{
        padding-left:12px;
        padding-right:12px;
    }

    .l98-brand img{
        width:32px;
        height:32px;
        border-radius:11px;
    }

    .l98-brand span{
        font-size:16px;
    }

    .l98-policy-main{
        padding:16px 12px 42px;
    }

    .l98-hero{
        border-radius:26px;
        padding:28px 18px;
    }

    .l98-hero p{
        font-size:15.5px;
    }

    .l98-policy-card{
        border-radius:24px;
        padding:20px 17px;
    }

    .l98-policy-card section{
        padding:22px 0;
    }

    .l98-policy-card h2{
        font-size:21px;
    }

    .l98-policy-card h3{
        font-size:17px;
    }

    .l98-policy-card p,
    .l98-policy-card li{
        font-size:15.5px;
    }

    .l98-contact-box{
        grid-template-columns:1fr;
    }

    .l98-footer{
        padding-left:14px;
        padding-right:14px;
        flex-direction:column;
    }
}

@media print{
    .l98-topbar,
    .l98-toc,
    .l98-footer,
    .l98-menu-panel{
        display:none !important;
    }

    .l98-policy-page{
        padding-top:0;
    }

    body{
        background:#fff;
    }

    .l98-hero,
    .l98-policy-card{
        box-shadow:none;
    }

    .l98-hero{
        color:#111;
        background:#fff;
        border:1px solid #ddd;
    }
}