/* =============================================================================
   legal-page.css
   MOTTO Digital / AIOS — 日本語 法務ページ共通スタイルシート
   Shared by:  利用規約 (tos.html)  ·  プライバシーポリシー (privacy.html)

   Spec:      ./BUILD-SPEC.md  (read it before editing this file)
   Theme:     LIGHT only — gold #B8860B + white/warm-cream, Mincho display over
              Inter/system Gothic body. Decision already ratified; not revisited here.
   Source of truth for token VALUES:
              .claude/skills/motto-brand-kit/tokens/theme-light.css
              .claude/skills/motto-brand-kit/tokens/tokens.json  (meta.version 1.1.0)
   JP breaking rules from:
              .claude/skills/japanese-typography/SKILL.md
   JP punctuation / numerals from:
              business-operations/marketing/japanese-style-guide.md §8

   -- SELF-CONTAINMENT (hard requirement) --------------------------------------
   ZERO @import. ZERO url(). ZERO remote hosts. No webfonts, no CDN, no analytics,
   no tracking pixels. Font stacks are locally-installed families only, with a
   generic keyword terminating every stack. A privacy policy that fetches a
   third-party font in order to be read is self-refuting — see BUILD-SPEC §9.

   -- THEME STABILITY (deliberate) ---------------------------------------------
   This document has ONE look. There is intentionally NO
   `@media (prefers-color-scheme: dark)` block and no [data-theme] switch:
   inverting a legal document depending on the reader's OS setting changes the
   artifact they are consenting to, and breaks the print/PDF equivalence promise.
   Instead we (a) declare `color-scheme: only light`, which opts the page out of
   UA/Chrome-Android/LINE-webview auto-darkening, and (b) set an explicit
   background AND color on both `html` and `body` so nothing is ever inherited
   from a host theme.

   -- TOKEN SELECTOR NOTE ------------------------------------------------------
   The generated brand file scopes light tokens to `[data-theme="light"]`. These
   pages are single-theme, so the same values are declared on `:root` instead —
   values are copied verbatim from theme-light.css, names unchanged.
   ============================================================================= */


/* =============================================================================
   1. BRAND TOKENS — verbatim from tokens/theme-light.css (light theme)
      Do not edit a value here. Edit tokens.json upstream and re-copy.
   ============================================================================= */

:root {
  color-scheme: only light;

  /* ---- Surfaces (theme-light.css "Surface colors") ---- */
  --color-surface-base:     #FFFFFF;              /* page canvas */
  --color-surface-raised:   #F5F5F7;              /* neutral panel */
  --color-surface-overlay:  #FAFAFA;              /* table zebra / hover */
  --color-surface-inset:    #FBF6E7;              /* warm-cream editorial well */

  /* ---- Text (theme-light.css "Text colors") ---- */
  --color-text-heading:     #1D1D1F;              /* 16.83:1 on white — AAA */
  --color-text-body:        #6E6E73;              /*  5.07:1 on white — AA only */
  --color-text-muted:       #86868B;              /*  3.62:1 on white — FAILS AA.
                                                     Declared for token parity;
                                                     NOT used as text on this page.
                                                     See BUILD-SPEC §7 / D7. */
  --color-text-on-brand:    #FFFFFF;              /*  3.25:1 on gold — large only */
  --color-text-brand:       #9A7209;              /*  4.39:1 on white — FAILS AA
                                                     for normal text. Not used as
                                                     text here. See D4. */

  /* ---- Borders (theme-light.css "Border colors") ---- */
  --color-border-default:   rgba(0,0,0,0.06);
  --color-border-strong:    #E8E8ED;
  --color-border-brand:     rgba(184,134,11,0.35);

  /* ---- Brand — GOLD (theme-light.css "Brand colors") ---- */
  --color-brand-solid:      #B8860B;              /* rules / underlines only */
  --color-brand-strong:     #9A7209;
  --color-brand-soft:       rgba(184,134,11,0.08);/* :target tint */

  /* ---- Status (theme-light.css "Status colors") ---- */
  --color-status-success:   #1B7D5A;
  --color-status-danger:    #ef4444;              /* 3.76:1 — not used as text */
  --color-status-warning:   #B8860B;

  /* ---- Gradients / effects actually used ---- */
  --gradient-divider: linear-gradient(90deg, transparent, rgba(184,134,11,0.5), rgba(212,168,67,0.5), transparent);

  /* ---- Font families (theme-light.css "Font families (per-theme)") ---- */
  --font-display:  'Hiragino Mincho ProN', 'Yu Mincho', var(--font-jp-serif), serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, var(--font-jp-sans), sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-jp-sans:  'Noto Sans JP', sans-serif;
  --font-jp-serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;

  /* ---- Type size scale (shared, fluid) ---- */
  --text-h1:       clamp(2rem, 4vw, 3rem);
  --text-h2:       clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h3:       clamp(1.25rem, 2vw, 1.5rem);
  --text-body-lg:  clamp(1.125rem, 2vw, 1.25rem);
  --text-body:     clamp(0.9375rem, 1.5vw, 1.125rem);
  --text-small:    clamp(0.8125rem, 1vw, 0.875rem);

  /* ---- Line-height ---- */
  --leading-heading:    1.15;
  --leading-body:       1.7;
  --leading-jp-heading: 1.4;
  --leading-jp-body:    1.85;

  /* ---- Letter-spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.4px;

  /* ---- Spacing (8px base) ---- */
  --space-px:            8px;
  --space-gap-sm:       16px;
  --space-gap:          24px;
  --space-gap-lg:       32px;
  --space-gap-col:      48px;
  --space-header:       48px;
  --space-container-x:  24px;
  --space-section-fluid: clamp(3.5rem, 7vw, 5.5rem);

  /* ---- Radius / shadow ---- */
  --radius-base: 2px;
  --radius-pill: 9999px;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}


/* =============================================================================
   2. PAGE-LOCAL DERIVED TOKENS
      Every entry here is a documented deviation or an extension. No new hex
      values are introduced — colors are always a brand token or a copy of one.
      Deviation IDs (D1…D8) match BUILD-SPEC §10.
   ============================================================================= */

:root {
  /* --- D1: body prose ink -----------------------------------------------------
     Long-form JP legal prose is set in --color-text-heading (#1D1D1F, 16.83:1),
     NOT --color-text-body (#6E6E73, 5.07:1). 5.07:1 clears AA but not AAA, and
     this text is read on a phone, outdoors, at the moment of consent. Ink wins.
     --color-text-body is demoted to secondary/meta runs only.                  */
  --legal-ink:        var(--color-text-heading);
  --legal-ink-2:      var(--color-text-body);      /* meta, captions, footnotes */

  /* --- D2: reading size ------------------------------------------------------
     --text-body floors at 0.9375rem (15px). 15px is too small for a long JP
     legal document on a phone. This ramps 16px (≤~600px) → 17px (≥~850px).
     No --text-legal / long-form reading token exists in the brand kit — see
     BUILD-SPEC §11 U1. Adopt one the moment it lands.                          */
  --legal-body-size:  clamp(1rem, 0.85rem + 0.4vw, 1.0625rem);

  /* --- D3: metadata size (14px fixed; --text-small floors at 13px) ---------- */
  --legal-meta-size:  0.875rem;

  /* --- Measure: 40 full-width JP characters ---------------------------------
     JP print convention is 40字詰め. NOTE: `ch` is the advance of "0" — a
     HALF-width glyph — so 40 JP chars is 80ch, not 40ch. Use `em`, where
     1em ≈ one full-width character. 40em × 17px = 680px.                       */
  --legal-measure:    40em;

  /* --- Hanging-indent marker columns (tune per document length) ------------- */
  --marker-col-para:  2.25em;   /* 項: fits "10." at body size; → 3em past 第100項 */
  --marker-col-item:  2em;      /* 号: fits two kanji digits (十二); with the
                                   0.25em gap a single-kanji marker sits ~1.25em
                                   from its text — the 全角スペース that 号 numbering
                                   conventionally uses. → 3em past 十九 */
  --marker-col-toc:   4.5em;    /* 目次: fits 第10条; → 5.5em past 第100条 */

  /* --- Horizontal page padding (8px grid) ---------------------------------- */
  --legal-pad-x:      var(--space-gap-sm);   /* 16px < 768px; 24px at ≥768px */

  /* --- D6: extended local-only JP font stacks -------------------------------
     The japanese-typography skill says "always load from Google Fonts". That is
     impossible here (self-containment). The brand token stacks are preserved
     verbatim as the head of each list and EXTENDED with additional
     locally-installed family names so the fallback chain actually resolves on
     Windows, Android and the LINE in-app WebView. Appended names only — nothing
     reordered ahead of a brand-token entry, nothing removed.

     Appended, and why:
       'Hiragino Mincho Pro'          older macOS PostScript name
       'YuMincho' / '游明朝'           Windows / JP-locale family aliases
       'BIZ UDPMincho'                Windows 10 1809+ universal-design Mincho
       'MS Mincho' / 'ＭＳ 明朝'       universal Windows Mincho backstop
       'Noto Serif CJK JP'            the ACTUAL family name on Android/Linux
       'Source Han Serif JP'          Adobe-name twin of Noto Serif CJK
       'Hiragino Sans'                iOS 9+/macOS current Gothic family name
       'Hiragino Kaku Gothic ProN'    older macOS Gothic name
       'BIZ UDPGothic'                Windows 10 1809+ universal-design Gothic
       'Meiryo' / 'メイリオ'           highly legible Windows Gothic
       'Yu Gothic' / 'YuGothic' / '游ゴシック'
       'Noto Sans CJK JP'             the ACTUAL family name on Android/Linux
       'Segoe UI' / 'Helvetica Neue' / Arial   Latin fallbacks before the JP faces
     Every stack ends in a generic keyword, so a JP-locale UA resolves it even
     when no named family matches. On Android without a CJK serif installed the
     display face degrades to a generic serif or to Gothic — acceptable, because
     hierarchy here is carried by size, spacing and rule-work, never by the face. */
  --legal-font-display:
      'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', '游明朝',
      'BIZ UDPMincho', 'BIZ UDMincho', 'Noto Serif JP', 'Noto Serif CJK JP',
      'Source Han Serif JP', 'MS Mincho', 'ＭＳ 明朝', serif;

  --legal-font-body:
      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
      'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'BIZ UDGothic',
      'Meiryo', 'メイリオ', 'Yu Gothic', 'YuGothic', '游ゴシック',
      'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', sans-serif;

  --legal-font-mono: var(--font-mono);
}


/* =============================================================================
   3. RESET + BASE
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Explicit — never inherit a host theme. See header note. */
  background: var(--color-surface-base);
  color: var(--legal-ink);
  /* Stop iOS/LINE-WebView landscape auto-inflation WITHOUT blocking pinch-zoom. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No smooth scroll: this page ships zero motion (see §17). */
}

body {
  /* Explicit again — belt and braces. */
  background: var(--color-surface-base);
  color: var(--legal-ink);
  margin: 0;
  font-family: var(--legal-font-body);
  font-size: var(--legal-body-size);
  line-height: var(--leading-jp-body);
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
  text-align: left;            /* NEVER justify — see §5 note on inline-block */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, dt, figure, blockquote, table {
  margin: 0;
  padding: 0;
}

ol, ul { list-style: none; }


/* =============================================================================
   4. JAPANESE LINE-BREAKING BASELINE
      Verbatim intent of japanese-typography SKILL.md §1, minus balance.
   ============================================================================= */

h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, th, td, figcaption {
  overflow-wrap: break-word;   /* emergency: an over-long phrase wraps, never overflows */
  line-break: strict;          /* JIS X 4051 kinsoku shori — no break before っ 。 、 ゛ etc. */
  word-break: auto-phrase;     /* Chrome 119+ native BudouX. PREFERENCE only —
                                  silently falls back to char-break when a phrase
                                  does not fit. Enforcement for narrow containers
                                  is the build-time .bd wrap below. */
}

/* -- THE text-wrap: balance TRAP ---------------------------------------------
   `text-wrap: balance` prioritises line-length parity over phrase boundaries and
   will char-break a narrow heading to equalise line lengths — actively overriding
   auto-phrase (symptom: 「利用者の / 責任」 splitting mid-word).
   ADOPTED RULE: this stylesheet contains ZERO `text-wrap: balance`, at any width,
   on any element. Every heading-class container on this page is BudouX-pre-wrapped
   instead, and the inline-block spans give the engine enough structure to break
   sensibly without balance. This rule is grep-checkable:
       grep -c 'text-wrap' legal-page.css   →   must report only these comments.
   `text-wrap: pretty` is also absent — the spec confirms it does nothing for CJK. */

/* -- Build-time BudouX phrase wrap ------------------------------------------
   Emitted by the pre-wrap build step (BUILD-SPEC §3). One <span class="bd"> per
   文節. The browser treats an inline-block like a word: it breaks BETWEEN spans
   and cannot break inside one — that is ENFORCEMENT, not preference.
   HTML CONTRACT: adjacent spans must be emitted with ZERO whitespace between
   them (`</span><span`), otherwise a real space appears on screen AND in
   copy-paste — unacceptable in a document people quote. */
.bd {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Proportional-alternate metrics: tightens the optical gaps around Latin and
   numerals embedded in a JP run, and around full-width brackets/punctuation.
   Deliberately NOT combined with `text-spacing-trim` — two mechanisms doing the
   same job fight each other. */
:lang(ja) {
  font-feature-settings: "palt";
  letter-spacing: var(--tracking-normal);   /* never negative-track kana/kanji */
}

/* No italics in Japanese — no italic glyphs exist; the UA fakes a slant.
   The correct JP emphasis is 傍点 (emphasis dots). */
:lang(ja) i, :lang(ja) em, :lang(ja) cite, :lang(ja) address {
  font-style: normal;
}
:lang(ja) em {
  text-emphasis: filled dot;
  text-emphasis-position: over right;
}
strong, b { font-weight: 700; color: inherit; }   /* weight only — never a colour shift */

/* All-caps is meaningless for JP and can break mixed runs. */
:lang(ja) { text-transform: none; }

/* Latin runs inside JP prose: upright, own tracking, own face. */
[lang="en"] {
  font-family: var(--legal-font-body);
  font-style: normal;
}

/* A bare URL or e-mail address printed as text. Without this a long URL forces
   horizontal page scroll at 390px. */
.url, .email {
  font-family: var(--legal-font-mono);
  font-size: 0.9375em;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-break: auto;            /* strict kinsoku is meaningless inside a URL */
}


/* =============================================================================
   5. LAYOUT — one column, one measure, at every width
      Rejected: a wide desktop layout and a ≥1200px sticky-TOC sidebar. The
      measure is a legibility constant, not a function of viewport, so the phone
      (primary case) is never a degraded desktop design and the on-screen line
      breaks stay close to the printed ones.
      Also rejected: text-align: justify. Justification distributes slack
      BETWEEN inline-level boxes, and our BudouX spans ARE inline-level boxes —
      justify blows visible gaps between phrases.
   ============================================================================= */

.wrap {
  width: 100%;
  max-width: calc(var(--legal-measure) + var(--legal-pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--legal-pad-x);
  font-size: var(--legal-body-size);   /* the em basis for --legal-measure */
}

/* Anchored articles must not land flush against the viewport top. */
[id] { scroll-margin-top: var(--space-gap-lg); }


/* =============================================================================
   6. SKIP LINK
   ============================================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: var(--space-px);
  top: var(--space-px);
  padding: var(--space-px) var(--space-gap-sm);
  background: var(--color-surface-base);
  color: var(--legal-ink);
  border: 2px solid var(--legal-ink);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}


/* =============================================================================
   7. DOCUMENT HEADER
   ============================================================================= */

.doc-head {
  padding-block: var(--space-gap-lg) var(--space-gap);
  border-bottom: 1px solid var(--color-border-strong);
}

.doc-org {
  margin: 0 0 var(--space-px);
  font-size: var(--legal-meta-size);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-label);
  color: var(--legal-ink-2);
}

.doc-title {
  font-family: var(--legal-font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-jp-heading);
  letter-spacing: var(--tracking-normal);
  font-weight: 400;              /* Mincho carries authority at weight 400 */
  font-synthesis: none;          /* no faux-bold on a Mincho face */
  color: var(--legal-ink);
}

/* The one piece of gold in the masthead: a decorative rule, never text. */
.doc-title-rule {
  height: 2px;
  margin-block: var(--space-gap-sm);
  border: 0;
  background: var(--gradient-divider);
}

/* Version stamp — the human-readable twin of the <meta> registry stamp.
   Markup is a flat <p> of <span class="stamp-pair"> items (NOT a <dl>): a flex
   or grid <dl> blockifies its dt/dd children, which breaks the "keep ラベル：値
   on one line" behaviour we actually need here. */
.doc-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-gap-sm);
  font-size: var(--legal-meta-size);
  line-height: var(--leading-body);
  color: var(--legal-ink);       /* essential metadata → full-contrast ink */
}
.doc-stamp .stamp-pair { white-space: nowrap; }   /* never split ラベル：値 */
.doc-stamp .stamp-label { color: var(--legal-ink-2); }
.doc-stamp .stamp-label::after { content: "："; }
.doc-stamp time,
.doc-stamp [data-doc-version] { font-variant-numeric: tabular-nums; }


/* =============================================================================
   8. DRAFT BANNER
      Visibility is driven by ONE attribute: <html data-doc-status="draft">.
      Publishing flips that attribute AND <meta name="motto-doc-status">, and the
      build step asserts the two agree (BUILD-SPEC §8). Consequence: the banner
      cannot be left on by accident, and cannot be deleted by accident either.
      Colour is NOT the signal — the 【下書き】 label text is. #ef4444 (3.76:1)
      and gold (3.25:1) both fail AA as text, so neither carries the message.
   ============================================================================= */

.draft-banner { display: none; }

html[data-doc-status="draft"] .draft-banner {
  display: block;
  margin-block: var(--space-gap);
  padding: var(--space-gap-sm);
  background: var(--color-surface-inset);          /* warm cream #FBF6E7 */
  border: 1px solid var(--color-border-strong);    /* survives print (bg does not) */
  border-left: 4px solid var(--color-brand-solid);
  border-radius: var(--radius-base);
  color: var(--legal-ink);                          /* 15.58:1 on cream */
}
.draft-banner .draft-label {
  display: block;
  margin-bottom: var(--space-px);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}
.draft-banner p { margin: 0; }


/* =============================================================================
   9. TABLE OF CONTENTS
      <nav class="toc"><ol class="toc-list" role="list"> … </ol></nav>
      role="list" is REQUIRED in the HTML: Safari/VoiceOver drops list semantics
      when list-style:none is applied.
   ============================================================================= */

.toc {
  margin-block: var(--space-gap-lg);
  padding: var(--space-gap-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-base);
}
.toc-heading {
  margin-bottom: var(--space-px);
  font-family: var(--legal-font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-jp-heading);
  font-weight: 400;
  font-synthesis: none;
  color: var(--legal-ink);
}
.toc-list { margin: 0; }

/* The <li> stays a plain block and the <a> carries the 2-column hanging indent,
   so the whole row (marker + title) is one tap target and no `subgrid` support
   is required anywhere. */
.toc-list > li {
  border-top: 1px solid var(--color-border-default);
}
.toc-list > li:first-child { border-top: 0; }

.toc-list a {
  display: grid;
  grid-template-columns: var(--marker-col-toc) 1fr;
  column-gap: 0.5em;
  align-items: baseline;
  /* ≥44px touch target on a phone: 0.5em × 2 + (1.85 × 16px) ≈ 46px */
  padding-block: 0.5em;
  color: var(--legal-ink);
  /* No decoration on the anchor itself: a propagated underline would also strike
     through the 第X条 label, and a propagated decoration CANNOT be cancelled by a
     descendant. The underline is applied to the TITLE only, below. */
  text-decoration: none;
}
.toc-no {
  color: var(--legal-ink-2);
  font-variant-numeric: tabular-nums;
}
/* The title is the link affordance. It must be declared on BOTH .toc-name and
   its .bd children — see the "atomic inline" note under §12. */
.toc-name,
.toc-name .bd {
  display: block;
  text-decoration-line: underline;
  text-decoration-color: var(--color-brand-solid);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
}
.toc-name .bd { display: inline-block; }
.toc-list a:hover .toc-name,
.toc-list a:hover .toc-name .bd {
  text-decoration-color: var(--color-brand-strong);
  text-decoration-thickness: 0.12em;
}


/* =============================================================================
   10. ARTICLE (条) STRUCTURE
       DECISION: the 条 number is a block-level KICKER above the title, not an
       inline hanging marker. Reasons:
         (a) no cross-article marker-column drift (第9条 vs 第10条) — CSS has no
             cross-element column alignment without subgrid;
         (b) the title gets the FULL measure at 390px (~22 JP chars/line instead
             of ~13), which materially reduces bad-break pressure;
         (c) identical treatment at every width, so screen and paper agree.
       Rejected alternative: `display:grid; grid-template-columns: max-content 1fr`
       on the heading — loses (a) and (b).
   ============================================================================= */

.legal-doc {
  padding-block: var(--space-gap-lg) 0;
}

.preamble {
  margin-bottom: var(--space-section-fluid);
}

.article {
  margin-bottom: var(--space-section-fluid);
  scroll-margin-top: var(--space-gap-lg);
}

.article-h {
  margin-bottom: var(--space-gap-sm);
}
.article-no {
  display: block;
  margin-bottom: 0.15em;
  font-family: var(--legal-font-body);
  font-size: var(--legal-meta-size);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--legal-ink);
}
.article-name {
  display: block;
  font-family: var(--legal-font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-jp-heading);
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
  font-synthesis: none;
  color: var(--legal-ink);
}

/* Optional intra-article grouping heading (項 clusters in a long article). */
.article-sub {
  margin-block: var(--space-gap) var(--space-px);
  font-family: var(--legal-font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-jp-heading);
  font-weight: 700;
  color: var(--legal-ink);
}

/* Un-numbered prose directly under a 条 heading. */
.article > p { margin-bottom: var(--space-gap-sm); }
.article > p:last-child { margin-bottom: 0; }


/* =============================================================================
   11. NUMBERED HIERARCHY — 項 (paragraph) and 号 (item)
       Hanging indents via grid: the marker sits in a fixed first column and
       EVERY child of the <li> is forced into column 2, so wrapped JP lines and
       nested lists align under the text, never under the marker.

       HTML CONTRACT (hard):
         · <ol class="para-list" role="list">   ← role="list" required
         · every 項 body is wrapped in <p> — NEVER bare text in a grid list item
         · <ol role="list"> only; `display:grid` stays on the <li>, never on the
           <ol> (display:grid/flex on the LIST container drops list semantics)
   ============================================================================= */

.para-list { counter-reset: para; margin-top: var(--space-px); }

.para-list > li {
  display: grid;
  grid-template-columns: var(--marker-col-para) 1fr;
  column-gap: 0.25em;
  margin-bottom: var(--space-gap-sm);
  scroll-margin-top: var(--space-gap-lg);
}
.para-list > li:last-child { margin-bottom: 0; }
.para-list > li > * { grid-column: 2; }

.para-list > li::before {
  counter-increment: para;
  /* Half-width Arabic per japanese-style-guide §8 ("always 半角").
     FULL-WIDTH VARIANT — if Lewis's legal reviewer invokes the §8 legal-document
     exception, swap the next line for:
         content: counter(para, cjk-decimal) "．";
     and widen --marker-col-para to 3em. Nothing else changes. See D8 / U3. */
  content: counter(para) ".";
  grid-column: 1;
  justify-self: end;                  /* periods align on the gutter */
  font-variant-numeric: tabular-nums;
  color: var(--legal-ink);
}

.item-list { counter-reset: item; margin-top: var(--space-px); }

.item-list > li {
  display: grid;
  grid-template-columns: var(--marker-col-item) 1fr;
  column-gap: 0.25em;
  margin-bottom: var(--space-px);
  scroll-margin-top: var(--space-gap-lg);
}
.item-list > li:last-child { margin-bottom: 0; }
.item-list > li > * { grid-column: 2; }

.item-list > li::before {
  counter-increment: item;
  /* Kanji numerals 一・二・三… — the 号 convention in Japanese legal drafting.
     `cjk-ideographic` is the legacy alias of `japanese-informal`; engines that
     know neither fall back to decimal, which is still readable. No literal
     full-width space after the marker: the grid gap does that job, and a real
     space would be a kinsoku-breakable gap. */
  content: counter(item, cjk-ideographic);
  grid-column: 1;
  justify-self: start;                /* kanji markers left-align */
  color: var(--legal-ink);
}

/* Third level, if a 号 needs sub-items: ア・イ・ウ (katakana-iroha). */
.sub-list { counter-reset: sub; margin-top: var(--space-px); }
.sub-list > li {
  display: grid;
  grid-template-columns: var(--marker-col-item) 1fr;
  column-gap: 0.25em;
}
.sub-list > li > * { grid-column: 2; }
.sub-list > li::before {
  counter-increment: sub;
  content: counter(sub, katakana-iroha);
  grid-column: 1;
  color: var(--legal-ink);
}

/* Paragraph rhythm inside any list item. */
.para-list p, .item-list p, .sub-list p { margin-bottom: var(--space-px); }
.para-list p:last-child, .item-list p:last-child, .sub-list p:last-child { margin-bottom: 0; }


/* =============================================================================
   12. LINKS
       Gold is 3.25:1 on white and #9A7209 is 4.39:1 — BOTH fail AA for normal
       text. So the link colour is ink and the AFFORDANCE is the underline; gold
       is the underline's decoration only (3.25:1 clears the 3:1 non-text
       minimum). This also satisfies WCAG 1.4.1 — colour is never the sole cue.
   ============================================================================= */

a {
  color: var(--legal-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-brand-solid);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  /* Do not let an underline cut through kana descenders. */
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-color: var(--color-brand-strong); text-decoration-thickness: 0.12em; }
a:visited { color: var(--legal-ink); }

/* -- ATOMIC-INLINE TRAP (found in render verification, 2026-08-13) ------------
   `display: inline-block` makes a box an ATOMIC inline-level box, and CSS does
   not paint an ancestor's propagated text-decoration onto atomic inlines. So a
   link whose text has been BudouX pre-wrapped loses its underline entirely —
   the affordance silently disappears, and on a legal page the underline is what
   satisfies WCAG 1.4.1 (colour is never the only cue). Re-declare it on the
   spans; `inherit` picks up the anchor's own decoration colour, so hover states
   keep working with no extra rules. */
a .bd {
  text-decoration-line: underline;
  text-decoration-color: inherit;
  text-decoration-thickness: inherit;
  text-underline-offset: inherit;
}

/* Focus: ink, not gold. Ink is 16.83:1 on white and 15.58:1 on the cream well;
   gold would be 3.01:1 on cream, which fails the non-text minimum there. */
:focus-visible {
  outline: 2px solid var(--legal-ink);
  outline-offset: 2px;
  border-radius: var(--radius-base);
}
/* Keyboard-only: do not paint a ring on mouse clicks, but never remove it
   for keyboard users. No `outline: none` appears anywhere in this file. */


/* =============================================================================
   13. :target — deep-linked clause highlight
   ============================================================================= */

.article:target,
.para-list > li:target,
.item-list > li:target {
  background: var(--color-brand-soft);          /* rgba gold 8% — decorative */
  box-shadow: -0.5em 0 0 var(--color-brand-soft), 0.5em 0 0 var(--color-brand-soft);
  border-radius: var(--radius-base);
}
.article:target > .article-h { position: relative; }


/* =============================================================================
   14. TABLES
       HTML CONTRACT: wrap every table in
         <div class="table-scroll" role="region" tabindex="0" aria-label="…">
       tabindex makes the overflow keyboard-scrollable; role+aria-label makes it
       announced. The WRAPPER scrolls — the page never does.
   ============================================================================= */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-gap-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
}
table {
  width: 100%;
  min-width: 24em;             /* below this, JP columns become unreadable —
                                  scroll the wrapper instead of squeezing */
  border-collapse: collapse;
  font-size: 0.9375em;
}
th, td {
  padding: var(--space-px) var(--space-gap-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-default);
  line-height: var(--leading-jp-body);
}
thead th {
  background: var(--color-surface-raised);
  font-weight: 700;
  color: var(--legal-ink);
  border-bottom: 1px solid var(--color-border-strong);
}
tbody tr:nth-child(even) { background: var(--color-surface-overlay); }
tbody tr:last-child td { border-bottom: 0; }
caption {
  padding: var(--space-px) var(--space-gap-sm);
  text-align: left;
  font-size: var(--legal-meta-size);
  color: var(--legal-ink);
}


/* =============================================================================
   15. FOOTER — disclaimer slot + 事業者表示 slot
   ============================================================================= */

.doc-foot {
  margin-top: var(--space-section-fluid);
  padding-block: var(--space-gap-lg);
  border-top: 1px solid var(--color-border-strong);
}

.disclaimer {
  margin-bottom: var(--space-gap-lg);
  padding: var(--space-gap-sm);
  background: var(--color-surface-inset);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-brand-solid);
  border-radius: var(--radius-base);
  color: var(--legal-ink);
}
.disclaimer > h2,
.business-info > h2 {
  margin-bottom: var(--space-px);
  font-family: var(--legal-font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-jp-heading);
  font-weight: 700;
  color: var(--legal-ink);
}
.disclaimer p { margin-bottom: var(--space-px); }
.disclaimer p:last-child { margin-bottom: 0; }

.business-info { margin-bottom: var(--space-gap-lg); }
.business-info dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-px) var(--space-gap-sm);
  margin: 0;
}
.business-info dt {
  font-weight: 700;
  color: var(--legal-ink);
}
.business-info dd {
  margin: 0 0 var(--space-px);
  color: var(--legal-ink);
}
.business-info dd:last-child { margin-bottom: 0; }

.foot-stamp {
  font-size: var(--legal-meta-size);
  line-height: var(--leading-body);
  color: var(--legal-ink-2);
}
.foot-stamp [data-doc-version] { font-variant-numeric: tabular-nums; }


/* =============================================================================
   16. RESPONSIVE CONTRACT
       Base rules above ARE the 390px case — this page is authored
       phone-first because the primary reader is a Japanese small-business owner
       in the LINE in-app browser at the moment they decide to tap 「同意する」.
       Nothing below changes structure. Only padding, TOC columns and vertical
       rhythm respond. The MEASURE never widens.
   ============================================================================= */

/* --- 390px (PRIMARY) -------------------------------------------------------
   padding-inline 16px → content 358px. Reading size 16px → ~22 JP chars/line.
   Single column. TOC single column. No horizontal scroll anywhere: tables
   scroll inside .table-scroll; URLs break via .url; every .bd span is capped
   at max-width:100%.                                                        */

/* --- 768px ---------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --legal-pad-x: var(--space-container-x); }   /* 24px */

  .doc-head { padding-block: var(--space-header) var(--space-gap-lg); }

  /* Content 720px available, measure binds at 40em (~667–680px) → ~40 JP
     chars/line, the 40字詰め print convention. */

  .toc-list {
    columns: 2;
    column-gap: var(--space-gap-lg);
  }
  .toc-list > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  .business-info dl {
    grid-template-columns: 10em 1fr;
  }
  .business-info dt, .business-info dd { margin-bottom: 0; }
}

/* --- 1440px ---------------------------------------------------------------
   Deliberately almost nothing. The column stays at 40em and centres; the extra
   ~380px per side becomes margin. Only the vertical rhythm opens up. Rejected:
   a two-column layout and a sticky TOC sidebar — both would give desktop a
   different document from the phone.                                        */
@media (min-width: 1440px) {
  .doc-head  { padding-block: calc(var(--space-header) * 1.5) var(--space-gap-lg); }
  .doc-foot  { padding-block: var(--space-gap-col); }
  .legal-doc { padding-block: var(--space-gap-col) 0; }
}


/* =============================================================================
   17. MOTION / REDUCED MOTION
       This page has ZERO transitions, animations and scroll-behaviour, so there
       is nothing for prefers-reduced-motion to reduce. The block below exists
       only to make that explicit and to catch anything added later.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   18. FORCED COLORS (Windows High Contrast)
       Keep the structural rules present when the UA replaces our palette.
   ============================================================================= */

@media (forced-colors: active) {
  .draft-banner,
  .disclaimer,
  .toc,
  .table-scroll { border: 1px solid CanvasText; }

  .doc-title-rule { background: none; border-top: 2px solid CanvasText; height: 0; }

  a { text-decoration-line: underline; }

  .article:target,
  .para-list > li:target,
  .item-list > li:target {
    background: none;
    box-shadow: none;
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}


/* =============================================================================
   19. PRINT / PDF
       The reader may print this or save it as PDF and file it. Requirements:
       legible in pure black-and-white, no reliance on background printing
       (browsers strip backgrounds by default and we do NOT override that —
       `print-color-adjust: exact` is deliberately absent), and the DRAFT marking
       must survive.
   ============================================================================= */

@page {
  /* Generous JP-document margins. `size` is intentionally NOT set: the reader's
     loaded paper wins (A4 in Japan, Letter elsewhere) and the margins adapt.
     Browsers cannot render `content: counter(page)` in @page margin boxes, so
     page numbering comes from the print dialog's own header/footer. */
  margin: 20mm 18mm 22mm;
}

@media print {

  html, body {
    background: #FFFFFF;
    color: #000000;              /* maximum ink — 21:1 */
  }

  body {
    font-size: 10.5pt;           /* JP body standard for A4 */
    line-height: 1.8;            /* --leading-jp-body, rounded for paper */
  }

  /* ---- Hidden in print ----
     .skip-link, :focus rings, and the deep-link highlight are interaction
     affordances with no meaning on paper. */
  .skip-link { display: none !important; }

  /* ---- KEPT in print, and why ----
     · DRAFT banner — KEPT. A printed draft that does not say it is a draft is a
       liability; this is the single most important thing to preserve.
     · Table of contents — KEPT. A printed 規約 conventionally carries its 条 list,
       and the reader may be circulating it internally (稟議). Kept, but stripped
       of link styling and NOT URL-expanded (same-document fragments would print
       as noise). It sheds its panel fill and keeps hairlines. */

  .toc {
    background: none;
    border: 1px solid #000000;
    break-inside: auto;
  }
  .toc-list { columns: 2; column-gap: 10mm; }
  .toc-list a {
    color: #000000;
    text-decoration: none;
    padding-block: 0.15em;       /* no touch targets on paper */
  }
  .toc-no { color: #000000; }

  html[data-doc-status="draft"] .draft-banner {
    background: none;
    border: 1.5pt solid #000000;
    border-left: 4pt solid #000000;
    break-inside: avoid;
    break-after: avoid;
  }
  .draft-banner .draft-label { text-decoration: underline; }

  /* Best-effort per-page DRAFT marker in the left margin. Chromium repeats
     position:fixed boxes on every printed page; Safari/Firefox may render it
     once or not at all. The on-page banner above is the GUARANTEED marking —
     this is additive only, and is placed in the margin so it never overlaps
     body text. */
  html[data-doc-status="draft"] body::before {
    content: "DRAFT — 未確定版";
    position: fixed;
    left: -14mm;
    top: 45%;
    writing-mode: vertical-rl;
    font-family: var(--legal-font-body);
    font-size: 8pt;
    letter-spacing: 0.15em;
    color: #555555;
    white-space: nowrap;
  }

  /* ---- Colour → ink ---- */
  .doc-title-rule {
    background: none;
    border-top: 1pt solid #000000;
    height: 0;
  }
  .disclaimer {
    background: none;
    border: 0.75pt solid #000000;
    border-left: 3pt solid #000000;
  }
  thead th, tbody tr:nth-child(even) { background: none; }
  .table-scroll { overflow: visible; border: 0.75pt solid #000000; }
  table { min-width: 0; }
  th, td { border-bottom: 0.5pt solid #000000; }
  thead th { border-bottom: 1pt solid #000000; }

  a {
    color: #000000;
    text-decoration-line: underline;
    text-decoration-color: #000000;
  }
  .article:target,
  .para-list > li:target,
  .item-list > li:target {
    background: none;
    box-shadow: none;
  }

  /* ---- Link URL expansion ----
     Only absolute http(s) URLs. Same-document fragments, mailto: and tel: are
     skipped: their visible text already IS the destination, and expanding
     fragments would litter the page. */
  main a[href^="http"]::after,
  .doc-foot a[href^="http"]::after {
    content: "（" attr(href) "）";
    font-family: var(--legal-font-mono);
    font-size: 0.85em;
    word-break: break-all;
  }

  /* ---- Pagination ---- */
  h1, h2, h3, .article-h, .article-sub {
    break-after: avoid;
    break-inside: avoid;
  }
  .article        { break-inside: auto; }
  .para-list > li,
  .item-list > li { break-inside: avoid; }
  .business-info,
  .disclaimer,
  .doc-stamp,
  tr, figure      { break-inside: avoid; }
  .doc-head       { break-after: avoid; }
  p, li           { orphans: 3; widows: 3; }

  /* Keep the layout column from collapsing to the measure on wide paper. */
  .wrap {
    max-width: none;
    padding-inline: 0;
    font-size: 10.5pt;
  }

  /* Phrase-level breaking is preserved on paper too. */
  .bd { display: inline-block; }
}