/*
 * サイト共通のデザイントークンとコンポーネント。5ページすべてが読み込む。
 * 各ページの<style>より前に読み込むこと(ページ側で個別に上書きできるように)。
 *
 * 色は「役割」で名前を分ける。1つの色に複数の役割を持たせない
 * (例: ブランド色のnavyを、チャートの強調線やフォーカスリングにまで
 * そのまま使い回す、ということをしない。値が同じでも、役割ごとに専用の
 * 変数を経由させることで、後から「選択状態の色だけ変えたい」が機械的にできる)。
 *
 *   --navy / --moon 等   … ブランドの地の色(既存の値をそのまま維持)
 *   --accent             … 「選択中/アクティブ」を示す唯一の色
 *   --selected-bg/-border/-ink … チップ・タブ・ボタンの選択状態
 *   --focus-ring          … キーボードフォーカスの輪郭専用
 *   --success/--warning/--danger/--info … 状態を表す色。ブランド色/アクセントとは別系統
 *
 * ページ固有の配色(speed-calculatorのキャンチケ色、update-timelineのカテゴリ色、
 * field-tableの伝説マーカー等)はこのファイルに含めない。各ページの<style>に残す。
 */
/* ダブルタップでのズームを全ページ(モーダル含む)で無効化する。touch-actionは
   祖先要素の値と交差して子孫にも効くため、htmlに1回設定するだけで全体に効く
   (pinchズームは残るuser-scalable=no等と違い、manipulationは二本指ズームは妨げない)。
   個別のcanvas/SVGドラッグ領域が持つtouch-action:noneはセレクタの詳細度で優先される。 */
html{ touch-action:manipulation; }
/* iOSは文字入力欄のfont-sizeが16px未満だとフォーカス時に自動でズームしてしまう
   (ダブルタップズームとは別の仕組みで、上のtouch-actionでは防げない)。
   文字入力を受け付ける画面でもズームが起きないよう、全ページ共通で16px以上を既定にする。
   checkbox/radio/range/button系は対象外(ズームの引き金にならないため)。
   個別のCSSがこれより詳細度の高いセレクタでfont-sizeを指定していれば、そちらが優先される
   (その場合も16px未満にはしないこと)。 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]),
textarea,
select{
  font-size:16px;
}

:root{
  /* ---- ブランド/ニュートラル(既存の値をそのまま踏襲) ---- */
  --navy:#1B2245;
  --navy-deep:#11152E;
  --moon:#F6CB5A;
  --moon-soft:#FCE6AC;
  --paper:#FBFBFD;
  --paper-dim:#F1F2F8;
  --line:#cfd6ec;
  --ink:#20243B;
  --ink-soft:#5B5F7E;
  --heading-ink:var(--navy);
  --label-ink:var(--ink);
  --header-bg:#1B2245;
  --on-dark:#FBFBFD;

  /* ---- 役割別エイリアス ----
     値はブランド色を借りるが、「なぜこの色を使っているか」を名前で示す。
     以後の新規CSSはここを経由し、--navy/--moonを直接書かない。 */
  --accent:var(--moon);
  --accent-ink:var(--navy-deep);   /* アクセント地の上に置く文字色 */
  --selected-bg:var(--navy);
  --selected-border:var(--navy);
  --selected-ink:var(--paper);     /* 選択状態の地の上に置く文字色 */
  /* 選択中を「薄い背景+太い枠」で示す部品用。通常の塗りつぶし選択とは分ける。 */
  --selected-soft-bg:color-mix(in srgb, var(--selected-border) 12%, var(--paper));
  --selected-strong-border:var(--selected-border);
  --selected-soft-ink:var(--selected-border);
  --focus-ring:var(--navy);

  /* ---- 寝顔図鑑の機能テーマ色 ----
     図鑑・個体・フィールドの3入口で同じ青を使い、寝顔図鑑の
     選択中タブ／ビューを見分けやすくする。報酬色とは別の役割。 */
  --dreamface-theme:#3D72C9;
  --dreamface-theme-ink:#2D5FAF;

  /* ---- 状態色(新規。ブランド/アクセントとは別系統の色相を選び、
     「選択中」と「状態(成功/注意/危険/情報)」を混同しないようにする) ---- */
  --success:#2E9E5B;
  --success-bg:#E1F3E7;
  --warning:#C97A1B;
  --warning-bg:#FBEBD2;
  --danger:#D0453C;
  --danger-bg:#FBE0DE;
  --info:#3D72C9;
  --info-bg:#E1EAFA;

  /* ---- アップデート/イベントのカテゴリ色(update-timeline.html基準) ----
     元々はupdate-timeline.htmlだけのローカル変数だったが、ホームの簡易
     カレンダーの帯にも同じ色を使うことで「この色=このカテゴリ」を
     サイト全体で1つに揃える(色に役割を持たせ、ページごとに意味を変えない)。
     どのカテゴリ色も彩度が高めなので、上に乗せる文字は白(#fffまたは--on-dark)を使う。 */
  --cat-新機能:var(--accent);
  --cat-新フィールド:#7CB342;
  --cat-新ポケモン:#EC6BAA;
  --cat-上限解放・バランス調整:#2AA198;
  --cat-上方修正:#E4574D;
  --cat-イベント:#F2762E;
  --cat-伝説イベント:#6C4AA1;
  --cat-不具合修正:#4FA8D8;
  --cat-その他:#8B93A6;
  --cat-メンテナンス:#7C6FE0;
  --cat-アップデート:#8B93A6;
  --cat-予告:#C77DBB;
  --cat-アメ:#FF5C8A;
  /* イベントパック(update-timeline.htmlのカレンダーにのみ登場する、UPDATES外の独自カテゴリ) */
  --cat-パック:#D9A441;
  /* 新月/満月(js/moonDays.jsの計算値。update-timeline.htmlのカレンダーにのみ登場する、
     UPDATES外の独自カテゴリ)。絞り込みピルの代表色のみここで持ち、個々のチップの色は
     ホームカレンダーの帯(is-goodsleep/is-newmoon)と同じ配色をJS側で直接指定する */
  --cat-新月満月:#39447A;

  /* ---- ピックアップ表(js/pickupTable.js)の枠色 ----
     大/中ピックアップの枠色。小ピックアップ(枠なし)と3段階で区別する。 */
  --pickup-major:#E4574D;
  --pickup-medium:var(--accent);

  /* ---- タイプスケール(7段階。以後の新規/再スキンCSSはこの中から選ぶ) ---- */
  --fs-2xs:.6875rem;  /* 11px: バッジ・注記の最小サイズ */
  --fs-xs:.75rem;     /* 12px: 補助テキスト */
  --fs-sm:.8125rem;   /* 13px: 本文の小さめ */
  --fs-base:.875rem;  /* 14px: 本文の基準 */
  --fs-md:1rem;       /* 16px: 強調本文・カード見出し */
  --fs-lg:1.1875rem;  /* 19px: パネル見出し */
  --fs-xl:1.5rem;     /* 24px: ページ見出し */

  /* ---- 余白スケール ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
}
/* ---- ダークモードの配色パターン「ブラック」----
   背景はニュートラルな黒〜ダークグレーにし、操作色は水色を塗りつぶさず
   落ち着いたスレートブルーに寄せる。本文の補助色も青みを抑え、暗所で
   「水色の文字だけが浮いて読みにくい」状態を避ける。 */
:root[data-theme="dark"]{
  --header-bg:#181922;
  --on-dark:#F7F8FB;
  --navy:#A5BDE1;
  --moon:#F3E7C3;
  --moon-soft:#F2ECD9;
  --paper:#202126;
  --paper-dim:#15161A;
  --line:#42454D;
  --ink:#F1F2F4;
  --ink-soft:#AFB4BE;
  --heading-ink:#F7F8FB;
  --label-ink:#F5F6F8;

  --selected-bg:#3B5F8F;
  --selected-border:#83A8D6;
  --selected-ink:#F7FAFF;
  --selected-soft-ink:#A8C4E8;
  --focus-ring:#9CBCE2;

  --dreamface-theme:#9BB9DF;
  --dreamface-theme-ink:#C7DDFA;

  --success:#59C787;
  --success-bg:#173626;
  --warning:#E3A94C;
  --warning-bg:#3A2C14;
  --danger:#E68079;
  --danger-bg:#3A1F1E;
  --info:#9BB9DF;
  --info-bg:#243750;

  --pickup-major:#FF7A70;
}
/* ---- ダークモードの配色パターン「ブルー」----
   ブラックより青い地色を残しつつ、選択状態は中間濃度の青でまとめる。
   明るい水色は枠線・フォーカスなど必要な場所にだけ使い、本文の補助色は
   彩度を下げて、背景との境界と文字の判読性を優先する。 */
:root[data-theme="dark-blue"]{
  --header-bg:#10284B;
  --on-dark:#F3F7FF;
  --navy:#A9C7EB;
  --moon:#F3E7C3;
  --moon-soft:#F2ECD9;
  --paper:#122F57;
  --paper-dim:#0A2141;
  --line:#2D578A;
  --ink:#F0F6FF;
  --ink-soft:#AAB9CF;
  --heading-ink:#F5F8FF;
  --label-ink:#F3F7FD;

  --selected-bg:#2F6198;
  --selected-border:#82B1DE;
  --selected-ink:#F7FBFF;
  --selected-soft-ink:#A8C9EE;
  --focus-ring:#A7D0F2;

  --dreamface-theme:#A4C1E5;
  --dreamface-theme-ink:#D6E7FB;

  --success:#59C787;
  --success-bg:#173626;
  --warning:#E3A94C;
  --warning-bg:#3A2C14;
  --danger:#E68079;
  --danger-bg:#3A1F1E;
  --info:#A4C1E5;
  --info-bg:#1A3A62;

  --pickup-major:#FF7A70;
}

/* ---- 各タブのタイトル＋説明 ----
   タブの本題をすぐ確認できるよう、短い導入文を控えめに表示する。 */
.tab-intro{ margin:0 0 12px; }
.tab-intro h2{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-md);
  line-height:1.35;
}
.tab-intro p{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.5;
}

/* 見出し・フォームラベルはダークテーマでも水色ではなく白寄りに統一する。
   ページ固有CSSやインライン指定より優先し、サイト全体で同じコントラストにする。 */
:root[data-theme="dark"] :is(h1,h2,h3,h4,h5,h6),
:root[data-theme="dark-blue"] :is(h1,h2,h3,h4,h5,h6){
  color:var(--heading-ink) !important;
}
:root[data-theme="dark"] label,
:root[data-theme="dark-blue"] label{
  color:var(--label-ink) !important;
}

/* ==================================================================
   共有コンポーネント
   ================================================================== */

/* ---- ピル/チップ(フィルターチップ・トグルボタンの共通形) ----
   選択状態は --selected-* 経由。ブランド色を直接書かない。 */
.pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.2;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pill:hover{ background:var(--paper-dim); }
.pill.active{
  background:var(--selected-bg);
  border-color:var(--selected-border);
  color:var(--selected-ink);
}
.pill:disabled{ opacity:.45; cursor:default; }
.pill:disabled:hover{ background:var(--paper); }

/* ---- セクション見出し(ページ内の小見出しラベル。全ページ共通の見た目) ---- */
.section-label{
  font-weight:700;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  margin:0 0 var(--sp-2);
  text-align:left;
}

/* ---- セグメントトグル(並べ替え・表示切り替えなどの排他選択)。
   図鑑「きのみ効率」タブの並び替えボタン(元は be-sortkey)の見た目を site-wide に昇格したもの:
   枠の中にパディングを取り、ボタン同士を隙間で離した「浮いた丸ピル」の並びにする。
   色を指定しない場合はテーマの選択色(--selected-bg/--selected-ink)を使う。 */
.segmented{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  padding:3px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
}
.segmented button{
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  padding:5px 13px;
  border:none;
  background:transparent;
  border-radius:var(--radius-pill);
  color:var(--ink-soft);
  cursor:pointer;
}
.segmented button.active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}

/* おてつだいシミュの編集/シェア切り替えを共通化した表示モード選択。 */
.mode-switch{
  flex:1 1 220px;
  max-width:360px;
}
.mode-switch button{
  flex:1 1 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:var(--fs-sm);
  font-weight:800;
  padding:8px 12px;
}
.mode-switch button .ui-icon{ flex:none; }

/* ---- トグルスイッチ(2択の表示切替に共通で使う。イベント履歴の
   カレンダー/一覧表示、図鑑の料理タブの食材AND/OR検索などで使用) ---- */
.view-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.view-switch-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
}
.view-switch-label.is-active{ color:var(--navy); }
.view-switch-toggle{
  position:relative;
  flex:none;
  width:40px;
  height:22px;
  padding:0;
  border-radius:999px;
  border:1.5px solid var(--navy);
  background:var(--paper);
  cursor:pointer;
}
.view-switch-toggle::before{
  content:'';
  position:absolute;
  top:1px;
  left:1px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--navy);
  transition:transform .15s ease, background-color .15s ease;
}
.view-switch-toggle[aria-checked="true"]{ background:var(--header-bg); border-color:var(--header-bg); }
.view-switch-toggle[aria-checked="true"]::before{
  background:#fff;
  transform:translateX(18px);
}

/* ---- モーダルの共通シェル(オーバーレイ+中央カード) ----
   --app-popup-z / --app-nav-inset-bottom / --app-nav-inset-left は
   css/bottomNav.css が全ページで定義している変数契約。ここで必ず参照する
   (ページ側で z-index や余白を直書きしない)。 */
.overlay-modal{
  position:fixed;
  inset:0;
  z-index:var(--app-popup-z, 140);
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(17,21,46,.5);
  padding:var(--sp-4);
  padding-bottom:calc(var(--sp-4) + var(--app-nav-inset-bottom, 88px));
  padding-left:calc(var(--sp-4) + var(--app-nav-inset-left, 0px));
}
.overlay-modal.open{ display:flex; }
.overlay-modal .modal-card{
  position:relative;
  width:100%;
  max-width:clamp(320px, 55vw, 640px);
  max-height:100%;
  overflow:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--sp-4);
  box-shadow:0 18px 50px rgba(0,0,0,.32);
}
.overlay-modal .modal-close{
  position:absolute;
  top:8px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
/* 一括操作(取り消しにくい書き換え)の前に挟む「キャンセル/実行」確認ダイアログの型。
   枠は上の.overlay-modal/.modal-cardをそのまま使い、.is-compactで小さめの正方形寄りに絞る。 */
.overlay-modal.is-compact .modal-card{
  max-width:340px;
  text-align:center;
}
.confirm-text{
  font-size:var(--fs-sm);
  color:var(--ink);
  margin:6px 0 16px;
  line-height:1.6;
}
.confirm-actions{
  display:flex;
  gap:8px;
}
.confirm-cancel,
.confirm-ok{
  flex:1 1 0;
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  cursor:pointer;
}
.confirm-cancel{
  background:var(--paper);
  color:var(--ink-soft);
}
.confirm-ok{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
.confirm-ok:disabled{
  background:var(--paper-dim);
  border-color:var(--line);
  color:var(--ink-soft);
  cursor:default;
}

/* ---- 検索欄の「該当なし」フィードバック ----
   js/searchHit.js の flashNoMatch() が付け外しする。無反応のまま終わらせない。 */
@keyframes search-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px); }
  40%{ transform:translateX(3px); }
  60%{ transform:translateX(-2px); }
  80%{ transform:translateX(1px); }
}
.search-no-match{
  animation:search-shake .4s ease;
  border-color:var(--danger) !important;
}

/* ---- 空状態(該当なし・0件など) ----
   これまで素のテキストだけだった箇所に、最小限の視覚的な重みを持たせる。
   アイコンは装飾ではなく「情報が無いこと自体」を示す記号として置く。 */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-3);
  text-align:center;
  color:var(--ink-soft);
  font-size:var(--fs-sm);
}
/* display:flexを明示しているため、[hidden]属性のUA既定(display:none)がこのルールに
   負けてしまう。hidden時は必ずdisplay:noneに戻す(このサイト共通の落とし穴)。 */
.empty-state[hidden]{ display:none; }
.empty-state .empty-state-icon{
  width:28px;
  height:28px;
  opacity:.5;
}

/* ---- 複数アカウント使用中の案内(js/profileBanner.js) ----
   現在どのゲームアカウントを表示しているかを、ヘッダー直下で控えめに示す。
   アカウントが1つだけのときはJS側で要素自体を生成しない。 */
.profile-login-banner{
  --profile-banner-color:var(--info);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:36px;
  padding:8px 14px;
  background:var(--info-bg);
  border-bottom:2px solid var(--profile-banner-color);
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.35;
  text-align:center;
}
@supports (background:color-mix(in srgb, white 10%, black)){
  .profile-login-banner{
    background:color-mix(in srgb, var(--profile-banner-color) 16%, var(--paper));
  }
}
.profile-login-banner::before{
  content:'●';
  color:var(--profile-banner-color);
  font-size:.65em;
}

/* ---- 全ページ共通: クラウド未同期バナー(js/cloudSync.js) ----
   ログイン中で、端末内にクラウドへ送っていない変更があるときだけ表示する。
   タップ時に既存のクラウド保存処理を呼び出すため、派手すぎない保存案内にする。 */
.cloud-sync-pending-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:38px;
  padding:8px 14px;
  border:0;
  border-bottom:2px solid var(--warning);
  background:var(--warning-bg);
  color:var(--ink);
  font:inherit;
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  cursor:pointer;
}
.cloud-sync-pending-banner[hidden]{ display:none; }
.cloud-sync-pending-banner:active{ filter:brightness(.96); }
.cloud-sync-pending-banner:disabled{ cursor:default; opacity:.65; }
.cloud-sync-pending-banner .cloud-sync-banner-icon{
  flex:none;
  width:17px;
  height:17px;
}
.cloud-sync-pending-banner .cloud-sync-banner-sub{
  color:var(--ink-soft);
  font-size:.67rem;
  font-weight:600;
}

/* ログイン中だけヘッダーの「最終ビルド」の直下へJSで追加する。 */
.cloud-sync-last-sync{
  position:absolute;
  top:34px;
  right:12px;
  color:var(--moon);
  opacity:.72;
  font-size:var(--fs-2xs);
  white-space:nowrap;
}
.cloud-sync-last-sync[hidden]{ display:none; }

/* ---- 全ページ共通: アメブ/ウッウロボ開催中バナー(js/candyLiveBanner.js) ----
   各ページのヘッダー(header要素、ホームだけ.home-hero)の直下に、細い帯として
   貼り付ける。普段のこのサイトの落ち着いた配色とは意図的に外れ、虹色に流れる
   アニメーションで目立たせる。以前はホーム限定でカレンダー見出し横の丸いバッジとして
   跳ねる演出も付けていたが、全ページ共通の細い帯にする都合上、跳ねる演出は無くした
   (虹色に流れる演出だけ残す)。タップでホーム(カレンダー)に遷移する
   (実施済み・静的表示のときは急かす必要が無いのでタップしても遷移しない)。
   文言(track)は常に左寄せの静止表示(以前は未実施の間だけ右→左に流していたが、
   目が追いにくいため廃止)。実施済みになったら虹色の点滅も止め、グレー表示にする。 */
.candy-live-banner-strip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  padding:8px 14px 8px 18px;
  min-height:44px;
  border:none;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  color:#fff;
  text-align:left;
  text-decoration:none;
  overflow:hidden;
  cursor:pointer;
  background:#ff2d78; /* ::before未対応環境向けのフォールバック */
}
/* 虹色の帯は::beforeに分離し、background-position(毎フレーム再ペイントが要る)ではなく
   transform(コンポジタだけで動く軽いプロパティ)で流す。帯を2枚分の幅で並べて
   -50%(=表示幅ぶん)だけ動かすことで、継ぎ目なくループする。 */
.candy-live-banner-strip::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:200%;
  background:linear-gradient(90deg,#ff2d78,#ff9d00,#ffe600,#3ddc57,#22c1ff,#8b5cf6,#ff2d78,#ff9d00,#ffe600,#3ddc57,#22c1ff,#8b5cf6,#ff2d78);
  animation:candy-rainbow-sweep 2.2s linear infinite;
  will-change:transform;
}
.candy-banner-track{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}
.candy-banner-sub{
  font-size:.65rem;
  font-weight:600;
  opacity:.85;
}
@keyframes candy-rainbow-sweep{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .candy-live-banner-strip::before{ animation:none; }
}
/* 今日の分をアメブ/ウッウロボ実行チェック済みのときは、虹色の点滅を止め、
   グレー表示にする(急かす必要が無いことを一目で分かるように) */
.candy-live-banner-strip.is-done{
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:default;
}
.candy-live-banner-strip.is-done::before{ content:none; }

/* ---- 「今日のアメブーストした？」確認モーダル(js/candyLiveBanner.js) ----
   .overlay-modal/.modal-cardは上のモーダル共通シェルを流用する。 */
.candy-confirm-title{
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--ink);
  text-align:center;
  margin:2px 0 14px;
  padding-right:24px;
}
.candy-confirm-actions{
  display:flex;
  gap:10px;
}
.candy-confirm-btn{
  flex:1;
  font:inherit;
  font-size:var(--fs-md);
  font-weight:800;
  padding:14px 10px;
  border:2px solid var(--line);
  border-radius:999px;
  background:var(--paper-dim);
  color:var(--ink);
  cursor:pointer;
}
.candy-confirm-yes{
  border-color:#3ddc57;
  background:#3ddc57;
  color:#1a1a1a;
}
.candy-confirm-note{
  text-align:center;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  margin:10px 0 0;
}
.candy-confirm-quiet-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.candy-confirm-quiet-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}

/* ---- 「保存される設定」を示すしおり(js/settingPin.js) ----
   絞込み・表示切替など、変更が端末に保存されて次回もそのまま出るコントロールの
   右上に小さく重ねる。進捗・記録・個体登録のような自明に保存されるものには付けない。
   既定は tabler「bookmark」を緑・枠なしのグリフだけで出す。ホバー(ポインタ端末)
   またはタップで「この設定は保存されます」とだけ吹き出す。
   「保存する/しない」を切り替えるトグルは .is-toggle: 丸枠つきで、行内に置き、
   ONで緑・OFFでグレーになる(SettingPin.attachToggle)。
   セレクタは button.setting-pin… と要素型込みにし、かつ共有コンポーネントの中でも
   最後に置く(親の `.foo button {}` に詳細度・順序で負けないようにするため)。 */
button.setting-pin{
  position:absolute;
  top:-13px;
  right:-3px;
  z-index:2;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:24px;
  min-width:0;
  padding:0;
  margin:0;
  border:0;
  background:none;
  color:var(--success);
  line-height:1;
  cursor:help;
  filter:drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 1px 1px rgba(0,0,0,.15));
  -webkit-tap-highlight-color:transparent;
}
button.setting-pin[hidden]{ display:none; }
button.setting-pin > svg{
  flex:none;
  width:21px;
  height:21px;
  fill:currentColor;
  stroke:none;
}
button.setting-pin:hover,
button.setting-pin:focus-visible{
  color:var(--success);
  outline:none;
}
/* 「保存する/しない」トグル: 丸枠つきのしおりを行内(見出しの隣など)に置く。
   横位置は置き場所側で決める(このセレクタでは寄せない)。 */
button.setting-pin.is-toggle{
  position:relative;
  inset:auto;
  flex:none;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  filter:none;
}
button.setting-pin.is-toggle > svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}
button.setting-pin.is-toggle:hover,
button.setting-pin.is-toggle:focus-visible{ color:var(--ink-soft); border-color:var(--ink-soft); }
button.setting-pin.is-toggle.is-on{
  color:var(--success);
  border-color:var(--success);
  background:var(--success-bg);
}
button.setting-pin.is-toggle.is-on > svg{ fill:currentColor; }
button.setting-pin > .setting-pin-tip{
  position:absolute;
  bottom:calc(100% + 6px);
  right:0;
  z-index:3;
  width:max-content;
  max-width:min(80vw, 220px);
  padding:6px 9px;
  border-radius:8px;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--fs-2xs);
  font-weight:600;
  line-height:1.45;
  text-align:left;
  white-space:normal;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease, visibility .12s;
  pointer-events:none;
}
/* 表示/非表示・画面端でのずらし(transform)は js/settingPin.js が制御する。 */
button.setting-pin.is-open > .setting-pin-tip{
  opacity:1;
  visibility:visible;
}

/* ---- 保存アクション共通グロー ----
   保存ボタンを次の操作として目立たせる。 */
@keyframes save-action-glow{
  0%, 100%{ box-shadow:0 0 0 0 var(--warning); }
  50%{ box-shadow:0 0 9px 3px var(--warning); }
}

/* ---- サイト共通スナックバー(js/snackbar.js) ----
   下部ナビの上に出し、ページ内の操作場所に依存せず成功結果を知らせる。 */
.site-snackbar{
  position:fixed;
  left:50%;
  bottom:calc(var(--app-nav-inset-bottom) + 16px);
  z-index:180;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:min(300px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  min-height:52px;
  padding:12px 18px;
  border:1px solid var(--success);
  border-radius:var(--radius-pill);
  background:var(--success-bg);
  color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  font-size:var(--fs-md);
  font-weight:800;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, 8px);
  transition:opacity .18s ease, transform .18s ease;
}
.site-snackbar-message{ flex:1 1 auto; }
.site-snackbar-action{
  flex:0 0 auto;
  min-height:34px;
  padding:6px 12px;
  border:1px solid var(--success);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--success);
  font:800 var(--fs-sm)/1.2 "Noto Sans JP",sans-serif;
  cursor:pointer;
  pointer-events:auto;
  white-space:nowrap;
}
.site-snackbar-action:hover{ background:var(--paper-dim); }
.site-snackbar-action:focus-visible{ outline:2px solid var(--success); outline-offset:2px; }
.site-snackbar.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}
.site-snackbar[hidden]{
  display:block;
  visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
  .site-snackbar{ transition:none; }
}

/* ---- サイト共通フッターの注記(非公式表記・紹介歓迎・利用規約)。ホームだけでなく
   ステータス出典を載せる各ページのsite-footer内にも同じマークアップで置く。 ---- */
.home-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:24px 0 0;
  padding:0 16px 24px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.6;
  text-align:center;
}
.home-footer-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 8px;
  width:100%;
}
.home-footer-text{ min-width:0; }
.home-footer-welcome{
  color:var(--ink-soft);
  font-size:inherit;
  text-align:center;
}
.home-footer-terms-btn{
  flex:none;
  margin:0;
  padding:0 2px;
  border:0;
  background:none;
  color:var(--navy);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

/* ---- 利用規約モーダル(上の利用規約ボタンから開く。.overlay-modal/.modal-cardは
   このファイル内の共通モーダルシェルをそのまま使う)。 ---- */
.terms-modal-card{
  max-width:min(680px, calc(100vw - 32px)) !important;
}
.terms-modal-title{
  margin:0 32px 4px 0;
  color:var(--navy);
  font-size:var(--fs-md);
  font-weight:800;
}
.terms-section-title{
  margin:var(--sp-4) 0 6px;
  color:var(--navy);
  font-size:var(--fs-xs);
  font-weight:800;
}
.terms-list,
.terms-text{
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.7;
}
.terms-list{
  margin:0;
  padding-left:1.35em;
}
.terms-list li + li{ margin-top:4px; }
.terms-text{ margin:0 0 6px; }
.terms-list a,
.terms-text a{
  color:var(--navy);
  font-weight:700;
  overflow-wrap:anywhere;
}

.home-footer-discord{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:2px;
  padding:4px 8px;
}

/* ページ固有CSSより優先し、出典と共通注記を同じサイズ・中央揃えにする。 */
.site-footer.site-footer{
  box-sizing:border-box;
  max-width:var(--content-max);
  margin:24px auto 0;
  padding:20px 16px 28px;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.7;
  text-align:center;
  overflow-wrap:anywhere;
}
.site-footer > .home-footer{
  margin:16px 0 0;
  padding:0;
  font-size:inherit;
}
.site-footer > .home-footer:first-child{ margin-top:0; }
.site-footer a,
.home-footer a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.site-footer .home-footer-discord,
.home-footer .home-footer-discord{
  color:var(--navy);
  padding:2px 0;
}
.home-footer-terms-btn:hover,
.home-footer a:hover,
.site-footer a:hover{ text-decoration-thickness:2px; }
.home-footer-terms-btn:focus-visible,
.home-footer a:focus-visible,
.site-footer a:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}

.home-footer-discord{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:100%;
}
.home-footer-discord .ui-icon{ flex:none; }
.home-footer-sources{ line-height:1.7; }