/* =====================================================
   人材プラットフォーム – 共通CSS
   デザイントークンは :root で一元管理。
   サービス名・配色を変える場合は :root の変数だけ編集。
   ===================================================== */

/* ---- デザイントークン ---- */
:root {
  /* ===== うちの共通デザイン：アクセント（このアプリの1色だけ差し替える） ===== */
  --accent:        #0f766e;   /* A案: ティール（人の成長・信頼）。B案は #1a4f8f 濃紺 */
  --accent-hover:  #0c5f57;
  --accent-strong: #0a4a44;
  --accent-weak:   #e6f2f0;   /* 淡いアクセント面：アクティブ/バッジ背景 */
  --accent-tint:   #f3f8f7;   /* 極薄：行 hover */
  --accent-ink:    #ffffff;
  --accent-ring:   rgba(15,118,110,.32);  /* focus リング（アクセント由来） */

  /* Brand colors（アクセントへ集約：既存クラス名はそのまま使える） */
  --color-primary:        var(--accent);
  --color-primary-hover:  var(--accent-hover);
  --color-primary-light:  var(--accent-weak);
  --color-primary-dark:   var(--accent-strong);
  --color-accent:         var(--accent);

  /* Neutral */
  --color-bg:             #f6f7f9;   /* ページ背景（コンテンツ側） */
  --color-surface:        #ffffff;   /* カード背景 */
  --color-border:         #e4e8ef;   /* ヘアライン（1px 罫線が主役） */
  --color-border-strong:  #d4dae3;
  --color-line-2:         #eef1f6;   /* さらに淡い罫線（行間） */
  --color-text:           #17202e;   /* インク（わずかに寒色寄り） */
  --color-text-muted:     #64707f;

  /* Sidebar */
  --sidebar-w:            248px;
  --sidebar-bg:           #ffffff;
  --sidebar-border:       #ebedf0;
  --topbar-h:             64px;

  /* Semantic */
  --color-success-bg:     #d1fae5;
  --color-success-text:   #065f46;
  --color-warning-bg:     #fef3c7;
  --color-warning-text:   #92400e;
  --color-danger-bg:      #fee2e2;
  --color-danger-text:    #991b1b;
  --color-info-bg:        #dbeafe;
  --color-info-text:      #1e3a8a;
  --color-neutral-bg:     #e5e7eb;
  --color-neutral-text:   #374151;

  /* Typography */
  --font-sans: -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-base:   1rem;          /* 16px */
  --font-size-sm:     0.875rem;
  --font-size-xs:     0.75rem;
  --font-size-lg:     1.125rem;
  --font-size-h1:     1.5rem;
  --font-size-h2:     1.15rem;
  --line-height:      1.65;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill: 999px;   /* 円（アバター等）専用。バッジ/タグは radius-sm(4px) */

  /* Shadow */
  /* A群＝面に影を使わない。影はオーバーレイ（モーダル/ドロップダウン）だけ */
  --shadow-card: none;
  --shadow-soft: none;
  --shadow-overlay: 0 20px 48px -16px rgba(23,32,46,.22);
  --shadow-pop:  0 20px 48px -16px rgba(23,32,46,.22);
  --ring-focus:  0 0 0 3px var(--accent-ring);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;   /* 数字はタブラー（桁揃え） */
}
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
.ic { width: 20px; height: 20px; flex-shrink: 0; }

/* ===================================================
   アプリシェル（左サイドバー＋上部バー）
   =================================================== */
.layout { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-decoration: none;
  color: var(--color-text);
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.brand-name { font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; }

.sidebar-nav { flex: 1; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: #44505f;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: background .12s, color .12s;
}
.nav-item .ic { color: #98a2b3; transition: color .12s; }
.nav-item:hover { background: #f4f6f9; color: var(--color-text); }
.nav-item:hover .ic { color: #66728a; }
.nav-item.active { background: var(--color-primary-light); color: var(--color-primary-hover); }
.nav-item.active .ic { color: var(--color-primary); }
.nav-switch { color: var(--color-primary); }
.nav-logout { color: #b4434a; }
.nav-logout:hover { background: #fdecec; color: #9b2c33; }

.sidebar-foot { padding: var(--sp-3); border-top: 1px solid var(--sidebar-border); }
.user-chip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary-hover);
  display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
.user-meta { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-weight: 700; font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-org { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Main column + Topbar ---- */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.org-badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}
.org-badge-company { background: var(--color-primary-light); color: var(--color-primary-hover); }
.org-badge-agency  { background: #e9f7ef; color: #096b3a; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.topbar-bell, .topbar-gear {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  color: #5b667a;
}
.topbar-bell:hover, .topbar-gear:hover { background: #f1f3f7; color: var(--color-text); }
.topbar-bell .nav-badge { position: absolute; top: 4px; right: 3px; }

/* ハンバーガー（モバイルのみ表示） */
.nav-burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; border-radius: var(--radius-md); }
.nav-burger span { width: 20px; height: 2px; background: #5b667a; border-radius: 2px; }
.nav-scrim { display: none; }

/* ---- Main content area ---- */
main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

/* ---- 認証画面（サイドバー無し・中央寄せ） ---- */
.no-sidebar { background: var(--color-bg); }
.no-sidebar main { max-width: 460px; padding-top: var(--sp-8); }
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 1.2rem; color: var(--color-text);
  margin-bottom: var(--sp-5);
}
.auth-brand::before {
  content: "人";
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff; display: grid; place-items: center; font-size: 17px;
}
.no-sidebar .card { box-shadow: var(--shadow-soft); }

/* ---- Card ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.card-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--color-text);
}

/* ---- Typography ---- */
h1 { font-size: var(--font-size-h1); margin: 0 0 var(--sp-3); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: var(--font-size-h2); margin: 0 0 var(--sp-2); font-weight: 700; }
p  { margin: 0 0 var(--sp-3); }
.muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.pre-wrap { white-space: pre-wrap; }

/* ---- Buttons ---- */
.btn, button[type="submit"], button:not([class]), input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px var(--sp-5);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  transition: background .15s, border-color .15s, transform .04s;
  min-height: 44px;           /* タップしやすいサイズ */
}
.btn:hover, button[type="submit"]:hover, button:not([class]):hover, input[type="submit"]:hover {
  background: var(--color-primary-hover);
  color: #fff;
}
.btn:active, button[type="submit"]:active, input[type="submit"]:active { transform: translateY(1px); }
.btn-ghost {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border-strong);
}
.btn-ghost:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
  border-color: var(--color-primary-light);
}
.btn-sub {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
  border: none;
}
.btn-sub:hover {
  background: #d1d5db;
  color: var(--color-neutral-text);
}
.btn-danger {
  background: #dc2626;
  color: #fff;
}
.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}
.btn-sm {
  font-size: var(--font-size-sm);
  padding: 6px var(--sp-3);
  min-height: 36px;
}
/* トグルボタン（公開停止/再公開）は btn-sm + btn-sub or btn で使い分け */

/* ---- Forms ---- */
label {
  display: block;
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s;
  min-height: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring-focus);
}
textarea { resize: vertical; }
.form-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.form-row > div { flex: 1; min-width: 140px; }
.form-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--sp-5);
}
.form-error {
  color: #dc2626;
  font-size: var(--font-size-xs);
  margin: var(--sp-1) 0 0;
}
.form-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin: var(--sp-1) 0 0;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-1);
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: unset;
  flex-shrink: 0;
}
.checkbox-row label {
  margin: 0;
  font-weight: 600;
}

/* フォーム内の検索バーレイアウト */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
}
.search-bar > div { display: flex; flex-direction: column; }
.search-bar input, .search-bar select { width: auto; }
.search-bar input[type="text"]   { min-width: 150px; }
.search-bar input[type="number"] { width: 90px; }

/* ---- Tables ---- */
/* 一覧表は最小幅を持たせ、狭い画面では「表だけ横スクロール」にする
   （ページ自体は横スクロールさせない＝桁潰れ・文字の縦積みを防ぐ） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; }
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 11px var(--sp-3);
  border-bottom: 1px solid var(--color-line-2);
  font-size: var(--font-size-sm);
  vertical-align: middle;
}
th {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  background: transparent;
  border-bottom: 1px solid var(--color-border-strong);
}
th.narrow { width: 120px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--accent-tint); }

/* ---- Status badges / Pills ---- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;   /* 状態色に同系ボーダーを重ねられるように */
}
/* 組織ステータス */
.badge-pending  { background: var(--color-warning-bg);  color: var(--color-warning-text); }
.badge-approved { background: var(--color-success-bg);  color: var(--color-success-text); }
.badge-suspended{ background: var(--color-neutral-bg);  color: var(--color-neutral-text); }

/* 選考ステータス */
.badge-offer    { background: #d1fae5; color: #065f46; }   /* 内定 */
.badge-joined   { background: #a7f3d0; color: #064e3b; }   /* 入社 */
.badge-reject   { background: #fee2e2; color: #991b1b; }   /* 見送り */
.badge-withdraw { background: #e5e7eb; color: #374151; }   /* 辞退 */
.badge-progress { background: var(--color-info-bg);    color: var(--color-info-text); }   /* 進行中 */

/* 公開状態 */
.badge-published   { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-unpublished { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-open        { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-closed      { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

/* ---- Flash messages ---- */
.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.flash.error   { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.flash.success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash.info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.flash.warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* ---- Stars (matching score) ---- */
.stars {
  font-size: 1.1rem;
  color: #d97706;
  line-height: 1;
}
.score-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ---- Utility ---- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-3); }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.back-link {
  display: inline-block;
  margin-top: var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.back-link:hover { color: var(--color-primary); }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.empty-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--sp-4) 0;
}
.detail-table th {
  width: 130px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.resume-box {
  white-space: pre-wrap;
  background: #f8f9fb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* ---- Dashboard grid ---- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.dash-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  transition: box-shadow .15s, transform .08s, border-color .15s;
}
.dash-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}
.dash-card { display: flex; flex-direction: column; }
.dash-card h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}
.dash-card .btn-row { margin-top: auto; }
.dash-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: grid; place-items: center;
  margin-bottom: var(--sp-3);
}
.dash-ico .ic { width: 22px; height: 22px; }

/* ページ見出し（カード外） */
.page-head { margin: var(--sp-1) 0 var(--sp-5); }
.page-head h1 { margin-bottom: 4px; }

/* ---- Candidate selector (matching pages) ---- */
.selector-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.selector-row select {
  flex: 1;
  min-width: 200px;
}

/* ---- Inline radio/checkbox group ---- */
.row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.row-inline label {
  display: inline;
  font-weight: 400;
  margin: 0;
}

/* ---- 候補者フォームセクション ---- */
.form-section {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
}
.form-section:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.form-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0 0 var(--sp-3);
  letter-spacing: 0.02em;
}
.required {
  color: var(--color-danger, #c0392b);
  margin-left: 2px;
}

/* ---- 求人票（画面表示） ---- */
.sheet-section-title {
  position: relative;
  padding-left: 12px;
  margin: 0 0 var(--sp-2);
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-text);
}
.sheet-section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 4px;
  border-radius: 2px;
  background: var(--color-primary);
}
.sheet-table th {
  width: 150px;
  vertical-align: top;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-size-xs);
}
.sheet-table td { vertical-align: top; line-height: 1.6; }

/* ---- チェックピル（PDF項目選択など） ---- */
.check-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.check-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 7px var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}
.check-pill:has(input:checked) {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-primary-hover);
}
.check-pill input { width: 16px; height: 16px; min-height: unset; margin: 0; }

/* 項目ピッカー（1項目ずつ選択） */
.pick-group { padding: var(--sp-3) 0; border-top: 1px solid var(--color-border); }
.pick-group:first-of-type { border-top: none; padding-top: 0; }
.pick-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.link-btn {
  background: none; border: none; box-shadow: none;
  color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 600;
  cursor: pointer; min-height: auto; padding: 2px 4px;
}
.link-btn:hover { background: none; box-shadow: none; color: var(--color-primary-hover); text-decoration: underline; }

/* ---- お知らせベル（ヘッダー） ---- */
.nav-bell { position: relative; }
.nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* ---- お知らせ一覧 ---- */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid #eef0f3;
}
.notif-item:last-child { border-bottom: none; }
.notif-unread { background: #f5f8ff; border-radius: var(--radius-md); }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; color: var(--color-text); }
.notif-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.notif-body { font-size: var(--font-size-sm); color: var(--color-text); margin-top: 2px; }
.notif-time { font-size: var(--font-size-xs); margin-top: 2px; }

/* ---- メッセージ（チャット） ---- */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 460px;
  overflow-y: auto;
  padding: var(--sp-2) 0;
}
.chat-row { display: flex; }
.chat-row-mine { justify-content: flex-end; }
.chat-row-other { justify-content: flex-start; }
.chat-bubble {
  max-width: 80%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.chat-bubble-other { background: #f4f6f9; border-bottom-left-radius: var(--radius-sm); }
.chat-bubble-mine {
  background: var(--color-primary-light);
  border-color: #b9d2f2;
  border-bottom-right-radius: var(--radius-sm);
}
.chat-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: 4px; }
.chat-org {
  display: inline-block;
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  margin: 0 4px;
}
.chat-time { margin-left: 2px; }
.chat-text { font-size: var(--font-size-sm); line-height: 1.6; }
.chat-form textarea { width: 100%; }

/* ---- メッセージ未読バッジ（ボタン内） ---- */
.msg-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 2px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-pill);
}
.btn-ghost .msg-badge { background: #ef4444; color: #fff; }

/* ---- 専用チャット画面（メッセンジャー風） ---- */
.chat-context { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.chat-context-main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.chat-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary-hover);
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.chat-context-name { font-weight: 700; }
.chat-context-type {
  margin-left: 6px; font-size: var(--font-size-xs); font-weight: 600;
  background: var(--color-neutral-bg); color: var(--color-neutral-text);
  border-radius: var(--radius-sm); padding: 1px 6px;
}
.chat-context-sub { margin-top: 2px; }
.chat-context-side { display: flex; align-items: center; gap: var(--sp-2); }

.chat-thread-card { padding: 0; overflow: hidden; }
.chat-thread {
  max-height: min(58vh, 560px);
  min-height: 220px;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.chat-composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--color-border);
  background: #fbfcfe;
}
.chat-composer-main { display: flex; gap: var(--sp-2); align-items: flex-end; }
.chat-composer textarea { flex: 1; resize: vertical; min-height: 44px; }
.chat-attach {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: #fff; cursor: pointer; font-size: 1.1rem;
}
.chat-attach:hover { background: var(--color-primary-light); }
.chat-attach input[type="file"] { display: none; }
.chat-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.chat-filename { font-size: var(--font-size-xs); }
.chat-composer .btn { white-space: nowrap; margin-left: auto; }
.chat-file {
  display: inline-block; margin-top: 4px;
  font-size: var(--font-size-sm); font-weight: 600;
  background: #fff; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 4px 10px; text-decoration: none;
}
.chat-file:hover { background: var(--color-primary-light); }

/* 選考ID・次回面接 */
.sub-id {
  font-size: var(--font-size-xs); font-weight: 600;
  color: var(--color-text-muted); background: var(--color-neutral-bg);
  border-radius: var(--radius-sm); padding: 2px 8px; margin-left: var(--sp-2);
  vertical-align: middle;
}
.next-interview { font-weight: 700; font-size: var(--font-size-sm); }
.interview-form { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.interview-form input[type="date"] { width: auto; min-height: 36px; }
.inline-label { display: inline; margin: 0; font-weight: 600; font-size: var(--font-size-sm); }

/* やさしいエラーページ */
.error-page {
  max-width: 520px;
  margin: var(--sp-8) auto;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8) var(--sp-6);
}
.error-code {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-4);
  letter-spacing: .02em;
}
.error-message { line-height: 1.8; margin-bottom: var(--sp-5); }
.error-actions { justify-content: center; }

/* 社内メモ・ラベル */
.note-card { background: #fffdf7; border-color: #f0e6c8; }
.note-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.note-label-col { flex: 0 0 180px; }
.note-memo-col { flex: 1; min-width: 220px; }
.note-label-col select, .note-memo-col textarea { width: 100%; }

/* ---- 選考詳細 2カラム（左=情報 / 右=チャット） ---- */
.two-pane {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-5);
}
.pane-right { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.info-card { padding: 0; overflow: hidden; }

/* 現在ステータス行 */
.status-line { display: flex; align-items: center; gap: var(--sp-3); }
.status-line-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); }

/* タブ（CSSのみ・JS不要） */
.tabs { display: block; }
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tab-label {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-label:hover { color: var(--color-text); }
#tab-cand:checked ~ label[for="tab-cand"],
#tab-job:checked ~ label[for="tab-job"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.tab-panels { border-top: 1px solid var(--color-border); padding: var(--sp-5) var(--sp-6); }
.tab-panel { display: none; }
#tab-cand:checked ~ .tab-panels .panel-cand,
#tab-job:checked ~ .tab-panels .panel-job { display: block; }
.info-actions { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }

/* 情報ブロック（候補者/求人） */
.info-block { margin-bottom: var(--sp-5); }
.info-block:last-child { margin-bottom: 0; }
.info-block-title {
  position: relative;
  padding-left: 11px;
  margin-bottom: var(--sp-2);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}
.info-block-title::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--color-primary);
}
.info-table th { width: 132px; vertical-align: top; text-transform: none; letter-spacing: 0; font-size: var(--font-size-xs); }
.info-table td { vertical-align: top; }
.file-link { font-weight: 600; }

/* チャットカード（右ペイン） */
.chat-card { padding: 0; display: flex; flex-direction: column; }
.chat-card-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  background: #fbfcfe;
}
.chat-card .chat-thread { max-height: min(60vh, 600px); }

/* チャット内の日付区切り＋アバター */
.chat-daydiv { text-align: center; margin: var(--sp-2) 0; }
.chat-daydiv span {
  display: inline-block;
  background: var(--color-neutral-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
}
.chat-row-other { align-items: flex-end; gap: var(--sp-2); }
.chat-bubble-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e9f7ef; color: #096b3a;
  display: grid; place-items: center; font-weight: 700; font-size: var(--font-size-sm);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .two-pane { grid-template-columns: 1fr; }
  .pane-right { position: static; }
}

/* ---- 進捗ステッパー ---- */
.stepper {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}
.step {
  flex: 1 0 auto;
  min-width: 64px;
  text-align: center;
  position: relative;
}
.step::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.step:first-child::before { display: none; }
.step-dot {
  position: relative;
  z-index: 1;
  width: 26px; height: 26px;
  margin: 0 auto var(--sp-1);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 22px;
}
.step-label { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }
.step-done .step-dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.step-done::before { background: var(--color-primary); }
.step-current .step-dot {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.step-current .step-label { color: var(--color-primary); font-weight: 700; }
.step-current::before { background: var(--color-primary); }

/* ---- 選考ボード（カンバン） ---- */
.board {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.board-col {
  flex: 0 0 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  min-height: 80px;
}
.board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border-strong);
}
.board-count {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
  padding: 0 8px;
}
.board-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s, background .15s;
}
.board-card:hover { border-color: var(--color-border-strong); background: var(--accent-tint); color: var(--color-text); }
.board-card-name { font-weight: 700; font-size: var(--font-size-sm); }
.board-card-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.board-card-job { font-size: var(--font-size-xs); color: var(--color-primary); margin-top: 2px; }
.board-empty { color: var(--color-border); font-size: var(--font-size-sm); text-align: center; padding: var(--sp-2) 0; }

/* ---- Responsive ---- */
/* タブレット以下：サイドバーをオフキャンバスのドロワーにする */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-pop);
  }
  .nav-toggle-cb:checked ~ .sidebar { transform: translateX(0); }
  .nav-toggle-cb:checked ~ .nav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 50;
    background: rgba(16,24,40,.45);
  }
  .nav-burger { display: flex; }
  main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
}

@media (max-width: 600px) {
  main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .topbar { padding: 0 var(--sp-3); }
  .card { padding: var(--sp-4); }
  .dash-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.25rem; }
  th, td { padding: var(--sp-2); }
  .form-row { flex-direction: column; }
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar input, .search-bar select { width: 100%; }
  .chat-bubble { max-width: 90%; }
  .board-col { flex-basis: 78%; }
  .org-badge { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- 詳細な絞り込み（折りたたみ / <details>） ---- */
.filter-advanced { margin-top: var(--sp-3); }
.filter-advanced > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  user-select: none;
  width: max-content;
  list-style: none;
}
.filter-advanced > summary::-webkit-details-marker { display: none; }
.filter-advanced > summary::before { content: "▸ "; }
.filter-advanced[open] > summary::before { content: "▾ "; }
.filter-advanced > summary:hover { color: var(--color-text); }
.filter-advanced[open] > summary { margin-bottom: var(--sp-2); }
.range-row { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ===== うちの共通デザイン：数値・状態・フォーカス（型と質の共通部品） ===== */
/* 数値セルは右揃え＋タブラー（桁が縦に揃う） */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
/* 件数などのメタ数値を mono 小ラベルで（記名性） */
.count-label { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* disabled（不透明50%・操作不可） */
.btn:disabled, button:disabled,
input[type="submit"]:disabled, button[type="submit"]:disabled {
  opacity: .5; cursor: not-allowed;
}
/* キーボード操作時だけ 2px アクセントリング（マウスクリックでは出さない） */
a:focus-visible, button:focus-visible, .btn:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* 入力はキーボード/マウス問わずリングを出す（既存の :focus を踏襲） */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}