/* ===========================================================================
   GymNote — 隱私權政策與使用條款（compiled from scss/legal.scss）
   Loaded after styles.css. Edit the SCSS and recompile:
   sass scss/legal.scss css/legal.css --style=expanded
   =========================================================================== */

.lg-shell{width:100%;max-width:820px;margin:0 auto;padding-inline:clamp(18px,4vw,32px)}

/* ---------- header ---------- */
.lg-header{position:sticky;top:0;z-index:30;background:var(--bg0);border-bottom:1px solid var(--dvd)}
.lg-header__in{display:flex;align-items:center;gap:12px;padding-block:12px}
.lg-brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--tx);transition:opacity .22s ease}
.lg-brand:hover{opacity:.72}
.lg-mark{width:34px;height:34px;border-radius:9px;background:#111308;display:flex;align-items:center;justify-content:center;flex:none}
.lg-mark svg{width:28px;height:28px}
.lg-mark--sm{width:26px;height:26px;border-radius:7px}
.lg-mark--sm svg{width:21px;height:21px}
.lg-brand__word{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:23px;font-weight:700;letter-spacing:1.5px;line-height:1;color:var(--tx)}

/* ---------- document ---------- */
.lg-doc{padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(56px,8vw,104px)}
.lg-doc[hidden],[data-lang-block][hidden]{display:none}
.lg-doc__head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(22px,3vw,30px)}
.lg-doc h1{margin:0;font-size:clamp(28px,3.6vw,38px);font-weight:700;letter-spacing:.5px;line-height:1.3;color:var(--tx)}
.lg-date{margin:0;font-size:14px;color:var(--fnt)}

.lg-tabs{display:inline-flex;align-self:flex-start;gap:3px;margin-top:6px;background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:3px;max-width:100%}
.lg-tabs a{height:38px;padding:0 18px;border-radius:10px;display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--dim);white-space:nowrap;transition:background .22s ease,opacity .22s ease}
.lg-tabs a:hover{opacity:.72}
.lg-tabs a.is-on{background:var(--acc);color:var(--onAcc)}
.lg-tabs a.is-on:hover{opacity:1}

.lg-doc h2{margin:clamp(30px,4vw,40px) 0 12px;font-size:clamp(18px,2.2vw,21px);font-weight:700;line-height:1.5;color:var(--tx);scroll-margin-top:80px}
.lg-doc p,.lg-doc li{font-size:15.5px;line-height:1.95;color:var(--txS);text-wrap:pretty}
.lg-doc p{margin:0 0 14px}
.lg-doc .lg-intro{font-size:16px;color:var(--dim)}
.lg-doc ul{margin:0 0 14px;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.lg-doc li::marker{color:var(--limeT)}

.lg-contact{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:clamp(16px,2.2vw,20px) clamp(18px,2.4vw,22px)}
.lg-doc .lg-contact p{margin:0;color:var(--tx)}

/* ---------- footer ---------- */
.lg-footer{background:var(--bg0);border-top:1px solid var(--dvd)}
.lg-footer__in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-block:22px}
.lg-footer__name{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:18px;font-weight:700;letter-spacing:1.2px;color:var(--tx)}
.lg-footer__copy{margin-left:auto;font-size:12.5px;color:var(--fnt)}

@media (max-width:560px){
  .lg-footer__in{justify-content:center;text-align:center}
  .lg-footer__copy{margin-left:0;width:100%}
}
@media (max-width:380px){
  .lg-brand__word{display:none}
  .lg-tabs a{padding:0 14px}
}