@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light dark;
  /* サブアクセント(リンク・情報バナー等、メインコンテンツ側で使用)。 */
  --accent: #1f3a52;
  --accent-bg: #1f3a521f;
  --accent-bg-hover: #1f3a5214;
  /* メインアクセント(登録・実行・送信等の主要ボタン、サイドバー選択中項目)。
     VANTAGEデザインシステムと同じアクアグリーン。明るい色なので、上に乗る
     文字は白ではなく専用の濃色トークン(--accent-primary-text)を使う。 */
  --accent-primary: #3fe8c4;
  --accent-primary-text: #04211c;
  /* サイドバーの権限限定バッジ(role='admin'向け「A」)。executive系バッジ(--accent-primary)と
     区別するため別系統の色にする。 */
  --accent-admin: #4f8fc9;
  /* サイドバーの権限限定バッジ(商品マスタ管理向け「M」)。E・Aのバッジと区別するためアンバー系にする。 */
  --accent-product-master: #e8b04f;
  /* サイドバーの権限限定バッジ(全社目標向け「P」)。既存バッジと区別するためバイオレット系にする。 */
  --accent-company-goal: #9b6fd6;
  /* サイドバーの権限限定バッジ(部署方針向け「M」)。商品マスタ管理と同じ「manager」の意味のMなので同色にする。 */
  --accent-dept-policy: var(--accent-product-master);
  /* サイドバーの「入力可」バッジ(Narrative/Content Log向け「+」)。権限限定バッジ(E/A/M/P)とは
     意味が違う(誰でも使えるが、閲覧専用ではなく自分で投稿・記入できるページだという印)ため、
     既存のどの系統とも被らないローズ系の色にする。 */
  --accent-input: #e2718f;
  /* サイドバー(ネイビー背景・白文字)。 */
  --sidebar-bg: #1f3a52;
  --sidebar-border: #ede6dc;
  --sidebar-text: #ffffff;
  --sidebar-text-mute: rgba(255, 255, 255, 0.55);
  /* メインコンテンツの本文テキスト色。 */
  --body-text: #4a4a45;
  /* メインコンテンツ領域のクリーム色(Figmaデザインの配色に統一)。 */
  --content-bg: #fdfbf7;
  /* セクション見出しの背景色・文字色。以前は半透明(rgba)にしていたため、
     不透明な白いカードの上では綺麗な薄ミントに見えても、写真+濃紺ガラスの
     カード(ホーム・Philosophy等)の上では下地と混ざって濁った灰緑色に見えて
     しまっていた。下地に依存しないよう不透明な薄ミントに固定する。 */
  /* 見出しの配色。以前はミントグリーン(#d7f5ec/#0a6b57)だったが、サイドバーの
     ネイビー(--accent/--sidebar-bg: #1f3a52)と統一感を出すため、薄ネイビーの
     ピル+同じ濃ネイビーの文字に変更(コントラスト比9.3:1)。 */
  --heading-bg: #dce6ee;
  --heading-text: #1f3a52;
  /* 表の合計・集計行。 */
  --total-bg: #e8edf1;

  /* ============================================================
     VANTAGEデザインシステムの「クリアガラス」カード用トークン。
     プリセット(data-bg)ごとに上書きされる。既定値はシンプル・ダーク
     (ログイン画面と同じ写真)を想定した値。
     ============================================================ */
  --card: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.18);
  --card-border-hi: rgba(255,255,255,0.3);
  --card-blur: none;
  --ink-mute: #8a8a80;
}
/* 見出し以外の本文文字色は、写真の明るさに応じてbg-picker.jsが
   body.ink-light / body.ink-dark を自動で切り替える(VANTAGEデザイン
   システムのautoAdjustInkと同じ考え方)。 */
body.ink-light {
  --body-text: #eef1f6;
  --ink-mute: #d3d8e2;
}
body.ink-dark {
  --body-text: #2b2a25;
  /* グレー系の中間色背景でも霞まないよう、通常のミュート文字より
     さらに濃くしてコントラストを確保する。 */
  --ink-mute: #45443c;
}
body {
  font-family: "Rethink Sans", -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  /* ログイン画面と同じ背景写真をログイン後の画面にも敷く。app-main自体は下記の通り
     従来通りクリーム色の不透明背景を持つため、フォームの見た目には影響しない。 */
  background: #0d1420 url('/login-bg.jpg') center center / cover no-repeat fixed;
}

/* 表・入力フォーム中心の業務画面(body.work-screen)も、Culture/History/理念ナビと同じ作りに統一する:
   背景は共有の背景ピッカー(表示設定)の選択に従い、その上に白いシート(.app-main)を1枚載せて
   中身を入れる。シートの中の文字は常に濃色固定(背景の明暗に左右されない)。 */
body.work-screen .app-main {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 40px -12px rgba(44,37,35,.18);
  margin: 24px auto;
  padding: 28px 28px 48px;
  color: #211f1c;
  --body-text: #211f1c;
  --ink-mute: #5f574b;
}
@media (max-width: 720px) {
  body.work-screen .app-main { margin: 0; width: 100%; border-radius: 0; padding: 20px 16px 48px; }
}
@media print {
  body.work-screen .app-main { background: none; box-shadow: none; border-radius: 0; margin: 0; }
}
/* 「クリアガラス」系カード(写真の上に薄い白を重ねる前提)は、写真がない業務画面では
   縁がほぼ見えず、カードの境界が分かりにくくなる。背景を不透明な白に切り替えて
   影(box-shadow)だけでカードの浮き上がりを表現する(色付きの強調枠を持つ
   .exec-message-section・.dept-policy-section・.deleted-sectionはそれぞれの色を
   保つため対象外)。 */
/* グループごとの色分け(淡い色。サイドバーのグループと対応): 見出し・表の見出し・シート上端の細い帯の色を変える。
   わたしのMBO=青 / 閲覧=緑 / 分析=黄 / 管理=紫。 */
body.grp-policy   { --heading-bg: #e6e0f1; --heading-text: #3d3160; --total-bg: #eeeaf5; --grp-accent: #b9aedb; } /* 藤(ふじ) */
body.grp-mbo      { --heading-bg: #dce6ee; --heading-text: #1f3a52; --total-bg: #e8edf1; --grp-accent: #9db8cf; }
body.grp-view     { --heading-bg: #dcebe0; --heading-text: #24472f; --total-bg: #e7f0e9; --grp-accent: #9fcbab; }
body.grp-analysis { --heading-bg: #d3ebe8; --heading-text: #1b4b48; --total-bg: #e3f1ef; --grp-accent: #86c4bd; } /* 青磁(せいじ) */
body.grp-admin    { --heading-bg: #e5efc5; --heading-text: #3f4d12; --total-bg: #eff4dc; --grp-accent: #b5c96a; } /* 若草(わかくさ) */
/* 4グループ(わたしのMBO/閲覧/分析/管理)の本文書体: 少しやわらかいゼン角ゴシック(HistoryやCultureと同じ系統)。
   サイドバーは全画面共通のまま変えない。 */
body.work-screen[class*="grp-"] .app-main,
body.work-screen[class*="grp-"] .app-main button,
body.work-screen[class*="grp-"] .app-main input,
body.work-screen[class*="grp-"] .app-main select,
body.work-screen[class*="grp-"] .app-main textarea {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
body.work-screen[class*="grp-"] .app-main { border-top: 5px solid var(--grp-accent); }

body.work-screen section:not(.exec-message-section):not(.dept-policy-section):not(.deleted-section),
body.work-screen .auth-status-bar,
body.work-screen .sheet-card,
body.work-screen .dept-card,
body.work-screen .goal-card,
body.work-screen .filter-bar,
body.work-screen .preset-card,
body.work-screen .total-score-box,
body.work-screen .eval-block,
body.work-screen .rn-card,
body.work-screen .rn-info-card,
body.work-screen .pdca-create-box,
body.work-screen .ph-sub-card {
  background-color: #faf8f3;
  background-image: none;
  /* 元の縁・影は「写真に浮かぶガラス板」用の非対称ボーダー+大きくぼかした
     暗い影(box-shadow)で、不透明な地の上では縁がにじんだような不自然な
     ぼかしに見えてしまう。業務画面では通常のフラットなカード用の
     薄い均一ボーダー+右下だけに落ちる単一の影に固定する
     (左右上下すべてに影がにじむと光源が定まらず不自然に見えるため、
     オフセットを右下方向だけに寄せ、ぼかしも小さく抑える)。 */
  border: 1px solid #e5e0d4;
  box-shadow: none;
  /* section/sheet-card等の既定(濃紺ガラス+白文字固定)を、写真のない
     不透明な業務画面の地に持ち込むと白文字が白い地に埋もれてしまうため、
     ここで明示的に濃色文字にリセットする。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #2a2a25;
  text-shadow: none;
  --body-text: #2a2a25;
  --ink-mute: #55524a;
}

/* --- 業務画面のボタン表示(案1 ライン): 白地+左の色帯。載せると少し浮き、矢印が右へ滑る。
   小さなボタンは枠線のみで、載せるとグループ色で塗られる。主ボタン(.btn=ミント色)は従来のまま。 --- */
body.work-screen .btn.secondary,
body.work-screen button.secondary:not(.danger) {
  background: transparent;
  color: var(--heading-text);
  border: 1px solid var(--grp-accent, var(--heading-text));
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
body.work-screen .btn.secondary.small { padding: 3px 12px; }
body.work-screen .btn.secondary:hover:not(:disabled),
body.work-screen button.secondary:not(.danger):hover:not(:disabled) {
  background: var(--heading-text);
  color: #fff;
  border-color: var(--heading-text);
}
body.work-screen .btn.secondary:focus-visible,
body.work-screen button.secondary:focus-visible { outline: 3px solid var(--heading-text); outline-offset: 2px; }
body.work-screen .btn.danger.secondary,
body.work-screen button.secondary.danger { background: transparent; color: #a2433a; border: 1px solid #e3b3ad; }
body.work-screen .btn.danger.secondary:hover:not(:disabled),
body.work-screen button.secondary.danger:hover:not(:disabled) { background: #a2433a; color: #fff; border-color: #a2433a; }
/* ログアウトはサイドバーに一本化。全画面でページ内のログアウトボタンを出さない。 */
button.btn[id$="logout-btn"] { display: none; }

body.work-screen .dept-card,
body.work-screen .preset-card {
  position: relative;
  background-color: #fff;
  background-image: none;
  color: #211f1c;
  --body-text: #211f1c;
  --ink-mute: #5f574b;
  border: 1px solid #e5e0d4;
  border-left: 4px solid var(--grp-accent, var(--heading-text));
  border-radius: 8px;
  padding-right: 44px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
body.work-screen .dept-card::after,
body.work-screen .preset-card::after {
  content: "\2192";
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  color: var(--heading-text);
  opacity: .45;
  line-height: 1;
  transition: right .2s, opacity .2s;
}
body.work-screen .dept-card:hover,
body.work-screen .preset-card:hover,
body.work-screen .preset-card.active {
  border-color: var(--heading-text);
  background-image: none;
  box-shadow: 0 8px 18px -10px rgba(33,31,28,.25);
  transform: translateY(-2px);
}
body.work-screen .dept-card:hover::after,
body.work-screen .preset-card:hover::after,
body.work-screen .preset-card.active::after { right: 10px; opacity: 1; }

/* ================================================================
   左サイドバーナビゲーション
   ================================================================ */
.app-layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.sidebar {
  flex-shrink: 0;
  width: 232px;
  box-sizing: border-box;
  padding: 20px 12px 24px;
  /* 背景写真の上にネイビーの半透明レイヤーを重ねる。
     (position:sticky + backdrop-filterの組み合わせは一部ブラウザで描画が崩れるため、
     ぼかしは使わずrgba重ねのみで質感を出す。) */
  background: linear-gradient(165deg, rgba(31,58,82,0.42), rgba(20,38,56,0.32));
  color: var(--sidebar-text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  border-right: 1px solid rgba(255,255,255,0.14);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0 10px;
  margin-bottom: 20px;
  white-space: nowrap;
}
.sidebar-brand-sub { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.75; margin-top: 3px; white-space: normal; line-height: 1.4; }
.sidebar-brand a {
  color: inherit;
  text-decoration: none;
}
/* ハンバーガーボタン(nav-guard.jsが挿入)はスマホ幅(720px以下)専用。
   デスクトップでは常に非表示にする(表示は下の@mediaで上書き)。 */
#sidebar-toggle-btn { display: none; }

/* ================================================================
   背景ピッカー(bg-picker.jsが挿入するUI)
   ================================================================ */
.bg-picker-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(13,20,32,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bg-group { display: flex; flex-direction: column; gap: 2px; }
.bg-group-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bg-picker-row { display: flex; flex-wrap: nowrap; gap: 3px; }
.bg-picker-row span {
  font-size: 0.62rem;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.bg-picker-row span:hover { background: rgba(255,255,255,0.18); }
.bg-picker-row span.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-text);
  font-weight: 600;
}
.bg-reset {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.bg-hc-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.bg-hc-toggle:hover { background: rgba(255,255,255,0.20); }

@media (max-width: 720px) {
  .bg-picker-panel { position: static; margin: 8px; flex-wrap: wrap; }
}

/* サイドバー下部「表示設定」内へ移動した背景ピッカー(nav-guard.jsのmoveBgPickerIntoSidebar参照)。
   画面右上への固定配置(position:fixed)を解除し、サイドバーの他グループと馴染む縦積みの
   カード風パネルに変える。 */
.sidebar-display-settings .bg-picker-panel {
  position: static;
  z-index: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sidebar-display-settings .bg-picker-row { flex-wrap: wrap; }

/* 見やすさモード: サイドバーの不透明度・コントラストを上げて読みやすくする */
body.hc-mode .sidebar {
  background: linear-gradient(165deg, rgba(20,38,56,0.94), rgba(13,24,36,0.92));
}

.sidebar-group { margin-bottom: 18px; }
.sidebar-group:last-child { margin-bottom: 0; }
.sidebar-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sidebar-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px;
  margin-bottom: 6px;
}

/* 理念グループ内の時間軸小見出し(過去/現在/未来)。グループ見出しより一段小さく、
   インデントして「同じグループ内の区切り」であることを示す。英語の時間軸ラベルは
   付けない(Narrativeが既に「言葉の星空」という独自表示名を持つため、二重表記を避ける)。 */
.sidebar-subgroup-title {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--sidebar-text-mute);
  opacity: 0.65;
  letter-spacing: 0.08em;
  padding: 0 10px;
  margin: 10px 0 4px;
}
.sidebar-subgroup-title:first-of-type { margin-top: 2px; }

.sidebar a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  font-size: 0.86rem;
  margin-bottom: 1px;
}
.sidebar a:hover { background: rgba(255, 255, 255, 0.1); }
.sidebar-logout-group { margin-top: 4px; }
.sidebar-logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  opacity: .8;
  cursor: pointer;
}
.sidebar-logout-btn:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }
.nav-icon { flex-shrink: 0; }
.nav-nowrap { white-space: nowrap; }
/* メインアイコンの右下に重ねる、権限限定項目を示す通知バッジ風のリング(1文字入り)。
   「E」(is_executive/admin/is_presidentのいずれか)はアクセントカラー、「A」(role='admin')は
   区別のため別系統の色にする。背景はサイドバー地色にして、アイコンとの重なりをくり抜き風に見せる。 */
.nav-icon-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.nav-restricted-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
}
.nav-restricted-badge.badge-executive { border: 1.5px solid var(--accent-primary); color: var(--accent-primary); }
.nav-restricted-badge.badge-admin { border: 1.5px solid var(--accent-admin); color: var(--accent-admin); }
.nav-restricted-badge.badge-product-master { border: 1.5px solid var(--accent-product-master); color: var(--accent-product-master); }
.nav-restricted-badge.badge-company-goal { border: 1.5px solid var(--accent-company-goal); color: var(--accent-company-goal); }
.nav-restricted-badge.badge-dept-policy { border: 1.5px solid var(--accent-dept-policy); color: var(--accent-dept-policy); }
.nav-restricted-badge.badge-input { border: 1.5px solid var(--accent-input); color: var(--accent-input); }
.sidebar a.current {
  background: var(--accent-primary);
  border-left-color: var(--accent-primary);
  color: var(--accent-primary-text);
  font-weight: 600;
}
.sidebar a.current .nav-restricted-badge { background: var(--accent-primary); }
/* 新しく追加したメニュー項目(ことのは帖など)の右端に付ける「追加」の小さなバッジ。 */
.nav-new-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--accent-primary);
  color: var(--accent-primary-text);
  text-shadow: none;
}
.sidebar a.current .nav-new-badge { background: var(--accent-primary-text); color: var(--accent-primary); }

.app-main {
  flex: 1;
  min-width: 0;
  max-width: 980px;
  /* サイドバー以外の余白内で中央に配置する。 */
  margin: 0 auto;
  padding: 24px 24px 64px;
  box-sizing: border-box;
  /* 背景写真を見せるため不透明背景は持たせない。文字色のみ明示指定する。 */
  color: var(--body-text);
}

/* 狭い画面ではサイドバーを上部の横スクロールバーへ切り替える。 */
@media (max-width: 720px) {
  /* 以前は17項目を1行に並べて横スクロールさせていたが、目的の項目を探すのに
     何度も横にスワイプする必要があり分かりにくかった。ブランド行+ハンバーガー
     ボタンだけの帯に折りたたみ、タップで全項目を縦に展開するアコーディオン式に
     変更する(ボタンの生成・開閉はnav-guard.jsのsetupMobileNavToggle参照)。 */
  .app-layout { flex-direction: column; align-items: stretch; }
  .app-main { width: 100%; box-sizing: border-box; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
    padding: 0;
    overflow: visible;
  }
  .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 0;
  }
  #sidebar-toggle-btn {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: inherit;
  }
  #sidebar-toggle-btn span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
  .sidebar-group { display: none; padding: 0 12px; }
  .sidebar.mobile-open .sidebar-group { display: block; }
  .sidebar.mobile-open { padding-bottom: 12px; }
  .sidebar-group-title { padding: 0; margin-bottom: 6px; }
  .sidebar a { padding: 8px 10px; border-left: none; border-bottom: none; border-radius: 6px; }
  .sidebar a.current { border-left-color: transparent; border-bottom-color: transparent; background: var(--accent-primary); }
  .app-main { max-width: 100%; padding: 20px 16px 48px; }
}

h1 { font-size: 1.4rem; margin-bottom: 4px; }
p.sub { color: var(--ink-mute); margin-top: 0; }

/* 理念系タグ(Philosophy/Narrative/Culture/History)の見出し直下に置く、名前の由来を
   説明する折りたたみ。佐宗邦威『理念経営2.0』の各章副題をそのまま引用する。
   タグ名・画面ごとに文言だけ変えて使い回す共通コンポーネント。 */
.name-about { margin: 2px 0 16px; }
.name-about summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--ink-mute);
}
.name-about summary::-webkit-details-marker { display: none; }
.name-about summary::before { content: "ⓘ"; }
.name-about[open] summary { margin-bottom: 7px; }
.name-about-quote {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-mute);
  margin: 0 0 2px;
  padding-left: 16px;
  border-left: 2px solid var(--sidebar-border);
}
.name-about-source {
  font-size: 0.7rem;
  color: var(--ink-mute);
  opacity: 0.75;
  margin: 0;
  padding-left: 16px;
}

/* ホーム・Philosophy・理念ナビ・ログイン画面(写真+ガラスのまま。body.work-screenの対象外)は、
   h1・p.subがカードの外(app-main直下)で写真の上に直接乗るため、ink-light/darkの自動判定だけでは
   写真の明るい部分(空・雲など)で文字が読みにくくなることがある。サイドバー(.sidebar)と同じ
   text-shadowを付け、写真のどの部分に乗っても最低限の視認性を確保する
   (business-screen側はapp-mainが不透明なクリーム背景を持つため、この影は実質見えない)。 */
body:not(.work-screen) .app-main h1,
body:not(.work-screen) .app-main p.sub {
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* ================================================================
   セクションカード — VANTAGEデザインシステムの「クリアガラス」手法。
   ぼかしゼロ、ガラス面はほぼ無色透明、上辺・左辺だけ明るいエッジを
   立て、影は写真の色味を映した柔らかい影にする。実際の縁・影の色は
   下記のプリセット(data-bg)ごとの上書きで決まる — ここでは
   simple-dark(既定の岩肌写真)を想定した値。
   ================================================================ */
section {
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 24px;
  /* 従来はほぼ無色透明の「クリアガラス」で、文字色を写真の平均輝度から
     自動判定するink-light/darkだけに頼っていたが、写真内で明暗が
     混在する場合(雲と空、波と影など)は必ずどこかで文字が背景に
     溶けて読めなくなっていた。サイドバー・ホーム画面の見出しバッジと
     同じ「濃紺の半透明+ぼかし」に統一し、文字色も常に白固定にすることで、
     写真のどの部分に乗っても常に同じコントラストを確保する。 */
  --body-text: #f5f7fb;
  --ink-mute: #d7dbe6;
  color: var(--body-text);
  background-image:
    radial-gradient(140% 120% at 12% -10%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 32%, transparent 60%),
    linear-gradient(150deg, rgba(22,38,56,0.62) 0%, rgba(14,26,40,0.5) 50%, rgba(18,32,48,0.56) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1.5px solid var(--card-border-hi);
  border-left: 1px solid var(--card-border);
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 26px 40px -20px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* 見やすさモードだけは、ガラス面をすりガラス(ぼかし)にして読みやすさを
   確保する。ぼかしを使わないプリセット既定と唯一違う点。 */
/* 見やすさモードは「写真ごとに透明度・文字色が変わるクリアガラス」を
   やめ、常に安全な組み合わせ(すりガラス+固定の文字色)にする。ただし
   白いすりガラス1色に固定すると、シンプル・ライト/グレーのような明るい
   背景の上では地色とほぼ同化してしまい「すりガラス感」が消えて見える。
   自動判定されるink-light(暗い背景・白文字)/ink-dark(明るい背景・黒文字)
   に応じて、ガラスの色そのものを白いすりガラス/濃紺のすりガラスに
   切り替えることで、どの背景でも常にはっきりした質感とコントラストを
   保つ。(ink-light/ink-dark の指定より詳細度で確実に上回るよう、
   body.hc-modeと組み合わせた2クラスセレクタにしてある)

   重要: すりガラス(backdrop-filter)は「最背面のカード」である section
   にだけかける。sheet-card/goal-card/preset-cardなどはsectionの中に
   さらに重ねて置かれる内側のカードで、これらにも同じぼかし+白ガラスを
   重ねると、ぼかしの上にぼかしを重ねることになり、透明度が掛け算式に
   積み上がって不透明な板のように見えてしまう(ユーザー指摘の「2枚とも
   すりガラスにすると重なって見える」現象)。内側のカードは、すりガラス化
   された親(section)の上に乗る「一段濃い区画」として、ぼかしなしの
   薄い塗りだけにする。 */
/* 業務画面(work-screen)は白いシートの上に載るため、この写真向けのガラス/白文字ルールの対象外にする */
body.hc-mode:not(.work-screen).ink-light section {
  --body-text: #f5f7fb;
  --ink-mute: #d7dbe6;
  /* 斜めグラデだけだと写真のノイズに埋もれて「板」に見えるため、左上に
     ハイライト(光の反射)を重ね、外周にごく薄い白のグロー(外側box-shadow)
     を足す。写真が暗くても明るくても縁がくっきり見え、ガラスが宙に
     浮いているように見える。 */
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  background-color: transparent;
  background-image:
    radial-gradient(140% 120% at 12% -10%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 32%, transparent 60%),
    linear-gradient(150deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0.32) 100%);
  border-top: 2px solid rgba(255,255,255,0.95);
  border-left: 1.5px solid rgba(255,255,255,0.7);
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
}
body.hc-mode:not(.work-screen).ink-dark section {
  --body-text: #1c2130;
  --ink-mute: #454b5c;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  background-color: transparent;
  background-image:
    radial-gradient(140% 120% at 12% -10%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 32%, transparent 60%),
    linear-gradient(150deg, rgba(20,28,42,0.24) 0%, rgba(20,28,42,0.12) 50%, rgba(20,28,42,0.18) 100%);
  border-top: 2px solid rgba(255,255,255,0.75);
  border-left: 1.5px solid rgba(255,255,255,0.5);
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 14px 24px -16px rgba(20,28,42,0.22), inset 0 1px 1px rgba(255,255,255,0.6);
}
/* section の内側に乗る2段目のカード。ぼかしを重ねず、地色より一段
   はっきりした薄い塗りだけで区画を分ける。 */
body.hc-mode:not(.work-screen).ink-light .auth-status-bar,
body.hc-mode:not(.work-screen).ink-light .sheet-card,
body.hc-mode:not(.work-screen).ink-light .dept-card,
body.hc-mode:not(.work-screen).ink-light .goal-card,
body.hc-mode:not(.work-screen).ink-light .filter-bar,
body.hc-mode:not(.work-screen).ink-light .preset-card,
body.hc-mode:not(.work-screen).ink-light .total-score-box,
body.hc-mode:not(.work-screen).ink-light .eval-block,
body.hc-mode:not(.work-screen).ink-light .rn-card,
body.hc-mode:not(.work-screen).ink-light .rn-info-card,
body.hc-mode:not(.work-screen).ink-light .pdca-create-box,
body.hc-mode:not(.work-screen).ink-light .ph-sub-card {
  --body-text: #f5f7fb;
  --ink-mute: #d7dbe6;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(255,255,255,0.1);
  background-image: none;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: none;
}
body.hc-mode:not(.work-screen).ink-dark .auth-status-bar,
body.hc-mode:not(.work-screen).ink-dark .sheet-card,
body.hc-mode:not(.work-screen).ink-dark .dept-card,
body.hc-mode:not(.work-screen).ink-dark .goal-card,
body.hc-mode:not(.work-screen).ink-dark .filter-bar,
body.hc-mode:not(.work-screen).ink-dark .preset-card,
body.hc-mode:not(.work-screen).ink-dark .total-score-box,
body.hc-mode:not(.work-screen).ink-dark .eval-block,
body.hc-mode:not(.work-screen).ink-dark .rn-card,
body.hc-mode:not(.work-screen).ink-dark .rn-info-card,
body.hc-mode:not(.work-screen).ink-dark .pdca-create-box,
body.hc-mode:not(.work-screen).ink-dark .ph-sub-card {
  --body-text: #1c2130;
  --ink-mute: #454b5c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(20,28,42,0.07);
  background-image: none;
  border: 1px solid rgba(20,28,42,0.18);
  box-shadow: none;
}
body.hc-mode:not(.work-screen) .btn.secondary {
  background: rgba(255,255,255,0.7);
}
h2 { font-size: 1.05rem; margin-top: 0; margin-bottom: 4px; }
h2.section-title { background: var(--heading-bg); color: var(--heading-text); padding: 6px 10px; border-radius: 6px; }
p.hint { font-size: 0.8rem; color: var(--ink-mute); margin-top: 0; }

/* ---- 背景プリセット(data-bg)ごとのクリアガラス上書き ----
   bg-picker.js が選択に応じて body[data-bg] を切り替える。
   宇宙・空・海は写真の色味を、シンプル3色は単色トーンを影とエッジに
   反映し、VANTAGEデザインシステムと同じ質感にする。 */
body[data-bg="space"] section {
  border-top-color: rgba(255,255,255,0.35);
  border-left-color: rgba(255,255,255,0.2);
  box-shadow: 0 26px 42px -20px rgba(255,224,160,0.16), 0 14px 24px -14px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
}
/* 「宇宙」プリセット限定: 写真そのものにfilterをかけるとカード文字まで
   ぼやける/暗くなるため、写真の上に青いグローだけをscreenブレンドで
   薄く重ね、VANTAGEデザインシステムの見本と同じ鮮やかさに近づける。
   コンテンツより背面(z-index:-1)に置くので他要素の重なりには影響しない。 */
body[data-bg="space"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 38%, rgba(90,170,255,0.45), transparent 62%);
  mix-blend-mode: screen;
}
/* 空・海・グレーは「ぼかし+濃い膜」をかけた暗めの背景に作り直したため(bg-picker.js参照)、
   文字は常に白(ink-light)。影も元写真の色味(ピンク/紫)ではなく、暗い背景に馴染む濃色にする。 */
body[data-bg="sora"] section,
body[data-bg="umi"] section {
  --card-border-hi: rgba(255,255,255,0.4);
  --card-border: rgba(255,255,255,0.2);
  box-shadow: 0 26px 40px -20px rgba(4,14,30,0.55), inset 0 1px 1px rgba(255,255,255,0.35);
}
body[data-bg="custom"] section {
  --card-border-hi: rgba(255,255,255,0.7);
  --card-border: rgba(255,255,255,0.42);
  box-shadow: 0 26px 40px -20px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.7);
}
body[data-bg="simple-light"] section {
  --card-border-hi: rgba(255,255,255,0.62);
  --card-border: rgba(255,255,255,0.42);
  box-shadow: 0 26px 40px -20px rgba(224,150,140,0.35), 0 14px 24px -14px rgba(255,255,255,0.3), inset 0 1px 1px rgba(255,255,255,0.75);
}

label { font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  padding: 7px 8px;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: transparent;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 44px; }

/* --- 対象期間・所属情報ヘッダー --- */
.period-row { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.period-row .num { width: 80px; }
.period-row .unit { font-size: 0.85rem; padding-bottom: 8px; }
.affiliation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.affiliation-grid .full-width { grid-column: 1 / -1; }

/* --- チェックボックス項目(所属情報グリッド内でも他項目と縦位置を揃えるための構造) --- */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0;
  padding: 7px 0;
}
.checkbox-inline input[type="checkbox"] { width: auto; }
.field-note { font-size: 0.72rem; color: var(--ink-mute); margin: 2px 0 0; line-height: 1.35; }

/* --- シート選択(期末記入・評価ランク算出画面で共通) --- */
.sheet-select-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
.sheet-select-row .field { flex: 1; min-width: 260px; }
.readonly-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 16px;
  font-size: 0.85rem;
  /* ほぼ透明なグレーの上にink-light/darkの自動判定色を乗せると、写真の
     その場所がたまたま暗い/明るい時に読めなくなるため、badge類と同じ
     固定の組み合わせにする。 */
  background: rgba(255,255,255,0.75);
  color: #2a2a25;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.readonly-summary .k { color: #55524a; font-size: 0.75rem; }

/* --- 目標カード(共通) --- */
.goal-card {
  /* sectionの内側に置かれるため、sectionと同じ強さのガラスを重ねると
     白が二重に積み上がって濃くなる(すりガラスの二重貼りと同じ現象)。
     ここは半分の強さに抑える。 */
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.002) 50%, rgba(255,255,255,0.01) 100%);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-left: 1px solid rgba(255,255,255,0.09);
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.025);
  border-radius: 12px;
  box-shadow: 0 8px 16px -14px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.1);
  padding: 14px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.goal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: #eef1f5;
  color: #1f3a52;
  margin: -14px -14px 12px -14px;
  padding: 10px 14px;
}
.goal-card-header .badge {
  background: #1f3a52;
  color: white;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.goal-card-header .badge.muted { background: #8886; }
.goal-field { margin-bottom: 10px; }
.goal-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.goal-field-row .goal-field { flex: 1; min-width: 160px; }
.goal-field.readonly { background: rgba(255,255,255,0.75); color: #2a2a25; padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; }
.goal-field.readonly .label-inline { font-size: 0.75rem; font-weight: 600; color: #55524a; display: block; margin-bottom: 2px; }
.required-mark { color: #dc2626; margin-left: 2px; }
.link-note { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--ink-mute); font-weight: 400; }

table.criteria-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
table.criteria-table th, table.criteria-table td { padding: 3px 4px; }
table.criteria-table th {
  font-size: 0.75rem;
  text-align: left;
  color: var(--ink-mute);
  width: 40px;
}
table.criteria-table td input { font-size: 0.85rem; }
table.criteria-table td.readonly-value { font-size: 0.82rem; padding: 3px 6px; }

.remove-goal-btn {
  background: transparent;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 0.85rem;
}

.btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  background: var(--accent-primary);
  color: var(--accent-primary-text);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}
.btn.secondary { background: transparent; color: #1f3a52; border: 1px solid #1f3a52; }
.btn:has(.advice-chat-toggle-icon) { display: inline-flex; align-items: center; gap: 9px; }
.btn.small { padding: 4px 12px; font-size: 0.8rem; }
/* 以前は#dc2626(彩度の高い純粋な赤)で、他の落ち着いた配色の中で1つだけ
   浮いて見えたため、少し落ち着いたテラコッタ系の赤に和らげる。 */
.btn.danger { background: #c96259; color: #fff; }
.btn.danger.secondary { background: transparent; color: #c96259; border: 1px solid #c96259; }
.btn:disabled { opacity: 0.5; cursor: wait; }
.actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }

.weight-total { font-size: 0.9rem; font-weight: 600; margin-left: auto; }
.weight-total.ok { color: #16a34a; }
.weight-total.warn { color: #dc2626; }

.hidden { display: none !important; }

/* --- 部署方針セクション(目標設定画面、目立たせるための強調枠) ---
   以前はbackgroundショートハンドでsectionのガラス背景(background-image)を
   丸ごと不透明色に上書きしてしまい、このセクションだけガラス質感が消えて
   いた。background-imageだけを重ねる形にして、クリアガラスの上に色味を
   乗せる。 */
.dept-policy-section {
  border-top-color: #1f3a5299;
  background-image: linear-gradient(150deg, rgba(31,58,82,0.18) 0%, rgba(31,58,82,0.05) 60%, rgba(255,255,255,0.04) 100%);
}
.dept-policy-section .goal-field.readonly { background: rgba(255,255,255,0.14); }
/* 業務画面では、上記の半透明グラデーション+section既定の大きくぼかした影が
   写真なしの不透明な地では縁がにじんで見える。色味(border-top-color)は保ちつつ、
   地を不透明なティント色に、影は他のカードと同じ右下寄せの締まったものに揃える。 */
body.work-screen .dept-policy-section,
body.work-screen .exec-message-section,
body.work-screen .deleted-section {
  background-image: none;
  box-shadow: 2px 3px 6px rgba(20,28,42,0.07);
  /* sectionの既定(濃紺ガラス+白文字固定)を業務画面の不透明な地には適用しない。
     ここを明示的にリセットしないと、白文字がこの薄い地色の上に残ってしまう。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #2a2a25;
  text-shadow: none;
  --body-text: #2a2a25;
  --ink-mute: #55524a;
}
body.work-screen .dept-policy-section { background-color: #eef2f7; }
body.work-screen .exec-message-section { background-color: #eaf3fa; }
body.work-screen .deleted-section { background-color: #fdeeee; }
body.work-screen .dept-policy-section .goal-field.readonly,
body.work-screen .exec-message-section .goal-field.readonly {
  background-color: rgba(255,255,255,0.7);
}

/* --- 社長(executive)からのメッセージ(本人・担当managerへの読み取り専用表示。executiveメモとは別枠) ---
   以前はベージュ・オレンジ系(#d97706)だったが、アプリ全体のアクア/ブルー系配色に合わせて
   --accent-adminのブルーに統一した(在庫管理系バッジと同系統で「特別な情報」を示す)。 */
.exec-message-section {
  border-top-color: #4f8fc999;
  background-image: linear-gradient(150deg, rgba(79,143,201,0.18) 0%, rgba(79,143,201,0.05) 60%, rgba(255,255,255,0.04) 100%);
}
.exec-message-section .goal-field.readonly { background: rgba(255,255,255,0.14); }
.exec-message-inline {
  margin-top: 8px;
  padding: 8px 10px;
  background: #4f8fc90d;
  border-left: 3px solid var(--accent-admin);
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: pre-wrap;
}
.exec-message-inline .label-inline { font-size: 0.72rem; font-weight: 600; color: #2c6a9c; display: block; margin-bottom: 2px; }
.exec-message-edit-block { border: 1px solid #4f8fc999; background: #4f8fc90d; border-radius: 8px; padding: 10px 12px; }

/* --- ログイン状態バー(MBOシート本体の各画面共通。Figmaデザインのheader-info-cardに準拠。
   達成率の円グラフ部分は実データの裏付けがないため含めない) --- */
.auth-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 16px;
  /* sectionと同じ理由で、濃紺の半透明+ぼかし+白文字固定に統一する。 */
  --body-text: #f5f7fb;
  --ink-mute: #d7dbe6;
  color: var(--body-text);
  background-image: linear-gradient(150deg, rgba(22,38,56,0.58) 0%, rgba(14,26,40,0.46) 50%, rgba(18,32,48,0.52) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1.5px solid var(--card-border-hi);
  border-left: 1px solid var(--card-border);
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  box-shadow: 0 14px 26px -16px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.auth-status-profile { display: flex; align-items: center; gap: 14px; min-width: 0; }
.auth-avatar-circle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.auth-avatar-circle.auth-avatar-editable { cursor: pointer; }
.auth-avatar-circle.auth-avatar-editable:hover,
.auth-avatar-circle.auth-avatar-editable:focus-visible {
  box-shadow: 0 0 0 2px var(--accent) inset;
  outline: none;
}
.auth-avatar-circle.uploading { cursor: wait; opacity: 0.6; }
/* 画像自体はここでクリップする(円の外に絶対配置する削除バッジまで一緒に切り取られないよう、
   circle本体ではなくvisualの側にoverflow:hiddenを持たせる) */
.auth-avatar-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.auth-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* 右下の隅にぴったり収まる極小の削除バッジ。通常時は完全に透明(クリック可能領域は保持したまま
   見た目だけ消す)にし、アバター全体にマウスオーバー/フォーカスした時だけフェードインで現れる。 */
.auth-avatar-remove {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #9ca3af;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  z-index: 1;
}
.auth-avatar-circle:hover .auth-avatar-remove,
.auth-avatar-circle:focus-within .auth-avatar-remove {
  opacity: 0.85;
}
.auth-avatar-remove:hover,
.auth-avatar-remove:focus-visible {
  background: #dc2626;
  opacity: 1;
  outline: none;
}
.auth-avatar-remove.hidden { display: none; }
.auth-status-text { min-width: 0; }
.auth-status-name { font-size: 1rem; font-weight: 800; }
.auth-status-meta { font-size: 0.78rem; color: var(--ink-mute); margin-top: 2px; }

.msg { margin-top: 12px; font-size: 0.9rem; }
.msg.error { color: #dc2626; white-space: pre-wrap; }
.msg.success { color: #16a34a; }

/* --- 補足情報バナー(adminが他人のシートを代理編集している旨の案内等) --- */
.info-banner {
  background: #1f3a5214;
  color: #1f3a52;
  border: 1px solid #1f3a5266;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.sheet-card {
  /* sectionと同じ理由(写真の明暗混在で文字が溶ける)で、ここも
     濃紺の半透明+ぼかし+白文字固定に統一する。 */
  --body-text: #f5f7fb;
  --ink-mute: #d7dbe6;
  color: var(--body-text);
  background-image: linear-gradient(150deg, rgba(22,38,56,0.5) 0%, rgba(14,26,40,0.4) 50%, rgba(18,32,48,0.46) 100%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.18);
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  box-shadow: 0 8px 16px -14px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.18);
  padding: 10px 12px;
  margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.sheet-card-head { font-size: 0.9rem; margin-bottom: 6px; }
.sheet-card-head .muted { color: var(--ink-mute); font-size: 0.8rem; }
.sheet-card-head .print-link { margin-left: 12px; font-size: 0.8rem; color: #1f3a52; text-decoration: none; }
.sheet-card-head .print-link:hover { text-decoration: underline; }
.sheet-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.sheet-card-actions .btn { padding: 4px 12px; font-size: 0.8rem; }
/* 「完全に削除する」(復元不可)は同じ行の「復元」ボタンのすぐ隣だと誤操作しやすいため、
   右端に寄せて余白+区切り線で明確に離す。 */
.sheet-card-actions .purge-sheet-btn { margin-left: auto; padding-left: 14px; border-left: 1px solid rgba(20,28,42,0.15); }
.badge.finalized { background: #16a34a; color: white; border-radius: 999px; padding: 2px 12px; font-size: 0.8rem; font-weight: 600; }
/* シートの進捗バー(期初→期末→評価)。my-sheets.html等の一覧カードで、シートが今どの段階にあるかを示す。 */
.sheet-stage-bar { display: flex; align-items: center; margin: 6px 0 8px; }
.sheet-stage-step { display: flex; align-items: center; flex: 1; }
.sheet-stage-step:last-child { flex: 0 0 auto; }
.sheet-stage-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border-hi); color: var(--ink-mute);
}
.sheet-stage-label { margin: 0 8px; font-size: 0.75rem; color: var(--ink-mute); white-space: nowrap; }
.sheet-stage-line { flex: 1; height: 2px; background: var(--card-border-hi); margin-right: 8px; }
.sheet-stage-step.done .sheet-stage-dot { background: #16a34a; border-color: #16a34a; color: white; }
.sheet-stage-step.done .sheet-stage-label { color: var(--body-text); }
.sheet-stage-step.done .sheet-stage-line { background: #16a34a; }
.sheet-stage-step.current .sheet-stage-dot { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--accent-primary-text); }
.sheet-stage-step.current .sheet-stage-label { color: var(--body-text); font-weight: 600; }
.deleted-section {
  border-top-color: #dc262699;
  background-image: linear-gradient(150deg, rgba(220,38,38,0.18) 0%, rgba(220,38,38,0.05) 60%, rgba(255,255,255,0.04) 100%);
}

/* --- 一覧の絞り込みフィルタ・ページネーション(目標設定一覧・削除済み一覧で共通) --- */
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #8881;
  border-radius: 6px;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0;
}
.filter-bar input, .filter-bar select { font-size: 0.85rem; padding: 5px 7px; }
.filter-bar .btn { padding: 6px 14px; font-size: 0.8rem; }

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.82rem;
}
.pagination .btn { padding: 4px 12px; font-size: 0.8rem; }
.pagination-info { color: var(--ink-mute); }

table.goal-mini { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.goal-mini th, table.goal-mini td { border: 1px solid var(--sidebar-border); padding: 5px 8px; text-align: left; vertical-align: top; }
table.goal-mini th { background: var(--heading-bg); color: var(--heading-text); }
table.goal-mini tr.philosophy-badge-row td { border-top: none; padding: 0 6px 6px; background: transparent; }
/* No・難易度・ウエイトのような短い内容の列は、white-space:nowrap + width:1%の組み合わせで
   内容に合わせて縮め、その分テーマ・具体的目標など長文の列に幅を回す(「難易度」が1文字ずつ
   縦に折り返される問題の対策)。呼び出し側のtheadで該当<th>にこのクラスを付ける。 */
table.goal-mini .col-narrow { white-space: nowrap; width: 1%; }

/* --- 理念タグ(Mission)バッジ(public/philosophy-badge.js) --- */
.philosophy-badges {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px;
  padding: 10px 12px 12px;
  background: #eaf5f1;
  border: 1px solid #bfe3d8;
  border-left: 4px solid #2bb99a;
  border-radius: 8px;
}
.philosophy-badges-title {
  flex: 1 1 100%;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.78rem; font-weight: 700; color: #1d5a4b;
}
.philosophy-badges-ai {
  background: #1f3a52; color: #fff;
  border-radius: 4px; padding: 1px 8px;
  font-size: 0.7rem; letter-spacing: .06em;
}
.philosophy-badges-ai::before { content: "✦ "; }
.philosophy-badges-hint { margin-left: auto; font-size: 0.7rem; font-weight: 400; color: #4f7a6e; }
.philosophy-badges .philosophy-badge-reason { flex: 1 1 100%; }
.philosophy-badge {
  border: none;
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--accent-primary-text);
  background: var(--accent-primary);
}
/* 以前はセカンダリだけ白系の薄いチップにしていたが、プライマリと並ぶと
   色が揃わず見づらいという指摘があったため、プライマリと同じアクア
   グリーンに統一する(区別はprimary/secondaryの並び順だけで十分)。 */
/* 理由テキストは背景写真の場所によって局所的な明暗が変わるため、
   ページ全体の自動判定(ink-light/dark)だけに頼ると、写真のたまたま
   暗い部分に重なった時に暗い文字が読めなくなる(逆も同様)。バッジ類と
   同じく、背景の明暗に関わらず常に読める固定の組み合わせにする。 */
.philosophy-badge-reason {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #cfe8df;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #2a2a25;
  white-space: pre-wrap;
}

/* --- MBO閲覧(/executive)の部署一覧カード・パンくずリスト --- */
.back-nav { margin-bottom: 20px; }
.breadcrumb { font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; color: var(--ink-mute); }
.breadcrumb a { color: #1f3a52; text-decoration: none; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: inherit; }
.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.dept-card {
  /* sectionの内側のため、goal-cardと同じく半分の強さに抑える(理由は
     goal-cardのコメント参照)。 */
  background-color: transparent;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.002) 50%, rgba(255,255,255,0.01) 100%);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-left: 1px solid rgba(255,255,255,0.09);
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.025);
  border-radius: 12px;
  box-shadow: 0 8px 16px -14px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.1);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dept-card:hover { border-color: #1f3a5299; }
.dept-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.dept-card-head strong { font-size: 1rem; }
.dept-card-meta { font-size: 0.72rem; color: var(--ink-mute); margin-top: 8px; }
/* 半透明グレーのバッジ類は中間色の無地背景に同化するため、常に
   明るいチップ+固定の濃い文字色にする(セカンダリバッジと同じ対策)。 */
.badge.unset-badge { background: rgba(255,255,255,0.75); color: #2a2a25; border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; }
.badge.progress-done { background: #16a34a; color: white; border-radius: 999px; padding: 2px 12px; font-size: 0.78rem; font-weight: 600; }
.badge.progress-pending { background: rgba(255,255,255,0.75); color: #2a2a25; border-radius: 999px; padding: 2px 12px; font-size: 0.78rem; font-weight: 600; }
.badge.progress-none { background: transparent; border: 1px dashed var(--card-border-hi); color: var(--ink-mute); border-radius: 999px; padding: 2px 12px; font-size: 0.78rem; }
.badge.progress-partial { background: #d97706; color: white; border-radius: 999px; padding: 2px 12px; font-size: 0.78rem; font-weight: 600; }

/* --- AIアドバイザーチャット(目標設定・期末記入画面で共通) --- */
.advice-chat-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  background: #3b4252;
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px #0004;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.advice-chat-toggle-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f0b429;
  box-shadow: 0 0 6px 2px #f0b42980;
  flex-shrink: 0;
}
.advice-chat-toggle-icon::after {
  content: "";
  position: absolute;
  top: 32%;
  left: 32%;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: #3b4252;
}
.advice-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 40;
  width: 520px;
  max-width: calc(100vw - 40px);
  height: 680px;
  max-height: calc(100vh - 100px);
  min-width: 300px;
  min-height: 160px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--content-bg);
  color: #4a4a45;
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px #0006;
  overflow: hidden;
}
.advice-chat-panel.hidden { display: none; }
.advice-chat-panel.minimized {
  height: auto;
  max-height: none;
}
.advice-chat-panel.minimized .advice-chat-log,
.advice-chat-panel.minimized .advice-chat-form,
.advice-chat-panel.minimized .advice-chat-hint {
  display: none;
}
.advice-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #1f3a52;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: move;
  touch-action: none;
  user-select: none;
}
.advice-chat-header-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.advice-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.advice-chat-minimize,
.advice-chat-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.advice-chat-close { font-size: 1.5rem; }
.advice-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.advice-chat-bubble {
  max-width: 90%;
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 1.05rem;
  line-height: 1.65;
  white-space: pre-wrap;
}
.advice-chat-bubble.user {
  align-self: flex-end;
  background: #1f3a52;
  color: white;
}
.advice-chat-bubble.assistant {
  align-self: flex-start;
  background: #8882;
}
.advice-chat-bubble.thinking { font-style: italic; opacity: 0.7; }
.advice-chat-bubble.error { color: #dc2626; background: #dc26261a; }
.advice-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--sidebar-border);
}
.advice-chat-input {
  flex: 1;
  resize: vertical;
  min-height: 60px;
  max-height: 200px;
  font-size: 1.05rem;
  padding: 10px 12px;
}
.advice-chat-send { padding: 11px 22px; font-size: 1rem; }
.advice-chat-hint {
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-align: center;
  padding: 0 12px 10px;
  margin: 0;
}
.advice-chat-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
}
.advice-chat-resize-handle::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8888;
  border-bottom: 2px solid #8888;
}
.advice-chat-panel.minimized .advice-chat-resize-handle { display: none; }

/* --- トースト通知(nav-guard.jsのshowToast) ---
   alert()の同期モーダルをやめ、画面右下に一定時間だけ表示するバナーに統一する。 */
#izw-toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.izw-toast {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #fff;
  background: #1f3a52;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.izw-toast.show { opacity: 1; transform: translateY(0); }
.izw-toast.error { background: #b91c1c; }
.izw-toast.info { background: #1f3a52; }
@media (max-width: 720px) {
  #izw-toast-container { left: 16px; right: 16px; max-width: none; }
}

/* アカウント表示はサイドバー(#sidebar-account)に一本化。各ページ上部のカードは出さない。 */
.auth-status-bar { display: none !important; }
.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 0 10px; margin-bottom: 18px; }
.sidebar-account[hidden] { display: none; }
.sidebar-account .auth-avatar-circle { width: 40px; height: 40px; }
.sidebar-account-text { min-width: 0; }
.sidebar-account-name { font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-account-meta { font-size: 0.72rem; opacity: 0.85; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .sidebar.mobile-open .sidebar-account { display: flex; }
  .sidebar.mobile-open .sidebar-account[hidden] { display: none; }
}

.sidebar-account-edit { display: block; margin-top: 4px; padding: 0; border: none; background: none; color: inherit; font: inherit; font-size: 0.72rem; opacity: 0.85; text-decoration: underline; cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-edit:hover { opacity: 1; }
.displayname-dialog { border: none; border-radius: 16px; padding: 0; max-width: min(92vw, 380px); background: #16232f; color: #eef3f6; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.displayname-dialog::backdrop { background: rgba(0,0,0,.55); }
.displayname-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; text-shadow: none; }
.displayname-form h3 { margin: 0; font-size: 1.05rem; }
.displayname-form p { margin: 0; font-size: .82rem; line-height: 1.7; color: #c9d0dc; }
.displayname-form input { min-height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid #2a3b4b; background: #0f1a24; color: #eef3f6; font-size: 1rem; }
.displayname-msg { min-height: 1.2em; font-size: .8rem; color: #ffb4a8; }
.displayname-actions { display: flex; justify-content: flex-end; gap: 8px; }
.displayname-actions button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid #2a3b4b; background: transparent; color: #eef3f6; font-size: .9rem; cursor: pointer; }
.displayname-actions .displayname-save { background: #3de8c6; border-color: #3de8c6; color: #0b2b25; font-weight: 700; }
.displayname-actions button:disabled { opacity: .5; cursor: wait; }

/* ---- 「宇宙」プリセット: 写真の黒を締め、くすみを取る(2026-10-14) ----
   新しい宇宙写真(夜の地球)は元々青いグローを持つため、旧写真用に重ねていた
   青のscreenブレンド(上の body[data-bg="space"]::before)をやめる。黒の上にscreenで
   青を乗せると、黒が持ち上がって全体が白っぽくくすんでいた。
   また、カード・帯・サイドバーの重ね色が青みの強い紺(22,38,56)だと、これも黒を
   持ち上げてくすむため、黒に近い色へ置き換えて不透明度も下げる。
   見やすさモード(hc-mode)と業務画面(work-screen)は従来のまま。 */
body[data-bg="space"]::before { content: none; }
body[data-bg="space"]:not(.hc-mode) .sidebar {
  background: linear-gradient(165deg, rgba(4,9,18,0.46), rgba(2,6,14,0.36));
}
body[data-bg="space"]:not(.hc-mode):not(.work-screen) section:not(.exec-message-section):not(.dept-policy-section):not(.deleted-section) {
  background-image:
    radial-gradient(140% 120% at 12% -10%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 32%, transparent 60%),
    linear-gradient(150deg, rgba(6,12,24,0.5) 0%, rgba(3,8,18,0.38) 50%, rgba(5,10,22,0.44) 100%);
}
body[data-bg="space"]:not(.hc-mode):not(.work-screen) .auth-status-bar,
body[data-bg="space"]:not(.hc-mode):not(.work-screen) .sheet-card {
  background-image: linear-gradient(150deg, rgba(6,12,24,0.46) 0%, rgba(3,8,18,0.34) 50%, rgba(5,10,22,0.4) 100%);
}
body[data-bg="space"]:not(.hc-mode) .home-hero {
  background: linear-gradient(165deg, rgba(6,12,24,0.5), rgba(3,8,18,0.4));
}