/* Lumiere（ルミエール）法定4ページ 共通スタイル
 *
 * トークン（色・書体・余白）は ../css/app.css を <link> で読み込んで再利用する。
 * ここでは法定ページ固有のレイアウト（記事の見出し階層・表・保留表示・相互リンク）だけを追加する。
 * app.css の値を複製しない＝色を変えたくなったら app.css 側だけ直せば揃う。
 */

/* ============ ページの器（.app と同じ 480px 枠。孤立した体裁にしない） ============ */
body{ background:var(--color-canvas); }
.legal-page{
  max-width:480px;
  margin:0 auto;
  min-height:100%;
  background:var(--color-bg);
  display:flex;
  flex-direction:column;
}

/* ヘッダーは index.html の .app-topbar と同一クラスを使い、常に見える位置に固定する */
.legal-page > .app-topbar{
  position:sticky;
  top:0;
  z-index:5;
}
.legal-page .app-topbar .spacer{ width:36px;height:36px; }

.legal-wrap{
  flex:1 1 auto;
  padding:var(--space-20) var(--space-20) var(--space-40);
}

/* ============ 記事タイポグラフィ（可読性優先） ============ */
.legal-h1{
  font-family:var(--font-serif);
  font-size:22px;
  color:var(--color-text);
  margin-bottom:var(--space-8);
}
.legal-updated{
  font-size:12px;
  color:var(--color-text-tertiary);
  margin-bottom:var(--space-20);
}
.legal-h2{
  font-size:15px;
  font-weight:700;
  color:var(--color-text);
  margin-top:var(--space-32);
  margin-bottom:var(--space-12);
  padding-bottom:var(--space-8);
  border-bottom:1px solid var(--color-border-light);
}
.legal-content > .legal-h2:first-of-type{ margin-top:var(--space-24); }

.legal-p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--color-text);
  margin-bottom:var(--space-12);
}
.legal-list{
  margin:0 0 var(--space-12);
  padding-left:1.3em;
  list-style:decimal;
}
.legal-list > li{
  font-size:14.5px;
  line-height:1.85;
  color:var(--color-text);
  margin-bottom:var(--space-8);
  padding-left:4px;
}
.legal-list .legal-list{ margin-top:var(--space-8); list-style:lower-alpha; }
.legal-list.is-bullet{ list-style:disc; }

.legal-hr{
  border:none;
  border-top:1px solid var(--color-border-light);
  margin:var(--space-32) 0 var(--space-20);
}
.legal-footnote{
  font-size:12px;
  line-height:1.75;
  color:var(--color-text-tertiary);
}
.legal-signature{
  font-size:13px;
  color:var(--color-text-secondary);
  margin-top:var(--space-16);
  line-height:1.9;
}

/* ============ ステータスバナー（agree-box と同じ配色＝新色を足さない） ============ */
.legal-status-banner{
  display:flex;gap:var(--space-12);align-items:flex-start;
  background:rgba(234,217,176,0.28);
  border:1px solid var(--color-gold);
  border-radius:var(--radius-card);
  padding:var(--space-16);
  margin-bottom:var(--space-24);
  font-size:12.5px;
  line-height:1.7;
  color:var(--color-text);
}
.legal-status-banner .icon{ flex:0 0 auto; }

/* ============ 未確定（事業者情報の回収待ち）表示 ============ */
.pending{
  display:inline-block;
  color:var(--color-pink-deep);
  background:rgba(217,169,169,0.12);
  border:1px dashed var(--color-pink-deep);
  border-radius:var(--radius-chip);
  padding:2px 10px;
  font-size:0.92em;
  font-weight:700;
  white-space:nowrap;
}
.legal-note{
  display:block;
  font-size:11.5px;
  color:var(--color-text-tertiary);
  margin-top:4px;
  font-weight:400;
  white-space:normal;
}

/* ============ 特定商取引法の表（狭幅ではラベル/値を縦積み） ============ */
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:var(--space-16) 0 var(--space-8);
}
.legal-table th, .legal-table td{
  text-align:left;
  vertical-align:top;
  padding:12px 6px;
  font-size:13.5px;
  line-height:1.75;
  border-bottom:1px solid var(--color-border-light);
}
.legal-table th{
  width:32%;
  font-weight:600;
  color:var(--color-text-secondary);
  white-space:nowrap;
}
.legal-table td{ color:var(--color-text); }
@media (max-width:420px){
  .legal-table th, .legal-table td{ display:block; width:100%; white-space:normal; }
  .legal-table th{ padding-bottom:2px; border-bottom:none; color:var(--color-text-tertiary); font-size:12px; }
  .legal-table td{ padding-top:0; padding-bottom:16px; }
}

/* ============ 相互リンク（legal-link は app.css のコンポーネントを再利用） ============ */
.legal-nav{ margin-top:var(--space-32); }
.legal-nav-heading{ margin-top:0; margin-bottom:var(--space-12); }
.legal-link.is-current{
  color:var(--color-text-tertiary);
  cursor:default;
}
.legal-back-btn{ margin-top:var(--space-16); }

/* ============ 印刷（LINE WebView外で開いても紙で崩れない） ============ */
/* ============ 公開前ドラフトのチェックリスト表示 ============ */
.legal-banner-body{ display:block; }
.legal-banner-body > p{ margin:0 0 var(--space-8); }
.legal-banner-body > p:last-child{ margin-bottom:0; }
.legal-gap-list{
  list-style:disc;
  margin:0 0 var(--space-8);
  padding-left:1.2em;
}
.legal-gap-list > li{ margin:3px 0; }
.legal-gap-list > li:last-child{ margin-bottom:0; }

/* ============ ダミー値（実値へ差し替えるまで公開不可） ============ */
/* 仮置きの値。**画面には何の印も出さない**（読み手には確定した記述として見せる）。
   目的は、後から機械的に洗い出せるようにすること:
     grep -c 'class="legal-prov"' liff/legal/*.html
   なぜ見た目を変えないか: 見える印を付けると、pay.jp 加盟店審査の担当者に
   「この店は自分の表記を確定していない」と読まれる。一方で印が無いと、
   仮置きだったことを誰も思い出せなくなる。だから**人には見せず機械には残す**。
   何が仮置きで、何と差し替えるかの正本は
   tasks/projects/clients/lumiere/spec/legal-pages-gap-20260823.md §6。 */
.legal-prov{ /* 意図的に空。スタイルを足さないこと */ }

.legal-dummy{
  display:inline-block;
  color:var(--color-pink-deep);
  background:rgba(217,169,169,0.12);
  border:1px dashed var(--color-pink-deep);
  border-radius:var(--radius-chip);
  padding:2px 10px;
  font-size:0.92em;
  font-weight:700;
  white-space:nowrap;
}

@media print{
  body{ background:#fff; }
  .legal-page{ max-width:none; background:#fff; }
  .legal-page > .app-topbar,
  .legal-nav,
  .legal-back-btn{ display:none; }
  .legal-wrap{ padding:0; }
  .legal-h1{ font-size:18pt; }
  .legal-h2{ font-size:12pt; break-after:avoid; }
  .legal-p, .legal-list > li{ font-size:10.5pt; line-height:1.6; color:#000; }
  .legal-table th, .legal-table td{ display:table-cell !important; width:auto !important; white-space:normal !important; font-size:10pt; }
  .pending,
  .legal-dummy{ border:1px dashed #000; color:#000; background:transparent; }
  a{ text-decoration:underline; }
}