/* 全画面で共通の見た目。各画面の <style> の後ろで読む。
 * R2: 基本指定と同じ強さで上書きし、条件は :where() に入れる。
 * R3: 配置・文字寸法は変更せず、画面固有の指定を保つ。 */
:root {
  /* D7: 自作SVG。外部のアイコン集は使用しない。 */
  --icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
  --icon-doc-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 3 4 3 4 21 20 21 20 10 13 3 13 10 20 10'/%3E%3Cline x1='8' y1='15' x2='16' y2='15'/%3E%3Cline x1='12' y1='11' x2='12' y2='19'/%3E%3C/svg%3E");
  --icon-person-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='2 21 2 18 5 14 13 14 16 18 16 21'/%3E%3Cline x1='19' y1='7' x2='19' y2='15'/%3E%3Cline x1='15' y1='11' x2='23' y2='11'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='15' y1='15' x2='22' y2='22'/%3E%3C/svg%3E");
  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15 8 22 9 17 14 18 22 12 18 6 22 7 14 2 9 9 8'/%3E%3C/svg%3E");
  --icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='4 15 16 3 21 8 9 20 3 21'/%3E%3Cline x1='13' y1='6' x2='18' y2='11'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='4'/%3E%3Ccircle cx='18' cy='8' r='3'/%3E%3Cpolyline points='1 21 1 18 4 14 12 14 15 18 15 21'/%3E%3Cpolyline points='17 14 20 14 23 18 23 21'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 21 6 20 15 17 19 12 22 7 19 4 15 3 6'/%3E%3C/svg%3E");
  --icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='19'/%3E%3Crect x='10' y='16' width='4' height='6'/%3E%3Cline x1='9' y1='7' x2='10' y2='7'/%3E%3Cline x1='14' y1='7' x2='15' y2='7'/%3E%3Cline x1='9' y1='11' x2='10' y2='11'/%3E%3Cline x1='14' y1='11' x2='15' y2='11'/%3E%3C/svg%3E");
  --icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='2' x2='5' y2='22'/%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cline x1='19' y1='2' x2='19' y2='22'/%3E%3Crect x='3' y='6' width='4' height='4'/%3E%3Crect x='10' y='14' width='4' height='4'/%3E%3Crect x='17' y='7' width='4' height='4'/%3E%3C/svg%3E");
  --icon-doc-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 3 4 3 4 21 20 21 20 10 13 3 13 10 20 10'/%3E%3Cline x1='8' y1='14' x2='16' y2='14'/%3E%3Cline x1='8' y1='18' x2='16' y2='18'/%3E%3C/svg%3E");
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 18 6 15 6 9 8 5 12 3 16 5 18 9 18 15 20 18 4 18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3C/svg%3E");
  --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='10 3 3 3 3 21 10 21'/%3E%3Cline x1='9' y1='12' x2='22' y2='12'/%3E%3Cpolyline points='17 7 22 12 17 17'/%3E%3C/svg%3E");
  --icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='8' r='5'/%3E%3Cpolyline points='11 12 21 22 23 20 20 17 18 19'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 12 9 18 21 5'/%3E%3C/svg%3E");
  --icon-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14 3 21 3 21 21 14 21'/%3E%3Cline x1='2' y1='12' x2='16' y2='12'/%3E%3Cpolyline points='11 7 16 12 11 17'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16'/%3E%3Cpolyline points='2 5 12 13 22 5'/%3E%3C/svg%3E");
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='10' ry='6'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  --brand-blue-50:  #eef4ff;
  --brand-blue-100: #dbe7ff;
  --brand-blue-500: #0661e3;   /* 飾り（線・グラデーション）用 */
  --brand-blue-600: #0655d7;   /* 白文字 6.39 */
  --brand-blue-700: #093eaf;   /* 白文字 9.05 */
  --brand-green-50:  #e8f8f3;
  --brand-green-100: #c8f0e4;
  --brand-green-400: #15c8a2;  /* 飾り専用。文字にも文字の背景にも使わない（白文字 2.27） */
  --brand-green-700: #087f74;  /* ロゴの緑を暗くした色。白文字 4.89 */
  --brand-navy: #182d47;       /* ロゴの濃紺 */
  --brand-gradient: linear-gradient(135deg, var(--brand-blue-600) 0%, var(--brand-green-700) 100%);      /* 白い文字を載せるところ。中間の #076aa6 も 5.80 */
  --brand-gradient-line: linear-gradient(90deg, var(--brand-blue-500) 0%, var(--brand-green-400) 100%);  /* 線・飾り専用 */
  --control-line: #7f90aa;     /* 入力欄・副ボタンの枠。白に対し 3.24 */
  --focus-ring: 0 0 0 3px rgba(6, 85, 215, 0.22);
  --shadow-sm: 0 1px 2px rgba(24, 45, 71, 0.06);
  --shadow-md: 0 1px 2px rgba(24, 45, 71, 0.05), 0 8px 24px rgba(24, 45, 71, 0.07);
  --shadow-lg: 0 24px 60px rgba(24, 45, 71, 0.22);
  /* 既存の変数（値を上書きする） */
  --bg: #f4f7fc; --card: #ffffff; --text: #182d47; --sub: #5b6b82; --line: #d6e0ee;
  --accent: #0655d7; --accent-hover: #093eaf; --muted: #eef4ff;
}

body { font-family: "Yu Gothic UI", "Meiryo", sans-serif; color: var(--text); background: radial-gradient(ellipse at left top, rgba(6,85,215,.04), transparent 65%), radial-gradient(ellipse at right top, rgba(21,200,162,.06), transparent 65%), var(--bg); }
body[data-page="login"], body[data-page="reset-password"] { background: var(--brand-gradient); }
header { background-color: var(--card); background-image: var(--brand-gradient-line); background-size: 100% 3px; background-position: left bottom; background-repeat: no-repeat; box-shadow: var(--shadow-sm); }
.nav-link { transition: background-color .16s, color .16s, box-shadow .16s; }
.nav-link:hover { background: var(--brand-blue-50); color: var(--brand-blue-700); }
.nav-link.is-active { background: var(--brand-gradient); color: #fff; box-shadow: 0 3px 10px rgba(6,85,215,.18); }
.user-menu-trigger:hover, .nav-toggle:hover { background: var(--brand-blue-50); }
.user-menu-dropdown { border-radius: 12px; border-color: var(--line); box-shadow: var(--shadow-lg); }
.user-menu-item:hover { background: var(--brand-blue-50); }
.user-menu-logout { color: #b91c1c; }
h1, .page-title { color: var(--brand-navy); width: fit-content; max-width: 100%; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h1, .page-title { background-image: linear-gradient(90deg, var(--brand-blue-700), var(--brand-green-700)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}
.card-title, .modal-title { color: var(--brand-navy); }

/* D5: カード・表・ダイアログ（配置は各画面のまま）。 */
.card { border-radius: 16px; box-shadow: var(--shadow-md); }
.card:where(:not(.danger-zone)) { border-color: var(--line); background-color: var(--card); background-image: var(--brand-gradient-line); background-size: 100% 3px; background-position: left top; background-repeat: no-repeat; }
.table-wrap { border-radius: 12px; box-shadow: var(--shadow-sm); }
thead th, th { background: linear-gradient(180deg, var(--brand-blue-50), var(--brand-green-50)); color: var(--brand-navy); }
tbody tr.is-clickable { transition: background-color .16s; }
tbody tr.is-clickable:hover { background: var(--brand-blue-50); }
.modal { background: rgba(24,45,71,.45); backdrop-filter: blur(3px); }
.modal-card { border-radius: 18px; box-shadow: var(--shadow-lg); background-color: var(--card); background-image: var(--brand-gradient-line); background-size: 100% 3px; background-position: left top; background-repeat: no-repeat; }

/* D6: ボタン。条件は :where() に入れ、画面固有の変種を優先する。 */
.btn-primary, .button-primary, :where(body[data-page="index"], body[data-page="project-edit"], body[data-page="talent-edit"], body[data-page="talent-register"], body[data-page="login"], body[data-page="reset-password"]) button:where(:not([class])) { background-color: var(--accent); background-image: var(--brand-gradient); background-origin: border-box; background-size: 200% 100%; background-position: 0 0; color: #fff; box-shadow: var(--shadow-sm); }
.button-primary:hover, :where(body[data-page="index"], body[data-page="project-edit"], body[data-page="talent-edit"], body[data-page="talent-register"], body[data-page="login"], body[data-page="reset-password"]) button:where(:not([class])):hover { background-color: var(--accent); background-image: var(--brand-gradient); background-origin: border-box; background-size: 200% 100%; }
.btn-primary:not(:disabled):hover { background-color: var(--accent-hover); background-image: var(--brand-gradient); background-origin: border-box; background-size: 200% 100%; background-position: 100% 0; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button-primary:hover:where(:not(:disabled)) { background-color: var(--accent-hover); background-image: var(--brand-gradient); background-origin: border-box; background-size: 200% 100%; background-position: 100% 0; transform: translateY(-1px); box-shadow: var(--shadow-md); }
:where(body[data-page="index"], body[data-page="project-edit"], body[data-page="talent-edit"], body[data-page="talent-register"], body[data-page="login"], body[data-page="reset-password"]) button:where(:not([class])):hover:where(:not(:disabled)) { background-color: var(--accent-hover); background-image: var(--brand-gradient); background-origin: border-box; background-size: 200% 100%; background-position: 100% 0; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button-secondary:where(:not(.is-active)), .btn-secondary:where(:not(.is-active)), .btn-secondary-sm:where(:not(.is-active)), .modal-close { background: #fff; border-color: var(--control-line); }
.button-secondary:hover:where(:not(.is-active, :disabled)), .btn-secondary:hover:where(:not(.is-active, :disabled)), .btn-secondary-sm:hover:where(:not(.is-active, :disabled)), .modal-close:hover:where(:not(.is-active, :disabled)) { background: var(--brand-blue-50); border-color: var(--accent); }
.btn-danger, .btn-danger-sm { box-shadow: var(--shadow-sm); }
.btn-danger:not(:disabled):hover, .btn-danger-sm:hover:where(:not(:disabled)) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button-watch:hover:where(:not(:disabled)) { transform: translateY(-1px); }
.btn, .btn-primary, .btn-secondary, .btn-danger, .button-primary, .button-secondary, :where(body[data-page="index"], body[data-page="project-edit"], body[data-page="talent-edit"], body[data-page="talent-register"], body[data-page="login"], body[data-page="reset-password"]) button:where(:not([class])) { border-radius: 10px; }
.btn-sm, .btn-secondary-sm, .btn-danger-sm, .button-watch, .modal-close { border-radius: 8px; }
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-secondary-sm, .btn-danger-sm, .button-primary, .button-secondary, .button-watch, .modal-close, :where(body[data-page="index"], body[data-page="project-edit"], body[data-page="talent-edit"], body[data-page="talent-register"], body[data-page="login"], body[data-page="reset-password"]) button:where(:not([class])) { transition: background-color .16s, background-position .16s, border-color .16s, box-shadow .16s, transform .16s; }
.btn-primary:disabled, .button-primary:disabled, .btn-danger:disabled, .btn-danger-sm:disabled, :where(body[data-page="index"], body[data-page="project-edit"], body[data-page="talent-edit"], body[data-page="talent-register"], body[data-page="login"], body[data-page="reset-password"]) button:where(:not([class])):disabled { transform: none; box-shadow: none; }

/* チェックボックス・ラジオの枠とフォーカスはブラウザに任せる。 */
input:where(:not([type="checkbox"], [type="radio"])), select, textarea { border-color: var(--control-line); transition: border-color .16s, box-shadow .16s; }
:where(body[data-page="admin"], body[data-page="settings"]) .add-row input:where(:not([type="checkbox"], [type="radio"])),
:where(body[data-page="admin"]) .mgmt-month-row select,
:where(body[data-page="dashboard"]) .month-row select,
:where(body[data-page="partners"]) .field input:where(:not([type="checkbox"], [type="radio"])),
:where(body[data-page="partners"]) .field select,
:where(body[data-page="partners"]) .filter-input,
:where(body[data-page="settings"]) .signature-textarea,
:where(body[data-page="project-watch"], body[data-page="talent-watch"]) .memo-textarea,
:where(textarea).matching-mail-text { border-color: var(--control-line); }
input:where(:not([type="checkbox"], [type="radio"])):focus,
select:focus,
textarea:focus,
:where(body[data-page="admin"], body[data-page="settings"]) .add-row input:where(:not([type="checkbox"], [type="radio"])):focus,
:where(body[data-page="admin"]) .mgmt-month-row select:focus,
:where(body[data-page="dashboard"]) .month-row select:focus,
:where(body[data-page="partners"]) .field input:where(:not([type="checkbox"], [type="radio"])):focus,
:where(body[data-page="partners"]) .field select:focus,
:where(body[data-page="partners"]) .filter-input:focus,
:where(body[data-page="settings"]) .signature-textarea:focus,
:where(body[data-page="project-watch"], body[data-page="talent-watch"]) .memo-textarea:focus,
:where(textarea).matching-mail-text:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
input:where([type="checkbox"], [type="radio"]) { accent-color: var(--accent); }

/* バッジの意味を持つ色は残す。 */
.badge, .auto-badge, .me-badge, .delivery-badge, .memo-saved-badge, .badge-aggregated, .badge-not-aggregated, .badge-provisional, .demo-notice { border-radius: 999px; }
.demo-notice { background: #b45309; }
.toast { background: var(--brand-navy); box-shadow: var(--shadow-lg); }
:where(body:not([data-page="users"])) .info-note { background: linear-gradient(90deg, var(--brand-blue-50), var(--brand-green-50)); box-shadow: inset 3px 0 var(--brand-blue-600); }
.runtime-banner { background: linear-gradient(90deg, var(--brand-blue-50), var(--brand-green-50)); border-color: var(--line); }
.search-busy-overlay, .matching-busy-overlay { background: rgba(24,45,71,.45); backdrop-filter: blur(2px); }
.search-busy-card, .matching-busy-card { border-radius: 14px; box-shadow: var(--shadow-lg); }
.search-busy-card::before, .matching-busy-card::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 2px solid var(--brand-blue-100); border-top-color: var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: middle; animation: sams-spin .8s linear infinite; }
.spinner { border-top-color: var(--accent); }

/* D7: 対応表にある要素だけにアイコンを付ける。 */
@media (max-width: 768px) {
  .nav-link[href="/dashboard.html"]::before,
  .nav-link[href="/index.html"]::before,
  .nav-link[href="/talent-register.html"]::before,
  .nav-link[href="/search.html"]::before,
  .nav-link[href="/talent-search.html"]::before,
  .nav-link[href="/project-watch.html"]::before,
  .nav-link[href="/talent-watch.html"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
  .nav-link[href="/dashboard.html"]::before { --icon: var(--icon-grid); }
  .nav-link[href="/index.html"]::before { --icon: var(--icon-doc-plus); }
  .nav-link[href="/talent-register.html"]::before { --icon: var(--icon-person-plus); }
  .nav-link[href="/search.html"]::before { --icon: var(--icon-search); }
  .nav-link[href="/talent-search.html"]::before { --icon: var(--icon-search); }
  .nav-link[href="/project-watch.html"]::before { --icon: var(--icon-star); }
  .nav-link[href="/talent-watch.html"]::before { --icon: var(--icon-star); }
}
.user-menu-item[href="/users.html"]::before,
.user-menu-item[href="/admin.html"]::before,
.user-menu-item[href="/partners.html"]::before,
.user-menu-item[href="/settings.html"]::before,
.user-menu-item[href="/terms.html"]::before,
.user-menu-item#demo-mode-toggle::before,
.user-menu-logout::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.user-menu-item[href="/users.html"]::before { --icon: var(--icon-users); }
.user-menu-item[href="/admin.html"]::before { --icon: var(--icon-shield); }
.user-menu-item[href="/partners.html"]::before { --icon: var(--icon-building); }
.user-menu-item[href="/settings.html"]::before { --icon: var(--icon-sliders); }
.user-menu-item[href="/terms.html"]::before { --icon: var(--icon-doc-lines); }
.user-menu-item#demo-mode-toggle::before { --icon: var(--icon-eye); }
.user-menu-logout::before { --icon: var(--icon-logout); }
body[data-page="index"] :is(h1, .page-title)::before,
body[data-page="talent-register"] :is(h1, .page-title)::before,
body[data-page="search"] :is(h1, .page-title)::before,
body[data-page="talent-search"] :is(h1, .page-title)::before,
body[data-page="project-watch"] :is(h1, .page-title)::before,
body[data-page="talent-watch"] :is(h1, .page-title)::before,
body[data-page="project-edit"] :is(h1, .page-title)::before,
body[data-page="talent-edit"] :is(h1, .page-title)::before,
body[data-page="users"] :is(h1, .page-title)::before,
body[data-page="partners"] :is(h1, .page-title)::before,
body[data-page="settings"] :is(h1, .page-title)::before,
body[data-page="terms"] :is(h1, .page-title)::before,
body[data-page="announcements"] :is(h1, .page-title)::before,
body[data-page="login"] :is(h1, .page-title)::before,
body[data-page="reset-password"] :is(h1, .page-title)::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .4em; vertical-align: -0.15em; background: linear-gradient(90deg, var(--brand-blue-700), var(--brand-green-700)); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
body[data-page="index"] :is(h1, .page-title)::before { --icon: var(--icon-doc-plus); }
body[data-page="talent-register"] :is(h1, .page-title)::before { --icon: var(--icon-person-plus); }
body[data-page="search"] :is(h1, .page-title)::before { --icon: var(--icon-search); }
body[data-page="talent-search"] :is(h1, .page-title)::before { --icon: var(--icon-search); }
body[data-page="project-watch"] :is(h1, .page-title)::before { --icon: var(--icon-star); }
body[data-page="talent-watch"] :is(h1, .page-title)::before { --icon: var(--icon-star); }
body[data-page="project-edit"] :is(h1, .page-title)::before { --icon: var(--icon-pencil); }
body[data-page="talent-edit"] :is(h1, .page-title)::before { --icon: var(--icon-pencil); }
body[data-page="users"] :is(h1, .page-title)::before { --icon: var(--icon-users); }
body[data-page="partners"] :is(h1, .page-title)::before { --icon: var(--icon-building); }
body[data-page="settings"] :is(h1, .page-title)::before { --icon: var(--icon-sliders); }
body[data-page="terms"] :is(h1, .page-title)::before { --icon: var(--icon-doc-lines); }
body[data-page="announcements"] :is(h1, .page-title)::before { --icon: var(--icon-bell); }
body[data-page="login"] :is(h1, .page-title)::before { --icon: var(--icon-key); }
body[data-page="reset-password"] :is(h1, .page-title)::before { --icon: var(--icon-key); }
body[data-page="index"] button[type="submit"]::before,
body[data-page="talent-register"] button[type="submit"]::before,
body[data-page="project-edit"] button[type="submit"]::before,
body[data-page="talent-edit"] button[type="submit"]::before,
body[data-page="partners"] button[type="submit"]::before,
body[data-page="search"] button[type="submit"]::before,
body[data-page="talent-search"] button[type="submit"]::before,
body[data-page="login"] button[type="submit"]::before,
body[data-page="reset-password"] button[type="submit"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
body[data-page="index"] button[type="submit"]::before { --icon: var(--icon-check); }
body[data-page="talent-register"] button[type="submit"]::before { --icon: var(--icon-check); }
body[data-page="project-edit"] button[type="submit"]::before { --icon: var(--icon-check); }
body[data-page="talent-edit"] button[type="submit"]::before { --icon: var(--icon-check); }
body[data-page="partners"] button[type="submit"]::before { --icon: var(--icon-check); }
body[data-page="search"] button[type="submit"]::before { --icon: var(--icon-search); }
body[data-page="talent-search"] button[type="submit"]::before { --icon: var(--icon-search); }
body[data-page="login"] button[type="submit"]::before { --icon: var(--icon-login); }
body[data-page="reset-password"] button[type="submit"]::before { --icon: var(--icon-mail); }

/* D8: 開閉と読み込みの短い動き。終了後に transform を残さない。 */
@keyframes sams-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sams-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sams-drop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sams-spin { to { transform: rotate(360deg); } }
.modal.is-open { animation: sams-fade .18s ease-out; }
.modal.is-open .modal-card { animation: sams-pop .2s ease-out; }
.user-menu-dropdown.is-open { animation: sams-drop .16s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}