/* Q-STOCK — Tidal Stratigraphy / 潮の地層
   Flat, paper-warm, generous whitespace. No shadows, no gradients. */

:root {
  --paper: #F4F1EA;
  --paper-raised: #FBF9F3;
  --ink: #1C1812;
  --sub: #6A6155;
  --rule: #D8D0BF;
  --rule-soft: #E6E0D3;
  --fire: #B5402A;   /* 火入れ＝朱 — 火入/未火入/警告のみ */
  --teal: #1D9E75;   /* 中核アクション */
  --teal-ink: #126047;

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  /* 上部ナビ・業務フローステッパー共通タイル寸法 */
  --nav-tile-w: 8.5rem;
  --nav-tile-h: 88px;
  /* セクションラベルとタイル列の左端を揃える */
  --nav-section-pad: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  padding: 14px 28px;
  background: var(--paper);
  border-top: 3px solid var(--fire);   /* 朱の上罫線 */
  border-bottom: 1px solid var(--rule);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-brand {
  display: block;
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
}
.logo-mark {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.logo-sub {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--sub);
  letter-spacing: 0.08em;
}
.date-global { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
.date-global-label { letter-spacing: 0.06em; }
input[type="month"] {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 5px 8px;
}

input[type="date"], input[type="text"], input[type="number"], select {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 5px 8px;
}
input:focus, select:focus { outline: none; border-color: var(--teal); }

/* ---------- Body / Top Nav ---------- */
#app { /* flex-direction: column already set on #app */ }

/* ① 上部ナビ — 4グループ横並び */
.top-nav,
#sidebar,
#top-nav {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px var(--nav-section-pad) 6px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.nav-group,
.flow-stepper-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
}
.nav-group-label,
.flow-group-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sub);
  opacity: 0.65;
  padding: 0;
  margin: 0 0 4px;
  line-height: 1;
}
.nav-group-items,
.flow-stepper-wrap > .flow-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  padding: 0;
  margin: 0;
}
.nav-group-items {
  flex-wrap: wrap;
}
.flow-stepper-wrap > .flow-stepper {
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
.nav-group-divider {
  display: inline-block;
  width: 1px;
  background: var(--rule);
  margin: 6px 4px 0;
  flex-shrink: 0;
  align-self: stretch;
}
/* 旧セパレータ（後方互換） */
.top-nav-sep {
  display: none;
}
/* タイル本体（業務フロー・下部ナビ共通：縦型ミニタイル） */
.nav-item {
  display: inline-flex;
  flex: 0 0 var(--nav-tile-w);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: var(--nav-tile-w);
  min-width: var(--nav-tile-w);
  max-width: var(--nav-tile-w);
  height: var(--nav-tile-h);
  min-height: var(--nav-tile-h);
  max-height: var(--nav-tile-h);
  padding: 10px 8px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 7px;
  overflow: hidden;
  transition: box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.nav-item:hover {
  border-color: var(--sub);
  box-shadow: 0 2px 7px rgba(0,0,0,0.11);
  transform: translateY(-1px);
}
.nav-item.active {
  background: #1C1812;
  border-color: var(--ink);
}
.nav-label {
  width: 100%;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  padding: 0;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nav-item.active .nav-label {
  color: var(--paper);
  font-weight: 600;
}

/* グローバル業務フローステッパーコンテナ */
#flow-nav {
  padding: 0 var(--nav-section-pad);
  background: var(--paper);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Main ---------- */
.main { padding: 30px 40px 64px; min-width: 0; }
.loading { color: var(--sub); padding: 40px 0; }
.error-box {
  border: 1px solid var(--fire);
  color: var(--fire);
  background: #FBEDEA;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 12px;
}

.view-head { margin-bottom: 26px; }
.view-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}
.view-no { font-family: var(--mono); font-size: 11px; color: var(--fire); letter-spacing: 0.1em; }
.view-sub { color: var(--sub); font-size: 12px; margin-top: 6px; }

/* ---------- KPI cards ---------- */
.kpi-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 32px; }
.kpi {
  flex: 1 1 200px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: 18px 20px;
}
.kpi-label { font-size: 11px; color: var(--sub); letter-spacing: 0.08em; margin-bottom: 8px; }
.kpi-value { font-family: var(--mono); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; }
.kpi-value.fire { color: var(--fire); }
.kpi-unit { font-size: 12px; color: var(--sub); font-family: var(--sans); margin-left: 4px; font-weight: 400; }

/* ---------- Panels ---------- */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 1080px) { .panels { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--rule); background: var(--paper); }
.panel-head {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}
.panel-body { padding: 14px 16px; }
.panel.full { grid-column: 1 / -1; }

/* ---------- Bars (グレード別/倉庫別) ---------- */
.bar-list { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 10px; }
.bar-key { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-track { background: var(--rule-soft); height: 14px; position: relative; }
.bar-fill { height: 14px; background: var(--teal); }
.bar-fill.tonal { /* color set inline from grade tonal */ }
.bar-val { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink); }
.bar-key-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-key-code { font-family: var(--mono); font-size: 11px; color: var(--sub); }

/* グレード階調スウォッチ — border必須で可読 */
.swatch {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid var(--ink);
  display: inline-block;
}
.swatch.sm { width: 11px; height: 11px; }

/* ---------- Fire funnel ---------- */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 90px 1fr 130px; align-items: center; gap: 10px; }
.funnel-track { height: 18px; background: var(--rule-soft); }
.funnel-fill { height: 18px; }
.funnel-fill.unfired { background: var(--fire); }
.funnel-fill.fired { background: var(--teal); }
.funnel-label { font-size: 12px; }
.funnel-val { font-family: var(--mono); font-size: 12px; text-align: right; }

/* ---------- TODO list ---------- */
.todo-list { display: flex; flex-direction: column; gap: 0; }
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12px;
}
.todo-item:last-child { border-bottom: none; }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.todo-dot.warn { background: var(--fire); }
.todo-dot.info { background: var(--sub); }
.todo-empty { color: var(--sub); padding: 12px 0; font-size: 12px; }

/* ---------- Tables ---------- */
.table-section { position: relative; }
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.table-toolbar-compact {
  margin-bottom: 4px;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 0;
}
.table-toolbar-compact .btn {
  padding: 4px 10px;
  font-size: 11px;
}
.table-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.table-count { font-size: 12px; }
.table-toolbar-compact .table-count { font-size: 11px; line-height: 1.2; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
.table-wrap.scrollable {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
table { width: 100%; border-collapse: collapse; background: var(--paper); }
thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
  text-align: left;
  letter-spacing: 0.05em;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  white-space: nowrap;
}
thead tr.label-row th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper-raised);
}
thead tr.filter-row th {
  position: sticky;
  top: var(--thead-label-h, 36px);
  z-index: 2;
  padding: 4px 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th.sorted-asc::after { content: ' ▲'; font-size: 9px; }
thead th.sorted-desc::after { content: ' ▼'; font-size: 9px; }
thead th.col-freeze,
tbody td.col-freeze {
  position: sticky;
  left: var(--freeze-left, 0);
  z-index: 1;
  background: var(--paper);
}
thead tr.label-row th.col-freeze { z-index: 5; background: var(--paper-raised); }
thead tr.filter-row th.col-freeze { z-index: 4; background: var(--paper); }
tbody tr:hover td.col-freeze { background: var(--paper-raised); }
tbody td {
  font-size: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper-raised); }
/* ④ 行クリック可能スタイル（在庫台帳→明細ジャンプ） */
tbody tr.row-clickable { cursor: pointer; }
tbody tr.row-clickable:hover { background: var(--rule-soft); }
tbody tr.row-clickable:hover td { color: var(--ink); }
td.num, th.num { text-align: right; font-family: var(--mono); }
td.mono { font-family: var(--mono); }

/* filter row controls */
.filter-input {
  width: 100%;
  min-width: 48px;
  padding: 3px 6px;
  font-size: 11px;
}
.filter-range-wrap { display: flex; gap: 4px; }
.filter-range { width: 50%; min-width: 0; }
.filter-select-wrap { position: relative; }
.filter-select-btn {
  width: 100%;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  cursor: pointer;
  font-family: var(--mono);
  color: var(--sub);
}
/* ③ 絞込中（全選択でない）はボタンを強調 */
.filter-select-btn.active {
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}
.filter-select-pop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  z-index: 10;
  padding: 0 0 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* ③ ×閉じるボタン */
.filter-select-close {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 13px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--sub);
  line-height: 1.4;
}
.filter-select-close:hover { color: var(--ink); }
.filter-select-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
}
.filter-select-opt input { width: auto; }

/* column config panel */
.col-config-panel {
  position: absolute;
  top: 36px;
  right: 0;
  width: 220px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  z-index: 20;
  padding: 10px 12px;
}
.col-config-panel.hidden { display: none; }
.col-config-head {
  font-size: 11px;
  color: var(--sub);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
}
.col-config-list { display: flex; flex-direction: column; gap: 4px; }
.col-config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: grab;
  border: 1px solid transparent;
}
.col-config-item:hover { border-color: var(--rule-soft); background: var(--paper); }
.col-config-item.dragging { opacity: 0.5; }
.col-config-label { flex: 1; }
.col-config-grip { color: var(--sub); font-size: 10px; letter-spacing: -2px; }
.col-config-item input { width: auto; }

.hidden { display: none !important; }
.cell-grade { display: flex; align-items: center; gap: 8px; }
.cell-grade-name { font-size: 12px; }
.cell-grade-code { font-family: var(--mono); font-size: 11px; color: var(--sub); }

/* R-4: グレード検索コンボ */
.grade-search-select { position: relative; width: 100%; }
.grade-search-input { width: 100%; max-width: 320px; }
.grade-search-list {
  position: absolute; z-index: 40; left: 0; right: 0; max-height: 220px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); margin-top: 2px;
}
.grade-search-item {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px;
  border: none; background: transparent; text-align: left; cursor: pointer; font-size: 13px;
}
.grade-search-item:hover, .grade-search-item.selected { background: var(--surface-alt, #f5f3ef); }
.grade-search-label { flex: 1; }
.row-alloc { background: #EAF6F0; }
.row-alloc:hover { background: #E1F1E9; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid;
  white-space: nowrap;
}
.badge.fired { color: var(--teal-ink); border-color: var(--teal); background: #E7F4EE; }
.badge.unfired { color: var(--fire); border-color: var(--fire); background: #FBEDEA; }
.badge.prov { color: var(--fire); border-color: var(--fire); background: transparent; margin-left: 6px; }
.badge.neutral { color: var(--sub); border-color: var(--rule); }

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 20px;
  margin-bottom: 20px;
  max-width: 880px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; color: var(--sub); letter-spacing: 0.05em; }
.field input, .field select, .field textarea { width: 100%; }
.field textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 10px;
}
.field.check { flex-direction: row; align-items: center; gap: 8px; margin-top: 18px; }
.field.check input { width: auto; }
.field.check label { font-size: 12px; color: var(--ink); }

.form-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px 12px;
  margin-bottom: 10px;
  max-width: none;
}
.form-grid-compact .field { gap: 3px; }
.form-grid-compact .field label { font-size: 10px; letter-spacing: 0.04em; }
.btn-row-compact { margin-top: 2px; margin-bottom: 8px; }
.btn-row-compact .btn { padding: 5px 14px; font-size: 12px; }

/* 仕入登録モード切替（一括 / 個別） */
.intake-mode-tabs { margin-bottom: 8px; }
.intake-mode-hint { font-size: 12px; margin: 0 0 10px; line-height: 1.5; }
.import-bulk-controls { margin-bottom: 4px; }
.intake-mode-panel.tab-content { margin-top: 0; }

/* 仕入明細ロック・履歴 */
.intake-lock-icon { cursor: pointer; font-size: 14px; line-height: 1; }
.intake-lock-icon.locked { opacity: 0.85; }
.intake-history-panel { margin-top: 20px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-raised); }
.intake-edit-panel { margin-top: 20px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.intake-edit-panel .section-title { margin-top: 0; }
.intake-history-table { width: 100%; margin: 8px 0 16px; font-size: 12px; }
.intake-revision-box { margin: 8px 0; font-size: 12px; }
.intake-revision-json { font-size: 11px; white-space: pre-wrap; margin: 6px 0 0; max-height: 120px; overflow: auto; }

/* 仕入フォーム折りたたみ（sort_eval時） */
details.intake-form-toggle {
  margin-top: 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0;
}
details.intake-form-toggle > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--sub);
  user-select: none;
  list-style: none;
}
details.intake-form-toggle > summary::before {
  content: '▶ ';
  font-size: 9px;
}
details.intake-form-toggle[open] > summary::before { content: '▼ '; }
details.intake-form-toggle > div { padding: 0 14px 14px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}
.btn:hover { border-color: var(--sub); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-ink); border-color: var(--teal-ink); }
.btn.fire { background: var(--paper-raised); border-color: var(--fire); color: var(--fire); }
.btn.fire:hover { background: #FBEDEA; }
.btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.btn-group { display: inline-flex; border: 1px solid var(--rule); }
.btn-group .btn { border: none; border-right: 1px solid var(--rule); }
.btn-group .btn:last-child { border-right: none; }

.logic-help { font-size: 11px; color: var(--sub); margin-left: 8px; }

/* ---------- Allocation summary ---------- */
.alloc-summary { display: flex; gap: 18px; flex-wrap: wrap; margin: 22px 0; }
.alloc-stat {
  flex: 1 1 140px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: 14px 16px;
}
.alloc-stat-label { font-size: 11px; color: var(--sub); letter-spacing: 0.06em; margin-bottom: 6px; }
.alloc-stat-value { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.alloc-stat-value.fire { color: var(--fire); }
.alloc-stat-value.teal { color: var(--teal-ink); }
.alloc-stat-sub { font-size: 11px; color: var(--sub); margin-top: 2px; font-family: var(--mono); }

/* ---------- Misc ---------- */
.section-title {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.note-box {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  background: var(--paper-raised);
  padding: 14px 18px;
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 22px;
  max-width: 760px;
  line-height: 1.7;
}

/* 原価計算 */
.costing-input-panel { max-width: 980px; margin-bottom: 22px; }
.costing-result { max-width: 1080px; }
.costing-kpis .kpi { min-width: 180px; }
.costing-panels { margin-bottom: 22px; }
.costing-breakdown-table th,
.costing-breakdown-table td { white-space: nowrap; }
.costing-facts {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px 12px;
  margin: 0;
  font-size: 12px;
}
.costing-facts dt { color: var(--sub); }
.costing-facts dd { margin: 0; font-family: var(--mono); color: var(--ink); }
.costing-formulas ul { margin: 8px 0 0; padding-left: 18px; }
.costing-formulas li { margin: 4px 0; }
.costing-formula-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.placeholder {
  border: 1px dashed var(--rule);
  color: var(--sub);
  padding: 18px;
  font-size: 12px;
  text-align: center;
  margin: 16px 0;
  max-width: 880px;
}
.msg { font-size: 12px; margin-top: 10px; }
.msg.ok { color: var(--teal-ink); }
.msg.err { color: var(--fire); }
.muted { color: var(--sub); }
.right { text-align: right; }
.spacer { height: 8px; }
.master-edit-table .biz-label-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 14rem;
}
.master-edit-table .biz-comment {
  font-size: 11px;
  color: var(--sub);
}

/* ── tea traveler ───────────────────────────────────────────── */
.flow-stepper-wrap {
  position: relative;
  margin: 10px 0 0;
  padding-top: 10px;   /* traveler は position:fixed に移行したためスペース縮小 */
  padding-bottom: 10px;
}
.flow-stepper-wrap .flow-stepper {
  margin: 0;            /* wrap が margin を担う */
}
#teaTraveler {
  position: absolute;  /* ページ座標で配置しスクロール追従（fixed だと画面に取り残される） */
  top: 0;
  left: 0;
  width: 64px;
  height: 72px;
  pointer-events: none;
  z-index: 50;  /* nav(通常)より上、mainコンテンツより下 — ステッパー/本文と重ならない */
  transform: translate(-9999px,-9999px);
  /* 空を横切るように、ふわっと滑空して最後にゆるんで着地（ease-out） */
  transition: transform 1.5s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.16));
  will-change: transform;
}
.tea-bob {
  width: 64px;
  height: 72px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  /* 待機中はふわふわ浮遊 */
  animation: teaHover 3.2s ease-in-out infinite;
}
/* 移動中はふわっとゆっくり上昇する“飛行アーク”（横滑空と同じ1.5sで合成され、弧を描いて飛ぶ） */
.tea-bob.fly {
  animation: teaFly 1.5s cubic-bezier(.22,.61,.36,1);
}
@keyframes teaHover {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg);  }
}
@keyframes teaFly {
  0%   { transform: translateY(0)    rotate(0deg); }
  38%  { transform: translateY(-30px) rotate(-3deg); }
  62%  { transform: translateY(-34px) rotate(2deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  #teaTraveler { transition: none; }
  .tea-bob, .tea-bob.fly { animation: none; }
}
@media (max-width: 700px) {
  :root { --nav-section-pad: 12px; }
  .flow-stepper-wrap { padding-top: 6px; padding-bottom: 6px; }
  .top-nav,
  #sidebar,
  #top-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  #teaTraveler      { width: 48px; height: 56px; }
  .tea-bob          { width: 48px; height: 56px; }
}
/* ────────────────────────────────────────────────────────────── */

/* ---------- Flow stepper（下部 .nav-item と同系の個別タイル） ---------- */
.flow-stepper {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 10px 0 12px;
  border: none;
  background: transparent;
  min-width: min-content;
}
.flow-step {
  flex: 0 0 var(--nav-tile-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  width: var(--nav-tile-w);
  min-width: var(--nav-tile-w);
  max-width: var(--nav-tile-w);
  height: var(--nav-tile-h);
  min-height: var(--nav-tile-h);
  max-height: var(--nav-tile-h);
  padding: 8px 6px;
  cursor: pointer;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 7px;
  overflow: hidden;
  transition: box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}
.flow-step[role="button"]:hover {
  border-color: var(--sub);
  box-shadow: 0 2px 7px rgba(0,0,0,0.11);
  transform: translateY(-1px);
}
.flow-step[role="button"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--teal);
  z-index: 1;
}
.flow-step-connector {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--sub);
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
  user-select: none;
  padding: 0 1px;
}
.flow-step-marker {
  font-family: var(--mono);
  font-size: 10px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  color: var(--sub);
  background: var(--paper);
}
.flow-step-illu {
  position: relative;
  width: 30px;
  height: 24px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.step-illu-svg { width: 100%; height: 100%; display: block; }
/* 任意工程（棚卸など）: 「任意」バッジ＋淡い斜線地で必須工程と区別 */
.flow-step-badge {
  position: absolute;
  top: -7px;
  right: -12px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sub);
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 999px;
  padding: 0 4px;
  line-height: 1.45;
}
.flow-step.optional .flow-step-label { color: var(--sub); }
.flow-step.optional:not(.current):not(.done) {
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,0.015) 6px, rgba(0,0,0,0.015) 12px);
}
.flow-step.future .flow-step-illu { opacity: 0.85; filter: none; }
.flow-step.done .flow-step-illu { opacity: 0.85; }
.flow-step.current .flow-step-illu { opacity: 1; }
.flow-step-check {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
}
/* 現在工程だけ、火がゆらめき／トラックがコトコト動く（控えめ） */
.flow-step.current .illu-flame { transform-origin: 50% 100%; animation: flameFlick 0.9s ease-in-out infinite; }
.flow-step.current .illu-flame2 { transform-origin: 50% 100%; animation: flameFlick 0.7s ease-in-out infinite; }
.flow-step.current .illu-truck { animation: truckJiggle 1.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes flameFlick {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.16) scaleX(0.93); }
}
@keyframes truckJiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-0.7px) rotate(-0.4deg); }
  60% { transform: translateY(0.7px) rotate(0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-step.current .illu-flame,
  .flow-step.current .illu-flame2,
  .flow-step.current .illu-truck { animation: none; }
}
.flow-step-label {
  width: 100%;
  font-size: 10px;
  color: var(--sub);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.flow-step-desc {
  width: 100%;
  font-size: 8.5px;
  color: var(--rule);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.flow-step.done .flow-step-marker {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.flow-step.done .flow-step-label { color: var(--teal-ink); }
.flow-step.done .flow-step-desc { color: var(--sub); }
.flow-step.current {
  position: relative;
  background: #EAF6F0;
  border-color: var(--teal);
  box-shadow: inset 0 0 0 2px var(--teal);
}
.flow-step.current .flow-step-marker {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.flow-step.current .flow-step-label {
  color: var(--ink);
  font-weight: 600;
}
.flow-step.current .flow-step-desc {
  color: var(--sub);
}
.flow-step.future .flow-step-marker {
  background: var(--paper);
  border-color: var(--rule-soft);
  color: var(--rule);
}
.flow-step.future .flow-step-label { color: var(--sub); }
.flow-step.future .flow-step-desc { color: var(--sub); }

/* ---------- 茶葉ヒーロー背景（全画面共通・ヘッダー直下） ---------- */
.tea-hero-host {
  padding: 0 28px 8px;
  background: var(--paper);
}
.tea-hero {
  position: relative;
  width: 100%;
  transform: none;
  left: auto;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0;
  background: #0c1a12;
  border: 1px solid var(--rule);
}
.tea-hero-media { position: absolute; inset: 0; }
.tea-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tea-hero-poster {
  background-size: cover;
  background-position: center 35%;
}
.tea-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,16,11,0.78) 0%, rgba(8,16,11,0.5) 42%, rgba(8,16,11,0.18) 100%);
}
.tea-hero-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  color: #fff;
}
.tea-hero-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 140px;
  margin-bottom: 8px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}
.tea-hero-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.tea-hero-sub {
  font-size: 12.5px;
  margin-top: 4px;
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
@media (max-width: 640px) {
  .tea-hero-host { padding: 0 14px 6px; }
  .tea-hero {
    height: 192px;
  }
  .tea-hero-title { font-size: 17px; }
}

/* ---------- 在庫照会マトリクス（D-7） ---------- */
.matrix-controls { flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
/* 上部ミラースクロールバー */
.matrix-mirror-top {
  overflow-x: scroll;
  overflow-y: hidden;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: var(--paper-raised);
}
.matrix-mirror-phantom { height: 1px; }
.matrix-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-raised);
}
/* 上部ミラー表示中は隣接する matrix-scroll の上角丸を消す */
.matrix-mirror-top.active + .matrix-scroll { border-top-left-radius: 0; border-top-right-radius: 0; }
.matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  min-width: 100%;
}
.matrix-table th, .matrix-table td {
  border-bottom: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  padding: 5px 9px;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}
.matrix-table thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
  font-weight: 600;
  color: var(--sub);
  text-align: right;
}
.matrix-corner, .matrix-rowhead {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--pivot-row-bg);
  z-index: 2;
  min-width: 150px;
  color: var(--pivot-row-head);
}
.matrix-corner { z-index: 3; color: var(--pivot-row-head); }
.matrix-table thead th.matrix-col {
  background: var(--pivot-col-bg);
  color: var(--pivot-col-head);
}
.matrix-group td {
  background: rgba(158,28,36,0.07);
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  position: sticky;
  left: 0;
}
.matrix-grade { font-family: var(--mono); font-weight: 700; }
.matrix-gradename { color: var(--sub); }
.matrix-cell { font-variant-numeric: tabular-nums; }
.matrix-cell.matrix-zero { color: var(--rule); text-align: center; }
.matrix-cell .mc-qty, .matrix-cell .mc-lots, .matrix-cell .mc-val {
  display: block;
  line-height: 1.3;
}
.matrix-cell .mc-lots { font-size: 10.5px; color: var(--sub); }
.matrix-cell .mc-val { font-size: 11px; color: var(--teal-ink); }
.matrix-subtotal td { background: rgba(0,0,0,0.035); font-weight: 600; }
.matrix-subtotal .matrix-rowhead { background: color-mix(in srgb, var(--pivot-row-bg) 85%, #000 5%); }

/* ---------- D-5 sub-stepper & sections ---------- */
.d5-substepper {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  max-width: 880px;
}
.d5-substep {
  flex: 1;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 10px 8px;
  border: none;
  border-right: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--sub);
  cursor: pointer;
}
.d5-substep:last-child { border-right: none; }
.d5-substep.done { color: var(--teal-ink); background: #F4FAF7; }
.d5-substep.current {
  color: var(--ink);
  font-weight: 600;
  background: #EAF6F0;
  box-shadow: inset 0 -2px 0 var(--teal);
}
.d5-substep.future { color: var(--rule); }
.d5-section { display: none; margin-bottom: 32px; }
.d5-section.d5-active { display: block; }
.policy-banner {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  background: #EAF6F0;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 14px;
  max-width: 880px;
}
.policy-banner-text { color: var(--teal-ink); font-weight: 600; }
.policy-quick { margin-bottom: 12px; }
.policy-quick .btn { font-size: 11px; padding: 6px 10px; }
.fire-result-grid {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin-bottom: 16px;
}
.fire-result-row {
  display: grid;
  grid-template-columns: 1fr repeat(2, minmax(120px, 160px));
  gap: 12px 16px;
  align-items: end;
  border: 1px solid var(--rule);
  padding: 12px 14px;
  background: var(--paper-raised);
}
.fire-result-meta { font-size: 12px; color: var(--ink); grid-column: 1 / -1; }
.mono { font-family: var(--mono); }

/* ---------- Today todo strip (dashboard) ---------- */
.todo-strip {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: 14px 18px;
  margin-bottom: 28px;
}
.todo-strip-head {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  color: var(--ink);
}
.todo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.todo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.todo-chip:hover {
  border-color: var(--teal);
  background: #EAF6F0;
}
.todo-chip-count {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-ink);
  min-width: 1.2em;
  text-align: right;
}
.todo-chip-count.zero { color: var(--sub); font-weight: 400; }
.todo-chip.warn .todo-chip-count { color: var(--fire); }

/* ---------- Closing / Balance ---------- */
.closing-section { margin-bottom: 24px; }
.section-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-ink);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.badge.closed {
  background: #EAF6F0;
  color: var(--teal-ink);
  border: 1px solid var(--teal);
}
.badge.open {
  background: var(--paper);
  color: var(--sub);
  border: 1px solid var(--rule);
}
.balance-summary { margin-bottom: 16px; }

/* ---------- Placeholder screen ---------- */
.prep-screen { max-width: 720px; }
.prep-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  color: var(--sub);
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}
.prep-desc {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.8;
  margin-bottom: 8px;
}

/* ── タブ ─────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--rule); margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 8px 18px; font-size: 13px; font-family: var(--sans);
  color: var(--sub); cursor: pointer; font-weight: 500; transition: color 0.15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--teal-ink); border-bottom-color: var(--teal); }
.tab-content { margin-top: 8px; }

/* ── レポート ─────────────────────────────────────────────── */
.report-opts { margin-bottom: 16px; }
.pivot-panel-wrap { margin: 16px 0; }
.pivot-panel-actions { margin-top: 8px; }
.pivot-panel-intro { font-size: 12px; color: var(--sub); margin: 0 0 10px; }

/* ピボットゾーン色分け（行=緑 / 列=オレンジ / 値=青 / ページ=中立） */
:root {
  --pivot-row-bg: #e7f4ee;
  --pivot-row-border: var(--teal);
  --pivot-row-head: var(--teal-ink);
  --pivot-col-bg: #fef3e8;
  --pivot-col-border: #e07b39;
  --pivot-col-head: #b85c1a;
  --pivot-value-bg: #eef3fb;
  --pivot-value-border: #4a6fa5;
  --pivot-value-head: #2d5080;
  --pivot-page-bg: #f4f4f5;
  --pivot-page-border: #c8c8cc;
  --pivot-page-head: #5c5c66;
  --pivot-catalog-bg: #f8f8f8;
  --pivot-catalog-border: var(--line);
}

.pivot-panel {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .pivot-panel { grid-template-columns: 1fr; }
}
.pivot-catalog {
  background: var(--pivot-page-bg);
  border: 1px solid var(--pivot-page-border);
  border-radius: 8px;
  padding: 8px;
  min-height: 120px;
}
.pivot-catalog-head, .pivot-zone-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.pivot-catalog-head { color: var(--pivot-page-head); }
.pivot-zone-head--page { color: var(--pivot-page-head); }
.pivot-zone-head--rows { color: var(--pivot-row-head); }
.pivot-zone-head--cols { color: var(--pivot-col-head); }
.pivot-zone-head--values { color: var(--pivot-value-head); }
.pivot-catalog-list, .pivot-zone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  padding: 4px;
}
.pivot-catalog-empty { font-size: 11px; color: var(--sub); padding: 4px; }
.pivot-zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pivot-zone-block {
  border-radius: 8px;
  padding: 8px;
  min-height: 72px;
  border: 1px dashed var(--line);
  background: var(--bg);
}
.pivot-zone-block--page {
  background: var(--pivot-page-bg);
  border-color: var(--pivot-page-border);
}
.pivot-zone-block--rows {
  background: var(--pivot-row-bg);
  border-color: var(--pivot-row-border);
}
.pivot-zone-block--cols {
  background: var(--pivot-col-bg);
  border-color: var(--pivot-col-border);
}
.pivot-zone-block--values {
  background: var(--pivot-value-bg);
  border-color: var(--pivot-value-border);
}
.pivot-zone-hint { font-size: 10px; color: var(--sub); margin-top: 4px; }
.pivot-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  background: var(--pivot-catalog-bg);
  border: 1px solid var(--pivot-catalog-border);
}
.pivot-catalog .pivot-field {
  background: var(--pivot-catalog-bg);
  border-color: var(--pivot-catalog-border);
}
.pivot-zone--page .pivot-field:not(.pivot-field-measure) {
  background: #ececee;
  border-color: var(--pivot-page-border);
}
.pivot-zone--rows .pivot-field:not(.pivot-field-measure) {
  background: var(--pivot-row-bg);
  border-color: var(--pivot-row-border);
  color: var(--pivot-row-head);
}
.pivot-zone--cols .pivot-field:not(.pivot-field-measure) {
  background: var(--pivot-col-bg);
  border-color: var(--pivot-col-border);
  color: var(--pivot-col-head);
}
.pivot-field-measure,
.pivot-zone--values .pivot-field-measure {
  background: var(--pivot-value-bg);
  border-color: var(--pivot-value-border);
  color: var(--pivot-value-head);
}
.pivot-field-ghost { opacity: .45; }
.pivot-field-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pivot-field-remove {
  border: none; background: transparent; color: var(--sub); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.pivot-page-filter {
  width: 72px; font-size: 11px; padding: 2px 4px; margin-left: 2px;
  border: 1px solid var(--line); border-radius: 4px;
}

/* ピボット結果テーブル — 行軸 / 列軸ディメンション列 */
.table-section th.pivot-th-row,
.table-section td.pivot-td-row {
  background: var(--pivot-row-bg);
  color: var(--pivot-row-head);
}
.table-section th.pivot-th-col,
.table-section td.pivot-td-col {
  background: var(--pivot-col-bg);
  color: var(--pivot-col-head);
}
.form-row { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.form-col { flex: 1; min-width: 200px; }
.form-label { font-size: 11px; color: var(--sub); letter-spacing: 0.05em; display: block; margin-bottom: 6px; }
.dim-check-group { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dim-check-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); cursor: pointer; }
.dim-check-label input[type=checkbox] { width: auto; cursor: pointer; accent-color: var(--teal); }
.report-result { margin-top: 20px; }
.report-period-note { font-size: 11px; color: var(--sub); margin: 8px 0 0; }
.report-drill-bar {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--pivot-page-bg);
  border: 1px solid var(--pivot-page-border);
  border-radius: 6px;
}
.report-drill-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.report-drill-label { font-size: 12px; color: var(--sub); font-weight: 600; }
.report-drill-sep { color: var(--sub); font-size: 12px; }
.report-drill-crumb {
  background: none; border: none; padding: 2px 6px; font-size: 12px;
  color: var(--teal-ink); cursor: pointer; border-radius: 4px;
}
.report-drill-crumb:hover { background: rgba(0,0,0,.06); text-decoration: underline; }
.report-drill-root { font-weight: 600; }
.report-drill-current { font-size: 12px; font-weight: 600; color: var(--pivot-row-head); }
.report-drill-up { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.report-drill-up:disabled { opacity: .45; cursor: not-allowed; }
.report-drill-hierarchy { font-size: 11px; color: var(--sub); margin-top: 6px; }
.report-drill-cell {
  background: none; border: none; padding: 0; font: inherit; color: var(--teal-ink);
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px;
}
.report-drill-cell:hover { color: var(--teal); }
.pivot-td-drillable { cursor: pointer; }
.input-row { display: flex; align-items: center; gap: 8px; }
.empty-msg { padding: 32px 16px; text-align: center; color: var(--sub); font-size: 13px; }

/* ── 利用方法パネル（画面共通） ─────────────────────────────────── */
.usage-guide-wrap { margin-bottom: 18px; }
.usage-guide-wrap.is-collapsed .usage-guide-panel { display: none; }
.usage-guide-wrap:not(.is-collapsed) .usage-guide-show-bar { display: none; }
.usage-guide-show-bar { margin-bottom: 8px; }
.usage-guide-panel {
  max-width: none;
  width: 100%;
  padding: 10px 16px 12px;
  margin-bottom: 0;
}
.usage-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.usage-guide-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.usage-guide-toggle {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--sub);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.usage-guide-toggle:hover { color: var(--teal-ink); }
.usage-guide-body {
  display: flex;
  flex-direction: column;
  line-height: 1.65;
}
.usage-guide-content { width: 100%; }
.usage-guide-mascot-wrap {
  max-width: 140px;
  margin: 4px 0 0 auto;
  line-height: 0;
  flex-shrink: 0;
}
.usage-guide-mascot {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  object-position: center bottom;
}
.usage-guide-intro {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--sub);
}
.usage-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
}
.usage-guide-item { min-width: 0; }
.usage-guide-term {
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.4;
}
.usage-guide-desc {
  font-size: 11.5px;
  color: var(--sub);
  line-height: 1.55;
}
@media (max-width: 960px) {
  .usage-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .usage-guide-grid { grid-template-columns: 1fr; }
}

/* ── D-4 入庫・グレード評価（旧 intake-overview 互換） ─────────── */
.guide-wrap { max-width: 920px; }
.guide-lead { color: var(--sub); font-size: 13px; line-height: 1.8; margin: 0 0 24px; }

/* G-1 ページヘッダー（タイトル左・袋キャラ右・本文は下段全幅） */
.guide-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 20px;
  margin-bottom: 26px;
}
.guide-page-header-text { min-width: 0; }
.guide-page-header-mascot {
  flex-shrink: 0;
  line-height: 0;
  align-self: end;
}
.guide-mascot-hero {
  display: block;
  width: auto;
  max-width: min(36vw, 200px);
  height: auto;
  max-height: 160px;
  object-fit: contain;
  object-position: right bottom;
}
@media (max-width: 700px) {
  .guide-page-header {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .guide-page-header-mascot {
    justify-self: end;
    margin-top: 2px;
  }
  .guide-mascot-hero {
    max-width: min(44vw, 160px);
    max-height: 130px;
  }
}

/* ── ダッシュボード 期間バー・詳細テーブル ───────────────────── */
.dash-period-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 7px 14px;
  background: rgba(0,0,0,0.025);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 12px;
}
.dash-period-label { color: var(--sub); font-size: 11px; letter-spacing: 0.06em; }
.dash-period-value { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); }
.dash-period-date  { color: var(--teal-ink); }
.dash-period-sep   { color: var(--rule); }
.dash-period-note  { font-size: 10.5px; color: var(--sub); opacity: 0.8; }
.dash-detail-wrap {
  margin-top: 28px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.dash-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dash-detail-table th,
.dash-detail-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.dash-detail-table th { background: var(--paper-raised); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--sub); }
.dash-detail-table td.num, .dash-detail-table th.num { text-align: right; }
.dash-detail-total td { font-weight: 700; background: var(--paper-raised); border-top: 2px solid var(--rule); }
.dash-share-bar {
  height: 4px;
  background: var(--fire);
  border-radius: 2px;
  margin-top: 3px;
  opacity: 0.55;
  transition: width 0.4s ease;
}

.guide-section-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-left: 3px solid var(--fire);
  padding-left: 12px;
  margin: 40px 0 18px;
}
.guide-wrap h2.guide-section-title:first-of-type { margin-top: 8px; }

/* 業務フロー6工程 */
.guide-steps { display: flex; flex-direction: column; gap: 10px; }
.guide-step-card {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}
.guide-step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--fire);
  min-width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--rule);
  background: rgba(181,64,42,0.05);
}
.guide-step-body { padding: 14px 18px; flex: 1; }
.guide-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.guide-step-desc {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.8;
  margin: 0 0 8px;
}
.guide-step-nav { font-size: 11px; }
.guide-step-nav-label { color: var(--sub); }
.guide-step-link {
  color: var(--teal-ink);
  text-decoration: none;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.guide-step-link:hover { text-decoration: underline; }

/* 茶葉の仕組み */
.guide-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .guide-basics { grid-template-columns: 1fr; } }
.guide-basic-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 14px 16px;
}
.guide-basic-term {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.guide-basic-body {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.8;
  margin: 0;
}

/* よくある質問 */
.guide-qa-list { display: flex; flex-direction: column; gap: 12px; }
.guide-qa-item {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}
.guide-qa-q, .guide-qa-a {
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.7;
  align-items: baseline;
}
.guide-qa-q { border-bottom: 1px solid var(--rule-soft); }
.guide-qa-q-mark {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--fire);
  flex-shrink: 0;
  min-width: 16px;
}
.guide-qa-a-mark {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-ink);
  flex-shrink: 0;
  min-width: 16px;
}
.guide-qa-q span:last-child { color: var(--ink); font-weight: 500; }
.guide-qa-a span:last-child { color: var(--sub); }

/* ── 一括インポート (D-4 仕入登録) ── */
.import-format-dropdown {
  position: relative;
  display: inline-flex;
}
.import-format-trigger { white-space: nowrap; }
.import-format-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 148px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.import-format-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 12px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.import-format-item:last-child { border-bottom: none; }
.import-format-item:hover { background: #f0faf6; color: var(--teal-ink); }
.intake-import-workspace {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
}
.intake-import-workspace.hidden { display: none; }
.import-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.import-file-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-compact {
  padding: 4px 10px;
  font-size: 11px;
}

/* ── 一括インポートパネル (D-4) ── */
.intake-import-panel {
  margin-top: 24px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
}
.intake-import-panel > summary {
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 600;
  letter-spacing: .04em;
}
.intake-import-panel > summary::-webkit-details-marker { display: none; }
.intake-import-panel[open] > summary { border-bottom: 1px solid var(--rule); }
.import-panel-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.import-drop-zone {
  border: 2px dashed var(--rule);
  border-radius: 4px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--sub);
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.import-drop-zone:hover, .import-drop-zone.drag-over {
  border-color: var(--teal);
  background: #f0faf6;
}
.import-preview { overflow-x: auto; }
.import-preview .preview-table {
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--mono);
  min-width: 400px;
}
.import-preview .preview-table th,
.import-preview .preview-table td {
  border: 1px solid var(--rule);
  padding: 3px 8px;
  white-space: nowrap;
}
.import-preview .preview-table th {
  background: var(--paper);
  font-weight: 600;
  color: var(--teal-ink);
}
.msg.warn {
  color: #7a5c00;
  background: #fffbea;
  border: 1px solid #e8d97a;
  padding: 6px 10px;
  border-radius: 3px;
  white-space: pre-wrap;
  font-size: 12px;
  font-family: var(--mono);
}

/* ---------- Tooltips (data-tip + JS layer) ---------- */
.has-tip { cursor: help; }
.ym-tip {
  position: absolute;
  z-index: 10000;
  max-width: min(320px, calc(100vw - 16px));
  padding: 7px 11px;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  white-space: normal;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.ym-tip.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.ym-tip.above::after,
.ym-tip:not(.above)::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
}
.ym-tip:not(.above)::after {
  top: -10px;
  border-bottom-color: var(--ink);
}
.ym-tip.above::after {
  bottom: -10px;
  border-top-color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .ym-tip { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Home — タイルポータル                                               */
/* ------------------------------------------------------------------ */
.home-page {
  padding: 32px 28px 56px;
  max-width: 1120px;
}
.home-hero {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.home-hero-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: 0.06em;
}
.home-hero-sub {
  font-size: 13px;
  color: var(--sub);
  margin: 0;
}
.home-section {
  margin-bottom: 32px;
}
.home-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sub);
  opacity: 0.65;
  margin-bottom: 10px;
}
.home-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 860px) {
  .home-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .home-tiles { grid-template-columns: 1fr; }
}
.home-tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 16px 18px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s, background 0.1s;
}
.home-tile:hover {
  border-color: var(--teal);
  background: #fff;
}
.home-tile-num {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--sub);
  opacity: 0.55;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.home-tile-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--ink);
  margin-bottom: 6px;
}
.home-tile-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}
.home-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.home-tile-desc {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.55;
  margin-top: 1px;
}

/* ホームに戻るパンくず */
.home-crumb {
  display: flex;
  align-items: center;
  padding: 7px 20px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.home-crumb-link {
  font-size: 11.5px;
  color: var(--sub);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.home-crumb-link:hover { color: var(--teal); }

/* ホームナビアイテム */
.nav-item-home {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
  opacity: 0.75;
  border: 1px solid var(--rule);
  padding: 4px 10px !important;
  height: auto !important;
  align-self: center;
}
.nav-item-home:hover { border-color: var(--teal); opacity: 1; }
.nav-item-home.active { border-color: var(--teal); opacity: 1; background: #EAF6F0; }