/* 色と字はここだけで決める。画面側のCSS（app.css）に #rrggbb を書かない（CLAUDE.md §3 と同じ決まり）。
   見た目は、矢吹さんの指定した「修理作業一覧」（Velzon 4.4.4 minimal）に合わせる。
   部品は Velzon の CSS（bootstrap.min.css・app.min.css）をそのまま使い、ここでは次の3つだけをする。
     1. 字（Open Sans と HK Grotesk）を同梱のファイルに向ける。Google Fonts へは取りに行かない（外部通信の決まり）。
     2. Velzon の色のうち、白地・黒地で 4.5:1 に届かないものを締める（主色 #25a0e2 は白地で 2.9:1 しかない）。
     3. アプリ側の名前（--surface・--ink など）を、Velzon の変数に結びつける。白黒の切り替えは Velzon に任せる。
   変えたら check/ のコントラスト検査で両テーマを測り直す。 */
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-400.woff2) format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/opensans-700.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: hkgrotesk; src: url(/assets/fonts/hkgrotesk-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: hkgrotesk; src: url(/assets/fonts/hkgrotesk-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: hkgrotesk; src: url(/assets/fonts/hkgrotesk-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: hkgrotesk; src: url(/assets/fonts/hkgrotesk-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* 数字用の字。Velzon の app.min.css にも hkgrotesk の定義があり（同梱していない .woff を見に行く）、名前を分けておく */
@font-face { font-family: rs-num; src: url(/assets/fonts/hkgrotesk-semibold.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: rs-num; src: url(/assets/fonts/hkgrotesk-bold.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: remixicon; src: url(/assets/fonts/remixicon.woff2) format("woff2"); font-display: block; }

/* ---- 白 ---- */
:root, :root[data-bs-theme="light"] {
  --vz-body-font-family: "Open Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --vz-font-sans-serif: var(--vz-body-font-family);
  --vz-body-font-size: .9rem;
  /* 主色。Velzon の #25a0e2 を、白地で読める濃さに（指定画面のリンク色 #1573ad と同じ） */
  --vz-primary: #1573ad; --vz-primary-rgb: 21, 115, 173;
  --vz-primary-text-emphasis: #0f5880; --vz-primary-bg-subtle: #e8f3fa; --vz-primary-border-subtle: #b9dcf0;
  --vz-link-color: #1573ad; --vz-link-color-rgb: 21, 115, 173; --vz-link-hover-color: #0f5880;
  --vz-success: #16794f; --vz-success-rgb: 22, 121, 79; --vz-success-bg-subtle: #e2f4ec;
  --vz-warning: #9a6b05; --vz-warning-rgb: 154, 107, 5; --vz-warning-bg-subtle: #fdf3d9;
  --vz-danger: #b5331f; --vz-danger-rgb: 181, 51, 31; --vz-danger-bg-subtle: #fde9e5;
  --vz-info: #0e6f9e; --vz-info-rgb: 14, 111, 158; --vz-info-bg-subtle: #e1f3fb;
  /* 注意書き（alert）の字色。Velzon のままだと淡い地の上で 3.6:1 しかない */
  --vz-success-text-emphasis: #0f5c3b; --vz-warning-text-emphasis: #6e4c03; --vz-danger-text-emphasis: #8f2616; --vz-info-text-emphasis: #0a5478;
  /* 指定画面と同じ「文字の見やすさ」の締め（#878a99 は白地で薄すぎる） */
  --vz-secondary-color: #545b6e; --vz-secondary-color-rgb: 84, 91, 110;
  --vz-heading-color: #232a37;
  --vz-body-color: #1b202a; --vz-body-color-rgb: 27, 32, 42;
  --vz-tertiary-color: #626a7d;
  --vz-vertical-menu-item-color: #4a5162;
  --vz-vertical-menu-title-color: #5f6779;
  --vz-light-text-emphasis: #4b5466;
  --vz-border-color: #dfe3e8;
  --vz-input-placeholder-color: #6b7487;
  --vz-dropdown-link-color: #1f242e;

  /* アプリ側の名前 */
  --bg: var(--vz-body-bg);
  --surface: var(--vz-secondary-bg);
  --sunk: var(--vz-light);
  --hover: var(--vz-tertiary-bg);
  --line: var(--vz-border-color);
  --line-2: #c9d0d8;
  --ink: var(--vz-body-color);
  --ink-2: var(--vz-secondary-color);
  --ink-3: #5f6779;
  --accent: var(--vz-primary);
  --accent-2: var(--vz-primary-text-emphasis);
  --accent-soft: var(--vz-primary-bg-subtle);
  --accent-ink: #ffffff;
  /* ボタン（ソリッド）。主な操作は墨色の塗り、ほかは白地に枠線の2種類だけにする（淡い色のボタンはやめる。矢吹さんの指定） */
  --btn-solid: #1b2433; --btn-solid-hover: #0b1019; --btn-solid-ink: #ffffff;
  --btn-line: #c3cad4; --btn-line-hover: #1b2433; --btn-plain: #ffffff; --btn-plain-hover: #f1f3f6; --btn-plain-ink: #1b2433;
  --ok: var(--vz-success); --ok-soft: var(--vz-success-bg-subtle);
  --warn: var(--vz-warning); --warn-soft: var(--vz-warning-bg-subtle);
  /* 淡い黄の地に乗せる文字。--warn のままだと 4.24:1 で足りないので一段濃くする */
  --warn-ink: var(--vz-warning-text-emphasis);
  --bad: var(--vz-danger); --bad-soft: var(--vz-danger-bg-subtle);
  --info: var(--vz-info); --info-soft: var(--vz-info-bg-subtle);
  /* ⭐ は Filmarks のような明るい金色（矢吹さんの指定）。点数はいつも数字でも並べるので、⭐ は飾りとして扱い 3:1 は求めない */
  --star: #f5a623;
  --star-off: #d8dce2;
  /* 大事な曲の行（曲目）。淡い金の地と左の帯。一覧の「★ 曲名」の文字は白地で 4.5:1 を超える濃い金茶にする */
  --star-bg: #fff5e0; --star-line: #f5a623; --star-ink: #8a5300;
  --scrim: rgba(30, 32, 37, .45);
  --shadow: 0 1px 2px rgba(56, 65, 74, .08);
  --shadow-lg: 0 10px 40px rgba(30, 32, 37, .25);
  /* ジャンルの色。文字色は淡い地の上で 4.5:1 を超えるように濃くしてある */
  --g-movie: #3049a8;  --g-movie-soft: #e3e8fa;
  --g-anime: #a8255a;  --g-anime-soft: #f9e2ec;
  --g-manga: #23703a;  --g-manga-soft: #e0f1e4;
  --g-book: #8a4f08;   --g-book-soft: #f7ead6;
  --g-music: #5b3bb8;  --g-music-soft: #ebe5fa;
  /* 写真を大きく見る画面は、白黒どちらのテーマでも暗い地にする（写真が見やすいように）。 */
  --lb-bg: rgba(10, 12, 16, .94); --lb-ink: #f1f3f5; --lb-ink-2: #c3c9d0; --lb-btn: rgba(255, 255, 255, .1); --lb-btn-2: rgba(255, 255, 255, .22); --lb-line: rgba(255, 255, 255, .3);
  --on-scrim: #ffffff;
  /* 表紙の上の「表紙を変える」。表紙がどんな色でも白文字が読めるよう、幕より濃くする */
  --hint-bg: rgba(10, 12, 16, .78);
  --f-body: var(--vz-body-font-family);
  --f-num: "Open Sans", ui-monospace, "SF Mono", Menlo, monospace;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: .3rem;
}
/* 紙の色。真っ白はまぶしいので、指定画面と同じ「やわらかい白」を地にする。カードは白のまま。 */
:root[data-paper="soft"]:not([data-bs-theme="dark"]) { --vz-body-bg: #f3f6f9; }
:root[data-paper="soft"]:not([data-bs-theme="dark"]) .table-light { --vz-table-bg: #eef2f6; }

/* ---- 黒 ---- */
:root[data-bs-theme="dark"] {
  --vz-primary: #4fb3ea; --vz-primary-rgb: 79, 179, 234;
  --vz-primary-text-emphasis: #8ccdf2; --vz-primary-bg-subtle: rgba(79, 179, 234, .14); --vz-primary-border-subtle: rgba(79, 179, 234, .4);
  --vz-link-color: #6cb8e8; --vz-link-color-rgb: 108, 184, 232; --vz-link-hover-color: #9fd3f3;
  --vz-success: #5fcf9b; --vz-success-rgb: 95, 207, 155; --vz-success-bg-subtle: rgba(95, 207, 155, .14);
  --vz-warning: #e8c05a; --vz-warning-rgb: 232, 192, 90; --vz-warning-bg-subtle: rgba(232, 192, 90, .14);
  --vz-danger: #f0806c; --vz-danger-rgb: 240, 128, 108; --vz-danger-bg-subtle: rgba(240, 128, 108, .14);
  --vz-info: #64bce8; --vz-info-rgb: 100, 188, 232; --vz-info-bg-subtle: rgba(100, 188, 232, .14);
  --vz-success-text-emphasis: #8fe0ba; --vz-warning-text-emphasis: #f0d58f; --vz-danger-text-emphasis: #f6aa9c; --vz-info-text-emphasis: #9ad3f0;
  --vz-secondary-color: #a3acbd; --vz-secondary-color-rgb: 163, 172, 189;
  --vz-heading-color: #e3e8ef;
  --vz-body-color: #dfe4ec; --vz-body-color-rgb: 223, 228, 236;
  --vz-tertiary-color: #a3acbd;
  --vz-vertical-menu-item-color: #b9c1cf;
  --vz-vertical-menu-title-color: #a3acbd;
  --vz-light-text-emphasis: #cfd6e2;
  --vz-input-placeholder-color: #8f98a8;
  --vz-dropdown-link-color: #dfe4ec;

  --line-2: #4a525b;
  --ink-3: #a3acbd;
  --accent-ink: #0b1a24;
  --btn-solid: #e9edf3; --btn-solid-hover: #ffffff; --btn-solid-ink: #10151d;
  --btn-line: #4f5864; --btn-line-hover: #dfe4ec; --btn-plain: #212529; --btn-plain-hover: #2b3036; --btn-plain-ink: #e9edf3;
  --star: #f2b33d; --star-off: #4d545c;
  --star-bg: rgba(242, 179, 61, .13); --star-line: #f2b33d; --star-ink: #f2cf86;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
  --g-movie: #a9b8f5; --g-movie-soft: #262f4d;
  --g-anime: #f3a3c4; --g-anime-soft: #42253a;
  --g-manga: #94d6a6; --g-manga-soft: #1f3a29;
  --g-book: #ecc184; --g-book-soft: #3d311f;
  --g-music: #c6b5f5; --g-music-soft: #31284d;
}

/* ---- Velzon の部品で、決め打ちの色を持っているもの ---- */
/* 主色のボタン・札の文字色。黒地では主色が明るいので、白文字では読めない。濃い字にする。 */
.btn-primary { --vz-btn-color: var(--accent-ink); --vz-btn-hover-color: var(--accent-ink); --vz-btn-active-color: var(--accent-ink); --vz-btn-disabled-color: var(--accent-ink); --vz-btn-disabled-bg: var(--vz-primary); --vz-btn-disabled-border-color: var(--vz-primary); }
.btn-soft-primary { --vz-btn-hover-color: var(--accent-ink); --vz-btn-active-color: var(--accent-ink); }
.bg-primary-subtle { color: var(--vz-primary) !important; }
.text-primary { color: var(--vz-primary) !important; }
.text-success { color: var(--vz-success) !important; } .text-warning { color: var(--vz-warning) !important; }
.text-info { color: var(--vz-info) !important; } .text-danger { color: var(--vz-danger) !important; }
.text-muted, .text-secondary { color: var(--vz-secondary-color) !important; }
.badge.bg-success-subtle.text-success { color: var(--vz-success) !important; }
.badge.bg-warning-subtle.text-warning { color: var(--vz-warning) !important; }
.badge.bg-info-subtle.text-info { color: var(--vz-info) !important; }
.badge.bg-danger-subtle.text-danger { color: var(--vz-danger) !important; }
.badge.bg-primary-subtle.text-primary { color: var(--vz-primary) !important; }
.btn-light { color: #2f3745; }
:root[data-bs-theme="dark"] .btn-light { color: #dfe4ec; }
.btn-ghost-secondary { color: var(--vz-secondary-color); }
::placeholder { color: var(--vz-input-placeholder-color) !important; opacity: 1; }
.form-control:disabled, .form-control[readonly] { color: var(--vz-light-text-emphasis); }
.dropdown-item { color: var(--vz-dropdown-link-color); }

/* Remix Icon の土台。同梱の icons-remix.min.css には入っていない（指定画面でも同じように足していた） */
[class^="ri-"], [class*=" ri-"] { font-family: remixicon !important; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- ボタンの見た目（ソリッド） ----
   Bootstrap の標準のままだと淡い色・丸みが強く、ぼやけて見えるので締める。
   塗り（.btn-primary）：主な操作。白地に枠線（.btn-light・.btn-soft-primary・.btn-outline-secondary）：それ以外。 */
.btn { --vz-btn-border-radius: 6px; --vz-btn-font-weight: 600; border-radius: 6px; font-weight: 600; letter-spacing: .01em; box-shadow: none !important; }
.btn-sm { border-radius: 5px; }
.btn-primary {
  --vz-btn-bg: var(--btn-solid); --vz-btn-border-color: var(--btn-solid); --vz-btn-color: var(--btn-solid-ink);
  --vz-btn-hover-bg: var(--btn-solid-hover); --vz-btn-hover-border-color: var(--btn-solid-hover); --vz-btn-hover-color: var(--btn-solid-ink);
  --vz-btn-active-bg: var(--btn-solid-hover); --vz-btn-active-border-color: var(--btn-solid-hover); --vz-btn-active-color: var(--btn-solid-ink);
  --vz-btn-disabled-bg: var(--btn-solid); --vz-btn-disabled-border-color: var(--btn-solid); --vz-btn-disabled-color: var(--btn-solid-ink);
  background: var(--btn-solid); border-color: var(--btn-solid); color: var(--btn-solid-ink);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--btn-solid-hover); border-color: var(--btn-solid-hover); color: var(--btn-solid-ink); }
.btn-light, .btn-soft-primary, .btn-outline-secondary, .btn-soft-secondary {
  --vz-btn-bg: var(--btn-plain); --vz-btn-border-color: var(--btn-line); --vz-btn-color: var(--btn-plain-ink);
  --vz-btn-hover-bg: var(--btn-plain-hover); --vz-btn-hover-border-color: var(--btn-line-hover); --vz-btn-hover-color: var(--btn-plain-ink);
  --vz-btn-active-bg: var(--btn-plain-hover); --vz-btn-active-border-color: var(--btn-line-hover); --vz-btn-active-color: var(--btn-plain-ink);
  --vz-btn-disabled-bg: var(--btn-plain); --vz-btn-disabled-border-color: var(--btn-line); --vz-btn-disabled-color: var(--btn-plain-ink);
  background: var(--btn-plain); border: 1px solid var(--btn-line); color: var(--btn-plain-ink);
}
.btn-light:hover, .btn-soft-primary:hover, .btn-outline-secondary:hover, .btn-soft-secondary:hover { background: var(--btn-plain-hover); border-color: var(--btn-line-hover); color: var(--btn-plain-ink); }
/* 切り替え（行／表紙、作品名で／作家名で）は、選んでいる方を塗る。切り替えた瞬間に色がにじまないよう、色の移り変わりはなし */
.btn-group .btn { transition: none; }
.btn-group .btn.active, .btn-group .btn[aria-pressed="true"] { background: var(--btn-solid); border-color: var(--btn-solid); color: var(--btn-solid-ink); }

/* ---- 近未来・ソリッドの色（2026-10-28 矢吹さんの指定） ----
   左帯は白黒どちらのテーマでも濃紺の地にして、選んでいる所だけを電気の青緑（--fx）で光らせる。
   画面の地とカードは、影をやめて細い線で区切る。 */
:root, :root[data-bs-theme="light"], :root[data-bs-theme="dark"] {
  --sb-bg: #0a1019; --sb-line: #1b2535; --sb-ink: #b6c1d2; --sb-ink-2: #8794a9; --sb-hi: #ffffff;
  --sb-active: rgba(34, 211, 238, .13); --sb-hover: rgba(255, 255, 255, .06);
  --fx: #22d3ee; --fx-2: #6d7bff;
  --fx-bar: linear-gradient(90deg, #22d3ee 0%, #6d7bff 100%);
}
:root, :root[data-bs-theme="light"] {
  --line-strong: #c4ccd8; --head-bg: #f5f7fa; --row-hover: #f3f7fc; --top-bg: #ffffff;
}
:root[data-paper="soft"]:not([data-bs-theme="dark"]) { --vz-body-bg: #eef1f5; }
:root[data-bs-theme="dark"] {
  --vz-body-bg: #0e141e; --vz-secondary-bg: #151d2a; --vz-border-color: #263142;
  --line-strong: #344155; --head-bg: #121a26; --row-hover: #1a2433; --top-bg: #121a26;
}
/* 左帯の中は、Velzon の変数を左帯の色に向ける */
.app-menu {
  --vz-vertical-menu-bg: var(--sb-bg); --vz-vertical-menu-border: var(--sb-line);
  --vz-vertical-menu-item-color: var(--sb-ink); --vz-vertical-menu-title-color: var(--sb-ink-2);
  --vz-border-color: var(--sb-line); --vz-secondary-bg: var(--sb-bg); --vz-secondary-color: var(--sb-ink-2);
  --vz-primary: var(--fx); --vz-primary-text-emphasis: var(--sb-hi); --vz-primary-rgb: 34, 211, 238;
  --vz-link-color: var(--fx); --vz-body-color: var(--sb-ink); --accent-ink: #04212a;
  --vz-input-bg: #111a27; --vz-input-border-custom: var(--sb-line); --vz-input-placeholder-color: var(--sb-ink-2);
  background: var(--sb-bg); border-right: 1px solid var(--sb-line);
}

/* 「編集」ボタンの藍（10/29 矢吹さんの指定：目立つ色で、この見た目に合う色）。Velzon の藍 #405189 を基にし、白黒とも文字と 4.5:1 以上 */
:root, :root[data-bs-theme="light"] { --btn-edit: #405189; --btn-edit-hover: #34437a; --btn-edit-ink: #ffffff; }
:root[data-bs-theme="dark"] { --btn-edit: #8e9cf0; --btn-edit-hover: #aab5f5; --btn-edit-ink: #0b1020; }