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

body {
  background: #F8FAFC;
  overflow-x: hidden;
  overflow-y: auto;
}

canvas {
  display: block;
  position: fixed;
  top: 0; left: 0;
}

/* ── モバイル: 鉢エリアの高さを確保する透明スペーサー ── */
#canvas-spacer {
  height: 45vh; /* JS で potBottomY に基づいて上書きされる */
  flex-shrink: 0;
}

/* ════════════════════════════
   モバイル（デフォルト）: 通常フロー パネル
   ════════════════════════════ */
#panel {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#right-panel { display: none; }

/* モバイル: tab-materials 内に移動された際のスタイル */
#right-panel.rp-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: static;
  width: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow-y: visible;
}
/* モバイル時はヘッダーを非表示 */
#right-panel.rp-mobile .rp-header { display: none; }

/* ── panel-fixed-top（モバイル: 縮まないよう固定） ── */
#panel-fixed-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* ── panel-scroll（モバイルでは通常フロー、デスクトップではスクロール可能） ── */
#panel-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── タブナビ ── */
#tab-nav {
  display: flex;
  gap: 4px;
  background: #F3F4F6;
  padding: 4px;
  border-radius: 10px;
  flex-shrink: 0;
}

.tab-btn {
  flex: 1;
  padding: 7px 8px;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  font-family: sans-serif;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s;
  white-space: nowrap;
  touch-action: manipulation;
}

.tab-btn.active {
  background: #FFFFFF;
  color: #111827;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── タブコンテンツ ── */
.tab-content {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.tab-content.active {
  display: flex;
}

/* ── ベースラベル（選択中の市販用土） ── */
#base-label {
  display: none;
  font-size: 11px;
  color: #7C3AED;
  font-family: sans-serif;
  font-weight: 600;
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: 6px;
  padding: 5px 10px;
}

/* ── 市販の用土リスト ── */
#commercial-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.commercial-item {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: sans-serif;
  touch-action: manipulation;
}

.commercial-item:hover {
  border-color: #7C3AED;
  background: #F5F3FF;
}

.commercial-item.selected {
  border-color: #7C3AED;
  background: #F5F3FF;
}

.commercial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.commercial-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.commercial-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.commercial-category {
  font-size: 11px;
  color: #FFFFFF;
  background: #9CA3AF;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}

.commercial-desc {
  font-size: 11px;
  color: #9CA3AF;
}

#sec-pot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── 鉢への操作ボタン（モバイル: パネルと独立した固定レイヤー） ── */
#center-actions {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

#center-actions .act-start {
  width: 100%;
}

#center-actions .act-group-ops {
  margin-bottom: 6px;
}

#center-actions .act-group-reset {
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}

#center-actions .act-group-reset .act-btn {
  width: 100%;
}

/* ── 配合リセット（左パネル下部・縮まない） ── */
#sec-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

.act-group {
  display: flex;
  gap: 10px;
}

.act-group .act-btn {
  flex: 1;
}

/* ── モバイル: 3指標 sticky バー ── */
#mobile-metrics-sticky {
  position: sticky;
  top: 14px;
  z-index: 5;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 6px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  margin-bottom: 2px;
}

.mms-title {
  font-size: 9px;
  font-family: sans-serif;
  color: #C0C8D4;
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

.mms-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mms-label {
  font-size: 10px;
  font-family: sans-serif;
  color: #6B7280;
  width: 52px;
  flex-shrink: 0;
}

.mms-track {
  flex: 1;
  height: 5px;
  background: #F3F4F6;
  border-radius: 3px;
  overflow: hidden;
}

.mms-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.mms-pct {
  font-size: 11px;
  font-weight: 700;
  font-family: sans-serif;
  color: #374151;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  #mobile-metrics-sticky { display: none; }
}

#obj-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
#obj-list::-webkit-scrollbar       { height: 3px; }
#obj-list::-webkit-scrollbar-track { background: transparent; }
#obj-list::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }

/* ── 資材アコーディオン ── */
.mat-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mat-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: #F3F4F6;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: sans-serif;
  color: #6B7280;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}

.mat-accordion-arrow {
  font-size: 14px;
  color: #9CA3AF;
  transition: transform 0.2s;
  display: inline-block;
}

.mat-accordion-header.open .mat-accordion-arrow {
  transform: rotate(180deg);
}

.mat-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mat-accordion-body[hidden] { display: none; }

.obj-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 140px;
}

/* ════════════════════════════
   デスクトップ: 左30% / 中央40% / 右30%
   ════════════════════════════ */
@media (min-width: 768px) {
  body { overflow: hidden; }
  #canvas-guide { display: flex; }
  #canvas-spacer { display: none; }

  #panel {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: auto;
    width: 30vw;
    border-top: none;
    border-right: 1px solid #E5E7EB;
    box-shadow: 2px 0 12px rgba(0,0,0,0.04);
    /* 2層構造: スクロール領域 + 固定ボタン領域 */
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow-y: visible;
  }

  /* 上部固定エリア */
  #panel-fixed-top {
    flex-shrink: 0;
    padding: 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
  }

  #panel-scroll {
    flex: 1;
    min-height: 0; /* flex内でoverflowを効かせるために必須 */
    overflow-y: auto;
    padding: 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #panel-scroll::-webkit-scrollbar       { width: 3px; }
  #panel-scroll::-webkit-scrollbar-track { background: transparent; }
  #panel-scroll::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }

  /* center-actions: 鉢の直下に段組み配置（JS で top を動的設定） */
  #center-actions {
    position: fixed;
    top: 65vh;  /* JS が実行されるまでの初期フォールバック */
    bottom: auto;
    left: 30vw;
    right: 30vw;
    max-width: 300px;
    margin: 0 auto;
    z-index: 150;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 1段目: 主CTA — 全幅 */
  #center-actions .act-start {
    width: 100%;
    margin-bottom: 0;
  }

  /* 2段目: 追加投入 + トントン — 横並び均等 */
  #center-actions .act-group-ops {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
  }

  #center-actions .act-group-ops .act-btn {
    flex: 1;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* 3段目: 鉢を空にする — テキストリンク風の補助操作 */
  #center-actions .act-group-reset {
    border-top: none;
    padding-top: 0;
    margin-left: 0;
    display: flex;
    justify-content: center;
  }

  #center-actions .act-group-reset .act-reset {
    background: transparent;
    border: 1px solid #D1D5DB;
    box-shadow: none;
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 18px;
    width: auto;
    border-radius: 8px;
    text-decoration: none;
  }

  #center-actions .act-group-reset .act-reset:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
    color: #374151;
  }

  /* sec-actions: 配合リセットのみの左パネル下部 */
  #sec-actions {
    flex-shrink: 0;
    padding: 12px 16px 20px;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  }

  #right-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    top: 0; bottom: 0;
    right: 0;
    width: 30vw;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    padding: 20px 16px 24px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: -2px 0 12px rgba(0,0,0,0.04);
  }
  #right-panel > * { flex-shrink: 0; }
  #right-panel::-webkit-scrollbar       { width: 4px; }
  #right-panel::-webkit-scrollbar-track { background: transparent; }
  #right-panel::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }

  #sec-pot     { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .tab-content { gap: 16px; }
  .btn-group   { flex-wrap: wrap; gap: 6px; }
  #obj-list    { flex-direction: column; overflow-x: visible; overflow-y: visible; gap: 10px; padding-bottom: 0; }
  .obj-card    { flex: none; width: 100%; min-width: unset; align-items: stretch; }
  .obj-icon    { text-align: center; }
  .obj-size-row { flex-wrap: nowrap; }
  .act-group   { gap: 8px; }
  .act-btn     { width: 100%; text-align: center; }
}

/* ── モバイル sticky ブランドヘッダー ── */
#mobile-header {
  position: sticky;
  top: 0;
  /* z-index はあえて設定しない: スクロールで panel(z-index:1) が上に被さる */
  background: #FFFFFF;
  border-bottom: 1px solid #EFEFEF;
  padding: 5px 14px 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

#mobile-logo {
  height: 15px;
  width: auto;
  display: block;
}

#mobile-sub {
  font-size: 8px;
  color: #B0BAC8;
  font-family: sans-serif;
  letter-spacing: 0.05em;
  line-height: 1;
}

@media (min-width: 768px) {
  #mobile-header { display: none; }
}

/* ── アプリヘッダー ── */
#app-header { display: none; }

@media (min-width: 768px) {
  #app-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 16px 10px 18px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
  }
}

#app-logo {
  height: 40px;
  width: auto;
  display: block;
}

#app-sub {
  font-size: 10px;
  color: #9CA3AF;
  font-family: sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
  padding-left: 1px;
}

/* ── 共通: ラベル ── */
.ctrl-label {
  color: #6B7280;
  font-size: 16px;
  font-family: sans-serif;
  white-space: nowrap;
}

.btn-group { display: flex; gap: 6px; }

/* ── 鉢サイズボタン ── */
.size-btn {
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  background: #FFFFFF;
  color: #374151;
  font-size: 16px;
  font-family: sans-serif;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  touch-action: manipulation;
}
.size-btn.active             { background: #16A34A; color: #FFFFFF; border-color: #16A34A; }
.size-btn:hover:not(.active) { border-color: #16A34A; color: #16A34A; background: #F0FDF4; }

/* ── アクションボタン ── */
.act-btn {
  padding: 10px 18px;
  border: none;
  font-size: 16px;
  font-family: sans-serif;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  touch-action: manipulation;
  white-space: nowrap;
  font-weight: 500;
}
.act-start        { background: #16A34A; color: #FFFFFF; font-size: 17px; font-weight: 700; }
.act-start:hover  { background: #15803D; }
.act-air           { background: #F0F9FF; color: #0284C7; border: 1.5px solid #BAE6FD; font-weight: 600; }
.act-air:hover     { background: #E0F2FE; }
.act-air.active    { background: #0284C7; color: #FFFFFF; border-color: #0284C7; }
.act-air.active:hover { background: #0369A1; }
.act-reset        { background: #FFF7ED; color: #92400E; border: 1.5px solid #FED7AA; font-size: 13px; padding: 7px 14px; font-weight: 400; }
.act-reset:hover  { background: #FFEDD5; border-color: #FDBA74; color: #78350F; }
.act-clear        { background: #F9FAFB; color: #9CA3AF; border: 1.5px solid #E5E7EB; font-size: 13px; padding: 7px 14px; font-weight: 400; }
.act-clear:hover  { background: #F3F4F6; color: #6B7280; border-color: #D1D5DB; }
/* ── 全て0 空状態オーバーレイ ── */
#empty-state {
  position: fixed;
  top: 0;
  left: 30%;
  width: 40%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding-bottom: 16vh;
  pointer-events: none;
  z-index: 10;
}
#empty-state:not([hidden]) {
  display: flex;
}
#empty-state-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(4px);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px 28px;
}
#empty-state-icon {
  font-size: 36px;
  line-height: 1;
}
#empty-state-msg {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}
#empty-state-sub {
  font-size: 12px;
  color: #9CA3AF;
  margin: 0;
  text-align: center;
}

/* ── お気に入りボタン ── */
.fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #D1D5DB;
  padding: 3px 5px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
  touch-action: manipulation;
}

.fav-btn:hover        { color: #D97706; }
.fav-btn.active       { color: #D97706; background: #FEF3C7; }
.fav-btn.active:hover { color: #B45309; }

/* ── 物体カード ── */
.obj-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.obj-name {
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 700;
  color: #111827;
  flex-shrink: 0;
}

/* タグは名前行の中でスペースを埋める */
.obj-name-row .mat-tags {
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  gap: 3px;
}

/* ── 操作行: サイズ選択 + スライダーを横一列に ── */
.obj-main-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.obj-main-row .obj-size-row {
  flex-shrink: 0;
  gap: 5px;
  width: auto; /* ベースの width:100% を打ち消す */
}

.obj-main-row .ratio-row {
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.obj-sizes { display: flex; gap: 3px; }

.obj-size-btn {
  padding: 3px 8px;
  border: 1.5px solid #E5E7EB;
  background: #FFFFFF;
  color: #374151;
  font-size: 13px;
  font-family: sans-serif;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.15s;
  touch-action: manipulation;
}
.obj-size-btn.active                        { background: #16A34A; color: #FFFFFF; border-color: #16A34A; }
.obj-size-btn:hover:not(.active):not(:disabled) { border-color: #16A34A; color: #16A34A; background: #F0FDF4; }
.obj-size-btn:disabled                      { opacity: 0.35; cursor: default; }

/* ── 比率スライダー ── */
.ratio-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.ratio-slider { flex: 1; min-width: 0; accent-color: #16A34A; cursor: pointer; }
.ratio-slider:disabled { opacity: 0.3; cursor: default; }
.ratio-val {
  font-size: 15px;
  color: #374151;
  font-family: sans-serif;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}
.ratio-val-zero { color: #D1D5DB; font-weight: 400; }

/* ════════════════════════════
   右パネル: グラフ
   ════════════════════════════ */
.rp-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.rp-title {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  font-family: sans-serif;
  letter-spacing: -0.01em;
}

/* ── 評価ラベル ── */
#eval-block {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 14px 16px;
}

#eval-main {
  font-size: 17px;
  font-weight: 800;
  color: #15803D;
  font-family: sans-serif;
  line-height: 1.2;
}

#eval-sub {
  font-size: 12px;
  color: #6B7280;
  font-family: sans-serif;
  margin-top: 4px;
}

/* ── バーグラフ ── */
.bars-block {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar-icon {
  font-size: 12px;
  width: 14px;
  text-align: center;
  color: #9CA3AF;
  flex-shrink: 0;
}

.bar-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  font-family: sans-serif;
  width: 62px;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 14px;
  background: #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-drainage { background: #0284C7; }
.bar-water    { background: #16A34A; }
.bar-aeration { background: #64748B; }
.bar-nutrient { background: #D97706; }

.bar-pct {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  font-family: sans-serif;
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 有機/無機スプリットバー ── */
.chart-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.chart-label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  font-family: sans-serif;
  letter-spacing: 0.01em;
}

.split-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.split-bar-track {
  width: 100%;
  height: 12px;
  background: #94A3B8;
  border-radius: 9999px;
  overflow: hidden;
}

.split-bar-organic {
  height: 100%;
  width: 50%;
  background: #16A34A;
  border-radius: 9999px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.split-bar-ends {
  display: flex;
  justify-content: space-between;
}

.split-end-label {
  font-size: 11px;
  font-weight: 700;
  font-family: sans-serif;
}

.split-bar-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.split-label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  font-family: sans-serif;
}

.split-vals {
  font-size: 12px;
  color: #9CA3AF;
  font-family: sans-serif;
}

/* ── ツールチップ ── */
#tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  max-width: 240px;
  background: #FFFFFF;
  color: #111827;
  font-size: 13px;
  font-family: sans-serif;
  line-height: 1.55;
  padding: 9px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  pointer-events: none;
}

.tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  background: #F3F4F6;
  border-radius: 50%;
  cursor: default;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s, background 0.1s;
}

.tip-icon:hover,
.tip-icon.tip-active {
  color: #374151;
  background: #E5E7EB;
}

/* ── 詳細パラメータ アコーディオン ── */
.detail-accordion {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}

.detail-toggle-btn {
  width: 100%;
  padding: 10px 14px;
  background: #FFFFFF;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  font-family: sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.detail-toggle-btn:hover {
  background: #F9FAFB;
  color: #374151;
}

.detail-toggle-btn[aria-expanded="true"] {
  border-bottom-color: #E5E7EB;
}

.detail-toggle-label {
  font-size: 13px;
  font-weight: 600;
}

.detail-toggle-chevron {
  font-size: 11px;
  color: #9CA3AF;
}

.detail-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms ease-out;
}

.detail-panel.open {
  max-height: 600px;
}

.detail-inner {
  background: #FFFFFF;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  font-family: sans-serif;
  width: 62px;
  flex-shrink: 0;
}

.detail-fill { background: #7C3AED; }

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-label-row {
  display: flex;
  align-items: center;
}

.gran-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 8px;
}

.gran-label {
  font-size: 12px;
  color: #9CA3AF;
  font-family: sans-serif;
  width: 28px;
  flex-shrink: 0;
}

.gran-coarse { background: #7C3AED; }
.gran-fine   { background: #C4B5FD; }

/* ── 免責文言（折りたたみ） ── */
#disclaimer-wrap {
  border-top: 1px solid #F3F4F6;
  padding-top: 10px;
  font-family: sans-serif;
}

#disclaimer-summary {
  font-size: 11px;
  font-weight: 600;
  color: #C4C9D4;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
}
#disclaimer-summary::-webkit-details-marker { display: none; }
#disclaimer-summary::before { content: 'ⓘ'; }
#disclaimer-summary:hover { color: #9CA3AF; }
#disclaimer-wrap[open] #disclaimer-summary { margin-bottom: 4px; }

#disclaimer {
  font-size: 11px;
  color: #9CA3AF;
  font-family: sans-serif;
  line-height: 1.7;
  padding: 0;
  margin: 0;
}

/* ── 左パネル内 資材ガイドリンク ── */
#guide-link-panel {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  font-family: sans-serif;
  text-align: center;
  padding: 10px 0 4px;
  text-decoration: none;
  border-top: 1px solid #F3F4F6;
  margin-top: 4px;
  transition: color 0.15s;
}
#guide-link-panel:hover { color: #0284C7; }

/* ── 資材ガイドリンク ── */
#guide-link {
  font-size: 12px;
  color: #6B7280;
  font-family: sans-serif;
  text-align: center;
  padding-bottom: 8px;
}

#guide-link a {
  color: #0284C7;
  text-decoration: none;
  font-weight: 600;
}

#guide-link a:hover {
  text-decoration: underline;
}

/* ── フィードバックリンク ── */
#feedback-link {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
  font-size: 12px;
  color: #9CA3AF;
  font-family: sans-serif;
  text-align: center;
}

#feedback-link a {
  color: #6B7280;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

#feedback-link a:hover {
  color: #111827;
  text-decoration: underline;
}

.x-logo {
  width: 11px;
  height: 11px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── 鉢サイズヒント ── */
#pot-hint {
  font-size: 11px;
  color: #9CA3AF;
  font-family: sans-serif;
  align-self: flex-end;
  white-space: nowrap;
}

/* ── プリセット帯 ── */
#preset-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#preset-bar[hidden] { display: none; }

/* ── 配合割合 ── */
#mix-ratio-panel {
  padding-bottom: 10px;
  border-bottom: 1px solid #F3F4F6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#mix-ratio-panel[hidden] { display: none; }

@media (max-width: 767px) {
  #mix-ratio-panel { display: none !important; }

  /* 鉢サイズ: ctrl-label + pot-hint を1行目に、btn-group を2行目に */
  #sec-pot             { gap: 2px 6px; }
  #sec-pot .ctrl-label { order: 1; font-size: 13px; }
  #pot-hint            { order: 2; font-size: 10px; color: #B0BAC8; }
  #sec-pot .btn-group  { order: 3; width: 100%; gap: 6px; }
  #sec-pot .size-btn   { flex: 1; padding: 5px 0; font-size: 13px; }

  /* 有機物率カード: コンパクト化 */
  .organic-block               { gap: 5px; padding: 9px 12px; }
  .organic-block .chart-label  { font-size: 12px; }
  .split-bar-wrap              { gap: 3px; }
  .split-bar-ends              { display: none; }        /* 両端ラベルは非表示 */
  .split-bar-footer            { gap: 6px; }
  .split-label                 { font-size: 12px; }
  .split-vals                  { font-size: 11px; }

  /* 保肥力カード: 1行に近いコンパクト表示 */
  .nutrient-block              { padding: 7px 12px; gap: 0; }
  .nutrient-block .bar-icon    { font-size: 10px; color: #D97706; }
  .nutrient-block .bar-label   { font-size: 11px; color: #6B7280; }
  .nutrient-block .bar-track   { height: 5px; }
  .nutrient-block .bar-pct     { font-size: 11px; color: #6B7280; }

  /* フッター導線: 詰める */
  #disclaimer-wrap  { padding-top: 6px; }
  #guide-link       { padding-bottom: 4px; font-size: 11px; }
  #feedback-link    { padding-top: 8px; font-size: 11px; margin-top: 0; }

  /* 貢献資材カード: 密度を上げる */
  #influence-block   { padding: 8px 11px; gap: 4px; }
  .inf-title         { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; margin: 0 0 1px; }
  .inf-row           { font-size: 11px; gap: 4px; }
  .inf-param         { font-size: 11px; min-width: 44px; }
  .inf-mat           { gap: 3px; font-size: 11px; }
  .inf-mat-dot       { width: 6px; height: 6px; }

  /* 詳細パラメータ アコーディオン */
  .detail-toggle-btn  { padding: 7px 12px; font-size: 12px; }
  .detail-toggle-label{ font-size: 12px; }
  .detail-inner       { padding: 10px 12px; gap: 8px; }
  .detail-bar-row     { gap: 6px; }
  .detail-section     { gap: 4px; }
  .gran-rows          { gap: 4px; padding-left: 6px; }
  .detail-label       { font-size: 11px; width: 54px; }
  .gran-label         { font-size: 11px; width: 24px; }
  .detail-inner .tip-icon { width: 12px; height: 12px; font-size: 9px; margin-left: 2px; }
}

.mratio-label {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.06em;
  margin: 0;
}
#mix-ratio-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #F3F4F6;
}
.mratio-seg {
  display: block;
  height: 100%;
  transition: width 300ms ease;
}
#mix-ratio-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mratio-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #374151;
}
.mratio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mratio-name { flex: 1; }
.mratio-pct {
  color: #6B7280;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.preset-label {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  font-family: sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preset-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.preset-btn {
  height: 30px;
  padding: 0 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 9999px;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  font-family: sans-serif;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
  touch-action: manipulation;
}
.preset-btn:hover { background: #F9FAFB; color: #374151; border-color: #D1D5DB; }
.preset-btn.active {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1D4ED8;
  font-weight: 600;
}

/* ── 資材タグ ── */
.mat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.mat-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  font-family: sans-serif;
  padding: 1px 5px;
  border-radius: 9999px;
  line-height: 1.6;
}
.mat-tag[data-tag="有機"]     { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.mat-tag[data-tag="無機"]     { background: #F1F5F9; color: #334155; border: 1px solid #CBD5E1; }
.mat-tag[data-tag="排水"]     { background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD; }
.mat-tag[data-tag="通気"]     { background: #F0F9FF; color: #0369A1; border: 1px solid #BAE6FD; }
.mat-tag[data-tag="保水"]     { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.mat-tag[data-tag="保肥"]     { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.mat-tag[data-tag="バランス"] { background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; }

/* ── 資材情報行（タグ + サイズ選択 + 粒径） ── */
/* サイズ主操作行: S/M/L + 粒径情報 */
.obj-size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.obj-size-row .obj-sizes {
  flex-shrink: 0;
}

.size-grain-info {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.size-grain-dot {
  border-radius: 50%;
  background: #9CA3AF;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}

.size-grain-label {
  font-size: 11px;
  color: #111827;
  font-family: sans-serif;
  font-weight: 700;
}

.size-grain-hint {
  font-size: 9px;
  color: #B0BAC8;
  font-family: sans-serif;
}

/* ── モバイル細調整 ── */
@media (max-width: 767px) {
  .act-btn                                { padding: 0 12px; font-size: 13px; }
  #center-actions #startBtn,
  #center-actions .act-group-ops .act-btn {
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .size-btn     { padding: 6px 12px; font-size: 14px; }
  .ctrl-label   { font-size: 14px; }
  #canvas-guide { display: none; }

  /* 縦リスト・アコーディオン構成 */
  #obj-list { flex-direction: column; overflow-x: hidden; gap: 10px; padding-bottom: 0; }
  .obj-card { flex: none; width: 100%; min-width: unset; padding: 9px 12px; gap: 6px; }
  .obj-name { font-size: 14px; }
  .obj-size-btn     { padding: 4px 8px; font-size: 12px; }
  .size-grain-label { font-size: 10px; }
  .size-grain-hint  { display: none; }
  .ratio-val        { font-size: 13px; min-width: 28px; }

  /* ── ボタン状態制御（モバイル） ── */
  /* 未投入: 追加投入・トントン・リセットを隠す */
  #center-actions .act-group-ops   { display: none; }
  #center-actions .act-group-reset { display: none; }

  /* 投入後: スタートを隠し、操作ボタンを表示 */
  #center-actions.has-poured #startBtn        { display: none; }
  #center-actions.has-poured .act-group-ops   { display: flex; }
  #center-actions.has-poured .act-group-reset { display: none; }

  /* ページ下端余白: 固定ボタン郡が最終コンテンツに重ならないように */
  #panel { padding-bottom: 72px; }
  /* margin-top:auto はデスクトップ専用（モバイルでは不要な空白になる） */
  #feedback-link { margin-top: 0; }
  /* sticky バーで代替するため、モバイルの分析パネル内バーブロックは非表示 */
  #right-panel.rp-mobile .bars-block { display: none; }
  /* モバイル: 各グラフバーを sticky バーと同じ 5px に統一 */
  #right-panel.rp-mobile .bar-track       { height: 5px; border-radius: 3px; }
  #right-panel.rp-mobile .split-bar-track { height: 5px; border-radius: 3px; }

  /* 再投入ボタン: モバイルのみ表示、通常ボタンスタイル */
  #sec-actions { display: none; }
  #center-actions .act-group-reset {
    border-top: none;
    padding-top: 0;
  }
  #reinvestBtn {
    background: #F3F4F6 !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: none !important;
    color: #374151 !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
    font-weight: 500;
    text-align: center;
    width: 100%;
    border-radius: 8px;
  }
  #reinvestBtn:hover {
    background: #E5E7EB !important;
    border-color: #9CA3AF !important;
    color: #111827 !important;
  }
}

/* ── ボタン補助テキスト ── */
.act-btn-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 1px;
  line-height: 1.2;
}
/* ── キャンバス初期ガイド ── */
#canvas-guide {
  position: fixed;
  top: 44%;
  left: 30%;
  width: 40%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
#canvas-guide[hidden] { display: none; }

#canvas-guide-inner {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 16px 24px;
  text-align: left;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.cg-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  font-family: sans-serif;
  margin-bottom: 12px;
}

.cg-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: cg-step;
  padding: 0;
}

.cg-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6B7280;
  font-family: sans-serif;
  counter-increment: cg-step;
}

.cg-steps li::before {
  content: counter(cg-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F3F4F6;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  font-family: sans-serif;
  flex-shrink: 0;
}

/* ── 配合サマリーチップ ── */
#mix-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 4px;
}
#mix-summary[hidden] { display: none; }

.mix-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  font-family: sans-serif;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 9999px;
  padding: 3px 10px 3px 7px;
  white-space: nowrap;
}

.mix-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
}

.mix-chip-more {
  color: #9CA3AF;
  font-weight: 500;
  background: #F3F4F6;
  border-color: #E5E7EB;
}

/* ── 影響資材ブロック ── */
#influence-block {
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: sans-serif;
}
#influence-block[hidden] { display: none; }

.inf-title {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 2px;
}

.inf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}

.inf-param {
  color: #6B7280;
  font-weight: 600;
  min-width: 50px;
  flex-shrink: 0;
}

.inf-arrow {
  color: #D1D5DB;
  flex-shrink: 0;
}

.inf-mat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #111827;
}

.inf-mat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
}

.inf-dot {
  color: #D1D5DB;
  padding: 0 1px;
}

/* ════════════════════════════
   右パネル: 分析/比較タブナビ
   ════════════════════════════ */
#rp-tab-nav {
  display: none; /* モバイルでは非表示 */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  #rp-tab-nav {
    display: flex;
    gap: 4px;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 10px;
  }
}

.rp-tab-btn {
  flex: 1;
  padding: 7px 8px;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  font-family: sans-serif;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s;
  white-space: nowrap;
}

.rp-tab-btn.active {
  background: #FFFFFF;
  color: #111827;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── 右パネル: タブコンテンツ ── */
.rp-tab-content {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.rp-tab-content.active {
  display: flex;
}

/* モバイル: 分析タブは常に表示、比較タブは非表示 */
@media (max-width: 767px) {
  #rp-tab-analysis.rp-tab-content { display: flex; }
  #rp-tab-compare { display: none !important; }
  #save-compare-area { display: none; }
}

/* ── 比較元保存ボタン ── */
#save-compare-area {
  padding-top: 2px;
}

.save-compare-btn {
  width: 100%;
  padding: 9px 16px;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  background: #F8FAFC;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  font-family: sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.save-compare-btn:hover {
  border-color: #1D4ED8;
  color: #1D4ED8;
  background: #EFF6FF;
}

/* ════════════════════════════
   比較タブ: コンテンツ
   ════════════════════════════ */
.cmp-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px;
}

.cmp-header-labels {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cmp-lbl-badge {
  font-size: 12px;
  font-weight: 700;
  font-family: sans-serif;
  padding: 2px 9px;
  border-radius: 5px;
}
.cmp-lbl-badge.cmp-lbl-a { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
.cmp-lbl-badge.cmp-lbl-b { background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD; }

.cmp-header-actions {
  display: flex;
  gap: 8px;
}

.cmp-action-btn {
  flex: 1;
  padding: 6px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
  background: #FFFFFF;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  font-family: sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.cmp-action-btn:hover { background: #F9FAFB; border-color: #D1D5DB; }
.cmp-action-clear { color: #9CA3AF; }
.cmp-action-clear:hover { color: #EF4444; border-color: #FCA5A5; background: #FEF2F2; }

.cmp-block {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.cmp-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  font-family: sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cmp-metric-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F3F4F6;
}
.cmp-metric-row:last-child { padding-bottom: 0; border-bottom: none; }

.cmp-metric-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  font-family: sans-serif;
}

.cmp-metric-vals {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cmp-val-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmp-val-lbl {
  font-size: 11px;
  font-weight: 700;
  font-family: sans-serif;
  width: 14px;
  flex-shrink: 0;
}
.cmp-val-lbl.cmp-lbl-a { color: #94A3B8; }
.cmp-val-lbl.cmp-lbl-b { color: #3B82F6; }

.cmp-bar-track {
  flex: 1;
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
}

.cmp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 300ms ease;
}
.cmp-bar-a { background: #94A3B8; }
.cmp-bar-b { background: #3B82F6; }

.cmp-val-num {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  font-family: sans-serif;
  min-width: 34px;
  text-align: right;
  flex-shrink: 0;
}

.cmp-diff-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 3px;
}

.cmp-diff-val {
  font-size: 14px;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: 0.01em;
}
.cmp-diff-pos  { color: #16A34A; }
.cmp-diff-neg  { color: #DC2626; }
.cmp-diff-zero { color: #9CA3AF; font-weight: 500; font-size: 12px; }

.cmp-matdiff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.cmp-matdiff-top {
  background: #F9FAFB;
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0 -6px;
}

.cmp-matdiff-name {
  font-size: 13px;
  color: #374151;
  font-family: sans-serif;
  font-weight: 500;
}

/* ── 比較: 空状態 ── */
.cmp-empty {
  background: #F8FAFC;
  border: 1.5px dashed #E5E7EB;
  border-radius: 12px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.cmp-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  font-family: sans-serif;
}

.cmp-empty-sub {
  font-size: 12px;
  color: #9CA3AF;
  font-family: sans-serif;
  line-height: 1.65;
  margin-bottom: 4px;
}

/* ── 比較: メトリクス行ヘッダー ── */
.cmp-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ── 比較: 結論ラベル ── */
.cmp-verdict {
  font-size: 11px;
  font-weight: 600;
  font-family: sans-serif;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp-verdict-b  { background: #DBEAFE; color: #1D4ED8; }
.cmp-verdict-a  { background: #F1F5F9; color: #475569; }
.cmp-verdict-eq { background: #F3F4F6; color: #9CA3AF; }

.cmp-bar-b {
  background: #3B82F6;
}

/* ── 比較: まとめブロック ── */
.cmp-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cmp-summary-item {
  font-size: 13px;
  color: #374151;
  font-family: sans-serif;
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.cmp-summary-item::before {
  content: '·';
  color: #D1D5DB;
  margin-right: 5px;
  flex-shrink: 0;
}

.cmp-sum-pos { color: #16A34A; font-weight: 700; }
.cmp-sum-neg { color: #DC2626; font-weight: 700; }

/* ── 比較: ヘッダー右グループ（差分値 + verdict） ── */
.cmp-metric-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── 比較: A/B行の強弱 ── */
.cmp-row-a .cmp-bar-track { height: 6px; }
.cmp-row-a .cmp-val-num   { color: #B0BAC8; font-weight: 500; font-size: 12px; }

.cmp-row-b .cmp-bar-track { height: 10px; }
.cmp-row-b .cmp-val-num   { color: #111827; font-weight: 800; }

/* ── 比較: 主因ラベル ── */
.cmp-matdiff-name-wrap {
  display: flex;
  align-items: baseline;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.cmp-cause-prefix {
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  font-family: sans-serif;
  flex-shrink: 0;
}

.cmp-matdiff-top .cmp-matdiff-name { font-weight: 700; color: #111827; }

/* ── 比較: まとめ 方向性ライン ── */
.cmp-summary-direction {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  font-family: sans-serif;
  padding-bottom: 6px;
  border-bottom: 1px solid #F3F4F6;
  margin-bottom: 1px;
}
.cmp-summary-direction::before { content: none; }