/* ============================================================
   メンバー実績ダッシュボード（#/jisseki）専用スタイル
   クラス名はすべて jk- 始まり。既存の styles.css とは衝突しない。
   ============================================================ */
.jk-root {
  --jk-or: #FF973C; --jk-or-deep: #97500A; --jk-or-soft: #FFF3E6; --jk-or-line: #FFD9B0;
  --jk-navy: #1B2A4A; --jk-ink: #23201C; --jk-mute: #625E58;
  --jk-line: #DCD9D2; --jk-paper: #fff; --jk-quiet: #FAFAF8;
  --jk-green: #1D7A44; --jk-green-bg: #1D7A44; --jk-red: #CD4242;
  color: var(--jk-ink);
}

/* ── 見出し帯 ───────────────────────────── */
.jk-hd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(100deg, #2A3B5E 0%, var(--jk-navy) 55%, #12203C 100%);
  border-radius: 14px 14px 0 0; padding: 20px 24px 18px; color: #fff;
  border-bottom: 4px solid var(--jk-or);
}
.jk-hd-t h2 { margin: 0; font-size: 22px; letter-spacing: .02em; }
.jk-hd-t p { margin: 4px 0 0; font-size: 13px; color: #C6CEDC; }
.jk-hd-m { display: flex; gap: 26px; }
.jk-hd-m > div { display: flex; flex-direction: column; gap: 2px; }
.jk-hd-m span { font-size: 11px; color: #9FAAC0; letter-spacing: .04em; }
.jk-hd-m b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ── タブ ───────────────────────────────── */
.jk-tabs {
  display: flex; gap: 2px; background: var(--jk-paper); border: 1px solid var(--jk-line);
  border-top: none; border-radius: 0 0 14px 14px; padding: 0 10px; overflow-x: auto;
}
.jk-tab {
  padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--jk-mute);
  border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none;
}
.jk-tab:hover { color: var(--jk-ink); background: var(--jk-quiet); }
.jk-tab.on { color: var(--jk-or-deep); border-bottom-color: var(--jk-or); }

/* ── フィルタ帯 ─────────────────────────── */
.jk-bar {
  position: sticky; top: 60px; z-index: 12; margin: 14px 0 4px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border: 1px solid var(--jk-line); border-left: 4px solid var(--jk-or); border-radius: 10px;
}
.jk-bar-in { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 10px 14px; }
.jk-fl { display: flex; flex-direction: column; gap: 3px; }
.jk-fl > span { font-size: 11px; color: var(--jk-mute); font-weight: 600; letter-spacing: .03em; }
.jk-fl select, .jk-fl input[type=date] {
  height: 34px; min-width: 118px; padding: 0 8px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--jk-line); border-radius: 7px; background: #fff; color: var(--jk-ink);
}
.jk-fl select:focus, .jk-fl input:focus { outline: 2px solid var(--jk-or); outline-offset: 1px; }
.jk-reset {
  height: 34px; padding: 0 14px; font-size: 12px; font-weight: 600; border-radius: 7px;
  border: 1px solid var(--jk-line); background: #fff; color: var(--jk-mute);
}
.jk-reset:hover { background: var(--jk-or-soft); border-color: var(--jk-or-line); color: var(--jk-or-deep); }
.jk-scope {
  margin-left: auto; font-size: 12px; color: var(--jk-mute); font-variant-numeric: tabular-nums;
  background: var(--jk-quiet); border: 1px solid var(--jk-line); border-radius: 999px; padding: 5px 12px;
}
.jk-q {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--jk-line); color: var(--jk-mute);
  font-size: 10px; font-style: normal; font-weight: 700; cursor: help; vertical-align: 1px;
}

/* ── セクション見出し ──────────────────── */
.jk-sec { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; flex-wrap: wrap; }
.jk-sec h2 {
  margin: 0; font-size: 15px; letter-spacing: .04em; color: var(--jk-ink);
  padding-left: 10px; border-left: 4px solid var(--jk-or);
}
.jk-sec span { font-size: 12px; color: var(--jk-mute); }

/* ── KPIカード ─────────────────────────── */
.jk-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.jk-kpi {
  background: #fff; border: 1px solid var(--jk-line); border-radius: 11px; padding: 13px 15px 12px;
  display: flex; flex-direction: column; gap: 3px; min-height: 104px;
}
.jk-kpi.accent { border-color: var(--jk-or-line); background: linear-gradient(180deg, #FFFBF6 0%, #fff 62%); }
.jk-kpi-l { font-size: 11.5px; color: var(--jk-mute); font-weight: 600; letter-spacing: .02em; }
.jk-kpi-v {
  font-size: 27px; font-weight: 700; line-height: 1.15; color: var(--jk-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.jk-kpi-s { font-size: 11px; color: var(--jk-mute); margin-top: auto; }
.jk-delta { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jk-delta span { font-weight: 400; color: var(--jk-mute); font-size: 10.5px; }
.jk-delta.up { color: var(--jk-green); }
.jk-delta.down { color: var(--jk-red); }
.jk-delta.flat, .jk-delta.none { color: var(--jk-mute); font-weight: 400; }

/* ── カード ────────────────────────────── */
.jk-card {
  background: #fff; border: 1px solid var(--jk-line); border-radius: 12px;
  padding: 14px 16px 16px; margin: 12px 0; min-width: 0;
}
.jk-card-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.jk-card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.jk-hint { display: block; font-size: 11.5px; color: var(--jk-mute); font-weight: 400; margin-top: 3px; }
.jk-cnt {
  font-size: 11px; font-weight: 600; color: var(--jk-or-deep); background: var(--jk-or-soft);
  border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: 2px;
}
.jk-search {
  height: 32px; width: 190px; padding: 0 11px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--jk-line); border-radius: 7px;
}
.jk-search:focus { outline: 2px solid var(--jk-or); outline-offset: 1px; }
.jk-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jk-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.jk-g2 > .jk-card, .jk-g3 > .jk-card { margin: 12px 0 0; }
/* カードを等高にすると中身の少ない側に大きな空白ができるので、内容の高さに合わせる */
.jk-g2, .jk-g3 { align-items: start; }
@media (max-width: 1180px) { .jk-g2, .jk-g3 { grid-template-columns: 1fr; } }

/* ── SVG ───────────────────────────────── */
.jk-svg { width: 100%; height: auto; display: block; overflow: visible; }
.jk-ax { font-size: 10.5px; fill: #8A857E; font-variant-numeric: tabular-nums; }
.jk-ax2 { fill: #B98040; }
.jk-axname { font-size: 10.5px; fill: #8A857E; }
.jk-ref { font-size: 10px; fill: #1B2A4A; font-weight: 700; }
.jk-lb { font-size: 11.5px; fill: #23201C; }
.jk-val { font-size: 11.5px; fill: #23201C; font-weight: 700; font-variant-numeric: tabular-nums; }
.jk-sub2 { font-size: 10px; fill: #8A857E; font-weight: 400; }
/* SVG内の象限ラベル。HTMLグリッドの .jk-quad と名前が衝突していた */
.jk-quadlbl { font-size: 10.5px; fill: #A09A92; font-weight: 700; }
.jk-instack { font-size: 10px; fill: #fff; font-weight: 700; }
.jk-lg { font-size: 11px; fill: #6B6660; }
/* ★以前は .jk-bar を指定していたが、これはフィルタ帯のクラスと同名で、
   帯にマウスを乗せるだけで画面上部が丸ごと暗転していた */
.jk-barrect:hover, .jk-svg circle:hover, .jk-svg rect:hover { filter: brightness(.92); cursor: default; }
.jk-empty {
  padding: 34px 16px; text-align: center; color: var(--jk-mute); font-size: 13px;
  background: var(--jk-quiet); border: 1px dashed var(--jk-line); border-radius: 9px;
}
.jk-empty.err { color: var(--jk-red); border-color: #F2C4C4; background: #FDF6F6; line-height: 1.8; }
.jk-empty code { background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--jk-line); }

/* ── 表 ────────────────────────────────── */
/* ★overflow-x だけを指定すると overflow-y も auto 扱いになるが、
   ラッパーに高さが無いため見出しの sticky が効かず、100行超スクロールすると
   見出しが消えていた。高さを与えて初めて sticky が働く。 */
.jk-tblwrap { overflow: auto; max-height: min(72vh, 760px); margin: 0 -4px; }
.jk-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.jk-tbl th, .jk-tbl td { padding: 7px 9px; text-align: right; white-space: nowrap; }
.jk-tbl th.l, .jk-tbl td.l { text-align: left; }
.jk-tbl thead th {
  position: sticky; top: 0; background: var(--jk-navy); color: #fff; font-size: 11.5px;
  font-weight: 600; z-index: 1; border-bottom: none;
}
.jk-th { cursor: pointer; user-select: none; }
.jk-th:hover { background: #26375C; }
.jk-arw { margin-left: 3px; font-size: 9px; color: var(--jk-or); }
.jk-tbl tbody tr { border-bottom: 1px solid var(--jk-line); }
.jk-tbl tbody tr:hover { background: var(--jk-or-soft); }
.jk-tbl tbody td { transition: none; }
.jk-tbl.sm { font-size: 12px; }
.jk-tbl.def td.l.sm { white-space: normal; font-size: 12px; color: var(--jk-mute); line-height: 1.7; min-width: 320px; }
.jk-tbl.def td { vertical-align: top; }
.jk-tbl td.ok { color: var(--jk-green); font-weight: 700; }
.jk-tbl td.wa { color: #A06600; font-weight: 700; }
.jk-tbl td.ng { color: var(--jk-red); font-weight: 700; }
.jk-mlink { color: var(--jk-or-deep); font-weight: 600; text-decoration: none; }
.jk-mlink:hover { text-decoration: underline; }
.jk-tag {
  display: inline-block; margin-left: 7px; font-size: 10px; color: var(--jk-mute);
  background: var(--jk-quiet); border: 1px solid var(--jk-line); border-radius: 999px; padding: 1px 7px;
}
.jk-tag.form { color: #7A5B2A; background: #FFF6EA; border-color: var(--jk-or-line); }
.jk-den { display: inline-block; min-width: 30px; margin-left: 6px; font-size: 10px; color: #9A948C; }
.jk-thin { color: #ADA69D; }
.jk-note { font-size: 11.5px; color: var(--jk-mute); margin-top: 8px; }

/* ── 4象限 ─────────────────────────────── */
.jk-quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.jk-qbox {
  border: 1px solid var(--jk-line); border-top: 4px solid var(--jk-or);
  border-radius: 10px; padding: 11px 13px 13px; background: var(--jk-quiet);
}
.jk-qh { display: flex; align-items: baseline; justify-content: space-between; }
.jk-qh b { font-size: 14px; }
.jk-qh span { font-size: 12px; color: var(--jk-mute); font-weight: 700; }
.jk-qd { font-size: 11.5px; color: var(--jk-mute); margin: 3px 0 9px; line-height: 1.6; }
.jk-qlist { display: flex; flex-wrap: wrap; gap: 5px; }
.jk-chip {
  font-size: 11.5px; background: var(--jk-paper); border: 1px solid var(--jk-line);
  border-radius: 999px; padding: 2px 9px;
}
.jk-chip.more { color: var(--jk-mute); background: transparent; border-style: dashed; }
.jk-none { font-size: 12px; color: #ADA69D; }

/* ── 個人カルテ ─────────────────────────── */
.jk-pick {
  display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--jk-line); border-left: 4px solid var(--jk-or);
  border-radius: 11px; padding: 12px 16px; margin: 12px 0;
}
.jk-pick .jk-fl select { min-width: 260px; height: 38px; font-size: 14px; font-weight: 600; }
.jk-prof { display: flex; gap: 24px; flex-wrap: wrap; }
.jk-prof > div { display: flex; flex-direction: column; gap: 1px; }
.jk-prof span { font-size: 10.5px; color: var(--jk-mute); }
.jk-prof b { font-size: 13.5px; }

/* ── 説明文 ────────────────────────────── */
.jk-prose { font-size: 13px; line-height: 1.85; color: var(--jk-ink); }
.jk-prose p { margin: 0 0 10px; }
.jk-prose p:last-child { margin-bottom: 0; }
.jk-prose code {
  background: var(--jk-quiet); border: 1px solid var(--jk-line);
  border-radius: 4px; padding: 1px 6px; font-size: 12px;
}

/* ── ツールチップ ──────────────────────── */
.jk-tip {
  position: fixed; z-index: 9999; pointer-events: none; opacity: 0;
  background: rgba(27,42,74,.96); color: #fff; font-size: 12px; line-height: 1.6;
  padding: 6px 10px; border-radius: 7px; max-width: 320px; transition: opacity .12s;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.jk-tip.on { opacity: 1; }

@media (max-width: 700px) {
  .jk-hd { flex-direction: column; align-items: flex-start; gap: 12px; }
  .jk-kpi-v { font-size: 23px; }
  .jk-scope { margin-left: 0; }
}

/* データ網羅状況の表 */
.jk-thh { font-size: 9.5px; font-weight: 400; opacity: .75; }
.jk-ok { color: var(--jk-green); font-size: 14px; }
.jk-ng2 { color: #79756F; font-size: 14px; }
.jk-stale {
  font-size: 10.5px; color: #B03030; background: #FDECEC;
  border: 1px solid #F2C4C4; border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.jk-warn {
  background: #FFF6EA; border: 1px solid var(--jk-or-line); border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; color: #7A4A10;
}

/* 前期間比が読み違えられる状況の警告 */
.jk-alert {
  background: #FFF3E6; border: 1px solid var(--jk-or); border-left: 5px solid var(--jk-or);
  border-radius: 10px; padding: 12px 16px; margin: 14px 0 4px;
  font-size: 13px; line-height: 1.8; color: #6B3E08;
}
.jk-alert b { color: #B45F0C; }
.jk-alert-more { display: block; font-size: 11.5px; color: var(--jk-mute); margin-top: 4px; }
.jk-outref { font-size: 10px; fill: #9A948C; }
/* 散布図の目盛り数字は点の上に描くので、背景を少し敷いて読めるようにする */
.jk-ax-top { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* ── 合言葉の入力画面（施錠中） ──────────────────
   .jk-root の外に出るので、変数ではなく実際の色で書く */
.jk-lock {
  max-width: 460px; margin: 40px auto 64px; text-align: center;
  background: #fff; border: 1px solid #E2E0DA; border-radius: 18px;
  padding: 40px 30px 32px;
  box-shadow: 0 2px 4px rgba(27,42,74,.05), 0 18px 40px -22px rgba(27,42,74,.28);
}
.jk-lock-ico {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #FFF3E6, #FFE1C2); color: #B45F0C;
}
.jk-lock h2 { margin: 0 0 10px; font-size: 19px; color: #1B2A4A; letter-spacing: .02em; }
.jk-lock p { margin: 0 0 22px; font-size: 13px; line-height: 1.75; color: #6B6660; }
.jk-lock-f { display: flex; gap: 8px; justify-content: center; }
.jk-lock-f input {
  flex: 1; max-width: 240px; padding: 11px 14px; font-size: 15px;
  border: 1px solid #D9D6CF; border-radius: 10px; background: #FAFAF8; color: #23201C;
}
.jk-lock-f input:focus {
  outline: none; border-color: #FF973C; background: #fff;
  box-shadow: 0 0 0 3px rgba(255,151,60,.22);
}
.jk-lock-f button {
  padding: 11px 22px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #FF973C, #F07C1A);
  border: none; border-radius: 10px;
  box-shadow: 0 6px 16px -8px rgba(255,151,60,.9);
  transition: transform .15s ease, box-shadow .15s ease;
}
.jk-lock-f button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(255,151,60,.95); }
.jk-lock-f button:active { transform: translateY(0); }
.jk-lock-msg { min-height: 20px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #D14343; }
.jk-lock-note { margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: #9A948C; }
@media (max-width: 560px) {
  .jk-lock { margin: 24px 12px 48px; padding: 32px 20px 26px; }
  .jk-lock-f { flex-direction: column; align-items: stretch; }
  .jk-lock-f input { max-width: none; }
}

/* ============================================================
   2026-08 改修：判定帯・データ信頼度・気づき・1on1候補
   ============================================================ */
.jk-root {
  --jk-sh1: 0 1px 2px rgba(27,42,74,.05), 0 1px 3px rgba(27,42,74,.04);
  --jk-sh2: 0 2px 4px rgba(27,42,74,.05), 0 14px 30px -16px rgba(27,42,74,.2);
  --jk-sh-or: 0 8px 24px -12px rgba(255,151,60,.6);
  --jk-r-s: 10px; --jk-r-m: 14px; --jk-r-l: 20px;
}

/* ── 冒頭の判定帯 ───────────────────────── */
.jk-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin: 16px 0 14px; padding: 20px 24px;
  border-radius: var(--jk-r-m); border: 1px solid var(--jk-or-line);
  border-left: 5px solid var(--jk-or);
  background: linear-gradient(112deg, #FFF4E8 0%, #fff 52%, #FFFAF4 100%);
  box-shadow: var(--jk-sh-or), var(--jk-sh1);
}
.jk-hero.jk-down { border-left-color: #C9793B; }
.jk-hero.jk-flat { border-left-color: #B9B3AA; background: linear-gradient(112deg,#FAF9F6 0%,#fff 55%,#FCFBF8 100%); box-shadow: var(--jk-sh1); }
.jk-hero-h { flex: 1 1 380px; min-width: 0; }
.jk-hero-b {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--jk-or-deep); background: var(--jk-or-soft); border-radius: 999px; padding: 3px 11px; margin-bottom: 9px;
}
.jk-hero-h h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: .01em; color: var(--jk-navy); }
.jk-hero-h p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--jk-mute); }
.jk-hero-n { display: flex; gap: 26px; flex-wrap: wrap; }
.jk-hn { display: flex; flex-direction: column; gap: 2px; min-width: 104px; }
.jk-hn span { font-size: 11px; color: var(--jk-mute); letter-spacing: .03em; }
.jk-hn b { font-size: 27px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--jk-navy); }
.jk-hn i { font-style: normal; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jk-hn i.up { color: var(--jk-green); } .jk-hn i.down { color: #C9793B; } .jk-hn i.flat { color: var(--jk-mute); }

/* ── データ信頼度 ───────────────────────── */
.jk-trust { margin: 0 0 14px; border: 1px solid var(--jk-line); border-radius: var(--jk-r-m); background: #fff; box-shadow: var(--jk-sh1); }
.jk-trust > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; font-size: 13px;
}
.jk-trust > summary::-webkit-details-marker { display: none; }
.jk-trust-r {
  width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--jk-green-bg);
}
.jk-tB .jk-trust-r { background: #7BA05B; } .jk-tC .jk-trust-r { background: var(--jk-or); }
.jk-tD .jk-trust-r { background: #A96632; }
.jk-trust-t { font-weight: 700; color: var(--jk-navy); }
.jk-trust-n { color: var(--jk-mute); flex: 1; font-size: 12.5px; }
.jk-trust-x { font-size: 11.5px; color: var(--jk-or-deep); font-weight: 700; white-space: nowrap; }
.jk-trust[open] .jk-trust-x::after { content: "を閉じる"; }
.jk-trust-b { padding: 2px 16px 14px; border-top: 1px solid var(--jk-line); }
.jk-trust-b ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.jk-trust-b li { display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; font-size: 12.5px; align-items: baseline; }
.jk-trust-b li b { color: var(--jk-navy); }
.jk-trust-b li b::before { content: "● "; color: var(--jk-green); }
.jk-trust-b li.ng b::before { color: var(--jk-or); }
.jk-trust-b li .v { font-variant-numeric: tabular-nums; }
.jk-trust-b li p { grid-column: 2; margin: 2px 0 0; color: var(--jk-mute); line-height: 1.7; font-size: 12px; }

/* ── 気づきカード ───────────────────────── */
.jk-cosec { margin: 0 0 18px; }
.jk-cohd { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.jk-cohd h3 { margin: 0; font-size: 15px; color: var(--jk-navy); letter-spacing: .02em; }
.jk-cohd h3::before { content: ""; display: inline-block; width: 4px; height: 15px; background: var(--jk-or); border-radius: 2px; margin-right: 8px; vertical-align: -2px; }
.jk-cohd span { font-size: 11.5px; color: var(--jk-mute); }
.jk-cogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jk-co {
  display: flex; gap: 12px; padding: 14px 16px; background: #fff;
  border: 1px solid var(--jk-line); border-left: 4px solid var(--jk-line);
  border-radius: var(--jk-r-s); box-shadow: var(--jk-sh1);
  transition: box-shadow .2s ease, transform .2s ease;
}
.jk-co:hover { box-shadow: var(--jk-sh2); transform: translateY(-2px); }
.jk-co-i { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--jk-mute); }
.jk-co-b { min-width: 0; }
.jk-co h4 { margin: 0 0 5px; font-size: 13.5px; line-height: 1.5; color: var(--jk-navy); }
.jk-co p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--jk-mute); }
.jk-co-a { margin-top: 7px !important; padding-top: 7px; border-top: 1px dashed var(--jk-line); color: var(--jk-ink) !important; }
.jk-co-a::before { content: "→ "; color: var(--jk-or-deep); font-weight: 700; }
.jk-co-data { border-left-color: #8C93A8; } .jk-co-data .jk-co-i { color: #6B7288; }
.jk-co-seat { border-left-color: #7FA8C9; } .jk-co-seat .jk-co-i { color: #4E7EA3; }
.jk-co-load { border-left-color: #C9793B; } .jk-co-load .jk-co-i { color: #B4632A; }
.jk-co-trade { border-left-color: #C9793B; } .jk-co-trade .jk-co-i { color: #B4632A; }
.jk-co-keizoku { border-left-color: var(--jk-or); } .jk-co-keizoku .jk-co-i { color: var(--jk-or-deep); }
.jk-co-dow { border-left-color: var(--jk-or); } .jk-co-dow .jk-co-i { color: var(--jk-or-deep); }
.jk-co-ace { border-left-color: #C0A24A; } .jk-co-ace .jk-co-i { color: #9C7F27; }
.jk-co-good { border-left-color: var(--jk-green); } .jk-co-good .jk-co-i { color: var(--jk-green); }
.jk-comore { margin-top: 10px; }
.jk-comore > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--jk-or-deep); list-style: none; padding: 7px 0; }
.jk-comore > summary::-webkit-details-marker { display: none; }
.jk-comore > summary::before { content: "＋ "; }
.jk-comore[open] > summary::before { content: "− "; }
.jk-comore .jk-cogrid { margin-top: 8px; }

/* ── 1on1候補 ───────────────────────────── */
.jk-121 { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.jk-121 li {
  counter-increment: n; position: relative;
  padding: 12px 12px 12px 40px; border-bottom: 1px solid var(--jk-line);
}
.jk-121 li:last-child { border-bottom: none; }
.jk-121 li::before {
  content: counter(n); position: absolute; left: 8px; top: 13px;
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--jk-or-deep); background: var(--jk-or-soft);
}
.jk-121-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.jk-121-h b { font-size: 14px; color: var(--jk-navy); }
.jk-121-br { font-size: 11px; color: var(--jk-mute); background: var(--jk-quiet); border: 1px solid var(--jk-line); border-radius: 999px; padding: 1px 8px; }
.jk-121-l { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--jk-or-deep); font-variant-numeric: tabular-nums; }
.jk-121-m { margin-top: 3px; font-size: 12px; color: var(--jk-mute); font-variant-numeric: tabular-nums; }
.jk-121-c { margin-top: 5px; font-size: 12.5px; line-height: 1.6; }
.jk-121-c span { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--jk-or-deep); background: var(--jk-or-soft); border-radius: 4px; padding: 1px 6px; margin-right: 7px; vertical-align: 1px; }
.jk-121-go { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--jk-or-deep); text-decoration: none; }
.jk-121-go:hover { text-decoration: underline; }
.jk-121-more { padding: 10px 12px; font-size: 12px; color: var(--jk-mute); }
.jk-seatbox { margin-top: 12px; padding: 12px 14px; background: #F3F7FB; border: 1px solid #DCE7F1; border-radius: var(--jk-r-s); }
.jk-seatbox b { font-size: 12.5px; color: #2F5E85; }
.jk-seatbox p { margin: 4px 0 0; font-size: 12px; line-height: 1.7; color: #55606B; }
.jk-seatbox p.n { color: #2F5E85; }

/* ── KPIカードのゲージ ───────────────────── */
.jk-kpi.gauged { position: relative; overflow: hidden; }
.jk-kpi.gauged::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--jk-or) calc(var(--p,0) * 1%), #EFEDE9 0);
}

@media (max-width: 900px) {
  .jk-cogrid { grid-template-columns: 1fr; }
  .jk-trust-b li { grid-template-columns: 1fr; }
  .jk-trust-b li p { grid-column: 1; }
  .jk-hero { gap: 16px; padding: 16px 18px; }
  .jk-hero-n { gap: 18px; }
  .jk-hn b { font-size: 23px; }
}

/* 右下の編集ボタンがカードの文字に重なるので、下端と右端に逃げ場を作る */
.jk-root { padding-bottom: 30px; }
@media (min-width: 901px) { .jk-cogrid > .jk-co:nth-last-child(-n+2) { padding-right: 26px; } }

/* ============================================================
   スマホ（390px）対応
   ------------------------------------------------------------
   以前は サマリー1枚で縦8,676px あり、最初の数字に届くまで2.3画面
   スクロールしていた。畳める場所は畳み、1列で間延びする所は2列にする。
   ============================================================ */
.jk-bar-tg { display: none; }

@media (max-width: 760px) {
  /* ── タブは2段グリッドにして6本すべて見えるようにする ── */
  .jk-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 6px; overflow: visible;
  }
  .jk-tab {
    padding: 10px 4px; font-size: 12px; text-align: center; line-height: 1.35;
    border-bottom: none; border-radius: 8px; background: var(--jk-quiet);
  }
  .jk-tab.on { background: var(--jk-or-soft); color: var(--jk-or-deep); font-weight: 700; }

  /* ── フィルタ帯は畳む ── */
  .jk-bar { position: static; }
  .jk-bar-tg {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 11px 14px; background: none; border: none; font-family: inherit;
    font-size: 12.5px; color: var(--jk-ink); text-align: left; cursor: pointer;
  }
  .jk-bar-tg-l { font-weight: 700; color: var(--jk-or-deep); white-space: nowrap; }
  .jk-bar-tg-v { flex: 1; color: var(--jk-mute); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jk-bar-tg-c { transition: transform .18s ease; color: var(--jk-mute); }
  .jk-bar.open .jk-bar-tg-c { transform: rotate(180deg); }
  .jk-bar .jk-bar-in { display: none; }
  .jk-bar.open .jk-bar-in { display: flex; border-top: 1px solid var(--jk-line); }
  .jk-fl select, .jk-fl input[type=date] { min-width: 0; width: 100%; }
  .jk-fl { flex: 1 1 44%; }
  .jk-scope { margin-left: 0; flex: 1 1 100%; text-align: center; }

  /* ── KPIは2列。1枚に数字1つで1,500px使うのは贅沢すぎる ── */
  .jk-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .jk-kpi { min-height: 92px; padding: 10px 12px; }
  .jk-kpi-v { font-size: 22px; }
  .jk-kpi-s { font-size: 10px; }
  .jk-kpi.accent { grid-column: 1 / -1; }

  /* ── 判定帯 ── */
  .jk-hero { padding: 15px 16px; margin: 12px 0; }
  .jk-hero-h h3 { font-size: 17px; }
  .jk-hero-n { gap: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .jk-hn { min-width: 0; }
  .jk-hn b { font-size: 21px; }

  /* ── 表は1人1カードにする。11列を横スクロールで辿るのは現実的でない ──
     ただし枠の高さは残す。外すと200行ぶんが縦に伸びて1万px超のページになる */
  /* 入れ子スクロールにすると指が滑るので、高さでは切らない（件数で切る） */
  .jk-tblwrap { max-height: none; overflow: visible; }
  /* ★カード化するのは「メンバー一覧」だけ（.cards）。
     全部の表を巻き込むと、ブランド別実績やVOCの表が
     「見出しの無い数字の羅列」になって、横スクロールより読めなくなる。 */
  .jk-tbl.cards thead { display: none; }
  .jk-tbl.cards tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    padding: 11px 4px; border-bottom: 1px solid var(--jk-line);
  }
  .jk-tbl.cards tbody td { padding: 0 !important; text-align: left; white-space: normal; background: none !important; }
  .jk-tbl.cards tbody td.l { grid-column: 1 / -1; }
  .jk-tbl.cards tbody td[data-k]::before {
    content: attr(data-k) " "; font-size: 10.5px; color: var(--jk-mute); margin-right: 4px;
  }
  /* ★隠す列は「消す」のではなく「開けるようにする」。
     以前は稼働率・後処理・継続成功率・案内率・VOCの6列が
     スマホから閲覧手段ごと消えていた。 */
  .jk-tbl.cards tbody td.sp-extra { display: none; }
  .jk-tbl.cards tbody tr.sp-open td.sp-extra { display: block; grid-column: 1 / -1; padding: 1px 0 !important; }
  .jk-spmore {
    display: inline-block; margin-top: 5px; padding: 4px 12px; font-size: 11px; font-weight: 700;
    font-family: inherit; cursor: pointer; color: var(--jk-or-deep);
    background: var(--jk-or-soft); border: 1px solid var(--jk-or-line); border-radius: 999px;
  }
  /* カード化しない表は見出しごと横スクロールさせる */
  .jk-tblwrap { -webkit-overflow-scrolling: touch; overflow-x: auto; }
  .jk-tbl:not(.cards) th, .jk-tbl:not(.cards) td { padding: 8px 10px; white-space: nowrap; }
  /* 絞り込みへいつでも戻れるようにする */
  .jk-bar { position: sticky; top: 0; z-index: 14; }
  .jk-bar.open { max-height: 74vh; overflow: auto; }

  /* ── 気づき・1on1 ── */
  .jk-co { padding: 12px 13px; }
  .jk-121 li { padding-left: 36px; }
  .jk-121-l { margin-left: 0; flex: 1 1 100%; }
}

/* SVGの外に出した凡例（在席内訳など） */
.jk-lgd { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 11.5px; color: var(--jk-mute); margin-top: 10px; }
.jk-lgd span { display: inline-flex; align-items: center; }
.jk-lgd i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* 名寄せ要確認バッジ */
.jk-dup {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #8A5A00; background: #FFF0D2; border: 1px solid #F0DCA8;
  cursor: help;
}

/* ============================================================
   動き（prefers-reduced-motion を尊重）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .jk-root .rise { opacity: 0; transform: translateY(10px); }
  .jk-root .rise.in {
    opacity: 1; transform: none;
    transition: opacity .42s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
                transform .42s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
  }
  .jk-card { transition: box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1); }
  .jk-card:hover { box-shadow: var(--jk-sh2); transform: translateY(-2px); }
  .jk-kpi { transition: box-shadow .18s ease, border-color .18s ease; }
  .jk-kpi:hover { box-shadow: var(--jk-sh1); border-color: var(--jk-or-line); }
  .jk-tab { transition: background .15s ease, color .15s ease; }
}
/* 動きを減らす設定の人には、最初から見えている状態を渡す */
@media (prefers-reduced-motion: reduce) { .jk-root .rise { opacity: 1; transform: none; } }

/* キーボード操作の可視フィードバック */
.jk-root a:focus-visible, .jk-root button:focus-visible,
.jk-root select:focus-visible, .jk-root input:focus-visible, .jk-root summary:focus-visible {
  outline: 2px solid var(--jk-or); outline-offset: 2px; border-radius: 6px;
}

/* カードに奥行きを入れる（罫線だけの平面から脱する） */
.jk-card { box-shadow: var(--jk-sh1); }
.jk-kpi.accent { box-shadow: var(--jk-sh-or), var(--jk-sh1); }

/* ============================================================
   ダークモード（在宅・夜間シフトがある業態なので入れる）
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .jk-root {
    --jk-or-soft: #3A2811; --jk-or-line: #6B4517; --jk-or-deep: #FFB870;
    --jk-ink: #E9E6E1; --jk-mute: #9C968D; --jk-line: #2E3440;
    --jk-paper: #171A21; --jk-quiet: #1D212A; --jk-green: #46B37E;
    /* 暗所では文字は明るく、白文字を載せる背景は暗く。1つのトークンで兼ねられない */
    --jk-green-bg: #2E7D55; --jk-red: #D75A5A;
    --jk-sh1: 0 1px 2px rgba(0,0,0,.4); --jk-sh2: 0 14px 30px -16px rgba(0,0,0,.7);
  }
  .jk-root .jk-card, .jk-root .jk-kpi, .jk-root .jk-co, .jk-root .jk-trust { background: var(--jk-paper); }
  /* 暗所で沈んでいた文字色。明所の値をそのまま使うと 3.2〜4.3:1 にしかならない */
  .jk-root .jk-thin, .jk-root .jk-none, .jk-root .jk-den { color: #8F8A83; }
  .jk-root .jk-ng2 { color: #9C968D; }
  .jk-root .jk-tbl td.wa { color: #D79A2B; }
  .jk-root .jk-q { background: var(--jk-line); color: var(--jk-ink); }
  .jk-root .jk-kpi.accent { background: linear-gradient(180deg, #241B10 0%, var(--jk-paper) 62%); }
  .jk-root .jk-hero { background: linear-gradient(112deg, #241B10 0%, var(--jk-paper) 55%, #1C1913 100%); }
  .jk-root .jk-hero-h h3, .jk-root .jk-hn b, .jk-root .jk-co h4, .jk-root .jk-121-h b { color: #F0EDE8; }
  .jk-root .jk-bar { background: rgba(23,26,33,.96); }
  .jk-root .jk-fl select, .jk-root .jk-fl input, .jk-root .jk-search, .jk-root .jk-reset {
    background: var(--jk-quiet); color: var(--jk-ink); border-color: var(--jk-line);
  }
  .jk-root .jk-tbl thead th { background: #12161D; }
  .jk-root .jk-tbl tbody tr:nth-child(2n) { background: rgba(255,255,255,.02); }
  .jk-root .jk-seatbox { background: #17222C; border-color: #26384A; }
  .jk-root .jk-seatbox b, .jk-root .jk-seatbox p.n { color: #8FBCE0; }
  .jk-root .jk-empty { background: var(--jk-quiet); }
  .jk-root .jk-ax, .jk-root .jk-axname, .jk-root .jk-lg, .jk-root .jk-sub2 { fill: #8E887F; }
  .jk-root .jk-lb, .jk-root .jk-val { fill: #D8D4CE; }
  .jk-root .jk-ref { fill: #C6CEDC; }
  .jk-root .jk-ax-top { stroke: var(--jk-paper); }
  .jk-lock { background: #171A21; border-color: #2E3440; }
  .jk-lock h2 { color: #E9E6E1; } .jk-lock p { color: #9C968D; }
  .jk-lock-f input { background: #1D212A; border-color: #2E3440; color: #E9E6E1; }
}

/* 数字が比べられない人の枠（配置で解ける枠と区別する） */
.jk-seatbox.rec { background: #FAF6EE; border-color: #E8DCC4; }
.jk-seatbox.rec b, .jk-seatbox.rec p.n { color: #8A6A20; }

@media (max-width: 760px) {
  /* ヘッダーの日付が3行に折り返して帯が縦に伸びていたので、横並びの小さな行にする */
  .jk-hd { padding: 15px 16px 13px; gap: 10px; }
  .jk-hd-t h2 { font-size: 18px; }
  .jk-hd-t p { font-size: 11.5px; }
  .jk-hd-m { gap: 4px; width: 100%; flex-direction: column; }
  .jk-hd-m > div { flex-direction: row; align-items: baseline; gap: 8px; }
  .jk-hd-m span { flex: none; width: 82px; font-size: 10px; }
  .jk-hd-m b { font-size: 12px; white-space: nowrap; }
}

/* 名寄せ候補の一覧 */
.jk-dupgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.jk-duprow {
  display: flex; align-items: baseline; gap: 7px; padding: 7px 11px; font-size: 12.5px;
  background: var(--jk-quiet); border: 1px solid var(--jk-line); border-radius: 8px;
}
.jk-duprow b { color: var(--jk-navy); font-weight: 700; }
.jk-duprow span { font-size: 11px; color: var(--jk-mute); }

/* ── チャートの伸び上がり ──────────────────
   棒が0から伸びると、目が自然に「どこが高いか」を追う */
@media (prefers-reduced-motion: no-preference) {
  .jk-svg rect.grow, .jk-svg rect.growx {
    transform-box: fill-box; animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.3,1);
    animation-fill-mode: backwards; animation-delay: calc(var(--i, 0) * 16ms);
  }
  .jk-svg rect.grow  { transform-origin: bottom center; animation-name: jkgrow; }
  .jk-svg rect.growx { transform-origin: left center;   animation-name: jkgrowx; }
  @keyframes jkgrow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes jkgrowx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .jk-svg .jk-line { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: jkdraw 1.1s cubic-bezier(.3,.8,.4,1) forwards; }
  @keyframes jkdraw { to { stroke-dashoffset: 0; } }
}

/* スマホだけ出す並べ替え／もっと見る */
.jk-sp-only { display: none; }
@media (max-width: 760px) { .jk-sp-only { display: flex; } }
.jk-more {
  padding: 9px 18px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--jk-or-deep); background: var(--jk-or-soft);
  border: 1px solid var(--jk-or-line); border-radius: 999px;
}
.jk-more:hover { background: #FFE7CE; }

/* ── カルテ：次の一歩／良かった点 ────────── */
.jk-next, .jk-praise {
  margin-top: 10px; padding: 13px 16px; border-radius: var(--jk-r-s);
  border: 1px solid var(--jk-line); background: #fff; box-shadow: var(--jk-sh1);
}
.jk-next { border-left: 4px solid var(--jk-or); background: linear-gradient(100deg, #FFF8F0, #fff 60%); }
.jk-praise { border-left: 4px solid var(--jk-green); background: linear-gradient(100deg, #F2FAF5, #fff 60%); }
.jk-next b, .jk-praise b { font-size: 12.5px; color: var(--jk-navy); }
.jk-next ul, .jk-praise ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.jk-next li, .jk-praise li { font-size: 12.5px; line-height: 1.7; color: var(--jk-mute); }
.jk-next li span {
  display: inline-block; font-weight: 700; color: var(--jk-or-deep);
  background: var(--jk-or-soft); border-radius: 5px; padding: 1px 8px; margin-right: 8px;
}
.jk-praise li::before { content: "・"; color: var(--jk-green); font-weight: 700; }
.jk-copy {
  margin-top: 10px; padding: 8px 16px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: #fff; background: var(--jk-green-bg); border: none; border-radius: 8px;
}
.jk-copy:hover { filter: brightness(1.08); }

/* 稼働率が高すぎるときは「良い数字」に見せない */
.jk-kpi.gauged.warn::after { background: linear-gradient(90deg, #C9793B calc(var(--p,0) * 1%), #EFEDE9 0); }

/* ============================================================
   コントラスト（WCAG AA 4.5:1）に届いていなかった色を上げる
   ------------------------------------------------------------
   軸ラベル #8A857E は 3.66:1、象限ラベル #A09A92 は 2.47:1、
   積み上げ帯の白文字は薄い色の上で 1.60:1 で実際に読めなかった。
   ============================================================ */
.jk-ax, .jk-axname { fill: #6E6961; }
.jk-sub2, .jk-outref { fill: #6E6961; font-size: 10.5px; }
.jk-quadlbl { fill: #7A746C; }
.jk-den { color: #5E5A55; }
/* 「比べられない」の薄字は、色だけに頼らず点線でも示す（色覚特性への配慮も兼ねる） */
.jk-thin { color: #79756F; text-decoration: underline dotted #B5B0A8; text-underline-offset: 2px; }
/* 罫線と影が薄すぎて、カードの境界が消えていた。
   ★--jk-line をここで再定義していたため、上のダーク指定（同じ .jk-root）を
     後勝ちで打ち消し、暗所でも罫線と?ボタンが明るいままだった。色は :root へ移した。 */
.jk-root { --jk-sh1: 0 1px 2px rgba(27,42,74,.06), 0 2px 6px -2px rgba(27,42,74,.08); }
.jk-kpi.gauged::after { background: linear-gradient(90deg, var(--jk-or) calc(var(--p,0) * 1%), #E6E2DB 0); }
/* ?ボタン（i要素からbuttonに変更したぶんの見た目を戻す） */
button.jk-q { padding: 0; font-family: inherit; line-height: 1; }
button.jk-q:hover { background: var(--jk-or-line); color: var(--jk-or-deep); }
/* 章の切れ目とカード間の差を広げる（1.8倍では章に見えない） */
.jk-sec { margin: 32px 0 12px; }

/* ============================================================
   チャートの初期描画（画面に入ってから描き始める）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .jk-svg.jk-anim .jk-barrect { transform: scaleY(0); transform-origin: 50% 100%; transform-box: fill-box; }
  .jk-svg.jk-anim.in .jk-barrect { animation: jk-grow .5s cubic-bezier(.22,.8,.28,1) both; animation-delay: calc(var(--i,0) * 12ms); }
  .jk-svg.jk-anim .jk-hbar { transform: scaleX(0); transform-origin: 0 50%; transform-box: fill-box; }
  .jk-svg.jk-anim.in .jk-hbar { animation: jk-growx .55s cubic-bezier(.22,.8,.28,1) both; animation-delay: calc(var(--i,0) * 20ms); }
  .jk-svg.jk-anim .jk-line { stroke-dasharray: 2600; stroke-dashoffset: 2600; }
  .jk-svg.jk-anim.in .jk-line { animation: jk-draw 1.05s cubic-bezier(.3,.75,.3,1) .08s forwards; }
  .jk-svg.jk-anim .jk-pt { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
  .jk-svg.jk-anim.in .jk-pt { animation: jk-pop .45s cubic-bezier(.2,1.25,.4,1) both; animation-delay: calc(var(--i,0) * 8ms); }
  @keyframes jk-grow  { to { transform: scaleY(1); } }
  @keyframes jk-growx { to { transform: scaleX(1); } }
  @keyframes jk-draw  { to { stroke-dashoffset: 0; } }
  @keyframes jk-pop   { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .jk-svg .jk-pt { opacity: 1; } }

/* ホバー中の列に縦線と丸を出す（棒が1pxの日でも当たる） */
.jk-svg .jk-hit .jk-cross { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.jk-svg .jk-hit:hover .jk-cross { opacity: 1; }
/* 透明な当たり判定まで暗転させない */
.jk-barrect:hover, .jk-hbar:hover, .jk-svg circle.jk-pt:hover { filter: brightness(.92); cursor: default; }

/* ゲージは画面に入ってから伸ばす */
.jk-kpi.gauged::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2,.8,.25,1) .15s; }
.jk-kpi.gauged.in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .jk-kpi.gauged::after { transform: scaleX(1); transition: none; } }

/* 見出しの並べ替えボタン（キーボード操作に対応） */
.jk-thb {
  all: unset; display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  width: 100%; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit;
}
.jk-tbl th.l .jk-thb { justify-content: flex-start; }
.jk-thb:focus-visible { outline: 2px solid var(--jk-or); outline-offset: -2px; }
.jk-arw { margin-left: 3px; font-size: 11px; color: #FFC58A; }

/* ============================================================
   タイポと余白のスケール（0.5px刻みと4pxグリッド外を整理）
   ============================================================ */
.jk-root {
  --t-xs: 11px; --t-s: 12px; --t-m: 13px; --t-l: 15px; --t-xl: 19px; --t-n: 28px; --t-nl: 32px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}
.jk-card { padding: var(--s4); border-radius: var(--jk-r-m); margin: var(--s3) 0; }
.jk-kpi { padding: var(--s3) var(--s4); border-radius: var(--jk-r-m); min-height: 104px; }
.jk-kpi-l, .jk-kpi-s, .jk-delta { font-size: var(--t-xs); }
.jk-kpi-v { font-size: var(--t-n); display: flex; align-items: baseline; }
.jk-kpi-n { font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.jk-kpi-u { font-size: 15px; font-weight: 700; color: var(--jk-mute); margin-left: 3px; letter-spacing: 0; }
.jk-card-hd h3 { font-size: var(--t-l); }
.jk-hint, .jk-note { font-size: var(--t-s); }
.jk-hero-h h3 { font-size: var(--t-xl); }
.jk-hero-h p { font-size: var(--t-m); line-height: 1.8; }
.jk-hn b { font-size: var(--t-nl); }
.jk-hero { margin: var(--s4) 0 var(--s5); padding: var(--s5); }
.jk-cosec { margin: 0 0 var(--s5); }
.jk-trust { margin: 0 0 var(--s4); }

/* ツールチップを表組みにする */
.jk-tip { padding: 9px 12px; border-radius: 9px; box-shadow: 0 12px 32px -10px rgba(0,0,0,.45); max-width: 340px; }
.jk-tip b { display: block; font-size: 12.5px; margin-bottom: 6px; }
.jk-tip dl { display: grid; grid-template-columns: auto auto; gap: 3px 14px; margin: 0; }
.jk-tip dt { color: #B9C4D8; margin: 0; }
.jk-tip dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .jk-kpi { min-height: 90px; padding: 10px 12px; }
  .jk-kpi-v { font-size: 22px; }
  .jk-kpi-u { font-size: 12px; }
  .jk-hero { padding: var(--s4); margin: var(--s3) 0 var(--s4); }
  .jk-hn b { font-size: 21px; }
  /* accent は全幅にしたぶん横組みにして、右に空白を作らない */
  .jk-kpi.accent { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s3); }
  .jk-kpi.accent .jk-kpi-l { grid-column: 1; grid-row: 1; }
  .jk-kpi.accent .jk-delta { grid-column: 1; grid-row: 2; }
  .jk-kpi.accent .jk-kpi-s { grid-column: 1; grid-row: 3; }
  .jk-kpi.accent .jk-kpi-v { grid-column: 2; grid-row: 1 / span 3; font-size: 30px; }
}

/* プレゼンモード（氏名を伏せる）のトグル */
.jk-mask {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 13px;
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;
  color: #C6CEDC; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.jk-mask:hover { background: rgba(255,255,255,.18); color: #fff; }
.jk-mask[aria-pressed="true"] { background: var(--jk-or); border-color: var(--jk-or); color: #fff; }
.jk-hd { align-items: center; }
@media (max-width: 760px) { .jk-mask { margin-top: 8px; } }

/* ブランド内順位（同じ土俵の中での位置） */
.jk-rank {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 16px; border-radius: var(--jk-r-s);
  background: linear-gradient(100deg, #F5F7FB, #fff 60%);
  border: 1px solid var(--jk-line); border-left: 4px solid var(--jk-navy);
}
.jk-rank b { font-size: 12.5px; color: var(--jk-navy); }
.jk-rank span { font-size: 22px; font-weight: 800; color: var(--jk-navy); font-variant-numeric: tabular-nums; }
.jk-rank i { font-style: normal; font-size: 11.5px; color: var(--jk-mute); }

/* 目標成功率の入力 */
.jk-tgt table { max-width: 560px; }
.jk-tgti {
  width: 74px; padding: 5px 8px; font-size: 13px; font-family: inherit; text-align: right;
  border: 1px solid var(--jk-line); border-radius: 7px; background: #fff; color: var(--jk-ink);
  font-variant-numeric: tabular-nums;
}
.jk-tgti:focus { outline: 2px solid var(--jk-or); outline-offset: 1px; }
.jk-tgtu { font-size: 11.5px; color: var(--jk-mute); margin-left: 4px; }
.jk-tgtb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.jk-tgtclear { color: var(--jk-mute); background: var(--jk-quiet); border-color: var(--jk-line); }
.jk-tgtmsg { font-size: 12px; font-weight: 700; color: var(--jk-green); }
.jk-tgtlink {
  display: inline-block; height: 34px; line-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 700;
  color: var(--jk-or-deep); background: var(--jk-or-soft);
  border: 1px solid var(--jk-or-line); border-radius: 7px; text-decoration: none; white-space: nowrap;
}
.jk-tgtlink:hover { background: #FFE7CE; }

/* 名寄せの判断ボタン */
.jk-duprow { flex-wrap: wrap; }
.jk-dupbtn { display: flex; gap: 4px; margin-left: auto; }
.jk-dupb {
  padding: 3px 10px; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--jk-mute); background: var(--jk-paper); border: 1px solid var(--jk-line); border-radius: 999px;
}
.jk-dupb:hover { border-color: var(--jk-or-line); color: var(--jk-or-deep); }
.jk-dupb.on { background: var(--jk-or); border-color: var(--jk-or); color: #fff; }
.jk-duprow.done.same { background: #F2FAF5; border-color: #BFE3CD; }
.jk-duprow.done.diff { background: #fff; opacity: .62; }

/* ============================================================
   印刷（経営会議・クライアント報告で紙に落とすとき）
   ------------------------------------------------------------
   画面の操作部品は落とし、カードが途中で切れないようにする。
   氏名を出したくないときは、印刷前に「氏名を伏せる」を押す。
   ============================================================ */
@media print {
  .jk-bar, .jk-tabs, .jk-mask, .jk-reset, .jk-search, .jk-more, .jk-copy,
  .jk-121-go, .jk-dupbtn, .jk-tgtb, .back, .edit-fab, .jk-q { display: none !important; }
  .jk-root { padding: 0; --jk-sh1: none; --jk-sh2: none; --jk-sh-or: none; }
  .jk-hd { background: #1B2A4A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jk-card, .jk-kpi, .jk-co, .jk-hero, .jk-trust { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  .jk-g2 { grid-template-columns: 1fr 1fr; }
  .jk-tblwrap { max-height: none !important; overflow: visible !important; }
  .jk-trust[open] .jk-trust-b, .jk-comore[open] > .jk-cogrid { display: block; }
  .jk-sec { margin: 18px 0 8px; }
  /* 出典と条件を必ず1行残す。紙だけ見た人が条件を誤解しないように */
  .jk-root::after {
    content: "サポポケ メンバー実績ダッシュボード ／ 率はすべて 合計÷合計 ／ 基準CPHはブランド別 ／ 詳細は「指標の定義」タブ";
    display: block; margin-top: 14px; padding-top: 8px;
    border-top: 1px solid #DCD9D2; font-size: 10px; color: #6E6961;
  }
  @page { margin: 12mm; }
}

/* ============================================================
   SVGの面色をトークン化（ダークモードでチャートだけ白いままだった）
   ============================================================ */
.jk-root { --jk-track: #F0EEEA; --jk-grid: #E8E5E0; --jk-zero: #C7C2BA; }
@media (prefers-color-scheme: dark) {
  .jk-root { --jk-track: #232833; --jk-grid: #262C37; --jk-zero: #3C4453; }
}
.jk-svg .jk-track { fill: var(--jk-track); }
.jk-svg .jk-grid { stroke: var(--jk-grid); stroke-width: 1; fill: none; }
.jk-svg .jk-zero { stroke: var(--jk-zero); stroke-width: 1.4; fill: none; }

/* ── コントラスト（AA 4.5:1）に届いていなかった残り ── */
.jk-thin { color: #5E5A55; text-decoration: underline dotted #A8A39B; text-underline-offset: 2px; }
.jk-none { color: #5E5A55; }
.jk-ng2 { color: #77736D; }
/* フォーカスリングは白地でも橙地でも3:1を確保する（#FF973C は2.16:1で不足） */
.jk-root a:focus-visible, .jk-root button:focus-visible,
.jk-root select:focus-visible, .jk-root input:focus-visible, .jk-root summary:focus-visible,
.jk-svg .jk-hit:focus-visible {
  outline: 2px solid #B45F0C; outline-offset: 2px; border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 0 0 6px rgba(180,95,12,.32);
}

/* ── KPIカードの真ん中に空く穴（margin-top:auto が原因） ── */
.jk-kpi { justify-content: flex-start; row-gap: 4px; }
.jk-kpi-s { margin-top: 0; }
.jk-kpi.gauged { padding-bottom: 16px; }

/* ── 表の縞（ライトモードに無かった） ── */
.jk-tbl tbody tr:nth-child(2n) { background: #FBFAF7; }
.jk-tbl tbody tr:hover { background: var(--jk-or-soft); }

/* ── 出どころの違う列をまとめる見出し ──────────
   ★同じ表に別ソース・別期間の数字を並べるので、どこからどこまでが
     どの出どころかを見出しで囲わないと、そろわない数字を比べてしまう。 */
.jk-tbl th.jk-grp {
  background: var(--jk-quiet); color: var(--jk-mute); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .02em; border-bottom: 2px solid var(--jk-line);
}
.jk-tbl th.jk-grp2 { background: var(--jk-or-soft); color: var(--jk-or-deep); border-bottom-color: var(--jk-or-line); }
.jk-tbl thead th[rowspan] { vertical-align: bottom; }
/* ★見出しは紺地。中の小文字にも .jk-thin（濃い灰）が効いて 2.08:1 になっていた */
.jk-tbl thead th .jk-thin, .jk-tbl thead th .jk-thin { color: #C6CEDC; text-decoration: none; }
/* ── 列の多い表で1列目を固定する ────────────────
   ★9列あるので狭い幅では右端まで786pxスクロールする。1列目が流れると
     どの行の数字か分からなくなる（実測でブランド名が画面外へ出た）。
   ★sticky セルは背景が透けるので、縞の色まで含めて塗り直す必要がある。 */
.jk-tbl.jk-stick1 thead th:first-child,
.jk-tbl.jk-stick1 tbody td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--jk-paper); box-shadow: 1px 0 0 var(--jk-line);
}
.jk-tbl.jk-stick1 thead th:first-child { z-index: 3; background: var(--jk-navy); box-shadow: none; }
.jk-tbl.jk-stick1 tbody tr:nth-child(2n) td:first-child { background: #FBFAF7; }
@media (prefers-color-scheme: dark) {
  .jk-root .jk-tbl.jk-stick1 tbody tr:nth-child(2n) td:first-child { background: #1E222B; }
}
@media (max-width: 760px) {
  /* ★名前まで折り返すと「フロムコ／コロ」のように分断されて読めない。
     名前は1行で固定し、印だけを下の行へ送る。 */
  .jk-tbl.jk-stick1 td:first-child { max-width: 152px; white-space: normal; line-height: 1.35; }
  .jk-tbl.jk-stick1 td:first-child .jk-bn { display: block; white-space: nowrap; }
  .jk-tbl.jk-stick1 td:first-child .jk-chip,
  .jk-tbl.jk-stick1 td:first-child .jk-chk { font-size: 9.5px; padding: 0 5px; }
}

/* 値が無いことを示す「—」。jk-thin を使うと点線下線が付いて欠損に見えない */
.jk-na { color: var(--jk-mute); opacity: .62; }
/* 対応づけが推測のものは目で拾えるようにする */
.jk-chk {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #7A4A00; background: #FFF0D2; border: 1px solid #E8CE96;
}

/* ── 指で押せる大きさ（スマホ）──────────────
   ★実測で42箇所が40px角に届いていなかった。現場は片手・移動中に触るので、
     見た目は変えずに高さと当たり判定だけ広げる。 */
@media (max-width: 480px) {
  /* type属性を書いていない input もあるので、種類で絞らず除外側で書く */
  .jk-root button, .jk-root select, .jk-root a.jk-121-go,
  .jk-root input:not([type=checkbox]):not([type=radio]) {
    min-height: 44px;
  }
  .jk-root .jk-121-go { display: inline-flex; align-items: center; }
  .jk-root .jk-spmore, .jk-root .jk-dupb, .jk-root .jk-done { padding-top: 8px; padding-bottom: 8px; }
  /* ?は文中に置く小さな印なので、見た目は14pxのまま当たり判定だけ44px角にする */
  .jk-root button.jk-q { min-height: 0; }
  .jk-root button.jk-q::after { inset: -15px; }
}

/* ── フォントサイズの0.5px刻みを7段に寄せる ── */
.jk-tbl, .jk-co p, .jk-trust-n, .jk-rank b, .jk-121-c { font-size: var(--t-s); }
.jk-co h4, .jk-121-h b, .jk-prof b, .jk-trust > summary { font-size: var(--t-m); }
.jk-lb, .jk-val { font-size: 11px; }
.jk-kpi-l, .jk-kpi-s, .jk-delta, .jk-hint, .jk-note, .jk-lg { font-size: var(--t-xs); }
/* 日本語の可読上限は1行45全角前後 */
.jk-co-b { max-width: 44em; }
.jk-hero-h p, .jk-prose { max-width: 48em; }

/* ── タップ標的（WCAG 2.5.8 は24×24） ── */
button.jk-q { position: relative; }
button.jk-q::after { content: ""; position: absolute; inset: -6px; }
@media (max-width: 760px) {
  .jk-tab { padding: 13px 4px; }
  .jk-dupb { padding: 7px 12px; }
  .jk-more { padding: 12px 20px; }
  /* 横スクロールできる合図を出す */
  .jk-tblwrap {
    background:
      linear-gradient(90deg, var(--jk-paper) 30%, rgba(255,255,255,0)) left / 30px 100% no-repeat,
      linear-gradient(90deg, rgba(255,255,255,0), var(--jk-paper) 70%) right / 30px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(27,42,74,.14), transparent) left / 11px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(27,42,74,.14), transparent) right / 11px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* 右下の編集ボタンが本文に重なるので、下端に逃がして薄くする */
.edit-fab { top: auto !important; bottom: 20px; right: 20px; opacity: .58; transition: opacity .15s ease; }
.edit-fab:hover, .edit-fab:focus-visible { opacity: 1; }
@media (max-width: 760px) { .edit-fab { bottom: 12px; right: 12px; } }
.jk-root { padding-bottom: 72px; }

/* まだ差が言えない人（案内件数が少なく区間が基準をまたぐ） */
.jk-vague { background: #FAF9F6; border: 1px solid var(--jk-line); border-radius: 8px; padding: 10px 13px; line-height: 1.8; }
.jk-vague b { color: var(--jk-navy); }

/* 取り逃しの内訳（席／速さ） */
.jk-splt {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 5px;
  font-size: 11px; color: #2F5E85; background: #EEF4FA; border: 1px solid #DCE7F1;
}

/* ============================================================
   ダークモードの取りこぼし
   ------------------------------------------------------------
   --jk-navy を暗所で再定義していなかったため、見出し・順位の数字・
   カルテの3つの箱が #171A21 の上に #1B2A4A（約1.1:1）で出ていた。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /* ★--jk-navy は見出し帯の背景グラデーションにも使われている。
     ここで明るい色に置き換えると、帯が水色になってラベルが読めなくなる（実際になった）。
     背景用はそのままにし、文字用の色は個別に指定する。 */
  .jk-root { --jk-navy-soft: #2A3648; }
  .jk-root .jk-hero-h h3, .jk-root .jk-hn b, .jk-root .jk-co h4, .jk-root .jk-121-h b,
  .jk-root .jk-cohd h3, .jk-root .jk-trust-t, .jk-root .jk-card-hd h3,
  .jk-root .jk-sec h2, .jk-root .jk-tbl td.l, .jk-root .jk-mlink { color: #D8D4CE; }
  .jk-root .jk-prof b, .jk-root .jk-hd-m b { color: #EAE7E2; }
  .jk-root .jk-prof span, .jk-root .jk-hd-m span { color: #A8B4C8; }
  .jk-root .jk-next { background: linear-gradient(100deg, #241B10, var(--jk-paper) 60%); }
  .jk-root .jk-praise { background: linear-gradient(100deg, #142118, var(--jk-paper) 60%); }
  .jk-root .jk-rank { background: linear-gradient(100deg, #1B2130, var(--jk-paper) 60%); }
  .jk-root .jk-vague { background: var(--jk-quiet); border-color: var(--jk-line); }
  .jk-root .jk-next li, .jk-root .jk-praise li, .jk-root .jk-vague { color: #B8B2A9; }
  .jk-root .jk-next b, .jk-root .jk-praise b, .jk-root .jk-rank b, .jk-root .jk-vague b { color: #D8D4CE; }
  .jk-root .jk-rank span { color: #D8D4CE; }
  .jk-root .jk-duprow { background: var(--jk-quiet); }
  .jk-root .jk-duprow b { color: #D8D4CE; }
  .jk-root .jk-duprow.done.same { background: #142118; border-color: #2C4736; }
  .jk-root .jk-splt { background: #1B2632; border-color: #2A3B4C; color: #8FBCE0; }
  .jk-root .jk-tgti { background: var(--jk-quiet); color: var(--jk-ink); border-color: var(--jk-line); }
  .jk-root .jk-121-br { background: var(--jk-quiet); }
  .jk-root .jk-tbl tbody tr:nth-child(2n) { background: rgba(255,255,255,.03); }
  .jk-root .jk-tblwrap { background: none; }
}

/* 過負荷（先に休ませる）の枠 */
.jk-seatbox.over { background: #FDF6EF; border-color: #F0DCC4; }
.jk-seatbox.over b, .jk-seatbox.over p.n { color: #A85E1E; }
@media (prefers-color-scheme: dark) {
  .jk-root .jk-seatbox { background: #17222C; border-color: #26384A; }
  .jk-root .jk-seatbox.over { background: #251C12; border-color: #4A3620; }
  .jk-root .jk-seatbox.rec { background: #221E14; border-color: #423922; }
  .jk-root .jk-seatbox p { color: #A9A29A; }
}

@media (prefers-color-scheme: dark) {
  /* 取りこぼしていた面：プロフィール行・警告バナー・選択欄まわり */
  .jk-root .jk-pick, .jk-root .jk-prof { background: var(--jk-paper); }
  .jk-root .jk-prof b { color: #EAE7E2 !important; }
  .jk-root .jk-prof span { color: #A09A92 !important; }
  .jk-root .jk-warn, .jk-root .jk-alert { background: #241B10; border-color: #5A3B14; color: #C9C2B8; }
  .jk-root .jk-alert b, .jk-root .jk-warn b { color: #FFB870; }
  .jk-root .jk-empty { border-color: var(--jk-line); color: var(--jk-mute); }
  .jk-root .jk-tag { background: var(--jk-quiet); color: var(--jk-mute); border-color: var(--jk-line); }
  .jk-root .jk-cnt { background: #33240F; color: #FFB870; }
  .jk-root .jk-scope { background: var(--jk-quiet); color: var(--jk-mute); border-color: var(--jk-line); }
}

/* ============================================================
   ダークモードの土台
   ------------------------------------------------------------
   ★親アプリ（styles.css）に prefers-color-scheme の対応が無く、
   ページの地は明るいまま。カードだけ黒くすると「半ダーク」になり、
   見出しの #D8D4CE がページ地の上に乗って約1.3:1になる。
   この画面の範囲だけは自分で地を敷いて成立させる。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .jk-root {
    background: #12151B; color: var(--jk-ink);
    margin: 0 -28px; padding: 0 28px 72px;
  }
  .jk-root .jk-sec h2, .jk-root .jk-cohd h3 { color: #D8D4CE; }
  /* 枠の見出しが暗所で上書きされずAAを割っていた */
  .jk-root .jk-seatbox.over b, .jk-root .jk-seatbox.over p.n { color: #F0A55E; }
  .jk-root .jk-seatbox.rec b, .jk-root .jk-seatbox.rec p.n { color: #D8B968; }
  .jk-root .jk-lock { background: var(--jk-paper); }
  @media (max-width: 760px) { .jk-root { margin: 0 -14px; padding: 0 14px 72px; } }
}

/* 取り逃しの金額換算 */
.jk-yen { display: block; font-style: normal; font-size: 11px; font-weight: 400; color: var(--jk-mute); margin-top: 1px; }
/* 名簿のコピー */
.jk-csv { background: var(--jk-navy); margin-top: 12px; }
.jk-csv:hover { filter: brightness(1.15); }
/* 受託単価の入力 */
.jk-price {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--jk-r-s);
  background: var(--jk-quiet); border: 1px solid var(--jk-line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.jk-price b { font-size: 12.5px; color: var(--jk-navy); }
.jk-price p { flex: 1 1 100%; margin: 6px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--jk-mute); }
/* KPIの増減を2行に分ける（%は前期比、下の行は目安との関係） */
.jk-delta em { display: block; font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--jk-mute); }
@media (prefers-color-scheme: dark) {
  .jk-root .jk-price { background: var(--jk-quiet); border-color: var(--jk-line); }
  .jk-root .jk-price b { color: #D8D4CE; }
  .jk-root .jk-csv { background: #2A3648; }
}

/* 「ほかの数字」ボタンはスマホだけ */
.jk-spmore { display: none; }
@media (max-width: 760px) { .jk-tbl.cards .jk-spmore { display: inline-block; } }

/* ── 受託単価で見た金額（サマリー最上段） ────────── */
.jk-money {
  margin: 0 0 14px; padding: 16px 20px; border-radius: var(--jk-r-m);
  background: linear-gradient(112deg, #F3F7FB 0%, #fff 55%); border: 1px solid #DCE7F1;
  border-left: 5px solid var(--jk-navy); box-shadow: var(--jk-sh1);
}
.jk-money-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.jk-money-h b { font-size: 13px; color: var(--jk-navy); }
.jk-money-h span { font-size: 11.5px; color: var(--jk-mute); }
.jk-money-n { display: flex; gap: 32px; flex-wrap: wrap; }
.jk-mn { display: flex; flex-direction: column; gap: 1px; min-width: 130px; }
.jk-mn span { font-size: 11px; color: var(--jk-mute); }
.jk-mn b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--jk-navy); }
.jk-mn i { font-style: normal; font-size: 11px; color: var(--jk-mute); }
.jk-money-n2 { margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--jk-mute); }
/* 1on1の「話した」記録 */
.jk-done {
  margin-left: 12px; padding: 3px 12px; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--jk-mute); background: #fff; border: 1px solid var(--jk-line); border-radius: 999px;
}
.jk-done:hover { border-color: var(--jk-or-line); color: var(--jk-or-deep); }
.jk-done.on { background: var(--jk-green); border-color: var(--jk-green); color: #fff; }
@media (max-width: 760px) {
  .jk-money { padding: 14px 16px; }
  .jk-money-n { gap: 16px; }
  .jk-mn { min-width: 0; flex: 1 1 44%; }
  .jk-mn b { font-size: 20px; }
  .jk-done { margin-left: 0; margin-top: 6px; }
}
@media (prefers-color-scheme: dark) {
  .jk-root .jk-money { background: linear-gradient(112deg, #1B2130, var(--jk-paper) 55%); border-color: #2A3648; }
  .jk-root .jk-money-h b, .jk-root .jk-mn b { color: #D8D4CE; }
  .jk-root .jk-done { background: var(--jk-quiet); border-color: var(--jk-line); }
}

/* ── 話したあと、どうなったか ────────────── */
.jk-fu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jk-fu li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: var(--jk-r-s);
  background: var(--jk-quiet); border: 1px solid var(--jk-line); border-left: 4px solid var(--jk-line);
}
.jk-fu li.up { border-left-color: var(--jk-green); background: #F5FBF7; }
.jk-fu li.down { border-left-color: #C9793B; background: #FDF7F1; }
.jk-fu b { font-size: 13px; color: var(--jk-navy); }
.jk-fu-on { font-size: 11px; color: var(--jk-mute); }
.jk-fu-d { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.jk-fu li.up .jk-fu-d { color: var(--jk-green); font-weight: 700; }
.jk-fu li.down .jk-fu-d { color: #A85E1E; font-weight: 700; }
.jk-fu-s { font-size: 11.5px; color: var(--jk-mute); margin-left: auto; }
/* 判断に使えている人数 */
.jk-cover {
  margin: 18px 0 2px; padding: 9px 14px; font-size: 12px; line-height: 1.7; color: var(--jk-mute);
  background: var(--jk-quiet); border: 1px dashed var(--jk-line); border-radius: var(--jk-r-s);
}
.jk-cover b { color: var(--jk-navy); font-variant-numeric: tabular-nums; }
/* 金額の導線 */
.jk-pricequick {
  margin-top: 12px; padding: 8px 18px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--jk-navy); background: #fff; border: 1px solid var(--jk-navy-soft, #DDE3EE); border-radius: 999px;
}
.jk-pricequick:hover { background: #F3F7FB; }
.jk-pricequick::before { content: "¥ "; font-weight: 800; }
/* 設定の受け渡し */
.jk-cfg { margin-top: 14px; padding: 12px 14px; border-radius: var(--jk-r-s); background: var(--jk-quiet); border: 1px solid var(--jk-line); }
.jk-cfg b { font-size: 12.5px; color: var(--jk-navy); }
.jk-cfg p { margin: 5px 0 9px; font-size: 11.5px; line-height: 1.7; color: var(--jk-mute); }
.jk-cfg .jk-more { margin-right: 8px; }
/* 悪化しているが目安内 */
.jk-delta em.w { color: #A85E1E; }
@media (prefers-color-scheme: dark) {
  .jk-root .jk-fu li { background: var(--jk-quiet); }
  .jk-root .jk-fu li.up { background: #142118; } .jk-root .jk-fu li.down { background: #251C12; }
  .jk-root .jk-fu b { color: #D8D4CE; }
  .jk-root .jk-cover, .jk-root .jk-cfg { background: var(--jk-quiet); }
  .jk-root .jk-cover b, .jk-root .jk-cfg b { color: #D8D4CE; }
  .jk-root .jk-pricequick { background: var(--jk-quiet); color: #D8D4CE; border-color: var(--jk-line); }
  .jk-root .jk-delta em.w { color: #E8A05C; }
}

/* 散布図の色凡例 */
.scatterLegend { margin-top: 6px; }
/* 金額の30日換算 */
.jk-money-m { margin-top: 10px; font-size: 12px; color: var(--jk-navy); font-variant-numeric: tabular-nums; }
/* 判断に使えている人数（開くと増やし方が出る） */
details.jk-cover { padding: 0; }
details.jk-cover > summary {
  list-style: none; cursor: pointer; padding: 9px 14px; font-size: 12px; color: var(--jk-mute);
}
details.jk-cover > summary::-webkit-details-marker { display: none; }
details.jk-cover > summary span { font-size: 11.5px; font-weight: 700; color: var(--jk-or-deep); }
details.jk-cover[open] > summary span::after { content: "を閉じる"; }
.jk-covertodo { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 5px; }
.jk-covertodo li { font-size: 12px; line-height: 1.7; color: var(--jk-mute); }
.jk-covertodo li::before { content: "・"; }
.jk-covertodo b { color: var(--jk-navy); font-variant-numeric: tabular-nums; }
.jk-covertodo a { color: var(--jk-or-deep); }
@media (prefers-color-scheme: dark) {
  .jk-root .jk-money-m { color: #9FB4D6; }
  .jk-root .jk-covertodo b { color: #D8D4CE; }
}

/* 横スクロールできる表に、切れていることが分かる合図を出す */
/* ★フェードを中の absolute で置くと、スクロールと一緒に流れて消える。
   包む要素を1つ外に作って、そこに固定する。縦の切れにも同じ合図を出す。 */
.jk-tblbox { position: relative; }
.jk-tblbox::after, .jk-tblbox::before { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.jk-tblbox::after { top: 0; right: 0; bottom: 0; width: 30px;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--jk-paper)); }
.jk-tblbox::before { left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--jk-paper)); }
.jk-tblbox.can-x::after, .jk-tblbox.can-y::before { opacity: 1; }
.jk-tblbox.can-x .jk-tblwrap { box-shadow: inset -10px 0 12px -12px rgba(27,42,74,.3); }
.jk-tblhint { margin-top: 4px; font-size: 11px; color: var(--jk-or-deep); font-weight: 700; display: none; }
.jk-tblbox.can-x + .jk-tblhint, .jk-tblbox.can-y + .jk-tblhint { display: block; }
/* 在席内訳の凡例が8色で判別できないので、隣り合う色の差を広げる */
.jk-lgd i { border: 1px solid rgba(27,42,74,.18); }

/* 1on1で確認したい点（良かった点と対になる枠） */
.jk-worry {
  margin-top: 10px; padding: 13px 16px; border-radius: var(--jk-r-s);
  border: 1px solid var(--jk-line); border-left: 4px solid #C9793B;
  background: linear-gradient(100deg, #FDF6EF, #fff 60%); box-shadow: var(--jk-sh1);
}
.jk-worry b { font-size: 12.5px; color: var(--jk-navy); }
.jk-worry ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.jk-worry li { font-size: 12.5px; line-height: 1.7; color: var(--jk-mute); }
.jk-worry li::before { content: "・"; color: #C9793B; font-weight: 700; }
.jk-worryc { background: #A96632; }
@media (prefers-color-scheme: dark) {
  .jk-root .jk-worry { background: linear-gradient(100deg, #251C12, var(--jk-paper) 60%); border-color: #4A3620; }
  .jk-root .jk-worry b { color: #D8D4CE; }
}
/* 基準線のラベルは線に乗るので白フチで抜く */
.jk-refbg { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .jk-root .jk-refbg { stroke: var(--jk-paper); } }