/* =========================================
   採用ダッシュボード 専用スタイル
   （common.css / dashboard.css の上に乗せる）
   ========================================= */

/* ---------- データソースバッジ ---------- */
.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card-alt);
  border: 1px solid var(--border);
  color: var(--text-light);
}
.src-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.src-badge--live .src-badge__dot { background: var(--accent); }
.src-badge--loading .src-badge__dot { background: var(--muted); animation: pulse 1.1s ease-in-out infinite; }
.src-badge--error .src-badge__dot { background: var(--danger); }
/* クリックでスプレッドシートを開けるリンク状態 */
.src-badge--link { transition: background .15s, border-color .15s, color .15s; }
.src-badge--link:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.src-badge--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.src-badge__ext { display: inline-flex; }
.src-badge__ext svg { width: 11px; height: 11px; opacity: .85; }

/* ---------- タスクカードの期限バッジ（目立たせる） ---------- */
.pcard__due { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 6px; background: var(--card-alt); color: var(--text-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard__due--soon { background: var(--warn-light); color: #9a7414; }
.pcard__due--over { background: var(--danger-light); color: var(--danger); }

/* ---------- 選考・候補者: タブ＋結果チップを1行に ---------- */
.people-head { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.people-head .seg-tabs { margin-bottom: 0; }
.people-head .result-chips { margin-bottom: 0; flex: 1 1 auto; }

/* ---------- ヘッダー崩れ防止（フィルター拡大に伴う調整・採用ダッシュボードのみ） ---------- */
/* 画面幅が足りないとフィルター群がタイトルの下へ折り返す。その行間が row-gap */
.topbar { flex-wrap: wrap; row-gap: 14px; }
.topbar__title { white-space: nowrap; min-width: 0; }

/* ---------- サイドバー見出しとトップバーの下線を揃える（PC表示・採用のみ） ---------- */
/* --recruit-head-h = 上下パディング14px + フィルター（ラベル＋間隔＋セレクト≒66px）。
   box-sizing:border-box なので 1行に収まる時はこの高さちょうどでサイドバー見出しと下線が揃い、
   折り返して2行になった時はパディング分の余白がセレクトの下に残る（0詰まり防止）。 */
:root { --recruit-head-h: 68px; }
@media (min-width: 769px) {
  .sidebar { padding-top: 0; }
  .sidebar__brand { height: var(--recruit-head-h); padding-top: 0; padding-bottom: 0; margin-bottom: 14px; }
  .topbar { min-height: var(--recruit-head-h); padding-top: 14px; padding-bottom: 14px; }
}

/* ブランドロゴ（favicon と同じまんまるロゴを左上に表示） */
.sidebar__brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ---------- ヘッダーのフィルター（採用ダッシュボードのみ上書き） ----------
   2026-07-27: ラベルを上ではなく左に置く横並びに変更。高さが1行ぶん（約66→40px）になり、
   タイトルとフィルタが折り返さず1行に収まる。 */
.topbar__filters { gap: 16px; }
.topbar__filter { flex-direction: row; align-items: center; gap: 8px; }
.topbar__filter-label { font-size: 13px; color: var(--text-light); letter-spacing: .5px; white-space: nowrap; }
.topbar__filter-select {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 34px 8px 12px;
  min-width: 138px;
  border: 1.5px solid var(--border-strong);
  border-radius: 9px;
  background-position: right 12px center;
}
.topbar__filter-select:hover { border-color: var(--accent); }
.topbar__filter-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 768px) {
  .topbar__filter-select { font-size: 14px; min-width: 124px; padding: 8px 32px 8px 12px; }
}

/* ---------- ファネル（横バー） ---------- */
.funnel { display: flex; flex-direction: column; gap: 12px; }

.funnel__row {
  display: grid;
  grid-template-columns: 92px 1fr 96px;
  align-items: center;
  gap: 12px;
}
.funnel__label { font-size: 14px; font-weight: 600; color: var(--text); }
.funnel__miss { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.funnel__track {
  position: relative;
  background: var(--card-alt);
  border-radius: 8px;
  height: 40px;
  overflow: hidden;
}
.funnel__bar {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  min-width: 36px;
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
  white-space: nowrap;
}
/* 3段階の色（早→中→後） */
.funnel__bar--s0 { background: var(--chart-6); }
.funnel__bar--s1 { background: var(--chart-6); }
.funnel__bar--s2 { background: var(--chart-2); }
.funnel__bar--s3 { background: var(--accent); }
.funnel__bar--s4 { background: var(--accent); }
.funnel__bar--s5 { background: var(--accent-dark); }

.funnel__rate {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
.funnel__rate.is-low { color: var(--danger); }
.funnel__rate.is-mid { color: var(--warn); }
.funnel__rate.is-high { color: var(--accent); }

/* ---------- チャネル別ミニファネル一覧 ---------- */
.minifunnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.minifunnel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card);
}
.minifunnel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.minifunnel__name { font-size: 14px; font-weight: 700; color: var(--text); }
.minifunnel__hire { font-size: 13px; color: var(--text-light); }
.minifunnel__hire strong { color: var(--accent-dark); font-size: 16px; }
.minibars { display: flex; flex-direction: column; gap: 4px; }
.minibar {
  display: grid;
  grid-template-columns: 56px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-light);
}
.minibar__track { background: var(--card-alt); border-radius: 5px; height: 14px; overflow: hidden; }
.minibar__fill { height: 100%; border-radius: 5px; background: var(--chart-2); }
.minibar__fill--end { background: var(--accent); }
.minibar__val { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- スコアカード横フロー（応募→通過率→書類通過→通過率→入社）---------- */
.kpi-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.kpi-flow .kpi { flex: 1 1 180px; }
.kpi-flow .kpi__value { font-size: 28px; }
.kpi-flow .kpi__unit { font-size: 13px; }
.kpi-flow__conn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 14px; min-width: 76px; }
.kpi-flow__conn-arrow { font-size: 19px; color: #cad2dc; line-height: 1; }
.kpi-flow__conn-rate { font-size: 22px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi-flow__conn-label { font-size: 12px; color: var(--muted); margin-top: 1px; }
@media (max-width: 720px) {
  .kpi-flow__conn { width: 100%; flex-direction: row; gap: 6px; padding: 4px 0; min-width: 0; }
  .kpi-flow__conn-arrow { transform: rotate(90deg); }
}

/* ---------- ファネル分析（横型・淡い色ヘッダー＋数値下に横バー、矢印列にCVR）---------- */
.ft { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ft th, .ft td { padding: 9px 8px; text-align: center; white-space: nowrap; }
.ft__ch-h, .ft__ch { min-width: 132px; }
.ft__stage { min-width: 66px; }
.ft__ch-h { text-align: left; color: var(--text-light); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); padding-left: 10px; }
.ft__stage { font-weight: 700; font-size: 13px; border-radius: 7px 7px 0 0; padding: 8px 10px; color: var(--text-light); letter-spacing: .02em; }
.ft__stage--s0 { background: #eef1f5; }
.ft__stage--s1 { background: #e8edf3; }
.ft__stage--s2 { background: #e3eaf2; }
.ft__stage--s3 { background: #dde8f0; }
.ft__stage--s4 { background: var(--accent-light); color: var(--accent-dark); }
.ft__stage--s5 { background: var(--accent-light); color: var(--accent-dark); }
.ft__arrow-h { width: 52px; border-bottom: 1px solid var(--border); }
.ft__ch { text-align: left; font-weight: 600; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--border); padding-left: 10px; }
.ft__num { border-bottom: 1px solid var(--border); min-width: 64px; }
.ft__val { display: block; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px; color: var(--text); line-height: 1.1; }
.ft__num--zero .ft__val { color: var(--muted); font-weight: 500; }
/* 数値の下の横バー（応募=100%基準）*/
.ft__bar { display: block; height: 4px; margin-top: 6px; border-radius: 3px; background: #eef1f4; overflow: hidden; }
.ft__bar-fill { display: block; height: 100%; border-radius: 3px; }
.ft__bar-fill--s0 { background: #b6c0cd; }
.ft__bar-fill--s1 { background: #9fb0c2; }
.ft__bar-fill--s2 { background: #88a4bb; }
.ft__bar-fill--s3 { background: #6f93b0; }
.ft__bar-fill--s4 { background: var(--accent); }
.ft__bar-fill--s5 { background: var(--accent-dark); }
.ft__arrow { width: 52px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ft__cvr { display: block; font-size: 12px; font-weight: 700; color: #9aa3ad; font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: .01em; }
.ft__cvr--over { color: #b07a20; cursor: help; }
.ft__cvr--na { color: var(--muted); }
.ft tbody tr:hover td { background: #fafbfc; }
.ft__total td { font-weight: 800; border-top: 2px solid var(--border); background: var(--card-alt); border-bottom: none; }
.ft__total .ft__val { font-weight: 800; }
.cvr-good { color: var(--accent) !important; font-weight: 700; }
.cvr-low { color: var(--danger) !important; font-weight: 800; }

/* ---------- ファネルページ：グラフ2カラム ---------- */
.grid-funnel { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.15fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .grid-funnel { grid-template-columns: 1fr; } }
.sec-hint { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ---------- 全体ファネル（ビジュアル） ---------- */
.vfunnel { display: flex; flex-direction: column; padding: 6px 0 2px; }
.vfunnel__row { display: grid; grid-template-columns: 84px 1fr 92px; align-items: center; gap: 14px; }
.vfunnel__label { font-size: 14px; font-weight: 700; color: var(--text); text-align: right; letter-spacing: .01em; }
.vfunnel__barzone { display: flex; justify-content: center; }
.vfunnel__bar {
  height: 48px; min-width: 54px; border-radius: 11px; padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 3px 8px rgba(31,43,58,.16), inset 0 1px 0 rgba(255,255,255,.16);
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.vfunnel__count { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; text-shadow: 0 1px 1px rgba(20,30,45,.18); }
.vfunnel__bar--s0 { background: linear-gradient(135deg,#aab9c9,#94a7bb); }
.vfunnel__bar--s1 { background: linear-gradient(135deg,#93aabe,#7a99b1); }
.vfunnel__bar--s2 { background: linear-gradient(135deg,#7099ad,#5e88a3); }
.vfunnel__bar--s3 { background: linear-gradient(135deg,#57968d,#45857c); }
.vfunnel__bar--s4 { background: linear-gradient(135deg,#489278,#3d8b6e); }
.vfunnel__bar--s5 { background: linear-gradient(135deg,#367c60,#2d6b53); }
.vfunnel__pct { display: flex; flex-direction: column; line-height: 1.12; }
.vfunnel__pct-main { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vfunnel__pct-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }

/* 段階間コネクタ：中央の「通過率チップ」＋背骨ライン */
.vfunnel__conn { display: grid; grid-template-columns: 84px 1fr 92px; align-items: center; gap: 14px; height: 34px; }
.vfunnel__flow { grid-column: 2; justify-self: center; position: relative; display: inline-flex; }
.vfunnel__flow::before {
  content: ''; position: absolute; left: 50%; top: -11px; bottom: -11px; width: 2px;
  transform: translateX(-50%); background: var(--border); z-index: 0;
}
.vfunnel__chip {
  position: relative; z-index: 1;
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 12px; box-shadow: 0 1px 2px rgba(31,43,58,.05);
}
.vfunnel__chip-rate { font-size: 13px; font-weight: 800; color: var(--text-light); font-variant-numeric: tabular-nums; }
.vfunnel__chip-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.vfunnel__chip.is-good .vfunnel__chip-rate { color: var(--accent); }
.vfunnel__chip.is-low .vfunnel__chip-rate { color: var(--danger); }
/* ボトルネック段階（前段比が最も低い）の強調 */
.vfunnel__conn--bn .vfunnel__chip {
  background: var(--danger-light); border-color: rgba(212,100,92,.35);
  box-shadow: 0 2px 6px rgba(212,100,92,.18);
}
.vfunnel__conn--bn .vfunnel__chip-rate { color: var(--danger); }
.vfunnel__conn--bn .vfunnel__chip-label { color: #b4655d; }
.vfunnel__conn--bn .vfunnel__flow::before { background: rgba(212,100,92,.4); }
.vfunnel__conn-flag {
  grid-column: 3; justify-self: start; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--danger);
}

/* 全体ファネル上部のボトルネック（落ち着いたスタットカード表記） */
.ret-bn {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(212,160,60,.07), rgba(212,160,60,.015) 40%, var(--card) 70%);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 20px; margin-bottom: 18px;
}
.ret-bn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warn); }
.ret-bn__label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; white-space: nowrap;
  color: #a8762a; background: rgba(212, 160, 60, .16); border-radius: 999px; padding: 4px 12px;
}
.ret-bn__flow { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.ret-bn__flow b { font-weight: 800; }
.ret-bn__arrow { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ret-bn__rate { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: #b4452f; line-height: 1; }
.ret-bn__hint { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .ret-bn { gap: 10px; } .ret-bn__hint { margin-left: 0; }
  .vfunnel__row, .vfunnel__conn { grid-template-columns: 64px 1fr 76px; gap: 10px; }
  .vfunnel__conn-flag { font-size: 9px; }
}

/* ---------- CAC タブ（比較 / 月次推移）---------- */
.cac-tabs, .ret-tabs, .src-tabs { display: flex; align-items: center; gap: 6px; }
.cac-tab, .ret-tab, .src-tab {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text-light);
  transition: background .15s, color .15s, border-color .15s;
}
.cac-tab:hover, .ret-tab:hover, .src-tab:hover { border-color: var(--border-strong); color: var(--text); }
.cac-tab.is-active, .ret-tab.is-active, .src-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* topbar 用の白文字selectを、白カード上でも読めるよう明色テーマで上書き */
.cac-channel-sel {
  margin-left: 4px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cac-channel-sel:hover { border-color: var(--border-strong); }
.cac-channel-sel[hidden] { display: none; }
.cac-hint { font-size: 12px; color: var(--muted); margin: 2px 0 12px; }

/* ---------- CAC 合計サマリー（グラフ上に配置） ---------- */
.cac-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 18px; }
.cac-summary__item { flex: 1 1 140px; background: var(--card-alt); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.cac-summary__label { font-size: 13px; color: var(--text-light); font-weight: 600; }
.cac-summary__value { font-size: 24px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cac-summary__value--accent { color: var(--accent-dark); }
.cac-summary__unit { font-size: 14px; font-weight: 600; margin-left: 2px; }

/* ---------- 候補者ステータス ボード ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.board__col {
  background: var(--card-alt);
  border-radius: 12px;
  padding: 10px;
  min-width: 150px;
}
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.board__title { font-size: 14px; font-weight: 700; color: var(--text); }
.board__count {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--chart-2);
  border-radius: 999px;
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.board__col--end .board__count { background: var(--accent); }
.board__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 3px;
}
.board__cards::-webkit-scrollbar { width: 6px; }
.board__cards::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.board__cards::-webkit-scrollbar-track { background: transparent; }

.pcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--chart-6);
}
.pcard--end { border-left-color: var(--accent); }
.pcard__name { font-size: 15px; font-weight: 700; color: var(--text); }
.pcard__meta { font-size: 12px; color: var(--text-light); margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pcard__tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--card-alt);
  color: var(--text-light);
}
.pcard__updated {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pcard__updated svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: .8; }
.board__empty { font-size: 12px; color: var(--muted); text-align: center; padding: 18px 0; border: 1px dashed var(--border); border-radius: 8px; }
.board__more { font-size: 12px; color: var(--text-light); text-align: center; padding: 8px 0 2px; }

/* ---------- ドラッグ＆ドロップ ---------- */
.pcard { cursor: grab; }
.pcard:active { cursor: grabbing; }
.pcard.is-dragging { opacity: .4; }
.board__col.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-light); }
/* 見学者カンバン: ステータス6列（候補者ボードの7列グリッドを流用） */
.board--tour { grid-template-columns: repeat(6, minmax(140px, 1fr)); }

.dropzones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 900px) { .dropzones { grid-template-columns: repeat(2, 1fr); } }
.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  transition: background .15s, border-color .15s, color .15s;
}
.dropzone.is-over { color: #fff; }
.dropzone--prog.is-over { background: var(--chart-2); border-color: var(--chart-2); }
.dropzone--decline.is-over { background: var(--warn); border-color: var(--warn); }
.dropzone--reject.is-over { background: var(--muted); border-color: var(--muted); }
.dropzone--ghost.is-over { background: var(--chart-6); border-color: var(--chart-6); }

/* ---------- トースト ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 2000;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--err { background: var(--danger); }

/* ---------- 結果サマリーチップ ---------- */
.result-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.rchip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
}
.rchip__dot { width: 9px; height: 9px; border-radius: 50%; }
.rchip__dot--prog { background: var(--chart-2); }
.rchip__dot--offer { background: var(--chart-5); }
.rchip__dot--hire { background: var(--accent); }
.rchip__dot--decline { background: var(--warn); }
.rchip__dot--reject { background: var(--muted); }
.rchip__dot--ghost { background: var(--chart-6); }
.rchip__num { font-size: 20px; font-weight: 700; color: var(--text); }
.rchip__label { font-size: 13px; color: var(--text-light); }
/* Web流入サマリーchip: 指標（大数値・白カード）とメタ情報（対象サイト/期間）で階層を整える */
.rchip--meta .rchip__label { color: var(--muted); }
.rchip__num--sm { font-size: 15px; font-weight: 700; color: var(--text-light); }
.rchip__note { font-size: 12px; color: var(--muted); margin-left: 5px; }
/* 指標グループとメタグループの間に余白を足して視覚的に区切る */
.result-chips--web .rchip:not(.rchip--meta) + .rchip--meta { margin-left: 16px; }
@media (max-width: 640px) { .result-chips--web .rchip:not(.rchip--meta) + .rchip--meta { margin-left: 0; } }

/* ---------- サマリー：ファネルとチャネル別CACを横並び（ファネルは半幅でコンパクトに） ---------- */
.sum-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;   /* 左右カードを同じ高さに揃える */
}
.sum-2col > .section { margin-bottom: 18px; display: flex; flex-direction: column; }
.sum-2col .funnel { flex: 1 1 auto; justify-content: space-between; }  /* ファネル行をカード高さいっぱいに均等配置 */
@media (max-width: 900px) {
  .sum-2col { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- LINE公式ページ：チャート＋表のレイアウト ---------- */
/* 表に十分な幅を与えて読みやすく（チャートは左、表は右で同等の比率）。 */
.line-flow {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
  align-items: stretch;   /* グラフ列を表の高さいっぱいに伸ばして左右の高さを揃える */
}
.line-flow .table-wrap { align-self: stretch; max-height: 300px; overflow-y: auto; }
.line-flow__chart { height: 100%; min-height: 240px; }
.table--line { width: 100%; }
.table--line th, .table--line td { padding: 9px 14px; font-size: 13px; }
.table--line tbody td.cell-num { font-weight: 600; }
.table--line tbody tr:last-child td { border-bottom: none; }
@media (max-width: 860px) {
  .line-flow { grid-template-columns: 1fr; }
  .line-flow__chart { height: 240px; min-height: 0; }   /* 1カラム時は height:100% だと潰れるため固定 */
}

/* ---------- 候補者テーブルの結果バッジ ---------- */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
}
.badge--prog { background: var(--navy-light); color: var(--navy); }
.badge--offer { background: rgba(141, 185, 168, .25); color: var(--accent-dark); }
.badge--hire { background: var(--accent-light); color: var(--accent-dark); }
.badge--decline { background: var(--warn-light); color: #8a6618; }
.badge--reject { background: var(--card-alt); color: var(--text-light); }
.badge--ghost { background: rgba(107, 120, 136, .16); color: #55617a; }

/* ---------- 追加ボタン / 編集行 ---------- */
.btn-add {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 8px;
  padding: 7px 14px;
  min-height: 36px;
  transition: background .15s, transform .08s;
}
.btn-add:hover { background: var(--accent-dark); }
.btn-add:active { transform: scale(.97); }
.row-edit { transition: background .12s; }
.row-edit:hover { background: var(--card-alt); }

/* ---------- 追加・編集モーダル ---------- */
.modal { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 28, 36, .42); backdrop-filter: blur(2px); }
.modal__card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  animation: fadeUp .25s ease-out both;
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  font-size: 17px; font-weight: 700; color: var(--text);
}
.modal__x { font-size: 24px; line-height: 1; color: var(--text-light); width: 32px; height: 32px; border-radius: 8px; }
.modal__x:hover { background: var(--card-alt); }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 22px; }
.modal__full { grid-column: 1 / -1; }
.modal__grid label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-light); }
.modal__grid input, .modal__grid select, .modal__grid textarea {
  font-family: inherit; font-size: 15px; color: var(--text);
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 11px 13px; min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.modal__grid input::placeholder, .modal__grid textarea::placeholder { color: var(--muted); }
.modal__grid input:hover, .modal__grid select:hover, .modal__grid textarea:hover { border-color: var(--accent); }
.modal__grid input:focus, .modal__grid select:focus, .modal__grid textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: #fff;
}
/* セレクトは独自のシェブロンに差し替えてネイティブの矢印を隠す */
.modal__grid select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f695f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
/* 日付入力のカレンダーアイコンを少し落ち着かせる */
.modal__grid input[type="date"]::-webkit-calendar-picker-indicator,
.modal__grid input[type="month"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.modal__grid input[type="date"]:hover::-webkit-calendar-picker-indicator,
.modal__grid input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
.modal__grid textarea { min-height: 66px; resize: vertical; line-height: 1.6; }
/* セクション区切りの見出し（選考の進行／結果 など） */
.modal__divider {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--accent-dark);
  margin-top: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.modal__divider::before {
  content: ''; flex: 0 0 auto; width: 3px; height: 13px; border-radius: 2px; background: var(--accent);
}
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; }
.btn-primary, .btn-ghost {
  font-size: 14px; font-weight: 700; border-radius: 9px; padding: 10px 20px; min-height: 44px; transition: background .15s, opacity .15s;
}
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-ghost { color: var(--text-light); background: var(--card-alt); }
.btn-ghost:hover { background: var(--border); }
.btn-danger { font-size: 14px; font-weight: 700; border-radius: 9px; padding: 10px 18px; min-height: 44px; color: var(--danger); background: var(--danger-light); transition: background .15s, color .15s; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-danger:disabled { opacity: .6; cursor: default; }

/* 横長・ゆったりモーダル（候補者の追加・編集など入力項目が多いもの） */
.modal__card--wide { max-width: 880px; }
.modal__card--wide .modal__grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px 22px; padding: 26px 28px; }
.modal__card--wide .modal__grid .modal__half { grid-column: span 1; }

@media (max-width: 860px) {
  .modal__card--wide .modal__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .modal__grid { grid-template-columns: 1fr; }
  .modal__card--wide .modal__grid { grid-template-columns: 1fr; }
}

/* 選考ボードのカード：店舗タグ */
.pcard__tag--store { background: var(--navy-light); color: var(--navy); }

/* WIP（準備中）プレースホルダー */
.wip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; min-height: 60vh; padding: 40px 20px;
}
.wip__icon {
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  border-radius: 20px; background: var(--accent-light); color: var(--accent-dark);
}
.wip__icon svg { width: 36px; height: 36px; }
.wip__title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: .04em; }
.wip__sub { font-size: 14px; color: var(--text-light); }

/* 放置候補者アラート（バナー＋上部ポップアップ） */
/* ---------- フォロー待ち（放置候補者アラート） ----------
   ピル型バッジ＋薄色地の量産感を避け、線で構成したエディトリアル調に。
   見出し＝短い線＋トラッキングの小ラベル、一覧＝等幅グリッドの矩形タイル（角丸2px）。 */
.stale-banner {
  background: linear-gradient(180deg, #fdf8ee 0%, #fffdf8 62%);
  border: 1px solid #ead9b4;
  border-left: 3px solid #c2882d;
  border-radius: 2px;
  padding: 16px 20px 14px;
  margin-bottom: 20px;
}
.stale-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.stale-head__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #9a7414;
}
.stale-head__label::before { content: ''; width: 18px; height: 2px; background: #c2882d; }
.stale-head__count {
  font-size: 21px; font-weight: 700; line-height: 1; color: #8a6712;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stale-head__unit { font-size: 12px; font-weight: 600; margin-left: 2px; }
.stale-head__desc { font-size: 12.5px; color: var(--text-light); }

.stale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(278px, 1fr)); gap: 7px; }
.stale-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font-family: inherit; font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid #ecdcbb; border-left: 3px solid #e6cf98;
  border-radius: 2px; padding: 7px 10px 7px 11px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.stale-item:hover { background: #fdf8ee; border-color: #c2882d; transform: translateX(1px); }
.stale-item:focus-visible { outline: 2px solid #c2882d; outline-offset: 1px; }
.stale-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stale-item__days { flex: 0 0 auto; font-weight: 700; color: #9a7414; font-variant-numeric: tabular-nums; }
.stale-item__unit { font-size: 11px; font-weight: 600; margin-left: 1px; }
.stale-item.is-warm { border-left-color: #c2882d; }
.stale-item.is-hot { border-left-color: #a2551a; }
.stale-item.is-hot .stale-item__days { color: #a2551a; }

.stale-foot {
  display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0e3c8;
}
.stale-foot__more { font-size: 12px; font-weight: 700; color: #9a7414; }
.stale-foot__note { font-weight: 400; color: var(--text-light); margin-left: 8px; }
.stale-foot__hint { font-size: 12px; color: var(--text-light); margin-left: auto; }
@media (max-width: 640px) { .stale-foot__hint { margin-left: 0; } }

.stale-popup {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%) translateY(-24px);
  width: min(680px, calc(100vw - 32px));
  background: #fffdf8; border: 1px solid #ead9b4;
  border-left: 3px solid #c2882d;
  border-radius: 2px; box-shadow: var(--shadow-lg);
  padding: 16px 20px 14px; z-index: 2100;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.stale-popup.is-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.stale-popup .stale-head { padding-right: 32px; }
.stale-popup__x {
  position: absolute; top: 10px; right: 12px;
  font-size: 22px; line-height: 1; color: var(--text-light);
  width: 30px; height: 30px; border-radius: 2px; cursor: pointer;
}
.stale-popup__x:hover { background: rgba(154, 116, 20, .12); }

/* ---------- 面接日程調整（選考パイプラインの上・recruitment-schedule.js）----------
   フォロー待ち（琥珀＝警告）と役割が違うので緑系（＝これから手を動かす場所）で分ける。
   ピル型は使わず、線と矩形（角丸2px）で構成する。 */
.sched-banner {
  background: linear-gradient(180deg, #f2f9f5 0%, #fdfefd 62%);
  border: 1px solid #cfe5da;
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 16px 20px 14px;
  margin-bottom: 20px;
}
.sched-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 13px; }
.sched-head__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent-dark);
}
.sched-head__label::before { content: ''; width: 18px; height: 2px; background: var(--accent); }
.sched-head__count {
  font-size: 21px; font-weight: 700; line-height: 1; color: var(--accent-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.sched-head__unit { font-size: 12px; font-weight: 600; margin-left: 2px; }
.sched-head__desc { font-size: 12.5px; color: var(--text-light); }
.sched-head__desc b { color: var(--accent-dark); }
.sched-head__done { font-size: 12px; color: var(--muted); }
.sched-start { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.sched-start__cand {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 2px;
  padding: 6px 10px; max-width: 260px;
}
.sched-start__btn {
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; padding: 7px 14px;
  transition: background .12s;
}
.sched-start__btn:hover { background: var(--accent-dark); }

.sched-list { display: flex; flex-direction: column; gap: 8px; }
.sched-card {
  background: #fff; border: 1px solid #dfece5; border-left: 3px solid #cfe5da;
  border-radius: 2px; padding: 11px 14px 10px;
}
.sched-card.is-mine { border-left-color: var(--accent); background: #f8fcfa; }
.sched-card__head { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.sched-card__name {
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid transparent; padding: 0; cursor: pointer;
}
.sched-card__name:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }
.sched-card__round { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent-dark); }
.sched-card__who { font-size: 12.5px; color: var(--text-light); }
.sched-card__state {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #9a7414;
  border: 1px solid #ead9b4; border-radius: 2px; padding: 2px 8px; background: #fdf8ee;
}
.sched-card__state.is-answered { color: var(--accent-dark); border-color: #cfe5da; background: #eef8f2; }
.sched-card__owner {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 11.5px; color: var(--muted);
}
.sched-owner {
  font-family: inherit; font-size: 12px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 2px; padding: 4px 8px;
}
.sched-card__mine {
  margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-dark);
  border-left: 2px solid var(--accent); padding-left: 9px;
}

.sched-slots { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.sched-slots__empty { font-size: 12.5px; color: var(--muted); }
.sched-slot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 2px; padding: 6px 8px 6px 10px; background: var(--card-alt);
}
.sched-slot.is-ok { border-left-color: var(--accent); background: #eef8f2; }
.sched-slot.is-ng { opacity: .62; }
.sched-slot__at { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sched-ans { display: inline-flex; gap: 4px; }
.sched-ans__btn {
  font-family: inherit; font-size: 13px; line-height: 1; color: var(--text-light); cursor: pointer;
  width: 30px; height: 26px; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 2px;
  transition: background .12s, color .12s, border-color .12s;
}
.sched-ans__btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.sched-ans__btn.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.sched-slot__fix {
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-dark); cursor: pointer;
  background: #fff; border: 1px solid var(--accent); border-radius: 2px; padding: 5px 11px;
  transition: background .12s, color .12s;
}
.sched-slot__fix:hover { background: var(--accent); color: #fff; }
.sched-slot__del {
  margin-left: auto; font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; background: none; border: 0; border-radius: 2px;
}
.sched-slot__del:hover { background: var(--danger-light); color: var(--danger); }

.sched-card__foot {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
}
.sched-add { display: inline-flex; align-items: center; gap: 6px; }
.sched-add__at {
  font-family: inherit; font-size: 12.5px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 2px; padding: 5px 8px;
}
.sched-add__btn, .sched-req, .sched-copy, .sched-del {
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border-radius: 2px; padding: 6px 12px; background: #fff;
  border: 1px solid var(--border-strong); color: var(--text);
  transition: background .12s, border-color .12s, color .12s;
}
.sched-add__btn:hover, .sched-req:hover, .sched-copy:hover { border-color: var(--accent); color: var(--accent-dark); background: #f2f9f5; }
.sched-card__actions { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sched-del { color: var(--text-light); }
.sched-del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.sched-req[disabled], .sched-copy[disabled] { opacity: .4; cursor: default; }
.sched-req[disabled]:hover, .sched-copy[disabled]:hover { border-color: var(--border-strong); color: var(--text); background: #fff; }
.sched-note { font-size: 11.5px; color: var(--muted); }

@media (max-width: 640px) {
  .sched-banner { padding: 14px 14px 12px; }
  .sched-start { margin-left: 0; width: 100%; }
  .sched-start__cand { flex: 1 1 auto; max-width: none; min-width: 0; }
  .sched-card__owner { margin-left: 0; width: 100%; }
  .sched-slot { align-items: flex-start; }
  .sched-slot__at { flex: 1 1 100%; }
  .sched-slot__del { margin-left: auto; }
  .sched-card__actions { margin-left: 0; width: 100%; }
  .sched-add { width: 100%; }
  .sched-add__at { flex: 1 1 auto; min-width: 0; }
}

/* ---------- 読み解きポイント ---------- */
.readhint {
  background: var(--accent-light);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--accent-dark);
  line-height: 1.7;
  margin-top: 12px;
}
.readhint strong { font-weight: 700; }

/* ---------- ローディング / エラー ---------- */
.state {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  gap: 12px;
}
.state__spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ---------- 認証オーバーレイ ---------- */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* まんまるロゴの暖色（ピンク・黄）を淡く散らし、ダッシュ本体のクリーム基調へ繋げる */
  background:
    radial-gradient(480px 340px at 16% 18%, rgba(233, 148, 158, .10), transparent 70%),
    radial-gradient(520px 360px at 86% 82%, rgba(228, 186, 96, .12), transparent 70%),
    radial-gradient(420px 300px at 78% 12%, rgba(61, 139, 110, .07), transparent 70%),
    linear-gradient(160deg, #fbf8f2 0%, #eef3f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  animation: fadeUp .4s ease-out both;
}
.auth-logo { width: 76px; height: auto; margin: 0 auto 18px; border-radius: 18px; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .08)); }
.auth-brand { font-size: 12px; letter-spacing: 2px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.auth-title { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.auth-sub { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 24px; }
.auth-btn { display: flex; justify-content: center; min-height: 44px; }
.auth-err { display: none; margin-top: 16px; font-size: 13px; color: var(--danger); background: var(--danger-light); border-radius: 8px; padding: 8px 12px; line-height: 1.5; }
.auth-note { margin-top: 20px; font-size: 12px; color: var(--muted); }

/* ---------- サイドバー ユーザーチップ ---------- */
#sidebar-user { margin-bottom: 10px; }
.sb-user { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sb-user__avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sb-user__avatar--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.sb-user__name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logout {
  font-size: 12px;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  width: 100%;
  text-align: center;
  transition: background .15s, color .15s;
}
.sb-logout:hover { background: var(--card-alt); color: var(--text); }

/* ---------- Responsive (PCファースト, iPad操作可) ---------- */
@media (max-width: 1024px) {
  .board { grid-template-columns: repeat(7, minmax(130px, 1fr)); }
}
@media (max-width: 768px) {
  .board { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; }
  .funnel__row { grid-template-columns: 76px 1fr 84px; gap: 8px; }
}

/* ===== 追加: ファネル詳細の大区分/中区分グループ・店舗注記・目標 ===== */
.cell-low { color: var(--danger); font-weight: 700; }

/* ファネル詳細：大区分行 / 中区分行 */
.ft__major td { background: var(--card-alt); border-bottom: 1px solid var(--border); }
.ft__major .ft__ch--major { font-weight: 800; font-size: 15px; color: var(--navy); }
.ft__major .ft__val { font-weight: 800; }
.ft__sub .ft__ch--sub { font-weight: 500; font-size: 14px; color: var(--text-light); padding-left: 26px; position: relative; }
.ft__sub .ft__ch--sub::before { content: "└"; position: absolute; left: 10px; color: var(--border-strong); }
.ft__sub .ft__val { font-weight: 600; }

/* 粒度切替タブ（CACタブと同じ見た目） */
.ft-depth-tabs { display: flex; align-items: center; gap: 6px; }
.ft-depth-tab {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text-light);
  transition: background .15s, color .15s, border-color .15s;
}
.ft-depth-tab:hover { border-color: var(--border-strong); color: var(--text); }
.ft-depth-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* 店舗で絞り込み中の注記バナー */
.store-note {
  background: var(--warn-light); border: 1px solid var(--warn);
  color: #7a5a18; border-radius: 10px; padding: 11px 14px;
  font-size: 13px; line-height: 1.6; margin-bottom: 20px;
}
.store-note b { font-weight: 700; }

/* ===== ページ内タブ切替（選考・候補者のセグメントコントロール） ===== */
.seg-tabs { display: inline-flex; gap: 4px; background: var(--card-alt); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.seg-tab { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 8px 18px; border: 0; border-radius: 7px; background: transparent; color: var(--text-light); transition: background .15s, color .15s; }
.seg-tab:hover { color: var(--text); }
.seg-tab.is-active { background: var(--navy); color: #fff; }

/* ===== ページ冒頭のリード文（施策・タスク等） ===== */
.page-lead { font-size: 13px; color: var(--text-light); line-height: 1.6; margin: 2px 2px 16px; }
.page-lead b { color: var(--text); font-weight: 700; }

/* ===== チャネル別 CAC（サマリー上部）: 数値＋ミニバー ===== */
.table--cac { min-width: 520px; }
.table--cac td.cacbar__cell { min-width: 188px; }
.cacbar { display: flex; align-items: center; gap: 10px; }
.cacbar__track { flex: 1 1 auto; min-width: 60px; height: 10px; background: var(--card-alt); border-radius: 5px; overflow: hidden; }
.cacbar__fill { height: 100%; border-radius: 5px; background: var(--navy); }
.cacbar__fill--good { background: var(--success); }
.cacbar__fill--high { background: var(--danger); }
.cacbar__val { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.cacbar__na { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }

/* CAC テーブルの数値（チャネル名・採用費・入社・CAC）。横並びで高さが膨らみすぎないよう調整 */
.table--cac td { font-size: 14px; }
.table--cac tfoot td { font-size: 14px; }

/* 直近の選考状況スコアカードの数字を大きく */
.pipe-stage__value { font-size: 28px; }
.pipe-stage__unit { font-size: 14px; }
.pipe-stage__label { font-size: 13px; }
@media (max-width: 640px) { .pipe-stage__value { font-size: 24px; } }
.cacbar__why { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.cac-zero-toggle { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text-light); transition: border-color .15s, color .15s; }
.cac-zero-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.cac-row--zero td { background: var(--card-alt); }

/* 定着カードの行内コントロール（退職日ボタン・date入力）。
   .btn-primary/.btn-ghost の min-height:44px を打ち消し、テーブル行の高さを崩さない */
.tenure-act { font-size: 12px; font-weight: 600; padding: 3px 10px; min-height: 0; border-radius: 6px; line-height: 1.4; }
.tenure-date { font: inherit; font-size: 12px; line-height: 1.4; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.tenure-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tenure-edit__name { font-weight: 600; white-space: nowrap; }

/* ===== 追加: 多列テーブルが潰れないよう最小幅を確保（潰さず横スクロール） ===== */
.table--funnel { min-width: 460px; }

/* 候補者リスト（11列）: 固定レイアウト＋列幅配分で「対応状況」以降も横スクロール無しで見える。
   氏名が余白を独占して後半列が切れる問題の対処（2026-07-04）。あふれる文字はellipsis */
.table--cand { table-layout: fixed; width: 100%; min-width: 980px; }
.table--cand th, .table--cand td { overflow: hidden; text-overflow: ellipsis; }
.table--cand th:nth-child(1) { width: 11%; }   /* 氏名 */
.table--cand th:nth-child(2) { width: 8%; }    /* 管理番号 */
.table--cand th:nth-child(3) { width: 11%; }   /* 経路（会社名） */
.table--cand th:nth-child(4) { width: 8%; }    /* ポジション */
.table--cand th:nth-child(5) { width: 7%; }    /* 店舗 */
.table--cand th:nth-child(6) { width: 8.5%; }  /* 応募日 */
.table--cand th:nth-child(7) { width: 7.5%; }  /* 段階 */
.table--cand th:nth-child(8) { width: 7%; }    /* 結果 */
.table--cand th:nth-child(9) { width: 9%; }    /* 対応状況 */
.table--cand th:nth-child(10) { width: 5.5%; } /* 履歴書 */
/* 理由・備考 = 残り約17.5% */
.table--funnel th:first-child, .table--funnel td:first-child { min-width: 96px; }
.table--funnel th, .table--funnel td { min-width: 72px; }
/* ファネル詳細の数値セル・矢印列の最小幅（バー＋数値がつぶれないように） */
.ft__num { min-width: 66px; }
.ft__arrow, .ft__arrow-h { min-width: 52px; }

/* ===== 採用目標 vs 実績テーブル：列幅をゆったり確保 ===== */
.table--targets { min-width: 680px; }
.table--targets th, .table--targets td { padding: 12px 20px; min-width: 120px; }
.table--targets th:first-child, .table--targets td:first-child { min-width: 150px; }

/* =========================================
   AI相談（Claude）— ヘッダーボタン + チャットドロワー
   ========================================= */

/* ヘッダーの「AIに相談」ボタン */
.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(61, 139, 110, .25);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.ai-btn:hover { background: var(--accent-dark); box-shadow: 0 2px 8px rgba(61, 139, 110, .35); }
.ai-btn:active { transform: translateY(1px); }
.ai-btn svg { flex: none; }

/* マスク + ドロワー */
.ai-mask {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(31, 43, 58, .32);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.ai-mask.is-open { opacity: 1; pointer-events: auto; }

.ai-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1101;
  width: min(440px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.ai-drawer.is-open { transform: translateX(0); }
body.ai-lock { overflow: hidden; }

.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.ai-head__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--text); }
.ai-head__title svg { color: var(--accent); }
.ai-head__actions { display: flex; gap: 2px; }
.ai-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: none; color: var(--text-light);
  cursor: pointer; transition: background .12s, color .12s;
}
.ai-icon:hover { background: var(--accent-light); color: var(--accent-dark); }

/* コンテキストバー */
.ai-ctxbar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  font-size: 12px; color: var(--text-light);
  background: var(--accent-light);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.ai-ctxbar svg { color: var(--accent); flex: none; }
.ai-ctxbar b { color: var(--accent-dark); font-weight: 700; }

.ai-body { flex: 1; overflow: hidden; position: relative; display: flex; }
.ai-messages, .ai-history, .ai-settings { flex: 1; overflow-y: auto; padding: 16px; }

/* メッセージ */
.ai-msg { margin-bottom: 16px; }
.ai-msg__role { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.ai-msg--user .ai-msg__role { color: var(--accent-dark); }
.ai-msg__body {
  font-size: 13.5px; line-height: 1.75; color: var(--text);
  border-radius: 12px; padding: 11px 14px;
  background: var(--card); border: 1px solid var(--border);
  word-break: break-word;
}
.ai-msg--user .ai-msg__body { background: var(--accent-light); border-color: #cfe7dc; }

.ai-msg__body .ai-p { margin: 0 0 8px; }
.ai-msg__body .ai-p:last-child { margin-bottom: 0; }
.ai-msg__body .ai-h { font-size: 13.5px; font-weight: 700; margin: 12px 0 6px; color: var(--text); }
.ai-msg__body .ai-h:first-child { margin-top: 0; }
.ai-msg__body .ai-ul, .ai-msg__body .ai-ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-msg__body li { margin-bottom: 3px; }
.ai-msg__body .ai-code { background: var(--card-alt); padding: 1px 5px; border-radius: 5px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }
.ai-msg__body .ai-pre { background: var(--navy); color: #e8eef5; padding: 12px; border-radius: 10px; overflow-x: auto; font-size: 13px; margin: 8px 0; }
.ai-msg__body .ai-pre code { font-family: ui-monospace, Menlo, monospace; }
.ai-msg__body a { color: var(--accent-dark); text-decoration: underline; }
.ai-msg__body strong { font-weight: 700; }

/* タイピングインジケーター */
.ai-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ai-bounce 1.2s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* 空状態 + サジェスト */
.ai-empty { text-align: center; padding: 22px 8px; }
.ai-empty__icon { color: var(--accent); opacity: .5; margin-bottom: 10px; }
.ai-empty__title { font-size: 16px; font-weight: 700; color: var(--text); }
.ai-empty__sub { font-size: 13px; color: var(--text-light); margin: 6px 0 18px; line-height: 1.6; }
.ai-suggests { display: flex; flex-direction: column; gap: 8px; }
.ai-suggest {
  text-align: left; font-family: inherit; font-size: 12.5px; line-height: 1.5;
  padding: 10px 13px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.ai-suggest:hover { border-color: var(--accent); background: var(--accent-light); }

/* 入力 */
.ai-input {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--border); background: var(--topbar-bg);
}
.ai-input textarea {
  flex: 1; resize: none; font-family: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 9px 12px; border-radius: 11px; border: 1px solid var(--border-strong);
  background: var(--input-bg); color: var(--text); max-height: 160px;
}
.ai-input textarea:focus { outline: none; border-color: var(--accent); }
.ai-send {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.ai-send:hover { background: var(--accent-dark); }
.ai-send:disabled { background: var(--muted); cursor: default; }

/* 履歴 */
.ai-hist-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 30px 0; }
.ai-hist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--card); margin-bottom: 8px;
}
.ai-hist-item__main { flex: 1; cursor: pointer; min-width: 0; }
.ai-hist-item__title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-hist-item__meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ai-hist-del {
  flex: none; width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ai-hist-del:hover { background: var(--danger-light); color: var(--danger); }

/* 設定 */
.ai-set { display: flex; flex-direction: column; gap: 18px; }
.ai-set__group { display: flex; flex-direction: column; gap: 7px; }
.ai-set__label { font-size: 13px; font-weight: 700; color: var(--text); }
.ai-set__keyrow { display: flex; gap: 8px; }
.ai-set__input, .ai-set__select {
  flex: 1; font-family: inherit; font-size: 14px; padding: 9px 11px;
  border-radius: 9px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text);
}
.ai-set__input:focus, .ai-set__select:focus { outline: none; border-color: var(--accent); }
.ai-set__clear { flex: none; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card); color: var(--danger); font-size: 13px; font-weight: 600; cursor: pointer; }
.ai-set__clear:hover { background: var(--danger-light); }
.ai-set__hint {
  display: flex; gap: 6px; font-size: 12px; line-height: 1.65; color: var(--text-light);
  background: var(--card-alt); padding: 9px 11px; border-radius: 9px; margin: 0;
}
.ai-set__hint svg { color: var(--accent); flex: none; margin-top: 2px; }
.ai-set__hint a { color: var(--accent-dark); text-decoration: underline; }
.ai-set__hint.ai-flash { animation: ai-flash 1.4s; }
@keyframes ai-flash { 0%, 100% { background: var(--card-alt); } 25%, 60% { background: var(--warn-light); } }
.ai-set__radios { display: flex; flex-direction: column; gap: 8px; }
.ai-radio { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.ai-radio input { accent-color: var(--accent); }
.ai-set__save {
  align-self: flex-start; padding: 9px 22px; border-radius: 9px; border: none;
  background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ai-set__save:hover { background: var(--accent-dark); }
.ai-set__saved { font-size: 13px; color: var(--accent-dark); font-weight: 600; }

@media (max-width: 520px) {
  .ai-drawer { width: 100vw; }
  .ai-btn span { display: inline; }
}

/* ============================================================
   活用度（ユーザー別）ページ  recruitment-usage.js
   ============================================================ */
.usage-summary {
  display: flex; flex-wrap: wrap; gap: 36px;
  padding: 2px 4px 18px; margin-bottom: 6px;
}
.usage-summary__label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.usage-summary__val { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.usage-summary__unit { font-size: 13px; font-weight: 500; color: var(--text-light); margin-left: 4px; }
.usage-summary__sub { font-size: 13px; font-weight: 500; color: var(--muted); }

.usage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px;
}
.usage-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.usage-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.usage-card__avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.usage-card__id { flex: 1 1 auto; min-width: 0; }
.usage-card__name { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.usage-card__badge {
  font-size: 11.5px; font-weight: 600; color: var(--accent-dark);
  background: var(--accent-light); border-radius: 4px; padding: 1px 6px;
}
.usage-card__email { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-card__active { text-align: right; flex: 0 0 auto; }
.usage-card__active-label { display: block; font-size: 12px; color: var(--muted); }
.usage-card__active-val { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }

.usage-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.usage-stat { background: var(--card-alt); border-radius: 9px; padding: 9px 11px; }
.usage-stat__label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.usage-stat__val { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
.usage-stat__unit { font-size: 12px; font-weight: 500; color: var(--text-light); margin-left: 3px; }

.usage-card__recent { margin-top: 13px; border-top: 1px solid var(--border); padding-top: 12px; }
.usage-card__recent-h { font-size: 12px; font-weight: 600; color: var(--text-light); margin-bottom: 9px; }
.usage-card__recent-h span { font-weight: 400; color: var(--muted); margin-left: 4px; }
.usage-card__logins {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
}
.usage-card__logins li { font-size: 13px; color: var(--text); position: relative; padding-left: 14px; }
.usage-card__logins li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.usage-card__empty { font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .usage-summary { gap: 24px; }
  .usage-grid { grid-template-columns: 1fr; }
  .usage-card__logins { grid-template-columns: 1fr; }
}

.usage-lead { font-size: 13px; color: var(--text-light); margin: 0 0 18px; line-height: 1.7; }
.usage-lead__note { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 活動のないユーザーは、場所を取らないようコンパクトなチップで一覧表示 */
.usage-idle { margin-top: 20px; }
.usage-idle__h { font-size: 12px; font-weight: 600; color: var(--text-light); margin-bottom: 12px; }
.usage-idle__h span { font-weight: 400; color: var(--muted); margin-left: 4px; }
.usage-idle__list { display: flex; flex-wrap: wrap; gap: 8px; }
.usage-idle__item {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px 5px 5px;
}
.usage-idle__avatar {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--card-alt); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.usage-idle__name { font-size: 13px; color: var(--text-light); }

/* ============================================================
   サイト管理ページ  recruitment-sites.js
   ============================================================ */
/* 横長カードを2〜3カラムで密に並べる（縦スクロールを抑える） */
.sites-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 14px;
}
.sites-card {
  display: flex; flex-direction: row; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.sites-card__pv {
  flex: 0 0 200px; align-self: stretch;       /* 横長プレビュー（約16:9）で収まりやすく */
  background: var(--card-alt); border-right: 1px solid var(--border);
  display: flex; align-items: stretch; justify-content: center; min-height: 116px;
}
.sites-card__thumb { width: 200px; object-fit: cover; object-position: top center; display: block; }
.sites-card__thumb.is-broken { display: none; }   /* 自動スクショ失敗時は隠す（背景色が出る） */
.sites-card__thumb--ph { width: 200px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sites-card__favicon { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; }
.sites-card__favicon.is-broken { display: none; }                       /* favicon失敗時は隠す */
.sites-card__globe { width: 30px; height: 30px; opacity: .5; }
.sites-card__favicon + .sites-card__globe { display: none; }            /* faviconがあれば地球は出さない */
.sites-card__favicon.is-broken + .sites-card__globe { display: block; } /* favicon失敗時のみ地球 */

.sites-card__body { flex: 1 1 auto; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sites-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sites-card__name {
  font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.sites-card__name:hover { color: var(--accent-dark); text-decoration: underline; }

.sites-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.sites-badge--live { background: var(--accent-light); color: var(--accent-dark); }
.sites-badge--wip { background: var(--warn-light); color: #8a6618; }
.sites-badge--off { background: var(--card-alt); color: var(--text-light); }

.sites-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sites-chip { font-size: 12px; font-weight: 600; color: var(--accent-dark); background: var(--accent-light); border-radius: 5px; padding: 2px 8px; }
.sites-chip--ghost { color: var(--text-light); background: var(--card-alt); font-weight: 500; }

/* 直近数値（GA4計測サイトのみ）: 最新月の PV / セッション / ユーザー を薄い緑帯で強調 */
.sites-metrics {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 8px 0 2px; padding: 8px 11px;
  background: var(--accent-light); border-radius: 8px;
}
.sites-metrics__mo { font-size: 11.5px; font-weight: 700; color: var(--accent-dark); letter-spacing: .02em; margin-right: 2px; }
.sites-metrics__stat { display: inline-flex; align-items: baseline; gap: 3px; }
.sites-metrics__stat b { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sites-metrics__stat i { font-size: 11.5px; font-style: normal; color: var(--text-light); }

.sites-meta { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.sites-meta__row { display: grid; grid-template-columns: 54px 1fr; gap: 8px; font-size: 12px; line-height: 1.45; }
.sites-meta__label { color: var(--muted); font-size: 12px; }
.sites-meta__val { color: var(--text); word-break: break-word; }

@media (max-width: 560px) {
  .sites-grid { grid-template-columns: 1fr; }
  .sites-card__pv { flex-basis: 140px; }
  .sites-card__thumb, .sites-card__thumb--ph { width: 140px; }
}

/* ============================================================
   資料マスタ（recruitment-master.js / master.html）
   採用スライド用の会社ファクトをカテゴリ別フォームで手入力・保存する。
   ============================================================ */
.master-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(251, 248, 242, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  padding: 14px 2px 14px; margin-bottom: 8px;
}
.master-bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.master-bar__lead { font-weight: 700; color: var(--text); font-size: 14px; }
.master-bar__hint { color: var(--muted); font-size: 12px; }
.master-bar__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.master-bar__dirty { color: var(--warn); font-size: 12px; font-weight: 600; white-space: nowrap; }
.master-save {
  border: none; border-radius: 9px; padding: 10px 24px;
  background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, opacity .15s ease;
}
.master-auto {
  border: 1px solid var(--accent); border-radius: 9px; padding: 9px 16px;
  background: #fff; color: var(--accent-dark); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, opacity .15s ease; white-space: nowrap;
}
.master-auto:hover { background: var(--accent-light); }
.master-auto:disabled { opacity: .5; cursor: default; }
.master-save:hover { background: var(--accent-dark); }
.master-save:disabled { opacity: .45; cursor: default; }
.master-pdf {
  border: 1px solid var(--accent); border-radius: 9px; padding: 9px 16px;
  background: #fff; color: var(--accent-dark); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, opacity .15s ease; white-space: nowrap;
}
.master-pdf:hover { background: var(--accent-light); }
.master-pdf:disabled { opacity: .5; cursor: default; }

.master-pdf-result { display: none; align-items: center; gap: 14px; margin: 2px 2px 14px; flex-wrap: wrap; }
.master-pdf-result.is-show { display: flex; }
.master-pdf-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700;
}
.master-pdf-link:hover { background: var(--accent-dark); }
.master-pdf-note { font-size: 12px; font-weight: 600; }
.master-pdf-note.is-ok   { color: var(--accent-dark); }
.master-pdf-note.is-warn { color: #b07a20; cursor: help; }

/* スライドテンプレのプレビュー（details で折りたたみ。iframe は展開時に読み込む） */
.master-preview { margin: 2px 2px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 18px 16px; }
.master-preview__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.master-preview__title { font-size: 14px; font-weight: 700; color: var(--text); }
.master-preview__links { display: inline-flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.master-preview__summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text);
  list-style: none; user-select: none;
}
.master-preview__summary::-webkit-details-marker { display: none; }
.master-preview__summary::before {
  content: '▶'; font-size: 9px; color: var(--muted); transition: transform .15s ease;
}
.master-preview[open] .master-preview__summary::before { transform: rotate(90deg); }
.master-preview__summary:hover { color: var(--accent-dark); }
.master-preview__note { font-size: 12px; font-weight: 500; color: var(--muted); }
.master-preview__body { padding: 0 18px 18px; }
.master-preview__links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.master-preview__links a { font-size: 12px; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.master-preview__links a:hover { text-decoration: underline; }
/* 16:9 を保ったまま横幅に追従させる */
.master-preview__frame { position: relative; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; background: var(--bg); border-radius: 8px; overflow: hidden; }
.master-preview__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.master-legend { display: flex; gap: 14px; margin: 4px 2px 18px; }
.master-legend__item { font-size: 12px; font-weight: 600; padding-left: 16px; position: relative; color: var(--muted); }
.master-legend__item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 3px;
}
.master-legend__item.is-ok::before   { background: var(--accent); }
.master-legend__item.is-warn::before { background: var(--warn); }
.master-legend__item.is-todo::before { background: var(--border-strong); }

.master-section { margin-bottom: 20px; }
.master-section__title {
  font-size: 15px; font-weight: 700; color: var(--text);
  padding-left: 12px; border-left: 4px solid var(--accent); margin: 0 0 10px;
}
.master-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.master-field--wide { grid-column: 1 / -1; }

.master-field {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px 9px; display: flex; flex-direction: column; gap: 7px;
  border-left-width: 4px;
}
.master-field.is-ok   { border-left-color: var(--accent); }
.master-field.is-warn { border-left-color: var(--warn); background: var(--warn-light); }
.master-field.is-todo { border-left-color: var(--border-strong); background: var(--card-alt); }

.master-field__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.master-field__label { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.master-field__unit { font-size: 12px; font-weight: 500; color: var(--muted); }

.master-input, .master-sub, .master-status {
  font-family: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--border-strong); border-radius: 8px;
}
.master-input { width: 100%; padding: 7px 10px; font-size: 13.5px; box-sizing: border-box; }
.master-input--area { resize: vertical; line-height: 1.6; min-height: 52px; }
.master-input:focus, .master-sub:focus, .master-status:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}

.master-status { font-size: 12px; padding: 5px 26px 5px 9px; cursor: pointer; flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* details 自体には display を当てない（当てると閉じても中身が出る） */
.master-field__meta-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.master-sub { flex: 1 1 96px; min-width: 0; padding: 4px 8px; font-size: 12px; }
.master-field__updated { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }

/* 保存トースト */
.master-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--text); color: #fff; padding: 11px 22px; border-radius: 10px;
  font-size: 13px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 50;
}
.master-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.master-toast--ok   { background: var(--accent-dark); }
.master-toast--err  { background: #b4452f; }
.master-toast--warn { background: #b07a20; }

@media (max-width: 640px) {
  .master-grid { grid-template-columns: 1fr; }
  .master-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .master-bar__actions { justify-content: flex-end; }
}

/* ---- 辞退・見送り分析：理由カテゴリ別バー（選考ボード） ---- */
.decat-wrap { margin-bottom: 18px; }   /* 下のチャネル別/フリー記述テーブル（全幅）と端を揃える */
.decat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.decat-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); white-space: nowrap; }
.decat-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.decat-key--decline { background: var(--warn); margin-left: 8px; }
.decat-key--decline:first-child { margin-left: 0; }
.decat-key--reject { background: var(--muted); margin-left: 8px; }
.decat-key--ghost { background: var(--chart-6); margin-left: 8px; }
.decat-row { display: grid; grid-template-columns: 230px 1fr 150px; align-items: center; gap: 10px; padding: 4px 0; }
.decat-name { font-size: 12px; color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decat-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--card-alt); }
.decat-seg { height: 100%; }
.decat-seg--decline { background: var(--warn); }
.decat-seg--reject { background: var(--muted); }
.decat-seg--ghost { background: var(--chart-6); }
.decat-num { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.decat-split { font-weight: 400; font-size: 12px; color: var(--text-light); margin-left: 6px; }

@media (max-width: 640px) {
  .decat-row { grid-template-columns: 110px 1fr 44px; }
  .decat-name { font-size: 12px; }
  .decat-split { display: none; }
}

/* ---- 選考承認ページ（approvals.html） ---- */
.appr-lead { font-size: 13px; color: var(--text-light); margin: 2px 0 16px; max-width: 720px; }
.appr-lead__note { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.appr-count { font-size: 12px; font-weight: 600; color: var(--text-light); margin-left: 6px; }
.appr-empty { font-size: 13px; color: var(--muted); padding: 10px 2px; }
.appr-grid { display: flex; flex-direction: column; gap: 14px; }
.appr-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; max-width: 860px; background: var(--card); }
.appr-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appr-card__name { font-size: 16px; font-weight: 700; color: var(--text); }
.appr-stage { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); background: var(--card-alt); border-radius: 999px; padding: 3px 12px; }
.appr-stage__arrow { color: var(--muted); }
.appr-chip { font-size: 12px; font-weight: 600; color: var(--text-light); background: var(--card-alt); border-radius: 999px; padding: 3px 9px; }
.appr-card__req { font-size: 12px; color: var(--text-light); margin: 8px 0 12px; }
.appr-docs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.appr-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; }
.appr-doc--missing { background: var(--card-alt); border-style: dashed; }
.appr-doc__type { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-weak, #eef5f1); color: var(--accent); white-space: nowrap; }
.appr-doc--missing .appr-doc__type { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.appr-doc__none { font-size: 12px; color: var(--muted); }
.appr-doc__link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; word-break: break-all; }
.appr-doc__link:hover { text-decoration: underline; }
.appr-doc__prev { font-size: 12px; padding: 3px 10px; min-height: 0; }
.appr-frame { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
.appr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appr-actions .btn-primary, .appr-actions .btn-danger, .appr-actions .btn-ghost { font-size: 13px; padding: 8px 16px; min-height: 0; }
.appr-note { font-size: 12px; color: var(--muted); }
.appr-status { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.appr-status--ok { color: #fff; background: var(--success); }
.appr-status--ng { color: var(--danger); background: var(--danger-light); }
.appr-status--mut { color: var(--text-light); background: var(--card-alt); }
.appr-hist__comment { white-space: normal; min-width: 180px; max-width: 320px; }

@media (max-width: 640px) {
  .appr-card { padding: 13px 14px; }
  .appr-frame { height: 320px; }
}
.appr-restricted { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-light); background: var(--card-alt); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; margin-left: 10px; white-space: nowrap; }
.appr-restricted svg { width: 11px; height: 11px; }
.appr-restricted { cursor: help; }
.sidebar__link .sidebar__lock-wrap { display: inline-flex; align-items: center; margin-left: auto; cursor: help; }
.sidebar__link .sidebar__lock { width: 12px; height: 12px; opacity: .45; flex: none; }

/* サマリー Webサイト流入: 右の月次テーブルを広く（既定 grid-2 は 2fr 1fr） */
.web-2col { grid-template-columns: 1fr 1fr; }

/* Web流入詳細: 2つの月次推移チャート（全サイト合算 / サイト別）を横並び。狭幅で縦積み */
.web-trend-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.web-trend-2col > .section { margin-bottom: 18px; }
@media (max-width: 980px) { .web-trend-2col { grid-template-columns: 1fr; gap: 0; } }

/* サイト別（期間合計）: 横棒ランキングと4列テーブル（サイト/PV/セッション/前月比）を高さ揃えで並べる */
.web-bar-2col { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; gap: 24px; }
.web-bar-2col .chart-wrap { height: 100%; min-height: 360px; }
.web-bar-2col .table td, .web-bar-2col .table th { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 980px) { .web-bar-2col { grid-template-columns: 1fr; gap: 18px; } .web-bar-2col .chart-wrap { min-height: 320px; } }

/* サマリー 応募フォーム: 右の「直近の応募」は5列あるため広く、左のチャネル別（3列）は狭く */
.form-2col { grid-template-columns: 1fr 2fr; }

/* ---- まんまるくん FAB（右下フローティング。全recruitmentページ共通） ---- */
.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 1050;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 11px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(61, 139, 110, .35);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.ai-fab:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(61, 139, 110, .42); }
.ai-fab:active { transform: translateY(0); }
.ai-fab__icon { width: 24px; height: 24px; border-radius: 50%; background: #fff; flex: none; }
body:not(.authed) .ai-fab { display: none; }   /* ログイン前は出さない */
.ai-head__icon { width: 22px; height: 22px; border-radius: 50%; background: #fff; flex: none; }
@media (max-width: 640px) {
  .ai-fab { right: 14px; bottom: 14px; padding: 9px 14px 9px 9px; font-size: 12.5px; }
}

/* =========================================
   2026-07-21 追加分（スパークライン / スイッチ / 見出し / バッジ / スケルトン）
   ========================================= */

/* ---------- スコアカードのスパークライン ---------- */
.kpi__spark { width: 100%; height: 26px; margin-top: 8px; display: block; }
.kpi--navy .kpi__spark { color: var(--kpi-navy); }
.kpi--green .kpi__spark { color: var(--accent); }
.kpi--yellow .kpi__spark { color: #b0822a; }

/* ---------- トグルスイッチ（退職者表示 等） ---------- */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 500; color: var(--text-light); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .2s; flex: 0 0 auto; }
.switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:hover .switch__text { color: var(--text); }

/* ---------- セクション内の小見出し（.note より1段格上げ） ---------- */
.sub-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }

/* サイドバーのラベルはタグ・バッジに押されても改行させない */
.sidebar__link span { white-space: nowrap; }

/* ---------- サイドバーの状態タグ（開発中 等） ---------- */
.sidebar__tag {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
  margin-left: 2px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------- サイドバーの件数バッジ ----------
   バッジは最右端の固定スロット（絶対配置）、鍵は margin-left:auto で右寄せ。
   全リンクに右パディングでバッジ分の定位置を確保するため、
   バッジの有無・ラベル長に関わらず 鍵もバッジも縦に揃う。 */
.sidebar__link { padding-right: 38px; }
.sidebar__badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.sidebar__badge--warn { background: var(--warn-light); color: #8a6618; }

/* ---------- 初回ロードのスケルトン ---------- */
.skel {
  background: linear-gradient(90deg, var(--card-alt) 25%, #fdfbf7 50%, var(--card-alt) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skelShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel--kpi { height: 96px; border-radius: 14px; }
.skel--line { height: 14px; margin-bottom: 12px; }
.skel--block { border-radius: 10px; }
.skel-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

/* ---------- サイト管理: 種別グループの小見出し ---------- */
.sites-group { margin-bottom: 22px; }
.sites-group:last-child { margin-bottom: 0; }
.sites-group__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sites-group__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--card-alt);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.6;
}


/* ---------- サイト管理（Webサイトページ埋め込み時）: 簡素表示 ---------- */
/* 保守メタ（サーバー/技術/デプロイ）とGA4数値帯は上のGA4テーブルと重複するため隠し、
   プレビュー＋サイト名＋状態だけのコンパクトなカードにする（sites.html 単体では従来どおり全部出す） */
#sites-host .sites-meta, #sites-host .sites-metrics { display: none; }
#sites-host .sites-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

/* ---------- サマリー: 推奨アクション ---------- */
.action-list { display: flex; flex-direction: column; }
.action-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 13px; line-height: 1.6; }
.action-item:first-child { padding-top: 2px; }
.action-item:last-child { border-bottom: none; }
.action-item__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.action-item--high .action-item__dot { background: var(--danger); }
.action-item--mid .action-item__dot { background: var(--warn); }
.action-item--low .action-item__dot { background: var(--border-strong); }
.action-item__body { min-width: 0; }
.action-item__link { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.action-item__link:hover { color: var(--accent-dark); }

/* ---------- AIマーケ施策プラン（活用度ページ・お試し） ---------- */
.mkt-ai__meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap; }
.mkt-ai__gen { padding: 8px 18px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; transition: background .15s; }
.mkt-ai__gen:hover { background: var(--accent-dark); }
.mkt-ai__loading { display: flex; align-items: center; gap: 12px; padding: 22px 4px; color: var(--text-light); font-size: 13px; }
.mkt-ai__out { font-size: 13.5px; line-height: 1.75; color: var(--text); max-width: 860px; }
.mkt-ai__out h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; padding-left: 10px; border-left: 3px solid var(--accent); }
.mkt-ai__out h3:first-child { margin-top: 4px; }
.mkt-ai__out h4 { font-size: 13.5px; font-weight: 700; margin: 14px 0 6px; color: var(--accent-dark); }
.mkt-ai__out ul { padding-left: 20px; margin: 4px 0 10px; }
.mkt-ai__out li { margin-bottom: 3px; }
.mkt-ai__out p { margin: 6px 0; }
.mkt-ai__out hr { border: none; border-top: 1px dashed var(--border); margin: 14px 0; }
.mkt-ai__out code { background: var(--card-alt); border-radius: 4px; padding: 1px 5px; font-size: 12px; }

/* ---------- Webサイト: チップ内スパークライン ---------- */
.rchip--spark { display: flex; flex-direction: column; align-items: stretch; min-width: 150px; }
.rchip__spark { width: 100%; height: 20px; margin-top: 6px; display: block; color: var(--accent); }

/* サイト管理: 機能・説明（備考列）。Web埋め込み時はプレビュー画像を出さず機能テキストだけ見せる */
.sites-card__note { font-size: 12px; color: var(--text-light); line-height: 1.55; margin-top: 2px; }
#sites-host .sites-card__pv { display: none; }

/* ---------- ファネル通過率（全体）ブラッシュアップ 2026-07-21 ---------- */
/* 100%超の通過チップ: データ由来（過去取込・月ズレ）であることを琥珀色＋hover説明で示す */
.vfunnel__chip.is-over { background: var(--warn-light); border-color: rgba(212,160,60,.5); cursor: help; }
.vfunnel__chip.is-over .vfunnel__chip-rate { color: #9a7414; }
.vfunnel__chip.is-over .vfunnel__chip-label { color: #b08a3a; }
/* 応募比のミニメーター（右列の%の下に細いトラック） */
.vfunnel__pct-track { display: block; width: 64px; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--card-alt); overflow: hidden; }
.vfunnel__pct-track > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: .75; }
/* 行hoverで対象の帯を少し持ち上げる */
.vfunnel__row .vfunnel__bar { transition: width .45s cubic-bezier(.22,.61,.36,1), transform .18s ease, box-shadow .18s ease; }
.vfunnel__row:hover .vfunnel__bar { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(31,43,58,.22), inset 0 1px 0 rgba(255,255,255,.16); }

/* ---------- チャネルページ: CAC × ファネル通過率 の横並び ---------- */
.funnel-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.funnel-2col > .section { min-width: 0; margin-bottom: 18px; }
@media (max-width: 1100px) { .funnel-2col { grid-template-columns: 1fr; } }

/* =========================================
   選考ボード / 選考承認 デザインアップグレード（2026-07-21）
   ========================================= */

/* ---- 選考ボード: 列に枠と段階カラーの上ライン、カードにhover挙動 ---- */
.board { gap: 12px; }
.board__col {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 10px 10px;
  position: relative;
  overflow: hidden;
}
.board__col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--chart-6);
}
/* 段階の進行に合わせて上ラインをグレー→緑のグラデ段階に（ファネル帯と同じ思想） */
.board > .board__col:nth-child(1)::before { background: #b6c0cd; }
.board > .board__col:nth-child(2)::before { background: #9fb0c2; }
.board > .board__col:nth-child(3)::before { background: #88a4bb; }
.board > .board__col:nth-child(4)::before { background: #6f93b0; }
.board > .board__col:nth-child(5)::before { background: #57968d; }
.board > .board__col:nth-child(6)::before { background: var(--accent); }
.board > .board__col:nth-child(7)::before { background: var(--accent-dark); }
.board__head { margin-bottom: 12px; }
.board__count { background: rgba(31, 43, 58, .75); }
.pcard {
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pcard:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.board__empty { padding: 22px 0; }

/* ---- 選考承認: カードの質感・書類行・アクションを底上げ ---- */
.appr-card {
  border-radius: 14px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--warn);   /* 承認待ち=要対応の琥珀 */
  transition: box-shadow .2s ease;
}
.appr-card:hover { box-shadow: var(--shadow-md); }
.appr-card__name { font-size: 17px; }
.appr-stage { font-weight: 600; }
.appr-stage__arrow { color: var(--accent); font-weight: 700; }
.appr-doc {
  border-radius: 10px;
  padding: 8px 12px;
  transition: background .15s, border-color .15s;
}
.appr-doc:hover { background: var(--accent-light); border-color: var(--accent); }
.appr-doc--missing:hover { background: var(--card-alt); border-color: var(--border); }
.appr-actions { margin-top: 2px; }
.appr-actions .btn-primary, .appr-actions .btn-danger, .appr-actions .btn-ghost {
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: 9px;
}

/* 承認カード: 書類を1行のチップ列に集約（未は破線チップ、面談記録の本文だけ全幅表示） */
.appr-docs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.appr-doc { display: inline-flex; width: auto; padding: 5px 12px; }
.appr-doc--missing { cursor: help; }
.appr-doc--note { width: 100%; flex-basis: 100%; align-items: flex-start; }

/* ---------- 見送り連絡待ち（お断りメールの送信キュー） ---------- */
.rejq__btn { font-size: 12px; padding: 5px 10px; min-height: 0; margin-left: 6px; }
.rejq__btn:first-child { margin-left: 0; }
@media (max-width: 640px) { .rejq__btn { margin: 2px 0 0 0; display: block; width: 100%; } }

/* 使い方ガイド（3ステップ）。番号は矩形・線で区切ったエディトリアル調 */
.rejq-guide {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  list-style: none; margin: 0 0 14px; padding: 0;
  border: 1px solid var(--border); border-radius: 2px; background: var(--card-alt);
}
.rejq-guide li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-left: 1px solid var(--border);
}
.rejq-guide li:first-child { border-left: 0; }
.rejq-guide__n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 2px;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.rejq-guide li > span:last-child { font-size: 13px; color: var(--text); line-height: 1.5; }
.rejq-guide b { font-weight: 700; }
.rejq-guide em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--text-light); line-height: 1.6; }
@media (max-width: 820px) {
  .rejq-guide { grid-template-columns: 1fr; }
  .rejq-guide li { border-left: 0; border-top: 1px solid var(--border); }
  .rejq-guide li:first-child { border-top: 0; }
}

/* 未登録者の案内（琥珀の細ライン＝注意だが警告ほど強くない） */
.rejq-hint {
  margin: 0 0 10px; padding: 9px 12px;
  border-left: 3px solid var(--warn); border-radius: 2px;
  background: var(--warn-light); font-size: 12px; color: #7a5f14; line-height: 1.7;
}

/* ---------- サイト管理: 1行タイル（2026-07-27・省スペース化） ----------
   サムネ＋説明＋メタ3行のカード（96px高×15件＝800px超）をやめ、名前と直近セッションだけの
   1行タイルに。詳細（機能・サーバー・技術・デプロイ）はホバーの title で読める。 */
.sites-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; }
.sites-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; min-height: 38px;
  background: var(--card); border: 1px solid var(--border); border-radius: 2px;
  font-size: 13px; color: var(--text); text-decoration: none;
  transition: background .12s, border-color .12s, transform .12s;
}
a.sites-row:hover { background: var(--card-alt); border-color: var(--accent); transform: translateX(1px); }
.sites-row__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sites-row__stat { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-light); font-variant-numeric: tabular-nums; }
.sites-row__stat i { font-style: normal; font-weight: 500; font-size: 10.5px; margin-left: 3px; color: var(--muted); }
.sites-row__ext { flex: 0 0 auto; width: 13px; height: 13px; color: var(--muted); }
a.sites-row:hover .sites-row__ext { color: var(--accent); }
.sites-group { margin-bottom: 14px; }
.sites-group__title { margin-bottom: 6px; }
.sites-group__count { border-radius: 2px; }
#sites-host .sites-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; }
#sites-host .sites-row__stat { display: none; }   /* 同ページ上部のGA4表と重複するため */

/* 資料マスタ: 基準月・出典を折りたたみに（2026-07-27） */
.master-field__meta > summary {
  list-style: none; cursor: pointer;
  font-size: 11px; color: var(--muted); padding: 2px 0;
}
.master-field__meta > summary::-webkit-details-marker { display: none; }
.master-field__meta > summary::before { content: '＋ '; font-weight: 700; }
.master-field__meta[open] > summary::before { content: '－ '; }
.master-field__meta > summary:hover { color: var(--text-light); }

/* 資料マスタ: スライドプレビューを折りたたみに（2026-07-27） */
details.master-preview > summary { cursor: pointer; list-style: none; }
details.master-preview > summary::-webkit-details-marker { display: none; }
.master-preview__title::before { content: '＋ '; font-weight: 700; color: var(--muted); }
details.master-preview[open] .master-preview__title::before { content: '－ '; }

/* ============================================================
   選考ボードの整理（2026-07-27）
   1ページ5,873px（6.5画面）のうち本体のパイプラインが12%しかなかったため、
   「見送り連絡待ち」「辞退・見送り分析」をタブへ分離し、カードを圧縮した。
   ============================================================ */

/* タブの件数バッジ（見送り連絡待ち＝やることが残っている数） */
.seg-tab__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 2px;
  background: var(--warn-light, #fdf3d7); color: #9a7414;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.seg-tab.is-active .seg-tab__badge { background: var(--card-alt); color: var(--text-light); }

/* 見送り連絡待ち: 残りを表示するボタン */
.rejq-more { display: flex; justify-content: center; margin-top: 10px; }
.rejq-more .btn-ghost { font-size: 13px; padding: 7px 18px; }

/* カードの圧縮: 1枚265px → 約120px（同じ列の高さで見える人数が2倍以上になる） */
.board__cards .pcard { padding: 9px 11px; }
.board__cards .pcard__name {
  font-size: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;   /* 「東京都◯◯区/女性/33歳/…」のような長い氏名は2行で打ち切り（全文はホバー） */
}
.board__cards .pcard__meta { margin-top: 4px; gap: 4px; font-size: 11.5px; }
.board__cards .pcard__tag { padding: 1px 6px; font-size: 11.5px; }
.board__cards .pcard__updated { margin-top: 5px; padding-top: 5px; font-size: 11.5px; }

/* 列が内部スクロールしていることに気づけるよう、つまみを見えるようにする */
.board__cards { max-height: 60vh; }
.board__cards::-webkit-scrollbar { width: 8px; }
.board__cards::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; border: 2px solid var(--card-alt); }

/* タブが5つに増えたぶん、狭い画面では折り返さず横スクロールさせる（縦積みで1文字ずつ折れるのを防ぐ） */
@media (max-width: 760px) {
  .people-head .seg-tabs { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .people-head .seg-tabs::-webkit-scrollbar { height: 0; }
  .seg-tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; }
}

/* ============================================================
   Webサイトページの整理（2026-07-27）
   横棒グラフ＋表で同じ数字を2回出していたのを、行内バーの1リストに統合した。
   ============================================================ */
.wsite-list { display: flex; flex-direction: column; }
.wsite-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(120px, 1fr) 108px 92px 78px;
  align-items: center; gap: 14px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.wsite-row:last-child { border-bottom: 0; }
.wsite-row--head {
  border-bottom: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 700; color: var(--text-light); padding-bottom: 7px;
}
.wsite-row--head .wsite-val, .wsite-row--head .wsite-sub, .wsite-row--head .wsite-mom { font-size: 12px; font-weight: 700; }
.wsite-row--head .wsite-track { background: transparent; }   /* 見出し行は帯の下地を出さない */
.wsite-name { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); min-width: 0; }
.wsite-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsite-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.wsite-track { height: 8px; border-radius: 2px; background: var(--card-alt); overflow: hidden; }
.wsite-bar { display: block; height: 100%; border-radius: 2px; }
.wsite-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.wsite-unit { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.wsite-sub { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-light); font-size: 12px; }
.wsite-mom { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }

@media (max-width: 860px) {
  .wsite-row { grid-template-columns: 1fr 96px 78px; row-gap: 6px; }
  .wsite-name { grid-column: 1 / -1; }
  .wsite-track { grid-column: 1 / 2; }
  .wsite-row--head .wsite-track { display: none; }
  .wsite-sub { display: none; }   /* 狭い画面ではPVを省く（ホバーで全指標が出る） */
}

/* 流入元テーブル: 構成比に帯を添える */
.share-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 62px; }
.share-num { font-variant-numeric: tabular-nums; }
.share-track { width: 100%; height: 4px; border-radius: 2px; background: var(--card-alt); overflow: hidden; }
.share-bar { display: block; height: 100%; border-radius: 2px; }