/* css/style.css — カブ帳のスタイルシート */

/* ---------- 自己ホストフォント (IBM Plex Sans JP 400/500/600/700 + IBM Plex Mono 500/600) ----------
   Google Fonts の <link> ではなくセルフホストにした理由: 本アプリの CSP は
   `default-src 'self'` のみで font-src/style-src を明示しておらず、外部ドメイン
   (fonts.googleapis.com / fonts.gstatic.com) への接続を許可するには CSP 緩和が要る。
   CSP を緩めて外部フォントを読み込むと「データはサーバーへ送信されない」という
   既存のプライバシー方針 (フッター文言) と矛盾する外部通信が増えるため、
   実際にアプリ内で使う文字 (常用漢字2136字+かな+記号+コード内実使用文字、pyftsubsetで抽出)
   だけを同梱してCSPを一切変更せずに済む方を選んだ。
   ライセンス: SIL Open Font License 1.1 (fonts/LICENSE-OFL.txt に同梱)。
   任意の銘柄名に含まれ得る非常用漢字は、フォールバック (system-ui等) で表示される。 */
@font-face {
  font-family: "IBM Plex Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-jp-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-jp-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans JP";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-jp-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-jp-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* ---------- テーマトークン ----------
   トークン名 (--page/--surface/--surface2/--ink/--ink2/--ink3/--hairline/--mint/
   --mint-dim/--down/--warn/--c-meal/--c-gift/--c-catalog/--c-food/--c-other) をそのまま採用。
   既存コードが参照する旧トークン名 (--bg/--text/--accent 等) は、上記と同じ配色から導出した
   別名として併存させる (機能不変・test/theme-contrast.test.mjs 等の既存回帰確認を壊さないため)。
   全トークンは test/theme-contrast.test.mjs / test/color.test.mjs と同じ WCAG 算出式で
   ライト/ダーク双方 4.5:1 以上を確認済み (Python で事前検算)。
   例外: --mint 自体をライトテーマの本文テキスト色に「そのまま」使うと白背景で 4.5:1 を
   満たせない (色相を保ったまま明度だけ下げた --accent 系を文字色に用い、--mint の生値は
   グラフ・ドーナツ・バッジ塗り等の非テキスト装飾にのみ用いる)。 */
:root {
  /* ---- ダークテーマトークン (既定) ---- */
  --page: #0d0f13;
  --surface: #14171d;
  --surface2: #1b1f26;
  --ink: #edeff2;
  --ink2: #99a1ac;
  --ink3: #5c6470;
  --hairline: rgba(255, 255, 255, 0.07);
  --mint: #3ecf8e;
  --mint-dim: rgba(62, 207, 142, 0.14);
  --down: #f16d6d;
  --warn: #e8a33d;
  --c-meal: #e8a33d;
  --c-gift: #5b9df5;
  --c-catalog: #9d8cf0;
  --c-food: #3ecf8e;
  --c-other: #767e8a;

  /* ---- 旧トークン名 (既存JS/CSSからの参照互換、上記と同じ配色から導出・値はhexで直書き) ---- */
  --bg: #0d0f13;
  --surface-alt: #1b1f26;
  --border: rgba(255, 255, 255, 0.07);
  --text: #edeff2;
  --text-muted: #99a1ac;
  --accent: #3ecf8e;
  --accent-strong: #3ecf8e;
  --accent-soft: #1a312d;
  --accent-contrast: #ffffff;
  --btn-primary-bg: #146b49;
  --btn-primary-bg-hover: #1c8258;
  --danger: #f16d6d;
  --danger-soft: #332328;
  --warn-soft: #322b21;
  --urgent: #f16d6d;
  --urgent-soft: #40282d;
  --info: #5b9df5;
  --info-soft: #1e2a3b;
  --warn-border: #6b5a2a;
  --info-border: #35516b;
  --danger-border: #6b3535;
  --accent-border-soft: #2a4a3d;
  --accent-border-soft-2: #23392f;
  --weekend-bg: #171a20;
  --danger-fill: #c0392b;
  --radius: 18px;
  --radius-sm: 13px;
  --radius-pill: 999px;
  --shadow: none;
  --max-width: 1180px;
  font-size: 16px;
}

:root[data-theme="light"] {
  /* ---- ライトテーマトークン (地#F4F6F8/面#FFFFFF/インク反転) ---- */
  --page: #f4f6f8;
  --surface: #ffffff;
  --surface2: #eef1f4;
  --ink: #1b1f26;
  --ink2: #5c6470;
  --ink3: #838b96;
  --hairline: rgba(20, 30, 45, 0.08);
  --mint: #3ecf8e;
  --mint-dim: rgba(62, 207, 142, 0.14);
  --down: #c0392b;
  --warn: #886307;
  --c-meal: #886307;
  --c-gift: #2a6fb0;
  --c-catalog: #5e46b8;
  --c-food: #1f6f5c;
  --c-other: #5c6470;

  --bg: #f4f6f8;
  --surface-alt: #eef1f4;
  --border: rgba(20, 30, 45, 0.08);
  --text: #1b1f26;
  --text-muted: #5c6470;
  --accent: #1f6f5c;
  --accent-strong: #14503f;
  --accent-soft: #e9f1ef;
  --accent-contrast: #ffffff;
  --btn-primary-bg: #1f6f5c;
  --btn-primary-bg-hover: #17594a;
  --danger: #c0392b;
  --danger-soft: #f9ebea;
  --warn-soft: #f3efe6;
  --urgent: #b53526;
  --urgent-soft: #f8ebe9;
  --info: #2a6fb0;
  --info-soft: #eef3f9;
  --warn-border: #ecd48f;
  --info-border: #b7d6ef;
  --danger-border: #eab3ab;
  --accent-border-soft: #bfe0d3;
  --accent-border-soft-2: #d3ebe1;
  --weekend-bg: #edf0f3;
  --danger-fill: #c0392b;
  --shadow: none;
}

/* ---------- 証券コード決定色 (js/color.js と対応、値は完全一致必須。test/color.test.mjs参照) ---------- */
.stock-color-0 { --stock-color: #e35f5f; }
.stock-color-1 { --stock-color: #d06f25; }
.stock-color-2 { --stock-color: #c39b22; }
.stock-color-3 { --stock-color: #8ec322; }
.stock-color-4 { --stock-color: #3dc322; }
.stock-color-5 { --stock-color: #22c358; }
.stock-color-6 { --stock-color: #22c39b; }
.stock-color-7 { --stock-color: #22a8c3; }
.stock-color-8 { --stock-color: #3c8cdd; }
.stock-color-9 { --stock-color: #747ee7; }
.stock-color-10 { --stock-color: #9a74e7; }
.stock-color-11 { --stock-color: #c25fe3; }
.stock-color-12 { --stock-color: #df49c6; }
.stock-color-13 { --stock-color: #e15690; }

:root[data-theme="light"] .stock-color-0 { --stock-color: #db3333; }
:root[data-theme="light"] .stock-color-1 { --stock-color: #b25f1f; }
:root[data-theme="light"] .stock-color-2 { --stock-color: #8b6e18; }
:root[data-theme="light"] .stock-color-3 { --stock-color: #5b7e16; }
:root[data-theme="light"] .stock-color-4 { --stock-color: #2a8618; }
:root[data-theme="light"] .stock-color-5 { --stock-color: #18863d; }
:root[data-theme="light"] .stock-color-6 { --stock-color: #178267; }
:root[data-theme="light"] .stock-color-7 { --stock-color: #1a7f93; }
:root[data-theme="light"] .stock-color-8 { --stock-color: #2375c7; }
:root[data-theme="light"] .stock-color-9 { --stock-color: #3c49dd; }
:root[data-theme="light"] .stock-color-10 { --stock-color: #713cdd; }
:root[data-theme="light"] .stock-color-11 { --stock-color: #b338dc; }
:root[data-theme="light"] .stock-color-12 { --stock-color: #cc24b0; }
:root[data-theme="light"] .stock-color-13 { --stock-color: #d92671; }

/* テーマ切替時に色だけがふわっと変わるようにする (レイアウトプロパティは含めない) */
body,
.panel,
.holding-card,
.summary-card,
.calendar-day,
.banner,
.modal-box,
.gate-panel,
.event,
.hrow,
.kpi {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 14.5px;
  line-height: 1.7;
}

/* 等幅数字ユーティリティ (IBM Plex Mono、tabular-nums、字間-.02em)。
   金額・株数・日付・件数などあらゆる数値表示にまとめて適用する。 */
.num,
.summary-card .value,
.record-row .amount,
.chart-value,
.holding-card .meta,
.holding-row-numbers,
.holding-row-sub,
.hero-value,
.kpi .v,
.donut-legend-amount,
.donut-legend-pct,
.donut-center-value,
.chart-stat-box .value,
.calendar-month-total,
.owner-breakdown-value,
.expiry-badge,
.gate-code-row input,
.event .amt,
.event .cd,
.event .s,
.hrow .s,
.hrow .v,
.hrow .sub,
.mtotal,
.subtitle-meta,
.holdings-group-count,
#holdings-count-hint,
.filter-subtotal {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* 汎用ユーティリティ: セマンティック緑の文字色 (受取済み金額等)。CSPがインラインstyle属性の
   色指定を許さないため (default-src 'self')、色の切替は必ずクラス経由で行う。 */
.text-mint {
  color: var(--mint);
}

.app-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* [hidden] を常に最優先させる (display 指定クラスが hidden 属性を上書きする事故を防ぐ) */
[hidden] {
  display: none !important;
}

a {
  color: var(--accent);
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 16px; /* iOS Safari の自動ズームを防ぐため16px以上に固定 */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 2px;
}

.icon {
  flex-shrink: 0;
  vertical-align: -3px;
}

.tab-btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

h2.section-title,
#highlight-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- ヘッダー (ブランド + アイコン、余計な枠なし) ---------- */
.app-header {
  padding: 22px 6px 6px;
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-header .brand h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.app-header .brand h1::after {
  content: "";
}

.app-header .tagline {
  margin: 0;
  color: var(--ink3);
  font-size: 11.5px;
  flex-basis: 100%;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
}
.theme-toggle-btn:hover {
  color: var(--ink);
}

/* ---------- プランピル (全タブ共通ヘッダーに常時表示) ----------
   ブランド名の右側に現在プランのピルを1個だけ表示する (色はトークンの組のみを使用、
   新規の色は追加しない)。タップでデータ管理タブへ (wireGateBannerCtaと同じ導線)。 */
.plan-pill {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.plan-pill-trial {
  background: var(--surface2);
  color: var(--ink2);
}
.plan-pill-member {
  background: var(--mint-dim);
  color: var(--mint);
}
/* 買切り版=青は --c-gift と同値の --info / --info-soft トークン (既存、WCAG確認済み) をそのまま使う。 */
.plan-pill-lifetime {
  background: var(--info-soft);
  color: var(--info);
}
.plan-pill-expired {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---------- バナー (ロック状態・注意喚起)。枠線を廃し面の明度差だけで区切る (アンチシグナル①対策) ---------- */
.banner {
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin: 10px 0;
  font-size: 12.5px;
  line-height: 1.7;
  border: none;
}

.banner-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.banner-info {
  background: var(--surface);
  color: var(--ink2);
}
.banner-info strong {
  color: var(--ink);
}

.banner-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.banner strong {
  display: inline-block;
  margin-bottom: 2px;
}

.banner-actions {
  margin-top: 10px;
}

/* お試しバナーを1行(要旨+解錠導線)に圧縮し、詳細説明は
   <details>に折りたたむ (長文の注意書きがカード間に挟まらないようにするため)。 */
.banner-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.banner-line strong {
  margin-bottom: 0;
  font-weight: 600;
}
.banner-details {
  margin-top: 8px;
}
.banner-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink3);
}
.banner-details summary:hover {
  color: var(--ink2);
}
.banner-details p {
  margin: 8px 0 0;
}

/* 全タブ常駐だった「今週/今月の権利日ハイライト」パネル (.highlight-panel等)
   は撤去した (ホーム下部の次の権利日プレビューへ統合、他タブでは非表示)。関連CSSも削除。 */

/* ---------- タブナビゲーション (ピル化。下線ではなく塗りつぶしピルの1つだけを主役にする。
   375px幅では引き続きスクロール可能なままにする既存仕様 — QAが scrollWidth>clientWidth を
   回帰確認しているため文字量は詰めない) ---------- */
.tab-nav-wrap {
  position: relative;
  margin: 18px 0 0;
}

.tab-nav {
  display: flex;
  gap: 6px;
  border-bottom: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.tab-scroll-hint {
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 30px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.tab-scroll-hint-left {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to right, var(--page) 45%, transparent);
}

.tab-scroll-hint-right {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, var(--page) 45%, transparent);
}

.tab-scroll-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink2);
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  border-bottom: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-btn[aria-selected="true"] {
  color: var(--ink);
  background: var(--surface2);
}

.tab-panel {
  padding: 18px 0 8px;
}

/* ---------- カード・パネル共通 (枠線ゼロ、面の明度差だけで区切る) ---------- */
.panel {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: none;
}

.panel h2,
.panel h3 {
  margin-top: 0;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink2);
}
/* パネル内の最初の見出しは「画面の主見出し」に相当し、通常の見出しより一回り大きく強調する。
   現行は1タブに複数パネルが縦積みされる構造 (機能不変の制約で維持) のため、
   1画面=1見出しそのままの構成にはできない。パネルの先頭見出しだけを大きくして
   視覚階層を作る、という適応をしている。 */
.panel > .section-title:first-child {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* .panel-subtitle: 見出し直下の1行に年・件数・合計等を表示する補助テキスト。 */
.panel-subtitle {
  font-size: 13px;
  color: var(--ink2);
  margin: 0 0 14px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.summary-card {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.summary-card .label {
  font-size: 11.5px;
  color: var(--ink3);
  margin-bottom: 2px;
}

.summary-card .value {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}

/* B-2: 年間予定額の試算カードの注記 (「実績ベース」等、1行の補足) */
.summary-card .note {
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 4px;
}

/* ---------- フォーム (枠線を廃し、面の塗りだけで入力欄を示す「フィルド」スタイル) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
}

.field .hint {
  font-size: 11.5px;
  color: var(--ink3);
}

.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  padding: 11px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--ink);
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 60px;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  outline: 2px solid var(--danger);
  outline-offset: -1px;
}

.field-error {
  color: var(--danger);
  font-size: 12px;
}

.field-warning {
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 12px;
}

.checkbox-row {
  display: flex;
  /* 根本原因: このdivは`class="field checkbox-row"`で.fieldと併用されており、
     .field側の`flex-direction:column`がここでは上書きされず、チェックボックスとラベルが
     縦積みになった上でalign-items:centerにより水平中央寄せされていた
     (標準の青チェック+中央寄せの実体はこれ)。ここで明示的にrowへ戻す。 */
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.checkbox-row label {
  font-size: 13px;
  color: var(--ink);
}

.month-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.month-chip {
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  background: var(--surface2);
  font-size: 12.5px;
  color: var(--ink2);
}

.month-chip[aria-pressed="true"] {
  background: var(--mint);
  color: #08110c;
  font-weight: 600;
}

.override-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Google Driveバックアップの復元先選択モーダル (自アプリ作成ファイルが複数ある場合のみ表示)。 */
.drive-file-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drive-file-picker-item {
  width: 100%;
  text-align: left;
  border-radius: var(--radius-sm);
}

.override-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.override-row input[type="date"],
.override-row select {
  flex: 1;
  min-width: 150px;
}

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- ボタン ---------- */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--accent-contrast);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
}
.btn-primary:disabled {
  background: var(--surface2);
  color: var(--ink3);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface2);
  color: var(--ink);
}
.btn-secondary:hover {
  color: var(--ink);
  filter: brightness(1.08);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 行内の小さな削除アクション (記録一覧の「削除」・確認モーダルの実行ボタン)。
   実際のボタンとして機能を保ちつつ、地の赤文字+淡い赤面で「押せる」ことだけ示す (枠線は付けない)。 */
.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.btn-danger:hover {
  filter: brightness(1.05);
}

/* 「全データを消去」専用: 破壊的操作は最下部にボタンではなく赤文字として隔離する。
   button要素・クリック機能はそのまま、見た目だけ塗り無し・枠無しのテキストにする。 */
.btn-danger.danger-plain {
  background: none;
  padding: 8px 4px;
  font-size: 13.5px;
  font-weight: 600;
  display: block;
  margin: 8px auto 0;
}
.btn-danger.danger-plain:hover {
  text-decoration: underline;
}

.btn-ghost {
  background: none;
  color: var(--accent);
  padding: 7px 10px;
}

.btn-sm {
  padding: 7px 12px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

/* ---------- 保有銘柄一覧: 検索・並び替え ---------- */
.holdings-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0 6px;
}
.holdings-toolbar .field {
  gap: 0;
}
.holdings-toolbar input[type="search"],
.holdings-toolbar select {
  padding: 11px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--ink);
  width: 100%;
}

#holdings-count-hint {
  margin: 0 0 10px;
  color: var(--ink3);
  font-size: 12px;
}

/* 配当記録/優待記録タブの銘柄フィルタ適用時の絞り込み結果小計 (1行、#holdings-count-hintと同じ重さ)。 */
.filter-subtotal {
  margin: 0 0 10px;
  color: var(--ink3);
  font-size: 12px;
}

@media (min-width: 640px) {
  .holdings-toolbar {
    grid-template-columns: 2fr 1fr;
    align-items: center;
  }
}

/* ---------- 保有銘柄一覧 (旧: 枠線カード → hairline区切りの行、アバター丸) ---------- */
.holdings-list {
  display: flex;
  flex-direction: column;
}

.holding-card {
  border: none;
  border-radius: 0;
  padding: 13px 2px;
  background: transparent;
  cursor: pointer;
}
.holding-card:hover {
  background: var(--surface2);
}
.holding-card:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}
.holding-card + .holding-card {
  border-top: 1px solid var(--hairline);
}

.holding-card .row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.holding-card .name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.holding-card .code {
  color: var(--ink3);
  font-size: 12px;
}

.holding-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 4px;
}

.tag-chip {
  display: inline-block;
  background: var(--surface2);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 11px;
  color: var(--ink2);
}

.yutai-badge {
  background: var(--mint-dim);
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.owner-badge {
  background: var(--info-soft);
  color: var(--info);
}

/* ---------- 優待券の有効期限バッジ ---------- */
.expiry-badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.expiry-badge-expired {
  background: var(--danger-soft);
  color: var(--danger);
}

.expiry-badge-soon {
  background: var(--warn-soft);
  color: var(--warn);
}

.expiry-badge-normal {
  background: var(--surface2);
  color: var(--ink3);
}

/* .expiry-alert-line (旧・権利日ハイライト欄直下のグローバル優待期限
   アラート) と .yutai-toolbar (旧・優待記録の並び替えセレクト) は撤去した。優待期限の案内は
   優待記録タブの「期限間近」セクション自体に統合し、並び替えはピル型セグメントに置き換えた。 */

.owner-breakdown-list {
  list-style: none;
  margin: -4px 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--ink3);
}

.owner-breakdown-list li {
  display: flex;
  gap: 4px;
}

.owner-breakdown-list .owner-breakdown-value {
  font-weight: 600;
  color: var(--ink);
}

.chart-subtitle {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}

/* 台帳の行アイコン (旧.card-actions) は銘柄詳細モーダルへの
   集約に伴い撤去した (行タップで詳細を開き、編集/削除はモーダル下部のボタンに移した)。
   .btn-icon-ghost 自体は配当記録・優待記録一覧の編集/削除アイコンで引き続き使う共有クラス。 */
.btn-icon-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink3);
  cursor: pointer;
}
.btn-icon-ghost:hover,
.btn-icon-ghost:focus-visible {
  background: var(--surface2);
  color: var(--ink);
}
.btn-icon-ghost-danger:hover,
.btn-icon-ghost-danger:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

.empty-state {
  text-align: center;
  padding: 28px 12px;
  color: var(--ink3);
  font-size: 13px;
}

/* ---------- カレンダー (「カレンダー」セグメントとして残す。枠線→hairline+面) ---------- */
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-toolbar .month-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.calendar-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink3);
  margin-bottom: 10px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.legend-dot.ex-rights {
  background: var(--down);
  border-radius: 50%;
}
.legend-dot.record {
  background: var(--info);
  border-radius: 1px;
}
.legend-dot.ex-date {
  background: var(--warn);
  border-radius: 1px;
  transform: rotate(45deg);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.calendar-weekday {
  text-align: center;
  font-size: 11px;
  color: var(--ink3);
  padding: 4px 0;
}

.calendar-day {
  min-height: 56px;
  min-width: 0;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--surface2);
  padding: 4px;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  color: var(--ink);
  overflow: hidden;
}

.calendar-day.out-month {
  background: transparent;
  color: var(--ink3);
  opacity: 0.5;
}

.calendar-day.today {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

.calendar-day.weekend {
  background: var(--weekend-bg);
}

/* 祝日は「左端の細いアクセントバー」だけで区別する (全面塗りつぶしにしない、赤系ハイライトとの
   衝突回避)。ここでのborder-leftは「カード全体を囲む枠線」ではなく単色の機能的アクセント線
   1本のみのため、アンチシグナル①「全要素に枠線」の対象外として維持する
   (QA: test/qa 「祝日セルは全面塗りつぶしではなく左端バーで区別される」が borderLeftWidth を
   直接検証しているため、box-shadowへの置き換えはせず既存のborder-leftのまま残す)。 */
.calendar-day.holiday {
  border-left: 3px solid var(--warn);
  padding-left: 2px;
}

.calendar-day .day-num {
  font-weight: 700;
}

.calendar-day .dot-row {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.event-chip-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

.event-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  line-height: 1.3;
  padding: 0 2px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.event-chip::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  display: inline-block;
}

/* 銘柄名を主役にし、金額はその後ろに小さく添える (どちらが銘柄名か画面から分かるようにするため)。
   幅が足りない場合は親.event-chipのoverflow:hiddenにより右側 (=金額) から先に隠れる。 */
.event-chip-amt {
  flex-shrink: 0;
  opacity: 0.72;
  font-size: 0.9em;
}

.event-chip.event-exrights {
  background: var(--danger-soft);
  color: var(--down);
}
.event-chip.event-exrights::before {
  background: var(--stock-color, var(--down));
  border-radius: 50%;
}

.event-chip.event-record {
  background: var(--info-soft);
  color: var(--info);
}
.event-chip.event-record::before {
  background: var(--stock-color, var(--info));
  border-radius: 1px;
}

.event-chip.event-exdate {
  background: var(--warn-soft);
  color: var(--warn);
}
.event-chip.event-exdate::before {
  background: var(--stock-color, var(--warn));
  border-radius: 1px;
  transform: rotate(45deg);
}

.chip-more {
  font-size: 0.65rem;
  color: var(--ink3);
  padding-left: 2px;
}

@media (max-width: 480px) {
  .event-chip {
    font-size: 0.58rem;
    gap: 2px;
    padding: 0 1px;
  }
  .event-chip::before {
    width: 6px;
    height: 6px;
  }
}

.calendar-day button.day-cell-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.calendar-day button.day-cell-btn:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: -2px;
}

/* ---------- D-6: 権利確定カレンダーのセル再設計 (案A) ----------
   セルには銘柄名・金額を置かず「日付+種別マーク+件数」だけにする (48pxのセルに文字を詰め込むと
   崩れるため)。個々の印(.cal-mrow)は4件までで、5件以上は総数チップ(.cal-cnt)に切り替える
   (隠れている残数の「+N」ではなく、その日の全件数を出す)。 */
.calendar-day.selected {
  background: var(--mint-dim);
  box-shadow: inset 0 0 0 1.5px var(--mint);
}
.calendar-day.selected .day-num {
  color: var(--mint);
}
.calendar-day .day-holiday-tag {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 8px;
  color: var(--ink3);
  line-height: 1;
}
.calendar-day {
  position: relative;
}
.cal-mrow {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
}
.cal-mk {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
}
.cal-mk-exrights {
  border-radius: 50%;
  background: var(--mint);
}
.cal-mk-exdate {
  background: var(--ink3);
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
}
.cal-mk-record {
  background: var(--ink2);
  width: 5px;
  height: 5px;
}
.cal-mk-yutaiexpiry {
  width: 7px;
  height: 6px;
  background: var(--warn);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cal-cnt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--mint);
  background: var(--mint-dim);
  border-radius: var(--radius-pill);
  padding: 3px 7px;
}
.calendar-day.selected .cal-cnt {
  background: color-mix(in srgb, var(--mint) 22%, var(--mint-dim));
}

/* 選択中の日の要約バー (グリッド直下、タップで日別ダイアログへ)。 */
.calendar-summary-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-top: 12px;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
.calendar-summary-bar .tx {
  flex: 1;
  min-width: 0;
}
.calendar-summary-bar .t {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.calendar-summary-bar .s {
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 2px;
}
.calendar-summary-bar .right {
  text-align: right;
  flex: none;
}
.calendar-summary-bar .v {
  font-size: 16px;
  font-weight: 600;
}
.calendar-summary-bar .vl {
  font-size: 10.5px;
  color: var(--ink3);
}

/* 凡例=フィルタチップ。既存の.chip/.chip.on (C-7ステータスチップ) をそのまま流用し、
   「オフ」はゼロ件で押せない.chip.zeroとは違い、押せば戻せる状態として薄く見せる。 */
.calendar-filter-chips {
  margin-top: 0;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.calendar-filter-chips .chip-off {
  opacity: 0.45;
}
.calendar-filter-chips .chip .cal-mk {
  margin-right: 1px;
}

/* 凡例キャプション (フィルタとは独立した静的な凡例行、休場/祝日の注記も兼ねる)。 */
#calendar-legend-caption {
  align-items: center;
}
#calendar-legend-caption .cal-mk {
  margin-right: 4px;
  vertical-align: -1px;
}

.day-detail-modal-body .event-line {
  padding: 9px 0;
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px solid var(--hairline);
}
.day-detail-modal-body .event-line:last-child {
  border-bottom: none;
}
.day-detail-modal-body .event-line-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.day-detail-modal-body .event-line-row1 .legend-dot {
  flex-shrink: 0;
}
.day-detail-modal-body .event-line-row2 {
  margin-top: 2px;
  padding-left: 14px;
  color: var(--ink3);
}
.day-detail-modal-body .event-line-row3 {
  margin-top: 2px;
  padding-left: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- D-6 A-2: 日別ダイアログの再設計 (開いても情報が減らない) ----------
   種別ごとのセクション (typeline+whyline+行) に分け、行は銘柄名を折り返し表示 (省略しない)、
   金額+根拠、単票への導線(›)を必ず持つ。 */
.day-detail-modal-body .dd-sort {
  font-size: 11.5px;
  color: var(--ink3);
  margin-bottom: 8px;
}
.day-detail-modal-body .dd-typeline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink2);
  margin: 18px 0 2px;
}
.day-detail-modal-body .dd-section:first-of-type .dd-typeline {
  margin-top: 0;
}
.day-detail-modal-body .dd-whyline {
  font-size: 11.5px;
  color: var(--ink3);
  margin-bottom: 8px;
}
.day-detail-modal-body .dd-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  margin-bottom: 6px;
}
.day-detail-modal-body .dd-sum .l {
  font-size: 12px;
  color: var(--ink2);
}
.day-detail-modal-body .dd-sum .v {
  font-size: 15.5px;
  font-weight: 600;
}
.day-detail-modal-body .dd-sum .v small {
  font-size: 10.5px;
  color: var(--ink3);
  font-weight: 400;
  margin-left: 5px;
}
.day-detail-modal-body .dd-row {
  display: flex;
  gap: 10px;
  padding: 10px 2px;
  align-items: flex-start;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
.day-detail-modal-body .dd-row:last-child {
  border-bottom: none;
}
.day-detail-modal-body .dd-row .cal-mk {
  margin-top: 7px;
}
.day-detail-modal-body .dd-nm {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
}
.day-detail-modal-body .dd-nm small {
  display: block;
  font-size: 11px;
  color: var(--ink3);
  font-weight: 400;
}
.day-detail-modal-body .dd-rv {
  flex: none;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  padding-top: 1px;
  white-space: nowrap;
}
.day-detail-modal-body .dd-rv.na {
  font-size: 11.5px;
  color: var(--ink3);
  font-weight: 400;
  padding-top: 4px;
}
.day-detail-modal-body .dd-ch {
  flex: none;
  color: var(--ink3);
  font-size: 13px;
  padding-top: 2px;
}
.day-detail-modal-body .dd-fineprint {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 12px;
}

/* ---------- 記録リスト (配当・優待、hairlineのみ・カード無し) ---------- */
.record-list {
  display: flex;
  flex-direction: column;
}

.record-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  border: none;
  border-radius: 0;
  flex-wrap: wrap;
}
.record-row + .record-row {
  border-top: 1px solid var(--hairline);
}
/* 配当記録一覧にアバター丸を追加。
   .hrow修飾子は.record-rowにアバター用のgapを足すだけで、既存のクラス/data-属性/
   イベント配線は一切変更しない。 */
.record-row.hrow {
  gap: 13px;
  flex-wrap: nowrap;
}
.record-row.hrow .amount {
  flex: none;
}
/* .amount-col: 配当記録タブの明細行で、金額と「推定」バッジ(税引前・未入力時)を縦に並べる
   受け皿。バッジが無い行では単に金額だけが右寄せで並ぶ (E-2)。 */
.record-row.hrow .amount-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: none;
}
.record-row.hrow .amount-col .expiry-badge {
  margin: 0;
}

.record-row .main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  color: var(--ink);
}

.record-row .amount {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

/* 優待記録タブの.event .actions (アイコンのみゴーストボタン) と同じ間隔に揃える。 */
.record-row .actions {
  display: flex;
  gap: 2px;
  flex: none;
}

/* ---------- フッター (プライバシー文・免責。長文はそのまま残しつつ淡色1段に統合) ---------- */
.app-footer {
  margin: 30px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.7;
}

.app-footer p {
  margin: 0 0 8px;
}

/* ---------- モーダル ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.modal-box-wide {
  max-width: 640px;
}

.modal-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.modal-message {
  margin: 0 0 8px;
  line-height: 1.7;
  font-size: 13.5px;
  color: var(--ink2);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

body.scroll-locked {
  overflow: hidden;
}

/* ---------- ロック(登録ゲート) ---------- */
.gate-panel {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 18px;
  margin: 10px 0;
  box-shadow: none;
}

.gate-panel h2 {
  margin-top: 0;
  font-size: 17px;
  color: var(--ink);
}

.gate-code-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.gate-code-row input {
  flex: 1;
  min-width: 220px;
  padding: 11px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gate-error {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 6px;
}

.gate-success {
  color: var(--mint);
  font-size: 12.5px;
  margin-top: 6px;
}

/* ---------- .icsエクスポート ---------- */
.ics-export-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.ics-howto {
  margin-top: 10px;
  font-size: 12.5px;
}
.ics-howto summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- サマリー・グラフ・シェア画像 ---------- */
.summary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.summary-toolbar select {
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--ink);
}

.share-image-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.chart-svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  display: block;
}

.chart-bar {
  fill: var(--mint);
}

.chart-axis {
  stroke: var(--hairline);
  stroke-width: 1;
}

.chart-value {
  font-size: 11px;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 月別棒のような狭い棒幅向けのサイズ。CSPでinline styleが使えないため、
   JS側 (charts.js) は2段階のクラス切替 (sm→xs) だけでラベル幅を棒幅に収める。 */
.chart-value-sm {
  font-size: 9.5px;
}
.chart-value-xs {
  font-size: 7.5px;
}

.chart-label,
.chart-row-label {
  font-size: 10.5px;
  fill: var(--ink3);
}

.chart-empty-text {
  font-size: 13px;
  fill: var(--ink3);
}

/* エリアチャート (棒12本+全ラベルの代わりに線1本+グラデーションで表示) */
.area-chart-fill {
  opacity: 1;
}
.area-chart-line {
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.area-chart-peak {
  fill: var(--mint);
}
.area-chart-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- CSVインポートの列マッピング表 ---------- */
.mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 10px 0;
}
.mapping-table th,
.mapping-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 8px 10px;
  text-align: left;
}
.mapping-table select {
  width: 100%;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: var(--surface2);
}
.mapping-preview-note {
  font-size: 11.5px;
  color: var(--ink3);
  margin: 6px 0;
}

/* ==================== サマリー: 主役ドーナツ + 従3KPI ==================== */
.summary-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}
.donut-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}
.donut-svg .donut-center-label {
  font-size: 12px;
  fill: var(--ink3);
}
.donut-svg .donut-center-value {
  font-size: 19px;
  font-weight: 700;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.donut-legend-row:hover,
.donut-legend-row[aria-pressed="true"] {
  background: var(--surface2);
}
.donut-legend-swatch {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--stock-color, var(--ink3));
}
.donut-legend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink2);
}
.donut-legend-amount {
  font-weight: 600;
  color: var(--ink);
  margin-left: auto;
}
.donut-legend-pct {
  color: var(--ink3);
  font-size: 12px;
  min-width: 3.6em;
  text-align: right;
}
.donut-legend-empty {
  color: var(--ink3);
  font-size: 13px;
  padding: 8px 6px;
}
.donut-filter-active {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ink);
}

.kpi-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.kpi-secondary-grid .summary-card {
  padding: 10px 12px;
}
.kpi-secondary-grid .summary-card .value {
  font-size: 14.5px;
}

/* ==================== 配当グラフ: 期間セグメント切替 (ピル型) ==================== */
.period-toggle {
  display: inline-flex;
  gap: 4px;
  background: transparent;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 12px;
}
.period-toggle-btn {
  border: none;
  background: transparent;
  color: var(--ink2);
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.period-toggle-btn[aria-pressed="true"] {
  background: var(--surface2);
  color: var(--ink);
}

.chart-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}
.chart-stat-box {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.chart-stat-box .label {
  font-size: 11.5px;
  color: var(--ink3);
}
.chart-stat-box .value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.chart-bar-clickable {
  cursor: pointer;
}
.chart-bar-selected {
  stroke: var(--mint);
  stroke-width: 2.5;
}
/* 月別の入金予定 (参考) は実績グラフと同じ緑だと見分けが付かないため、不透明度を下げて
   「まだ実現していない予定値」であることを見た目でも示す (セクション見出し・注記と合わせた二重の分離)。 */
.chart-bar-forecast {
  opacity: 0.55;
}

/* ==================== 保有銘柄台帳: アバター丸 + 2段テキスト + 右揃え2段数値 ==================== */
.holdings-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 6px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
}
.holdings-group-heading:first-child {
  margin-top: 0;
}
/* E-4: 見出しボタンが.account-groupでラップされたため、直接の:first-childではなく
   「最初のグループの中の見出し」を対象にする (#dividend-record-listの.account-group:first-child
   と同じ理由で、そうしないと全グループの見出しが詰まってしまう)。 */
#holdings-list-mount .account-group:first-child .holdings-group-heading {
  margin-top: 0;
}
.holdings-group-count {
  font-weight: 400;
  color: var(--ink3);
}

.holding-row {
  display: flex;
  align-items: center;
  gap: 13px;
}
.holding-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  border: none;
  color: var(--stock-color, var(--ink2));
  background: color-mix(in srgb, var(--stock-color, var(--ink3)) 16%, var(--surface2));
}
.holding-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.holding-row-main .name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.holding-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink3);
}
.holding-row-numbers {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.holding-row-numbers .shares {
  font-size: 11.5px;
  color: var(--ink3);
}
.holding-row-numbers .cost-basis {
  font-weight: 600;
  color: var(--ink);
  font-size: 14.5px;
}
.yutai-category-icon {
  display: inline-flex;
  color: var(--mint);
  flex-shrink: 0;
}

/* ==================== 銘柄詳細モーダル (単票) ====================
   既存のモーダル基盤 (js/modal.js openModal) を流用し、フルスクリーン寄りの縦長ダイアログとして
   開く。台帳の行・ホーム・権利確定予定・カレンダー・配当記録・優待記録の全箇所からこの同じ
   モーダルを開く。行コンポーネント (.event/.kpi/.sec/.tx/.n/.s) は
   既存の他画面と共有し、ここでしか使わない要素だけ .stock-detail-* を新設する。 */
.modal-box-stock-detail {
  max-width: 460px;
  max-height: 94vh;
}
.stock-detail-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
/* .av.stock-detail-avatar (2クラス) にして詳細後方の.av単体ルール(2163行目付近)より
   確実に優先させる (このファイル内で定義順は.avより前だが、同一詳細度だと後勝ちになるため)。 */
.av.stock-detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 18px;
}
.stock-detail-head .n {
  font-weight: 700;
  font-size: 18px;
}
.stock-detail-close {
  flex: none;
  color: var(--ink3);
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}
.stock-detail-close:hover {
  color: var(--ink);
}
.stock-detail-body .kpis {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.stock-detail-body .kpi {
  flex: 1;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
}
.stock-detail-body .kpi .t {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 3px;
}
.stock-detail-body .kpi .v {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.stock-detail-perf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
}
.stock-detail-perf-row + .stock-detail-perf-row {
  border-top: 1px solid var(--hairline);
}
/* 「配当(N回)」「優待(N件)」行をタップ→該当タブをこの銘柄で絞って開く (行き止まり解消)。
   holding-card:hoverと同じ面の明度差でクリック可能なことを示す。 */
.stock-detail-perf-row[role="button"] {
  cursor: pointer;
  border-radius: 8px;
}
.stock-detail-perf-row[role="button"]:hover {
  background: var(--surface2);
}
.stock-detail-perf-row[role="button"]:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}
.stock-detail-perf-value {
  flex: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
/* 配当・優待の受取実績は「実際に入ってきた金額」であることを示すため、行別に色分けしない
   ホーム/配当記録一覧と揃え、配当のみセマンティック緑にする。 */
.stock-detail-perf-value.text-mint {
  color: var(--mint);
}
.stock-detail-memo {
  margin-top: 14px;
}
/* サニタイズ (js/xss-guard.js) は改行を保持したまま保存しているため、表示側も
   改行を保った折り返しにする (既定のnormalは改行をスペースに潰してしまう)。 */
.memo-text {
  white-space: pre-line;
}
.stock-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.stock-detail-actions .btn-secondary {
  flex: 1;
}
/* 「削除」は編集と同じ面 (surface2) で文字色だけ赤にする (枠なし・危険色は文字のみ)。
   一覧行の既存.btn-danger (danger-soft地) とは意図的に別スタイルにする。 */
.stock-detail-actions .stock-detail-delete-btn {
  color: var(--down);
}

/* ---------- カレンダー: 月合計 ---------- */
.calendar-month-total {
  text-align: right;
  font-size: 12px;
  color: var(--ink3);
  margin: 4px 0 0;
}
.calendar-month-total strong {
  color: var(--ink);
}

/* 権利日ハイライトのhero行・章見出し・ミニカレンダー (.highlight-hero-*
   / .highlight-chapter-* / .mini-calendar-*) は、パネルごと撤去したため削除した。 */

.expiry-badge-urgent {
  background: var(--urgent-soft);
  color: var(--urgent);
  font-weight: 700;
}

/* ---------- 入口3層: 登録なし層 (1件お試し) の導線 ---------- */
.banner-trial {
  background: var(--info-soft);
  color: var(--info);
}
.trial-limit-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink3);
}

/* ==================================================================
   ここから新規セクション: ホームのhero/エリアチャート、
   次の権利日プレビュー、権利確定予定「今後の予定」リスト。
   新規要素にだけ限定して安全に追加。
   ================================================================== */

/* ---- ホームhero (#home-hero-mount 配下) ---- */
#home-hero-mount .klabel {
  font-size: 12.5px;
  color: var(--ink2);
  margin-bottom: 6px;
}
#home-hero-mount .hero {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
#home-hero-mount .hero .yen {
  font-size: 22px;
  color: var(--ink2);
  font-weight: 500;
  margin-right: 2px;
}
#home-hero-mount .delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mint);
  background: var(--mint-dim);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}
#home-hero-mount .delta.down {
  color: var(--down);
  background: var(--danger-soft);
}
#home-hero-mount .delta.gray {
  color: var(--ink2);
  background: var(--surface2);
}
#home-hero-mount .chart {
  margin: 18px 0 0;
}
#home-hero-mount .segs {
  display: flex;
  gap: 6px;
  margin: 14px 0 4px;
}
#home-hero-mount .seg {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  color: var(--ink2);
  background: transparent;
  border: none;
}
#home-hero-mount .seg[aria-pressed="true"] {
  background: var(--surface2);
  color: var(--ink);
}
#home-hero-mount .kpis {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
#home-hero-mount .kpi {
  flex: 1;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
}
#home-hero-mount .kpi .t {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 3px;
}
#home-hero-mount .kpi .v {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
#home-hero-mount .heronote {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 8px;
}

/* ---- ピル型セグメントコントロール (.segs/.seg、汎用) ----
   ホームhero部・権利確定予定の表示切替・配当記録の年フィルタ等、画面をまたいで共有する。 */
.segs {
  display: flex;
  gap: 6px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}
.seg {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  color: var(--ink2);
  background: transparent;
  border: none;
}
.seg[aria-pressed="true"] {
  background: var(--surface2);
  color: var(--ink);
}

/* ---- 次の権利日プレビュー / 今後の予定 / 優待記録一覧 / 銘柄詳細モーダル (event行、共有) ---- */
#next-rights-preview-mount .sec,
#upcoming-schedule-mount .sec,
#yutai-list-mount .sec,
#dividend-record-list .sec,
.stock-detail-body .sec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 22px 0 10px;
}
#next-rights-preview-mount .sec:first-child,
#upcoming-schedule-mount .sec:first-child,
#yutai-list-mount .sec:first-child,
.stock-detail-body .sec:first-child {
  margin-top: 0;
}
/* #dividend-record-listだけは口座グループ(.account-group)でラップされているため、
   直接の.sec:first-childではなく「最初のグループの中の.sec」を対象にする
   (そうしないと.sec が毎グループの先頭で:first-childに一致し、全グループの見出しが
   margin-top:0になって間隔が詰まってしまう)。 */
#dividend-record-list .account-group:first-child .sec {
  margin-top: 0;
}
#next-rights-preview-mount .sec .t,
#upcoming-schedule-mount .sec .t,
#yutai-list-mount .sec .t,
#dividend-record-list .sec .t,
.stock-detail-body .sec .t {
  font-size: 12.5px;
  color: var(--ink2);
  font-weight: 600;
}
#next-rights-preview-mount .sec .agg,
#upcoming-schedule-mount .sec .agg,
#yutai-list-mount .sec .agg,
#dividend-record-list .sec .agg,
.stock-detail-body .sec .agg {
  font-size: 12px;
  color: var(--ink3);
}
#dividend-record-list .sec .agg b {
  color: var(--ink2);
  font-weight: 600;
}
#next-rights-see-all {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* ---- 口座グループの開閉 (D-4/E-4): 30銘柄・4口座だと縦に長くなるため、見出しタップで折りたためる。
   配当記録タブ(#dividend-record-list)と保有銘柄台帳(#holdings-list-mount)は同じ部品を共有する。 ---- */
#dividend-record-list .account-group-toggle,
#holdings-list-mount .account-group-toggle {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}
#dividend-record-list .account-group-chevron,
#holdings-list-mount .account-group-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}
#dividend-record-list .account-group.collapsed .account-group-chevron,
#holdings-list-mount .account-group.collapsed .account-group-chevron {
  transform: rotate(-90deg);
}
#dividend-record-list .account-group.collapsed .account-group-body,
#holdings-list-mount .account-group.collapsed .account-group-body {
  display: none;
}

#upcoming-schedule-mount .mhead,
#dividend-record-list .mhead {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 600;
  margin: 20px 0 8px;
}
#upcoming-schedule-mount .mhead:first-child,
#dividend-record-list .mhead:first-child {
  margin-top: 0;
}
#upcoming-schedule-mount .mtotal,
#dividend-record-list .mtotal,
#monthly-plan-mount .mtotal {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink3);
  padding: 8px 2px 0;
  border-top: 1px solid var(--hairline);
  margin-top: 10px;
}
#upcoming-schedule-mount .mtotal b,
#dividend-record-list .mtotal b,
#monthly-plan-mount .mtotal b {
  color: var(--ink2);
}

.event {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--bar, var(--mint));
}
/* CSPがstyle-srcを明示せずdefault-src 'self'にフォールバックするため、色はインライン
   style属性ではなくクラス (--barをここで設定) で切り替える
   (events: 赤=権利付き最終日/青=権利確定日/橙=優待期限)。 */
.event.bar-down {
  --bar: var(--down);
}
.event.bar-info {
  --bar: var(--info);
}
.event.bar-warn {
  --bar: var(--warn);
}
/* 優待記録一覧の行バーは優待の種類色 (--c-meal/--c-gift/--c-catalog/--c-food/--c-other) で塗る。 */
.event.bar-cat-meal {
  --bar: var(--c-meal);
}
.event.bar-cat-gift {
  --bar: var(--c-gift);
}
.event.bar-cat-catalog {
  --bar: var(--c-catalog);
}
.event.bar-cat-food {
  --bar: var(--c-food);
}
.event.bar-cat-other {
  --bar: var(--c-other);
}

/* ---------- プラン状態カード (データ管理タブ「登録状態」) ----------
   4つの状態のうち、現在の状態1枚だけを .event 行として表示する (4枚並べない)。
   mint (無料メンバー) は .event::before の既定値そのままなので専用クラス不要、買切り(青)は
   bar-info、期限切れ(橙)はbar-warn、お試し(灰)はbar-cat-otherを流用し新しい色は追加しない。 */
.plan-emph {
  color: var(--mint);
}

/* .av/.tx/.n/.s は行コンポーネントの基底クラス。.event (今後の予定・次の権利日) と
   .record-row.hrow (配当記録) の両方から共有する。 */
.av {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
  color: var(--stock-color, var(--ink2));
  background: color-mix(in srgb, var(--stock-color, var(--ink3)) 16%, var(--surface2));
}
.tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.n {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s {
  font-size: 11.5px;
  color: var(--ink3);
  display: flex;
  gap: 6px;
  align-items: center;
  font-weight: 400;
}
.s .sep {
  opacity: 0.6;
}
/* .event .s は「種別・日付」1行専用。display:flexのまま長い
   テキストを詰め込むと、日本語は単語区切りが無いため文字単位で折り返って縦積みに崩れる。
   .event 内だけdisplay:blockに戻し、nowrap+ellipsisで1行に収める (390px・銘柄名長時も安全側)。 */
.event .s {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .s2: 3行目に小さく独立させる補足行 (優待の到着予定月など)。権利確定日の行には出さない。 */
.event .s2 {
  font-size: 11.5px;
  color: var(--ink3);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 配当記録一覧の行にもメモの3行目を出す (D-4-7、編集を開くまでメモの存在に気づけなかったため)。 */
.record-row .s2 {
  font-size: 11.5px;
  color: var(--ink3);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .ytag: 優待の種類タグ、種類色で塗る。 */
.ytag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  vertical-align: 1px;
  color: var(--cat-color, var(--ink2));
  background: color-mix(in srgb, var(--cat-color, var(--ink3)) 16%, var(--surface2));
}
.ytag-meal {
  --cat-color: var(--c-meal);
}
.ytag-gift {
  --cat-color: var(--c-gift);
}
.ytag-catalog {
  --cat-color: var(--c-catalog);
}
.ytag-food {
  --cat-color: var(--c-food);
}
.ytag-other {
  --cat-color: var(--c-other);
}
/* 使用済みタグはニュートラル色 (種類色を増やさず既存の--c-otherを流用)。 */
.ytag-used {
  --cat-color: var(--c-other);
}
/* 失効にした優待記録は行全体を打ち消し気味 (opacity) に表示し、左バーも種類色ではなく
   危険色 (--down) にする (C-7)。.event.bar-cat-*より後ろに置いて優先させる。 */
.event.yutai-voided {
  opacity: 0.55;
  --bar: var(--down);
}
/* 優待記録一覧: 優待名が1行のtext-overflow:ellipsisだと先頭 (何の券か) か末尾 (金額・枚数)
   のどちらかが必ず切れてしまう。行の構造 (av/tx/right/actions) は変えず、
   (a) アバターをこの一覧だけ一回り小さくして.txに回る幅を増やす、(b) 種類タグ(.ytag)は
   常に全体を表示したまま、名前テキストとは別の行に折り返して幅を奪わないようにする、
   (c) 名前テキストは先頭・末尾を切らず2行まで折り返し、3行目以降だけ省略する
   (-webkit-line-clamp) の3点で、券面の内容が読み取れる状態を保つ。 */
#yutai-list-mount .av {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
#yutai-list-mount .n {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  white-space: normal;
}
#yutai-list-mount .n .yutai-name-text {
  min-width: 0;
  flex: 1 1 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
#yutai-list-mount .n .ytag {
  flex: none;
  margin-left: 0;
}
.event .right {
  text-align: right;
  flex: none;
}
/* E-8: 銘柄詳細(単票)の「次の予定」は銘柄名が1行のtext-overflow:ellipsisで切れ、
   長い名前 (例: 「三菱UFJフィナンシャル・グ…」) が読めなかった。優待記録一覧と同じ方針
   (先頭・末尾を切らず2行まで折り返し、3行目以降だけ省略) で、この行だけ折り返しを許可する
   (direction:rtlは使わない)。合わせて金額・残り日数側の.rightをmin-widthで頭打ちにし、
   長い名前のときに.tx側へ回る幅を確保する (幅の配分見直し)。 */
.stock-detail-body .event .n {
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.stock-detail-body .event .right {
  max-width: 40%;
}
/* 優待記録一覧の編集/削除 (機能不変)。CRUD機能維持のためholdings台帳と同じ
   アイコンのみゴーストボタンで最小限の面積に収める。 */
.event .actions {
  display: flex;
  gap: 2px;
  flex: none;
}
.event .amt {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.event .cd {
  font-size: 11px;
  color: var(--warn);
}
.event .cd.far {
  color: var(--ink3);
}
.event .cd.today {
  color: var(--down);
  font-weight: 700;
}

/* ---------- 銘柄詳細への共通遷移 ----------
   ホームの次の権利日プレビュー・権利確定予定 (今後の予定)・カレンダー日詳細モーダルの
   イベント行は行全体が銘柄詳細への入口になる (data-holding-row)。配当記録・優待記録の行は
   既存の編集/削除アイコンと共存するため、銘柄名の部分だけをリンク化する (data-holding-link)。 */
[data-holding-row] {
  cursor: pointer;
}
[data-holding-row]:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}
[data-holding-link] {
  cursor: pointer;
}
[data-holding-link]:hover,
[data-holding-link]:focus-visible {
  text-decoration: underline;
}

/* ---------- レスポンシブ (PC 1024px+) ---------- */
@media (min-width: 1024px) {
  .app-shell {
    padding: 0 24px 48px;
  }

  .two-col {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
    gap: 20px;
    align-items: start;
  }

  .calendar-day {
    min-height: 92px;
    font-size: 0.84rem;
  }

  .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 480px) {
  .calendar-day {
    min-height: 46px;
    font-size: 0.68rem;
    padding: 2px;
  }
  .calendar-grid {
    gap: 2px;
  }
}

/* ---- チェックボックスが標準の青チェック+中央寄せ →
   トークンに合わせたカスタムスタイル+左寄せで他フィールドと列を揃える
   (flex-direction:rowへの修正本体は648行目付近の.checkbox-rowに統合済み) ---- */
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border-radius: 6px;
  background: var(--surface2);
  position: relative;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--mint);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  /* --mintは明暗両テーマで同値の明るい緑のため、チェックマークは固定の濃色にする
     (mint地に置く前提の配色)。 */
  border: solid #08110c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ---- 追加成功のフィードバック (非モーダル、ネイティブ不使用)。
   該当行への一過性ハイライト。背景色ではなくbox-shadowで表現し、行の種類ごとに
   異なる既定背景色 (holding-card/record-row/event) を気にせず使い回せるようにする。 ---- */
@keyframes just-added-pulse {
  0% {
    box-shadow: 0 0 0 2px var(--mint) inset;
  }
  70% {
    box-shadow: 0 0 0 2px var(--mint) inset;
  }
  100% {
    box-shadow: 0 0 0 2px transparent inset;
  }
}
.just-added {
  animation: just-added-pulse 1.6s ease-out;
}

/* ---- 登録直後 (配当・優待記録0件) のホーム空状態。
   既存のklabel/hero/hintの範囲で完結させ、グラフ領域は畳む。 ---- */
.home-empty-hint {
  color: var(--ink2);
  font-size: 13px;
  margin: 14px 0 12px;
}

/* ---- カレンダー祝日の左バーを凡例にも追加 (クリックで空応答になる問題は
   openDayDetailModal側で祝日名を表示するよう修正、CSSは凡例の見た目のみ)。 ---- */
.legend-dot.holiday {
  background: var(--warn);
  width: 3px;
  height: 12px;
  border-radius: 1px;
}

.day-detail-holiday-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink2);
  margin: 0 0 12px;
}
.day-detail-holiday-note .legend-dot {
  margin-right: 0;
}

/* ---- データ管理タブのプラン説明「プラン/できること/条件」ミニ表 (枠線ではなくヘアライン)。 ---- */
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 10px 0 14px;
}
.plan-table th,
.plan-table td {
  text-align: left;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--ink2);
}
.plan-table th {
  color: var(--ink3);
  font-size: 11.5px;
  font-weight: 600;
}
.plan-table td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.plan-table tr:last-child th,
.plan-table tr:last-child td {
  border-bottom: none;
}

/* ---- 375px幅でKPI 3列が崩れる (単位折返し・ベースライン不揃い)。
   狭幅では3列→2列(+1)に落とし、数字が折り返さない幅を確保する。 ---- */
@media (max-width: 420px) {
  #home-hero-mount .kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kpi-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 銘柄詳細モーダルのKPI3枚 (保有KPI・年間予定KPI) も同じ理由で2列+1に落とす。 */
  .stock-detail-body .kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ==================== 追加3機能 (口座別受取集計/月別入金予定ドリルダウン/優待ステータス絞り込み) ====================
   mintを文字色にそのまま使うとライトテーマで背景とのコントラストが不足するため
   (このファイル冒頭のコメント参照。実測: #3ecf8eを白背景に直接使うとコントラスト比2.0で
   WCAG AAの4.5:1を満たさない)、この節で「緑い文字」が要る箇所はすべて --accent 経由にする
   (ダークテーマは--accentの値が--mintと同値なので見た目は変わらない。背景・枠線・SVGの
   棒塗りなど非テキストの装飾は引き続き--mint/--mint-dimをそのまま使う)。 */

/* ---- インラインのドロップダウンピル (配当記録タブの口座/年フィルタ)。フォーム部品の
   素の見た目ではなく、ヘアライン枠+アイコン+シェブロンのピルに見せる。中身は実体としては
   <select> のままなのでキーボード操作・スクリーンリーダーは通常のセレクトと同じに保たれる。 ---- */
.fprow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 22px;
  flex-wrap: wrap;
}
.fpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
}
.fpill svg {
  flex: none;
  opacity: 0.85;
}
.fpill-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.fpill-select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}
.fpill .chev {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 400;
}

/* ---- 配当記録タブ: hero (ラベル小+主役36px+従2+注記1行、KPIカードを4枚並べない) ---- */
#dividend-summary-mount .klabel {
  font-size: 12.5px;
  color: var(--ink2);
  margin-bottom: 6px;
}
#dividend-summary-mount .hero2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
#dividend-summary-mount .hero2 .yen {
  font-size: 21px;
  color: var(--ink2);
  margin-right: 2px;
  font-weight: 500;
}
#dividend-summary-mount .subkpis {
  display: flex;
  gap: 28px;
  margin-top: 12px;
}
#dividend-summary-mount .sk {
  display: flex;
  flex-direction: column;
}
#dividend-summary-mount .sk .t {
  font-size: 11.5px;
  color: var(--ink3);
}
#dividend-summary-mount .sk .v {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
#dividend-summary-mount .heronote {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 8px;
}

/* ---- 配当記録タブ: 口座別グループの明細 (空グループの理由行・優待換算のブリッジ行) ---- */
#dividend-list-mount .emptyrow,
#dividend-record-list .emptyrow {
  font-size: 12.5px;
  color: var(--ink3);
  padding: 8px 2px;
}
.dividend-yutai-bridge-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 2px;
  cursor: pointer;
}
.dividend-yutai-bridge-row + .dividend-yutai-bridge-row,
.dividend-yutai-bridge-row + .record-row.hrow,
.record-row.hrow + .dividend-yutai-bridge-row {
  border-top: 1px solid var(--hairline);
}
.dividend-yutai-bridge-row .amount {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  flex: none;
}
/* 受取済み金額 (口座別受取集計の配当行・優待換算ブリッジ行) は「+」付きの強調色にする。
   mintそのものだと文字色としてライトテーマで白背景相手のコントラストが不足するため、
   このファイル冒頭の方針どおり--accent経由にする。.record-row .amount / .dividend-yutai-bridge-row
   .amountより後ろに置き、詳細度が同じ2クラスのため後勝ちで確実に上書きする。 */
.amount.amount-received {
  color: var(--accent);
}
.dividend-yutai-bridge-row:hover .n,
.dividend-yutai-bridge-row:focus-visible .n {
  text-decoration: underline;
}
.dividend-yutai-bridge-row:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

/* ---- ホーム: 月別入金予定のドリルダウンカード。#monthly-plan-mount は既存の.panel
   (背景--surface) の直下に置かれるため、面を1段浮かせるのに--surfaceを再利用すると
   面同士の区別が付かない。区別を付けるためだけに--surface2を使う (新色の追加ではない)。 ---- */
#monthly-plan-mount .card2 {
  background: var(--surface2);
  border-radius: 18px;
  padding: 16px 14px 14px;
  margin-top: 4px;
}
#monthly-plan-mount .annualsub {
  font-size: 11px;
  color: var(--ink3);
  text-align: right;
  padding: 0 4px 12px;
}
#monthly-plan-mount .xhair {
  border-top: 1px solid var(--hairline);
}
#monthly-plan-mount .why {
  font-size: 11.5px;
  color: var(--ink2);
  margin-top: 2px;
}
#monthly-plan-mount .fineprint {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 12px;
}
#monthly-plan-mount .mhead {
  font-size: 12.5px;
  color: var(--ink3);
  margin: 14px 0 6px;
  font-weight: 600;
}
#monthly-plan-mount .mhead:first-child {
  margin-top: 0;
}

/* ---- 月別入金予定ドリルダウン専用チャート (buildMonthlyPlanChartSvg が出すSVG要素) ---- */
.chart-avg-line {
  stroke: var(--ink3);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.6;
}
.chart-avg-legend-tick {
  stroke: var(--ink3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.chart-avg-legend-text {
  font-size: 8.5px;
  fill: var(--ink3);
}
.chart-bar-plan-clickable {
  cursor: pointer;
}
.chart-bar-plan-drilldown {
  fill: var(--mint);
  opacity: 0.32;
}
.chart-bar-plan-selected {
  opacity: 1;
}
.chart-bar-plan-stub {
  fill: var(--surface2);
}
.chart-plan-pill {
  fill: var(--mint-dim);
  stroke: var(--mint);
  stroke-width: 1;
}
.chart-plan-pill-text {
  font-size: 9px;
  font-weight: 600;
  fill: var(--accent);
}
.chart-label-selected {
  fill: var(--ink);
  font-weight: 600;
}

/* ---- 優待記録タブ: 並び替え3セグメントを1ピルに畳み、空いた行をステータスチップに
   明け渡す (押せる要素を増やす前に減らす)。銘柄フィルタは「銘柄」ゴースト表示に、
   CSVエクスポートはアイコンのみのボタンに縮める。 ---- */
.ctr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.sortpill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
}
.sortpill-wrap svg {
  flex: none;
  opacity: 0.85;
}
.sortpill-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.sortpill-wrap:focus-within {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
.sortpill-wrap .chev {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 400;
}
/* ghost-select-wrapは.fpill/.sortpill-wrapと同じ「行の中の1ピル」単位。marginはこの
   ラッパーに付け、中の<select>自体には付けない (次のコメント参照)。 */
.ghost-select-wrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* ネイティブ<select>は選択中の表示文字列ではなく、選択肢の中で最も長いoptionの文字幅で
   閉じた状態の箱の横幅を決める (Chromium/Firefox共通の挙動)。銘柄名の長い選択肢が1つでも
   混ざると閉じた状態の見た目が実際の表示文字列より大幅に広がり、同じ行の並び替えピル/
   アイコンボタンと収まらず折り返す原因になっていた。max-width+ellipsisで閉じた状態の
   横幅を表示文字列側に固定する。 */
.ghost-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 12.5px;
  padding: 0;
  cursor: pointer;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ghost-select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
.ghost-select-wrap .chev {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 400;
  flex: none;
}
/* .sortpill-wrap/.fpillと高さを揃えるため30x30の固定ボックスにする
   (.btn-icon-ghostと同サイズ。行アイコンの部品を流用)。 */
.ghosti-btn {
  border: none;
  background: transparent;
  color: var(--ink3);
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}
.ghosti-btn:hover,
.ghosti-btn:focus-visible {
  background: var(--surface2);
  color: var(--ink);
}

/* ---- ステータスチップ (すべて/期限間近/使用済み/失効)。選択中のみ塗り、0件は不活性。 ---- */
.chips {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: nowrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--ink2);
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}
.chip .c {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--ink3);
  font-weight: 600;
}
.chip.on {
  background: var(--mint-dim);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
}
.chip.on .c {
  color: var(--accent);
  opacity: 0.8;
}
.chip.zero {
  opacity: 0.4;
  cursor: default;
}
.statusline {
  font-size: 12px;
  color: var(--ink3);
  margin: 10px 0 4px;
}

/* ---- 銘柄で絞っている時の除去可能チップ (既存の「銘柄で絞り込み」セレクトを置き換えず、
   隣に選択中であることを分かりやすく示す+ワンタップで解除できるようにする)。 ---- */
.holding-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: 12px;
  color: var(--ink);
  margin: 10px 0 0;
}
.holding-filter-chip button {
  border: none;
  background: transparent;
  color: var(--ink3);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 420px) {
  .chips {
    gap: 5px;
  }
  .chip {
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* ---------- 静的ページ (プライバシーポリシー / 利用規約) ----------
   アプリ本体 (.app-shell) とは別の、長文の読み物用レイアウト。.panel/.section-titleは
   設定パネル (短い見出し+説明1行+ボタン列) 前提のトークンのため転用せず、専用クラスを起こす。
   同じCSSカスタムプロパティ (--page/--surface/--ink等) は共有するのでテーマは自動で追従する。 */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.legal-header {
  margin-bottom: 32px;
}
.legal-back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ink2);
}
.legal-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}
.legal-updated {
  font-size: 12.5px;
  color: var(--ink3);
  margin: 0;
}
.legal-body section {
  margin-bottom: 28px;
}
.legal-body h2 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.legal-body p {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 10px;
}
.legal-body ul {
  margin: 8px 0 10px;
  padding-left: 22px;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.8;
}
.legal-body li {
  margin-bottom: 4px;
}
.legal-body strong {
  color: var(--ink);
}
.legal-body code {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}
.legal-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink2);
}