/* 規約・ポリシー系の固定ページ（利用規約 / プライバシーポリシー / Cookieポリシー / データ保護通知 / 運営者情報 / Cookie設定）。
   コンテナ・見出し・表・カード・ボタンは common/components.css の .th-* を使う。
   ここに残すのは、長い条文を読ませるための書式と、Cookie設定のカードの並べ方だけ。
   クラスは lg-（法務ページ）と ck-（Cookie設定）接頭辞。 */

/* --- 条文の本文: 箇条書きが入れ子になるので、行間と字下げを本文より広く取る --- */
.lg-body p,
.lg-body li {
  line-height: 1.9;
}

.lg-body ol,
.lg-body ul {
  margin-bottom: 16px;
  padding-left: 1.6em;
}

.lg-body li + li {
  margin-top: 4px;
}

/* 条文の区切りが分かるよう、節見出しの上に余白を足す */
.lg-body .th-h2 {
  margin-top: 32px;
}

.lg-body .th-h3 {
  margin-top: 24px;
}

/* --- 「以上」: 文書の終わりの符号なので右端に置く --- */
.lg-end {
  margin-top: 32px;
  text-align: right;
}

/* --- 表: 項目名と説明文なので、.th-table の中央寄せから左寄せに戻す --- */
.lg-table th,
.lg-table td {
  text-align: left;
}

.lg-table tbody th { width: 9em; }

/* --- Cookie 設定のカード --- */
.ck-group {
  margin-bottom: 24px;
}

/* --- 現在の状態: 帯の右端のバッジ ---
   色地に白文字は success 4.1 / danger も足りないので、淡い地色 + 濃い文字 + 同色の枠にする
   (スタイルガイドのバッジ節「状態は塗らない」と同じ理由) */
.ck-badge {
  margin-left: auto;
  gap: 6px;
}

.ck-group-accepted .ck-badge {
  color: var(--th-success);
  background: var(--th-success-soft);
  border-color: var(--th-success);
}

.ck-group-declined .ck-badge {
  color: var(--th-danger);
  background: var(--th-danger-soft);
  border-color: var(--th-danger);
}

.ck-group-none .ck-badge {
  color: var(--th-color-text-muted);
  border-color: var(--th-color-border-inner);
}

.ck-group-required .ck-badge {
  color: var(--th-color-text-muted);
  border-color: var(--th-color-border-inner);
}

.ck-table th,
.ck-table td {
  text-align: left;
}

.ck-table tbody th { width: 14em; }

/* --- 許可 / 拒否の選択 ---
   それぞれ別の form なので、form は並べるための入れ物として潰す */
.ck-actions {
  align-items: center;
  padding: 14px 16px;
}

.ck-actions form {
  margin: 0;
}

/* 選んだ側が一目で分かるよう、通常のボタンより 1 段階大きくする */
.ck-choice {
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  font-size: 16px;
}

.ck-choice i {
  font-size: 18px;
  line-height: 1;
}

/* 選択中: 押しても変わらないので span で出す。押したままの見た目 (影を消して沈める) にし、
   ボタンと紛れないよう当たり判定とカーソルを消す */
.ck-choice.is-selected {
  box-shadow: none;
  transform: translate(2px, 2px);
  cursor: default;
  pointer-events: none;
}

.ck-choice-accept.is-selected {
  color: var(--th-success);
  background: var(--th-success-soft);
  border-color: var(--th-success);
}

.ck-choice-decline.is-selected {
  color: var(--th-danger);
  background: var(--th-danger-soft);
  border-color: var(--th-danger);
}

.ck-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  color: var(--th-color-text-muted);
}

@media screen and (max-width: 560px) {
  .lg-table tbody th,
  .ck-table tbody th { width: auto; }
}