/* Legal pages (terms / privacy): a single quiet reading column, public.
   The document text is lawyer-approved and rendered verbatim by the shared
   renderer (articles, numbered 項 clauses, (1)-style 号 lists). */

.legal-body {
    display: grid;
    place-items: center;
    /* Center the card + footer as a group (two grid items). */
    align-content: center;
    gap: var(--space-lg);
    min-height: 100vh;
    padding: var(--space-lg);
}

.legal-main {
    width: 100%;
    max-width: 720px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-xl);
}

.legal-main p,
.legal-panel p {
    margin: 0 0 0.85em;
    line-height: 1.9;
}

/* Logged-in view: the document sits in a normal shell panel, capped to a
   comfortable reading measure inside the wide content area. */
.legal-panel {
    max-width: 820px;
}

/* Articles: one heading per 条, generous separation, no decoration. */
.legal-article { margin-top: var(--space-xl); }
.legal-article h2 {
    font-size: 1rem;
    margin: 0 0 0.7em;
}

/* Numbered clauses (項): plain decimal, the document's own voice. */
.legal-clauses {
    margin: 0 0 0.85em;
    padding-left: 1.6em;
}
.legal-clauses > li {
    margin-bottom: 0.7em;
    line-height: 1.9;
}
.legal-clauses > li > p { margin-bottom: 0.5em; }
.legal-clauses > li > p:last-child { margin-bottom: 0; }

/* Item lists (号): rendered as (1) (2) ... like the source document. */
.legal-points {
    list-style: none;
    counter-reset: legal-point;
    margin: 0.5em 0 0.85em;
    padding-left: 0.4em;
}
.legal-points > li {
    counter-increment: legal-point;
    position: relative;
    padding-left: 2.4em;
    margin-bottom: 0.4em;
    line-height: 1.85;
}
.legal-points > li::before {
    content: "(" counter(legal-point) ")";
    position: absolute;
    left: 0.4em;
    color: var(--ink-soft);
}

/* Establishment/effective-date line closes the document quietly. */
.legal-enacted {
    margin: var(--space-xl) 0 0;
    color: var(--ink-soft);
}

/* Match the auth screens' brand lockup width. */
.brand-center { text-align: center; margin-bottom: var(--space-xl); }
.brand-center .brand-logo { max-width: 190px; margin: 0 auto; }
.brand-center .brand-sub { max-width: 190px; margin-left: auto; margin-right: auto; }
.brand-home { display: block; }

.legal-title {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Copyright footer below the document card. */
.legal-foot .copyright {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
}

@media (max-width: 480px) {
    .legal-body { padding: var(--space-md); align-items: start; align-content: start; }
    .legal-main { margin-top: var(--space-xl); padding: var(--space-lg); }
}