/* Shared shell for the legal pages. Carries the same tokens and colour
   schemes as the front page so Privacy and Terms stop reading like a
   different site. The legal copy itself is untouched. */

:root {
    --bg: #f5f6f8;
    --text: #17181c;
    --text-sub: #555a63;
    --text-mute: #696e79;
    --rule: #d5d8df;
    --rule-soft: #e6e8ed;
    --accent: #1a56c8;
    --rule-strong: #828b9e; /* 3.2:1 — for control borders, not hairlines */

    --serif: 'Noto Serif JP', 'YuMincho', 'Yu Mincho', serif;
    --sans: 'Noto Sans JP', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'Menlo', monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: light;
}

/* Smooth cross-document navigation to and from the front page where the
   browser supports it; silently ignored everywhere else. */
@view-transition { navigation: auto; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.9;
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 40px 120px;
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

::selection { background: var(--text); color: var(--bg); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── masthead ── */
.legal-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mute);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 56px;
}

.legal-top a {
    color: var(--text-sub);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.legal-top a:hover { color: var(--text); border-bottom-color: var(--text); }

/* WCAG 2.5.8: these standalone links measure ~23px and ~12px tall. Grow the
   hit area with an overlay so nothing shifts on the page. */
.legal-top a { position: relative; }
.legal-top a::before {
    content: '';
    position: absolute;
    inset: -5px -6px;
}

.legal-top .right {
    display: flex;
    align-items: center;
    gap: 14px;
}

h1 {
    font-family: var(--serif);
    font-size: clamp(26px, 4.4vw, 36px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-wrap: balance;
    border: 0;
    padding: 0;
    margin-bottom: 10px;
}

.meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    color: var(--text-mute);
    text-transform: uppercase;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 12px;
}

section { margin-bottom: 44px; }

h2 {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin: 40px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-soft);
}

p { text-wrap: pretty; }
p + p { margin-top: 12px; }

ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 6px;
    height: 1px;
    background: var(--text-mute);
}

/* English gloss under each Japanese clause */
.en {
    color: var(--text-sub);
    font-size: 13px;
    line-height: 1.85;
    margin-top: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--rule);
}

a { color: var(--accent); }
a:hover { opacity: 0.75; }

.legal-foot {
    margin-top: 72px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    color: var(--text-mute);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.legal-foot a {
    color: var(--text-sub);
    text-decoration: none;
    margin-right: 20px;
}
.legal-foot a:hover { color: var(--text); }

.legal-foot a { position: relative; }
.legal-foot a::before {
    content: '';
    position: absolute;
    inset: -8px -6px;
}

/* The page you are already on: state must not rest on colour alone. */
.legal-foot a[aria-current="page"] {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    body { padding: 44px 22px 80px; font-size: 14.5px; }
    .legal-top { margin-bottom: 36px; }
    h2 { font-size: 15.5px; }
}

/* ─── Print ───
   A policy page is the one thing on this site people actually print, usually
   to file or to send on. Drop the interface, put ink on white regardless of
   the chosen scheme, spell out link targets, and keep clauses off page breaks. */
@media print {
    :root {
        --bg: #fff;
        --paper: #fff;
        --text: #000;
        --text-sub: #333;
        --text-mute: #555;
        --rule: #999;
        --rule-soft: #ccc;
        --accent: #000;
        color-scheme: light;
    }

    .legal-top,
    .legal-foot {
        display: none;
    }

    body {
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 10.5pt;
        line-height: 1.65;
        background: #fff;
        color: #000;
    }

    h1 { font-size: 20pt; margin-bottom: 6pt; }
    h2 { font-size: 12pt; margin: 16pt 0 6pt; }

    /* Keep a heading with its clause, and never split a clause across pages. */
    h1, h2 { break-after: avoid-page; }
    section { break-inside: avoid-page; margin-bottom: 14pt; }

    .meta { border-bottom: 1pt solid #999; padding-bottom: 8pt; }

    .en {
        color: #333;
        font-size: 9pt;
        border-left: 0.5pt solid #999;
    }

    /* A printed page has no hover and no address bar, so an external link is
       useless unless its target is written out. */
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        word-break: break-all;
    }

    /* The enlarged tap targets are meaningless on paper. */
    .legal-top a::before,
    .legal-foot a::before { content: none; }
}