/* 求人管理 共通スタイル。
   soumu-task と同じフラット基調(クリーム地+白い表+薄い罫線、影なし)。
   アクセントはティール。PC優先(最大1400px)、900px未満は主要な表をカード表示に切り替える。 */

:root {
  --teal: #17BBB3;
  --gold: #CC9401;
  --green: #2DA253;
  --blue: #2D7DD2;
  --orange: #E34601;
  --danger: #C0392B;
  --yellow: #F0C24B;

  --cream: #F6EFDB;
  --surface: #ffffff;
  --border: #e6d9ae;
  --border-soft: #efe6c8;
  --ink: #222222;
  --ink-soft: #6b6b6b;

  --accent: var(--teal);
  --accent-soft: rgba(23, 187, 179, 0.10);
  --danger-soft: rgba(192, 57, 43, 0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
  color: var(--ink);
  background: var(--cream);
  display: flex;
  justify-content: center;
  padding: 16px 12px 32px;
  font-size: 14px;
  line-height: 1.5;
}

.screen {
  width: 100%;
  max-width: 1400px;
  background: var(--cream);
  position: relative;
}

.hidden { display: none !important; }

/* ---- ヘッダー ---- */
header.app-header {
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  flex-wrap: wrap;
}
.header-left { display: flex; align-items: center; gap: 10px; flex: none; }
/* アイコン画像が未配置でもレイアウトが崩れないよう固定サイズ */
.header-icon { width: 28px; height: 28px; display: block; border-radius: 6px; object-fit: cover; }
header.app-header h1 { font-size: 1.125rem; font-weight: 700; margin: 0; color: var(--ink); }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.header-right .who { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }
.header-right .who:empty { display: none; }
.role-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: 1px;
}

.hbtn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  height: 32px;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.1s ease;
}
.hbtn:active { background: #f0f0f0; }
.hbtn svg { width: 14px; height: 14px; }
.hbtn.is-loading svg { animation: spin 0.8s linear infinite; }

/* ---- 画面切替タブ ---- */
.nav-tabs-wrap {
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs-wrap::-webkit-scrollbar { display: none; }
.nav-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  min-width: max-content;
}
.nav-tab {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0 14px;
  height: 44px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-tab:active { background: var(--accent-soft); }
.nav-tab.is-active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

main.app-main { padding: 16px 20px 20px; }

/* ---- 各ビュー共通 ---- */
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.view-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.view-meta { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 500; }
.view-meta strong { color: var(--ink); font-weight: 700; }
.view-meta .hot { color: var(--danger); }
.view-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.readonly-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: #eeeeee;
  border-radius: 4px;
  padding: 2px 8px;
}
.help-line {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #FFF6D9;
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
}

/* ---- 進捗停滞の注意バナー(旧ExcelのMsgBox置き換え) ---- */
.stalled-banner {
  background: #FDE1E1;
  border: 1px solid #f3c2c2;
  border-left: 4px solid #9C0006;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.stalled-banner .banner-title { font-weight: 700; margin: 0 0 4px; color: #9C0006; }
.stalled-banner ul { margin: 0 0 6px; padding-left: 0.4em; list-style: none; }
.stalled-banner li { margin: 0; }
.stalled-banner .banner-more { color: var(--ink-soft); }
.stalled-banner .banner-note { margin: 0 0 8px; }
.stalled-banner .banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 件数クリックで絞り込み(応募管理) */
.count-toggle {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.count-toggle strong { color: var(--ink); font-weight: 700; }
.count-toggle strong.hot { color: var(--danger); }
.count-toggle.is-on { background: #FDE1E1; border-color: #f3c2c2; color: #9C0006; text-decoration: none; }
.count-toggle.is-on strong { color: #9C0006; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #9C0006;
  background: #FDE1E1;
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
}
.filter-chip .btn-link { color: #9C0006; padding: 0 4px; font-size: 0.75rem; }

/* ---- カード/セクション共通 ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-title .leaf { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }

/* ---- ボタン共通 ---- */
.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8125rem;
  border: none;
  border-radius: 6px;
  padding: 0 16px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.1s ease, background-color 0.1s ease, transform 0.05s ease;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}
.btn:active { opacity: 0.8; transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-block { width: 100%; display: flex; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink-soft); border: 1px solid var(--border); }
.btn-danger-ghost { background: #fff; color: var(--danger); border: 1px solid var(--danger); }
.btn-sm { font-size: 0.75rem; padding: 0 10px; height: 28px; }
.btn-link {
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  font-size: 0.75rem;
  padding: 4px 2px;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  height: auto;
}
.btn-link:hover { color: var(--accent); }
.btn-link.is-danger { color: var(--danger); }

/* ---- サブタブ(下線式) ---- */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; height: 36px; }
.tab-btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0 12px;
  height: 36px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn.is-active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }

/* ---- ツールバー ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  min-height: 36px;
}
.toolbar-group { display: contents; }
.toolbar .select-input { width: auto; min-width: 130px; height: 32px; flex: 0 0 auto; }
.search-input {
  flex: 1 1 180px;
  min-width: 150px;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px;
  height: 32px;
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--ink-soft); opacity: 0.9; }
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  height: 32px;
}
.check-label input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.toolbar-add-btn { flex: 0 0 auto; height: 36px; margin-left: auto; }
.toolbar-add-btn svg { width: 14px; height: 14px; }

/* ---- 入力共通 ---- */
select.select-input {
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b6b' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 26px 0 10px;
  height: 32px;
  -webkit-appearance: none;
  appearance: none;
}
select.select-block { width: 100%; height: 36px; }
input.text-input, input.date-input, textarea.detail-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  -webkit-appearance: none;
  appearance: none;
  min-height: 36px;
}
input.text-input::placeholder, textarea.detail-input::placeholder, input.cell-input::placeholder { color: var(--ink-soft); opacity: 0.8; }
/* PIN・ログインコード欄はtype="password"だとiOS/Chrome/Edgeの「強力なパスワードを保存」機能が
   介入し、入力した値と違う文字列で保存・自動入力されて正しく登録・ログインできなくなる不具合が
   実際に発生した(2026-09-07)。type="text"にしつつ、この疑似CSSで見た目だけドット表示にする。 */
#pinInput, #consultantCodeInput {
  -webkit-text-security: disc;
  text-security: disc;
}
textarea.detail-input { resize: none; overflow: hidden; min-height: 56px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.field-label .req { font-size: 0.625rem; color: var(--danger); font-weight: 700; margin-left: 4px; }

/* セグメントボタン(雇用区分) */
.seg-group { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-btn {
  flex: 1 1 auto;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0 8px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 700; }

/* ---- ピル(進捗・募集状況) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 8px;
  white-space: nowrap;
  line-height: 1;
}
/* Excel条件付き書式に合わせた進捗色: red=応募受付(未着手・要注意) / yellow=選考中系・保留 / green=採用 / gray=終了 */
.pill-red { background: #FFC8CE; color: #9C0006; }
.pill-yellow { background: #FFF3CD; color: #92400E; }
.pill-blue { background: rgba(45,125,210,0.14); color: var(--blue); }
.pill-green { background: #DCF7E7; color: #1B5E20; }
.pill-gray { background: #ececec; color: var(--ink-soft); }
.pill-orange { background: rgba(227,70,1,0.12); color: var(--orange); }
/* 募集状況: 掲載中=緑 / 停止=ピンク */
.pill-live { background: #C6F1CE; color: #006100; }
.pill-stop { background: #FFC8CE; color: #9C0006; }
/* 進捗をその場で変えられる select 版ピル */
select.pill-select {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  height: 24px;
  border: none;
  border-radius: 4px;
  padding: 0 22px 0 8px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23444' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  max-width: 100%;
}
select.pill-select.pill-red { background-color: #FFC8CE; color: #9C0006; }
select.pill-select.pill-yellow { background-color: #FFF3CD; color: #92400E; }
select.pill-select.pill-blue { background-color: rgba(45,125,210,0.14); color: var(--blue); }
select.pill-select.pill-green { background-color: #DCF7E7; color: #1B5E20; }
select.pill-select.pill-gray { background-color: #ececec; color: var(--ink-soft); }
select.pill-select:disabled { opacity: 0.6; cursor: default; }

/* 掲載中/停止 の切替ボタン(ピル型) */
.toggle-pill {
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
}
.toggle-pill:active { opacity: 0.8; }
.toggle-pill:disabled { cursor: default; }
/* ○/－ の切替 */
.mark-toggle {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  width: 34px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.mark-toggle.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.mark-toggle:disabled { cursor: default; border-color: transparent; background: none; }

/* ---- 統計タイル(サマリー上段) ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 0;
}
.stat-tile .stat-label { font-size: 0.6875rem; color: var(--ink-soft); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile .stat-value { font-size: 1.25rem; font-weight: 800; line-height: 1.3; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-tile .stat-value small { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); margin-left: 2px; }
.stat-tile.is-hot .stat-value { color: var(--danger); }
.stat-tile.is-accent .stat-value { color: var(--accent); }

/* ---- データ表(共通) ---- */
.dt-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.card .dt-wrap { border: none; border-radius: 0; }
.dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.dt td { white-space: nowrap; }
.dt thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: #fbf8ee;
  white-space: nowrap;
  line-height: 1.35;
  vertical-align: bottom;
}
.dt thead th.num, .dt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dt thead th.ctr, .dt td.ctr { text-align: center; }
.dt thead th.grp { text-align: center; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border-soft); }
.dt thead th.grp-calc { background: var(--accent-soft); }
.dt tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  background: #fff;
  color: var(--ink);
}
.dt tbody tr:last-child td { border-bottom: none; }
.dt tbody tr:hover td { background: #fdfbf4; }
.dt td.col-loc, .dt th.col-loc { font-weight: 700; white-space: nowrap; }
.dt td.grp-start { border-left: 1px solid var(--border-soft); }
.dt td.calc { background: rgba(23,187,179,0.04); }
.dt td.col-text { min-width: 160px; max-width: 320px; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; }
.dt td.col-memo { min-width: 180px; max-width: 300px; font-size: 0.75rem; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.dt td.col-alert { min-width: 160px; max-width: 260px; }
.dt .empty-row td { text-align: center; color: var(--ink-soft); padding: 22px 10px; font-size: 0.8125rem; }
.dt .total-row td { font-weight: 700; background: #fbf8ee; border-top: 1px solid var(--border); }
.dt .sub-row td { color: var(--ink-soft); font-size: 0.75rem; }
.num-hot { color: var(--danger); font-weight: 700; }
.num-zero { color: var(--ink-soft); }
.dash { color: var(--ink-soft); }
/* アラート文言(Excel条件付き書式の色): 1行1件 */
.alert-line { display: block; width: max-content; max-width: 100%; font-size: 0.75rem; font-weight: 700; line-height: 1.5; padding: 1px 6px; border-radius: 3px; margin: 2px 0; white-space: normal; }
.alert-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 1.5; padding: 1px 6px; border-radius: 3px; white-space: normal; }
.alert-red { color: #9C0006; background: #FDE1E1; }
.alert-yellow { color: #92400E; background: #FFF3CD; }
.alert-pink { color: #9C0006; background: #FFC8CE; }
/* サマリー表: 選考中が0人のセル=薄黄、AW無料○のセル=薄水色 */
.dt td.cell-zero-warn { background: #FFF3CD !important; }
.dt td.cell-mark-on { background: #DDF3F7 !important; }
.alert-inline { display: block; font-size: 0.6875rem; color: var(--danger); font-weight: 700; margin-top: 3px; }
.cell-sub { display: block; font-size: 0.6875rem; color: var(--ink-soft); margin-top: 2px; }
.pct-up { color: var(--green); font-weight: 700; }
.pct-down { color: var(--danger); font-weight: 700; }

/* 「今日対応した」(経過日数セル内の小ボタン)と進捗更新日の表示 */
.touch-btn { height: 22px; font-size: 0.6875rem; padding: 0 7px; margin-top: 3px; font-weight: 500; }
.updated-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; }
.updated-text { font-size: 0.8125rem; color: var(--ink); }

/* ---- 応募管理の一覧: PCでは画面幅に収める / 操作列を右端固定 / 上側スクロールバー ---- */
.name-link {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(23,187,179,0.6);
  text-underline-offset: 3px;
}
.name-link:hover { color: #0E8F8A; }
.cell-input.cell-date { width: 100%; max-width: 132px; height: 28px; padding: 0 4px; font-size: 0.75rem; min-width: 0; }
/* メモ/電話番号のその場編集 */
.dt td.cell-editable { cursor: text; }
.dt td.cell-editable:hover { background: #fffbef; }
.cell-placeholder { color: #b5b5b5; font-size: 0.75rem; }
.cell-input.inline-edit { width: 100%; min-width: 0; font-size: 0.75rem; }
.cell-input.inline-phone { height: 28px; padding: 0 6px; }
textarea.cell-input.inline-memo { height: 48px; padding: 4px 6px; line-height: 1.5; resize: none; overflow: hidden; white-space: pre-wrap; font-family: inherit; }
.memo-clip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
}
/* 操作列は常に右端に固定(横スクロールが出ても編集ボタンが見える) */
.dt-applicants th:last-child, .dt-applicants td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 1px 0 0 var(--border-soft);
}
.dt-applicants thead th:last-child { background: #fbf8ee; }
.dt-applicants tbody tr:hover td:last-child { background: #fdfbf4; }
.hscroll-top { overflow-x: auto; overflow-y: hidden; height: 12px; margin-bottom: 2px; }
.hscroll-top .hscroll-inner { height: 1px; }
@media (min-width: 1280px) {
  .dt-applicants { table-layout: fixed; width: 100%; }
  .dt-applicants td { white-space: normal; word-break: break-all; vertical-align: middle; }
  .dt-applicants td.col-memo { max-width: none; min-width: 0; }
  .dt-applicants .c-date { width: 84px; }
  .dt-applicants td:nth-child(1) { white-space: nowrap; }
  .dt-applicants .c-loc { width: 64px; }
  .dt-applicants .c-type { width: 64px; }
  .dt-applicants .c-pos { width: 80px; }
  .dt-applicants .c-name { width: 100px; }
  .dt-applicants .c-phone { width: 104px; }
  .dt-applicants .c-media { width: 100px; }
  .dt-applicants .c-status { width: 118px; }
  .dt-applicants .c-next { width: 124px; }
  /* 区分・募集枠・媒体は短い固定語なので途中で折らない(余白はメモ列が吸収) */
  .dt-applicants td:nth-child(3), .dt-applicants td:nth-child(4), .dt-applicants td:nth-child(7) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-applicants .c-interview { width: 120px; }
  .dt-applicants .c-days { width: 92px; }
  .dt-applicants .c-ops { width: 60px; }
  .dt-applicants td:last-child { padding-left: 4px; padding-right: 6px; }
}

/* 列見出しクリックで並び替え */
.dt thead th.sortable { cursor: pointer; user-select: none; }
.dt thead th.sortable:hover { color: var(--ink); }
.dt thead th.sortable.is-sorted { color: #0E8F8A; }
.sort-arrow { display: inline-block; width: 1em; font-size: 0.6875rem; margin-left: 2px; color: #0E8F8A; }
.cards-sort { display: none; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.75rem; color: var(--ink-soft); font-weight: 500; }
.cards-sort .select-input { flex: 1; height: 32px; }
@media (max-width: 899.98px) { .cards-sort { display: flex; } }

/* ---- 列フィルター(Excelオートフィルター風) ---- */
#view-applicants { position: relative; }
.dt-applicants thead th .th-label { display: inline-block; vertical-align: middle; }
.col-filter-btn {
  font-family: inherit;
  font-size: 0.5625rem;
  line-height: 1;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.col-filter-btn:hover { background: var(--cream); color: var(--ink); }
.col-filter-btn.is-open { border-color: var(--accent); color: var(--accent); }
/* 絞り込み中はファネル(漏斗)表示 + 見出しをアクセント色 */
.col-filter-btn.is-filtered { color: #fff; background: #0E8F8A; border-color: #0E8F8A; }
.dt-applicants thead th.is-filtered .th-label { color: #0E8F8A; }
.col-popover {
  position: absolute;
  z-index: 50;
  width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  font-size: 0.8125rem;
  color: var(--ink);
}
.pop-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}
.pop-item:hover { background: var(--cream); }
.pop-item:disabled { color: #b5b5b5; cursor: default; background: none; }
.pop-sep { border-top: 1px solid var(--border-soft); margin: 4px 0; }
.pop-search { width: 100%; height: 30px; margin: 4px 0 6px; }
.pop-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: 4px; padding: 2px 0; }
.pop-check { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; font-size: 0.8125rem; }
.pop-check:hover { background: var(--cream); }
.pop-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); flex: none; }
.pop-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-check.is-all { font-weight: 700; border-bottom: 1px solid var(--border-soft); }
.pop-empty { padding: 10px 8px; color: var(--ink-soft); font-size: 0.75rem; text-align: center; }
.pop-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.pop-actions .btn { height: 30px; padding: 0 14px; }
@media (max-width: 899.98px) { .col-filter-btn, .col-popover { display: none !important; } }

/* 停滞中の応募者行に薄い赤の左ボーダー */
.dt tr.is-stalled td:first-child { box-shadow: inset 3px 0 0 rgba(192,57,43,0.55); }

/* 編集可能な表: セル内入力 */
.cell-input {
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 8px;
  height: 30px;
  min-width: 60px;
  -webkit-appearance: none;
  appearance: none;
}
.cell-input.cell-num { width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-input.cell-yen { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-input.cell-text { width: 100%; min-width: 160px; }
.cell-input.cell-short { width: 90px; }
.cell-input:disabled, .cell-input[readonly] { background: transparent; border-color: transparent; color: var(--ink); padding: 0; height: auto; }
.dt td.col-save { width: 70px; white-space: nowrap; text-align: right; }
.dt tr .save-btn { visibility: hidden; }
.dt tr.is-dirty .save-btn { visibility: visible; }
.dt tr.is-dirty td { background: #fffbef; }
.dt tr.is-saving .save-btn { opacity: 0.6; }
.dt tr.is-saved td { animation: savedFlash 1.2s ease; }
@keyframes savedFlash { 0% { background: var(--accent-soft); } 100% { background: #fff; } }

/* 週次: 左端列を固定して横スクロール */
.dt-sticky th:first-child, .dt-sticky td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset -1px 0 0 var(--border-soft);
  min-width: 110px;
}
.dt-sticky thead th:first-child { background: #fbf8ee; z-index: 3; }
.dt-sticky .total-row td:first-child { background: #fbf8ee; }
.dt-weekly td, .dt-weekly th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 72px; }
/* 週が少ないうちは拠点列が横に伸びないよう、余白は週の列に均等に配る */
.dt-weekly td:first-child, .dt-weekly th:first-child { text-align: left; width: 1%; }
.dt-weekly th.is-current, .dt-weekly td.is-current { background: var(--accent-soft) !important; }
.dt-weekly th.is-current { color: var(--ink); }
.dt-weekly .total-row td.is-current { background: rgba(23,187,179,0.18) !important; }

/* 月合計(概算)行・応募効果アラート */
.dt .monthly-row td { font-weight: 700; background: #FFF6D9; border-top: 1px solid var(--border); }
.dt .monthly-row td:first-child { background: #FFF6D9; }
.alert-warn { color: var(--orange); font-weight: 700; white-space: normal; }
.dt-eff td { white-space: normal; }
.threshold-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.threshold-chip {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  background: #f3f0e4;
  border-radius: 4px;
  padding: 3px 8px;
}
.threshold-chip strong { color: var(--ink); }

/* ---- インラインSVGグラフ ---- */
.summary-weekly { margin-top: 16px; }
.chart-title { font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.chart-note { font-size: 0.6875rem; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 0; }
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { width: 100%; height: auto; display: block; font-family: inherit; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: var(--ink-soft); margin-top: 6px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legend-swatch.is-dashed { height: 0; border-top: 2px dashed #888; background: none !important; }
.legend-swatch.is-bar { width: 10px; height: 10px; border-radius: 2px; }

/* 週次セルの出どころ表示と本部の手動訂正 */
.dt-weekly td.src-carry .cell-val { color: #9a9a9a; font-style: italic; }
.dt-weekly td.is-editable { cursor: pointer; }
.dt-weekly td.is-editable .cell-val { border-bottom: 1px dotted #b9b9b9; }
.dt-weekly td.is-editable:hover .cell-val { border-bottom-color: var(--accent); color: var(--ink); }
.dt-weekly td.is-saving { opacity: 0.6; }
.dt-weekly input.weekly-edit { width: 84px; height: 26px; padding: 0 6px; text-align: right; font-size: 0.8125rem; }

/* ④ 費用対採用のKPIタイル */
.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.stat-tile .stat-sub { font-size: 0.6875rem; color: var(--ink-soft); margin-top: 2px; }

/* 記入ルール表 */
.dt-rules { min-width: 900px; }
.dt-rules td { font-size: 0.75rem; vertical-align: top; line-height: 1.6; white-space: normal; }
.dt-rules td:first-child { font-weight: 700; white-space: nowrap; }

/* ---- カード表示(900px未満) ---- */
.cards-wrap { display: none; }
.item-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  padding: 12px 12px 12px 14px;
  margin-bottom: 10px;
}
.item-card.is-stalled { border-left-color: var(--danger); }
.item-card.is-stopped { border-left-color: #bbb; }
.item-card.is-active { border-left-color: var(--green); }
.item-card:last-child { margin-bottom: 0; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.card-title { font-weight: 700; font-size: 0.9375rem; margin: 0; }
.card-meta { font-size: 0.75rem; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.card-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px 10px;
  margin: 8px 0;
}
.card-kv .kv-label { display: block; font-size: 0.625rem; color: var(--ink-soft); }
.card-kv .kv-value { display: block; font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-kv .kv-value.num-hot { color: var(--danger); }
.card-note { font-size: 0.75rem; color: var(--ink-soft); margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; }
.card-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.empty-note { text-align: center; color: var(--ink-soft); font-size: 0.8125rem; padding: 18px 8px; }
.loading-row { text-align: center; padding: 20px; color: var(--ink-soft); font-size: 0.8125rem; }

/* ---- トースト ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(34, 34, 34, 0.92);
  color: #fff;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 10px 20px;
  border-radius: 6px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { background: rgba(192, 57, 43, 0.95); }

/* ---- 登録/編集シート ---- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sheet {
  width: 100%;
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink); }
.modal-close-btn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn:active { background: #f0f0f0; }
.sheet .field-block { margin-bottom: 12px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 8px; }
.sheet-actions .btn { flex: 1; }
.sheet-delete { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); text-align: center; }
.delete-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--danger);
  font-weight: 500;
}

.spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- ゲート ---- */
.gate-wrap { padding: 40px 18px; text-align: center; max-width: 400px; margin: 0 auto; }
.gate-icon { width: 56px; height: 56px; display: block; margin: 0 auto; border-radius: 12px; object-fit: cover; }
.gate-wrap h1 { font-size: 1.1rem; font-weight: 700; margin: 10px 0 20px; }
.gate-card { text-align: left; }
.gate-desc { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.7; }
.gate-confirm-text { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin: 0 0 14px; line-height: 1.7; }
.gate-error { color: var(--danger); font-size: 0.8rem; font-weight: 500; margin: 10px 0 0; display: none; line-height: 1.6; }
.gate-error.is-visible { display: block; }
.gate-notice { display: none; color: var(--danger); font-size: 0.8125rem; font-weight: 700; margin: 0 0 14px; line-height: 1.6; }
.gate-notice.is-visible { display: block; }
.gate-switch { display: block; margin: 14px auto 0; }

footer.app-footer { text-align: center; padding: 14px 18px 2px; font-size: 0.6875rem; color: var(--ink-soft); }

/* ---- 1200px未満: タイルを4列に ---- */
@media (max-width: 1199.98px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 900px未満: スマホ向け ---- */
@media (max-width: 899.98px) {
  body { padding: 8px 8px 24px; }
  /* スマホは2段(タイトル行/操作行)になるので高さ固定を外す */
  header.app-header { height: auto; padding: 8px 12px 10px; }
  .app-header-row { justify-content: center; text-align: center; gap: 8px; }
  .header-right { justify-content: center; width: 100%; }
  main.app-main { padding: 12px 12px 16px; }
  .nav-tabs { padding: 0 4px; }
  .nav-tab { padding: 0 10px; font-size: 0.8125rem; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stat-tile { padding: 6px 8px; }
  .stat-tile .stat-value { font-size: 1.0625rem; }

  /* サマリー・応募管理・求人別・広告一覧はカード表示に切替 */
  #view-summary .dt-wrap, #view-applicants .dt-wrap, #view-series .dt-wrap, #view-ads .dt-wrap { display: none; }
  #view-summary .cards-wrap, #view-applicants .cards-wrap, #view-series .cards-wrap, #view-ads .cards-wrap { display: block; }

  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
  .toolbar .select-input { flex: 1 1 30%; min-width: 0; }
  .search-input { flex: 1 1 100%; }
  .toolbar-add-btn { flex: 1 1 100%; margin-left: 0; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .sheet-overlay { padding: 10px; align-items: flex-end; }
  .sheet { max-height: 94vh; padding: 16px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 期間切替ピル(成績表タブ。saiyo-site-appと同じ見た目) ---- */
.period-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.period-pill {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0 14px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.period-pill.is-active { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }

/* ==================== 成績表(採用サイト管理アプリ saiyo-site-app からの移植。.stg-名前空間で分離) ====================
   デザイントークン(--ink/--accent/--border等)はこのアプリと共通なのでCSSはそのまま流用している。 */
.stg-sub { font-size: 0.75rem; color: var(--ink-soft); margin: 0 0 10px; }

/* ---- スコアボード ---- */
.stg-scoreboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.stg-tile { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stg-tile-label { font-size: 0.6875rem; color: var(--ink-soft); font-weight: 700; }
.stg-tile-value { font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.stg-tile-note { font-size: 0.625rem; color: var(--ink-soft); }
.stg-delta { font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stg-delta.is-up { color: #1c7a38; }
.stg-delta.is-down { color: var(--danger); }
.stg-delta.is-flat { color: var(--ink-soft); }

/* ---- リーダーボード ---- */
.stg-leaderboards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stg-lb { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.stg-lb-head { padding: 8px 10px; font-size: 0.75rem; font-weight: 700; background: var(--accent-soft); color: #0C7C77; }
.stg-lb.stg-lb-worst .stg-lb-head { background: var(--danger-soft); color: var(--danger); }
.stg-lb ol { list-style: none; margin: 0; padding: 0; }
.stg-lb li { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-top: 1px solid var(--border-soft); }
.stg-lb li:first-child { border-top: none; }
.stg-lb .stg-rk { font-weight: 900; font-size: 0.8125rem; color: var(--ink-soft); width: 1.1em; flex: none; }
.stg-lb .stg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stg-lb .stg-nm { font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-lb .stg-st { font-size: 0.625rem; color: var(--ink-soft); }
.stg-lb .stg-val { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 0.8125rem; flex: none; color: var(--accent); }
.stg-lb.stg-lb-worst .stg-val { color: var(--danger); }
.stg-lb-empty { padding: 12px; color: var(--ink-soft); font-size: 0.75rem; }

/* ---- 市場基準の帯 ---- */
.stg-benchmark-strip { font-size: 0.6875rem; color: var(--ink-soft); background: #FBF8ED; border: 1px dashed var(--border-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.stg-benchmark-strip b { color: #615636; font-variant-numeric: normal; }

/* ---- 絞り込みピル ---- */
.stg-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.stg-filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stg-fg-label { font-size: 0.6875rem; color: var(--ink-soft); font-weight: 700; margin-right: 2px; }
.stg-fpill { font-family: inherit; font-size: 0.6875rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-soft); cursor: pointer; }
.stg-fpill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- 求人名トグル ---- */
.stg-table-controls { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.stg-wrap-toggle { font-size: 0.6875rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.stg-wrap-toggle input { accent-color: var(--accent); }

/* ---- 成績表(求人別)テーブル ---- */
.stg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--border); max-width: 100%; }
.stg-table { border-collapse: collapse; font-size: 0.75rem; table-layout: fixed; width: auto; }
.stg-table thead th {
  background: var(--ink); color: #fdf9ec; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.02em;
  padding: 8px 9px; text-align: right; white-space: nowrap; cursor: pointer; user-select: none; position: relative; overflow: hidden;
}
.stg-table thead th:hover { background: #3d3a30; }
.stg-table .th-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.stg-arrow { margin-left: 3px; opacity: 0.85; }
.stg-table th:nth-child(1), .stg-table td:nth-child(1) { text-align: center; }
.stg-table th:nth-child(2), .stg-table td:nth-child(2),
.stg-table th:nth-child(3), .stg-table td:nth-child(3),
.stg-table th:nth-child(4), .stg-table td:nth-child(4) { text-align: left; }
.stg-table td { padding: 7px 9px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; color: var(--ink); }
.stg-table tbody tr:nth-child(even) td { background: #FBF8EE; }
.stg-table tbody tr:hover td { background: var(--accent-soft); }
.stg-table td.numcell, .stg-table th.numcell { font-variant-numeric: tabular-nums; text-align: right; }
.stg-jobname { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 700; }
.stg-rate { color: var(--ink-soft); font-size: 0.6875rem; margin-left: 3px; }
.stg-amb { color: #8a6300; cursor: help; margin-left: 2px; }

/* 列のドラッグリサイズ */
.stg-col-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; z-index: 5; }
.stg-col-resizer:hover, .stg-col-resizer.active { background: rgba(255, 255, 255, 0.28); }
body.stg-col-resizing { cursor: col-resize; }
body.stg-col-resizing * { user-select: none; }

/* 求人名を全部表示トグル */
.stg-table.stg-wrap-names td.stg-namecell { white-space: normal; }
.stg-table.stg-wrap-names td.stg-namecell .stg-jobname { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }

/* 成績表の先頭3列(判定・店・求人名)を固定 */
#statsMainTable th:nth-child(1), #statsMainTable td:nth-child(1),
#statsMainTable th:nth-child(2), #statsMainTable td:nth-child(2),
#statsMainTable th:nth-child(3), #statsMainTable td:nth-child(3) { position: sticky; z-index: 2; }
#statsMainTable th:nth-child(1), #statsMainTable td:nth-child(1) { left: 0; }
#statsMainTable th:nth-child(2), #statsMainTable td:nth-child(2) { left: var(--stg-sticky-2, 92px); }
#statsMainTable th:nth-child(3), #statsMainTable td:nth-child(3) { left: var(--stg-sticky-3, 174px); box-shadow: 2px 0 4px rgba(30, 20, 0, 0.12); }
#statsMainTable thead th:nth-child(1), #statsMainTable thead th:nth-child(2), #statsMainTable thead th:nth-child(3) { background: var(--ink); z-index: 3; }
#statsMainTable tbody tr td:nth-child(1), #statsMainTable tbody tr td:nth-child(2), #statsMainTable tbody tr td:nth-child(3) { background: #fff; }
#statsMainTable tbody tr:nth-child(even) td:nth-child(1), #statsMainTable tbody tr:nth-child(even) td:nth-child(2), #statsMainTable tbody tr:nth-child(even) td:nth-child(3) { background: #FBF8EE; }
#statsMainTable tbody tr:hover td:nth-child(1), #statsMainTable tbody tr:hover td:nth-child(2), #statsMainTable tbody tr:hover td:nth-child(3) { background: var(--accent-soft); }

.stg-table tfoot tr { background: #EFE9D8; }
.stg-table tfoot td { color: #615636; border-bottom: 1px solid var(--border); }
.stg-avg-label { font-weight: 700; }
.stg-foot-note { font-size: 0.6875rem; color: var(--ink-soft); margin-top: 8px; min-height: 1em; }

/* ---- 判定バッジ・指数チップ・状況ドット ---- */
.stg-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.625rem; font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; }
.stg-badge-継続 { background: rgba(45, 162, 83, 0.14); color: #1c7a38; }
.stg-badge-改善 { background: rgba(204, 148, 1, 0.16); color: #8a6300; }
.stg-badge-停止検討 { background: rgba(192, 57, 43, 0.12); color: var(--danger); }
.stg-badge-判断保留 { background: rgba(140, 128, 100, 0.16); color: #615636; }

.stg-idx { display: inline-block; min-width: 40px; padding: 2px 7px; border-radius: 6px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.stg-idx.is-good { background: rgba(45, 162, 83, 0.14); color: #1c7a38; }
.stg-idx.is-mid { background: #F1E9D2; color: var(--ink-soft); }
.stg-idx.is-bad { background: rgba(192, 57, 43, 0.12); color: var(--danger); }

.stg-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.stg-status-終了 { background: #9a9a9a; }
.stg-status-休止中 { background: var(--gold); }
.stg-status-掲載中, .stg-status-配信中 { background: var(--green); }

.stg-weak { font-size: 0.6875rem; color: var(--ink-soft); }
.stg-weak-none { color: var(--ink-soft); opacity: 0.6; }

/* ---- 店舗別順位表 ---- */
.stg-table-store td, .stg-table-store th { white-space: nowrap; }
#statsStoreTable th:first-child, #statsStoreTable td:first-child { position: sticky; left: 0; z-index: 2; }
#statsStoreTable thead th:first-child { background: var(--ink); z-index: 3; }
#statsStoreTable tbody tr td:first-child { background: #fff; }
#statsStoreTable tbody tr:nth-child(even) td:first-child { background: #FBF8EE; }

/* ---- 求人カード(要対応トップ3) ---- */
.stg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stg-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.stg-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.stg-card-name { font-weight: 900; font-size: 0.875rem; line-height: 1.35; }
.stg-card-meta { font-size: 0.6875rem; color: var(--ink-soft); margin-top: 2px; }
.stg-stat-block { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding: 6px 0; }
.stg-stat-row { display: grid; grid-template-columns: 52px repeat(4, 1fr); gap: 4px; align-items: baseline; padding: 2px 0; }
.stg-stat-row.stg-stat-head { color: var(--ink-soft); font-size: 0.5938rem; font-weight: 700; }
.stg-stat-row .stg-lbl { font-size: 0.6875rem; color: var(--ink-soft); font-weight: 700; }
.stg-stat-row .stg-v { font-variant-numeric: tabular-nums; font-size: 0.6875rem; text-align: right; color: var(--ink); }
.stg-card-spark { display: flex; align-items: center; gap: 10px; }
.stg-card-spark svg { flex: none; }
.stg-spark-note { font-size: 0.6875rem; color: var(--ink-soft); }
.stg-spark-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.stg-weak-line { font-size: 0.75rem; }
.stg-next-move { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 10px; font-size: 0.75rem; color: #0C7C77; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; justify-content: space-between; }
.stg-next-move b { color: #0C7C77; }
.stg-next-move .btn-link { font-size: 0.6875rem; flex: none; }

/* ---- レスポンシブ ---- */
@media (max-width: 1300px) { .stg-leaderboards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .stg-scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .stg-cards { grid-template-columns: 1fr; }
  .stg-leaderboards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stg-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stg-tile { padding: 8px 10px; }
  .stg-tile-value { font-size: 1.1rem; }
}

/* ==================== 採用サイト管理(saiyo-site-app)からの移植: FAQ/求人別/広告一覧/取り込み/設定 ==================== */
/* ---- 「?」ヘルプ/FAQ ---- */


.help-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}


.help-btn:active { background: var(--accent-soft); }


.help-btn.is-open { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }


.faq-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 14px;
  margin-bottom: 14px;
}


.faq-item { border-bottom: 1px dashed var(--border-soft); padding: 8px 0; }


.faq-item:last-child { border-bottom: none; }


.faq-q {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  display: flex;
  gap: 6px;
}


.faq-q::before { content: "Q"; color: var(--accent); flex: none; }


.faq-a { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; line-height: 1.7; padding-left: 1.1em; white-space: pre-wrap; }

/* ---- 図解「こうなっている→ということは→こうしないとだめ」: 名前+バッジの行 ---- */


.flow-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }


.flow-header .flow-name { font-size: 0.9375rem; font-weight: 700; color: var(--ink); margin: 0; }

/* 見出し = 店舗+雇用形態(大)、職種名(小・灰色)の2行。summaryカード/求人別詳細/広告詳細/
   求人別リストのカード表示で共通利用する(何より「どの店舗の、正社員かパートか」が要点)。 */


.flow-title-block { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }


.flow-title-big { font-size: 1.15rem; font-weight: 800; color: var(--ink); }


.flow-title-sub { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }


.detail-title-big { font-size: 1.15rem; font-weight: 800; color: var(--ink); display: block; }


.detail-title-sub { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); display: block; }


.card-title-block { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }


.card-title-big { font-size: 1rem; font-weight: 800; color: var(--ink); }


.card-title-sub { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); }


.flow-badge {
  flex: none;
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---- 図解: 3箱を→でつなぐ ---- */


.flow-diagram { display: flex; align-items: stretch; gap: 6px; margin: 0 0 10px; }


.flow-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}


.flow-box-1 { flex: 1.2 1 0; }


.flow-box-2 { flex: 1 1 0; background: #fdf3d9; border-color: #f0dfa0; justify-content: center; }


.flow-box-3 { flex: 1.2 1 0; }


.flow-box-head { font-size: 0.6875rem; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.02em; margin: 0 0 8px; }


.flow-box-text { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.55; margin: 0; }


.flow-box-2 .flow-box-text { font-size: 1.05rem; }


.flow-box-3 .flow-box-text { margin: 0 0 8px; }


.flow-arrow-wrap { flex: none; width: 24px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }


.flow-arrow-wrap svg { width: 20px; height: 20px; }


.flow-more-link { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--accent); }


.flow-diagram.is-severe .flow-box { border-color: var(--danger); }


.flow-diagram.is-severe .flow-box-2 { background: #fbe9e6; }


.flow-note { font-size: 0.6875rem; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.6; }


.flow-note-plain { font-size: 0.75rem; color: var(--ink); }

/* ---- 図解 v2「ストーリー型」: ①3か月の推移(全幅) → ③注目する数字/④ということは(3:2横並び) →
   ⑤だから、こうする(全幅・帯) → ⑥広告ごとの実績(全幅)。旧レイアウト(.flow-diagram の3箱横並び)は
   flow.stages の無い旧データ向けに残す。 */


.flow-diagram-story { display: flex; flex-direction: column; gap: 10px; }


.story-section { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; min-width: 0; }


.story-head { font-size: 0.6875rem; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.02em; margin: 0 0 8px; }


.story-arrow { text-align: center; color: var(--ink-soft); font-size: 1rem; line-height: 1; }

/* ③注目する数字/④総評は全幅で縦に並べる(以前は3:2の横並びだったが、③の各行が
   左右2カラムを持つようになったため、③自体は全幅の方が読みやすい)。 */


.story-focus { min-width: 0; }


.story-readings { min-width: 0; background: #fdf3d9; border-color: #f0dfa0; }


.story-must { border-left: 4px solid var(--accent); }


.story-must-text { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; line-height: 1.5; }


.flow-diagram-story.is-severe .story-must { border-left-color: var(--danger); }

/* ---- ①月ごとの推移: 指標ごとのミニグラフのみ(表は廃止、数字はグラフの2段目に統合) ----
   3個を1行に(デスクトップ、≥900px)、900px以下で2列、560px以下で1列。
   グラフ自体が縦に短いので、電話幅で1列になっても縦に長くなりすぎない。 */


.trend-charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }

/* 1つ1つのグラフを明確に区切られた箱にする(どこからどこまでが1つのグラフか一目でわかるように)。 */


.trend-mini-chart { min-width: 0; background: #fff; border: 1px solid #e8e0c8; border-radius: 8px; padding: 10px 12px; }

/* 見出しは大きく太字で単独の行。参考文(自社の他/他社)は詰めずに別行・小さい灰色にする。 */


.trend-mini-title { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin: 0 0 3px; }


.trend-mini-mark { font-weight: 800; }


.trend-mini-mark.is-good { color: var(--green); }


.trend-mini-mark.is-bad { color: var(--danger); }


.trend-mini-mark.is-warn { color: var(--orange); }


.trend-mini-bench { font-size: 0.72rem; font-weight: 400; color: var(--ink-soft); margin: 0 0 4px; }

/* 費用チャート専用の凡例(見出しのすぐ下)。■=表示回数の棒、─=費用の折れ線。 */


.trend-mini-legend-line { font-size: 0.72rem; color: var(--ink-soft); margin: 0 0 4px; }


.trend-mini-legend-sq { color: #a9cfcb; font-weight: 800; }


.trend-mini-legend-ln { color: var(--orange); font-weight: 800; }

/* 費用チャート専用のキャプション(直近2完了月の費用↔表示の増減から一言) */


.trend-mini-caption { font-size: 0.72rem; font-weight: 700; margin: 5px 0 0; color: var(--ink-soft); }


.trend-mini-caption.is-bad { color: var(--danger); }


.trend-mini-caption.is-good { color: var(--green); }

/* 棒の上の値ラベル。切れることは絶対にしない(必要なら折り返す)。 */


.trend-mini-values { display: flex; gap: 6px; }


.trend-mini-values span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.75rem; font-weight: 800; color: var(--ink); overflow-wrap: break-word; }


.trend-mini-plot { position: relative; margin-top: 2px; }

/* 棒の帯は必ずグラフ下端に固定する(costOverlayがある表示チャートは上に24pxの帯を空けて費用の
   折れ線専用にするため、棒側はJS側でheightを渡して下端寄せにする)。 */


.trend-mini-bars { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 6px; }


.trend-mini-bars > div { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: flex-end; height: 100%; }


.trend-mini-bar { width: 65%; min-height: 2px; border-radius: 2px 2px 0 0; background: #a9cfcb; }


.trend-mini-bar.is-partial { background: #d8d4c2; }


.trend-mini-bar.is-good { background: var(--green); }


.trend-mini-bar.is-bad { background: var(--danger); }


.trend-mini-bar.is-warn { background: var(--orange); }


.trend-mini-line { position: absolute; left: 0; right: 0; border-top: 1px dashed #8a8a8a; }

/* 表示チャートに重ねる費用(予算)の橙折れ線。棒とは別スケールで、グラフ最上部の帯だけに描く
   (JS側でドット・ラベルの座標をその帯の中に収めているので、棒や棒の値ラベルとは重ならない)。 */


.trend-mini-cost-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }


.trend-mini-cost-label { position: absolute; transform: translateX(-50%); font-size: 0.6rem; font-weight: 700; color: var(--orange); white-space: nowrap; background: #fff; padding: 0 1px; line-height: 1; }


.trend-mini-labels { display: flex; gap: 6px; margin-top: 3px; }


.trend-mini-labels span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.6875rem; color: var(--ink-soft); overflow-wrap: break-word; }

/* 2段目の小さい灰色ラベル(件数の内訳。開いた→クリック数、送信→応募数、応募1人あたり→費用、等)。
   切れることは絶対にしない(足りなければ2行に折り返す)。 */


.trend-mini-sublabels { display: flex; gap: 6px; margin-top: 1px; }


.trend-mini-sublabels span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.625rem; color: var(--ink-soft); overflow-wrap: break-word; }

/* ---- ③注目する数字: 各行を左右2カラムにする(左=mark+ラベル+値+比較文+ミニ2本棒、
   右=こうなっている/ということは/だから、の読み解き箱)。5fr:6frでデスクトップ、電話では縦積み。 */


.focus-line { display: grid; grid-template-columns: 5fr 6fr; gap: 16px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }


.focus-line:last-child { border-bottom: none; }


.focus-line-left { min-width: 0; }


.focus-line-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }


.focus-mark { font-weight: 800; }


.focus-mark.is-good { color: var(--green); }


.focus-mark.is-bad { color: var(--danger); }


.focus-mark.is-warn { color: var(--orange); }


.focus-stage-label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }


.focus-this-value { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }


.focus-this-value.is-good { color: var(--green); }


.focus-this-value.is-bad { color: var(--danger); }


.focus-this-value.is-warn { color: var(--orange); }


.focus-daily-tail { font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }


.focus-compare { font-size: 0.8125rem; color: var(--ink-soft); margin: 3px 0 6px; }


.focus-prev { color: var(--ink-soft); margin-left: 4px; }


.focus-micro { display: flex; flex-direction: column; gap: 3px; max-width: 280px; }


.focus-micro-row { display: flex; align-items: center; gap: 6px; }


.focus-micro-label { flex: 0 0 4.6em; font-size: 0.66rem; color: var(--ink-soft); }


.focus-micro-track { flex: 1 1 auto; height: 7px; background: #f1efe0; border-radius: 4px; overflow: hidden; }


.focus-micro-fill { display: block; height: 100%; border-radius: 4px; background: #c7c4b3; }


.focus-micro-fill.is-good { background: var(--green); }


.focus-micro-fill.is-bad { background: var(--danger); }


.focus-micro-fill.is-warn { background: var(--orange); }


.focus-extra-fact { font-size: 0.8125rem; color: var(--danger); font-weight: 700; margin: 0; }

/* 右側の読み解き箱(こうなっている/ということは/だから)。値がnullの行はJS側で出さない。 */


.focus-reading-box { background: #fbf9f2; border: 1px solid #e8e0c8; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }


.focus-reading-row { display: flex; gap: 6px; }


.focus-reading-label { flex: 0 0 5.4em; font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); }


.focus-reading-text { font-size: 0.8125rem; color: var(--ink); line-height: 1.5; }


.focus-reading-text strong { font-weight: 800; }


@media (max-width: 640px) {
  .focus-line { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- ④総評: flow.overall本文 + 考えられる原因(readingsのguessだけ) ---- */


.story-overall-text { font-size: 1rem; color: var(--ink); line-height: 1.7; margin: 0 0 10px; }


.story-mechanism { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 10px; }


.story-cause-label { font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); margin: 0 0 6px; }

/* ---- ④総評: 考えられる原因のチェックリスト表(flow.causes)。判定|原因|根拠|対策 ---- */


.causes-wrap { overflow-x: auto; }


.causes-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; color: var(--ink); }


.causes-table th { text-align: left; font-size: 0.7rem; font-weight: 800; color: var(--ink-soft); padding: 4px 10px 6px 0; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }


.causes-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }


.causes-table tbody tr:last-child td { border-bottom: none; }


.cause-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }


.cause-badge.is-bad { background: rgba(192, 57, 43, 0.12); color: var(--danger); }


.cause-badge.is-warn { background: rgba(227, 70, 1, 0.12); color: var(--orange); }


.cause-badge.is-good { background: rgba(45, 162, 83, 0.12); color: var(--green); }


.cause-badge.is-neutral { background: #eee7d0; color: var(--ink-soft); }


.cause-name { font-weight: 800; color: var(--ink); margin: 0; }


.cause-why { font-size: 0.72rem; color: var(--ink-soft); margin: 2px 0 0; line-height: 1.4; }


.cause-cell-evidence { line-height: 1.5; }


.cause-example { font-size: 0.75rem; margin: 4px 0 0; line-height: 1.4; }


.cause-example-bad { color: var(--ink-soft); text-decoration: line-through; }


.cause-example-good { color: var(--ink); font-weight: 800; }

/* 電話幅: 表をやめて1原因=1カードにする。data-labelをセルの見出しとして出す。 */


@media (max-width: 640px) {
  .causes-table thead { display: none; }
  .causes-table, .causes-table tbody, .causes-table tr, .causes-table td { display: block; width: 100%; }
  .causes-table tr.cause-row { border: 1px solid #e8e0c8; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
  .causes-table tr.cause-row:last-child { margin-bottom: 0; }
  .causes-table td { border-bottom: none; padding: 4px 0; }
  .causes-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.65rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 2px; }
}

/* ---- 旧データ向けフォールバック: ということは(readings の guess/good だけ。bad は③で既出) ---- */


.flow-readings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }


.flow-reading { display: flex; align-items: flex-start; gap: 7px; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: var(--ink); }


.flow-reading .reading-mark { flex: none; width: 16px; text-align: center; font-weight: 800; }


.flow-reading-bad .reading-mark { color: var(--danger); }


.flow-reading-guess .reading-mark { color: var(--orange); }


.flow-reading-good .reading-mark { color: var(--green); }

/* ---- ⑥広告ごとの実績(合計行つき) ---- */


.flow-adhist-wrap { overflow-x: auto; }


.flow-adhist-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; color: var(--ink); }


.flow-adhist-table th, .flow-adhist-table td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }


.flow-adhist-table th { text-align: left; font-weight: 700; color: var(--ink-soft); font-size: 0.6875rem; }


.flow-adhist-table th.num, .flow-adhist-table td.num { text-align: right; font-variant-numeric: tabular-nums; }


.flow-adhist-table tr.is-latest td { font-weight: 700; }


.flow-adhist-table tr.flow-adhist-total td { font-weight: 800; border-top: 2px solid var(--border); border-bottom: none; }


.flow-adhist-table tbody tr:last-child td { border-bottom: none; }

/* ---- 図解: ミニ漏斗図(表示→開いた→ボタン→送信) ---- */


.mini-funnel { display: flex; flex-direction: column; gap: 3px; }


.mf-row { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--ink-soft); }


.mf-mark { flex: none; width: 12px; text-align: center; font-weight: 800; }


.mf-row.mf-ok .mf-mark { color: var(--green); }


.mf-row.mf-weak .mf-mark { color: var(--danger); }


.mf-row.mf-weak .mf-label, .mf-row.mf-weak .mf-value { color: var(--danger); font-weight: 800; }


.mf-label { flex: none; width: 34px; }


.mf-value { flex: none; width: 42px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }


.mf-bar-track { flex: 1 1 auto; height: 8px; min-width: 16px; background: #f1efe0; border-radius: 4px; overflow: hidden; }


.mf-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }


.mf-row.mf-weak .mf-bar-fill { background: var(--danger); }


.mf-extra { font-size: 0.6875rem; font-weight: 800; color: var(--danger); margin: 2px 0 0 18px; }


.mf-cost-line { font-size: 0.75rem; font-weight: 800; color: var(--danger); margin: 4px 0 0; }

/* ---- 図解: 「この求人 vs 自社の他の求人 vs 他社のふつう」比較棒グラフ ---- */


.cmp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }


.cmp-chip { font-size: 0.625rem; font-weight: 800; color: var(--green); background: rgba(45, 162, 83, 0.10); border-radius: 999px; padding: 2px 8px; }


.cmp-stage-label { font-size: 0.8125rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; }

/* 比較行(この求人/前回/自社の他/他社)は表全体で棒の起点・スケールを揃えるため、
   各行を独立したflexコンテナにせずgridの列として並べる(display:contents)。
   これをしないと、値のテキスト長(「1,661人中82人(4.9%)」等)が行ごとに違うせいで
   .cmp-track(棒の土台)の幅が行ごとにバラバラになり、棒の長さが数値どおりに比較できなくなる。 */


.cmp-bars { display: grid; grid-template-columns: 9em 1fr auto; align-items: center; column-gap: 6px; row-gap: 5px; font-size: 0.6875rem; color: var(--ink-soft); }


.cmp-row { display: contents; }


.cmp-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.cmp-track { height: 10px; min-width: 16px; background: #f1efe0; border-radius: 5px; overflow: hidden; }


.cmp-fill { display: block; height: 100%; border-radius: 5px; background: #c7c4b3; }


.cmp-row.cmp-bad .cmp-fill { background: var(--danger); }


.cmp-row.cmp-bad .cmp-label, .cmp-row.cmp-bad .cmp-value { color: var(--danger); font-weight: 800; }


.cmp-row.cmp-good .cmp-fill { background: var(--green); }


.cmp-row.cmp-good .cmp-label, .cmp-row.cmp-good .cmp-value { color: var(--green); font-weight: 800; }


.cmp-value { flex: none; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }


.cmp-monthly { margin: 10px 0 0; }


.cmp-monthly-heading { font-size: 0.6875rem; color: var(--ink-soft); margin: 0 0 4px; }


.cmp-monthly-single { font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin: 0; }

/* ---- 図解: 月別推移の小グラフ(直近6か月) ---- */


.mf-trend { display: flex; align-items: flex-end; gap: 4px; margin: 8px 0 0; }


.mf-trend-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; border-radius: 4px; padding: 1px 0; }


.mf-trend-col.is-zero { background: rgba(192, 57, 43, 0.07); }


.mf-trend-num { font-size: 0.625rem; font-weight: 800; color: var(--green); line-height: 1.4; }


.mf-trend-num.is-zero { color: var(--danger); }


.mf-trend-num.is-pending { color: var(--ink-soft); }


.mf-trend-bar { position: relative; width: 100%; height: 56px; }


.mf-trend-imp { position: absolute; left: 8%; right: 8%; bottom: 0; background: #e2ded0; border-radius: 2px 2px 0 0; }


.mf-trend-apply { position: absolute; left: 24%; right: 24%; bottom: 0; border-radius: 3px 3px 0 0; }


.mf-trend-apply.is-ok { background: var(--green); }


.mf-trend-apply.is-zero { background: var(--danger); opacity: 0.55; }


.mf-trend-apply.is-pending { background: #c7c4b3; opacity: 0.7; }


.mf-trend-label { font-size: 0.625rem; color: var(--ink-soft); margin-top: 3px; }

/* ---- 図解: くわしい説明(折りたたみ、既定は閉じる) ---- */


.flow-explain-toggle { display: block; padding: 0; margin: 10px 0 0; border: none; background: none; cursor: pointer; width: 100%; text-align: left; font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }


.flow-explain-toggle .leaf { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 6px; }

/* ---- 判定バッジ(ステップ別) ---- */


.step-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 8px;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
}


.step-badge.step-1 { background: var(--step1); }


.step-badge.step-2 { background: var(--step2); }


.step-badge.step-3a, .step-badge.step-3b { background: var(--step3); }


.step-badge.step-4 { background: var(--step4); }


.step-badge.step-good { background: var(--step-good); }


.step-badge.step-ok { background: #888; }


.step-badge.step-insufficient { background: #ececec; color: var(--ink-soft); }

/* ---- 予算消化バー ---- */


.budget-bar-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }


.budget-bar-track { width: 100%; height: 6px; border-radius: 999px; background: #ececec; overflow: hidden; }


.budget-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }


.budget-bar-fill.is-over { background: var(--danger); }


.budget-bar-text { font-size: 0.6875rem; color: var(--ink-soft); white-space: nowrap; }


.chart-legend button.legend-toggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: inherit; font-size: 0.75rem; color: var(--ink-soft); background: none; border: none; padding: 2px 4px;
}


.chart-legend button.legend-toggle.is-off { opacity: 0.4; }

/* ---- アドバイス欄(広告詳細) ---- */


.advice-primary {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 14px;
}


.advice-primary.step-1 { border-left-color: var(--step1); }


.advice-primary.step-2 { border-left-color: var(--step2); }


.advice-primary.step-3a, .advice-primary.step-3b { border-left-color: var(--step3); }


.advice-primary.step-4 { border-left-color: var(--step4); }


.advice-primary.step-good { border-left-color: var(--step-good); }


.advice-title { font-size: 1.0625rem; font-weight: 800; margin: 4px 0 6px; color: var(--ink); }


.advice-reason { font-size: 0.8125rem; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.7; }


.advice-actions { margin: 0; padding-left: 1.2em; font-size: 0.8125rem; line-height: 1.9; color: var(--ink); }


.advice-secondary-title { font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 8px; }


.advice-secondary-item {
  background: #fbf8ee;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--ink-soft);
}


.advice-secondary-item strong { color: var(--ink); font-weight: 700; }

/* ---- なぜこう判断したか ---- */


.why-box {
  background: #eaf7f6;
  border: 1px solid #cbe8e5;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
}


.why-heading { font-size: 0.75rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; }


.why-line { font-size: 0.75rem; color: var(--ink-soft); margin: 0 0 6px; line-height: 2; word-break: break-word; }


.why-line:last-child { margin-bottom: 0; }


.why-line.why-conclusion { font-weight: 700; color: var(--ink); }


.action-top-why { font-size: 0.75rem; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.7; }


.action-top-why strong { color: var(--ink); }

/* ---- なぜこう判断したか: 推移(表)→こうなっている→つまり→だから ---- */


.why-explain .why-stage-label {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin: 10px 0 4px;
}


.why-explain .why-stage-label:first-of-type { margin-top: 0; }


.why-trend { margin-bottom: 4px; }


.why-trend-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #cbe8e5;
  border-radius: 6px;
  max-width: 100%;
}


.why-trend-table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 0.72rem; }


.why-trend-table th, .why-trend-table td { padding: 4px 7px; white-space: nowrap; text-align: left; }


.why-trend-table th {
  font-weight: 700;
  color: var(--ink-soft);
  background: #f4faf9;
  border-bottom: 1px solid #cbe8e5;
  vertical-align: bottom;
}


.why-trend-table td { border-bottom: 1px solid #eef7f6; color: var(--ink); }


.why-trend-table tbody tr:last-child td { border-bottom: none; }


.why-trend-table th.num, .why-trend-table td.num { text-align: right; font-variant-numeric: tabular-nums; }


.why-trend-table .why-cell-zero-apply { color: var(--danger); font-weight: 800; }


.why-trend-table .why-cell-has-apply { color: var(--green); font-weight: 800; }


.why-trend-table .why-cell-zero-start { color: rgba(192, 57, 43, 0.55); }


.why-trend-table .why-ellipsis-cell { text-align: center; color: var(--ink-soft); background: #fbf8ee; }


.why-trend-line { font-size: 0.7rem; color: var(--ink-soft); margin: 6px 0 0; }


.why-trend-single { font-size: 0.75rem; color: var(--ink-soft); margin: 0; line-height: 1.7; }


.why-meaning {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  background: #fdf3d9;
  border-left: 4px solid var(--yellow);
  padding: 8px 10px;
  border-radius: 4px;
  margin: 8px 0;
  line-height: 1.6;
}


.why-meaning strong { color: #8a6a10; }


.why-conclusion-line { font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.7; }

/* ---- 指標カード(広告詳細) ---- */


.metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }


.metric-grid .stat-tile .stat-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* ---- アクション記録 ---- */


.action-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }


.action-form .field-block { margin-bottom: 0; flex: 1 1 140px; }


.action-form .field-block.is-text { flex: 2 1 220px; }


.action-list { display: flex; flex-direction: column; gap: 8px; }


.action-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}


.action-row-date { flex: none; font-size: 0.75rem; color: var(--ink-soft); font-weight: 700; width: 76px; }


.action-row-body { flex: 1; min-width: 0; }


.action-row-text { font-size: 0.8125rem; color: var(--ink); margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }


.action-row-meta { font-size: 0.6875rem; color: var(--ink-soft); margin-top: 4px; }


.action-row-ops { flex: none; display: flex; align-items: center; gap: 6px; }


.inline-delete-confirm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- タグ編集(広告詳細) ---- */


.tag-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

/* ---- アップロード ---- */


.dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.875rem;
  cursor: pointer;
  margin-bottom: 14px;
  background: #fff;
}


.dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }


.dropzone input { display: none; }


.dropzone .dz-icon { font-size: 1.75rem; margin-bottom: 6px; }


.upload-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 14px; }


.upload-steps li {
  counter-increment: step;
  position: relative;
  padding: 4px 0 4px 30px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.7;
}


.upload-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


.file-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }


.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8125rem;
}


.file-row .fr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.upload-result-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.8125rem;
}


.upload-result-row:last-child { border-bottom: none; }


.upload-result-row.is-ok .ur-mark { color: var(--green); }


.upload-result-row.is-error .ur-mark { color: var(--danger); }


.ur-mark { flex: none; font-weight: 800; width: 18px; }


.ur-body { flex: 1; min-width: 0; }


.ur-name { font-weight: 700; color: var(--ink); }


.ur-detail { color: var(--ink-soft); margin-top: 2px; }

/* ---- 最終取込ステータス ---- */


.sync-status { font-size: 0.75rem; color: var(--ink-soft); margin: -4px 0 12px; line-height: 1.6; }


.sync-status:empty { display: none; }


.sync-status .sync-error { color: var(--danger); font-weight: 700; }

/* ---- 次の一手 / severity ---- */


.severe-tag {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 6px;
}


.action-top-item.is-severe { border-color: var(--danger); border-left-color: var(--danger); background: var(--danger-soft); }


.action-top-item.is-severe:active { background: rgba(192, 57, 43, 0.14); }


.action-top-next { font-size: 0.75rem; font-weight: 700; color: var(--accent); margin: 4px 0 0; }


.item-card.is-severe { border-color: var(--danger); border-left-color: var(--danger); }

/* ---- 応募0継続バナー ---- */


.chronic-banner {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}


.chronic-title { font-size: 0.8125rem; font-weight: 800; color: var(--danger); margin: 0 0 8px; }


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


.chronic-item {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  cursor: pointer;
}


.chronic-item:active { background: #fdfbf4; }

/* ---- 業界目安 ---- */


.benchmark-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -8px 0 16px; }


.benchmark-strip:empty { display: none; margin: 0; }


.benchmark-chip { font-size: 0.6875rem; color: var(--ink-soft); }


.benchmark-chip .bm-name { font-weight: 700; color: var(--ink); margin-right: 4px; }


.stat-bm { font-size: 0.625rem; color: var(--ink-soft); margin-top: 2px; }


.field-bm { font-size: 0.6875rem; color: var(--accent); margin: -6px 0 8px; font-weight: 500; }

/* ---- 次の一手パネル(広告詳細・求人別詳細) ---- */


.next-step-box {
  background: #fbf8ee;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
}


.next-step-what { font-size: 0.9375rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; }


.next-step-how { margin: 0 0 8px; padding-left: 1.2em; font-size: 0.8125rem; line-height: 1.9; color: var(--ink); }


.next-step-expect { font-size: 0.75rem; color: var(--ink-soft); margin: 0 0 4px; line-height: 1.6; }


.next-step-check { font-size: 0.75rem; font-weight: 700; color: var(--accent); margin: 0 0 10px; }

/* ---- 今は様子見パネル ---- */


.waiting-box { border-left-color: #9a9a9a !important; background: #fafafa; }

/* ---- 重度課題(severity high)の強調 ---- */


.advice-primary.is-severe { border-left-color: var(--danger); background: var(--danger-soft); }

/* ---- 次の課題(折りたたみ) ---- */


.collapsible-toggle { padding: 0; margin: 0 0 10px; }


.toggle-arrow { font-size: 0.6875rem; color: var(--ink-soft); margin-left: 4px; }

/* ---- 求人別 改善アクション: 広告名付き ---- */


.action-row-adno { color: var(--ink-soft); font-weight: 500; }

/* ---- アップロード: 自動取込ボタン ---- */


#autoSyncBtn { text-decoration: none; }

/* ひとことで言うと(カード最上部の結論1行) */


.story-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; background: #fff; border: 2px solid var(--accent); border-radius: 10px; }


.story-headline-label { flex: none; font-size: 0.72rem; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }


.story-headline-text { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.5; color: var(--ink); }


.flow-diagram.is-severe .story-headline { border-color: var(--danger); }

.save-inline-ok { font-size: 0.8125rem; color: var(--green); font-weight: 700; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; }

/* ---- 求人別/広告一覧: 行・カードのクリック可能表示、設定の数値入力(採用サイト管理アプリからの移植で不足していた分) ---- */
.dt tbody tr.is-clickable { cursor: pointer; }
.item-card[data-adno], .item-card[data-sk] { cursor: pointer; }
input.number-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  -webkit-appearance: none;
  appearance: none;
  min-height: 36px;
}
.input-suffix { display: flex; align-items: center; gap: 6px; }
.input-suffix .unit { font-size: 0.75rem; color: var(--ink-soft); flex: none; }
.field-desc { font-size: 0.6875rem; color: var(--ink-soft); margin: -2px 0 8px; line-height: 1.6; }