/* ===========================================================
   AI Webツール自動生成会社 - 2D見下ろし型オフィス
   レトロゲーム（ピクセルアート）風スタイル
   =========================================================== */

:root {
  --bg: #0b0f20;
  --floor: #1b2140;
  --floor-alt: #222a52;
  --wall: #0a0d1c;
  --panel: #1d2547;
  --panel-dark: #131a35;
  --ink: #e8f0ff;
  --ink-dim: #93a3cf;
  --accent: #ffd54a;
  --accent-dark: #b98f10;
  --green: #4ce07a;
  --green-dark: #1f8d47;
  --red: #ff5f6d;
  --red-dark: #a32530;
  --blue: #4aa8ff;
  --purple: #b06cff;
  --teal: #2fd4c4;
  --orange: #ff9f45;
  --pink: #ff7bd5;
  --border: #05070f;
  /* ページの横幅。すべての帯がこれを使う。
     以前はヘッダー・フロア・バナーがそれぞれ別の値を持っていて、
     meeting-banner だけ 1233px（他は 1100px）と左右がずれていた。
     1か所で決めれば、ずれようがない。 */
  --shell: 1160px;
  --shell-pad: 16px;
  /* 帯と帯の間隔。ここも1つに揃える。 */
  --stack-gap: 14px;

  --font-jp: "DotGothic16", "MS Gothic", "Osaka-Mono", monospace;
  --font-en: "Press Start 2P", "DotGothic16", monospace;
  /* 読ませる文章用。ドット絵フォントは16pxグリッド前提なので、
     10〜13px の日本語ではグリフが潰れて判読できなくなる。
     世界観を持たせたい見出し・ラベルは --font-jp / --font-en のまま、
     内容を読み取らせたい本文だけこちらへ寄せる。 */
  --font-ui: system-ui, -apple-system, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Meiryo", "Noto Sans JP", sans-serif;

  /* 懸念（赤）・可決（緑）を背景ごと分ける。文字色だけで表すと
     暗い背景では沈んで読めないため、面で示してコントラストを稼ぐ。 */
  --red-soft: rgba(163, 37, 48, 0.34);
  --red-text: #ffd9dd;
  --green-soft: rgba(31, 141, 71, 0.32);
  --green-text: #b6ffd0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px 16px 40px;
  background-color: var(--bg);
  background-image:
    linear-gradient(#131a35 1px, transparent 1px),
    linear-gradient(90deg, #131a35 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  image-rendering: pixelated;
}

/* ===== 上部HUD ===== */
/* ======================================================================
   ヘッダー

   以前は9個の塊を flex-wrap で並べていて、高さが 481px あった。
   画面の3分の1がヘッダーで埋まり、肝心のオフィスが見えない。

   役割で3段に分ける。
     1段目  会社名・いまのフェーズ・設定     常に1行
     2段目  お金の数字                       同じ形のカード2枚
     3段目  押すもの                         等幅のボタンの帯
   ====================================================================== */
.hud {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--shell-pad);
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow:
    0 0 0 4px var(--panel-dark),
    8px 8px 0 0 rgba(0, 0, 0, 0.5);
}

/* --- 1段目 --- */
.hud__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hud__bar .hud__phase {
  /* 会社名と設定ボタンの間を埋める */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* 進捗のバーは、作業中だけ出る。出ていないときに場所を取らせない。 */
.hud__bar .progress { flex: 1 1 160px; min-width: 120px; }
.hud__bar .progress[hidden] { display: none; }

.hud__bar .settings-btn { flex: 0 0 auto; }

/* --- 2段目以降のまとまり --- */
/*
   狭い画面では畳めるようにする。

   最初は <details> を使ったが、閉じた状態で見出しを CSS で消すと、
   中身へ到達する手段が無くなる（広い画面で実際に起きた）。
   表示するかどうかは CSS だけで決め、JS はクラスを付け外しする。
   こうすると、幅の指定が最後に効くので閉じ込められない。
*/
.hud__more { display: grid; gap: 10px; }

.hud__more-toggle {
  /* 広い画面では畳む必要が無いので、見出しごと出さない */
  display: none;
  width: 100%;
  padding: 8px 10px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.hud__more-toggle::before { content: "▾ "; color: var(--accent); }
.hud__more-toggle[aria-expanded="false"]::before { content: "▸ "; }
.hud__more-toggle:hover { filter: brightness(1.2); }
.hud__more-toggle:focus-visible { outline: 3px solid var(--accent); }

.hud__stats {
  display: grid;
  /* 2枚が入らない幅では1枚ずつ。中途半端に潰さない。 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.hud__card {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px 12px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

/* --- 3段目 --- */
.hud__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.hud__action {
  display: grid;
  gap: 4px;
  align-content: start;
}

/* 1つだけ置くボタンは、枠いっぱいに広げる。
   横並びの行（音声）は対象外にする。両方が親いっぱいを要求すると、
   片方が 56px まで潰れて文字が縦に流れる（実際そうなった）。 */
.hud__action > .btn { width: 100%; }

.hud__voice-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

/* 読み上げが主、停止が従。幅の比で役割を出す。 */
.hud__voice-row .btn--voice {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.hud__voice-row .btn--stop {
  flex: 0 0 auto;
  white-space: nowrap;
}

.hud__title {
  margin: 0;
  font-family: var(--font-en);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--border);
}

.hud__budget {
  min-width: 240px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  background: var(--panel-dark);
  border: 4px solid var(--border);
}

.hud__label { font-size: 13px; color: var(--ink-dim); }

.hud__value {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.hud__note { font-size: 13px; color: var(--ink-dim); }

/* --- モデル別の無料枠 --- */

/* 読み上げ専用。画面には出さないが、要素としては残す。
   旧UIが参照している id を消すと、そちらが落ちる。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.quota {
  display: grid;
  gap: 6px;
  width: 100%;
}

.quota__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
}

/* どちらのモデルかが、色で一目で分かるようにする。
   名前だけだと、並んだ時にどちらがどちらか読まないと分からない。 */
.quota__tier {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}

/* 2026-09の改修: 「高品質/高回転」の2値から、4グループ（A〜D）表示へ。
   グループごとに色を変え、並んだ時に一目で見分けられるようにする。 */
.quota__tier--a {
  color: #241a00;
  background: var(--accent);
}

.quota__tier--b {
  color: #1c0a33;
  background: var(--purple);
}

.quota__tier--c {
  color: #04212b;
  background: var(--teal);
}

.quota__tier--d {
  color: #2c1200;
  background: var(--orange);
}

/* グループが特定できない場合の既定色（本来は起きない想定の保険）。 */
.quota__tier--z {
  color: var(--ink);
  background: var(--panel-dark);
}

.quota__pct {
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* 直近1分の稼働。1日の消費とは別の話なので、下に細く添える。 */
.quota__rpm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-dim);
  font-size: 13px;
}

.quota__rpm-bar {
  flex: 1;
  height: 4px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.quota__rpm-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 200ms;
}

/* クールダウン中／使い切ったモデルの、解除見込み。
   「1分枠の調整待機」（すぐ戻る）と「1日枠の消化完了」（翌日まで）を
   色でも区別する。翌日までの方を、待つ側にとって重い状態として
   赤系にしておく。 */
.quota__cooldown {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--orange);
}

.quota__cooldown--minute {
  color: var(--orange);
}

.quota__cooldown--daily {
  color: var(--red);
  font-weight: bold;
}

.gauge {
  height: 14px;
  background: #000;
  border: 3px solid var(--border);
  padding: 2px;
}

.gauge__fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--green) 0 6px, var(--green-dark) 6px 8px);
  transition: width 0.4s steps(12);
}

.gauge__fill.is-warning {
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, var(--accent-dark) 6px 8px);
}

.gauge__fill.is-danger {
  background: repeating-linear-gradient(90deg, var(--red) 0 6px, var(--red-dark) 6px 8px);
}

.settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: #10152b;
  background: var(--accent);
  border: 4px solid var(--border);
  border-radius: 0;
  box-shadow: 0 6px 0 0 var(--border);
  cursor: pointer;
}

.settings-btn:hover { filter: brightness(1.1); }
.settings-btn:active { transform: translateY(6px); box-shadow: 0 0 0 0 var(--border); }
.settings-btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
.settings-btn__icon { font-size: 18px; line-height: 1; }

.settings-btn__badge {
  padding: 2px 6px;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.settings-btn__badge.is-set { color: #10152b; background: var(--green); }

.hud__phase {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  background: var(--panel-dark);
  border: 4px solid var(--border);
}

.hud__phase-value {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--green);
  text-shadow: 2px 2px 0 var(--border);
}

.hud__phase-value.is-waiting { color: var(--accent); }

/* そのフェーズに入ってからの経過時間。数字が動き続けているかどうかで、
   正常進行中か止まっているかを見分けられるようにする。 */
.hud__phase-elapsed {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--ink-dim);
}

.hud__mode {
  padding: 3px 8px;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--border);
}

.hud__mode.is-rnd {
  color: #10152b;
  background: var(--pink);
  animation: hr-shine 1.2s steps(2) infinite;
}

/* 高品質枠が締め出し中、全社が高回転側で代行している間の合図。
   フェーズの隣に出すことで、部署バッジを1つずつ見比べなくても
   「いま会社全体が代行中か」が一目で分かるようにする。 */
.hud__fallback {
  padding: 3px 8px;
  font-size: 13px;
  color: #10152b;
  background: var(--orange);
  border: 3px solid var(--border);
  animation: hr-shine 1.2s steps(2) infinite;
}

/* 「枠は残っているのに動いていない」理由・残り時間・次回予定。
   フェーズだけでは区別が付かなかった（クールダウン中／決裁待ち／
   タスクの合間の均し待機）ので、待機中だけ帯を出す。 */
.hud__wait {
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  background: var(--panel-dark);
  border: 3px solid var(--border);
  border-top: none;
}

.hud__wait-text {
  font-size: 13px;
  color: var(--accent);
}

.hud__wait-next {
  font-size: 13px;
  color: var(--ink-dim);
}

/* すべての帯を同じ間隔で積む。
   以前は 12px / 14px / 16px / 0px が混在していた。 */
.idea-post,
.sync-banner,
.floor-hint,
.floor,
.status-line { margin-top: var(--stack-gap); }

.floor-hint {
  max-width: var(--shell);
  margin: 12px auto 0;
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
}

/* ===== オフィスのフロア（間取り） ===== */
.floor {
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
  padding: var(--shell-pad);
  display: grid;
  gap: 12px;
  background: var(--wall);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 8px 8px 0 0 rgba(0, 0, 0, 0.5);
}

/* 1階: 企画から決裁まで。 */
.floor--main {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "label label label label label label"
    "marketing marketing manager manager manager manager"
    "legal legal pr pr audit audit"
    "growth growth digest digest sweeper sweeper"
    "corridor corridor corridor corridor corridor corridor"
    "president president president president president president";
}

/* 2階: ものを作る工程。左上から右下へ、実際に通る順に並べる。 */
.floor--upper {
  margin-top: var(--stack-gap);
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "label label label label label label"
    "ux ux dev dev review review"
    "ui ui qa qa .    .   ";
}

/* --- フロアの見出し --- */
.floor__label {
  grid-area: label;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-dim);
}

.floor__level {
  font-family: var(--font-en);
  font-size: 13px;
  padding: 2px 8px;
  color: var(--ink);
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

/* 工程名の羅列。狭い画面では折り返して収める。 */
.floor__note { font-size: 13px; color: var(--ink-dim); min-width: 0; }

.room--dev { grid-area: dev; }
.room--review { grid-area: review; }
.room--legal { grid-area: legal; }
.room--manager { grid-area: manager; }
.room--pr { grid-area: pr; }
.room--marketing { grid-area: marketing; }
.room--audit { grid-area: audit; }
.room--growth { grid-area: growth; }
.room--digest { grid-area: digest; }
.room--sweeper { grid-area: sweeper; }
.room--ux { grid-area: ux; }
.room--ui { grid-area: ui; }
.room--qa { grid-area: qa; }
.room--president { grid-area: president; }
.corridor { grid-area: corridor; }


/* ======================================================================
   案件の流れ（リレー型の進捗）

   部屋が光るだけだと、どの順に回っているのかが分からない。
   工程を1本の線にして、いまどこにいるかを出す。

   横に長いので、狭い画面ではこの枠の中だけを横スクロールさせる。
   ページ全体が横に伸びると、他の要素まで見切れる。
   ====================================================================== */
.pipeline {
  max-width: var(--shell);
  /* ヘッダーの直下へ付ける。間を空けると、どこにも属さない帯に見える。
     上の枠と重ねて、ヘッダーの一部として読ませる。 */
  margin: -4px auto 0;
  padding: 8px var(--shell-pad);
  background: var(--panel-dark);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 8px 8px 0 0 rgba(0, 0, 0, 0.5);
}

.pipeline__heading {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-dim);
}

.pipeline__now {
  font-size: 13px;
  color: var(--accent);
  font-weight: bold;
}

.pipeline__track {
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  /* 枠の中だけで横に流す。狭い画面でも中身を縮めない。 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.pipeline__step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pipeline__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
  padding: 6px 8px;
  background: var(--floor);
  border: 3px solid var(--border);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.pipeline__index {
  font-family: var(--font-en);
  font-size: 13px;
  opacity: .7;
}

/* 矢印。最後の工程の後ろには出さない。 */
.pipeline__arrow {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--border);
  flex: 0 0 auto;
}

/* 通り過ぎた工程。済んだことが分かる程度に留める。 */
.pipeline__step.is-done .pipeline__box {
  color: var(--ink);
  border-color: var(--ink-dim);
}

.pipeline__step.is-done .pipeline__arrow,
.pipeline__step.is-current .pipeline__arrow { color: var(--ink-dim); }

/* いまここ。部屋の点灯と同じ見た目に合わせる。 */
.pipeline__step.is-current .pipeline__box {
  color: var(--ink);
  background: var(--accent-dim, var(--panel));
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
  animation: pipeline-pulse 1.4s steps(2, end) infinite;
}

/* 人を待たせている工程（決裁待ちなど）。赤で止まっていることを示す。 */
.pipeline__step.is-waiting .pipeline__box {
  color: var(--ink);
  border-color: var(--danger, #ff7059);
  box-shadow: 0 0 0 2px var(--danger, #ff7059) inset;
}

@keyframes pipeline-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline__step.is-current .pipeline__box { animation: none; }
}

@media (max-width: 480px) {
  .pipeline { padding: 8px; }
  .pipeline__box { min-width: 66px; padding: 5px 6px; }
}

/* --- 部屋の共通スタイル --- */
.room {
  position: relative;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  /* 同じ行の部屋の高さをそろえる。中身の量で高さが変わると、
     行ごとにガタガタになって「配置が悪い」ように見える。 */
  min-height: 320px;
  border: 4px solid var(--border);
  /* 暗いトーンのドット絵風フロア（市松タイル） */
  background-color: var(--floor);
  background-image:
    linear-gradient(45deg, var(--floor-alt) 25%, transparent 25%, transparent 75%, var(--floor-alt) 75%),
    linear-gradient(45deg, var(--floor-alt) 25%, transparent 25%, transparent 75%, var(--floor-alt) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.room:hover { filter: brightness(1.15); }
.room:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.room:active { transform: translateY(2px); }

.room__name {
  margin: 0;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.room__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  font-size: 13px;
  color: #10152b;
  background: var(--accent);
  border: 3px solid var(--border);
}

.room__badge.is-empty { color: var(--ink); background: var(--panel-dark); }

.room__status {
  margin: 0;
  min-height: 44px;
  padding: 8px;
  font-size: 13px;
  color: var(--ink);
  background: rgba(5, 7, 15, 0.65);
  border: 3px solid var(--border);
  word-break: break-word;
}

/* --- 部屋の中のステージ（キャラ配置面） --- */
.room__stage {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px 8px 12px;
}

.room__stage--large { min-height: 190px; }
.room--manager .room__stage { gap: 40px; }

/* 机（見下ろし視点） */
.desk {
  position: absolute;
  bottom: 10px;
  width: 76px;
  height: 26px;
  background: #6b4a2a;
  border: 4px solid var(--border);
  box-shadow: inset 0 6px 0 0 #8a6236;
}

.desk--wide { width: 190px; height: 30px; background: #4a5a8a; box-shadow: inset 0 6px 0 0 #6b7cb0; }
.desk--large { width: 150px; height: 34px; background: #7a4f7a; box-shadow: inset 0 6px 0 0 #9a67a0; }

/* 観葉植物 */
.plant {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 26px;
  height: 34px;
  background: var(--green-dark);
  border: 4px solid var(--border);
  box-shadow: inset 0 -10px 0 0 #7a4a2a;
}

/* --- キャラクター --- */
.actor {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
}

/* --- 社員キャラクター（レトロゲーム風のデフォルメ） ---
   以前は縦長の長方形に box-shadow で目を描いていたため、
   小さく表示すると「四角い塊」にしか見えなかった。
   丸い体・大きな目・口という記号だけに絞り、
   パックマンのように一目で「顔」と分かる形にする。 */
/* --- 社員キャラクター（16×16グリッドのオリジナル・ドットマスコット） ---

   丸い頭と波打つ裾を持つ「おばけ型」。既存作品の意匠をなぞらず、
   丸頭＋白目＋波裾という記号だけで作った完全オリジナル。

   形は clip-path のポリゴンで表す。座標はすべて 6.25%（＝16分割の1マス）
   刻みにしてあるため、輪郭が必ずマス目に乗り、拡大してもドット絵に見える。
   裾は2フレーム（--hem-a / --hem-b）を用意し、steps() で切り替えて
   フワフワと浮いているように見せる。 */
.character-sprite {
  --hem-a: polygon(
    25% 0%, 75% 0%, 75% 6.25%, 87.5% 6.25%, 87.5% 12.5%, 93.75% 12.5%,
    93.75% 18.75%, 100% 18.75%, 100% 87.5%,
    87.5% 87.5%, 87.5% 100%, 75% 100%, 75% 87.5%,
    62.5% 87.5%, 62.5% 100%, 50% 100%, 50% 87.5%,
    37.5% 87.5%, 37.5% 100%, 25% 100%, 25% 87.5%,
    12.5% 87.5%, 12.5% 100%, 0% 100%,
    0% 18.75%, 6.25% 18.75%, 6.25% 12.5%, 12.5% 12.5%, 12.5% 6.25%, 25% 6.25%
  );
  --hem-b: polygon(
    25% 0%, 75% 0%, 75% 6.25%, 87.5% 6.25%, 87.5% 12.5%, 93.75% 12.5%,
    93.75% 18.75%, 100% 18.75%, 100% 100%,
    87.5% 100%, 87.5% 87.5%, 75% 87.5%, 75% 100%,
    62.5% 100%, 62.5% 87.5%, 50% 87.5%, 50% 100%,
    37.5% 100%, 37.5% 87.5%, 25% 87.5%, 25% 100%,
    12.5% 100%, 12.5% 87.5%, 0% 87.5%,
    0% 18.75%, 6.25% 18.75%, 6.25% 12.5%, 12.5% 12.5%, 12.5% 6.25%, 25% 6.25%
  );
  --sprite-color: var(--ink-dim);

  position: relative;
  width: 48px;   /* 16マス × 3px。割り切れる値にして輪郭のにじみを防ぐ */
  height: 48px;
  background: var(--sprite-color);
  clip-path: var(--hem-a);
  /* 縁取りの代わりに影を落として、暗い床から浮かせる */
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
}

/* 白目。左右2つを1要素で描く（box-shadow で複製） */
.character-sprite::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 9px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  box-shadow: 18px 0 0 0 #ffffff;
}

/* 瞳。状態によって向きを変える */
.character-sprite::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 12px;
  width: 6px;
  height: 6px;
  background: #0b1020;
  box-shadow: 18px 0 0 0 #0b1020;
}

/* --- 部署別のテーマカラー --- */
.character-sprite--marketing { --sprite-color: #b06cff; } /* パープル */
.character-sprite--manager-a { --sprite-color: #ffc233; } /* アンバー */
.character-sprite--manager-b { --sprite-color: #e0a21a; } /* ゴールド */
.character-sprite--ux        { --sprite-color: #7ce0c4; } /* ミント（設計） */
.character-sprite--dev       { --sprite-color: #3d7bff; } /* コバルトブルー */
.character-sprite--ui        { --sprite-color: #ff9ecb; } /* ピンク（装飾） */
.character-sprite--qa        { --sprite-color: #c8b6ff; } /* ラベンダー（検査） */
.character-sprite--review    { --sprite-color: #ff7059; } /* コーラルレッド */
.character-sprite--legal     { --sprite-color: #2ecc71; } /* エメラルドグリーン */
.character-sprite--pr        { --sprite-color: #38d6f5; } /* シアン */
.character-sprite--audit     { --sprite-color: #ff9438; } /* オレンジ */
.character-sprite--optimizer { --sprite-color: #5fe3b4; } /* ミントグリーン */
.character-sprite--growth    { --sprite-color: #ffb454; } /* アンバー（文言リライト） */
.character-sprite--digest    { --sprite-color: #ff6f91; } /* ローズ（監査要約） */
.character-sprite--sweeper   { --sprite-color: #8fd6ff; } /* スカイブルー（掃除部） */

.actor__name {

  font-family: var(--font-en);
  font-size: 13px;
  color: var(--ink-dim);
}

/* 裾を波打たせながら上下する（待機中）。
   steps(2) で中割りを捨て、2コマのドット絵アニメとして見せる。 */
@keyframes ghost-float {
  0%, 100% { transform: translateY(0); clip-path: var(--hem-a); }
  50% { transform: translateY(-4px); clip-path: var(--hem-b); }
}

/* うなずきながら手を動かす（作業中） */
@keyframes ghost-work {
  0%, 100% { transform: translateY(0) scaleY(1); clip-path: var(--hem-a); }
  50% { transform: translateY(3px) scaleY(0.94); clip-path: var(--hem-b); }
}

/* 相手を見ながら話す（発言中）。瞳を左右に振る。 */
@keyframes ghost-look {
  0%, 100% { left: 12px; }
  50% { left: 15px; }
}

/* 手元を見る（作業中）。瞳を下げる。 */
@keyframes ghost-look-down {
  0%, 100% { top: 18px; }
  50% { top: 21px; }
}

.character-sprite.is-idle { animation: ghost-float 1.4s steps(2) infinite; }
.character-sprite.is-working { animation: ghost-work 0.5s steps(2) infinite; }
.character-sprite.is-talking { animation: ghost-float 1.1s steps(2) infinite; }

.character-sprite.is-talking::after { animation: ghost-look 0.5s steps(2) infinite; }
.character-sprite.is-working::after { animation: ghost-look-down 0.5s steps(2) infinite; }

/* 発言中は目を少し見開く（頭上のフキダシと合わせて「喋っている」と分かる） */
.character-sprite.is-talking::before { top: 14px; height: 13px; }

/* --- キャラ頭上のフキダシ --- */
.sprite-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 160px;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #10152b;
  background: var(--ink);
  border: 3px solid var(--border);
  text-align: center;
}

.sprite-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--ink);
  box-shadow: 0 -6px 0 0 var(--ink), 0 6px 0 0 var(--border);
}

/* --- 廊下 --- */
.corridor {
  position: relative;
  padding: 34px 12px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  min-height: 120px;
  border: 4px dashed #2c3566;
  background-color: #141a33;
  background-image: repeating-linear-gradient(90deg, #1a2140 0 20px, #141a33 20px 40px);
}

.corridor__label,
.corridor__door {
  position: absolute;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--ink-dim);
}

.corridor__label { top: 8px; left: 12px; }

/* 離席中（廊下へ相談に出ている）社員のデスク */
.actor--vacant .character-sprite {
  opacity: .18;
  filter: grayscale(1);
  animation: none;
}

.actor--vacant .actor__name {
  color: var(--ink-dim);
  opacity: .6;
}

.actor__away {
  display: block;
  margin-top: 2px;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--ink-dim);
}

/* 決裁待ちが無いときの空表示 */
.corridor__empty {
  margin: 0;
  align-self: center;
  font-size: 13px;
  color: var(--ink-dim);
}

.corridor__empty[hidden] { display: none; }

.corridor__actors {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

/* 廊下のキャラはクリックで決裁できるため、押せることを示す */
.actor--knocking {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.actor--knocking:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.actor--knocking:hover { filter: brightness(1.2); }

/* ===== 作業中 / 待機中の対比 ===== */

/* --- 作業中の部屋: ゴールドのグローで点灯させる --- */
.room.is-active {
  border-color: var(--accent);
  opacity: 1;
  animation: room-glow 1.6s ease-in-out infinite;
}

@keyframes room-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 213, 74, .30), 0 0 14px 2px rgba(255, 213, 74, .18); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 213, 74, .55), 0 0 26px 6px rgba(255, 213, 74, .40); }
}

/* --- 待機中の部屋: 暗く沈める --- */
.room.is-standby {
  opacity: .6;
  filter: saturate(.55);
  border-color: var(--border);
  box-shadow: none;
}

.room.is-standby .sprite-bubble { display: none; }

/* ホバー時は待機中でも内容を確認できるようにする */
.room.is-standby:hover,
.room.is-standby:focus-visible { opacity: .85; filter: none; }

/* --- 稼働状態バッジ --- */
.room__mode {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 3px;
  vertical-align: middle;
}

.room__mode--working {
  color: #241a00;
  background: var(--accent);
  font-weight: bold;
}

.room__mode--alert {
  color: #fff;
  background: var(--red);
  font-weight: bold;
  animation: alert-blink 1.1s steps(2) infinite;
}

@keyframes alert-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* 決裁待ちの社長室は、通常の稼働中より強く目立たせる */
.room.is-alert {
  border-color: var(--red);
  animation: room-alert 1.2s ease-in-out infinite;
}

@keyframes room-alert {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 95, 109, .35), 0 0 16px 3px rgba(255, 95, 109, .22); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 95, 109, .60), 0 0 30px 8px rgba(255, 95, 109, .45); }
}

.btn--pivot {
  background: var(--green-dark);
  border-color: var(--green);
  color: #eafff1;
}

.btn--pivot:hover { background: var(--green); color: #04240f; }

.room__mode--standby {
  color: var(--ink-dim);
  background: var(--panel-dark);
  border: 1px solid var(--border);
}

/* --- 廊下: 相談待ちの間だけ点灯させる --- */
.corridor.is-active {
  border-color: var(--accent);
  border-style: solid;
  animation: room-glow 1.6s ease-in-out infinite;
}

.corridor.is-standby { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .room.is-active,
  .corridor.is-active { animation: none; box-shadow: 0 0 0 4px rgba(255, 213, 74, .45); }
  .room.is-alert { animation: none; box-shadow: 0 0 0 4px rgba(255, 95, 109, .55); }
  .room__mode--alert { animation: none; }
}
.corridor__door { bottom: 8px; right: 12px; color: var(--accent); }

/* ===== モーダル ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.82);
}

.modal__window {
  position: relative;
  width: min(680px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 10px 10px 0 0 rgba(0, 0, 0, 0.6);
  animation: modal-in 0.15s steps(3);
}

@keyframes modal-in {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--panel-dark);
  border-bottom: 4px solid var(--border);
}

.modal__title {
  margin: 0;
  /* 「部屋の詳細」「経営ミーティング」など日本語が入るため読める書体で */
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.modal__close {
  padding: 6px 10px;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--ink);
  background: var(--red);
  border: 4px solid var(--border);
  border-radius: 0;
  box-shadow: 0 4px 0 0 var(--border);
  cursor: pointer;
}

.modal__close:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--border); }
.modal__close:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }

.modal__body {
  padding: 20px 18px 24px;
  display: grid;
  gap: 18px;
  /* 中の文章はすべて読ませる書体へ。個別指定が無い要素もここで拾う */
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* body の pixelated を持ち込むと文字が滲むため、ここで戻す */
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* --- モーダル内の共通ブロック --- */
.detail__label {
  margin: 0 0 8px;
  /* 「代替案の比較（原案の課題と…）」など日本語のラベルが入る。
     font-en は日本語グリフを持たずドット絵フォントへ落ちるので使わない */
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.detail__text {
  margin: 0;
  padding: 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  background: var(--panel-dark);
  border: 3px solid var(--border);
  word-break: break-word;
}

.detail__list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }

.detail__list li {
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  background: var(--panel-dark);
  border: 3px solid var(--border);
}

.detail__list b {
  color: var(--accent);
  font-size: 15px;
  line-height: 1.6;
}

/* --- 決裁ボックス --- */
.approval__badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-en);
  font-size: 13px;
  color: #10152b;
  background: var(--accent);
  border: 3px solid var(--border);
}

.approval__title {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.approval__idea {
  margin: 12px 0 0;
  padding: 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  background: var(--panel-dark);
  border: 3px dashed var(--ink-dim);
}

.approval__recommend {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

/* PROCEED / REJECT は英字なのでドット絵のまま。
   面で塗って暗背景から浮かせ、余白で文字を詰まらせない */
.approval__recommend strong {
  padding: 6px 10px;
  font-family: var(--font-en);
  font-size: 13px;
  line-height: 1.4;
  color: #0a1120;
  border: 3px solid var(--border);
}

.approval__recommend strong.is-proceed { background: var(--green); }
.approval__recommend strong.is-reject { background: var(--red); color: #2a0207; }
.approval__empty { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
.approval__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }

/* --- ボタン --- */
.btn {
  flex: 1 1 170px;
  padding: 14px 12px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #10152b;
  background: var(--ink-dim);
  border: 4px solid var(--border);
  border-radius: 0;
  box-shadow: 0 6px 0 0 var(--border);
  cursor: pointer;
}

.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 0 var(--border); }
.btn:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.btn[disabled] { filter: grayscale(0.6); cursor: progress; }

.btn--approve { background: var(--green); }
.btn--reject { background: var(--red); }
.btn--mic { background: var(--accent); }
.btn--send { background: var(--green); }
.btn--small { flex: 0 0 auto; padding: 10px 14px; font-size: 14px; }

.btn--mic.is-recording {
  background: var(--red);
  color: var(--ink);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

/* --- 音声対話パネル（社長室モーダル内） --- */
.voice__panel { display: grid; gap: 16px; }
.voice__panel[hidden] { display: none; }
.voice__block { display: grid; gap: 10px; }

.voice__report {
  margin: 0;
  padding: 12px;
  font-size: 15px;
  color: #10152b;
  background: #d9f7e5;
  border: 3px solid var(--border);
}

.voice__textarea {
  width: 100%;
  padding: 12px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.6;
  color: #10152b;
  background: var(--ink);
  border: 4px solid var(--border);
  border-radius: 0;
  resize: vertical;
}

.voice__textarea:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.voice__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.voice__hint { margin: 0; min-height: 20px; font-size: 13px; color: var(--ink-dim); }
.voice__hint.is-error { color: var(--red); }

/* ===== ステータス行とトースト ===== */
.status-line {
  max-width: var(--shell);
  margin: 14px auto 0;
  min-height: 24px;
  font-size: 14px;
  color: var(--accent);
  text-align: center;
}

.status-line.is-error { color: var(--red); }

.toast-area {
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: grid;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
  z-index: 60;
}

.toast {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 6px 6px 0 0 rgba(0, 0, 0, 0.5);
  word-break: break-word;
  animation: toast-in 0.2s steps(3);
}

.toast--error { color: var(--red); }
.toast--success { color: var(--green); }

/* 押せるトースト（新着の知らせなど）。押すと該当の部屋を開く */
.toast--clickable { cursor: pointer; border-color: var(--accent); }
.toast--clickable:hover, .toast--clickable:focus-visible {
  background: var(--panel-dark);
  outline: none;
}

@keyframes toast-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ===== レスポンシブ ===== */
@media (max-width: 1000px) {
  .floor--main {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "label label"
      "marketing manager"
      "legal pr"
      "audit audit"
      "growth digest"
      "sweeper sweeper"
      "corridor corridor"
      "president president";
  }
  .floor--upper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "label label"
      "ux dev"
      "review ui"
      "qa qa";
  }
}

@media (max-width: 820px) {
  .floor--main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "marketing"
      "manager"
      "legal"
      "pr"
      "audit"
      "growth"
      "digest"
      "sweeper"
      "corridor"
      "president";
  }
  .floor--upper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "ux"
      "dev"
      "review"
      "ui"
      "qa";
  }
  .hud__title { font-size: 14px; }

  /* 数字と操作は畳めるようにする（開閉の見出しを出す） */
  .hud__more-toggle { display: block; }
  /* 閉じているときだけ隠す。広い画面には効かないので、
     ここで閉じ込められることはない。 */
  .hud__more.is-collapsed { display: none; }
  /* 操作は2列。1列だと4段になり、ヘッダーだけで画面が埋まる。 */
  .hud__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud__action .hud__note { font-size: 13px; }
  .hud__budget { min-width: 100%; }
  .toast-area { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .character-sprite.is-idle,
  .character-sprite.is-working,
  .character-sprite.is-talking,
  .character-sprite.is-talking::after,
  .character-sprite.is-working::after,
  .btn--mic.is-recording { animation: none; }
  .gauge__fill { transition: none; }
  .modal__window, .toast { animation: none; }
}

/* --- 完成済みプロダクト一覧（社長室モーダル） --- */
.product__count {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-dim);
}

.product__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
}

.product__item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: var(--panel-dark);
  border: 3px solid var(--border);
}

.product__name {
  font-size: 15px;
  color: var(--accent);
}

.product__meta {
  font-size: 13px;
  color: var(--ink-dim);
}

.product__path {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--green);
  word-break: break-all;
}

/* --- 取締役会コメント（社長室モーダル） --- */
.manager-comments { margin-top: 12px; }

/* 懸念・リスク分析。赤文字を暗背景へ直接置くと沈むため、
   淡い赤の面と左罫で「注意書き」として切り出す */
.manager-comments__risks {
  margin: 10px 0 0;
  padding: 9px 11px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: var(--red-text);
  background: var(--red-soft);
  border-left: 4px solid var(--red);
}

.manager-comments__risks + .manager-comments__risks { margin-top: 6px; }

/* 判定（PROCEED / REJECT）を名前の並びから独立させる */
.manager-comments__verdict {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 8px;
  font-family: var(--font-en);
  font-size: 13px;
  line-height: 1.5;
  color: #0a1120;
  background: var(--ink-dim);
  border: 2px solid var(--border);
}

.manager-comments__body {
  margin: 9px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.manager-comments__verdict.is-proceed { background: var(--green); }
.manager-comments__verdict.is-reject { background: var(--red); color: #2a0207; }

/* ===== 画像の添付 ===== */
.btn--attach {
  flex: 0 0 auto;
  padding: 12px 16px;
  font-size: 20px;
  line-height: 1;
  background: var(--blue);
  color: #06172c;
}

/* ドロップ先であることを、枠の変化で伝える */
.idea-post__form.is-dragover,
.chat__form.is-dragover {
  outline: 4px dashed var(--accent);
  outline-offset: 6px;
}

.attach {
  margin-top: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-dark);
  border: 3px solid var(--border);
}

.attach[hidden] { display: none; }

.attach__thumb {
  width: 64px; height: 64px;
  object-fit: cover;
  border: 3px solid var(--border);
  background: var(--panel);
}

.attach__name {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.6;
  color: var(--ink);
  word-break: break-all;
}

.attach__remove {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 700;
  color: #2a0207;
  background: var(--red);
  border: 3px solid var(--border);
  cursor: pointer;
}

.attach__remove:hover { filter: brightness(1.1); }
.attach__remove:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }

/* ===== アイデア履歴 ===== */
.idea-history { margin-top: 4px; }

/* 表は横に伸びるので、はみ出しはこの中だけで吸収する */
.idea-history__scroll { overflow-x: auto; }

.idea-history__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}

.idea-history__table th,
.idea-history__table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid var(--border);
}

.idea-history__table th {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--panel-dark);
  white-space: nowrap;
}

.idea-history__title { font-weight: 700; min-width: 12em; }
.idea-history__when { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }
.idea-history__clip { white-space: nowrap; }
.idea-history__clip a { color: var(--blue); }

.idea-history__verdicts { min-width: 18em; }
.idea-history__verdict { margin: 0 0 6px; font-size: 13px; line-height: 1.6; }
.idea-history__verdict:last-child { margin-bottom: 0; }

.idea-history__manager {
  display: inline-block; margin-right: 6px;
  padding: 2px 8px;
  font-size: 13px; font-weight: 700;
  color: #0a1120; background: var(--ink-dim);
  border: 2px solid var(--border);
}

.idea-history__manager.is-proceed { background: var(--green); }
.idea-history__manager.is-reject { background: var(--red); color: #2a0207; }

.idea-status {
  display: inline-block;
  padding: 3px 10px;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
  border: 2px solid var(--border);
}

.idea-status--PENDING { color: var(--ink); background: var(--panel); }
.idea-status--IN_PROGRESS { color: #06172c; background: var(--blue); }
.idea-status--DELIVERED { color: #04240f; background: var(--green); }
.idea-status--REJECTED { color: #2a0207; background: var(--red); }

.idea-post__item { position: relative; }
.idea-post__clip { margin-left: 6px; }
.idea-post__empty { color: var(--ink-dim); font-family: var(--font-ui); font-size: 14px; }

/* ===== 各部署の業務履歴 ===== */
.activity { margin-top: 4px; }

.activity__list {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
}

.activity__item {
  padding: 12px 14px;
  font-family: var(--font-ui);
  background: var(--panel-dark);
  border: 3px solid var(--border);
  border-left-width: 5px;
}

.activity__head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}

.activity__outcome {
  padding: 2px 9px;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  color: #0a1120; background: var(--ink-dim);
  border: 2px solid var(--border);
  white-space: nowrap;
}

.activity__outcome--OK { background: var(--green); color: #04240f; }
.activity__outcome--NG { background: var(--red); color: #2a0207; }
.activity__outcome--RETRY { background: var(--accent); color: #241a00; }
.activity__outcome--INFO { background: var(--ink-dim); }

.activity__title {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}

.activity__when {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.activity__summary {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.65;
  color: var(--ink);
}

.activity__details {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  font-size: 13px; line-height: 1.6;
}

.activity__details dt { color: var(--ink-dim); white-space: nowrap; }
.activity__details dd { margin: 0; color: var(--ink); word-break: break-word; }

@media (max-width: 640px) {
  .activity__details { grid-template-columns: 1fr; gap: 2px; }
  .activity__details dd { margin-bottom: 6px; }
}

/* ===== 収支HUD ===== */
.hud__finance {
  min-width: 260px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  background: var(--panel-dark);
  border: 4px solid var(--border);
}

.finance {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.finance div { display: grid; gap: 2px; }
.finance dt { font-size: 13px; color: var(--ink-dim); }

.finance dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.finance__profit.is-profit { color: var(--green); }
.finance__profit.is-loss { color: var(--red); }

/* ===== 社長のアイデアポスト ===== */
.idea-post {
  max-width: var(--shell);
  margin: 12px auto 0;
  padding: 16px 20px;
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 8px 8px 0 0 rgba(0, 0, 0, 0.5);
}

.idea-post__hint { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.7; color: var(--ink-dim); }

.idea-post__form { display: flex; flex-wrap: wrap; gap: 12px; }

.idea-post__input {
  flex: 1 1 260px;
  padding: 12px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: #10152b;
  background: var(--ink);
  border: 4px solid var(--border);
  border-radius: 0;
}

.idea-post__input:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }

.btn--idea { flex: 0 0 auto; background: var(--teal); }

/* 仕様注入システム: 絶対遵守仕様の入力欄。通常のアイデア入力と
   混同しないよう、危険色（--red）の縁で「重要」を伝える。 */
.idea-post__strict { display: grid; gap: 6px; }

.idea-post__strict-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: bold;
  color: var(--red);
}

.idea-post__strict-input {
  width: 100%;
  padding: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: #10152b;
  background: var(--ink);
  border: 4px solid var(--red);
  border-radius: 0;
  resize: vertical;
  box-sizing: border-box;
}

.idea-post__strict-input:focus-visible { outline: 4px solid var(--red); outline-offset: 2px; }

.idea-post__strict-input::placeholder { color: var(--ink-dim); white-space: pre-line; }

/* ストック一覧で、絶対遵守仕様つき（＝優先割り込み済み）の企画に付ける印 */
.idea-post__priority-badge {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
  background: var(--red);
  border: 2px solid var(--border);
}

.idea-post__stock { display: grid; gap: 6px; }

.idea-post__stock-label {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.idea-post__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.idea-post__list li {
  padding: 6px 10px;
  font-size: 13px;
  background: var(--panel-dark);
  border: 3px solid var(--border);
}

.idea-post__list li.is-next { border-color: var(--accent); color: var(--accent); }

.idea-post__list .is-empty { color: var(--ink-dim); border-style: dashed; }

/* ===== 外注ワークフロー（社長への外注依頼） ===== */
.outsource-box {
  max-width: var(--shell);
  margin: 12px auto 0;
  padding: 16px 20px;
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 8px 8px 0 0 rgba(0, 0, 0, 0.5);
}

.outsource-box__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.outsource-box__item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: var(--panel-dark);
  border: 3px solid var(--red);
  font-family: var(--font-ui);
}

.outsource-box__item-title { font-weight: bold; font-size: 14px; }

.outsource-box__item-meta {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--accent);
}

.outsource-box__item-reason { font-size: 13px; color: var(--ink-dim); line-height: 1.6; }

.outsource-box__empty {
  color: var(--ink-dim);
  border-style: dashed;
  border-width: 3px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
}

.outsource-box__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.outsource-box__select {
  flex: 1 1 200px;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: #10152b;
  background: var(--ink);
  border: 4px solid var(--border);
}

.outsource-box__filename {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outsource-box__status {
  margin: 0;
  min-height: 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== 人事評価バッジ（AIレベル / 一発通過率） ===== */
.room__hr {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 20px;
  font-size: 13px;
}

.hr-badge {
  padding: 2px 6px;
  color: #10152b;
  background: var(--ink-dim);
  border: 2px solid var(--border);
}

.hr-badge--pro {
  color: #10152b;
  background: var(--accent);
  animation: hr-shine 1.6s steps(2) infinite;
}

.hr-badge--rate { color: var(--ink); background: var(--panel-dark); }
.hr-badge--rate.is-high { color: #10152b; background: var(--green); }

/* 高品質枠の締め出し中、その部署が高回転側で代行しているしるし。
   --accent（PRO）と紛れないよう、注意を引く配色にする。 */
.hr-badge--model.hr-badge--fallback {
  background: var(--orange);
  color: #10152b;
}

.hr-badge--fallback-note {
  color: #10152b;
  background: var(--orange);
  font-weight: bold;
}

@keyframes hr-shine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .hr-badge--pro { animation: none; }
}

/* ===== 音声UI（TTS / STT） ===== */
.hud__voice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel-dark);
  border: 4px solid var(--border);
}

.btn--voice { flex: 0 0 auto; background: var(--teal); font-size: 14px; padding: 10px 14px; }
.btn--stop { background: var(--ink-dim); }

.hud__voice .hud__note { flex-basis: 100%; }
.hud__voice .hud__note.is-speaking { color: var(--green); }
.hud__voice .hud__note.is-error { color: var(--red); }

.btn--mic { flex: 0 0 auto; background: var(--accent); }

.btn--mic.is-recording {
  background: var(--red);
  color: var(--ink);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

/* 決裁コメント欄 */
.approval__comment { display: grid; gap: 8px; margin-top: 14px; }

.approval__comment-label {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.approval__comment-row { display: flex; flex-wrap: wrap; gap: 10px; }

.approval__comment-input {
  flex: 1 1 240px;
  padding: 12px;
  font-family: var(--font-jp);
  font-size: 15px;
  color: #10152b;
  background: var(--ink);
  border: 4px solid var(--border);
  border-radius: 0;
  resize: vertical;
}

.approval__comment-input:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }

.voice-hint { margin: 0; min-height: 18px; font-size: 13px; color: var(--ink-dim); }
.voice-hint.is-error { color: var(--red); }
.voice-hint.is-detected { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .btn--mic.is-recording { animation: none; }
}

/* 公開ポータル／各ツールへの導線 */
.product__portal {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--accent, #7fe0ff);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.product__portal:hover,
.product__portal:focus-visible {
  filter: brightness(1.25);
}

a.product__name {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ===== 決裁モーダル: 原案 / ピボット案 / 代替案の比較 ===== */
.proposals { margin: 14px 0 6px; }

.proposals__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 8px;
}

.proposal {
  padding: 13px 14px;
  font-family: var(--font-ui);
  background: var(--panel-dark);
  border: 2px solid var(--border);
  border-left-width: 5px;
}

.proposal--original { border-left-color: var(--ink-dim); }
.proposal--pivot { border-left-color: var(--green); }
.proposal--alt { border-left-color: var(--blue); }

/* 「① 原案」「② ピボット案（推奨）」など日本語が入るラベル */
.proposal__label {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.proposal__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.proposal__kw { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--accent); }
.proposal__body { margin: 0 0 6px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.proposal__note { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-dim); }

.proposal__severity {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border: 2px solid var(--border);
}

.proposal__severity--BLOCKER { color: #fff; background: var(--red-dark); border-color: var(--red); }
.proposal__severity--HIGH { color: #241a00; background: var(--accent); }
/* パネル色のままだとカード背景に紛れるので、枠と文字で立たせる */
.proposal__severity--MEDIUM { color: var(--ink); background: var(--panel); border-color: var(--ink-dim); }
.proposal__severity--LOW { color: #04240f; background: var(--green); }

.proposals__hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--panel-dark);
  border-left: 4px solid var(--accent);
}

/* ===== 経営ミーティング ===== */
.hud__meeting { display: flex; flex-direction: column; gap: 4px; }

.btn--meeting {
  background: var(--purple);
  border-color: var(--purple);
  color: #150a26;
  font-weight: bold;
}

.btn--meeting:hover { filter: brightness(1.15); }

/* --- 通知バナー --- */
.meeting-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--panel);
  border: 3px solid var(--accent);
  animation: banner-pulse 1.6s ease-in-out infinite;
  /* 他の帯と左右をそろえる。ここだけ 1233px あった。 */
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
}

.meeting-banner[hidden] { display: none; }
.meeting-banner__icon { font-size: 16px; }
.meeting-banner__text { flex: 1; font-size: 13px; color: var(--ink); }
.meeting-banner__actions { display: flex; gap: 8px; }

@keyframes banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 213, 74, .18); }
}

/* --- モーダル（広め） --- */
.modal__window--wide { max-width: 760px; }

/* --- 議事録 --- */
.minutes { margin-bottom: 14px; }
.minutes__list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.minutes__item {
  padding: 8px 10px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  border-left: 5px solid var(--green);
}

.minutes__title { margin: 0 0 3px; font-size: 13px; font-weight: bold; color: var(--ink); }
.minutes__body { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-dim); }

.minutes__goal {
  display: inline-block; margin-top: 5px; padding: 1px 8px;
  font-size: 13px; color: #04240f; background: var(--green);
}

.minutes__empty { font-size: 13px; color: var(--ink-dim); }

/* --- 対話 --- */
.chat__log {
  display: grid; gap: 8px;
  max-height: 260px; overflow-y: auto;
  padding: 10px; margin-bottom: 10px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.chat__row { display: grid; gap: 3px; }
.chat__row--president { justify-items: end; }

.chat__who {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.chat__bubble {
  margin: 0; padding: 10px 13px;
  max-width: 82%;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.7;
  background: var(--panel); border: 2px solid var(--border);
  color: var(--ink);
}

.chat__row--president .chat__bubble {
  background: #23306b;
  border-color: var(--blue);
}

/* --- 合意案カード --- */
.chat__agreement {
  margin-bottom: 10px; padding: 10px 12px;
  background: var(--panel);
  border: 2px solid var(--green);
}

.chat__agreement[hidden] { display: none; }

.chat__agreement-label {
  margin: 0 0 6px;
  padding: 3px 8px;
  display: inline-block;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-text); background: var(--green-soft);
}

.chat__agreement-title { margin: 0 0 5px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.chat__agreement-body { margin: 0 0 10px; font-family: var(--font-ui); font-size: 14px; line-height: 1.7; color: var(--ink); }

/* --- 入力 --- */
.chat__form { display: flex; gap: 8px; align-items: flex-start; }

.chat__input {
  flex: 1; padding: 10px;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.6;
  color: var(--ink); background: var(--panel-dark);
  border: 2px solid var(--border); resize: vertical;
}

.chat__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.chat__hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-dim); min-height: 14px; }
.chat__hint.is-error { color: var(--red); }

/* --- スケジュール --- */
.schedule { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border); }
.schedule__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }

.schedule__item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-dim);
}

.schedule__item select,
.schedule__item input {
  padding: 4px 6px;
  font-family: var(--font-jp); font-size: 13px;
  color: var(--ink); background: var(--panel-dark);
  border: 2px solid var(--border);
}

@media (max-width: 640px) {
  .chat__bubble { max-width: 100%; }
  .schedule__row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-banner { animation: none; }
}


/* ===== 部署別ナレッジ / フィードバック ===== */
.kb { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border); }

/* 各部署の学習・ナレッジ状況と、受け取ったフィードバック。
   1件ずつ読ませる文章なので、ドット絵フォントではなく読める書体で出す。 */
.kb__list {
  margin: 10px 0 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
}

.kb__item {
  padding: 12px 14px;
  font-family: var(--font-ui);
  background: var(--panel-dark);
  border: 3px solid var(--border);
}

.kb__name {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}

.kb__stats {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.6;
  color: var(--ink-dim);
}

.kb__topics {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.6;
  color: var(--ink-dim);
}

.kb__badge {
  display: inline-block; margin-left: 8px;
  padding: 2px 9px;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 700; line-height: 1.5;
  color: #0a1120; background: var(--accent);
  border: 2px solid var(--border);
}

.kb__feedback {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
}

.kb__fb {
  padding: 10px 12px;
  font-family: var(--font-ui);
  background: var(--panel);
  border: 2px solid var(--border);
  border-left-width: 4px;
}

.kb__fb--avoid { border-left-color: var(--red); }
.kb__fb--insight { border-left-color: var(--green); }

.kb__fb-meta {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.kb__fb-text {
  margin: 4px 0 0;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.65;
  color: var(--ink);
}

/* ===== クラウド同期バナー ===== */
.sync-banner {
  max-width: var(--shell);
  margin: 12px auto 0;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: #10152b;
  background: var(--accent);
  border: 4px solid var(--border);
  box-shadow: 0 0 0 4px var(--panel-dark), 6px 6px 0 0 rgba(0, 0, 0, .5);
}

.sync-banner[hidden] { display: none; }
.sync-banner__icon { font-size: 18px; line-height: 1; }
.sync-banner__text { flex: 1 1 220px; }
.sync-banner.is-synced { color: var(--ink); background: var(--panel); }
.sync-banner.is-error { color: var(--ink); background: var(--red-dark); }
.btn--sync { flex: 0 0 auto; background: var(--ink); }

/* ===========================================================
   読みやすさの底上げ
   -----------------------------------------------------------
   ドット絵フォントは 16px グリッド前提で、日本語を小さく出すと
   グリフが潰れて判読できない。世界観を出す見出し・バッジは
   そのままに、「読ませる文章」だけ本文用フォント・14px・
   行間 1.6 以上へ寄せる。
   =========================================================== */
.detail__text,
.detail__list li,
.approval__idea,
.approval__title,
.minutes__body,
.minutes__title,
.activity__outcome,
.product__meta,
.product__path,
.manager-comments__verdict,
.meeting-banner__text,
.chat__hint,
.voice-hint,
.kb__badge,
.idea-history__manager,
.room__hr {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}

/* 補助的な注記は本文よりわずかに小さくてよいが、13px を下回らせない */
.chat__hint,
.voice-hint,
.product__path {
  font-size: 13px;
  line-height: 1.6;
}

/* 文字色が背景に沈まないようにする（本文はコントラストを優先） */
.detail__text,
.detail__list li,
.minutes__body,
.activity__outcome {
  color: var(--ink);
}

/* --- ログ表示エリア：余白とスクロール量を広げる --- */
.chat__log {
  /* 260px 固定だと2〜3往復で見切れる。画面の高さに追従させる。 */
  max-height: min(48vh, 460px);
  padding: 14px;
  scroll-behavior: smooth;
}

.detail__list {
  gap: 10px;
}

.detail__list li {
  padding: 10px 12px;
}

.minutes__list,
.kb__list,
.kb__feedback {
  max-height: min(34vh, 320px);
  overflow-y: auto;
  padding-right: 6px;
}

/* ===========================================================
   ミーティングの入力欄
   -----------------------------------------------------------
   1行分しか見えず、長文を書くと何を書いたか分からなくなっていた。
   入力欄を伸ばし、送信ボタンは幅を固定して迷子にしない。
   =========================================================== */
.chat__form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.chat__input {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.7;
}

.chat__form .btn--attach {
  flex: 0 0 48px;
  align-self: flex-start;
}

.chat__form .btn--meeting {
  flex: 0 0 108px;
  align-self: stretch;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .chat__form { flex-wrap: wrap; }
  .chat__input { flex-basis: 100%; min-height: 108px; }
  .chat__form .btn--meeting { flex: 1 1 auto; }
}

/* ===========================================================
   AIの脳内（学習データ・蓄積ナレッジ・ポートフォリオ）
   =========================================================== */
.brain__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.brain__tab {
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-dim);
  background: var(--panel-dark);
  border: 2px solid var(--border);
  cursor: pointer;
}

.brain__tab:hover { color: var(--ink); }
.brain__tab[aria-selected="true"] {
  color: #10152b;
  background: var(--accent);
  border-color: var(--accent-dark);
}

.brain__panel[hidden] { display: none; }

.brain__note {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--panel-dark);
  border-left: 4px solid var(--accent);
}

.brain__group { margin-bottom: 18px; }

.brain__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.brain__list li {
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.brain__tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #10152b;
  background: var(--teal);
}

.brain__score { color: var(--ink-dim); }

/* カテゴリ分布の棒グラフ */
.brain__bars { display: grid; gap: 8px; }

.brain__bar {
  display: grid;
  grid-template-columns: 12em 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 14px;
}

.brain__bar-track {
  height: 14px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.brain__bar-fill {
  height: 100%;
  background: var(--accent);
}

@media (max-width: 640px) {
  .brain__bar { grid-template-columns: 8em 1fr auto; }
}

/* ===========================================================
   サイト監査・改善部 と 社長室
   =========================================================== */

/* 健全性と自律修復の件数。数字が主役なので等幅で読ませる */
.room__health {
  margin: 0;
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(5, 7, 15, 0.55);
  border-left: 4px solid var(--green);
}

.room__health.is-alert { border-left-color: var(--red); }

/* 2人が並ぶ部屋は、机を挟んで左右に配置する */
.room--audit .room__stage { gap: 36px; }

/* --- 社長室 ---
   社長キャラは置かない（画面の向こうにいる本人のため）。
   代わりに、決裁待ちの件数を映す掲示板を据える。 */
.room__stage--desk {
  min-height: 150px;
  align-items: center;
  gap: 24px;
}

.president-board {
  display: grid;
  gap: 4px;
  padding: 10px 16px;
  text-align: center;
  background: var(--panel-dark);
  border: 4px solid var(--border);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
}

.president-board__label {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink-dim);
}

.president-board__value {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border);
}

.president-board.is-alert .president-board__value { color: var(--red); }

/* ===========================================================
   社長室モーダルの幅
   -----------------------------------------------------------
   決裁パネルには企画・リスク評価・3連ボタン・議論チャットが
   縦に積まれる。680px では中身が押し込まれて横スクロールが出ていた。
   画面幅に追従させ、横方向には絶対にはみ出させない。
   後段のメディアクエリに勝つ必要があるため !important を付ける。
   =========================================================== */
.modal__window,
.modal__window--wide {
  width: min(94vw, 880px) !important;
  max-width: 900px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 中の要素が枠を押し広げないようにする */
.modal__window *,
.modal__window *::before,
.modal__window *::after { box-sizing: border-box; }

.modal__body,
.modal__body > * {
  max-width: 100%;
}

/* 長い語（URL・英単語）で横に伸びるのを防ぐ */
.modal__body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 表やコードなど、どうしても広いものは中でだけ横に流す */
.modal__body pre,
.modal__body table,
.idea-history__scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* --- 3連決裁ボタン（PROCEED / PIVOT / REJECT）を均等に --- */
.approval__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.approval__actions .btn {
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* 3つ並べると文字が潰れる幅では縦に積む */
  .approval__actions { grid-template-columns: 1fr; }
}

/* --- カード・懸念事項ボックスの幅をそろえる --- */
.approval__idea,
.approval__recommend,
.manager-comments,
.manager-comments__item,
.detail__list li,
.brain__list li,
.chat__bubble {
  width: 100%;
  box-sizing: border-box;
}

/* ===========================================================
   オート運営モードのスイッチ
   =========================================================== */
.autopilot {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  border-left: 4px solid var(--accent);
}

.autopilot__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}

/* 見た目だけのスイッチ。実体はチェックボックス（キーボードでも操作できる） */
.autopilot__switch {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 30px;
  flex: 0 0 58px;
  cursor: pointer;
}

.autopilot__switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.autopilot__slider {
  position: absolute;
  inset: 0;
  background: var(--panel);
  border: 3px solid var(--border);
  transition: background 0.15s steps(2);
  pointer-events: none;
}

.autopilot__slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--ink-dim);
  border: 2px solid var(--border);
  transition: transform 0.15s steps(2);
}

.autopilot__switch input:checked + .autopilot__slider { background: var(--green-dark); }
.autopilot__switch input:checked + .autopilot__slider::before {
  transform: translateX(26px);
  background: var(--green);
}

.autopilot__switch input:focus-visible + .autopilot__slider {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.autopilot__state {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.autopilot__note {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* 何が自動化されないかは、目立たせて読ませる */
.autopilot__guards li {
  border-left: 4px solid var(--red);
  font-size: 13px;
}

/* --- 決裁前の議論 --- */
.plan-chat { margin: 16px 0; }
.plan-chat .chat__log { max-height: min(32vh, 300px); margin-bottom: 10px; }
.plan-chat .chat__input { min-height: 76px; }
.plan-chat .btn--meeting { flex: 0 0 108px; align-self: stretch; }

/* 決裁コメント欄・音声ボタン・懸念カードの幅をそろえる。
   長い語がそのまま伸びて枠を押し広げるのを防ぐ。 */
.approval__comment,
.approval__comment-row,
.approval__comment-input,
.approval__comment-row .btn,
.manager-comments__body,
.manager-comments__risks,
.approval__origin {
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

/* 音声ボタンだけは幅を固定して、入力欄の隣に収める */
.approval__comment-row { display: flex; gap: 10px; align-items: flex-start; }
.approval__comment-row .approval__comment-input { flex: 1 1 auto; min-width: 0; }
.approval__comment-row .btn--mic { flex: 0 0 132px; width: 132px; }

@media (max-width: 560px) {
  .approval__comment-row { flex-wrap: wrap; }
  .approval__comment-row .btn--mic { flex: 1 1 auto; width: 100%; }
}

/* ===========================================================
   日報
   =========================================================== */
.report { margin: 18px 0; }

.report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.report__picker {
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.report__picker[hidden] { display: none; }

.report__verdict {
  margin: 8px 0 12px;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-dark);
  border-left: 4px solid var(--ink-dim);
}

/* 一目で状況が分かるよう、評価ごとに色を変える */
.report__verdict[data-verdict="順調"] { border-left-color: var(--green); }
.report__verdict[data-verdict="前進（課題あり）"] { border-left-color: var(--accent); }
.report__verdict[data-verdict="停滞"] { border-left-color: var(--red); }

.report__body .detail__label { margin-top: 14px; }
.report__body .detail__list { max-height: none; }

/* ===========================================================
   オート運営モードの切り替え（モーダルのヘッダー）
   -----------------------------------------------------------
   決裁の直前に必ず目へ入る位置へ置く。
   「今このモードで動いているか」を見落とすと、
   知らないうちに自動で公開まで進んでしまう。
   =========================================================== */
.modal__head { display: flex; align-items: center; gap: 12px; }
.modal__head .modal__title { flex: 1 1 auto; min-width: 0; }
.modal__head-actions { flex: 0 1 auto; }
.modal__head-actions[hidden] { display: none; }

.autopilot-pill {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.autopilot-pill__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-dark);
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.autopilot-pill__text { white-space: nowrap; }

/* 実体はチェックボックス（キーボードでも操作できる）。見た目だけ隠す。 */
.autopilot-pill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.autopilot-pill__slider {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 22px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s steps(2);
}

.autopilot-pill__slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--ink-dim);
  border-radius: 999px;
  transition: transform 0.15s steps(2);
}

.autopilot-pill__input:checked ~ .autopilot-pill__slider { background: var(--green-dark); }
.autopilot-pill__input:checked ~ .autopilot-pill__slider::before {
  transform: translateX(22px);
  background: var(--green);
}

.autopilot-pill__input:focus-visible ~ .autopilot-pill__slider {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.autopilot-pill__state {
  min-width: 3em;
  font-family: var(--font-en);
  font-size: 13px;
  text-align: center;
  color: var(--ink-dim);
}

.autopilot-pill.is-on .autopilot-pill__state,
.autopilot-pill__input:checked ~ .autopilot-pill__state { color: var(--green); }

.autopilot-pill__note {
  margin: 0;
  max-width: 34em;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  text-align: right;
}

@media (max-width: 640px) {
  .modal__head { flex-wrap: wrap; }
  .autopilot-pill { justify-items: start; }
  .autopilot-pill__note { text-align: left; }
  .autopilot-pill__text { white-space: normal; }
}

/* 会話から起こした処理が動いていることを示す */
.chat__hint.is-running {
  color: var(--green);
  font-weight: 700;
}

/* ===========================================================
   進捗バー
   -----------------------------------------------------------
   企画20% → 開発50% → レビュー70% → 法務85% → 完了100%。
   いま何割まで来たかを、数字とバーの両方で出す。
   =========================================================== */
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.progress[hidden] { display: none; }

.progress__label {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.progress__track {
  flex: 1 1 auto;
  min-width: 60px;
  height: 12px;
  background: #000;
  border: 2px solid var(--border);
  padding: 1px;
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(
    90deg, var(--green) 0 6px, var(--green-dark) 6px 8px);
  /* 段階的に伸ばして、ドット絵の質感に合わせる */
  transition: width 0.6s steps(10);
}

.progress__value {
  flex: 0 0 auto;
  min-width: 3.2em;
  font-family: var(--font-en);
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}

.progress--room { margin-top: 4px; }
.progress--room .progress__label { font-size: 13px; }

/* 部署ごとの指標の内訳（バッジの2段目） */
.hr-badge--detail {
  color: var(--ink-dim);
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .progress__fill { transition: none; }
}

/* ===========================================================
   モデル名バッジ
   -----------------------------------------------------------
   何で動いているかを隠さず、識別子をそのまま出す。
   名前が伸びてもカードの中で折り返さないよう、字送りを詰めて
   1行に収める（折り返すと部署カードの高さが揃わなくなる）。
   =========================================================== */
.hr-badge--model {
  font-family: var(--font-ui);
  /* 13px は本文の下限。これ以上小さくすると日本語UIとの整合が崩れる。
     長いモデル名は letter-spacing の詰めと省略で収める。 */
  font-size: 13px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 上位モデルは目立たせるが、点滅はさせない（常時表示なので目障りになる） */
.hr-badge--model.hr-badge--pro { animation: none; }

.room__hr {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ===========================================================
   サイト監査・改善部のパネル（実画面の計測 / 利用者の声）
   =========================================================== */
.audit { display: flex; flex-direction: column; gap: 12px; }

.audit__digest {
  padding: 12px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.audit__digest-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* 緊急度。色だけで伝えず、必ず「高・中・低」の文字も出す。 */
.urgency {
  padding: 3px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #10152b;
  background: var(--ink-dim);
  border: 2px solid var(--border);
  white-space: nowrap;
}
.urgency--high { background: var(--red); }
.urgency--medium { background: var(--accent); }
.urgency--low { background: var(--green); }

.audit__by { font-size: 13px; color: var(--ink-dim); }

.audit__summary,
.audit__next {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 6px;
}
.audit__next { color: var(--accent); }

.audit__reasons,
.audit__findings { list-style: none; margin: 0; padding: 0; }

.audit__reasons li {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  padding-left: 14px;
  position: relative;
}
.audit__reasons li::before { content: "・"; position: absolute; left: 0; }

/* --- タブ --- */
.audit__tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.audit__tab {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 9px 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
  background: var(--panel-dark);
  border: 2px solid var(--border);
  cursor: pointer;
}
.audit__tab:hover { color: var(--ink); }
.audit__tab.is-active {
  color: #10152b;
  background: var(--accent);
  font-weight: bold;
}

.audit__body { display: flex; flex-direction: column; gap: 10px; }

/* --- 一覧 --- */
.audit__finding {
  padding: 9px 10px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  margin-bottom: 6px;
}

.audit__finding-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.audit__chip {
  padding: 2px 7px;
  font-size: 13px;
  color: #10152b;
  background: var(--ink-dim);
  white-space: nowrap;
}
.audit__chip--major { background: var(--red); }
.audit__chip--minor { background: var(--accent); }
.audit__chip--count { background: var(--panel); color: var(--ink); }
.audit__chip--ticket.is-open { background: var(--panel); color: var(--ink); }
.audit__chip--ticket.is-filed { background: var(--green); }
.audit__chip--ticket.is-fixed { background: var(--ink-dim); }

.audit__where {
  font-size: 13px;
  color: var(--ink-dim);
  word-break: break-all;
}

.audit__finding-detail,
.audit__finding-fix {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}
.audit__finding-fix { color: var(--ink-dim); margin-top: 4px; }

.audit__warn,
.audit__empty,
.audit__loading {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  padding: 9px 10px;
  border: 2px dashed var(--border);
  margin: 0;
}
.audit__warn { color: var(--accent); }
.audit__empty, .audit__loading { color: var(--ink-dim); }

/* ===========================================================
   案件の採用配分コントローラー
   =========================================================== */
.ratio {
  padding: 12px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ratio__status,
.ratio__proposal-value,
.ratio__note-text {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.ratio__proposal { border-left: 3px solid var(--accent); padding-left: 9px; }
.ratio__proposal-label { font-size: 13px; color: var(--ink-dim); margin: 0 0 3px; }
.ratio__proposal-value { color: var(--accent); font-weight: bold; }

.ratio__reasons { list-style: none; margin: 5px 0 0; padding: 0; }
.ratio__reasons li {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  padding-left: 14px;
  position: relative;
}
.ratio__reasons li::before { content: "・"; position: absolute; left: 0; }

/* 数値とスライダーの両方を出す。スライダーは大まかに、
   数値は「5:4:1 にしたい」と決まっているときに速い。 */
.ratio__row {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr 64px 48px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 2px solid var(--border);
}

.ratio__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: bold;
}

.ratio__slider { width: 100%; min-width: 80px; }

.ratio__number {
  width: 100%;
  padding: 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--border);
}

.ratio__share {
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: right;
  color: var(--accent);
}

.ratio__note-text {
  grid-column: 1 / -1;
  color: var(--ink-dim);
}

.ratio__note-label { font-size: 13px; color: var(--ink-dim); }

.ratio__note {
  width: 100%;
  box-sizing: border-box;
  padding: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--border);
  resize: vertical;
}

.ratio__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 狭い画面では1行に詰め込まず、説明を下へ落とす */
@media (max-width: 560px) {
  .ratio__row { grid-template-columns: 1fr 60px 44px; }
  .ratio__label { grid-column: 1 / -1; }
}

/* ===========================================================
   広報部：手で出すための一覧
   -----------------------------------------------------------
   X の API は有料枠が要る。文面をそのまま読めて、コピーして
   持ち出せることを優先する。
   =========================================================== */
.pr__body { display: flex; flex-direction: column; gap: 10px; }

/* ストック型SNS投稿（自律グロース体制）。上のフロー一覧とは区切って見せる */
.pr-stock { margin-top: 20px; padding-top: 16px; border-top: 2px dashed var(--border); }

.pr__card {
  padding: 11px 12px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 投稿済みの案。未投稿のものと一目で見分けられるよう、色を落とす */
.pr__card.is-posted { opacity: 0.55; filter: grayscale(0.4); }

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

.pr__name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: bold;
}

.pr__count {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
}
/* 超えているものは、押す前に気づけるようにする */
.pr__count.is-over { color: var(--red); font-weight: bold; }

/* 改行をそのまま見せる。投稿したときの見え方と一致させるため。 */
.pr__text {
  margin: 0;
  padding: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  overflow-x: auto;
}

.pr__meta,
.pr__warn {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
}
.pr__meta { color: var(--ink-dim); }
.pr__warn { color: var(--red); }

.pr__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* リンクをボタンと同じ見た目に揃える */
.pr__open {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.btn.is-done { background: var(--green); color: #10152b; }


}

/* ===========================================================
   経営確認：収支の推移
   -----------------------------------------------------------
   描画ライブラリは入れない。棒を並べるだけなら素のdivで足りる。
   =========================================================== */
.trend { display: flex; flex-direction: column; gap: 8px; }

.trend__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: 10px 10px 0;
  background: var(--panel-dark);
  border: 2px solid var(--border);
  overflow-x: auto;
}

.trend__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 0 34px;
  height: 100%;
}

.trend__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
  width: 100%;
  justify-content: center;
}

.trend__bar {
  width: 10px;
  min-height: 1px;
  border: 1px solid var(--border);
}
.trend__bar--revenue { background: var(--green); }
.trend__bar--cost { background: var(--red); }

.trend__label {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.trend__legend {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-dim);
}

@media (prefers-reduced-motion: reduce) {
}

/* ===========================================================
   日報：日付の切り替えと、部署ごとの費用
   =========================================================== */
.daypick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.daypick__select {
  flex: 1 1 160px;
  padding: 6px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--border);
}

.costs {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
  background: var(--panel-dark);
  border: 2px solid var(--border);
}

.costs th,
.costs td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  line-height: 1.6;
}

.costs th {
  color: var(--ink-dim);
  font-weight: bold;
  white-space: nowrap;
}

/* 数字は右へ揃える。桁が揃わないと大小を読み違える。 */
.costs__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.costs__total td { border-bottom: none; font-weight: bold; color: var(--accent); }

/* 稼働ゼロの部署。行は消さずに残し、動いた部署と濃さで分ける。 */
.costs__idle td { color: var(--ink-dim); }

/* 動かなかった理由。行の直下へ小さく添える。 */
.costs__why {
  padding-top: 0;
  /* 12px にすると小さすぎる。社内の下限は 13px。 */
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.costs__note {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* --- 広報部：推奨投稿日時 --- */
.pr__slot {
  margin: 0;
  padding: 6px 9px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.6;
  color: #10152b;
  background: var(--accent);
  border: 2px solid var(--border);
}
/* 過ぎたものは色を変える。同じ見た目だと、出し時を逃したことに気づけない。 */
.pr__slot.is-stale { color: var(--ink); background: var(--red-dark); }

.pr__slot-why {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}