/* ============================================================
   売上ダッシュボード - スタイルシート
   "Monochrome Editorial Analytics" — 高級分析SaaS
   クロームはインク階調、彩度はデータの信号色(緑/琥珀/赤)だけに集中。
   ※ 全クラス名・IDは従来どおり（JS非破壊）。デザイントークン駆動。
   ============================================================ */

:root {
  /* Typography */
  --font-sans: "Zen Kaku Gothic New","Schibsted Grotesk","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;

  /* Ink / neutral ramp (warm graphite) */
  --ink-900:#14151A; --ink-800:#1D1F26; --ink-700:#2A2D36; --ink-600:#3D414B;
  --ink-500:#5A5F6A; --ink-400:#888D98; --ink-300:#B9BDC6; --ink-200:#E3E2DC; --ink-100:#EEEDE6;
  --paper:#F4F2EC; --surface:#FFFFFF; --surface-2:#FBFAF6;

  /* Brand accent (used sparingly: focus, active, links, primary-as-data) */
  --accent:#2F5BEA; --accent-ink:#1E40C4; --accent-soft:#EAEFFE;

  /* Semantic signal (the only saturated data colors) */
  --green:#15803D; --green-soft:#E7F4EC;
  --amber:#B7791F; --amber-soft:#FBF1DD;
  --red:#DC2626;   --red-soft:#FBEAEA;
  --info:#0E7490;  --info-soft:#E2F2F4;

  /* Legacy aliases (keep old class names working) */
  --primary:var(--accent); --primary-light:var(--accent-soft); --primary-dark:var(--accent-ink);
  --secondary:var(--ink-500); --success:var(--green); --danger:var(--red); --warning:var(--amber);
  --background:var(--paper); --text-main:var(--ink-900); --text-muted:var(--ink-500); --border:var(--ink-200);

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(20,21,26,.04);
  --shadow-sm:0 1px 3px rgba(20,21,26,.06),0 1px 2px rgba(20,21,26,.04);
  --shadow-md:0 4px 16px -4px rgba(20,21,26,.10),0 2px 6px -2px rgba(20,21,26,.06);
  --shadow-lg:0 18px 48px -12px rgba(20,21,26,.22);
  --shadow:var(--shadow-sm);

  /* Radii / layout / motion */
  --radius:12px; --radius-sm:8px; --radius-lg:18px; --radius-pill:999px;
  --sidebar-width:264px;
  --ease:cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background-color: var(--paper);
  color: var(--ink-900);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  letter-spacing: .005em;
}
::selection { background: var(--accent-soft); color: var(--accent-ink); }
a { color: var(--accent-ink); }

/* ============================================================
   APP SHELL & NAVIGATION
   ============================================================ */
.hamburger-btn{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--ink-600);transition:background .2s var(--ease),color .2s var(--ease)}
.hamburger-btn:hover{background:var(--ink-100);color:var(--ink-900)}
.hamburger-btn:active{background:var(--ink-200)}
.hamburger-btn svg{width:22px;height:22px}
.header-left{display:flex;align-items:center;gap:12px;min-width:0}
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,21,26,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:99}
.sidebar{width:var(--sidebar-width);background-color:var(--ink-900);background-image:linear-gradient(180deg,var(--ink-900) 0%,var(--ink-800) 100%);color:var(--ink-200);font-family:var(--font-sans);display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:100;border-right:1px solid rgba(255,255,255,.04);transition:transform .3s var(--ease)}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:padding-box}
.sidebar:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);background-clip:padding-box}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
body.sidebar-closed .sidebar{transform:translateX(-100%)}
body.sidebar-closed .main{margin-left:0;max-width:100vw}
.logo-area{height:64px;flex-shrink:0;display:flex;align-items:center;padding:0 22px;font-family:var(--font-sans);font-weight:700;letter-spacing:.4px;font-size:1rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.07)}
.nav-menu{padding:14px 12px 20px;flex:1;display:flex;flex-direction:column;gap:2px}
.nav-group-title{padding:14px 12px 6px;font-size:.66rem;color:var(--ink-400);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.nav-group-title:first-child{margin-top:0}
.nav-item{position:relative;display:flex;align-items:center;padding:9px 14px;border-radius:var(--radius-sm);color:var(--ink-300);text-decoration:none;font-family:var(--font-sans);font-size:.875rem;font-weight:500;line-height:1.3;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.nav-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);transform-origin:center;width:3px;height:20px;border-radius:var(--radius-pill);background:var(--accent);transition:transform .2s var(--ease)}
.nav-item:hover{background-color:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background-color:rgba(255,255,255,.09);color:#fff;font-weight:600}
.nav-item.active::before{transform:translateY(-50%) scaleY(1)}
.nav-icon{width:18px;height:18px;margin-right:11px;fill:currentColor;flex-shrink:0;opacity:.85}
.nav-item.active .nav-icon{opacity:1}
.main{flex:1;display:flex;flex-direction:column;margin-left:var(--sidebar-width);min-height:100vh;min-width:0;max-width:calc(100vw - var(--sidebar-width));background:var(--paper);transition:margin-left .3s var(--ease),max-width .3s var(--ease)}
.header{height:64px;background-color:rgba(244,242,236,.82);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--ink-200);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50}
.page-title{font-family:var(--font-sans);font-size:1.1rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-right{display:flex;align-items:center;gap:18px}
.header-date{font-family:var(--font-sans);font-size:.82rem;font-weight:500;color:var(--ink-500);font-variant-numeric:tabular-nums}
.content-area{flex:1;padding:28px;overflow-y:auto;overflow-x:hidden;min-width:0}
.content-area::-webkit-scrollbar{width:10px}
.content-area::-webkit-scrollbar-track{background:transparent}
.content-area::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:padding-box}
.content-area::-webkit-scrollbar-thumb:hover{background:var(--ink-400);background-clip:padding-box}
.content-area{scrollbar-width:thin;scrollbar-color:var(--ink-300) transparent}
.page{min-width:0}
.page{display:none}
.page.active{display:block;animation:page-fade-in .26s var(--ease) both}
@keyframes page-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.page.active{animation:none}.sidebar,.main,.nav-item,.nav-item::before{transition:none}}

/* ============================================================
   CARDS / STAT CARDS / CHARTS / PROGRESS
   ============================================================ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.card{position:relative;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;border:1px solid var(--ink-200);overflow:hidden;transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300)}
.stat-card{display:flex;flex-direction:column}
.stat-card::before{display:none}

.stat-label{font-size:.78rem;color:var(--ink-500);margin-bottom:8px;font-weight:600;letter-spacing:.01em}
.stat-value{font-size:2rem;font-weight:700;color:var(--ink-900);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.stat-sub{font-size:.75rem;color:var(--ink-400);margin-top:6px}
.stat-trend{font-size:.78rem;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.trend-up,td .trend-up{color:var(--green);font-weight:600}
.trend-down,td .trend-down{color:var(--red);font-weight:600}
.trend-flat,td .trend-flat{color:var(--ink-400)}
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px}
.charts-grid>*{min-width:0}.stats-grid>*{min-width:0}
.chart-container{position:relative;width:100%;overflow:hidden}
.card-title{font-size:.9rem;font-weight:700;color:var(--ink-800);letter-spacing:.01em;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--ink-100);display:flex;align-items:center;justify-content:space-between}
.gauge-wrap{display:flex;align-items:center;justify-content:center;padding:10px 0}
.progress-bar-container{width:100%;background:var(--ink-100);border-radius:var(--radius-pill);height:24px;overflow:hidden;position:relative}
.progress-bar-fill{height:100%;border-radius:var(--radius-pill);transition:width .6s var(--ease);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.progress-green{background:var(--green)}
.progress-yellow{background:var(--amber);color:#fff}
.progress-red{background:var(--red)}
.progress-blue{background:var(--accent)}

/* ============================================================
   TABLES / BADGES / BUTTONS / FORMS / FILTERS / MODAL / TOAST
   ============================================================ */
.table-container{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--ink-200);overflow:hidden;margin-bottom:24px;min-width:0}
.table-header{padding:18px 24px;border-bottom:1px solid var(--ink-200);display:flex;justify-content:space-between;align-items:center;background:var(--surface)}
.table-title{font-weight:650;font-size:.95rem;color:var(--ink-900);letter-spacing:-.01em}
.table-scroll{overflow:auto;-webkit-overflow-scrolling:touch}
.table-scroll thead th{position:sticky;top:0;z-index:1;background-color:var(--surface-2)}
.show-more-container{padding:14px 20px;text-align:center;border-top:1px solid var(--ink-200);background:var(--surface-2)}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:13px 24px;background-color:var(--surface-2);color:var(--ink-500);font-size:.68rem;font-weight:650;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--ink-200);white-space:nowrap}
td{padding:15px 24px;font-size:.86rem;color:var(--ink-800);border-bottom:1px solid var(--ink-100);white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr{transition:background-color .2s var(--ease)}
tr:hover{background-color:var(--surface-2)}
td.text-right,th.text-right,.text-right{text-align:right}
td.text-center,th.text-center,.text-center{text-align:center}
td.text-right,th.text-right{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.text-muted{color:var(--ink-400)}
.text-strong{font-weight:650;color:var(--ink-900)}
.badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);font-size:.7rem;font-weight:650;line-height:1;letter-spacing:.01em}
.badge-success{background:var(--green-soft);color:var(--green)}
.badge-warning{background:var(--amber-soft);color:var(--amber)}
.badge-danger{background:var(--red-soft);color:var(--red)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-secondary{background:var(--ink-100);color:var(--ink-600)}
.badge-rank-a{background:var(--green-soft);color:var(--green)}
.badge-rank-b{background:var(--accent-soft);color:var(--accent-ink)}
.badge-rank-c{background:var(--ink-100);color:var(--ink-600)}
.btn{padding:9px 18px;border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font-sans);font-size:.84rem;cursor:pointer;font-weight:600;transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;line-height:1.2}
.btn-primary{background:var(--ink-900);color:var(--surface);box-shadow:var(--shadow-xs)}
.btn-primary:hover{background:var(--ink-700);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.btn-secondary{background:var(--surface);color:var(--ink-700);border-color:var(--ink-200);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--ink-300)}
.btn-success{background:var(--green);color:var(--surface);box-shadow:var(--shadow-xs)}
.btn-success:hover{filter:brightness(.94);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.btn-danger{background:var(--red);color:var(--surface);box-shadow:var(--shadow-xs)}
.btn-danger:hover{filter:brightness(.94);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.btn-sm{padding:5px 12px;font-size:.77rem}
.btn-outline{background:transparent;border:1px solid var(--ink-300);color:var(--ink-700)}
.btn-outline:hover{background:var(--surface-2);border-color:var(--ink-400)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.74rem;font-weight:650;color:var(--ink-500);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.form-control{width:100%;padding:9px 13px;border:1px solid var(--ink-200);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.88rem;color:var(--ink-800);background:var(--surface-2);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.form-control::placeholder{color:var(--ink-400)}
.form-control:hover{border-color:var(--ink-300)}
.form-control:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
select.form-control{cursor:pointer}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,21,26,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:200;justify-content:center;align-items:flex-start;padding-top:80px}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--ink-200);width:90%;max-width:640px;max-height:80vh;overflow-y:auto;animation:modalIn .2s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--ink-200);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-weight:650;font-size:1rem;color:var(--ink-900);letter-spacing:-.01em}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-400);padding:4px 8px;line-height:1;border-radius:var(--radius-sm);transition:color .2s var(--ease),background-color .2s var(--ease)}
.modal-close:hover{color:var(--ink-800);background:var(--surface-2)}
.modal-body{padding:24px}
.modal-body p{white-space:pre-line;line-height:1.75;color:var(--ink-700)}
.modal-footer{padding:16px 24px;border-top:1px solid var(--ink-200);display:flex;justify-content:flex-end;gap:10px;background:var(--surface-2)}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.filters .form-group{flex:1 1 130px;min-width:100px;max-width:200px;margin-bottom:0}
.filters .form-control{width:100%!important;min-width:0}
.filter-item{margin-bottom:0}
.filter-btn{flex:0 0 auto;padding-top:18px}
.loading{display:flex;justify-content:center;align-items:center;padding:48px;color:var(--ink-400);white-space:nowrap;font-size:.85rem}
.spinner{width:24px;height:24px;border:2.5px solid var(--ink-200);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-right:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.toast-container{position:fixed;top:20px;right:20px;z-index:300}
.toast{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:13px 20px;margin-bottom:10px;font-size:.85rem;color:var(--ink-800);display:flex;align-items:center;gap:10px;animation:slideIn .3s var(--ease)}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ============================================================
   ALERTS / FORECAST / RANKING
   ============================================================ */
.alert-item{position:relative;padding:12px 16px 12px 34px;border:1px solid var(--red-soft);background:var(--red-soft);border-radius:var(--radius-sm);margin-bottom:8px;font-size:.85rem}
.alert-item::before{content:"";position:absolute;left:14px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.alert-item.info{border-color:var(--info-soft);background:var(--info-soft)}
.alert-item.info::before{background:var(--info)}
.alert-item .alert-title{font-weight:700;color:var(--ink-800);margin-bottom:2px}
.alert-item .alert-detail{color:var(--ink-500);font-size:.78rem}
.forecast-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.scenario-card{padding:14px 12px;border-radius:var(--radius-sm);border:1px solid transparent;text-align:center;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.scenario-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.scenario-card.optimistic{background:var(--green-soft);border-color:rgba(21,128,61,.18)}
.scenario-card.realistic{background:var(--accent-soft);border-color:rgba(47,91,234,.16)}
.scenario-card.pessimistic{background:var(--amber-soft);border-color:rgba(183,121,31,.18)}
.scenario-label{font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-500);margin-bottom:6px}
.scenario-card.optimistic .scenario-value{color:var(--green)}
.scenario-card.realistic .scenario-value{color:var(--accent-ink)}
.scenario-card.pessimistic .scenario-value{color:var(--amber)}
.scenario-value{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.rank-1{color:#C8A33B;font-weight:700}
.rank-2{color:#9AA0A8;font-weight:700}
.rank-3{color:#B07A45;font-weight:700}

/* ---- Page sections ---- */
.page{display:none}
.page.active{display:block}

/* ============================================================
   RESPONSIVE (cards / stats)
   ============================================================ */
@media (max-width:1400px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .filters{gap:8px}
  .filters .form-group{flex:1 1 120px;min-width:0}
  .filters .form-control{width:100%;min-width:0}
}
@media (max-width:1200px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
  .stat-value{font-size:1.4rem}
}
@media (max-width:1000px){
  :root{--sidebar-width:208px}
  .sidebar{width:208px}
  .main{margin-left:208px;max-width:calc(100vw - 208px)}
  .logo-area{font-size:.9rem;padding:0 16px}
  .nav-menu{padding:10px 10px 16px}
  .nav-item{padding:8px 11px;font-size:.82rem}
  .nav-icon{width:16px;height:16px;margin-right:9px}
  .content-area{padding:18px}
  .header{padding:0 18px}
}
@media (max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .main{margin-left:0;max-width:100vw}
  body.sidebar-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-lg)}
  body.sidebar-open .sidebar-overlay{display:block}
  .header{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 14px}
  .content-area{padding:14px;padding-top:78px}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .stat-card{padding:14px;min-width:0}
  .stat-value{font-size:clamp(.85rem,4vw,1.1rem);word-break:break-all}
  .stat-label{font-size:.72rem}
  .stat-sub{font-size:.68rem}
  .stat-trend{font-size:.7rem}
  .form-row{grid-template-columns:1fr}
  .forecast-scenarios{grid-template-columns:1fr}
  .filters{flex-direction:column;align-items:stretch;gap:6px}
  .filters .form-group{width:100%;max-width:100%;flex:0 0 auto}
  .filters .form-group label{margin-bottom:2px}
  .filter-btn{padding-top:4px}
  .table-scroll{max-height:50vh}
}

/* ============================================================
   KPIカード（③）— GASメール版 renderKpiCardHTML_ と同じ情報設計
   ============================================================ */
.kpi-head{font-size:13px;color:var(--ink-500);margin:4px 0 12px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.kpi-card{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi-name{font-size:12px;font-weight:600;color:var(--ink-500);letter-spacing:.02em}
.kpi-actual{font-size:30px;font-weight:700;color:var(--ink-900);line-height:1.05;letter-spacing:-.02em;margin:4px 0 10px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.kpi-emoji{font-size:18px}
.kpi-cmp-row{display:flex;gap:18px;margin-bottom:10px}
.kpi-cmp-label{font-size:11px;color:var(--ink-400)}
.kpi-cmp-val{font-size:14px;font-weight:700;color:var(--ink-700);font-variant-numeric:tabular-nums}
.kpi-spark{display:flex;align-items:flex-end;gap:2px;height:30px;margin:2px 0 8px}
.kpi-bar{width:8px;border-radius:2px 2px 0 0;transition:height .4s var(--ease)}
.kpi-spark-label{align-self:flex-end;font-size:10px;color:var(--ink-400);margin-left:6px}
.kpi-gauge{display:flex;align-items:center;gap:8px;margin-top:6px}
.kpi-gauge-track{flex:1;background:var(--ink-100);border-radius:var(--radius-pill);height:8px;overflow:hidden}
.kpi-gauge-fill{height:8px;border-radius:var(--radius-pill);transition:width .6s var(--ease)}
.kpi-gauge-pct{font-size:11px;font-weight:600;color:var(--ink-500);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.kpi-micro{font-size:13px;font-weight:600;color:var(--ink-600);margin-top:8px}
.kpi-nodata{background:var(--amber-soft);border:1px solid var(--amber);color:var(--amber);padding:16px;border-radius:var(--radius);font-weight:600}
.kpi-empty,.kpi-loading{color:var(--ink-400);padding:16px}

/* ============================================================
   デザイン水準仕上げ（2025 premium analytics）
   ============================================================ */
/* チャートの高さを固定しリズムを揃える（maintainAspectRatio:false前提） */
.chart-container { height: 264px; }
@media (max-width: 768px) { .chart-container { height: 220px; } }

/* キーボードフォーカスリング（全インタラクティブ要素） */
a, button, .btn, .nav-item, .modal-close, .hamburger-btn, input, select, textarea { outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.modal-close:focus-visible, .hamburger-btn:focus-visible,
.form-control:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 注記（経路/紹介テーブルのキャプション）を正式クラス化 */
.table-note { font-size: 11px; color: var(--ink-400); font-weight: 400; }

/* KPI信号ドット（絵文字を廃しモノクローム・エディトリアルに統一） */
.kpi-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-left: 4px; box-shadow: 0 0 0 3px rgba(20,21,26,.04); }

/* シマースケルトン（ローディング） */
.skeleton-wrap { padding: 8px 2px; }
.skeleton { background: linear-gradient(90deg, var(--ink-100) 25%, var(--surface-2) 37%, var(--ink-100) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: skeleton-shimmer 1.3s ease infinite; }
.skeleton-row { height: 14px; margin: 10px 0; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* 行内CRUD操作ボタン */
.crud-actions { display: inline-flex; gap: 6px; white-space: nowrap; }
.crud-actions .btn { padding: 3px 10px; font-size: .74rem; }
.crud-actions .crud-del:hover { border-color: var(--red); color: var(--red); }
/* entityModal: 2カラム詰め（狭幅は1カラム） */
#entityModalBody .form-row { gap: 12px 14px; }

/* KPI信号の冗長テキストラベル（色覚配慮） */
.kpi-level { font-size: 11px; font-weight: 700; margin-left: 4px; vertical-align: middle; }

/* ============================================================
   デザイン格上げ v2 — 左色帯を廃し、信号は淡色チップで表現
   ============================================================ */
.kpi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.kpi-card .kpi-name { font-size: 12px; font-weight: 600; color: var(--ink-500); letter-spacing: .03em; }
/* 信号チップ（ピル）：淡色背景＋色テキスト＋ドット。色覚冗長(テキスト併記) */
.kpi-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.kpi-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kpi-card .kpi-actual { font-size: 30px; font-weight: 700; color: var(--ink-900); line-height: 1.05; letter-spacing: -.02em; margin: 6px 0 12px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* スタットカード：数値を主役に、ラベルは小さく上品に */
.stat-card { gap: 0; }
.stat-card .stat-label { text-transform: none; }

/* カード見出しの罫線をより繊細に */
.card-title { border-bottom-color: var(--ink-100); }

/* ============================================================
   モバイル最適化 v3（タップ44px / iOSズーム防止 / モーダル / テーブル / 折返し）
   ============================================================ */
/* グローバル横スクロール保険 */
html, body { overflow-x: hidden; }

/* カード内フレックス行：長い数値・名称でも折返して崩れない */
.kpi-cmp-row { flex-wrap: wrap; }
.kpi-cmp { min-width: 0; flex: 1 1 calc(50% - 9px); }
.stat-trend { flex-wrap: wrap; min-width: 0; }
.kpi-card-head .kpi-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-chip { flex: 0 0 auto; }
.stat-value { overflow-wrap: anywhere; }

/* モーダル：中央・スクロール可・モバイルURLバー対応(dvh)・フッタ常時表示・背景スクロールロック */
.modal-overlay { align-items: center; padding: 16px; overflow-y: auto; }
.modal { max-height: calc(100dvh - 32px); }
.modal-footer { position: sticky; bottom: 0; }
body.modal-open { overflow: hidden; }

@media (max-width: 768px) {
  /* タップ領域 44px（Apple/Android推奨） */
  .hamburger-btn { min-width: 44px; min-height: 44px; }
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
  .modal-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .crud-actions { gap: 10px; }
  .crud-actions .btn { min-height: 40px; padding: 8px 12px; }
  /* iOS: 入力16pxで focus 時の自動ズームを防止＋タップ高さ確保 */
  .form-control { font-size: 16px; min-height: 44px; }
  /* テーブル余白を圧縮し横長を半減（24px→12px） */
  th, td { padding: 10px 12px; font-size: .8rem; }
  /* 固定ヘッダ下の余白をヘッダ実高に意味づけ */
  .content-area { padding-top: calc(64px + 14px); }
}
/* 極小幅：KPI比較を縦積みにして数値の溢れを完全回避 */
@media (max-width: 380px) {
  .kpi-cmp-row { flex-direction: column; gap: 6px; }
}

/* ============================================================
   モバイル v4 — ノッチ(セーフエリア)対応 + 横スクロールの気づき
   ============================================================ */
/* ノッチ/Dynamic Island/丸角を避ける（viewport-fit=cover前提） */
.header { padding-top: env(safe-area-inset-top, 0px); }
.sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 768px) {
  .header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .content-area { padding-top: calc(64px + 14px + env(safe-area-inset-top, 0px)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
/* 横スクロール可能なテーブルに左右の影ヒント（CSSグラデ技法。スクロールで自動消滅） */
.table-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(20,21,26,.10), rgba(20,21,26,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(20,21,26,.10), rgba(20,21,26,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ============================================================
   UX向上 v5 — デモ明示 / ゼブラ / コントラスト / 用語ツールチップ
   ============================================================ */
.demo-banner { background: var(--amber-soft); color: var(--amber); border-bottom: 1px solid var(--amber); padding: 8px 28px; font-size: .8rem; font-weight: 700; text-align: center; }
@media (max-width: 768px) { .demo-banner { padding: 8px 14px; } }
/* テーブルのゼブラ縞（行追従しやすく） */
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
tr:hover { background-color: var(--surface-2); }
/* 小さい補足文字のコントラストを WCAG AA 寄りに引き上げ */
.stat-sub, .table-note, .kpi-spark-label, .kpi-cmp-label, .form-control::placeholder { color: var(--ink-500); }
/* 用語ツールチップ（abbr）：点線下線でホバー可能を示す */
abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

/* ── ブランド ロゴ（スジミチ / Sujimichi） ── */
/* 濃紺ロゴをダークsidebarで見せるため上部を白帯にしてロゴ画像を配置 */
.logo-area{gap:0;background:#fff;justify-content:center;padding:0 16px;border-bottom:1px solid var(--border)}
.logo-area .logo-img{height:40px;width:auto;max-width:100%;display:block;object-fit:contain}
/* （旧テキストワードマークのフォールバック用スタイルは残置） */
.logo-area .logo-mark{font-family:var(--font-sans);font-weight:700;font-size:1.08rem;letter-spacing:.3px;line-height:1;color:var(--ink-900)}
.logo-area .logo-dot{color:var(--green);font-size:.62em;vertical-align:middle;margin:0 .02em}
.logo-area .logo-sub{margin-left:9px;font-size:.72rem;font-weight:500;color:var(--ink-500);letter-spacing:.1em}
@media (max-width:480px){.logo-area .logo-sub{display:none}}

/* ロール出し分け: staff には manager-only 要素を非表示 */
body[data-role="staff"] .manager-only { display: none !important; }

/* === モバイル/横断UX 改善（UXシミュ反映） === */
.logo-area{position:relative}
.sidebar-close{display:none;position:absolute;top:50%;right:10px;transform:translateY(-50%);background:none;border:0;color:var(--ink-500);font-size:1.2rem;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:8px}
.sidebar-close:hover{background:var(--surface-2,#f3f5f9)}
@media (max-width:768px){
  .sidebar-close{display:flex;align-items:center;justify-content:center}
  #acctMenu > div:first-child{display:none}          /* 会社名/メールはモバイルで隠す（ログアウト等は残す）*/
  .header-right{gap:8px}
  #tenantSwitcher{max-width:120px}
  .page-title{font-size:1rem}
  /* 横スクロール時も主項目（先頭列）が見えるよう固定 */
  .table-scroll table th:first-child,
  .table-scroll table td:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--border,#e6ebf2)}
  .table-scroll table thead th:first-child{z-index:2;background:var(--surface-2,#fafbfe)}
}

/* 新規テナントのセットアップ集中モード（チェックリスト以外を隠す） */
#page-dashboard.is-setup > *:not(#dashSetup){display:none!important}