/* public/legal.css
 *
 * 公開の法務ページ（/terms・/privacy・/company）専用スタイル。
 * 対象は public/terms.html・public/privacy.html・public/company.html の3枚。
 *
 * 🔴 signup.css は意図的にlinkしない。法務ページはフォームを持たないため、
 * フォーム部品（.su-inp/.su-fld/.su-panel 等）の巨大なCSSを引き込む理由がない。
 * ヘッダー（.su-hd 相当）・フッター（.ct-foot 相当）の見た目だけを、このファイル単体で
 * 完結するように書き写す（tokens.css の変数だけを共有する）。
 *
 * tokens.css の body{overflow:hidden} はSPA（index.html）前提。法務ページは縦に長い
 * 通常の1画面完結ページなので、signup.css と同じ理由でブラウザ標準スクロールに戻す。
 */
html, body { height: auto; }
body { overflow: visible; }

.su-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---------------------------------------------------------------------
   ヘッダー（public/contact.html .su-hd の見た目をそのまま書き写す）
   --------------------------------------------------------------------- */
.su-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.su-brand { display: flex; align-items: center; gap: 11px; }
/* 2026-08-21 ロゴ差し替え: ドット絵ロゴ案1（担当者）。imgタグに変更したためグラデ背景・
   回転四角(i要素)の描画は不要。マークは img[src="/img/logo/mark.svg"] を直接 .su-mark に付ける。 */
/* 2026-08-21 W10修正（検品1-①+5-①）: 16グリッド設計のドット絵を16の整数倍(32px=2倍)に統一。 */
.su-mark {
  width: 32px; height: 32px; flex: none; display: block; image-rendering: pixelated;
}
.su-nm { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--nvl-ink); }
.su-hdActions { display: flex; align-items: center; gap: 18px; }

.su-linklike {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--nvl-blue); font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.su-linklike:hover { color: var(--nvl-navy); }

/* ---------------------------------------------------------------------
   本文（.lg-body） — 読みやすさ優先。max-width 760px・行間1.95。
   --------------------------------------------------------------------- */
.lg-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--nvl-text);
}

.lg-body h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--nvl-ink);
  margin: 4px 0 26px;
  line-height: 1.5;
}
.lg-body h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--nvl-ink);
  margin: 40px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--nvl-border);
  line-height: 1.6;
}
.lg-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.lg-body h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nvl-text);
  margin: 24px 0 10px;
}

.lg-body p { margin: 0 0 16px; }
.lg-body p:last-child { margin-bottom: 0; }

.lg-body ol, .lg-body ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.lg-body li { margin-bottom: 9px; }
.lg-body li:last-child { margin-bottom: 0; }
.lg-body li > ol, .lg-body li > ul {
  margin-top: 9px;
  margin-bottom: 0;
}
.lg-body ul > li { list-style: disc; }
.lg-body ul ul > li,
.lg-body ol ul > li { list-style: circle; }

.lg-body strong { font-weight: 700; color: var(--nvl-ink); }

.lg-body a {
  color: var(--nvl-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lg-body a:hover { color: var(--nvl-navy); }

.lg-body code {
  font-family: var(--nvl-font-en), monospace;
  background: var(--nvl-bg-light);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .93em;
  word-break: break-all;
}

.lg-body hr {
  border: 0;
  border-top: 1px solid var(--nvl-border);
  margin: 32px 0;
}

/* 条文中の🔴公開ブロッカー・【要確認】注記のブロック引用 */
.lg-body blockquote {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--nvl-text);
}
.lg-body blockquote p { margin: 0; }
.lg-body blockquote p + p { margin-top: 10px; }
.lg-body li > blockquote:last-child { margin-bottom: 0; }

/* 【要確認: ...】インラインマーカー */
.lg-body mark.lg-todo,
main mark.lg-todo {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-line);
  border-radius: 3px;
  padding: 1px 6px;
  font-weight: 500;
  font-size: .93em;
  line-height: 1.6;
}

/* 冒頭のベータ提供中の告知（2026-08-20 F-6: 内容が「ドラフトです」の警告から
   「ベータ提供中です」という穏やかな告知に変わったのに配色が赤系のまま残っていたため、
   既存の情報色パターン（public/signup.css .su-notice--blue）に合わせて青系に変更） */
.lg-draftnotice {
  background: var(--nvl-tint-blue);
  border: 1px solid var(--edit-line);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 0 0 32px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--nvl-text);
}
.lg-draftnotice p { margin: 0; }
.lg-draftnotice strong { color: var(--nvl-navy); }
.lg-draftnotice code {
  font-family: var(--nvl-font-en), monospace;
  background: var(--nvl-white);
  border: 1px solid var(--edit-line);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .92em;
}

/* テーブル。横に広い表があるので横スクロール枠で包む。 */
.lg-tableWrap {
  overflow-x: auto;
  margin: 0 0 20px;
}
.lg-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.lg-table th, .lg-table td {
  border: 1px solid var(--nvl-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.lg-table th {
  background: var(--nvl-bg-light);
  font-weight: 700;
  color: var(--nvl-ink);
  white-space: nowrap;
}
/* 定義表など1列目が短い用語になる表で、1文字ずつ折り返されるのを防ぐ */
.lg-table td:first-child { min-width: 6.5em; }

/* 会社名・住所・代表者のブロック（改行を明示する） */
.lg-body .lg-companyBlock { margin: 0 0 16px; }
.lg-body .lg-companyBlock p { margin: 0 0 4px; }

/* ---------------------------------------------------------------------
   フッター（public/contact.html .ct-foot の見た目をそのまま書き写す）
   --------------------------------------------------------------------- */
.ct-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--nvl-border);
  font-size: 11px;
  color: var(--muted);
}
.ct-foot a { color: var(--muted); text-decoration: none; }
.ct-foot a:hover { color: var(--nvl-navy); text-decoration: underline; }
.ct-foot span:not(.ct-foot__copy) { color: var(--nvl-text); }
.ct-foot__copy { margin-left: auto; }

/* ---------------------------------------------------------------------
   640px以下（法務ページはスマホで開かれる前提）
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .su-wrap { padding: 24px 16px 56px; }
  .su-hd { gap: 10px; margin-bottom: 24px; }
  .lg-body { font-size: 13px; }
  .lg-body h1 { font-size: 18px; margin-bottom: 20px; }
  .lg-body h2 { font-size: 14.5px; margin-top: 32px; padding-top: 20px; }
  .lg-table th, .lg-table td { padding: 8px 9px; font-size: 12px; }
  .lg-draftnotice, .lg-body blockquote { padding: 12px 14px; font-size: 12px; }
  .ct-foot { gap: 12px; margin-top: 36px; }
  .ct-foot__copy { margin-left: 0; width: 100%; }
}