/* ==========================================================================
   Legal document layout — shared by /privacy-policy/ and /terms/.
   Page-only rules on top of style.css §26. The same .legal-* rules live in
   assets/css/terms.css and assets/css/privacy-policy.css (each file loads
   only on its own template, so they are duplicated on purpose): keep the
   two in step.
     .legal                 TOC (cols 1–3) | document (cols 5–12)
     .legal__toc            contents; sticky on tall desktop viewports
     .legal__doc            the text, held to a reading measure
     .legal-article         one article: heading + paragraphs / lists,
                            hairline rules between articles
   ========================================================================== */
.legal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-lg);
  align-items: start;   /* the page head's own bottom padding sets the gap */
}

/* ── Contents ── */
.legal__toc { grid-column: 1 / span 3; }
.legal__toc-title { margin-bottom: var(--space-sm); }
.legal__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-light);
}
.legal__toc-list li { border-bottom: 1px solid var(--border-light); }
.legal__toc-list a {
  display: block;
  padding: var(--space-xs) 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-mid);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.legal__toc-list a:hover { color: var(--accent); }

/* ── Document ── */
.legal__doc {
  grid-column: 5 / -1;
  max-width: 40em;
  font-size: 1rem;
}
.legal__meta {
  margin: 0 0 var(--space-lg);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-muted);
}
.legal__intro {
  margin: 0 0 var(--space-xl);
  font-size: 1rem;
  line-height: 2;
  color: var(--ink);
  word-break: auto-phrase;
}

/* ── Articles ── */
.legal-article {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-mid);
  scroll-margin-top: calc(var(--space-2xl) + var(--space-sm));   /* clears the floating nav */
}
.legal-article:last-child { border-bottom: 1px solid var(--border-mid); }
.legal-article__title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.legal-article__text {
  margin: 0;
  font-size: 1rem;
  line-height: 2;
  color: var(--ink-mid);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.legal-article__text + .legal-article__text,
.legal-list + .legal-article__text { margin-top: var(--space-md); }

.legal-list {
  margin: var(--space-sm) 0 0;
  padding-left: 1.5em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-mid);
  list-style: disc;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.legal-list--num { list-style: decimal; }
.legal-list li + li { margin-top: var(--space-2xs); }
.legal-list li::marker { color: var(--ink-muted); }

.legal-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* key/value blocks (事業者情報, お問い合わせ) use .sub-facts */
.legal-facts { margin-top: var(--space-md); }
.legal-article__title + .legal-facts { margin-top: 0; }
.legal-facts > div { padding: var(--space-sm) 0; }
.legal-facts > div:last-child { border-bottom: 0; }   /* the article rule closes it */
.legal-facts dd { overflow-wrap: anywhere; }

/* Contents stay in view on desktop screens tall enough to hold them */
@media (min-width: 1025px) and (min-height: 720px) {
  .legal__toc {
    position: sticky;
    top: calc(var(--space-2xl) + var(--space-sm));
  }
}

/* ── Tablet: contents stack above the text ── */
@media (max-width: 1024px) {
  .legal { display: block; }
  .legal__toc {
    margin-bottom: var(--space-xl);
  }
  .legal__toc-list {
    columns: 2;
    column-gap: var(--space-lg);
  }
  .legal__toc-list li { break-inside: avoid; }
  .legal__doc { max-width: 40em; }
}

/* ── Phone ── */
@media (max-width: 760px) {
  .legal__toc-list { columns: 1; }
  .legal-article { padding: var(--space-lg) 0; }
  .legal__intro { margin-bottom: var(--space-lg); }
}

/* ==========================================================================
   Privacy-only: the Né, Boss? app section (#neboss, Japanese) and its English
   version (#neboss-en). Each is a .legal-part: a heading band with its own
   contents list, then .legal-article blocks whose titles are h3 (the part
   title is the h2) and whose sub-sections are h4. Not mirrored in terms.css.
   ========================================================================== */
.legal__toc-part { border-top: 1px solid var(--border-mid); }
.legal__toc-part a { font-weight: 600; color: var(--ink); }

.legal-part {
  margin-top: var(--space-3xl);
  border-top: 2px solid var(--ink);
  scroll-margin-top: calc(var(--space-2xl) + var(--space-sm));
}
.legal-part__head { padding: var(--space-xl) 0 var(--space-lg); }
.legal-part__head .sub-kicker { margin-bottom: var(--space-sm); }
.legal-part__title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.legal-part__head .legal__intro { margin-bottom: var(--space-lg); }
.legal-part .legal-article:last-child { border-bottom: 1px solid var(--border-mid); }

/* the part's own contents: two quiet columns */
.legal-part__toc {
  columns: 2;
  column-gap: var(--space-lg);
  margin: 0;
  padding: var(--space-sm) 0 0;
  list-style: none;
  border-top: 1px solid var(--border-light);
}
.legal-part__toc li { break-inside: avoid; }
.legal-part__toc a {
  display: block;
  padding: 6px 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-mid);
  word-break: auto-phrase;
  transition: color 0.2s ease;
}
.legal-part__toc a:hover { color: var(--accent); }

/* 2.1, 2.2 … inside an article */
.legal-article__sub {
  margin: var(--space-lg) 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.legal-article__title + .legal-article__sub { margin-top: 0; }
.legal-article__sub + .legal-article__text,
.legal-article__sub + .legal-facts { margin-top: var(--space-xs); }
.legal-facts + .legal-article__text { margin-top: var(--space-md); }
.legal-article__text strong,
.legal-list strong { font-weight: 700; color: var(--ink); }
.legal-list .legal-list { margin-top: var(--space-2xs); list-style: circle; }

/* retention table: long labels get the wider key column */
.legal-facts--wide dt { grid-column: 1 / span 5; }
.legal-facts--wide dd { grid-column: 6 / span 7; }

@media (max-width: 760px) {
  .legal-part { margin-top: var(--space-2xl); }
  .legal-part__toc { columns: 1; }
  .legal-facts--wide dt,
  .legal-facts--wide dd { grid-column: auto; }
}

/* 「プライバシーポリシー」 is one 10-character word: on phones size it to the
   gutters so it never breaks as プライバシーポリ / シー */
@media (max-width: 760px) {
  .sub-hero__title { font-size: min(2.25rem, calc((100vw - 2 * var(--space-md)) / 10.4)); }
}