/* ══════════════════════════════════════════════════════════════════════════
   GOKURAKUGAI — LEGAL / INFO PAGE DESKTOP LAYER
   Loaded AFTER each page's own inline <style> block. The wide-layout rules
   below are scoped to `.page.doc-page-wide` on purpose: only the pages that
   were restructured with a <div class="doc-layout"> sidebar (about, faq,
   contact, privacy-policy, terms-of-service, disclaimer,
   community-guidelines, modmail) carry that class. Pages that still use the
   plain single-column template (appeal, banned-words, links) also load this
   file for the small shared tweaks at the bottom, but are never widened,
   since their inner content was never redesigned to fill the extra space.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar shell (markup added alongside <main class="doc">) ─────────── */
.doc-layout{width:100%;display:block;}
.doc-side{display:none;}
.doc-side-inner{position:sticky;top:5.4rem;}

.side-card{background:var(--surface);border:1px solid var(--border);padding:1.15rem 1.25rem;margin-bottom:1.1rem;}
.side-card-title{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:.85rem;display:flex;align-items:center;gap:.5rem;}
.side-card-title::before{content:'';width:10px;height:1px;background:var(--gold-d);}
.side-nav{list-style:none;display:flex;flex-direction:column;gap:.1rem;}
.side-nav a{display:block;padding:.4rem .1rem;font-size:.83rem;line-height:1.4;color:var(--text-m);text-decoration:none;border-left:2px solid transparent;padding-left:.7rem;margin-left:-.1rem;transition:color .18s,border-color .18s;}
.side-nav a:hover{color:var(--gold);border-left-color:var(--gold-d);}
.side-links{list-style:none;display:flex;flex-direction:column;gap:.05rem;}
.side-links li a{display:flex;align-items:center;gap:.5rem;padding:.38rem .1rem;font-size:.83rem;color:var(--text-d);text-decoration:none;border-left:2px solid transparent;padding-left:.7rem;margin-left:-.1rem;transition:color .18s,border-color .18s,background .18s;}
.side-links li a:hover{color:var(--gold);border-left-color:var(--gold-d);}
.side-links li a[aria-current="page"]{color:var(--gold);border-left-color:var(--gold);background:rgba(201,168,76,.07);font-weight:600;}
.side-links li a svg{width:12px;height:12px;flex-shrink:0;opacity:.6;stroke:currentColor;fill:none;}
.side-note{font-family:'Crimson Pro',serif;font-style:italic;font-size:.78rem;line-height:1.6;color:var(--text-m);}
.side-nav--scroll{max-height:46vh;overflow-y:auto;padding-right:.4rem;}
.side-nav--scroll::-webkit-scrollbar{width:4px;}
.side-nav--scroll::-webkit-scrollbar-thumb{background:var(--border);}
.side-nav--scroll{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}

/* ── Desktop grid: sidebar + content ────────────────────────────────────
   Below this width every page renders exactly as it did before — single
   centered column. At and above it we open up the extra horizontal room
   a large monitor actually has, instead of just stretching page margins.
   Scoped to .doc-page-wide so pages without a redesigned interior never
   get stretched past their intended reading width. ─────────────────── */
@media(min-width:1180px){
  .page.doc-page-wide{max-width:1360px;margin:0 auto;padding-left:2.5rem;padding-right:2.5rem;}
  .doc-page-wide .doc-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:3.4rem;align-items:start;width:100%;justify-items:start;}
  .doc-page-wide .doc-side{display:block;width:100%;}
  .doc-page-wide .hero-standalone{margin-bottom:1.2rem;}
  .doc-page-wide .doc{max-width:100%;width:100%;}
  .doc-page-wide .doc .doc-meta{font-size:.62rem;}
  .doc-page-wide .doc .sec-body p{font-size:1.06rem;}
  .doc-page-wide .foot{max-width:1360px;}
  .doc-page-wide .hero-standalone .hero-kanji{font-size:1.65rem;}
  .doc-page-wide .hero-standalone .hero-logo{max-width:210px;}
}

/* ── Footer: extra breathing room, safe on every page that loads this file ──
   Some page templates center .foot via a flex-column .page (align-items:
   center); others (banned-words, appeal) use a plain centered block .page
   with non-flex children, which never centered .foot on its own. Auto
   margins fix the latter and are a harmless no-op on the former. ────── */
@media(min-width:1180px){
  .foot-grid{gap:1.8rem 3rem;}
}
.foot{margin-left:auto;margin-right:auto;}

/* ── Print: keep the sidebar out of printed policy pages ────────────────── */
@media print{
  .doc-side,nav.topbar{display:none!important;}
  .doc-layout{display:block!important;}
}