/* ===== MONOC 管理画面 共通スタイル ===== */

:root {
  --bg: #F6F3EF;
  --card: #FFFFFF;
  --ink: #1B1723;
  --muted: #7A7382;
  --line: #E7E1DA;
  --lav: #7C6CF0;
  --lav-deep: #5D4DD6;
  --lav-soft: #E9E4FB;
  --pink: #FF5C8A;

  /* チャート用シリーズ色(検証済みの並び順 — 変更時は順序ごと見直すこと) */
  --s1: #7C6CF0;
  --s2: #FF5C8A;
  --s3: #E8A13D;
  --s4: #2E9E8F;

  --grid: #EDE9E2;
  --axis: #D8D2C8;
  --good: #1D7A34;
  --bad: #C63A3A;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(27,23,35,.05), 0 6px 24px rgba(27,23,35,.06);
  --font-en: "Helvetica Neue", Arial, sans-serif;
  --font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ja);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  font-feature-settings: "palt";
}

a { color: var(--lav-deep); text-decoration: none; }

button { font-family: inherit; }

/* ===== ログイン画面 ===== */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.orb {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #DDD6F5 0%, #E9E4FB 45%, rgba(246,243,239,0) 72%);
  top: -180px; right: -140px;
  pointer-events: none;
}
.orb2 {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 60%, #FFD9E8 0%, rgba(255,217,232,.4) 45%, rgba(246,243,239,0) 72%);
  bottom: -160px; left: -120px;
  pointer-events: none;
}

.login-card {
  position: relative;
  width: min(400px, calc(100vw - 40px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 40px 36px 32px;
}

.login-logo { display: block; height: 26px; margin: 0 auto 6px; }

.login-sub {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .14em;
  margin-bottom: 28px;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #FDFCFA;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--lav);
  box-shadow: 0 0 0 3px var(--lav-soft);
}

.login-btn {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: none;
  border-radius: 10px;
  background: var(--lav);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s;
}
.login-btn:hover { background: var(--lav-deep); }
.login-btn:disabled { opacity: .5; cursor: default; }

.login-error {
  display: none;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FCEEF0;
  border: 1px solid #F2CBD3;
  color: var(--bad);
  font-size: 12.5px;
}

.demo-note {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--lav-soft);
  font-size: 12px;
  color: #4A4258;
}
.demo-note strong { display: block; margin-bottom: 4px; }
.demo-note code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,.7);
  padding: 1px 6px;
  border-radius: 5px;
}

.login-foot {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .08em;
}

/* ===== ダッシュボード ===== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(246,243,239,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-logo { height: 18px; display: block; }
.topbar-title {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .12em;
  border-left: 1px solid var(--axis);
  padding-left: 16px;
}
.topbar-spacer { flex: 1; }
.viewer-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
}
.viewer-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lav-soft);
  color: var(--lav-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-en);
}
.logout-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.logout-btn:hover { color: var(--ink); border-color: var(--axis); }

.wrap {
  /* 画面幅に合わせて可変(超ワイドで間延びしない上限のみ設定) */
  max-width: min(100%, 1920px);
  margin: 0 auto;
  padding: 28px clamp(20px, 2.5vw, 44px) 64px;
}

.page-head { margin-bottom: 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.page-head .fiscal {
  font-size: 12px;
  color: var(--muted);
}
.scope-badge {
  font-size: 11px;
  color: var(--lav-deep);
  background: var(--lav-soft);
  border-radius: 999px;
  padding: 3px 12px;
}

/* KPI タイル */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 14px;
}
.kpi .k-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.kpi .k-value {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
}
.kpi .k-unit { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; font-family: var(--font-ja); }
.kpi .k-delta { font-size: 11.5px; margin-top: 5px; color: var(--muted); }
.kpi .k-delta .up   { color: var(--good); font-weight: 600; }
.kpi .k-delta .down { color: var(--bad);  font-weight: 600; }

/* カード */
.grid2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 14px;
  margin-bottom: 14px;
}
.card h2 {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 2px;
}
.card .sub { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }

/* 凡例 */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 2px 0 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.legend .li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }

/* チャート */
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: #241E30;
  color: #fff;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  box-shadow: 0 6px 20px rgba(27,23,35,.25);
  opacity: 0;
  transition: opacity .1s;
  z-index: 10;
  min-width: 130px;
}
.tooltip .t-title { font-weight: 700; margin-bottom: 3px; }
.tooltip .t-row { display: flex; align-items: center; gap: 6px; }
.tooltip .t-row .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tooltip .t-row .v { margin-left: auto; font-family: var(--font-en); padding-left: 10px; }

/* テーブル */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: right; white-space: nowrap; }
.tbl th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--axis);
}
.tbl td { border-bottom: 1px solid var(--grid); font-family: var(--font-en); }
.tbl th:first-child, .tbl td:first-child { text-align: left; font-family: var(--font-ja); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .total-row td { font-weight: 700; border-top: 2px solid var(--axis); }
.tbl-scroll { overflow-x: auto; }

.foot-note {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 26px;
}

/* =========================================================
 * 読込みアニメーション(monoc.inc 準拠) + ページワイプ
 * ========================================================= */
.intro{position:fixed;inset:0;background:#1B1723;z-index:999;display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:18px}
.intro img{height:30px;opacity:0;transform:translateY(20px);
  animation:introin .8s cubic-bezier(.2,.7,.2,1) .15s both}
.intro .bar{width:160px;height:2px;background:#372F42;border-radius:2px;overflow:hidden}
.intro .bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#7C6CF0,#FF5C8A);
  animation:introbar 1.1s cubic-bezier(.4,0,.2,1) .3s both}
.intro.done{animation:curtain .65s cubic-bezier(.7,0,.2,1) both}
@keyframes introin{100%{opacity:1;transform:none}}
@keyframes introbar{100%{width:100%}}
@keyframes curtain{100%{transform:translateY(-100%)}}
.wipe{position:fixed;inset:0;background:linear-gradient(120deg,#7C6CF0,#9C6CF0,#FF5C8A);
  z-index:997;pointer-events:none;transform:translateY(101%)}
.wipe.go{animation:wipeup .8s cubic-bezier(.7,0,.2,1)}
@keyframes wipeup{0%{transform:translateY(101%)}45%{transform:translateY(0)}
  55%{transform:translateY(0)}100%{transform:translateY(-101%)}}

/* ---- ナビ(トップバー内) ---- */
.topnav{display:flex;gap:4px;margin-left:28px}
.topnav a{padding:7px 13px;border-radius:8px;font-size:13px;color:var(--muted);
  text-decoration:none;font-weight:600}
.topnav a:hover{background:var(--lav-soft);color:var(--lav-deep)}
.topnav a.active{background:var(--ink);color:#fff}

/* ---- タブ ---- */
.tabs{display:flex;gap:6px;margin:18px 0 20px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 18px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.tabs button:hover{border-color:var(--lav);color:var(--lav-deep)}
.tabs button.active{background:linear-gradient(90deg,#7C6CF0,#FF5C8A);color:#fff;border-color:transparent}

/* ---- 汎用テーブル拡張 ---- */
.tbl-scroll{overflow:auto;max-height:520px}
.tbl-scroll table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
.tbl-scroll th,.tbl-scroll td{padding:7px 10px;border-bottom:1px solid var(--grid);text-align:right}
.tbl-scroll th{position:sticky;top:0;background:#FDFCFA;z-index:2;color:var(--muted);font-weight:600}
.tbl-scroll th:first-child,.tbl-scroll td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1}
.tbl-scroll th:first-child{z-index:3;background:#FDFCFA}
.tbl-scroll tr.total-row td{font-weight:700;background:#FAF8F4}
.mark-on{color:var(--lav-deep);font-weight:700}
.mark-past{color:#B99A3B;font-weight:700}
.mark-none{color:#CFC9C0}
.num-pos{color:var(--good)}
.num-neg{color:var(--bad)}

/* ---- KPI 小型 ---- */
.kpi-mini{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kpi-mini .box{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;min-width:170px}
.kpi-mini .box .t{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.kpi-mini .box .v{font-size:21px;font-weight:700;letter-spacing:.01em}
.kpi-mini .box .s{font-size:11px;color:var(--muted);margin-top:3px}

/* ---- 入力・シミュレーション ---- */
.sim-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 22px;margin:10px 0 18px}
.sim-controls label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.sim-controls .ctl{display:flex;align-items:center;gap:10px}
.sim-controls input[type=range]{flex:1;accent-color:#7C6CF0}
.sim-controls .val{font-size:13px;font-weight:700;min-width:64px;text-align:right}
.inp-num{width:90px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;
  font-size:12.5px;text-align:right;background:#fff}
.inp-num:focus{outline:2px solid var(--lav-soft);border-color:var(--lav)}
.btn-export{background:var(--ink);color:#fff;border:none;border-radius:10px;
  padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn-export:hover{background:#332B42}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:10px;
  padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.btn-ghost:hover{border-color:var(--lav);color:var(--lav-deep)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}
.search-inp{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;min-width:220px;background:#fff}
.note-src{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.7}
.badge-live{display:inline-block;font-size:10.5px;font-weight:700;color:#fff;
  background:linear-gradient(90deg,#7C6CF0,#FF5C8A);border-radius:999px;padding:3px 10px;vertical-align:2px;margin-left:8px}
.pace-chip{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px}
.pace-ahead{background:#E3F2E7;color:var(--good)}
.pace-on{background:#F0EDE6;color:#7A7382}
.pace-behind{background:#FBE9E9;color:var(--bad)}

/* legend/tooltip variants used by banilaco.js */
.lg-item{display:inline-flex;align-items:center;gap:6px;margin-right:14px;font-size:12px;color:#4A4258}
.lg-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.tt-title{font-weight:700;margin-bottom:3px}

/* ============ 業務フロータブ ============ */
.fl-hidden{display:none!important}
.fl-note{font-size:11.5px;color:var(--muted)}
.fl-hint{font-size:11px;color:var(--muted);font-weight:400;margin-left:8px}
.fl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fl-meta{margin-left:auto;font-size:12.5px;color:var(--muted)}
.fl-meta b{color:var(--ink)}
.fl-toggle{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:#fff}
.fl-toggle button{border:0;background:transparent;padding:5px 15px;font-size:12.5px;color:var(--muted);cursor:pointer;font-family:inherit;white-space:nowrap}
.fl-toggle button.active{background:var(--lav);color:#fff;font-weight:600}
.fl-stepper{display:flex;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px;box-shadow:0 1px 2px rgba(27,23,35,.05)}
.fl-step{flex:1;display:flex;align-items:center;gap:9px;padding:12px 14px;border:0;background:transparent;border-right:1px solid var(--line);font-size:12.5px;color:var(--muted);text-align:left;position:relative;cursor:pointer;font-family:inherit}
.fl-step:last-child{border-right:0}
.fl-step .num{width:24px;height:24px;border-radius:50%;background:var(--grid);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.fl-step.done .num{background:var(--good);color:#fff}
.fl-step.done .num::before{content:"✓"}
.fl-step.done .num span{display:none}
.fl-step.current{background:var(--lav-soft);color:var(--lav-deep);font-weight:700}
.fl-step.current .num{background:var(--lav);color:#fff}
.fl-step.skipped{opacity:.45}
.fl-step .skip-tag{position:absolute;top:4px;right:8px;font-size:9.5px;color:var(--muted)}
.fl-foot{display:flex;gap:10px;align-items:center;margin:4px 0 26px}
.fl-foot input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:13px;font-family:inherit;background:#fff}
.fl-btn{border:0;border-radius:10px;padding:10px 20px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.fl-btn.primary{background:var(--lav);color:#fff}
.fl-btn.primary:hover{background:var(--lav-deep)}
.fl-btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.fl-inp{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12.5px;font-family:inherit}
.fl-inp.num{width:82px;text-align:right}
.fl-inp:focus{outline:2px solid var(--lav-soft);border-color:var(--lav)}
.fl-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;font-family:var(--font-ja)}
.fl-pill.red{background:#FBEAEA;color:var(--bad)}
.fl-pill.yel{background:#FAF0DC;color:#B26E0F}
.fl-pill.grn{background:#E4F2E7;color:var(--good)}
.fl-pill.blu{background:#E5EDFB;color:#3763B8}
.fl-wkbar{display:inline-block;height:8px;border-radius:4px;background:var(--lav);vertical-align:middle}
.fl-airbar{display:flex;align-items:center;gap:12px;background:var(--lav-soft);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:12.5px;flex-wrap:wrap}
.fl-fresh{font-size:11.5px;color:var(--muted)}
.fl-fresh.stale{color:#B26E0F;font-weight:700}
.fl-fc-row{display:grid;grid-template-columns:130px 1fr 260px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--grid)}
.fl-fc-row:last-child{border-bottom:0}
.fl-fc-name{font-weight:700;font-size:13px}
.fl-fc-detail{font-size:11.5px;color:var(--muted)}
.fl-fc-slider{display:flex;align-items:center;gap:10px}
.fl-fc-slider input[type=range]{flex:1;accent-color:var(--lav)}
.fl-fc-val{font-weight:700;font-variant-numeric:tabular-nums;display:inline-block;width:52px;text-align:right;margin-right:8px}
.fl-log-item{display:flex;gap:10px;font-size:12px;padding:7px 0;border-bottom:1px solid var(--grid)}
.fl-log-item .t{color:var(--muted);flex:none;width:130px}
.fl-sku-row{cursor:pointer}
.fl-sku-row:hover td{background:var(--lav-soft)}
.fl-sku-row.sel td{background:var(--lav-soft)}
.fl-pie-wrap{display:flex;flex-direction:column;gap:8px}
.fl-pie-wrap .chart-box{max-width:480px;margin:0 auto;width:100%}
.fl-done-banner{background:#E4F2E7;color:var(--good);border-radius:10px;padding:11px 16px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.kpi-mini .box .s.up{color:var(--good)}
.kpi-mini .box .s.down{color:var(--bad)}
@media(max-width:760px){.fl-stepper{flex-direction:column}.fl-step{border-right:0;border-bottom:1px solid var(--line)}.fl-fc-row{grid-template-columns:1fr;gap:6px}}

/* ============ ブランド切替(topbar) / カバー月数選択 ============ */
.brand-sel-wrap{position:relative;display:inline-flex;align-items:center}
.brand-sel{appearance:none;-webkit-appearance:none;border:0;background:var(--ink);color:#fff;border-radius:8px;padding:7px 30px 7px 13px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.brand-sel-wrap::after{content:"▾";position:absolute;right:11px;color:#fff;font-size:11px;pointer-events:none}
.brand-sel:focus{outline:2px solid var(--lav-soft)}
.mf-cover{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 16px;text-align:left;cursor:pointer;font-family:inherit;min-width:150px}
.mf-cover:hover{border-color:var(--lav)}
.mf-cover.active{border-color:var(--lav);background:var(--lav-soft);box-shadow:0 0 0 1px var(--lav)}
.mf-cover .cv-m{font-size:12px;font-weight:700;color:var(--lav-deep)}
.mf-cover .cv-a{font-size:16px;font-weight:700;letter-spacing:.01em}
.mf-cover .cv-s{font-size:10.5px;color:var(--muted);margin-top:2px}

/* ============ ブランドタブ(topbar・ボタン並び) ============ */
/* ---- ヘッダー2段構成(タイトル・タブ内蔵) ---- */
.topbar-2row{flex-direction:column;align-items:stretch;gap:0;padding:10px 28px 0}
.topbar-2row .topbar-row{display:flex;align-items:center;gap:16px;min-height:40px}
.topbar-2row .tabs-in-header{margin:8px 0 0;padding-bottom:10px}
.brand-select{border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;border-radius:10px;padding:7px 30px 7px 12px;cursor:pointer;margin-left:6px;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C6CF0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.brand-select:hover{border-color:var(--lav)}
.brand-select:focus{outline:none;border-color:var(--lav);box-shadow:0 0 0 3px var(--lav-soft)}
.page-head-inline{display:flex;align-items:baseline;gap:10px;margin-left:10px;white-space:nowrap}
.page-head-inline h1{font-size:15.5px;font-weight:700;letter-spacing:.02em}
.page-head-inline .fiscal{font-size:11.5px;color:var(--muted)}
@media(max-width:900px){.page-head-inline{display:none}}

.brand-tabs{display:inline-flex;gap:4px;margin-left:6px}
.brand-tabs button{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:7px 13px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap}
.brand-tabs button:hover{background:var(--lav-soft);color:var(--lav-deep)}
.brand-tabs button.active{background:var(--ink);color:#fff;font-weight:600}

/* ============ 参照元モーダル / クリック可能KPI ============ */
.kpi-click{cursor:pointer;transition:border-color .15s}
.kpi-click:hover{border-color:var(--lav)}
.src-i{font-size:10px;color:var(--lav-deep);opacity:.7}
.src-overlay{position:fixed;inset:0;background:rgba(27,23,35,.35);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.src-modal{background:#fff;border-radius:16px;max-width:560px;width:100%;padding:22px 24px;box-shadow:0 20px 60px rgba(27,23,35,.25)}
.src-modal .src-title{font-size:14.5px;font-weight:700;margin-bottom:10px}
.src-modal .src-body{font-size:13px;line-height:1.8;color:var(--ink);margin-bottom:16px;white-space:pre-line;max-height:60vh;overflow-y:auto}