/*
  TSURI ONE 共通コンポーネント (.th-*)

  スタイルガイド (/styleguide/) で確定した部品。tokens.css の次に読み込む。
  コンテナ / 見出し / ボタン / バッジ / カード / テーブル / アコーディオン / フォーム /
  アラート / ナビゲーション / ツールバー / モーダル / 空状態 / ボトムタブ。
  Bootstrap のクラスからの置き換えは、スタイルガイドの各節にある「移行対応」表に従う。
*/

/* フォームは .th-form / .th-field を使う */

/* ==========================================================================
   コンポーネント: ボタン (.th-btn)
   ベースデザインのモックから確定。全体反映時は共通 CSS (components) へ移し、Bootstrap の .btn を置き換える。
   骨格: ネイビー 2px 外枠 + ハードシャドウ。hover で 2px 沈み、押下で影が消える (物理ボタンの動き)
   色: 標準はネイビー線のみ。主 CTA は役割で 2 色 (オレンジ = 作る・変える / ブルー = 見る・使う)、赤は破壊的操作専用
   ========================================================================== */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  font-family: var(--th-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--th-brand-800);
  background: transparent;
  border: var(--th-border-outer);
  border-radius: var(--th-radius-none);
  box-shadow: var(--th-shadow-hard);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.08s, color 0.08s;
}

.th-btn:hover,
.th-btn.is-hover {
  transform: translate(2px, 2px);
  box-shadow: var(--th-shadow-hard-pressed);
  background: var(--th-brand-50);
  color: var(--th-brand-800);
}

.th-btn:active,
.th-btn.is-active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.th-btn:focus-visible,
.th-btn.is-focus {
  outline: 2px solid var(--th-color-focus);
  outline-offset: 2px;
}

.th-btn:disabled,
.th-btn.is-disabled {
  color: var(--th-gray-500);
  background: var(--th-gray-100);
  border-color: var(--th-gray-400);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

.th-btn .bi { font-size: 1.1em; line-height: 1; }

/* --- 種類 --- */
/* 主 CTA (オレンジ): 自分のデータを作る・変える操作。記録する / 登録 / 保存 / 送信 */
.th-btn-primary {
  background: var(--th-accent-500);
  border-color: var(--th-accent-500);
  color: var(--th-brand-800);
}

/* hover で色は変えない (白文字だと accent-700 上で AA 未満、ネイビー文字だとさらに低い)。沈む動きだけで反応を示す */
.th-btn-primary:hover,
.th-btn-primary.is-hover {
  background: var(--th-accent-500);
  border-color: var(--th-accent-500);
  color: var(--th-brand-800);
}

/* 主 CTA (ブルー): 見る・使う操作。タイドグラフを見る / 計算する / 検索 / ログイン。塗りはリンク青、枠と影はネイビー */
.th-btn-primary-blue {
  background: var(--th-brand-600);
  border-color: var(--th-brand-800);
  color: #fff;
}

.th-btn-primary-blue:hover,
.th-btn-primary-blue.is-hover {
  background: var(--th-brand-600);
  color: #fff;
}

/* 標準 (secondary): .th-btn の素の状態。明示用のクラス */
.th-btn-secondary { }

/* 低優先 (ghost): 枠も影も持たない。戻る・キャンセル・「もっと見る」など */
.th-btn-ghost {
  border-color: transparent;
  box-shadow: none;
  padding: 0 12px;
}

.th-btn-ghost:hover,
.th-btn-ghost.is-hover {
  transform: none;
  box-shadow: none;
  background: var(--th-brand-100);
}

/* 破壊的操作 (danger): 削除。確認モーダルとセットで使う */
.th-btn-danger {
  color: var(--th-danger);
  border-color: var(--th-danger);
  box-shadow: 3px 3px 0 var(--th-danger);
}

.th-btn-danger:hover,
.th-btn-danger.is-hover {
  background: var(--th-danger);
  color: #fff;
  box-shadow: 1px 1px 0 var(--th-danger);
}

/* リンク型: 文中・表のセル内。ボタンの形を持たないが「青文字 + 細い下線」の一般的なリンクにはしない。
   ネイビーの太字 + 文字の下に 2px のロゴ青 (border-bottom)。hover で薄い青地 + 線がネイビーに。
   方向を示す記号 (› / →) は付けず、詳細・編集・新規登録・もっと見るのどの動詞にも使える */
.th-btn-link {
  min-height: auto;
  padding: 0 0 2px;
  border: none;
  border-bottom: 2px solid var(--th-brand-400);
  box-shadow: none;
  color: var(--th-brand-800);
  text-decoration: none;
  transition: border-color 0.08s, background-color 0.08s;
}

.th-btn-link:hover,
.th-btn-link.is-hover {
  transform: none;
  box-shadow: none;
  background: var(--th-brand-50);
  border-bottom-color: var(--th-brand-800);
  color: var(--th-brand-800);
}

/* 英語ラベル型: ツール名 (UNIT CONV. 等) の CTA。Exo 2 italic 大文字 */
.th-btn-label {
  font-family: var(--th-font-label);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- サイズ --- */
.th-btn-sm { min-height: 32px; padding: 0 12px; font-size: 12px; gap: 6px; }

.th-btn-lg { min-height: 48px; padding: 0 28px; font-size: 16px; }

/* アイコンのみ: 正方形。aria-label を必須にする */
.th-btn-icon { width: 40px; padding: 0; }

.th-btn-icon.th-btn-sm { width: 32px; }

.th-btn-icon.th-btn-lg { width: 48px; }

/* 横幅いっぱい: モバイルのフォーム送信 */
.th-btn-block { display: flex; width: 100%; }

/* --- 並び --- */
.th-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* フォームの送信列: モバイルでは縦積み・横幅いっぱい */
@media screen and (max-width: 768px) {
  .th-btn-group-form { flex-direction: column; align-items: stretch; }

  .th-btn-group-form .th-btn { display: flex; width: 100%; }
}

/* ==========================================================================
   コンポーネント: バッジ (.th-badge)
   使う場面はスタイルガイドのバッジ節にある一覧だけ (ニュース種別 / 公開・未公開 / FREE・MEMBER / WIKI カテゴリ / STEP / 製品カテゴリ / 潮の種類・月齢)。全体反映時は共通 CSS へ移し、Bootstrap の .badge と各アプリの独自バッジを置き換える。
   分類: ネイビー 1px の枠 + ネイビー文字 (基本形)。製品カテゴリだけは淡い地色で色分けする
   状態: 文字や背景を色で塗らず、左端 3px の色バーで示す (色地に白文字は success 4.1 / info 3.3 で AA 未満のため)。塗りは danger (重要) とネイビー (MEMBER / STEP) だけ
   刻印: 英字専用の Exo 2 italic 大文字 + 2px 枠 (モックの FREE / MEMBER)
   ========================================================================== */
.th-badge {
  --th-badge-color: var(--th-brand-800);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-family: var(--th-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--th-brand-800);
  background: var(--th-color-surface);
  border: var(--th-border-width-inner) solid var(--th-brand-800);
  border-radius: var(--th-radius-none);
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

.th-badge .bi { font-size: 1em; line-height: 1; }

/* --- 種類 --- */
/* 刻印 (英語ラベル型): FREE / MEMBER / STEP。ボタンの英語ラベル型・カードのラベル帯と同じ Exo 2 italic 大文字 + 2px 枠 */
.th-badge-label {
  font-family: var(--th-font-label);
  font-style: italic;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-width: var(--th-border-width-outer);
  padding: 2px 10px;
}

/* 控えめ: 未公開・その他。枠も文字もグレーに落とす */
.th-badge-muted {
  --th-badge-color: var(--th-gray-600);
  color: var(--th-gray-600);
  border-color: var(--th-gray-500);
}

/* --- 状態: 左端の色バー。文字はネイビーのまま --- */
.th-badge-success { --th-badge-color: var(--th-success); }

.th-badge-danger { --th-badge-color: var(--th-danger); }

.th-badge-info { --th-badge-color: var(--th-info); }

.th-badge-success,
.th-badge-danger,
.th-badge-info {
  border-left: 3px solid var(--th-badge-color);
  padding-left: 6px;
}

/* --- カテゴリ色: 製品データのカテゴリ。状態の色バーと見分けがつくよう、淡い地色で塗る。文字はネイビーのまま --- */
.th-badge-cat {
  background: var(--th-badge-tint);
}

.th-badge-cat-rod { --th-badge-color: var(--th-cat-rod); --th-badge-tint: var(--th-cat-rod-soft); }

.th-badge-cat-reel { --th-badge-color: var(--th-cat-reel); --th-badge-tint: var(--th-cat-reel-soft); }

.th-badge-cat-line { --th-badge-color: var(--th-cat-line); --th-badge-tint: var(--th-cat-line-soft); }

/* --- 塗り: MEMBER / STEP (ネイビー)。状態と組み合わせるのは danger (重要) だけ --- */
.th-badge-fill {
  background: var(--th-badge-color);
  border-color: var(--th-badge-color);
  border-left-width: var(--th-border-width-inner);
  padding-left: 8px;
  color: #fff;
}

.th-badge-label.th-badge-fill {
  border-left-width: var(--th-border-width-outer);
  padding-left: 10px;
}

/* --- サイズ --- */
.th-badge-sm { font-size: 11px; padding-top: 0; padding-bottom: 0; }

.th-badge-lg { font-size: 14px; padding-top: 2px; padding-bottom: 2px; }

.th-badge-label.th-badge-sm { font-size: 10px; }

.th-badge-label.th-badge-lg { font-size: 13px; }

/* --- 並び --- */
.th-badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   コンポーネント: カード (.th-card)
   ベースデザインのモック (マイタックル / カードのバリエーション) から確定。全体反映時は共通 CSS へ移し、
   Bootstrap の .card と各アプリの独自カード (tackle-card / dashboard-card / desc-card / guide-card / idx-slide / wiki-category-card) を置き換える。
   骨格: ネイビー 2px 外枠・直角・白地。ハードシャドウは画面の主役カード (.th-card-raised) だけ
   構造: .th-card 自身は余白を持たず、.th-card-thumb / -head / -body / -foot を縦に積む。左上のラベル帯 (.th-card-label) が目印
   ========================================================================== */
.th-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--th-color-surface);
  color: var(--th-color-text);
  border: var(--th-border-outer);
  border-radius: var(--th-radius-none);
  text-decoration: none;
}

.th-card-raised { box-shadow: var(--th-shadow-hard); }

/* --- リンクカード (a.th-card): 主役カードはボタンと同じく沈む。それ以外は地色だけ変える --- */
a.th-card {
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.08s;
}

a.th-card:hover,
.th-card.is-hover {
  background: var(--th-brand-50);
  color: var(--th-color-text);
  text-decoration: none;
}

a.th-card-raised:hover,
.th-card-raised.is-hover {
  transform: translate(2px, 2px);
  box-shadow: var(--th-shadow-hard-pressed);
}

a.th-card:focus-visible,
.th-card.is-focus {
  outline: 2px solid var(--th-color-focus);
  outline-offset: 2px;
}

/* --- 全面リンク (.th-card-stretch): カードのどこを押しても見出しのリンク先へ飛ぶ。
   中に別のリンク (外部サイトなど) があって a.th-card で包めないカード用。
   .th-card は position: relative なので、見出しリンクの ::after をカード全体に広げる --- */
.th-card-stretch { cursor: pointer; }

.th-card-stretch .th-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.th-card-stretch:hover { background: var(--th-brand-50); }

/* キーボード操作では見出しリンクに焦点が当たるので、枠はカード側に出す */
.th-card-stretch:focus-within {
  outline: 2px solid var(--th-color-focus);
  outline-offset: 2px;
}

/* 全面リンクの下に隠れると押せなくなるので、カード内の別のリンク・ボタンは前面に出す */
.th-card-stretch .th-card-spec a,
.th-card-stretch .th-card-foot a,
.th-card-stretch .th-card-foot button { position: relative; z-index: 1; }

/* --- 部位 --- */
.th-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
}

/* 左上のラベル帯: 英字のみ (SHORE / SHIP / POINT / THIS YEAR)。本文の余白を打ち消してカードの角に貼り付く */
.th-card-label {
  display: inline-block;
  align-self: flex-start;
  margin: -16px 0 8px -16px;
  padding: 2px 8px;
  font-family: var(--th-font-label);
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  background: var(--th-brand-800);
  color: #fff;
}

.th-card-title {
  display: block;
  margin: 4px 0 10px;
  font-family: var(--th-font-heading);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-color-heading);
  text-align: left;   /* allauth.css の h2 中央寄せを打ち消す */
}

/* 見出しの中のリンク: カード全体をリンクにできない (中に別のリンクがある) ときに使う。色と太さは見出しのまま */
.th-card-title a { color: inherit; text-decoration: none; }

.th-card-title a:hover { text-decoration: underline; }

.th-card-text {
  margin: 0 0 12px;
  font-size: 13px;
}

.th-card-text:last-child { margin-bottom: 0; }

/* 項目名と値の 2 列 (タックルのスペック・船宿情報) */
.th-card-spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0 0 12px;
  font-size: 13px;
}

.th-card-spec:last-child { margin-bottom: 0; }

.th-card-spec dt { font-weight: 400; color: var(--th-color-text-muted); white-space: nowrap; }

.th-card-spec dd { margin: 0; }

/* カード内のリンク: 本文の最下部に寄せる */
.th-card-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--th-color-link);
  text-decoration: none;
}

.th-card-link:hover { text-decoration: underline; }

/* 見出し帯: ラベル + 名前をネイビー地に。船宿・ポイントの詳細カード */
.th-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  background: var(--th-brand-800);
  color: #fff;
}

.th-card-head .th-card-label {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--th-brand-300);
}

.th-card-head-title {
  margin: 0;
  color: inherit;   /* base.css が h1-h6 に見出し色を与えるので、帯の白文字を継がせるには明示が要る */
  font-family: var(--th-font-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

.th-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding: 10px 16px;
  border-top: var(--th-border-inner);
}

.th-card-foot .th-card-link { margin-top: 0; }

/* 履歴 + 操作の並び。ボタンは右端に寄せる */
.th-card-foot > .th-btn { margin-left: auto; }

/* 画像枠: 画像がないときは滑り止め縞のプレースホルダにアイコン */
.th-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  overflow: hidden;
  font-size: 32px;
  color: var(--th-brand-300);
  background: var(--th-pattern-stripe);
  border-bottom: var(--th-border-inner);
}

.th-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- ツールカード: アイコン + 名前 + 説明 + 矢印を横並び。a.th-card で使う --- */
.th-card-tool {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.th-card-tool-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  background: var(--th-brand-800);
  color: var(--th-brand-300);
}

.th-card-tool-icon img { width: 26px; height: 26px; }

.th-card-tool-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.th-card-tool-text strong {
  font-family: var(--th-font-label);
  letter-spacing: 0.04em;
  color: var(--th-color-heading);
}

.th-card-tool-text small { font-size: 12px; color: var(--th-color-text-muted); }

.th-card-tool-chev { color: var(--th-color-heading); }

/* --- 数値カード: 集計値だけ Exo 2 で大きく --- */
.th-card-stat-value {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--th-font-label);
  font-style: italic;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--th-color-heading);
}

.th-card-stat-value small {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
}

.th-card-stat-note { font-size: 12px; color: var(--th-color-text-muted); }

/* --- 並び --- */
.th-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.th-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.th-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media screen and (max-width: 768px) {
  .th-card-grid-2,
    .th-card-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ユーティリティ: 数値 (.th-num)
   数値列・時刻・金額に付ける。BIZ UDGothic (半角等幅) で桁を揃え、表の中では右寄せ
   ========================================================================== */
.th-num {
  font-family: var(--th-font-num);
  font-variant-numeric: tabular-nums;
}

/* 縦型 (key-value) の詳細表は列で比較しないため、桁揃えの等幅書体より本文 (BIZ UDPGothic) との統一感を優先する */
.th-table-plain .th-num {
  font-family: var(--th-font-body);
  font-variant-numeric: normal;
}

/* ==========================================================================
   ユーティリティ: 別タブで開くリンクの目印 (.bi-box-arrow-up-right)
   文中のリンクに付ける。ボタンの中のアイコン (.th-btn .bi) はボタン側の指定が効くので対象外
   ========================================================================== */
a .bi-box-arrow-up-right {
  margin-left: 4px;
  font-size: 0.85em;
  vertical-align: baseline;
}

/* ==========================================================================
   コンポーネント: テーブル (.th-table)
   ベースデザインのモック (今日の潮) から確定。全体反映時は共通 CSS へ移し、rod/list.css の要素セレクタ (table / th / td) と
   Bootstrap の .table を置き換える。
   骨格: 白地・外枠なし。行は 1px の内部罫線 + 薄いゼブラ。縦罫線は引かない
   ヘッダ: 主要な表はネイビーの銘板帯 (12px)。副次的な表 (.th-table-plain) は太い下罫線だけ
   文字: ヘッダも中身もすべて左右中央。数値 (.th-num) は等幅で桁幅を揃える (寄せは変えない)。例外はセル単位の .th-cell-left / -right だけ
   固定列: data-sticky-cols / data-sticky-end (js/common/th-table.js が left / right を計算する)
   列グループ: tr.th-table-group の 2 段ヘッダ。グループは一段薄い青の帯
   ========================================================================== */
.th-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--th-color-surface);
  color: var(--th-color-text);
  font-size: 14px;
  line-height: 1.5;
}

/* base.css の素の表の既定 (余白・下罫線・中央寄せ) を .th-table の値で上書きする */
.th-table th,
.th-table td {
  padding: 8px 14px;   /* 半角等幅の数値が詰まって見えないよう左右をやや広めに */
  border: none;
  border-bottom: var(--th-border-inner);
  background: none;
  color: inherit;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  position: static;
  cursor: default;
  font-size: inherit;
}

.th-table thead th {
  font-family: var(--th-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;   /* 大文字化はしない (全長[m] の単位が [M] になる) */
  background: var(--th-brand-800);
  color: #fff;
  border-bottom: none;
}

.th-table thead th:hover { background: var(--th-brand-800); }

.th-table tbody tr:nth-child(odd),
.th-table tbody tr:nth-child(odd):hover { background: var(--th-color-surface); }

.th-table tbody tr:nth-child(even),
.th-table tbody tr:nth-child(even):hover { background: var(--th-brand-50); }

.th-table .th-num { text-align: center; }

.th-table small { font-size: 11px; color: var(--th-color-text-muted); }

/* 行見出し (項目名 + 値の表): 項目名はグレーの細字で、値と区別する */
.th-table tbody th {
  font-weight: 400;
  color: var(--th-color-text-muted);
  width: 1%;   /* 項目名の幅は内容に合わせ、値の列に残りを渡す */
}

/* セル単位の寄せ */
.th-table .th-cell-left { text-align: left; }

.th-table .th-cell-right { text-align: right; }

/* 値の幅だけ取る列 (分類・メーカーなど短い値): 残りの幅を名前の列に渡す。
   width: 1% は「取れるだけ狭く」の意味で、実際には中身の幅まで広がる */
.th-table .th-cell-min {
  width: 1%;
  white-space: nowrap;
}

/* 長い値の列 (製品名・地名): 幅を 18em で止めて折り返す。省略 (…) はしない。数値列には付けない */
.th-table .th-cell-wrap {
  white-space: normal;
  width: 18em;   /* auto レイアウトでは max-width だけだと min-width まで縮められるため、希望幅も指定する */
  min-width: 12em;
  max-width: 18em;
  line-height: 1.4;
}

/* --- 列グループ: 2 段ヘッダ。グループ行 (tr.th-table-group) の colspan セルを一段薄い青の帯にし、単独の列は rowspan="2" で 1 セルにする --- */
.th-table thead .th-table-group th[colspan] {
  background: var(--th-brand-600);
  border-left: 1px solid var(--th-brand-800);
  border-right: 1px solid var(--th-brand-800);
}

.th-table-plain thead .th-table-group th[colspan] {
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--th-color-heading);
}

/* グループの境界: サブヘッダ行・tbody の両方で、グループの最初/最後の列に付ける (.is-group-start / .is-group-end) */
.th-table thead th.is-group-start,
.th-table tbody td.is-group-start,
.th-table tbody th.is-group-start {
  border-left: var(--th-border-inner);
}

.th-table thead th.is-group-end,
.th-table tbody td.is-group-end,
.th-table tbody th.is-group-end {
  border-right: var(--th-border-inner);
}

/* --- 行グループ: 縦型 (key-value) の表の tbody に挟む見出し行 (tr.th-table-row-group)。
   th-table-plain の thead 見出しと同じ見た目 (地色なし・ネイビー文字・下罫線) を tbody 側で使う --- */
.th-table-plain tbody tr.th-table-row-group {
  background: none;
}

.th-table-plain tbody tr.th-table-row-group th {
  width: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--th-color-heading);
  border-bottom: var(--th-border-outer);
}

/* --- 副次的な表: 帯を持たず、見出しはネイビー文字 + 2px の下罫線 --- */
.th-table-plain thead th {
  background: none;
  color: var(--th-color-heading);
  border-bottom: var(--th-border-outer);
}

.th-table-plain thead th:hover { background: none; }

/* --- 行がリンク先を持つ一覧: hover で行を薄い青に --- */
.th-table.th-table-hover tbody tr:hover { background: var(--th-brand-100); }

/* --- 並べ替えできる列見出し: 並べ替え中の列だけ ▲▼ を出す。JS は .is-sorted-asc / -desc を付け替える --- */
.th-table th.is-sortable { cursor: pointer; }

.th-table th.is-sortable:hover { text-decoration: underline; }

.th-table th.is-sorted-asc::after { content: " \25B2"; }

.th-table th.is-sorted-desc::after { content: " \25BC"; }

/* --- 密度: 列の多い一覧 --- */
.th-table-sm { font-size: 13px; }

.th-table-sm th,
.th-table-sm td { padding: 6px 10px; }

/* --- 折り返し: 説明文など長い文字列を持つ表 --- */
.th-table-wrap th,
.th-table-wrap td { white-space: normal; }

/* --- スクロール枠: 列の多い一覧を横スクロールし、見出し行を固定する --- */
.th-table-scroll {
  overflow: auto;
  max-height: 70vh;
  border: var(--th-border-inner);
}

.th-table-scroll .th-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 副次的な表 (.th-table-plain) は見出しに地色を持たないので、そのまま固定すると
   下の行が透けて見出しと重なる。スクロール枠の中のときだけ白地を敷く */
.th-table-scroll .th-table-plain thead th { background: var(--th-color-surface); }

/* 固定列: data-sticky-cols="n" (先頭 n 列) / data-sticky-end="n" (末尾 n 列)。
   th-table.js が各セルに .is-sticky と left / right を書き込む。ゼブラの地色を tr から引き継ぎ、スクロールした内容が透けないようにする */
.th-table-scroll .th-table .is-sticky {
  position: sticky;
  z-index: 1;
  background: inherit;
}

.th-table-scroll .th-table thead .is-sticky {
  z-index: 3;
  background: var(--th-brand-800);
}

.th-table-scroll .th-table-plain thead .is-sticky { background: var(--th-color-surface); }

/* 固定範囲と可動範囲の境目にだけ罫線を引く */
.th-table-scroll .th-table .is-sticky-start-edge { border-right: var(--th-border-inner); }

.th-table-scroll .th-table .is-sticky-end-edge { border-left: var(--th-border-inner); }

/* --- 「項目名 + 値」の表 (詳細ページ): 値は必ず折り返す ---
   .th-table の既定は white-space: nowrap なので、住所・メモのような長い値があると
   表が枠を突き破る。body は overflow-x: hidden なので横スクロールもできず、ただ切れて見えなくなる。
   項目名 (tbody の th) は 1 行のままにして、値だけ折り返す */
.th-table tbody th[scope="row"] ~ td {
  white-space: normal;
  overflow-wrap: anywhere;   /* JAN コードや URL のような切れ目のない文字列も枠内に収める */
}

/* --- 狭い画面: 「項目名 + 値」の表 (詳細ページ) は 1 行を 2 段に積む ---
   .th-table の既定は white-space: nowrap なので、住所・メモのような長い値が折り返せず
   カードの枠から飛び出す (body の overflow-x: hidden に隠れて「切れている」ように見える)。
   横に並べたまま折り返させると、日本語は 1 文字ずつ改行できるため項目名の列が極端に痩せる。
   そこで縦に積み、項目名を小さいラベル、値をその下の行にする。行の縞と罫線は行 (tr) のまま */
/* 「項目名 + 値」の表は狭い画面で 1 行を 2 段に積む。
   行見出しを持つが横に読ませたい表 (満干潮のような行見出し + 列見出しの行列) は .th-table-matrix で除外する。
   目印が scope="row" という意味そのものなので、用途が違う表は用途のクラスで抜ける */
@media screen and (max-width: 560px) {
  .th-table:not(.th-table-matrix) tbody tr:has(> th[scope="row"]) { display: block; }

  .th-table:not(.th-table-matrix) tbody th[scope="row"],
  .th-table:not(.th-table-matrix) tbody th[scope="row"] ~ td {
    display: block;
    width: auto;
    white-space: normal;
    text-align: left;
  }

  .th-table:not(.th-table-matrix) tbody th[scope="row"] {
    padding-bottom: 0;
    border-bottom: none;
    font-size: 12px;
  }

  .th-table:not(.th-table-matrix) tbody th[scope="row"] ~ td { padding-top: 2px; }
}

/* --- 表の下の操作列 --- */
.th-table-actions { margin-top: 14px; }

/* --- ページ末尾の操作列: 詳細の「戻る」、フォームの「削除」。本文との間を 1 段あける --- */
.th-page-actions { margin-top: 24px; }

/* --- 表の説明 (件数・注記) --- */
.th-table-note {
  margin: 8px 0 0;
  font-size: var(--th-font-size-xs);
  color: var(--th-color-text-muted);
}

@media screen and (max-width: 768px) {
  .th-table th,
    .th-table td { padding: 8px 10px; }
}

/* ==========================================================================
   コンポーネント: 行リスト (.th-list)
   1行1件のリンク行。ニュース・WIKI の記事一覧のように、列を並べるほど項目がないものに使う。
   骨格: 上下の 1px 罫線だけ。枠・影・角丸は持たない (表と同じ、行を積む見え方に揃える)
   中身: 左からラベル類 → タイトル (.th-list-title が残りの幅を取る)。右端に寄せる付随情報は .th-list-aside
   ========================================================================== */
.th-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--th-border-inner);
}

.th-list-item { border-bottom: var(--th-border-inner); }

/* リンクでない行 (名前を並べるだけ) も同じ並べ方にする。hover / focus はリンクにだけ付く */
.th-list-item > a,
.th-list-item > .th-list-static {
  display: flex;
  flex-wrap: wrap;   /* 狭い画面ではタイトルが次の行に落ちる */
  align-items: center;
  gap: 6px 12px;
  padding: 12px 4px;
  color: inherit;
  text-decoration: none;
}

.th-list-item > a:hover { background: var(--th-brand-50); }

.th-list-item > a:focus-visible {
  outline: 2px solid var(--th-color-focus);
  outline-offset: -2px;
}

.th-list-title {
  flex: 1 1 16em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--th-color-heading);
  overflow-wrap: anywhere;
}

/* 幅がまちまちで揃えられない付随情報 (WIKI のカテゴリ名は 2〜13 文字) は右端へ逃がす */
.th-list-aside { margin-left: auto; }

/* 選ばせる行 (モーダルの検索結果)。リンクではなく button を並べるので、行そのものを押せる形にする。
   要素は JS が作る (common/product_search.js / linecapacity/reel_lookup.js) */
.th-list-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  border-bottom: var(--th-border-inner);
  cursor: pointer;
}

.th-list-option:last-child { border-bottom: none; }

.th-list-option:hover { background: var(--th-brand-50); }

.th-list-option:focus-visible {
  outline: 2px solid var(--th-color-focus);
  outline-offset: -2px;
}

/* 候補を選ぶ前に見比べられるよう、名前の下に基本スペックを1行添える (.th-list-option の中に置く) */
.th-list-option-spec {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--th-color-text-muted);
}

/* 入力候補 (メーカー名のサジェスト)。入力欄の直下に浮かべ、中身は .th-list-option を並べる。
   要素は JS が作る (common/manufacturer_suggest.js) */
.th-suggest-anchor { position: relative; }

.th-suggest {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--th-color-surface);
  border: var(--th-border-outer);
  box-shadow: var(--th-shadow-hard);
}

/* ==========================================================================
   レイアウト: コンテナ (.th-container)
   ページの内容はコンテナに入れて中央に置く。画面幅がコンテナ幅を超えたら左右の余白は等しくなり、
   足りなければ 16px の側面余白だけを残す。中の文字は読みやすさのため左揃え (text-center は使わない)
   ========================================================================== */
.th-container {
  width: 100%;
  max-width: var(--th-container-narrow);
  margin-inline: auto;
  padding-inline: var(--th-space-4);
}

.th-container-form { max-width: var(--th-container-form); }

.th-container-wide { max-width: var(--th-container-wide); }

.th-container-dashboard { max-width: var(--th-container-dashboard); }

/* 入れ子: 広いページの中に狭い要素 (フォーム・表) を置くときは内側のコンテナで中央に寄せる。側面余白は外側だけ */
.th-container .th-container { padding-inline: 0; }

/* 全幅で見せるページ (トップ) の本文。節がそれぞれ自分のコンテナを持つので、外側では幅を絞らない */
.th-bleed { width: 100%; }

/* ==========================================================================
   コンポーネント: 見出し (.th-page-head / .th-h2 / .th-h3)
   ベースデザインのモック (ページヘッダ「TIDE / 横浜の潮汐」、節見出し「TODAY / 今日の潮」) から確定。
   全体反映時は共通 CSS へ移し、各ページの h1 (text-center / list-header / guide-hero-title) と h2.mt-4 / desc-section-title を置き換える。
   骨格: 英字のアイブロウ (Exo 2 italic 大文字、リンク青) + M PLUS 2 800 のネイビー見出し。左揃え。
   h1 は銘板 (ネイビー帯に白抜き。表のヘッダ・カードのラベル帯と同じ帯)、h2 は 2px の下罫線
   ========================================================================== */
/* アイブロウ: 見出しの上に置く英字の機能名 (TIDE / MY TACKLE / ROD)。英字のみ */
.th-eyebrow {
  display: block;
  margin-bottom: 2px;
  font-family: var(--th-font-label);
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--th-color-link);
}

/* --- ページヘッダ: アイブロウ + h1 + メタ情報。右に操作ボタンを置ける --- */
.th-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}

.th-page-head-main { min-width: 0; }

.th-page-head-actions { flex: none; }

/* 銘板: inline-block で文字幅に合わせた帯にする (全幅の帯にはしない)。長いタイトルは折り返す */
.th-page-title {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 4px 14px 6px;
  font-family: var(--th-font-heading);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
  background: var(--th-brand-800);
  text-align: left;   /* allauth.css / text-center 指定を打ち消す */
}

.th-page-title:last-child { margin-bottom: 0; }

.th-page-head-main .th-eyebrow { margin-bottom: 6px; }

.th-page-meta {
  margin: 0;
  font-size: 13px;
  color: var(--th-color-text-muted);
}

/* --- 節見出し (h2): 2px の下罫線。アイブロウを中に置ける --- */
.th-h2 {
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-family: var(--th-font-heading);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-color-heading);
  text-align: left;
  border-bottom: var(--th-border-outer);
}

/* 節見出しの右端に件数やリンクを置く */
.th-h2-aside {
  float: right;
  margin-top: 4px;
  font-family: var(--th-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--th-color-text-muted);
}

/* --- 小見出し (h3): 罫線なし --- */
.th-h3 {
  margin: 0 0 8px;
  font-family: var(--th-font-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-color-heading);
  text-align: left;
}

/* 節の間隔: 見出し + 内容のまとまり */
.th-section { margin-bottom: 32px; }

@media screen and (max-width: 768px) {
  .th-page-head { margin-bottom: 20px; }

  .th-page-head-actions { width: 100%; }

  /* 既定では操作ボタンを 1 行使って置くが、短いボタン 1 つなら見出しの右に並べたい
     (タイドグラフ⇄潮見表の行き来など)。入りきらなければ .th-page-head の flex-wrap で下の段に回る */
  .th-page-head-actions-inline { width: auto; }

  .th-page-title { font-size: 26px; padding: 3px 10px 5px; }
}

/* ==========================================================================
   コンポーネント: アコーディオン (.th-accordion)
   開閉は Bootstrap の collapse (data-bs-toggle) をそのまま使い、見た目だけ置き換える。全体反映時は共通 CSS へ移し、
   Bootstrap の .accordion / .accordion-button と tide.html の card-header + collapse-indicator を置き換える。
   骨格: 上端 2px のネイビー線 + 項目ごとに 1px の罫線。箱にしない。右端の山形 (∨ / ∧) だけで開閉を示し、色は変えない
   ========================================================================== */
.th-accordion {
  border-top: var(--th-border-outer);
}

/* 節見出しの直下に置くときは h2 の下罫線を上端の線として使う (2 本並ばないように) */
.th-h2 + .th-accordion { border-top: none; }

.th-accordion-item { border-bottom: var(--th-border-inner); }

.th-accordion-header {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.th-accordion-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 4px;
  font-family: var(--th-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--th-color-heading);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.08s;
}

.th-accordion-btn:hover { background: var(--th-brand-50); }

.th-accordion-btn:focus-visible {
  outline: 2px solid var(--th-color-focus);
  outline-offset: -2px;
}

/* 山形: 閉じているとき ∨、開くと ∧。アイコンフォントに頼らず罫線で描く */
.th-accordion-btn::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-bottom: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.th-accordion-btn[aria-expanded="true"]::after {
  margin-bottom: -4px;
  transform: rotate(-135deg);
}

/* 見出しの補足 (件数・要約): 細字グレー */
.th-accordion-btn small {
  font-size: 12px;
  font-weight: 400;
  color: var(--th-color-text-muted);
}

/* 帯型のアコーディオン見出し: .th-legend-band と同じ銘板 */
.th-accordion-btn-band {
  padding: 4px 12px 5px;
  background: var(--th-brand-800);
  color: #fff;
}

.th-accordion-btn-band:hover { background: var(--th-brand-600); }

.th-accordion-btn-band small { color: var(--th-brand-300); }

.th-accordion-body {
  padding: 0 4px 16px;
  font-size: 14px;
}

/* 表を直接置くとき: 上端の余白が 0 だと見出しの帯に詰まって見えるので少し空ける */
.th-accordion-body > .th-table,
.th-accordion-body > .th-table-scroll {
  margin-top: 10px;
}

/* --- 箱型: フィルタパネルなど、周囲から切り離したいとき --- */
.th-accordion-boxed { border: var(--th-border-outer); }

/* 詳細ページのように、カードの下に箱型アコーディオンを積むとき */
.th-card + .th-accordion-boxed { margin-top: 24px; }

.th-accordion-boxed .th-accordion-item:last-child { border-bottom: none; }

.th-accordion-boxed .th-accordion-btn { padding-left: 14px; padding-right: 14px; }

.th-accordion-boxed .th-accordion-body { padding-left: 14px; padding-right: 14px; }

/* ==========================================================================
   コンポーネント: フォーム (.th-form / .th-field)
   ベースデザインのモック (釣行を記録) から確定。全体反映時は共通 CSS へ移し、Bootstrap の form-control / form-select / form-check、
   form.css、crispy-forms の出力 (allauth) を置き換える。
   骨格: 塗り + 下線 (gray-100 の地色 + gray-500 の 1px 下線、直角)。フォーカスで白地 + ロゴ青の枠、エラーで淡い赤地 + 赤の枠。角丸・影・浮き上がりなし
        下線は入力欄の輪郭を 3:1 以上のコントラストで示すため (WCAG 1.4.11。塗りだけだと白地との差が 1.1:1 で輪郭が見えない)
   チェック / ラジオ: 自前で描く直角の箱と丸 (ネイビー 2px 枠、選ぶとネイビー)。2〜4 択の単一選択はセグメント (.th-segment)
   構造: .th-field (ラベル + 入力 + 補足 / エラー) を .th-form-grid (2 列) か .th-form-stack (1 列) に並べる。
        入力要素は .th-field の中なら要素セレクタで当たる (Django の widget にクラスを付けなくてよい)
   ========================================================================== */
.th-form { max-width: 100%; }

/* --- 並び --- */
.th-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.th-form-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.th-field-full { grid-column: 1 / -1; }

/* --- 項目 --- */
.th-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.th-field > label,
.th-field-label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--th-color-heading);
}

/* 必須の印: ラベルの後ろに小さく */
.th-field-req {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--th-danger);
}

/* 補足 (入力例・制約) とエラー: 入力欄の直下 */
.th-field-help {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--th-color-text-muted);
}

/* help_text に入る箇条書き (allauth のパスワード規則) */
.th-field-help ul { margin: 0; padding-left: 1.4em; }

.th-field-msg {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--th-danger);
}

/* --- 入力要素: .th-field の中の要素、または単独の .th-input / .th-select / .th-textarea ---
   :where() で詳細度を (0,1,0) に抑え、後続の状態 (focus / error / disabled) の指定が勝つようにする */
.th-field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.th-input,
.th-select,
.th-textarea {
  display: block;
  width: 100%;
  min-height: 40px;   /* .th-btn と同じ高さ。横に並べたとき揃う */
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--th-color-text);
  background: var(--th-gray-100);
  border: var(--th-border-width-inner) solid transparent;   /* 上・左・右は状態 (focus / error) のときだけ色が付く */
  border-bottom-color: var(--th-gray-500);                    /* 下線だけ常時。白地に対して 3.1:1 で輪郭が分かる */
  border-radius: var(--th-radius-none);
  box-shadow: none;
  outline: none;
  transition: border-color 0.08s, background-color 0.08s;
}

.th-field textarea,
.th-textarea { min-height: 80px; resize: vertical; }

.th-field input::placeholder,
.th-field textarea::placeholder,
.th-input::placeholder,
.th-textarea::placeholder { color: var(--th-color-text-muted); opacity: 0.8; }

/* 数値・日付の入力は等幅 */
.th-field input.th-num,
.th-field input[type="number"],
.th-field input[type="date"],
.th-field input[type="time"] { font-family: var(--th-font-num); }

/* セレクト: ブラウザ既定の矢印を消し、細い山形を右端に描く */
.th-field select,
.th-select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23141a6b' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.th-field select[multiple],
.th-select[multiple] {
  padding-right: 10px;
  background-image: none;
  min-height: 120px;
}

/* フォーカス: 白地 + ロゴ青の枠 (塗りが消えて「今ここ」が分かる) */
.th-field input:focus,
.th-field select:focus,
.th-field textarea:focus,
.th-input:focus,
.th-select:focus,
.th-textarea:focus,
.th-field .is-focus {
  background: var(--th-color-surface);
  border-color: var(--th-color-focus);
}

/* エラー: 淡い赤地 + 赤の枠。メッセージは .th-field-msg */
.th-field-error input,
.th-field-error select,
.th-field-error textarea {
  background: var(--th-danger-soft);
  border-color: var(--th-danger);
}

/* 無効 / 読み取り専用: 通常の塗りと見分けるため一段濃いグレー地 + 点線の枠。文字は読める濃さを保つ */
.th-field input:disabled,
.th-field select:disabled,
.th-field textarea:disabled,
.th-field input[readonly],
.th-field textarea[readonly],
.th-input:disabled,
.th-select:disabled {
  color: var(--th-gray-700);
  background: var(--th-gray-200);
  border: 1px dashed var(--th-gray-400);
  cursor: not-allowed;
}

/* 自動入力 (製品検索で埋めた項目): 薄い青の地色で「自分で打った値ではない」ことを示す */
.th-field input.is-autofilled,
.th-field select.is-autofilled {
  background: var(--th-brand-50);
  border-color: var(--th-brand-400);
}

/* --- チェックボックス / ラジオ --- */
.th-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 14px;
}

.th-checks-stack { flex-direction: column; gap: 6px; }

.th-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--th-color-text);
  cursor: pointer;
}

/* 箱と丸は自前で描く (appearance: none)。ブラウザ既定の青い角丸を消し、ボタンと同じネイビー 2px 枠の直角にする。
   チェックボックスは直角、ラジオは丸 (単一選択の慣習を残し、両者を形で区別する)。選ぶとネイビーで塗る */
.th-check input {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  background: var(--th-color-surface);
  border: 2px solid var(--th-brand-800);
  border-radius: var(--th-radius-none);
  cursor: inherit;
  transition: background-color 0.08s, border-color 0.08s;
}

.th-check input[type="radio"] { border-radius: 50%; }

.th-check input::before {
  content: "";
  width: 10px;
  height: 6px;
  border: solid #fff;
  border-width: 0 0 2px 2px;   /* L 字を回してチェック印にする */
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.08s;
}

.th-check input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: var(--th-brand-800);
  transform: scale(0);
}

.th-check input:checked { background: var(--th-brand-800); }

.th-check input[type="radio"]:checked { background: var(--th-color-surface); }

.th-check input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }

.th-check input[type="radio"]:checked::before { transform: scale(1); }

.th-check:hover input:not(:disabled) { background-color: var(--th-brand-50); }

.th-check input:focus-visible { outline: 2px solid var(--th-color-focus); outline-offset: 2px; }

.th-check input:disabled {
  background: var(--th-gray-200);
  border-color: var(--th-gray-400);
  cursor: not-allowed;
}

.th-check input:disabled::before { border-color: var(--th-gray-500); }

.th-check input[type="radio"]:disabled::before { background: var(--th-gray-500); }

.th-check:has(input:disabled) { color: var(--th-color-text-muted); cursor: not-allowed; }

/* --- セグメント: 2〜4 択の単一選択をボタンの並びにする (公開 / 未公開、m / ft、表示の切替)。
   ラジオの代わりに使う。必ず 1 つが選ばれている前提。中身は label > input[type=radio] + 文字 --- */
.th-segment {
  display: inline-flex;
  align-self: flex-start;   /* .th-field (縦の flex) の中で横いっぱいに伸びないようにする */
  max-width: 100%;
  border: var(--th-border-width-outer) solid var(--th-brand-800);
  background: var(--th-color-surface);
}

.th-segment > div { display: contents; }

/* Django の RadioSelect が選択肢ごとに div で包む分を無視する */
.th-segment label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--th-brand-800);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.08s, color 0.08s;
}

.th-segment label + label,
.th-segment > div + div label { border-left: 1px solid var(--th-brand-800); }

/* input は見えないが、キーボード操作 (矢印キー) とフォームの値はそのまま */
.th-segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.th-segment label:hover { background: var(--th-brand-50); }

.th-segment label:has(input:checked) { color: #fff; background: var(--th-brand-800); }

.th-segment label:has(input:focus-visible) { outline: 2px solid var(--th-color-focus); outline-offset: -4px; }

.th-segment label:has(input:disabled) { color: var(--th-color-text-muted); background: var(--th-gray-200); cursor: not-allowed; }

.th-segment label:has(input:disabled:checked) { color: #fff; background: var(--th-gray-500); }

/* 入力欄と横に並べるときは 40px に揃える */
.th-segment-lg label { min-height: 36px; padding: 0 18px; font-size: 14px; }

/* --- 入力欄 + 付属物 (単位・ボタン) を横に並べる --- */
.th-input-group {
  display: flex;
  align-items: stretch;
}

.th-input-group > input,
.th-input-group > select { flex: 1; min-width: 0; }

.th-input-group > .th-btn { box-shadow: none; }

.th-input-group > .th-btn:hover { transform: none; }

.th-input-addon {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  color: var(--th-color-text-muted);
  background: var(--th-gray-200);
  border: none;
  border-bottom: var(--th-border-width-inner) solid var(--th-gray-500);   /* 入力欄の下線と揃える */
  white-space: nowrap;
}

/* 時刻入力 (django-bootstrap-datepicker-plus) は自前で Bootstrap の .input-group を出力する。
   素のままだと入力欄が width:100% のまま flex-wrap で addon が下に落ちるので、.th-input-group と同じ並びに揃える */
.th-field .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }

.th-field .input-group > input { flex: 1; width: auto; min-width: 0; }

.th-field .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  color: var(--th-color-text-muted);
  background: var(--th-gray-200);
  border: none;
  border-bottom: var(--th-border-width-inner) solid var(--th-gray-500);
  border-radius: 0;
  white-space: nowrap;
}

/* 入力欄の下に置く補助操作 (単位変換など): 小の標準ボタン */
.th-field-actions { margin-top: 6px; }

/* --- フォームの節: fieldset + legend --- */
/* 項目の並びのすぐ下に節の帯が来ると、最後の入力欄と帯がくっついて見えるので離す */
.th-form-stack + .th-fieldset,
.th-form-grid + .th-fieldset {
  margin-top: 24px;
}

.th-fieldset {
  margin: 0 0 24px;
  padding: 0;
  border: none;
  min-width: 0;
}

/* --- 箱型: 節を枠で囲い、区切りをはっきりさせる (製品情報 > 基本スペック > 寸法 のような複数の節が並ぶフォーム向け) --- */
.th-fieldset-boxed {
  padding: 16px;
  border: var(--th-border-outer);
}

.th-legend {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-family: var(--th-font-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-color-heading);
  text-align: left;
  border-bottom: var(--th-border-inner);
}

/* 帯型の節見出し: 表のグループ見出しと同じ銘板。線型 (.th-legend) との選択肢 */
.th-legend-band {
  padding: 4px 12px 5px;
  background: var(--th-brand-800);
  color: #fff;
  border-bottom: none;
}

/* --- エラーの一覧: 長いフォームの先頭に置き、該当項目へリンクする --- */
.th-form-errors {
  margin: 0 0 20px;
  padding: 12px 16px;
  font-size: 14px;
  background: var(--th-danger-soft);
  border-left: 3px solid var(--th-danger);
}

.th-form-errors p { margin: 0 0 4px; font-weight: 700; color: var(--th-danger); }

.th-form-errors ul { margin: 0; padding-left: 1.2em; }

.th-form-errors a { color: var(--th-danger); }

/* --- 送信列 --- */
.th-form-actions {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--th-border-inner);
}

@media screen and (max-width: 768px) {
  .th-form-grid { grid-template-columns: minmax(0, 1fr); }

  /* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を拡大するので、モバイルだけ 16px にする */
  .th-field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
    .th-input,
    .th-select,
    .th-textarea { font-size: 16px; }
}

/* ==========================================================================
   コンポーネント: アラート・メッセージ (.th-alert)
   Django messages (画面上部の通知) とページ内の注意書き (ログインが必要・登録上限・データ未取得) の両方に使う。
   骨格: 直角。左端 3px の意味色バー + 淡い意味色の地 + 意味色のアイコン。文字はネイビーのまま (意味色の文字は AA を切るため使わない)。
        バッジの「状態 = 左端の色バー」、フォームの .th-form-errors と同じ系統
   種別は色だけでなくアイコンの形でも分ける (✓ / i / △ / 八角形の ×)。色弱でも見分けられる
   通知 (.th-alert-toast): 2px のネイビー外枠 + ハードシャドウで画面に浮かせ、.th-toasts に積む。js/common/th-alert.js が閉じる・自動で消す
   ========================================================================== */
.th-alert {
  --th-alert-color: var(--th-brand-400);
  --th-alert-bg: var(--th-info-soft);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--th-color-text);
  background: var(--th-alert-bg);
  border-left: 3px solid var(--th-alert-color);
  transition: opacity 0.2s, transform 0.2s;
}

.th-alert-success { --th-alert-color: var(--th-success); --th-alert-bg: var(--th-success-soft); }

.th-alert-info    { --th-alert-color: var(--th-info);    --th-alert-bg: var(--th-info-soft); }

.th-alert-warning { --th-alert-color: var(--th-warning); --th-alert-bg: var(--th-warning-soft); }

.th-alert-danger  { --th-alert-color: var(--th-danger);  --th-alert-bg: var(--th-danger-soft); }

.th-alert-icon {
  flex: none;
  margin-top: 2px;
  font-size: 18px;
  line-height: 1;
  color: var(--th-alert-color);
}

/* warning の黄は白地で薄いので、アイコンだけ濃い縁を付けて形を保つ */
.th-alert-warning .th-alert-icon { -webkit-text-stroke: 0.5px var(--th-brand-900); }

.th-alert-body { flex: 1; min-width: 0; }

.th-alert-body p { margin: 0; }

.th-alert-body p + p { margin-top: 4px; }

.th-alert-body a:not(.th-btn) { color: var(--th-color-link); font-weight: 700; }

.th-alert-title {
  display: block;
  margin: 0 0 2px;
  font-family: var(--th-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-color-heading);
}

/* 閉じる: 右端の × だけ。ボタンの枠は付けない */
.th-alert-close {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--th-color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.th-alert-close:hover { color: var(--th-color-heading); background: rgba(20, 26, 107, 0.08); }

.th-alert-close:focus-visible { outline: 2px solid var(--th-color-focus); outline-offset: 1px; }

/* 本文の下に置く操作 (ログインへ・再読み込み): リンク型か小の標準ボタン */
.th-alert-actions { margin-top: 8px; }

/* 1 行の短い通知: アイコンと文字を中央で揃える */
.th-alert-sm { padding: 8px 12px; font-size: 13px; align-items: center; }

.th-alert-sm .th-alert-icon { margin-top: 0; font-size: 16px; }

/* --- 通知 (Django messages): 画面上部に浮かせる。外枠 + ハードシャドウで「ページの上に載っている」ことを示す --- */
.th-alert-toast {
  margin: 0;
  border: var(--th-border-outer);
  border-left: 3px solid var(--th-alert-color);
  box-shadow: var(--th-shadow-hard);
}

.th-toasts {
  position: fixed;
  top: 80px;   /* nav の下。base.js の padding と同じ */
  left: 50%;
  z-index: 2000;
  display: grid;
  gap: 10px;
  width: min(600px, calc(100vw - 32px));
  transform: translateX(-50%);
}

/* 閉じるとき: 右へ 8px 動きながら消える (th-alert.js が is-closing を付け、transitionend で要素を消す) */
.th-alert.is-closing { opacity: 0; transform: translateX(8px); pointer-events: none; }

/* --- ページ先頭へ戻る: 右下に浮かぶ。出し入れは js/base.js がスクロール量で切り替える --- */
.th-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1020;
}

/* ボトムタブが下端を占める画面では、その上に逃がす (下から ボトムタブ → このボタン)。
   タブを出さないページ (トップ) は body.has-tabbar を持たないので 20px のまま */
@media screen and (max-width: 768px) {
  body.has-tabbar .th-back-to-top { bottom: calc(56px + env(safe-area-inset-bottom) + 12px); }
}

/* ==========================================================================
   コンポーネント: ナビゲーション (.th-breadcrumb / .th-tabs / .th-pagination / .th-pager / .th-flow)
   ページの中の移動手段。サイト全体の nav / footer (グラデーション) は対象外 (現状維持)。
   骨格: 直角。罫線は表・アコーディオンと同じ階層 (2px ネイビー = 節の線、1px 薄い青 = 内部)。
        「今いる場所」はネイビーの塗り (ページ送り) か 3px のネイビー下線 (タブ) で示し、色だけに頼らない
   ========================================================================== */

/* --- パンくず: 背景・角丸・ぼかしなし。文字 12px、区切りは › --- */
.th-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 8px 0 12px;
  padding: 0;
  font-size: 12px;
  line-height: 1.6;
  list-style: none;
}

.th-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }

.th-breadcrumb li + li::before { content: "›"; color: var(--th-gray-500); }

.th-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--th-color-link);
  text-decoration: none;
}

.th-breadcrumb a:hover { text-decoration: underline; }

.th-breadcrumb a:focus-visible { outline: 2px solid var(--th-color-focus); outline-offset: 2px; }

.th-breadcrumb i { font-size: 12px; }

.th-breadcrumb [aria-current="page"] { color: var(--th-color-text); font-weight: 700; }

/* 狭い画面: 折り返さず横スクロール。末尾 (現在地) が見えるよう右寄せにしない */
@media screen and (max-width: 480px) {
  .th-breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}

/* --- タブ: 2px ネイビーの下線に載せる。選択中は 3px のネイビー下線 + 800。
   Bootstrap の Tab JS をそのまま使う (data-bs-toggle="tab" + role="tab" で active / aria-selected を切り替える) --- */
.th-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-bottom: var(--th-border-outer);
}

.th-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -2px;   /* 下線に重ねる */
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--th-color-text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.08s, background-color 0.08s;
}

.th-tab:hover { color: var(--th-color-heading); background: var(--th-brand-50); }

.th-tab:focus-visible { outline: 2px solid var(--th-color-focus); outline-offset: -2px; }

.th-tab.active,
.th-tab[aria-selected="true"],
.th-tab[aria-current="page"] {
  font-weight: 800;
  color: var(--th-color-heading);
  border-bottom-color: var(--th-brand-800);
}

.th-tab .th-badge { margin-left: 2px; }

/* 狭い画面: 折り返さず横スクロール */
@media screen and (max-width: 480px) {
  .th-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

  .th-tab { padding: 10px 12px; white-space: nowrap; }
}

/* --- ページ送り: 36px の直角。数字は等幅、現在ページはネイビーの塗り --- */
.th-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.th-pagination a,
.th-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--th-font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--th-color-heading);
  background: var(--th-color-surface);
  border: 1px solid var(--th-brand-200);
  text-decoration: none;
  transition: background-color 0.08s, border-color 0.08s;
}

.th-pagination a:hover { background: var(--th-brand-50); border-color: var(--th-brand-800); }

.th-pagination a:focus-visible { outline: 2px solid var(--th-color-focus); outline-offset: 1px; }

.th-pagination [aria-current="page"] { color: #fff; background: var(--th-brand-800); border-color: var(--th-brand-800); }

.th-pagination .is-disabled { color: var(--th-gray-500); background: var(--th-gray-100); border-color: var(--th-gray-200); }

.th-pagination .th-pagination-gap { border: none; background: none; color: var(--th-gray-500); }

/* 前へ / 次へ: 本文の書体で */
.th-pagination .th-pagination-prev,
.th-pagination .th-pagination-next { font-family: inherit; padding: 0 14px; }

/* --- 前後ナビ (ガイドの章送り・詳細の前後): 上に 1px の罫線、左右に振り分ける。中身は .th-btn --- */
.th-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: var(--th-border-inner);
}

.th-pager-center { margin-inline: auto; }

/* --- 操作の流れ: 手順を横に並べる。番号は Exo 2 の刻印、箱は 1px の内部罫線、矢印は薄いグレー --- */
.th-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: th-flow;
}

.th-flow-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  padding: 22px 16px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--th-color-heading);
  text-align: center;
  background: var(--th-color-surface);
  border: 1px solid var(--th-brand-200);
  counter-increment: th-flow;
}

.th-flow-item::before {
  content: counter(th-flow, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px 8px;
  font-family: var(--th-font-label);
  font-size: 11px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--th-brand-800);
}

.th-flow-item i { font-size: 24px; line-height: 1; color: var(--th-color-link); }

.th-flow-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  color: var(--th-gray-500);
}

@media screen and (max-width: 480px) {
  .th-flow { flex-direction: column; align-items: stretch; }

  .th-flow-arrow { justify-content: center; transform: rotate(90deg); }
}

/* ==========================================================================
   コンポーネント: モーダル (.th-modal)
   Bootstrap の Modal JS と骨組み (.modal > .modal-dialog > .modal-content > .modal-header / -body / -footer) はそのまま使い、
   .modal に .th-modal を足して見た目だけ差し替える。
   骨格: 直角。ネイビー 2px 外枠 + 大きめのハードシャドウ (6px) で「ページの上に載っている」ことを示す。
        ヘッダはカードの .th-card-head と同じネイビーの帯 (白の見出し + Exo 2 のアイブロウ)。
   種類: 説明 (既定) / 削除確認 (.th-modal-danger: 枠・影・帯が赤) / 大きいもの (.modal-lg: 製品検索・地図)
   ========================================================================== */
.th-modal .modal-content {
  background: var(--th-color-surface);
  border: var(--th-border-outer);
  border-radius: var(--th-radius-none);
  box-shadow: 6px 6px 0 var(--th-brand-800);
}

/* 可変長: 中身の高さぶんだけ開き、画面に収まらない分だけ本文をスクロールする。
   Bootstrap の .modal-dialog-scrollable と同じ仕組みを、個別にクラスを付けなくても全 .th-modal の既定にする
   (詳細・地図・検索などどのモーダルも中身の分量が画面高さを超え得るため) */
.th-modal .modal-dialog { height: calc(100% - 1rem); }

/* Bootstrap は 576px 以上で modal-dialog の margin を 0.5rem から 1.75rem (上下合計 3.5rem) に広げる。
   高さの計算式もこの余白に合わせないと、広い画面でだけ下端が画面の外へはみ出す */
@media screen and (min-width: 576px) {
  .th-modal .modal-dialog { height: calc(100% - 3.5rem); }
}

.th-modal .modal-content {
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.th-modal .modal-header,
.th-modal .modal-footer { flex: none; }

.th-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* --- ヘッダ: ネイビーの帯 --- */
.th-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  color: #fff;
  background: var(--th-brand-800);
  border-bottom: none;
  border-radius: 0;
}

.th-modal .modal-header .th-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--th-brand-300);
}

.th-modal .modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--th-font-heading);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  text-align: left;   /* allauth.css の h2 中央寄せを打ち消す */
}

/* 閉じる: 帯の右端の ×。Bootstrap の .btn-close (SVG 背景) は使わない */
.th-modal-close {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

.th-modal-close:hover { background: rgba(255, 255, 255, 0.15); }

.th-modal-close:focus-visible { outline: 2px solid var(--th-brand-300); outline-offset: -2px; }

/* --- 本文 --- */
.th-modal .modal-body {
  padding: 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--th-color-text);
}

.th-modal .modal-body p { margin: 0 0 12px; }

/* 地図を載せるモーダル。高さは呼び出し側が --th-map-height で変えられる */
.th-modal-map {
  width: 100%;
  height: var(--th-map-height, 70vh);
}

/* モーダルの中に直接置く部品 (検索欄・表示切替・注記) の下余白 */
.th-modal .modal-body > .th-field,
.th-modal .modal-body > .th-segment { margin-bottom: 14px; }

.th-modal .modal-body > .th-field-help { margin-bottom: 8px; }

.th-modal .modal-body p:last-child { margin-bottom: 0; }

.th-modal .modal-body ul { margin: 0 0 12px; padding-left: 1.4em; }

.th-modal .modal-body li { margin-bottom: 4px; }

/* 文の先頭に置くバッジ (STEP など) は、後ろの文と字間を空ける */
.th-modal .modal-body p > .th-badge:first-child { margin-right: 8px; }

/* 削除確認の対象名: 何を消すか目立たせる */
.th-modal-target {
  display: block;
  margin: 8px 0;
  padding: 8px 12px;
  font-weight: 700;
  color: var(--th-color-heading);
  background: var(--th-gray-100);
  border-left: 3px solid var(--th-brand-800);
}

/* 削除確認の補足 (何が消えないか)。対象名の下に続くので、上の余白だけ足して下は詰める */
.th-modal-note { margin: 12px 0 0; }

/* --- フッタ: 1px の罫線の上にボタン。主操作を右、キャンセルを左に --- */
.th-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-top: var(--th-border-inner);
  border-radius: 0;
}

.th-modal .modal-footer > * { margin: 0; }

.th-modal .modal-footer form { display: contents; }

/* 削除フォーム (csrf + ボタン 2 つ) の分の箱を無視する */

/* --- 削除確認: 枠・影・帯を赤に。破壊的操作のボタン (.th-btn-danger) と同じ系統 --- */
.th-modal-danger .modal-content { border-color: var(--th-danger); box-shadow: 6px 6px 0 var(--th-danger); }

.th-modal-danger .modal-header { background: var(--th-danger); }

.th-modal-danger .modal-header .th-eyebrow { color: #fff; opacity: 0.85; }

.th-modal-danger .th-modal-close:focus-visible { outline-color: #fff; }

.th-modal-danger .th-modal-target { border-left-color: var(--th-danger); }

/* --- 大きいもの (製品検索・地図): 本文の中で検索結果や地図がスクロールする --- */
.th-modal .modal-lg { max-width: 800px; }

.th-modal-scroll-area { max-height: 400px; overflow-y: auto; border: var(--th-border-inner); }

/* 狭い画面: 影の分だけ右と下を空ける */
@media screen and (max-width: 480px) {
  /* margin の上下が非対称 (16px + 22px = 38px) なので、高さの計算式もこの合計に合わせる。
     ずれると下端が画面からはみ出す (1rem=16px 前提の既定値のままだと 22px 分超過する) */
  .th-modal .modal-dialog { margin: 16px 22px 22px 16px; height: calc(100% - 38px); }
}

/* ==========================================================================
   コンポーネント: 空状態 (.th-empty)
   一覧が 0 件・カードの中に載せるものがない・ページがない、のときに「何もない」を示し、次にする操作を 1 つ置く。
   骨格: 直角。1px の点線の枠 (「ここに入るはずのものがない」= 無効の入力欄と同じ点線) に中央寄せで
        アイコン (薄いグレー) + 見出し + 1〜2 行の説明 + ボタン。
   種類: 一覧の空 (既定) / カード内の小さい空 (.th-empty-sm: 枠なし・文だけ) / エラーページ (.th-empty-page: Exo 2 の大きな番号)
   ========================================================================== */
.th-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  color: var(--th-color-text-muted);
  background: var(--th-color-surface);
  border: 1px dashed var(--th-gray-400);
}

.th-empty-icon {
  margin-bottom: 6px;
  font-size: 40px;
  line-height: 1;
  color: var(--th-gray-400);
}

.th-empty-title {
  margin: 0;
  font-family: var(--th-font-heading);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-color-heading);
}

.th-empty-text {
  max-width: 32em;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.th-empty-actions { margin-top: 14px; justify-content: center; }

/* --- カード内の小さい空: 枠を持たず、文だけを薄く。カードや表の中で場所を取らない --- */
.th-empty-sm {
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 13px;
  background: none;
  border: none;
}

.th-empty-sm .th-empty-icon { margin: 0; font-size: 18px; }

.th-empty-sm .th-empty-text { font-size: 13px; }

/* 表の中: tbody の 1 行に colspan で置く */
.th-table td.th-empty-cell { padding: 0; }

.th-table td.th-empty-cell .th-empty { border: none; }

/* --- エラーページ (404 / 429 / 500): 枠なし、Exo 2 の大きな番号 + 見出し + トップへ --- */
.th-empty-page {
  min-height: 50vh;
  justify-content: center;
  padding: 64px 24px;
  background: none;
  border: none;
}

.th-empty-code {
  margin: 0 0 4px;
  font-family: var(--th-font-label);
  font-style: italic;
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--th-brand-800);
}

.th-empty-page .th-empty-title { font-size: 22px; }

@media screen and (max-width: 480px) {
  .th-empty { padding: 32px 16px; }

  .th-empty-code { font-size: 72px; }
}

/* ==========================================================================
   コンポーネント: ツールバー (.th-toolbar)
   一覧ページで「件数・検索・絞り込み・並び・表示切替・新規追加」を 1 本の帯にまとめる。
   骨格: 白地 + 下端 2px のネイビー線 (節の線と同じ階層)。直角。ページ見出しの下に置き、スクロールしても nav の下に貼り付く (sticky)。
   高さは 1 行 (48px 相当)。絞り込みの中身は帯の中に畳んでおき (.th-toolbar-panel)、開くと下に伸びる。
   適用中の条件はチップ (.th-chip) で帯の下に並べ、× で 1 つずつ外せる
   ========================================================================== */
.th-toolbar {
  position: sticky;
  top: var(--th-nav-height);
  z-index: 20;
  margin-bottom: 16px;
  background: var(--th-color-surface);
  border-bottom: var(--th-border-outer);
}

.th-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 0;
}

/* 右端に寄せるまとまり (新規追加・表示切替) */
.th-toolbar-end { margin-left: auto; }

.th-toolbar-end,
.th-toolbar-start { display: flex; align-items: center; gap: 8px; }

/* 縦の区切り線 */
.th-toolbar-sep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--th-color-border-inner);
}

/* 件数: 数字だけ Exo 2 の刻印で大きく */
.th-toolbar-count {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: none;
  font-size: 12px;
  color: var(--th-color-text-muted);
  white-space: nowrap;
}

.th-toolbar-count b {
  font-family: var(--th-font-label);
  font-style: italic;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--th-color-heading);
}

/* 検索: 入力欄の中に虫眼鏡。フォームの塗り + 下線をそのまま使う */
.th-toolbar-search {
  position: relative;
  flex: 1 1 200px;
  max-width: 280px;
  min-width: 0;
}

.th-toolbar-search input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px 6px 30px;
  font-size: 13px;
  color: var(--th-color-text);
  background: var(--th-gray-100);
  border: var(--th-border-width-inner) solid transparent;
  border-bottom-color: var(--th-gray-500);
  border-radius: var(--th-radius-none);
  outline: none;
}

@media screen and (max-width: 768px) {
  .th-toolbar-search input { font-size: 16px; }
}

.th-toolbar-search input:focus { background: var(--th-color-surface); border-color: var(--th-color-focus); }

.th-toolbar-search .bi {
  position: absolute;
  top: 50%;
  left: 9px;
  font-size: 14px;
  color: var(--th-color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

/* 絞り込みの開閉ボタン: 件数バッジ付き。開いている間は押し込んだ見た目 */
.th-toolbar-toggle[aria-expanded="true"] {
  color: #fff;
  background: var(--th-brand-800);
  transform: translate(2px, 2px);
  box-shadow: var(--th-shadow-hard-pressed);
}

.th-toolbar-toggle[aria-expanded="true"] .th-badge {
  color: var(--th-brand-800);
  background: #fff;
  border-color: #fff;
}

/* 畳んである絞り込みの中身 */
.th-toolbar-panel {
  padding: 14px 0 16px;
  border-top: var(--th-border-inner);
}

/* 適用中の条件 */
.th-toolbar-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 0 8px;
}

.th-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--th-brand-800);
  background: var(--th-brand-50);
  border: 1px solid var(--th-brand-200);
  white-space: nowrap;
}

.th-chip-key { font-weight: 400; color: var(--th-color-text-muted); }

.th-chip-remove {
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 11px;
  color: var(--th-color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.th-chip-remove:hover { color: #fff; background: var(--th-brand-800); }

.th-chip-remove:focus-visible { outline: 2px solid var(--th-color-focus); outline-offset: 1px; }

/* 狭い画面: 帯は 2 段にし、検索を全幅に。件数と操作を下段で横スクロールさせる */
@media screen and (max-width: 768px) {
  .th-toolbar-row { flex-wrap: wrap; }

  .th-toolbar-search { flex: 1 1 100%; max-width: none; order: -1; }

  .th-toolbar-end { margin-left: auto; }
}

/* ==========================================================================
   コンポーネント: サイトのナビゲーション (.th-nav)
   全ページの上端に固定する帯。高さは --th-nav-height (56px) ひとつで決まり、
   body の上余白 (base.css) と .th-toolbar の sticky 位置が同じ値を見る。JS で測らない。
   骨格: 直角。ネイビーの帯に、左がロゴ、右が「データ / ツール」+ アカウント + ハンバーガー。
        2 リンクは 769px 以上でだけ出す (768px 以下は同じ行き先をボトムタブが持つので重ねない)。
   開閉は Bootstrap の Dropdown JS と .dropdown / .dropdown-menu の骨組みをそのまま使い、
   見た目だけ .th-menu で差し替える (モーダルと同じ方針)。
   ========================================================================== */
.th-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  height: var(--th-nav-height);
  background: var(--th-gradient-nav);
}

.th-nav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding-inline: var(--th-space-4);
}

/* --- ロゴ: 左端。ここがホーム (トップページ) への戻り道 --- */
.th-nav-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  color: #fff;
  text-decoration: none;
}

.th-nav-brand:hover { color: #fff; }

.th-nav-logo-img {
  flex: none;
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

.th-nav-logo {
  font-family: var(--th-font-logo);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- 主要な行き先 (データ / ツール) --- */
.th-nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}

@media screen and (min-width: 769px) {
  .th-nav-links { display: flex; }
}

.th-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.th-nav-link i { font-size: 16px; line-height: 1; }

.th-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* 現在地はボトムタブと同じ示し方 (明るい板 + 白の 800 + 上端の白線) に揃える */
.th-nav-link[aria-current="page"] {
  color: #fff;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 0 #fff;
}

/* --- アカウント・ハンバーガーの引き金 --- */
.th-nav-btn {
  display: inline-grid;
  place-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

.th-nav-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* 未ログインはアイコンを落として「まだ誰でもない」ことを示す */
.th-nav-btn.is-anonymous { color: rgba(255, 255, 255, 0.55); }

.th-nav-link:focus-visible,
.th-nav-btn:focus-visible,
.th-nav-brand:focus-visible { outline: 2px solid var(--th-brand-300); outline-offset: -3px; }

/* Bootstrap が引き金に足す三角を消す */
.th-nav .dropdown-toggle::after { display: none; }

/* --- 開いたメニュー (.th-menu): 直角・ネイビー 2px 外枠 + ハードシャドウ。モーダル・入力候補と同じ面 --- */
.th-menu.dropdown-menu {
  min-width: 220px;
  max-height: 70vh;
  margin-top: 6px;
  padding: 6px 0;
  overflow-y: auto;
  font-family: var(--th-font-body);
  font-size: 14px;
  color: var(--th-color-text);
  background: var(--th-color-surface);
  border: var(--th-border-outer);
  border-radius: var(--th-radius-none);
  box-shadow: var(--th-shadow-hard);
}

.th-menu-name {
  padding: 6px 14px;
  font-weight: 800;
  color: var(--th-color-heading);
  text-align: center;
  white-space: nowrap;
}

/* 群の見出し。押せないものはグレーに落として、押せる見出しと見分けられるようにする */
.th-menu-head {
  margin: 0;   /* base.css の h2 の余白を打ち消す (見出し要素で使うため) */
  padding: 8px 14px 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--th-gray-600);
}

a.th-menu-head {
  display: block;
  font-size: 14px;
  color: var(--th-color-heading);
  text-decoration: none;
}

/* 行。モーダルを開くだけのものは button なので、button の既定を消して a と同じ見た目にする */
.th-menu-item {
  display: block;
  width: 100%;
  padding: 8px 14px 8px 22px;
  font: inherit;
  color: var(--th-color-text);
  text-align: left;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.th-menu-item:hover,
a.th-menu-head:hover { color: var(--th-color-heading); background: var(--th-brand-100); }

.th-menu-item:focus-visible,
a.th-menu-head:focus-visible { outline: 2px solid var(--th-color-link); outline-offset: -2px; }

.th-menu-sep {
  margin: 6px 0;
  border: none;
  border-top: var(--th-border-inner);
}

/* ==========================================================================
   コンポーネント: サイトのフッター (.th-footer)
   ページの下端。nav と同じ系統のネイビーを 1 段暗くして「ここで終わり」を示す。
   骨格: 直角・グラデーションなし。ロゴ + リンクの行 + 版表記。区切りの | は CSS が出す。
   ========================================================================== */
/* --- 本文の入れもの --- */
.th-main {
  flex: 1 0 auto;   /* 内容が短いページでもフッターを下端まで押し下げる */
  /* 内容がフッターまで届くページで、最後の要素とフッターがくっつかないようにする。
     body は flex なので、本文側の margin-bottom ではフッターとの間が作れない */
  padding-bottom: var(--th-space-8);
}

.th-footer {
  padding: 32px var(--th-space-4);
  color: #fff;
  background: var(--th-gradient-footer);
  text-align: center;
}

.th-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  color: #fff;
  text-decoration: none;
}

.th-footer-brand:hover { color: #fff; }

.th-footer-logo-img {
  flex: none;
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.th-footer-logo {
  font-family: var(--th-font-logo);
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
}

.th-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 12px;
  margin: 0 0 4px;
  padding: 0;
  font-size: 13px;
  list-style: none;
}

.th-footer-links li + li::before {
  margin-right: 12px;
  color: rgba(255, 255, 255, 0.4);
  content: "|";
}

.th-footer-link {
  padding: 0;
  font: inherit;
  color: #fff;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.th-footer-link:hover { color: #fff; text-decoration: underline; }

.th-footer-link:focus-visible { outline: 2px solid var(--th-brand-300); outline-offset: 2px; }

.th-footer-copy {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 768px) {
  .th-footer { padding: 24px var(--th-space-4); }

  .th-footer-links { font-size: 12px; }
}

/* ==========================================================================
   コンポーネント: Cookie 同意バー (.th-cookiebar)
   初回訪問時だけ画面下端に出す。中身は templates/cookiebar.html が持ち、
   js/cookie_consent/cookiebar.js が body の末尾に差し込む。
   骨格: 直角。画面幅いっぱいの帯ではなく、左右下に余白を持つカード。
        地はスレート (--th-gray-700)。ページの白いカードとも、ネイビーの nav・フッタとも取り違えないよう、
        どれとも違う中間の濃さにしてある。6px のハードシャドウ (モーダルと同じ) と、わずかに透かした地で
        「ページの上に浮いているもの」だと示す。暗幕は敷かない (後ろのページを読む・押すのを妨げないため)。
   下端に固定するものの順番 (下から ボトムタブ → Cookie バー) に合わせ、768px 以下ではタブ 1 つ分持ち上げる。
   「すべて許可」は主 CTA (ブルーの塗り)、「拒否」は標準 (白抜き)。大きさ・並びの位置・クリック数は同じに保つ。
   ========================================================================== */
.th-cookiebar {
  position: fixed;
  right: var(--th-space-4);
  bottom: var(--th-space-4);
  left: var(--th-space-4);
  z-index: 1040;
  max-width: var(--th-container-wide);
  margin-inline: auto;
  padding: 16px;
  color: #fff;
  /* スレートの半透明。後ろがうっすら透けることで、ページの一部ではなく上に載っているものだと分かる。
     値は --th-gray-700 と同じ色 (var() に不透明度を足せないのでリテラルで書く)。
     0.94 より下げると白文字の読みやすさが落ちる */
  background: rgba(61, 74, 92, 0.94);
  border: var(--th-border-outer);
  box-shadow: 6px 6px 0 var(--th-brand-800);
}

.th-cookiebar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}

.th-cookiebar-text {
  flex: 1 1 320px;
  font-size: 12px;
  line-height: 1.7;
}

.th-cookiebar-text p { margin: 0 0 6px; }

.th-cookiebar-text p:last-child { margin-bottom: 0; }

.th-cookiebar-text a {
  font-weight: 700;
  color: var(--th-brand-300);
}

.th-cookiebar-text a:hover { color: var(--th-brand-300); }

.th-cookiebar-actions { flex: none; }

/* --- 濃い地に載せるボタン。枠と文字を白にして地から浮かせる --- */
.th-cookiebar .th-btn {
  color: #fff;
  border-color: #fff;
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.35);
}

.th-cookiebar .th-btn:hover {
  color: var(--th-gray-800);
  background: #fff;
}

/* 主 CTA (すべて許可) はブルーの塗りのまま。枠だけ白にして地から切り離す。
   拒否とは大きさ・並びの位置・クリック数を同じに保つ (同意の有効性は「拒否が同じくらい容易か」で見られる) */
.th-cookiebar .th-btn-primary-blue,
.th-cookiebar .th-btn-primary-blue:hover {
  color: #fff;
  background: var(--th-brand-600);
}

.th-cookiebar .th-btn-link {
  border: none;
  border-bottom: 2px solid var(--th-brand-300);
  box-shadow: none;
}

.th-cookiebar .th-btn-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: #fff;
}

.th-cookiebar .th-btn:focus-visible { outline: 2px solid var(--th-brand-300); outline-offset: 2px; }

@media screen and (max-width: 768px) {
  /* ボトムタブの上に重ねる (下から ボトムタブ → Cookie バーの順) */
  .th-cookiebar { bottom: calc(56px + env(safe-area-inset-bottom) + 12px); }

  .th-cookiebar-actions { width: 100%; justify-content: center; }
}

/* --- モバイルのボトムタブ (.th-tabbar) ---
   768px 以下でだけ画面下端に固定し、データ / ツール / アカウントの 3 つへ 1 タップで移動できるようにする。
   PC では出さない (上の nav が同じ役割を担える。親指の届く場所という利点もマウスにはない)。
   ハンバーガーは従来どおり全項目を持つ (置き換えない)。トップページ (index) では出さない (body.has-tabbar を付けない)。
   骨格: nav と同じネイビーの帯。高さ 56px + iPhone の下端 (env(safe-area-inset-bottom))、直角、アイコン + 10px のラベル。
        現在地は色だけに頼らず上端 3px の水色 (brand-300) で示す。
   フッターとの関係: タブバーは常に出したまま、フッター側に 1 タブ分の余白を足して重なりを逃がす (JS で出し入れしない) */
.th-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: none;   /* PC では出さない。768px 以下でだけ flex にする */
  justify-content: center;
  background: var(--th-brand-800);
  border-top: 1px solid rgba(255, 255, 255, 0.18);   /* フッターの濃紺と面が続かないよう、髪の毛 1 本分だけ境を作る */
  padding-bottom: env(safe-area-inset-bottom);
}

@media screen and (max-width: 768px) {
  .th-tabbar { display: flex; }
}

.th-tabbar-inner {
  display: flex;
  width: 100%;
}

.th-tabbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  text-decoration: none;

}

.th-tabbar-item i { font-size: 20px; line-height: 1; }

/* 現在地: 帯の中を少し明るくした板 + 白の文字 + 800。上端に 2px の白線を足して、見出しの下罫線と同じ「今ここ」の示し方に揃える。
   色相ではなく明暗と面で示すので、色の見え方が違っても分かる */
.th-tabbar-item[aria-current="page"] {
  color: #fff;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 0 #fff;
}

.th-tabbar-item:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.th-tabbar-item[aria-current="page"]:hover { background: rgba(255, 255, 255, 0.26); }

.th-tabbar-item:focus-visible { outline: 2px solid var(--th-brand-300); outline-offset: -3px; }

/* 未読・未保存の点。数字は出さない */
.th-tabbar-dot {
  position: absolute;
  top: 6px;
  margin-left: 16px;
  width: 6px;
  height: 6px;
  background: var(--th-accent-500);
}

/* 背景の暗幕: 黒ではなくネイビー */
.modal-backdrop { background-color: var(--th-brand-900); }

.modal-backdrop.show { opacity: 0.6; }

@media screen and (max-width: 768px) {
  body.has-tabbar { padding-bottom: 60px; }
}

@media screen and (max-width: 768px) {
  body.has-tabbar footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}