/* ==========================================================================
   Page: legal  (site/legal/show — privacy, terms)
   --------------------------------------------------------------------------
   .legal-head  title card with breadcrumbs, the administration mark faint
   .legal       sticky numbered contents card + the sections card (.prose)
   ========================================================================== */

.legal-top { padding-top: var(--s-4); }
.legal-head { display: grid; gap: var(--s-6); min-height: 220px; align-content: space-between; }
.legal-head h1 { font-size: var(--fs-2xl); }
.legal-head__mark { position: absolute; inset-block-start: var(--s-5); inset-inline-end: var(--s-5); width: 120px; color: var(--navy); opacity: 0.07; }


.legal { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
.legal-toc ol { display: grid; gap: var(--s-1); counter-reset: legal; }
.legal-toc li { counter-increment: legal; }
.legal-toc a { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.legal-toc a::before { content: counter(legal, decimal-leading-zero); color: var(--teal); font-family: var(--font-num); font-weight: 700; }
.legal-toc a:hover { background: var(--card-soft); color: var(--navy); }

.legal-body { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.legal-body:only-child { grid-column: 1 / -1; max-width: 860px; }
.legal-section { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.legal-section + .legal-section { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.legal-section h2 { margin-bottom: var(--s-3); font-size: var(--fs-lg); }

.legal-more { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.legal-more a { padding: 0.5em 1.1em; border-radius: var(--r-pill); background: var(--card-soft); color: var(--navy); font-size: var(--fs-sm); font-weight: 600; }
.legal-more a:hover { background: var(--lemon); }

@media (max-width: 991.98px) {
    .legal { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
}