/* ============================================================
   Vinoteras Task Hub  -  スタイル
   モックアップ mockup_v1.html のブランドカラーを継承
   ============================================================ */

:root {
  --wine: #722F37;
  --wine-dark: #5A242B;
  --wine-tint: #F3E9EA;

  --phase-1: #B8924A; /* 立ち上げ */
  --phase-2: #C77A3E; /* EC関係 */
  --phase-3: #4A8FB9; /* マーケティング */
  --phase-4: #5C8A60; /* 運用 */
  --phase-5: #8B4D9B; /* クロージング */
  /* 6〜10 はカテゴリマスタで追加されたフェーズ用の予備色（JSがランタイムで上書き） */
  --phase-6: #9C7A3D;
  --phase-7: #427D71;
  --phase-8: #B36B6B;
  --phase-9: #5D7A9C;
  --phase-10: #7F8160;

  --ink: #2A2320;
  --ink-soft: #6B635E;
  --line: #E5DFDA;
  --bg: #FAF7F4;
  --card: #FFFFFF;

  --ok: #2E8659;
  --warn: #C77A3E;
  --muted: #757069;  /* 2026-06-10 コントラスト改善 (旧 #94908C, 3.2:1→4.5:1) */
  --danger: #B33A3A;
  --cream-2: #F4F0EA;
  --gold: #C8A951;
  --gold-dark: #8A6F2B;
  --ai: #7B5EA8;
  /* ボトリング・シート（v8モック）用 */
  --s1: #7B5EA8; --s2: #6A6EBE; --s3: #5B86C5; --s4: #C8A951;
  --s5: #D17A40; --s6: #E08855; --s7: #5C9E72; --s8: #722F37;
  --extra: #3D6E7A;
  --ai-tint: #EEE9F4;

  /* タスクマスタのグループ＝講座フェーズに対応した色（薄背景＋濃い文字） */
  --p1-tint: rgba(184, 146, 74, .15);
  --p2-tint: rgba(199, 122, 62, .15);
  --p3-tint: rgba(74, 143, 185, .15);
  --p4-tint: rgba(92, 138, 96, .15);
  --p5-tint: rgba(139, 77, 155, .15);
  --p6-tint: rgba(156, 122, 61, .15);
  --p7-tint: rgba(66, 125, 113, .15);
  --p8-tint: rgba(179, 107, 107, .15);
  --p9-tint: rgba(93, 122, 156, .15);
  --p10-tint: rgba(127, 129, 96, .15);
  --p1-dark: #8A6D29;
  --p2-dark: #8E4F1F;
  --p3-dark: var(--info-text);
  --p4-dark: #3A6440;
  --p5-dark: #5E2F73;
  --p6-dark: #6C5424;
  --p7-dark: #2B574F;
  --p8-dark: #8A4848;
  --p9-dark: #3F567A;
  --p10-dark: #5C5E40;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(42, 35, 32, .08), 0 4px 16px rgba(42, 35, 32, .05);

  /* ===== 事業ラインのテーマカラー ===== */
  /* 📚 講座 = ワインレッド（ブランド色）／🎬 YouTube = 赤／🎫 イベント = 金/アンバー／🍇 ツアー = 紫 */
  --bl-1: var(--wine); --bl-1-dark: #5A242B; --bl-1-tint: rgba(114,47,55,0.10);
  --bl-2: #C8302C; --bl-2-dark: #9E2521; --bl-2-tint: rgba(200,48,44,0.10);
  --bl-3: #C8881F; --bl-3-dark: #9E6A15; --bl-3-tint: rgba(200,136,31,0.12);
  --bl-4: #5B3A6E; --bl-4-dark: #432954; --bl-4-tint: rgba(91,58,110,0.10);
  --bl-5: #2C8C7C; --bl-5-dark: #1F6A5E; --bl-5-tint: rgba(44,140,124,0.12);

  /* 現在アクティブな事業ラインの色（JS が data-bl 属性で更新） */
  --bl: var(--bl-1);
  --bl-dark: var(--bl-1-dark);
  --bl-tint: var(--bl-1-tint);
  /* ---- セマンティックカラートークン（2026-06-10 色変数化） ---- */
  --cream: #FAF7F2;
  --warn-text: #9A4A00;   /* 旧 #B85800 のコントラスト改善版 (白上 6.3:1) */
  --gold-text: #7A5400;   /* 旧 #8A6300 / #9A6B00 / #7A5400 を統合 */
  --gold-tint: #FFF1D2;
  --ok-text: #2E5C30;
  --ok-tint: #DDE9D9;
  --danger-strong: #B12B2B;
  --danger-bright: #C8453F;
  --danger-ink: #8B2F2F;
  --danger-tint: #FBEAEA;
  --info-text: #2D618C;
  --ai-deep: #6B5B95;
  --reg-open: #43A047;    /* 受付中の枠 */
  --reg-closed: #1A1A1A;  /* 受付終了の枠 */

}
/* ルート/body に data-bl="N" が付いたら、--bl/--bl-dark/--bl-tint を上書き */
[data-bl="1"] { --bl: var(--bl-1); --bl-dark: var(--bl-1-dark); --bl-tint: var(--bl-1-tint); }
[data-bl="2"] { --bl: var(--bl-2); --bl-dark: var(--bl-2-dark); --bl-tint: var(--bl-2-tint); }
[data-bl="3"] { --bl: var(--bl-3); --bl-dark: var(--bl-3-dark); --bl-tint: var(--bl-3-tint); }
[data-bl="4"] { --bl: var(--bl-4); --bl-dark: var(--bl-4-dark); --bl-tint: var(--bl-4-tint); }
[data-bl="5"] { --bl: var(--bl-5); --bl-dark: var(--bl-5-dark); --bl-tint: var(--bl-5-tint); }

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

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

code {
  font-family: "SF Mono", Consolas, Menlo, monospace;
  background: rgba(114, 47, 55, .08);
  color: var(--wine);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}

/* ===== ログイン画面 ===== */
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(114, 47, 55, .12), transparent),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.login-logo-mark, .app-logo-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--wine);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
}

.login-logo-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
}
.login-logo-sub {
  font-size: 12px;
  color: var(--ink-soft);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}

.btn-primary {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--wine);
  border: none;
  border-radius: 9px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn-primary:hover { background: var(--wine-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: progress; }

.login-error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid #F0CFCF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.login-demo {
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--wine-tint);
  border-radius: 9px;
  padding: 10px 12px;
  line-height: 1.8;
}

/* ===== アプリ画面 ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.app-header-top {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 10px 24px 0;
  gap: 12px;
  min-width: 0;
}
.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  /* タブが多くなったら横スクロール（スクロールバーは細く） */
  overflow-x: auto;
  scrollbar-width: thin;
  -ms-overflow-style: none;
}
.app-header-left::-webkit-scrollbar { height: 4px; }
.app-header-left::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
.app-header-left::-webkit-scrollbar-track { background: transparent; }
.app-header-right { flex-shrink: 0; }
/* タブ類はテキスト改行禁止＋縮まない */
.bl-tab, .global-tab { white-space: nowrap; flex-shrink: 0; }
.bl-nav, .global-nav { flex-shrink: 0; }

/* 事業ラインタブ：📚 講座 / 🎬 YouTube / 🎫 イベント / 🍇 ツアー */
.bl-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.bl-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  position: relative;
  top: 1px;
  border: none;
  color: #fff;
  opacity: 0.55;
  transition: opacity .15s, transform .12s, box-shadow .15s;
}
.bl-tab:hover { opacity: 0.85; }
.bl-tab.active {
  opacity: 1;
  /* サブナビと完全に同じ色で連結するため、影・ハイライト線はすべて出さない */
  box-shadow: none;
  z-index: 1;
}
/* 事業ラインごとの個別カラー：背景をテーマカラーで塗りつぶし */
.bl-tab[data-bl-id="1"] { background: var(--bl-1); }
.bl-tab[data-bl-id="2"] { background: var(--bl-2); }
.bl-tab[data-bl-id="3"] { background: var(--bl-3); }
.bl-tab[data-bl-id="4"] { background: var(--bl-4); }
.bl-tab[data-bl-id="5"] { background: var(--bl-5); }
.bl-tab-icon { font-size: 14px; }

/* グローバル（事業ライン横断）マスタタブ：講師マスタなど */
.global-nav-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  margin: 0 4px 0 12px;
  align-self: center;
}
.global-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.global-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  position: relative;
  top: 1px;
  background: var(--cream-2);
  transition: background .15s, color .15s, box-shadow .15s, opacity .15s;
}
.global-tab:hover { background: var(--line); color: var(--ink); }
.global-tab.active {
  background: var(--wine);
  color: #fff;
  box-shadow: 0 -2px 0 0 rgba(255,255,255,0.4) inset, 0 3px 8px rgba(42,35,32,0.18);
  z-index: 1;
}
/* マスタタブはアクティブ時、配下のサブナビ（マスタ紫）と同じ色で連結 */
.global-tab[data-global="master"].active {
  background: var(--ai, var(--ai-deep));
  box-shadow: none;
}
/* ダッシュボードタブはホーム色（ワインレッド） */
.global-tab[data-global="dashboard"] {
  background: var(--cream-2);
}
.global-tab[data-global="dashboard"].active {
  background: var(--wine);
  color: #fff;
  box-shadow: none;
}
/* グローバルビュー時：事業ラインタブを抑制（クリックで戻れる） */
body.in-global-view .bl-tab { opacity: 0.35; }
body.in-global-view .bl-tab:hover { opacity: 0.6; }
body.in-global-view .bl-tab.active { box-shadow: none; }
/* グローバルビュー時：事業ラインのサブナビを隠してマスター用サブナビを表示 */
body.in-global-view .app-nav { display: none; }
body:not(.in-global-view) .master-nav { display: none; }
body.in-dashboard-view .app-nav,
body.in-dashboard-view .master-nav { display: none; }
body.in-dashboard-view .bl-tab { opacity: 0.55; }
body.in-dashboard-view .bl-tab:hover { opacity: 0.85; }

/* ============================================================
   ダッシュボード画面
   ============================================================ */
.dash-bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}
.dash-bl-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
  border-top: 4px solid var(--card-color, var(--wine));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-bl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(42, 35, 32, 0.10), 0 8px 24px rgba(42, 35, 32, 0.06);
}
.dash-bl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
}
.dash-bl-icon { font-size: 22px; }
.dash-bl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.dash-bl-stat .v {
  font-size: 18px;
  font-weight: 700;
  color: var(--card-color, var(--wine));
}
.dash-bl-stat .l { font-size: 10px; color: var(--muted); }
.dash-bl-progress {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-soft);
}
.dash-bl-progress-bar {
  height: 6px;
  background: var(--cream-2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.dash-bl-progress-bar > i {
  display: block;
  height: 100%;
  background: var(--card-color, var(--wine));
  transition: width .3s;
}

.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .dash-two-col { grid-template-columns: 1fr; }
}

.dash-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.dash-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-list .empty {
  padding: 18px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.dash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--cream);
  border: 1px solid #F5EFE3;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dash-item:hover { background: var(--cream-2); border-color: var(--line); }
.dash-item-icon { font-size: 18px; flex-shrink: 0; }
.dash-item-main { flex: 1; min-width: 0; }
.dash-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-item-sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.dash-due {
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  flex-shrink: 0;
}
.dash-due.overdue    { background: rgba(179, 58, 58, .15); color: var(--danger); }
.dash-due.urgent     { background: rgba(199, 122, 62, .18); color: var(--p2-dark); }
.dash-due.upcoming   { background: rgba(74, 143, 185, .15); color: var(--info-text); }
.dash-progress-mini {
  width: 60px;
  flex-shrink: 0;
  height: 6px;
  background: var(--cream-2);
  border-radius: 3px;
  overflow: hidden;
}
.dash-progress-mini > i {
  display: block;
  height: 100%;
  background: var(--ok);
}

.home-nav { display: inline-flex; }

/* ===== YouTube モーダル：撮影予定をチャンネル直下に並べ替え =====
   .cam-body は元々 flex-column。BL=2 のときだけ各セクションに order を付与し、
   「撮影名 → チャンネル → 🎬 撮影予定 → 公開希望期間 → 出演者 → メイン担当 → ステータス」の順に */
body[data-bl="2"] #cam-name-row         { order: 1; }
body[data-bl="2"] #cam-type-field       { order: 2; }
body[data-bl="2"] #cam-schedule-label   { order: 3; }
body[data-bl="2"] #cam-series-schedule,
body[data-bl="2"] #cam-single-schedule,
body[data-bl="2"] #cam-tour-schedule,
body[data-bl="2"] #cam-shoot-schedule   { order: 4; }
body[data-bl="2"] #cam-reg-period-label { order: 5; }
body[data-bl="2"] #cam-reg-period-row   { order: 6; }
body[data-bl="2"] #cam-instructor-row   { order: 7; }
body[data-bl="2"] #cam-main-label       { order: 8; }
body[data-bl="2"] #cam-main-row         { order: 9; }
body[data-bl="2"] #cam-status-label     { order: 10; }
body[data-bl="2"] #cam-status-row       { order: 11; }
body[data-bl="2"] #cam-error            { order: 12; }

/* ===== ヘッダー：狭い画面用の段階的な圧縮 =====
   1200px 未満：ロゴ横の「Vinoteras Task Hub」を非表示
   1000px 未満：マスタ／ダッシュボードのテキストを隠して絵文字のみ
   850px 未満：事業ラインタブのテキストも隠して絵文字のみ
   どのサイズでも横スクロールがフォールバックとして機能 */
/* （撤去 2026-05-31）旧・横型ナビ用の「狭い幅で項目名 .t-name やブランドを
   隠す」レスポンシブ規則は、サイドバー化により逆効果（項目名が消える）になった
   ため削除。サイドバー側で全幅のレイアウトを担当する。 */
/* 旧: ここに @media (max-width: 640px) があったが、PC用 .calendar / .cal-grid 等の
   定義より後ろに置かないと後勝ちで上書きされる問題があったため、ファイル末尾へ移動。 */

/* ============================================================
   スマホ用ハンバーガーメニュー
   ============================================================ */
.mobile-menu-btn {
  display: none;          /* デフォルト非表示。640px以下のとき @media で表示 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.mobile-menu-btn .mm-bar {
  width: 18px;
  height: 2px;
  background: var(--wine);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-menu-btn[aria-expanded="true"] .mm-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-menu-btn[aria-expanded="true"] .mm-bar:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn[aria-expanded="true"] .mm-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 980;
}
.mobile-nav-backdrop.hidden { display: none; }

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(86vw, 320px);
  height: 100dvh;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
  z-index: 990;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .25s ease;
}
.mobile-nav-drawer.hidden {
  transform: translateX(100%);
  pointer-events: none;
}
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--wine);
  color: #fff;
}
.mobile-nav-title { font-weight: 700; font-size: 16px; }
.mobile-nav-close {
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.mobile-nav-close:hover { background: rgba(255,255,255,.25); }

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}
.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: 15px;
}
.mobile-nav-item:hover { background: var(--wine-tint); }
.mobile-nav-item.active {
  background: var(--wine-tint);
  border-left-color: var(--wine);
  color: var(--wine);
  font-weight: 700;
}
.mobile-nav-item .mn-ico {
  font-size: 18px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}
.mobile-nav-item .mn-name {
  flex: 1;
}
.mobile-nav-item .mn-check {
  color: var(--wine);
  font-weight: 800;
  font-size: 16px;
}
.mobile-nav-item:not(.active) .mn-check { display: none; }
.mobile-nav-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 12px;
}

/* ============================================================
   ダッシュボード内：月別カレンダー
   ============================================================ */
.cal-panel { padding: 14px 16px 18px; }
.cal-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink);
}
.cal-nav-btn:hover { background: var(--cream-2); }
.cal-month-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  min-width: 130px;
  text-align: center;
}
.cal-today-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 6px;
  background: var(--wine-tint);
  color: var(--wine);
  border: 1px solid var(--line);
  cursor: pointer;
}
.cal-view-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cal-view-switch button {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  background: #fff;
  color: var(--ink-soft);
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cal-view-switch button:last-child { border-right: none; }
.cal-view-switch button:hover { background: var(--cream-2); }
.cal-view-switch button.active {
  background: var(--wine);
  color: #fff;
}
.cal-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-soft);
}
.cal-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-legend .abbr {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 16px;
  color: #fff;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.cal-legend .abbr.p1 { background: var(--phase-1); }
.cal-legend .abbr.p2 { background: var(--phase-2); }
.cal-legend .abbr.p3 { background: var(--phase-3); }
.cal-legend .abbr.p4 { background: var(--phase-4); }
.cal-legend .abbr.p5 { background: var(--phase-5); }

.calendar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--wine-dark);
  color: #fff;
}
.cal-weekdays .wd {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.cal-weekdays .wd:last-child { border-right: none; }
.cal-weekdays .wd.sun { color: #FFC8C8; }
.cal-weekdays .wd.sat { color: #C8DAFF; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--line);
  gap: 1px;
}
.cal-cell {
  background: #fff;
  min-height: 130px;
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-width: 0;
}
.cal-cell:hover { background: #FCFAF6; }
.cal-cell.outside { background: #FBF9F4; }
.cal-cell.outside .day-num { color: #C8B9A6; }
.cal-cell.today { background: #FFF8E8; }
.cal-cell.today:hover { background: #FFF3D6; }
.day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 1px;
  display: inline-flex;
  align-items: center;
  height: 22px;
}
.day-num.sun { color: var(--danger); }
.day-num.sat { color: #3978C6; }
.day-num.today-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wine-dark);
  color: #fff !important;
  font-size: 11px;
}

/* イベントチップ */
.cal-event {
  font-size: 10.5px;
  padding: 5px 7px 7px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  line-height: 1.35;
  position: relative;
  overflow: hidden;
  transition: .15s;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cal-event:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.22); z-index: 3; }
/* 親コース／単発の上部ラベル */
.cal-event .ev-parent {
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
  margin: -5px -7px 5px;
  padding: 3px 7px;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.cal-event .ev-parent.is-single  { background: rgba(255,255,255,.18); }
.cal-event .ev-parent.is-series  { background: rgba(0,0,0,.18); }
.cal-event .ev-parent > .pname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.cal-event .ev-students {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  background: rgba(255,255,255,.28);
  padding: 1px 5px;
  border-radius: 99px;
  white-space: nowrap;
}
.cal-event .time { font-weight: 700; margin-right: 4px; font-size: 10px; opacity: .95; }
.cal-event .title { font-weight: 600; }
.cal-event .time, .cal-event .title { white-space: nowrap; }
/* 受付状況の枠（緑＝受付中、黒＝終了、点線＝下書き） */
.cal-event.reg-open    { box-shadow: 0 0 0 3px var(--reg-open); }
.cal-event.reg-closed  { box-shadow: 0 0 0 3px var(--reg-closed); }
.cal-event.reg-draft   { box-shadow: 0 0 0 2px var(--muted); outline: 2px dashed var(--muted); outline-offset: -2px; }
/* 5フェーズバー */
.cal-event .phase-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
}
.cal-event .phase-mini .seg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  line-height: 1;
}
.cal-event .phase-mini .seg .lbl {
  width: 14px;
  flex-shrink: 0;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  font-size: 9px;
  line-height: 1;
}
.cal-event .phase-mini .seg .track {
  flex: 1;
  display: block;
  height: 4px;
  background: rgba(0,0,0,.32);
  border-radius: 1px;
  overflow: hidden;
}
.cal-event .phase-mini .seg .bar {
  display: block;
  height: 100%;
  background: rgba(255,255,255,.95);
  border-radius: 1px;
}
.cal-event .phase-mini .seg:nth-child(1) .bar { background: var(--phase-1); }
.cal-event .phase-mini .seg:nth-child(2) .bar { background: var(--phase-2); }
.cal-event .phase-mini .seg:nth-child(3) .bar { background: var(--phase-3); }
.cal-event .phase-mini .seg:nth-child(4) .bar { background: var(--phase-4); }
.cal-event .phase-mini .seg:nth-child(5) .bar { background: var(--phase-5); }
/* 事業ラインごとのイベント基本色：ヘッダーのタブカラーと完全に揃える */
.cal-event.bl-1 { background: var(--bl-1); }  /* 📚 講座：ワインレッド */
.cal-event.bl-2 { background: var(--bl-2); }  /* 🎬 YouTube：赤 */
.cal-event.bl-3 { background: var(--bl-3); }  /* 🎫 イベント：ゴールド */
.cal-event.bl-4 { background: var(--bl-4); }  /* 🍇 ツアー：紫 */
.cal-event.bl-5 { background: var(--bl-5); }  /* 🛒 物販：ティール */

/* 週表示：時間軸付きタイムライン（7日列＋左に時刻軸） */
.cal-grid.week {
  display: block;
  grid-template-columns: 1fr;
  background: transparent;
}
body.cal-week .cal-weekdays { display: none; }
.cal-week-frame {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.cal-week-header {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  background: var(--wine-dark);
  color: #fff;
}
.cal-week-header .cwh-spacer {
  background: var(--wine-dark);
  border-right: 1px solid rgba(255,255,255,.10);
}
.cal-week-header .cwh-day {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}
.cal-week-header .cwh-day:last-child { border-right: none; }
.cal-week-header .cwh-day.sun .dow { color: #FFC8C8; }
.cal-week-header .cwh-day.sat .dow { color: #C8DAFF; }
.cal-week-header .cwh-day .dow { font-size: 11px; opacity: 0.9; }
.cal-week-header .cwh-day .num { font-size: 16px; font-weight: 800; }
.cal-week-header .cwh-day.today {
  background: rgba(255, 200, 60, 0.15);
}
.cal-week-header .cwh-day.today .num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--wine-dark);
  font-size: 14px;
}

.cal-week-timeline {
  display: flex;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
}
.cal-week-days {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 1440px;
  position: relative;
}
.cal-week-day-col {
  position: relative;
  border-right: 1px solid var(--line);
  /* 各日列にも時間軸の背景線 */
  background-image:
    linear-gradient(to bottom, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 60px),
    linear-gradient(to bottom, transparent 0px, transparent 29px, rgba(0,0,0,0.05) 29px, rgba(0,0,0,0.05) 30px, transparent 30px, transparent 60px);
  background-size: 100% 60px;
}
.cal-week-day-col:last-child { border-right: none; }
.cal-week-day-col.today { background-color: #FFFCF0; }
.cal-week-day-col .cal-time-event {
  /* 週ビュー内では幅を細く */
  left: 4px;
  right: 4px;
  font-size: 10.5px;
  padding: 5px 7px 6px;
  min-height: 50px;
}
.cal-week-day-col .cal-time-event .te-head { font-size: 9.5px; margin-bottom: 2px; }
.cal-week-day-col .cal-time-event .te-time { font-size: 11px; }
.cal-week-day-col .cal-time-event .te-title { font-size: 11px; }
.cal-week-day-col .cal-time-event .te-phases { grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 4px; }
.cal-week-day-col .cal-time-event .te-phases .seg { font-size: 8px; padding: 1px 3px; }
.cal-week-day-col .cal-time-event .te-phases .seg .pct { display: none; }

/* 日表示：時間軸付きタイムライン
   1時間 = 60px（1分 = 1px）。0:00 〜 23:00 で全 24h・1440px
   左列に時刻ラベル、右列に時間グリッド線＋イベントを絶対配置 */
.cal-grid.day {
  grid-template-columns: 1fr;
  background: transparent;
  display: block;
}
body.cal-day .cal-weekdays { display: none; }
.cal-day-frame {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.cal-day-header {
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cal-day-header.today {
  background: linear-gradient(to right, #FFF8E8, #fff 60%);
}
.cal-day-header .dh-day {
  font-size: 28px;
  font-weight: 800;
  color: var(--wine);
}
.cal-day-header .dh-meta { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.cal-day-header .dh-pill {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wine-tint);
  color: var(--wine);
}

.cal-day-timeline {
  display: flex;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
}
.cal-time-col {
  width: 56px;
  flex-shrink: 0;
  background: #FDFBF6;
  border-right: 1px solid var(--line);
  position: relative;
}
.cal-hour-label {
  position: absolute;
  right: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .5px;
  transform: translateY(-7px);
  background: #FDFBF6;
  padding: 0 3px;
}
.cal-events-col {
  flex: 1;
  position: relative;
  min-height: 1440px;  /* 24h × 60px */
  /* 時間軸の線：時毎の太線＋30分の細線をグラデーションで描画 */
  background-image:
    /* 時毎の境界線（太め） */
    linear-gradient(to bottom, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 60px),
    /* 30分ライン（薄い破線風） */
    linear-gradient(to bottom, transparent 0px, transparent 29px, rgba(0,0,0,0.05) 29px, rgba(0,0,0,0.05) 30px, transparent 30px, transparent 60px);
  background-size: 100% 60px;
  background-position: 0 0, 0 0;
}
/* 15分の左端ティック（小さなおしゃれ目盛り） */
.cal-events-col::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      transparent 14px, rgba(0,0,0,0.18) 14px, rgba(0,0,0,0.18) 15px, transparent 15px,
      transparent 44px, rgba(0,0,0,0.18) 44px, rgba(0,0,0,0.18) 45px, transparent 45px,
      transparent 60px);
  background-size: 100% 60px;
}
/* 現在時刻のライン（今日のとき） */
.cal-events-col .cal-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 4;
  pointer-events: none;
}
.cal-events-col .cal-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
}
/* 時刻つきイベント */
.cal-time-event {
  position: absolute;
  left: 14px;
  right: 14px;
  min-height: 56px;
  padding: 7px 12px 9px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.10);
  z-index: 2;
  transition: transform .12s, box-shadow .15s;
  font-size: 12px;
}
.cal-time-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
  z-index: 5;
}
.cal-time-event.reg-open    { box-shadow: 0 0 0 3px var(--reg-open), 0 2px 8px rgba(0,0,0,.18); }
.cal-time-event.reg-closed  { box-shadow: 0 0 0 3px var(--reg-closed), 0 2px 8px rgba(0,0,0,.18); }
.cal-time-event.bl-1 { background: var(--bl-1); }
.cal-time-event.bl-2 { background: var(--bl-2); }
.cal-time-event.bl-3 { background: var(--bl-3); }
.cal-time-event.bl-4 { background: var(--bl-4); }
.cal-time-event.bl-5 { background: var(--bl-5); }

/* ── 時刻未定（終日）イベント帯：週ビュー ── */
.cal-allday-row {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: #FCFAF5;
}
.cal-allday-label {
  font-size: 9px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--wine);
  text-align: center;
  padding: 4px 2px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cal-allday-cell {
  padding: 3px;
  border-right: 1px solid var(--line);
  min-height: 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-allday-cell:last-child { border-right: none; }
.cal-allday-cell.today { background: #FFFCF0; }

/* ── 時刻未定（終日）イベント帯：日ビュー ── */
.cal-allday-band {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  background: #FCFAF5;
  border-bottom: 1px solid var(--line);
}
.cal-allday-band .cab-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--wine);
  padding-top: 3px;
}
.cal-allday-band .cab-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.cal-allday-band .cal-allday-chip { min-width: 170px; }

/* ── 終日チップ共通 ── */
.cal-allday-chip {
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  color: #fff;
  background: var(--wine);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  font-size: 10.5px;
  line-height: 1.25;
  overflow: hidden;
  transition: filter .12s;
}
.cal-allday-chip:hover { filter: brightness(1.08); }
.cal-allday-chip.bl-1 { background: var(--bl-1); }
.cal-allday-chip.bl-2 { background: var(--bl-2); }
.cal-allday-chip.bl-3 { background: var(--bl-3); }
.cal-allday-chip.bl-4 { background: var(--bl-4); }
.cal-allday-chip.bl-5 { background: var(--bl-5); }
.cal-allday-chip.reg-open   { box-shadow: 0 0 0 2px var(--reg-open), 0 1px 2px rgba(0,0,0,.12); }
.cal-allday-chip.reg-closed { box-shadow: 0 0 0 2px var(--reg-closed), 0 1px 2px rgba(0,0,0,.12); }
.cal-allday-chip .adc-name { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-allday-chip .adc-sess { display: block; font-size: 9.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-time-event .te-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.92;
}
.cal-time-event .te-time {
  font-weight: 800;
  font-size: 13px;
}
.cal-time-event .te-title {
  font-size: 13px;
  font-weight: 700;
}
.cal-time-event .te-students {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.28);
  padding: 1px 7px;
  border-radius: 99px;
}
.cal-time-event .te-phases {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.cal-time-event .te-phases .seg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  background: rgba(0,0,0,.18);
  border-radius: 3px;
  padding: 2px 5px;
}
.cal-time-event .te-phases .seg .lbl { font-weight: 700; }
.cal-time-event .te-phases .seg .pct { margin-left: auto; opacity: 0.85; }
.cal-time-event .te-phases .seg:nth-child(1) { background: rgba(184,146,74,.28); }
.cal-time-event .te-phases .seg:nth-child(2) { background: rgba(199,122,62,.28); }
.cal-time-event .te-phases .seg:nth-child(3) { background: rgba(74,143,185,.28); }
.cal-time-event .te-phases .seg:nth-child(4) { background: rgba(92,138,96,.28); }
.cal-time-event .te-phases .seg:nth-child(5) { background: rgba(139,77,155,.28); }

.cal-day-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px;
  font-size: 13px;
}

/* マスター用サブナビ：app-nav と同じ見た目だが、マスター紫系で塗りつぶし */
.master-nav {
  display: flex;
  gap: 4px;
  padding: 8px 24px 10px;
  background: var(--ai, var(--ai-deep));
}
.master-nav-item {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.20);
  transition: background .15s, color .15s, box-shadow .15s;
}
.master-nav-item:hover {
  background: rgba(255, 255, 255, 0.34);
}
.master-nav-item.active {
  background: #fff;
  color: var(--ai, var(--ai-deep));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* アクティブ事業ライン色：ページ全体のアクセント
   - 「＋追加」ボタン
   - サブナビのアクティブ項目
   - ページ見出しの左帯
   - モーダルの主要ボタン */
[data-bl] .btn-add {
  background: var(--bl);
  border-color: var(--bl);
  color: #fff;
}
[data-bl] .btn-add:hover { background: var(--bl-dark); border-color: var(--bl-dark); }
/* サブナビ：帯全体を事業ライン色で塗りつぶし、アクティブ項目を白カードで浮き出す
   メインタブ（上段）と境界線なしで一体化 */
[data-bl] .app-nav {
  background: var(--bl);
  border-top: none;
}
[data-bl] .app-nav-item {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
  transition: background .15s, color .15s, box-shadow .15s;
}
[data-bl] .app-nav-item:hover {
  background: rgba(255, 255, 255, 0.34);
  color: #fff;
}
[data-bl] .app-nav-item.active {
  background: #fff;
  color: var(--bl-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* ページ見出しに事業ライン色の左帯 */
[data-bl] .page-head .page-title {
  border-left: 4px solid var(--bl);
  padding-left: 10px;
  margin-left: -14px;
}
/* タスクマスタ・カテゴリマスタの「閲覧のみ」通知バーも事業ライン色寄りに */
[data-bl] .tm-readonly-notice {
  background: var(--bl-tint);
  color: var(--bl-dark);
  border-color: color-mix(in srgb, var(--bl) 30%, transparent);
}
.app-logo-mark {
  width: 32px;
  height: 32px;
  font-size: 17px;
  border-radius: 8px;
}
.app-logo-title {
  font-weight: 800;
  font-size: 15px;
}
.app-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* ユーザーアイコン（右上の人マーク） */
.user-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: var(--ok); /* ユーザーアイコンの緑 */
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .15s;
}
.user-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.user-icon-avatar {
  font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
  line-height: 1;
}

/* ドロップダウンメニュー */
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(44,24,16,.22);
  overflow: hidden;
  animation: userMenuIn .12s ease-out;
}
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu.hidden { display: none; }
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cream-2);
}
.user-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ok); /* ユーザーアイコンの緑 */
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.user-menu-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-divider {
  height: 1px;
  background: var(--line);
}
.user-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.user-menu-item:hover { background: var(--cream-2); }
.user-menu-item-danger { color: var(--danger); }
.user-menu-item-danger:hover { background: var(--danger-tint); }
.btn-ghost {
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-ghost:hover {
  background: var(--wine-tint);
  color: var(--wine);
}

.app-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}

.page-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
}
.page-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.btn-add {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--wine);
  border: none;
  border-radius: 9px;
  padding: 9px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .05s;
}
.btn-add:hover { background: var(--wine-dark); }
.btn-add:active { transform: translateY(1px); }

/* フィルタ */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.chip {
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--wine); color: var(--wine); }
.chip-active {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}
.chip-active:hover { color: #fff; }
.filter-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 4px;
}

/* ===== 講座一覧（行レイアウト） ===== */
.course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loading, .empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
  font-size: 14px;
}

.course-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.course-item.reg-open   { border: 2px solid var(--reg-open); }
.course-item.reg-closed { border: 2px solid #2C2C2C; }
.course-item.is-draft   { border: 2px dashed var(--muted); }
/* チームピッカーが開いているとき、ドロップダウンが下方向にはみ出せるように */
.course-item:has(.team-picker) { overflow: visible; z-index: 200; }
.course-item.picker-open { overflow: visible; z-index: 200; } /* :has() 非対応用 */

.course-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .12s;
  /* just-created の ::before 矢印を左端に絶対配置するための土台 */
  position: relative;
}
.course-row:hover { background: var(--cream-2); }

/* ============================================================
 * 新規作成された講座行のハイライト（2026-05-29 追加）
 * タスクカレンダー→タスク行のジャンプ時と同じパターン:
 *   - ゴールド系のグラデ背景＋インセット罫線
 *   - ▶ 矢印が左端でバウンス
 *   - 初回パルス（1.6秒、外側に向けてシャドウが広がる）
 * 解除タイミングはJS:
 *   1) いずれかの .course-row をクリック
 *   2) 講座一覧以外のページへ遷移
 *   3) 新しい講座が作成された瞬間（古いハイライトを置き換え）
 * ============================================================ */
.course-row.just-created {
  background: linear-gradient(90deg, #FFE7AB 0%, var(--gold-tint) 40%, #FFFAF0 75%, #fff 100%) !important;
  box-shadow: inset 4px 0 0 var(--gold), inset -1px 0 0 rgba(200, 169, 81, 0.45);
  animation: just-created-pulse 1.6s ease-out 1;
}
.course-row.just-created::before {
  content: '▶';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wine);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  animation: just-created-arrow-bounce 1.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
/* 展開状態でもハイライトは継続。背景はやや濃くしてレイヤード感を出す */
.course-item.expanded > .course-row.just-created {
  background: linear-gradient(90deg, #FFD98A 0%, #FFEEC3 60%, var(--cream-2) 100%) !important;
}
@keyframes just-created-pulse {
  0%   {
    background-color: #FFD98A;
    box-shadow: inset 4px 0 0 var(--gold), 0 0 0 0 rgba(200, 169, 81, 0.55);
  }
  60%  {
    background-color: var(--gold-tint);
    box-shadow: inset 4px 0 0 var(--gold), 0 0 0 14px rgba(200, 169, 81, 0);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 4px 0 0 var(--gold), 0 0 0 0 rgba(200, 169, 81, 0);
  }
}
@keyframes just-created-arrow-bounce {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
  50%      { transform: translateY(-50%) translateX(5px); opacity: 0.78; }
}
.course-item.expanded > .course-row {
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
.ci-caret {
  font-size: 22px;
  font-weight: 700;
  color: var(--wine);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* 折りたたみ＝＋、展開＝− */
.course-item:not(.expanded) .ci-caret::before { content: '+'; }
.course-item.expanded .ci-caret::before { content: '\2212'; } /* − */
.ci-icon { font-size: 24px; flex-shrink: 0; }
.ci-info { flex: 1; min-width: 0; }
.ci-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ci-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}
/* メイン担当（チーム＋担当者） */
.ci-owner {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.ci-owner-empty { color: var(--muted); font-style: italic; }
.ci-owner-team {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 10.5px;
}
.ci-owner-person {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 10.5px;
  border: 1px solid var(--line);
}
.ci-progress { flex-shrink: 0; }

/* 進捗バー（横長・薄め） */
.ci-progressbar {
  margin-top: 6px;
  width: 100%;
  height: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
}
.ci-progressbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--wine));
  transition: width 0.3s ease;
}

/* ============================================================
 * 講座スペックリボン（2026-05-29 追加 / 表紙用）
 * ----------------------------------------------------------------
 * ミニマルフラット・スタイル:
 *   - 背景なし、余白で間を取る
 *   - 各チップは [アイコン] [値] の2要素のみ
 *   - チップ間はゴールド極細の縦罫線（hairline）で区切り
 *   - 数値はやや太め、ラベルは半角大文字でブランド寄せ
 *   - ホバーでチップ単体が薄くワインレッドに染まる（微妙な反応）
 * ============================================================ */
.ci-spec-ribbon {
  margin-top: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 11.5px;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.ci-spec-ribbon .csr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 12px;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* 各チップ間に細いゴールド縦線（最初のチップには付けない） */
.ci-spec-ribbon .csr-chip + .csr-chip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: linear-gradient(180deg,
    rgba(200, 169, 81, 0) 0%,
    rgba(200, 169, 81, 0.55) 50%,
    rgba(200, 169, 81, 0) 100%);
}
.ci-spec-ribbon .csr-chip:hover {
  color: var(--wine);
}
.ci-spec-ribbon .csr-icon {
  font-size: 12.5px;
  opacity: 0.85;
  filter: saturate(0.9);
}
.ci-spec-ribbon .csr-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 600;
}

/* 販売価格 — ゴールド数字＋細い¥ */
.ci-spec-ribbon .csr-price .csr-value {
  font-feature-settings: 'tnum', 'lnum';
  color: #8A6F2B;
  font-weight: 700;
  font-size: 13px;
}
.ci-spec-ribbon .csr-price .csr-yen {
  color: var(--gold);
  font-weight: 500;
  margin-right: 1px;
  font-size: 11px;
}

/* 試飲ワイン（数 × 容量） */
.ci-spec-ribbon .csr-wine .csr-num {
  color: var(--wine);
  font-weight: 700;
  font-feature-settings: 'tnum', 'lnum';
}
.ci-spec-ribbon .csr-wine .csr-unit {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 10.5px;
  margin-right: 3px;
  margin-left: 1px;
}
.ci-spec-ribbon .csr-wine .csr-cross {
  color: var(--gold);
  font-weight: 400;
  margin: 0 4px 0 1px;
  font-size: 11px;
  opacity: 0.7;
}

/* ラベル種類 — BLACK / NORMAL を半角大文字でロゴ風に */
.ci-spec-ribbon .csr-label .csr-cap {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10.5px;
}
.ci-spec-ribbon .csr-label-black .csr-cap { color: #1A1614; }
.ci-spec-ribbon .csr-label-normal .csr-cap { color: var(--ink-soft); }

/* 試飲ワイン有無 */
.ci-spec-ribbon .csr-haswine.is-yes .csr-value { color: var(--wine); }
.ci-spec-ribbon .csr-haswine.is-no .csr-value { color: var(--muted); }

/* 添付資料・ディレクション担当・注意事項あり */
.ci-spec-ribbon .csr-material .csr-value,
.ci-spec-ribbon .csr-direction .csr-value,
.ci-spec-ribbon .csr-notes .csr-value {
  color: var(--ink-soft);
  font-weight: 600;
}
.ci-spec-ribbon .csr-notes .csr-value {
  /* 注意事項マークは文字を弱め、アイコンで読ませる */
  font-weight: 500;
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
}

/* 未設定プレースホルダー: 薄色・斜体・アイコンも控えめに
   既存講座（保存済みで spec 未設定）でもコアチップ3つは出すための受け皿 */
.ci-spec-ribbon .csr-chip.csr-unset .csr-icon {
  opacity: 0.35;
  filter: saturate(0);
}
.ci-spec-ribbon .csr-chip.csr-unset .csr-value,
.ci-spec-ribbon .csr-unset-text {
  color: #B8AFA8;
  font-style: italic;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
}
.ci-spec-ribbon .csr-chip.csr-unset:hover {
  color: var(--ink-soft);
}
.ci-spec-ribbon .csr-chip.csr-unset:hover .csr-icon {
  opacity: 0.6;
}

/* 折り返し時の整列 */
@media (max-width: 540px) {
  .ci-spec-ribbon { gap: 2px 0; }
  .ci-spec-ribbon .csr-chip { padding: 2px 9px; }
}

/* 次の期限 表示（最も近い未完了タスク） */
.ci-nextdue {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ci-nextdue strong {
  color: var(--ink);
  font-weight: 600;
}
.ci-nextdue.today {
  color: var(--danger-bright);
  font-weight: 600;
}
.ci-nextdue.soon {
  color: var(--warn-text);
}
.ci-nextdue.overdue {
  color: var(--danger-bright);
  font-weight: 700;
}
.ci-nextdue.overdue strong { color: var(--danger-bright); }
.ci-nextdue-done {
  color: var(--ok);
  font-weight: 600;
}
.ci-nextdue-empty {
  color: var(--muted);
  font-style: italic;
}
.ci-students {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
  border-left: 1px solid var(--line);
}
.ci-students .num {
  font-size: 19px;
  font-weight: 800;
  color: var(--wine);
  line-height: 1.1;
}
.ci-students .lbl { font-size: 9px; color: var(--muted); }

/* 種別・受付状況バッジ */
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.badge-series { background: var(--wine-tint); color: var(--wine); }
.badge-single { background: #EAF1F6; color: var(--phase-3); }
.badge-open   { background: #E6F2EC; color: var(--ok); }
.badge-closed { background: #EEEBE8; color: var(--muted); }
.badge-draft  { background: #F6EEDF; color: #9A7B33; }

/* 進捗サークル（conic-gradient） */
.progress-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.progress-circle::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  border-radius: 50%;
}
.progress-circle span {
  position: relative;
  font-size: 12px;
  font-weight: 800;
  color: var(--wine);
}

/* ===== 講座詳細パネル ===== */
.course-detail {
  padding: 18px;
  background: #FCFAF6;
  border-top: 1px solid var(--line);
}
.cd-loading { text-align: center; color: var(--muted); padding: 24px 0; font-size: 13px; }
.cd-error { text-align: center; color: var(--danger); padding: 24px 0; font-size: 13px; }

.cd-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.cd-stat .v { font-size: 18px; font-weight: 800; color: var(--wine); }
.cd-stat .l { font-size: 11px; color: var(--muted); }

.cd-hint {
  background: #FFF8E8;
  border: 1px solid #F0D88A;
  color: #7A5A1F;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* ============================================================
 * 講座スペックカード（2026-05-29 追加）
 * - 単発講座のみ表示。販売価格・ディレクション担当・試飲ワインなど
 *   作成時に入力した情報を一覧できるようにする
 * ============================================================ */
.cd-spec-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--wine);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.cd-spec-card .cs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wine);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cd-spec-card .cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 18px;
}
.cd-spec-card .cs-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cd-spec-card .cs-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.cd-spec-card .cs-value {
  font-size: 14px;
  font-weight: 600;
  color: #2C2520;
  word-break: break-word;
}
.cd-spec-card .cs-cell.cs-empty .cs-value,
.cd-spec-card .cs-notes-row.cs-empty .cs-value {
  color: #B8AFA8;
  font-weight: 400;
  font-style: italic;
}
.cd-spec-card .cs-notes-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-spec-card .cs-notes-body {
  white-space: pre-wrap;
  line-height: 1.55;
  font-weight: 400;
  background: var(--cream);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}

/* 講座情報の編集ボタン／編集フォーム */
.cd-edit-btn {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--wine);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .12s;
}
.cd-edit-btn:hover { background: var(--wine-tint); border-color: var(--wine); }

.cd-edit-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.cef-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.cef-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 14px;
}
.cef-field { font-size: 12px; }
.cef-field.col-2 { grid-column: 1 / -1; }
.cef-spec-divider {
  font-weight: 700;
  font-size: 12px;
  color: var(--wine, var(--wine));
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}
.cef-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.cef-field input,
.cef-field select,
.cef-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}
.cef-field textarea {
  /* 2026-05-29 修正: 注意事項などの長文向けに広く取る。
     行数は HTML 側の rows 属性で初期高さを決め、ユーザーが下方向に
     ドラッグして広げられるようにする */
  min-height: 120px;
  line-height: 1.55;
  resize: vertical;
  font-family: inherit;
}
.cef-field input:focus,
.cef-field select:focus,
.cef-field textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}
.cef-note {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.cef-error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid #F0CFCF;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin-top: 10px;
}
.cef-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.cef-foot .btn-ghost,
.cef-foot .btn-primary {
  font-size: 12px;
  padding: 6px 14px;
}

@media (max-width: 540px) {
  .cef-grid { grid-template-columns: 1fr; }
}

/* フェーズブロック */
.phase-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  /* overflow: hidden を外して、担当チームピッカーが下方向にはみ出せるように */
  overflow: visible;
  position: relative;
  z-index: 1;
}
/* チーム選択ピッカーが開いているフェーズは、後続フェーズより前面に */
.phase-block:has(.team-picker) { z-index: 100; }
.phase-block.picker-open { z-index: 100; } /* :has() 非対応ブラウザ用フォールバック */
/* 折りたたみ時のヘッダ角丸を保つため、phase-head側で角丸を持つ */
.phase-block.collapsed .phase-head {
  border-radius: var(--radius);
}
.phase-block:not(.collapsed) .phase-head {
  border-radius: var(--radius) var(--radius) 0 0;
}
.phase-block.p1 { border-left: 4px solid var(--phase-1); }
.phase-block.p2 { border-left: 4px solid var(--phase-2); }
.phase-block.p3 { border-left: 4px solid var(--phase-3); }
.phase-block.p4 { border-left: 4px solid var(--phase-4); }
.phase-block.p5 { border-left: 4px solid var(--phase-5); }
/* カテゴリマスタで追加された 6〜10 番目のフェーズ（例：ボトリング）にもエッジ色を付ける。
   PHASE_LIMIT=10 / MAX_PHASES_PER_BL=10 と整合。--phase-N と --pN-tint は :root に既に定義済みで、
   ユーザーが色を変更した場合は applyPhaseColorsFromMaster() が同じ変数を上書きするので追従する。 */
.phase-block.p6 { border-left: 4px solid var(--phase-6); }
.phase-block.p7 { border-left: 4px solid var(--phase-7); }
.phase-block.p8 { border-left: 4px solid var(--phase-8); }
.phase-block.p9 { border-left: 4px solid var(--phase-9); }
.phase-block.p10 { border-left: 4px solid var(--phase-10); }
.phase-block.p1 .phase-head { background: rgba(184,146,74,.10); }
.phase-block.p2 .phase-head { background: rgba(199,122,62,.10); }
.phase-block.p3 .phase-head { background: rgba(74,143,185,.10); }
.phase-block.p4 .phase-head { background: rgba(92,138,96,.10); }
.phase-block.p5 .phase-head { background: rgba(139,77,155,.10); }
.phase-block.p6 .phase-head { background: var(--p6-tint); }
.phase-block.p7 .phase-head { background: var(--p7-tint); }
.phase-block.p8 .phase-head { background: var(--p8-tint); }
.phase-block.p9 .phase-head { background: var(--p9-tint); }
.phase-block.p10 .phase-head { background: var(--p10-tint); }
.phase-block.p1 .phase-num { background: var(--phase-1); }
.phase-block.p2 .phase-num { background: var(--phase-2); }
.phase-block.p3 .phase-num { background: var(--phase-3); }
.phase-block.p4 .phase-num { background: var(--phase-4); }
.phase-block.p5 .phase-num { background: var(--phase-5); }
.phase-block.p6 .phase-num { background: var(--phase-6); }
.phase-block.p7 .phase-num { background: var(--phase-7); }
.phase-block.p8 .phase-num { background: var(--phase-8); }
.phase-block.p9 .phase-num { background: var(--phase-9); }
.phase-block.p10 .phase-num { background: var(--phase-10); }

.phase-head {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.phase-head:hover { filter: brightness(0.97); }
.phase-caret {
  font-size: 22px;
  font-weight: 700;
  color: var(--wine);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* 折りたたみ＝＋、展開＝− */
.phase-block.collapsed .phase-caret::before { content: '+'; }
.phase-block:not(.collapsed) .phase-caret::before { content: '\2212'; } /* − (U+2212 MINUS SIGN) */
.phase-block.collapsed .phase-head { border-bottom: none; }
.phase-block.collapsed .phase-body { display: none; }
.phase-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}
.phase-head .ph-name {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.phase-head .ph-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}
.phase-head .ph-count.done { color: var(--ok); }

/* 担当チーム（編集可） */
.phase-team {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px dashed #D8CFC0;
  position: relative;
}
.phase-team:hover { border-color: var(--wine); background: #fff; }
.phase-team .pt-caret { font-size: 9px; }

.team-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid;
}
.team-chip.no-team {
  color: var(--muted);
  background: #fff;
  border-color: var(--line);
  border-style: dashed;
}

.team-picker {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(44,24,16,.20);
  width: 230px;
  padding: 6px;
  cursor: default;
}
.tp-title {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  padding: 5px 8px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.tp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.tp-opt:hover { background: var(--cream-2); }
.tp-opt.selected { background: var(--cream-2); }
.tp-opt .tp-check { margin-left: auto; color: var(--ok); font-weight: 700; }

/* タスク行 */
.subtask-list { padding: 4px 0; }
.subtask-row {
  display: grid;
  grid-template-columns: 22px 168px 1fr auto 26px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #F5EFE3;
  font-size: 13px;
}
.subtask-row:last-child { border-bottom: none; }
.subtask-row.is-open { background: var(--cream-2); border-bottom: none; }
.st-main { cursor: pointer; min-width: 0; }
.subtask-row.done .st-title { color: var(--muted); text-decoration: line-through; }
.check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #fff;
  font-size: 11px;
}
.check.checked { background: var(--ok); border-color: var(--ok); color: #fff; }
.st-title { font-size: 13px; }
.st-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.st-req {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--wine-tint);
  color: var(--wine);
  margin-left: 6px;
}
.st-req.optional { background: #EEEBE8; color: var(--muted); }

.assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px dashed #D8CFC0;
  border-radius: 6px;
  padding: 3px 7px;
  position: relative;
}
.assignee:hover { border-color: var(--wine); background: #fff; }
.assignee.unset { color: var(--muted); }
.assignee .caret { font-size: 9px; color: var(--muted); margin-left: auto; }
.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.avatar.ai { background: var(--ai); }

.assignee-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(44,24,16,.20);
  width: 240px;
  padding: 6px;
  cursor: default;
}
.am-title {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  padding: 5px 8px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.am-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.am-opt:hover { background: var(--cream-2); }
.am-opt.selected { background: var(--cream-2); }
.am-opt .am-role { font-size: 10px; color: var(--muted); }
.am-opt .am-check { margin-left: auto; color: var(--ok); font-weight: 700; }

.st-due {
  position: relative;
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cream-2);
  border-left: 3px solid var(--wine);
  white-space: nowrap;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.st-due:hover { box-shadow: 0 0 0 2px var(--wine-tint); }
/* 期日チップ全面に重ねた透明な date input。クリックでネイティブの日付ピッカーが開く。 */
.st-due-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.st-due.soon {
  color: var(--warn-text);
  background: #FFF4E0;
  border-left-color: #FF9F1A;
}
.st-due.today {
  color: var(--danger-bright);
  background: #FFEDEB;
  border-left-color: var(--danger-bright);
  font-weight: 800;
}
.st-due.overdue {
  color: #fff;
  background: var(--danger-bright);
  border-left-color: #8B2F2A;
  font-weight: 800;
}
.st-due.unset {
  color: var(--muted);
  font-weight: 500;
  background: transparent;
  border-left-color: var(--line);
  font-style: italic;
}
.subtask-row.done .st-due {
  opacity: 0.45;
  text-decoration: line-through;
}

/* ===== 2026-06-19: 一覧上のインライン編集コントロール（担当者 / 状態 / 必須・任意） ===== */
.st-inline-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.st-inline {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  max-width: 140px;
}
.st-inline:hover { border-color: var(--wine); }
.st-inline:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 2px var(--wine-tint); }
.st-inline-status { font-weight: 600; }
.st-inline-assignee.unset { color: var(--muted); font-style: italic; }
/* 必須/任意トグル（パラメータパネルの .tpp-seg と同じ見た目） */
.st-inline-req {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.st-inline-req span {
  padding: 3px 9px;
  font-size: 11px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.st-inline-req span.on { background: var(--wine); color: #fff; font-weight: 600; }
.subtask-row.done .st-inline-controls { opacity: 0.6; }

/* セッションコピーモーダル */
.sc-modal {
  position: fixed;
  inset: 0;
  background: rgba(44, 24, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.sc-modal-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.sc-modal-box .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.sc-modal-box .modal-head h3 { margin: 0; font-size: 17px; color: var(--wine); }
.sc-modal-box .modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
}
.sc-modal-box .modal-body { padding: 20px; }
.sc-desc { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.sc-desc strong { color: var(--wine); }
.sc-list { display: flex; flex-direction: column; gap: 8px; }
.sc-opt {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
}
.sc-opt:hover { background: var(--cream-2); }
.sc-opt:has(input:checked) {
  border-color: var(--wine);
  background: var(--wine-tint);
}
.sc-opt input[type="radio"] { margin: 0; cursor: pointer; }
.sc-opt-name { font-weight: 600; font-size: 14px; }
.sc-opt-date { font-size: 12px; color: var(--muted); }
.sc-warn {
  display: block;
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--warn-text);
  margin-top: 4px;
}
.sc-modal-box .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.sec-actions .sec-copy {
  cursor: pointer;
  color: var(--wine);
  font-weight: 600;
}
.sec-actions .sec-copy:hover { text-decoration: underline; }

/* 完了タスクの「チェックを入れた人」表示 */
.st-doneby {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #E8F5EC;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.st-doneby .db-icon { font-size: 11px; }
.st-doneby .db-date {
  margin-left: 4px;
  font-weight: 400;
  color: #4F7A5C;
  opacity: 0.85;
}
.st-remove {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}
.st-remove:hover { color: var(--danger); }

/* ============================================================
 * タスクコメントのプレビュー（折りたたみ時の一覧表示）（2026-05-29 追加）
 * 「💬 名前：本文先頭…（N件）」を1チップで表示。クリックでタスク展開。
 * ============================================================ */
.st-comment-preview {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  padding: 4px 10px;
  background: var(--wine-tint, #F5EBE8);
  border-left: 3px solid var(--wine);
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.4;
  max-width: 100%;
  cursor: pointer;
}
.st-comment-preview:hover { background: #EFDCD7; }
.st-comment-preview .stc-icon { font-size: 12px; flex-shrink: 0; }
.st-comment-preview .stc-author {
  font-weight: 700;
  color: var(--wine);
  flex-shrink: 0;
}
.st-comment-preview .stc-author.is-ai {
  color: var(--ai);
}
.st-comment-preview .stc-sep {
  color: var(--muted);
  margin-right: 2px;
}
.st-comment-preview .stc-body {
  color: var(--ink-soft);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-comment-preview .stc-count {
  margin-left: 4px;
  font-weight: 600;
  color: var(--wine);
  background: #fff;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10.5px;
}

/* ============================================================
 * タスクコメントスレッド（展開時、renderParamPanel 末尾）（2026-05-29 追加）
 * ============================================================ */
.task-thread {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
}
.task-thread .tt-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--wine);
  margin-bottom: 8px;
}
.task-thread .tt-loading,
.task-thread .tt-empty {
  text-align: center;
  padding: 10px 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.task-thread .tt-list { margin-bottom: 8px; }
.task-thread .tt-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 11px;
  margin-bottom: 6px;
}
.task-thread .tt-item.is-admin-cmt {
  border-left: 3px solid var(--wine);
  background: var(--wine-tint, #F5EBE8);
}
.task-thread .tt-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.task-thread .tt-author { font-weight: 700; color: var(--ink); }
.task-thread .tt-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.task-thread .tt-role-badge.is-admin { background: var(--wine); color: #fff; }
.task-thread .tt-role-badge.is-ai { background: var(--ai); color: #fff; }
.task-thread .tt-role-badge.is-staff { background: #EFEAE6; color: var(--ink-soft); }
.task-thread .tt-date { color: var(--muted); font-size: 10.5px; }
.task-thread .tt-edited { font-size: 10px; color: var(--muted); font-style: italic; }
.task-thread .tt-body {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.task-thread .tt-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}
.task-thread .tt-actions button {
  appearance: none;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .12s;
}
.task-thread .tt-actions button:hover { border-color: var(--wine); color: var(--wine); }
.task-thread .tt-actions button.is-primary {
  background: var(--wine); border-color: var(--wine); color: #fff;
}
.task-thread .tt-actions button.is-primary:hover {
  background: var(--wine-dark, #5b252b); border-color: var(--wine-dark, #5b252b);
}
.task-thread .tt-edit-input,
.task-thread .tt-new-input {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 50px;
  line-height: 1.55;
  font-family: inherit;
  box-sizing: border-box;
}
.task-thread .tt-edit-input:focus,
.task-thread .tt-new-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}
.task-thread .tt-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 11px;
}
.task-thread .tt-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}
.task-thread .tt-hint {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
}

/* タスクのパラメータ設定パネル */
.task-param-panel {
  background: var(--cream-2);
  border-left: 3px solid var(--wine);
  padding: 13px 16px 14px 28px;
  border-bottom: 1px solid var(--line);
}
.tpp-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 11px;
}
.tpp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
  flex-wrap: wrap;
}
.tpp-label {
  width: 84px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.tpp-row select,
.tpp-row input[type="date"] {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: #fff;
  color: var(--ink);
}
.tpp-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.tpp-seg span {
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  background: #fff;
  color: var(--ink-soft);
}
.tpp-seg span.on { background: var(--wine); color: #fff; font-weight: 600; }
.tpp-inherited {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 11px;
  margin-top: 4px;
}
.tpp-inherited-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.tpp-detail-row {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
.tpp-detail-row .dl {
  display: inline-block;
  width: 70px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* タスク呼び出し */
.task-import-btn {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--wine);
  font-weight: 700;
  cursor: pointer;
  border-top: 1px dashed var(--line);
}
.task-import-btn:hover { background: var(--cream-2); }
.task-import-panel {
  background: #FCFAF6;
  border-top: 2px solid var(--wine);
  padding: 13px 16px 14px;
}
.tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.tip-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.tip-sub { font-size: 11px; color: var(--muted); }
.tip-close { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 14px; }
.tip-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 11px;
  font: inherit;
  font-size: 12px;
  margin-bottom: 8px;
}
.tip-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
}
.tip-group-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  transition: all .12s;
}
.tip-group-chip:hover { border-color: var(--wine); color: var(--wine); }
.tip-group-chip.chip-active {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}

/* ============================================================
 * タスク一括選択バー（2026-05-29 追加）
 *   検索／グループ絞り込みで「今見えているタスク」を一括チェックする
 *   補助ボタン。リスト直上に並べる。
 * ============================================================ */
.tip-bulk-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.tip-bulk-bar .tip-select-all,
.tip-bulk-bar .tip-select-clear {
  appearance: none;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .12s;
  letter-spacing: 0.01em;
}
.tip-bulk-bar .tip-select-all {
  background: linear-gradient(180deg, #FFF7E0 0%, #FCEBC2 100%);
  border-color: #E2C97A;
  color: #6B5320;
}
.tip-bulk-bar .tip-select-all:hover {
  border-color: var(--wine);
  background: linear-gradient(180deg, #FFEDC0 0%, #F7DE96 100%);
  color: var(--wine);
}
.tip-bulk-bar .tip-select-clear:hover {
  border-color: var(--wine);
  color: var(--wine);
}
.tip-bulk-bar .tip-select-all:active,
.tip-bulk-bar .tip-select-clear:active {
  transform: translateY(1px);
}

.tip-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}
.tip-group-section-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: .5px;
  background: rgba(114, 47, 55, .06);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tip-list > .tip-group-section-header:first-child { border-top: none; }
.tip-group-section-header .gh-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}
.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #F5EFE3;
}
.tip-item:last-child { border-bottom: none; }
.tip-item:hover { background: var(--cream-2); }
.tip-item.checked { background: var(--cream-2); }
.tip-check {
  width: 17px;
  height: 17px;
  border: 2px solid var(--line);
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tip-check.on { background: var(--wine); border-color: var(--wine); color: #fff; }
.tip-item-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.tip-item-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
}
.tip-count { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.tip-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }
.tip-footer .btn-ghost,
.tip-footer .btn-primary {
  font-size: 12px;
  padding: 6px 13px;
}
.tip-footer .btn-primary:disabled { opacity: .6; cursor: progress; }

/* セッション一覧（運用フェーズ） */
.session-controls {
  padding: 9px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #F5EFE3;
  background: #FCFAF6;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.session-list { padding: 0; }
.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #F5EFE3;
  font-size: 12px;
  cursor: pointer;
  transition: background .1s;
}
.session-row:last-child { border-bottom: none; }
.session-row:hover { background: var(--cream-2); }
.session-row.expanded { background: var(--cream-2); border-bottom: none; }
.ses-caret {
  font-size: 11px;
  color: var(--muted);
  transition: transform .15s;
}
.session-row.expanded .ses-caret { transform: rotate(90deg); }
.ses-status {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
}
.ses-status.todo { background: #fff; border: 2px solid var(--line); }
.ses-status.in_progress { background: var(--gold); }
.ses-status.done { background: var(--ok); }
.ses-caret { flex: none; }
.ses-status { flex: none; }
/* 開催日チップ（左側・目立たせる） */
.ses-date-chip {
  flex: none;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--wine);
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  border-radius: 5px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ses-date-chip.unset {
  color: var(--muted);
  background: transparent;
  border-left-color: var(--line);
  font-weight: 600;
}
.ses-date-chip .ses-time {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.ses-num {
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ses-type-tag {
  flex: none;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.tag-main { background: #F4EAD8; color: #7A5A1F; }
.tag-supplementary { background: #E1DCE8; color: #4A3D6B; }
.tag-special { background: #DDE8E0; color: #2E6B43; }
.ses-progress {
  flex: none;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.ses-progress.done { color: var(--ok); font-weight: 700; }
.ses-progress.partial { color: #7A5A1F; font-weight: 600; }

/* セッションを展開したときの中身（各回の運用タスク） */
.session-expanded-content {
  background: #FCFAF6;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  padding: 4px 0 4px 14px;
}
.sec-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 8px 16px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sec-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.sec-edit {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--wine);
  border: 1px solid var(--wine);
  border-radius: 7px;
  padding: 6px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .12s;
}
.sec-edit:hover { background: #5c252c; border-color: #5c252c; }
.sec-delete {
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.sec-delete:hover {
  color: var(--danger);
  background: rgba(179, 58, 58, .08);
}
.sec-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 16px;
}
.session-expanded-content .subtask-list { padding: 0 0 2px; }

/* セッション追加ボタン／フォーム */
.session-add-btn {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--wine);
  font-weight: 700;
  cursor: pointer;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.session-add-btn:hover { background: var(--cream-2); }

.session-add-form {
  background: #FCFAF6;
  border-top: 2px solid var(--wine);
  padding: 13px 16px 14px;
}
.saf-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.saf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
}
.saf-label {
  width: 60px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.saf-row:has(textarea) { align-items: flex-start; }
.saf-row:has(textarea) .saf-label { margin-top: 6px; }
.saf-row textarea {
  flex: 1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}
.saf-row select,
.saf-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
}
.saf-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.saf-foot .btn-ghost,
.saf-foot .btn-primary {
  font-size: 12px;
  padding: 6px 13px;
}
.saf-error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid #F0CFCF;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 700px) {
  /* モバイル: check / due / main / remove（担当は非表示） */
  .subtask-row { grid-template-columns: 22px 140px 1fr 26px; gap: 8px; padding: 9px 12px; }
  /* モバイルではインライン編集コントロールを隠し、従来どおりタップでパネル編集に委ねる */
  .subtask-row .st-inline-controls { display: none; }
  .st-due { font-size: 11.5px; padding: 3px 7px; }
  /* モバイルでは開催日チップと完了状況を優先表示し、種別タグ・工数チップは隠す */
  .session-row .ses-type-tag,
  .session-row .vol-chip { display: none; }
}

@media (max-width: 540px) {
  .app-main { padding: 20px 16px 48px; }
  .app-header { padding: 10px 16px; }
}

/* ===== 講座追加モーダル ===== */
/* モックアップ mockup_v1.html の .course-add-modal / .cam-* を踏襲 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(42, 35, 32, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.course-add-modal {
  background: #fff;
  border-radius: 14px;
  width: 560px;
  max-width: 100%;
  box-shadow: 0 12px 48px rgba(42, 35, 32, .25);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* セッションの受講者数（通し＋この回のみ） */
.ses-attendees { font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.ses-attendees b { color: var(--wine, var(--wine)); font-size: 15px; }
.ses-att-bd { font-size: 11px; color: var(--muted); margin-left: 6px; }

/* セッション展開時の構成情報サマリー（試飲ワイン・容量・資料など＋注意事項） */
.ses-spec-summary { padding: 4px 16px 10px; }
.ses-spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ses-spec-chip {
  font-size: 11px;
  color: var(--ink-soft, #4A423E);
  background: var(--cream-2, #F1EBE4);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.ses-spec-notes {
  font-size: 12px;
  color: var(--ink-soft, #4A423E);
  background: var(--cream, var(--cream));
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold, var(--gold));
  border-radius: 6px;
  padding: 7px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 講座編集フォーム：開催日フィールドを目立たせる（重要項目のため最上部に配置） */
.cef-opening-field {
  background: rgba(200, 169, 81, .08);
  border: 1px solid rgba(200, 169, 81, .45);
  border-radius: 8px;
  padding: 10px 12px;
}
.cef-opening-field label { color: var(--wine, var(--wine)); }

/* 開催日変更時の「タスク連動」確認モーダル */
.date-cascade-overlay { align-items: center; z-index: 200; }
.dc-modal { width: 440px; }
.dc-modal .cam-head { color: var(--wine, var(--wine)); }
.dc-lead { font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }
.dc-lead .dc-date {
  display: inline-block; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  margin: 2px 0;
}
.dc-lead .dc-date.old { background: var(--cream-2, #F1EBE4); color: var(--muted, #6B635E); text-decoration: line-through; }
.dc-lead .dc-date.new { background: rgba(114, 47, 55, .10); color: var(--wine, var(--wine)); }
.dc-lead .dc-arrow { margin: 0 6px; color: var(--muted, #6B635E); font-weight: 700; }
.dc-note {
  font-size: 13px; line-height: 1.7; color: var(--ink-soft, #4A423E);
  background: var(--cream, var(--cream)); border: 1px solid var(--line);
  border-left: 3px solid var(--gold, var(--gold));
  border-radius: 8px; padding: 10px 12px; margin: 0;
}
.dc-foot {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 22px 18px; border-top: 1px solid var(--line);
}
.dc-foot .btn-primary, .dc-foot .btn-ghost { width: 100%; justify-content: center; }
.cam-head {
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.cam-head .cam-close {
  margin-left: auto;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
}
.cam-head .cam-close:hover { color: var(--ink); }
.cam-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cam-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.cam-field input,
.cam-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
}
.cam-field input:focus,
.cam-field select:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}
.cam-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cam-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.cam-type-choice {
  display: flex;
  gap: 8px;
}
.cam-type {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-soft);
  transition: all .12s;
}
.cam-type .cam-type-note,
.cam-type > span:not(.cam-type-main) {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
}
.cam-type .cam-type-main { display: block; }
.cam-type:hover { border-color: var(--bl, var(--wine)); }
.cam-type.selected {
  border-color: var(--bl, var(--wine));
  background: var(--bl-tint, var(--cream-2));
  color: var(--wine);
}
.cam-type.selected span { color: var(--wine); }
.cam-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: .5px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cam-hint-sm {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin: 8px 0 4px;  /* 旧 -8px はinput下端と文字が重なる視覚バグの原因だったので 8px に変更 */
}
.cam-date-group {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 9px;
}
.cam-dg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cam-dg-name {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  background: #fff;
  color: var(--ink);
}
.cam-dg-del {
  margin-left: auto;
  font-size: 11px;
  color: var(--danger);
  cursor: pointer;
  flex-shrink: 0;
}
.cam-dg-row {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.cam-dg-row select,
.cam-dg-row input {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
}
.cam-dg-count { width: 52px; }
.cam-dg-preview {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
  background: #fff;
  border-radius: 5px;
  padding: 5px 9px;
  border: 1px dashed var(--line);
  line-height: 1.6;
}
.cam-dg-time-row {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* 日程グループ共通の構成情報（試飲ワイン・容量など＋注意事項） */
.cam-dg-spec {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(200, 169, 81, .05);
}
.cam-dg-spec-note { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.cam-dg-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.cam-dg-spec label,
.cam-dg-notes-wrap {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.cam-dg-notes-wrap { margin-top: 8px; }
.cam-dg-spec select,
.cam-dg-spec input,
.cam-dg-spec textarea {
  display: block;
  width: 100%;
  margin-top: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
}
.cam-dg-spec textarea { resize: vertical; min-height: 60px; line-height: 1.6; }

/* ワイン構成（容量×本数）の可変行エディタ */
.wb-editor { margin-top: 3px; }
.wb-rows { display: flex; flex-direction: column; gap: 6px; }
.wb-row { display: flex; align-items: center; gap: 6px; }
.wb-row .wb-ml { width: 88px; flex: none; }
.wb-row .wb-count { width: 70px; flex: none; }
.wb-row input {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
}
.wb-x, .wb-unit { font-size: 11px; color: var(--muted); font-weight: 400; }
.wb-del {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.wb-del:hover { color: var(--danger, var(--danger)); background: rgba(179, 58, 58, .08); }
/* 行が1つだけのときは削除✕を出さない（消す意味がないため）。複数行のときだけ表示。 */
.wb-rows .wb-row:only-child .wb-del { display: none; }
.wb-add {
  margin-top: 6px;
  border: 1px dashed var(--line);
  background: #fff;
  color: var(--wine, var(--wine));
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}
.wb-add:hover { background: var(--cream, var(--cream)); }
.wb-total {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wine, var(--wine));
}
.cam-dg-time-row input[type="time"] {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
}
.cam-dg-dates-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.cam-dg-dates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 5px;
}
.cam-dg-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.cam-dg-date-num {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  width: 28px;
  flex-shrink: 0;
}
.cam-dg-date-row input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
  flex: 1;
}
.cam-dg-date-row input[type="time"].cam-dg-date-time {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
  flex-shrink: 0;
  width: 104px;
}
.cam-dg-apply-time {
  appearance: none;
  border: 1px solid var(--wine);
  background: #fff;
  color: var(--wine);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}
.cam-dg-apply-time:hover { background: var(--wine); color: #fff; }
.cam-dg-date-del {
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  padding: 0 5px;
  flex-shrink: 0;
}
.cam-dg-date-del:hover { color: #8B2D2D; }
.cam-dg-add-date {
  font-size: 11px;
  color: var(--wine);
  font-weight: 600;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
  background: #fff;
}
.cam-dg-add-date:hover { background: var(--cream-2); }
.cam-add-group {
  font-size: 12px;
  color: var(--wine);
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.cam-add-group:hover { background: var(--cream-2); }
.cam-total {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 9px;
}
.cam-total strong { color: var(--wine); }
.cam-error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid #F0CFCF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.cam-foot {
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #FCFAF6;
}
.cam-foot .btn-ghost,
.cam-foot .btn-primary {
  font-size: 13px;
  padding: 8px 16px;
}
.cam-foot .btn-primary:disabled { opacity: .6; cursor: progress; }

@media (max-width: 540px) {
  .modal-overlay { padding: 20px 12px; }
  .cam-2col { grid-template-columns: 1fr; }
}

/* ============================================================
   ナビゲーション（画面切替）
   ============================================================ */
.app-nav {
  display: flex;
  gap: 4px;
  padding: 8px 24px 10px;
  background: var(--cream);
}
.app-nav-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
}
.app-nav-item:hover { background: var(--wine-tint); color: var(--wine); }
.app-nav-item.active {
  background: var(--wine);
  color: #fff;
}

.app-page.hidden { display: none !important; }

/* ============================================================
   タスクマスタ画面
   ============================================================ */
.tm-search-input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  flex: 1;
  max-width: 320px;
}
.tm-search-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}
.tm-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.tmst-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tmst-simple-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid #F5EFE3;
  cursor: pointer;
  transition: background .1s;
}
.tmst-simple-row:last-child { border-bottom: none; }
.tmst-simple-row:hover { background: var(--cream-2); }
.tmst-simple-row.expanded { background: var(--cream-2); border-bottom: none; }

/* グループ見出し（「すべて」表示時） */
.tmst-group-header {
  padding: 12px 18px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: .5px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.tmst-group-header[draggable="true"] { cursor: grab; }
.tmst-group-header[draggable="true"]:active { cursor: grabbing; }
.tmst-list > .tmst-group-header:first-child { border-top: none; }
.tmst-group-header .gh-caret {
  font-size: 22px;
  font-weight: 700;
  color: var(--wine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
}
/* 折りたたみ＝＋、展開＝− */
.tmst-group-header.collapsed .gh-caret::before { content: '+'; }
.tmst-group-header:not(.collapsed) .gh-caret::before { content: '\2212'; } /* − */
.tmst-group-header.collapsed { border-bottom: 1px solid var(--line); }
.tmst-group-header .gh-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.tmst-group-header .gh-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

/* ドラッグ＆ドロップ */
.tmst-simple-row[draggable="true"] { cursor: grab; }
.tmst-simple-row[draggable="true"]:active { cursor: grabbing; }
.tmst-simple-row.dragging,
.tmst-group-header.dragging { opacity: 0.4; }
.tmst-simple-row.drop-before {
  box-shadow: inset 0 3px 0 0 var(--wine);
}
.tmst-simple-row.drop-after {
  box-shadow: inset 0 -3px 0 0 var(--wine);
}
.tmst-group-header.drop-before {
  background: var(--wine-tint);
  box-shadow: inset 0 3px 0 0 var(--wine);
}
.tmst-group-header.drop-after {
  background: var(--wine-tint);
  box-shadow: inset 0 -3px 0 0 var(--wine);
}
.tmst-simple-num {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  width: 28px;
  flex-shrink: 0;
  padding-top: 3px;
}
.tmst-simple-body { flex: 1; min-width: 0; }
.tmst-simple-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.tmst-simple-desc {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.65;
}
.tmst-act-tag {
  font-size: 10px;
  color: var(--muted);
  background: var(--cream-2);
  padding: 0 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  height: 24px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  align-self: center;
}
.tmst-lead-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--wine-dark, #5C2A33);
  background: var(--wine-tint, #F5E6E8);
  padding: 0 9px;
  border-radius: 999px;
  white-space: nowrap;
  height: 24px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  align-self: center;
  border: 1px solid var(--wine, var(--wine));
}
.tmst-assignee-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--ok-text);
  background: #E6F0E4;
  border: 1px solid #Bcd6B8;
  padding: 0 9px;
  border-radius: 999px;
  white-space: nowrap;
  height: 24px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
}
.tmst-assignee-tag.unset { color: var(--muted); background: #F5F2EC; border-color: var(--line); font-weight: 600; }
.tmst-bottling-tag {
  font-size: 10px; font-weight: 800; color: #fff; background: var(--wine); border: 1px solid var(--wine);
  padding: 0 9px; border-radius: 999px; white-space: nowrap; height: 24px;
  display: inline-flex; align-items: center; align-self: center; flex-shrink: 0;
}
.tm-bottling-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tm-bottling-toggle input { width: 16px; height: 16px; }
.tm-bottling-opts { margin-top: 8px; padding: 10px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.tmst-ai-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--ai-tint);
  color: var(--ai);
  white-space: nowrap;
  height: 24px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  align-self: center;
}
.tmst-group-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--wine-tint);
  color: var(--wine);
  white-space: nowrap;
  height: 24px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  align-self: center;
}
.tmst-group-tag.empty {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  border: 1px dashed var(--line);
}

/* ============================================================
   カテゴリマスタ画面
   ============================================================ */
.cat-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #F5EFE3;
}
.cat-row:last-child { border-bottom: none; }
.cat-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.cat-num.phase-1 { background: var(--phase-1); }
.cat-num.phase-2 { background: var(--phase-2); }
.cat-num.phase-3 { background: var(--phase-3); }
.cat-num.phase-4 { background: var(--phase-4); }
.cat-num.phase-5 { background: var(--phase-5); }
.cat-num.phase-6 { background: var(--phase-6); }
.cat-num.phase-7 { background: var(--phase-7); }
.cat-num.phase-8 { background: var(--phase-8); }
.cat-num.phase-9 { background: var(--phase-9); }
.cat-num.phase-10 { background: var(--phase-10); }
.cat-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 11px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
}
.cat-name-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}
.cat-name-input:disabled { background: var(--cream-2); color: var(--ink-soft); }
.cat-color-input {
  width: 44px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
}
.cat-color-input:disabled { cursor: not-allowed; opacity: .6; }
.cat-save {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--wine);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.cat-save:hover { background: var(--wine-dark); }
.cat-save:disabled { opacity: .6; cursor: progress; }
.cat-save.saved { background: var(--ok); }

/* ============================================================
   講師マスタ画面
   ============================================================ */
.instr-status-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.instr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.instr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .12s, box-shadow .15s;
}
.instr-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(42, 35, 32, 0.10), 0 8px 24px rgba(42, 35, 32, 0.06);
}
.instr-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.instr-card-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.instr-card-kana {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.instr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.instr-status-badge.contract { background: rgba(46, 134, 89, 0.14); color: #1F6242; }
.instr-status-badge.guest    { background: rgba(200, 169, 81, 0.18); color: #8A7022; }
.instr-status-badge.paused   { background: rgba(148, 144, 140, 0.18); color: var(--ink-soft); }
/* スタッフ用ステータス・区分バッジ */
.instr-status-badge.active  { background: rgba(46, 134, 89, 0.14); color: #1F6242; }
.instr-status-badge.leave   { background: rgba(148, 144, 140, 0.18); color: var(--ink-soft); }
.instr-status-badge.person  { background: rgba(74, 143, 185, 0.16); color: var(--info-text); }
.instr-status-badge.ai      { background: rgba(123, 94, 168, 0.18); color: #5E4691; }
.instr-status-badge.role-admin   { background: rgba(114, 47, 55, 0.16); color: var(--wine-dark); }
.instr-status-badge.role-leader  { background: rgba(200, 169, 81, 0.20); color: #8A7022; }
.instr-status-badge.role-member  { background: rgba(148, 144, 140, 0.14); color: var(--ink-soft); }
.instr-status-badge.role-viewer  { background: rgba(148, 144, 140, 0.10); color: var(--muted); }
.instr-status-badge.role-ai      { background: rgba(123, 94, 168, 0.18); color: #5E4691; }
/* スタッフカードのチーム所属チップ */
.instr-card-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.instr-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--ink-soft);
}

/* ============================================================
   改善ボード画面
   ============================================================ */
.imp-status-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 12px;
}
.imp-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  justify-content: flex-end;
}
.imp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.imp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--card-color, var(--wine));
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.imp-card.imp-cat-improvement { --card-color: var(--ok); }
.imp-card.imp-cat-bug { --card-color: var(--danger); }
.imp-card.imp-cat-question { --card-color: var(--ai); }
.imp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.imp-card-cat {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-color, var(--wine));
  color: #fff;
  font-weight: 700;
}
.imp-card-status {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.imp-card-status.submitted { background: rgba(0,0,0,.08); color: var(--ink-soft); }
.imp-card-status.reviewing { background: rgba(199,122,62,.18); color: var(--p2-dark); }
.imp-card-status.accepted  { background: rgba(46,134,89,.16); color: #1F6242; }
.imp-card-status.fixed     { background: rgba(74,143,185,.18); color: var(--info-text); }
.imp-card-status.rejected  { background: rgba(148,144,140,.20); color: var(--muted); }
.imp-card-title {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}
/* 折りたたみ一覧化 */
.imp-card { gap: 0; padding: 0; }
.imp-card-head {
  padding: 11px 16px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background .1s;
}
.imp-card-head:hover { background: var(--cream-2, #F1EBE4); }
.imp-card.is-collapsed .imp-card-title { font-size: 14px; }
.imp-card.is-collapsed .imp-card-head:hover { background: var(--cream-2, #F1EBE4); }
.imp-caret {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-weight: 700;
  color: var(--wine, var(--wine));
  font-size: 15px;
}
.imp-head-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ink-soft, #6B635E);
  white-space: nowrap;
}
.imp-card-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: -1px;
}
/* スタッフ絞り込みバナー */
.imp-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(114, 47, 55, .08);
  border: 1px solid rgba(114, 47, 55, .25);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}
.imp-filter-clear {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.imp-filter-clear:hover { background: var(--cream, var(--cream)); }
/* ランキング行クリック可能 */
.imp-rank-row.clickable { cursor: pointer; }
.imp-rank-row.clickable:hover { background: var(--cream-2, #F1EBE4); }
.imp-card-meta {
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.imp-card-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
}
.imp-card-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
}
@media (max-width: 800px) {
  .imp-card-extra { grid-template-columns: 1fr; }
}
.imp-extra-block {
  background: var(--cream);
  border: 1px solid #F5EFE3;
  border-radius: 6px;
  padding: 8px 10px;
}
.imp-extra-block .lbl {
  font-size: 10.5px;
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.imp-extra-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.imp-card-shot {
  margin-top: 4px;
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.imp-card-shot img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: 6px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: opacity .15s;
}
.imp-card-shot img:hover { opacity: 0.92; }
.imp-card-shot .imp-shot-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .15s;
}
.imp-card-shot:hover .imp-shot-overlay { opacity: 1; }
.imp-card-shot .imp-shot-overlay button {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.imp-card-shot .imp-shot-overlay button:hover { background: rgba(0, 0, 0, 0.9); }
.imp-card-shot .imp-shot-overlay button.copied { background: var(--ok); }

/* ライトボックス（拡大表示） */
.imp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
  animation: imp-lb-in .15s ease-out;
}
@keyframes imp-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.imp-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.imp-lightbox .lb-toolbar {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  cursor: default;
}
.imp-lightbox .lb-toolbar button {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .12s, transform .12s;
}
.imp-lightbox .lb-toolbar button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.imp-lightbox .lb-toolbar button.copied {
  background: var(--ok);
  border-color: var(--ok);
}
.imp-lightbox .lb-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  letter-spacing: .5px;
}
.imp-admin-comment {
  background: var(--wine-tint);
  border-left: 3px solid var(--wine);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--wine-dark);
}

/* ============================================================
 * スレッド型コメント（2026-05-29 追加）
 * ----------------------------------------------------------------
 * 改善依頼カードの本体下に表示。折りたたみ式のアコーディオン構造で、
 * 開閉ボタンの下にコメント一覧＋投稿フォームが出る。
 * 管理者コメントはワインレッドの左帯で「ソフト更新者」として目立たせる。
 * ============================================================ */
.imp-thread-section {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.imp-thread-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: linear-gradient(180deg, #FCF8F1 0%, #F8F2E5 100%);
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.imp-thread-toggle:hover { background: linear-gradient(180deg, #F8F2E5 0%, #F0E8D5 100%); }
.imp-thread-caret {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wine);
  color: var(--wine);
  border-radius: 4px;
  font-weight: 800;
  font-size: 13px;
  background: #fff;
}
.imp-thread-count { font-weight: 600; color: var(--wine); }
.imp-thread-hint {
  margin-left: 4px;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.imp-thread-body {
  padding: 12px 14px 14px;
  background: #FDFBF5;
  border-top: 1px solid var(--line);
}
.imp-thread-loading {
  text-align: center;
  padding: 14px 0;
  color: var(--muted);
  font-size: 12px;
}
.imp-thread-empty {
  text-align: center;
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* 1コメント */
.imp-cmt {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.imp-cmt:last-of-type { margin-bottom: 12px; }
.imp-cmt.is-admin-cmt {
  border-left: 3px solid var(--wine);
  background: var(--wine-tint);
}
.imp-cmt-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.imp-cmt-author {
  font-weight: 700;
  color: var(--ink);
}
.imp-cmt-role-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.imp-cmt-role-badge.is-admin {
  background: var(--wine);
  color: #fff;
}
.imp-cmt-role-badge.is-ai {
  background: var(--ai);
  color: #fff;
}
.imp-cmt-role-badge.is-staff {
  background: #EFEAE6;
  color: var(--ink-soft);
}
.imp-cmt-date {
  color: var(--muted);
  font-size: 11px;
}
.imp-cmt-edited {
  color: var(--muted);
  font-size: 10.5px;
  font-style: italic;
}
.imp-cmt-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
/* コメント添付画像（保存済み） */
.imp-cmt-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.imp-cmt-img {
  position: relative;
  display: inline-block;
}
.imp-cmt-img img {
  max-width: 220px;
  max-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  display: block;
}
.imp-cmt-img-del {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--wine);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.imp-cmt-img-del:hover { background: #5a242b; }

/* 送信前の保留画像プレビュー */
.imp-cmt-pending {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.imp-cmt-pending:not(:empty) { margin: 8px 0 4px; }
.imp-pending-img {
  position: relative;
  display: inline-block;
}
.imp-pending-img img {
  max-width: 110px;
  max-height: 90px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  display: block;
}
.imp-pending-del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--wine);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.imp-cmt-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: flex-end;
}
.imp-cmt-actions button {
  appearance: none;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
}
.imp-cmt-actions button:hover {
  border-color: var(--wine);
  color: var(--wine);
}
.imp-cmt-actions button.is-primary {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}
.imp-cmt-actions button.is-primary:hover {
  background: var(--wine-dark);
  border-color: var(--wine-dark);
}
.imp-cmt-edit-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 60px;
  line-height: 1.55;
  font-family: inherit;
  box-sizing: border-box;
}
.imp-cmt-edit-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}

/* 新規投稿フォーム */
.imp-cmt-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}
.imp-cmt-new-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 50px;
  line-height: 1.55;
  font-family: inherit;
  box-sizing: border-box;
}
.imp-cmt-new-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}
.imp-cmt-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.imp-cmt-hint {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
}
.imp-cmt-form-foot button.is-primary {
  appearance: none;
  background: var(--wine);
  color: #fff;
  border: 1px solid var(--wine);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.imp-cmt-form-foot button.is-primary:hover {
  background: var(--wine-dark);
  border-color: var(--wine-dark);
}
.imp-cmt-form-foot button.is-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* メタ部の💬N件バッジ */
.imp-meta-comments {
  background: var(--wine-tint);
  color: var(--wine);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}

.imp-card-foot {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid #F5EFE3;
  flex-wrap: wrap;
}
.imp-card-foot button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .12s;
}
.imp-card-foot button:hover { background: var(--cream-2); color: var(--ink); }
.imp-card-foot button.accept { color: var(--ok); border-color: rgba(46,134,89,.4); }
.imp-card-foot button.accept:hover { background: rgba(46,134,89,.10); }
.imp-card-foot button.reject { color: var(--danger); border-color: rgba(179,58,58,.4); }
.imp-card-foot button.reject:hover { background: rgba(179,58,58,.10); }
.imp-card-foot button.fixed-btn { color: var(--info-text); border-color: rgba(74,143,185,.4); }
.imp-card-foot button.fixed-btn:hover { background: rgba(74,143,185,.10); }
.imp-card-foot button.copy-prompt {
  color: var(--ai);
  border-color: rgba(123,94,168,.4);
}
.imp-card-foot button.copy-prompt:hover { background: rgba(123,94,168,.10); }

/* 管理者用ステータス・プルダウン（カードフッター右側に置く） */
.imp-status-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-soft);
}
.imp-status-picker-lbl { font-weight: 600; }
.imp-status-picker select {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 28px 5px 10px;
  border-radius: 6px;
  background-color: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23722F37' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.imp-status-picker select:hover { background-color: var(--cream-2); }
.imp-status-picker select:disabled { opacity: 0.55; cursor: wait; }
.imp-status-picker select:focus { outline: 2px solid rgba(114,47,55,.35); outline-offset: 1px; }

.imp-ai-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.imp-ai-hint { font-size: 10.5px; color: var(--muted); }
.imp-ai-status {
  font-size: 11px;
  color: var(--ai);
  font-weight: 600;
  margin-left: 10px;
  opacity: 0;
  transition: opacity .2s;
}
.imp-ai-status.is-running {
  opacity: 1;
  animation: imp-ai-pulse 1.2s ease-in-out infinite;
}
.imp-ai-status.is-done {
  opacity: 1;
  color: var(--ok);
}
@keyframes imp-ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* スクショ貼り付けゾーン */
.imp-shot-zone {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: var(--cream);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.imp-shot-zone:hover {
  border-color: var(--wine);
  background: var(--wine-tint);
}
.imp-shot-zone.is-dragover {
  border-color: var(--wine);
  background: var(--wine-tint);
  transform: scale(1.01);
}
.imp-shot-zone.has-image {
  padding: 8px;
  cursor: default;
}
.imp-shot-empty { font-size: 13px; color: var(--ink-soft); }
.imp-shot-empty strong { color: var(--ink); }
.imp-shot-zone.has-image .imp-shot-empty { display: none; }
#imp-shot-preview {
  display: none;
  max-width: 100%;
  max-height: 360px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.imp-shot-zone.has-image #imp-shot-preview { display: block; }
.imp-shot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
}
.imp-shot-zone.has-image .imp-shot-remove { display: block; }
.imp-shot-remove:hover { background: var(--danger); }
.imp-shot-meta {
  display: none;
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
}
.imp-shot-zone.has-image .imp-shot-meta { display: block; }

/* ランキングテーブル */
.imp-ranking {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.imp-rank-row {
  display: grid;
  grid-template-columns: 48px 1fr repeat(4, 80px) 110px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: var(--cream);
  border: 1px solid #F5EFE3;
  border-radius: 6px;
  font-size: 13px;
}
.imp-rank-row.header {
  background: var(--wine-tint);
  font-size: 11px;
  font-weight: 700;
  color: var(--wine-dark);
  border-color: var(--wine);
}
.imp-rank-row .rank-no {
  font-size: 16px;
  font-weight: 800;
  color: var(--wine);
  text-align: center;
}
.imp-rank-row.top1 .rank-no { color: var(--gold); font-size: 20px; }
.imp-rank-row.top2 .rank-no { color: var(--muted); font-size: 18px; }
.imp-rank-row.top3 .rank-no { color: #B87333; font-size: 18px; }
.imp-rank-row .rank-name { font-weight: 700; }
.imp-rank-row .rank-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.imp-rank-row .rank-num.accepted { color: var(--ok); font-weight: 700; }
.imp-rank-row .rank-num.pending { color: var(--p2-dark); }
.imp-rank-row .rank-rate {
  text-align: right;
  font-weight: 600;
}
.imp-rank-row .rank-date {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: right;
}
@media (max-width: 700px) {
  .imp-rank-row {
    grid-template-columns: 40px 1fr 70px;
  }
  .imp-rank-row .rank-fixed, .imp-rank-row .rank-pending, .imp-rank-row .rank-rate, .imp-rank-row .rank-date {
    display: none;
  }
}

/* チームマスタ画面 */
.team-card {
  position: relative;
  border-top: 4px solid var(--team-color, var(--wine));
}
.team-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-color-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
.team-leader-line {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}
/* チーム名と並ぶ「権威ある」リーダーバッジ */
.team-card-headline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-leader-crown {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: linear-gradient(135deg, #FBF1D5 0%, #F1D67D 100%);
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(184,146,74,0.25), inset 0 1px 0 rgba(255,255,255,0.7);
  width: fit-content;
  position: relative;
  overflow: hidden;
}
.team-leader-crown::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--team-color, var(--wine));
}
.team-leader-crown .tlc-crown {
  font-size: 16px;
  padding: 5px 0 5px 11px;
  filter: drop-shadow(0 1px 1px rgba(100,70,0,0.3));
  line-height: 1;
}
.team-leader-crown .tlc-role {
  font-size: 10.5px;
  font-weight: 700;
  color: #6B4F1A;
  letter-spacing: 0.06em;
  padding: 5px 8px 5px 7px;
  text-transform: none;
  border-right: 1px solid rgba(168,127,40,0.35);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.team-leader-crown .tlc-name {
  font-size: 14px;
  font-weight: 700;
  color: #3D2A05;
  padding: 5px 12px 5px 10px;
  letter-spacing: 0.01em;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.team-leader-crown.unset {
  background: #F4F0E8;
  border-color: var(--line);
  box-shadow: none;
}
.team-leader-crown.unset .tlc-crown { opacity: 0.45; filter: grayscale(1); }
.team-leader-crown.unset::before { background: var(--line); }
.team-leader-crown.unset .tlc-role { color: var(--muted); border-right-color: var(--line); }
.team-leader-crown.unset .tlc-name { color: var(--muted); font-style: italic; font-weight: 500; }
.team-members-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
}
.team-member-pill.leader {
  background: var(--team-color, var(--wine));
  color: #fff;
  border-color: transparent;
}
.team-member-pill.leave { opacity: 0.55; text-decoration: line-through; }
.team-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}

/* チーム編集モーダル：メンバーチェックリスト */
.team-members-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
}
.team-members-list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.team-members-list label.is-ai { color: #5E4691; }
.team-members-list label.is-leave { color: var(--muted); }
.team-members-list input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}
.instr-card-cert {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.instr-card-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--ink-soft);
}
.instr-card-contact span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.instr-card-bio {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.instr-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.instr-field-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--wine-tint);
  color: var(--wine-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.instr-card-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.instr-card-foot {
  margin-top: auto;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid #F5EFE3;
}
.instr-card-foot button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .12s;
}
.instr-card-foot button:hover { background: var(--cream-2); color: var(--ink); }
.instr-card-foot button.danger { color: var(--danger); }
.instr-card-foot button.danger:hover { background: rgba(179, 58, 58, 0.08); }
.instr-ct-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 13px;
}
.instr-ct-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.instr-ct-row label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.instr-edit-modal {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(42, 35, 32, .25);
  width: 90%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* カテゴリマスタ：ドラッグハンドル＆ドロップ位置インジケータ */
.cat-row[draggable="true"] { cursor: grab; }
.cat-row[draggable="true"]:active { cursor: grabbing; }
.cat-drag {
  color: var(--ink-mute);
  font-size: 14px;
  letter-spacing: -2px;
  padding: 0 4px;
  flex-shrink: 0;
  user-select: none;
  cursor: grab;
}
.cat-row.dragging { opacity: 0.4; }
.cat-row.drop-before {
  box-shadow: inset 0 3px 0 0 var(--wine);
}
.cat-row.drop-after {
  box-shadow: inset 0 -3px 0 0 var(--wine);
}

/* フェーズ番号バッジ（白抜き数字をフェーズ色の塗りつぶし円に） */
.phase-badge {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
  line-height: 1;
}
.phase-badge.phase-1 { background: var(--phase-1); }
.phase-badge.phase-2 { background: var(--phase-2); }
.phase-badge.phase-3 { background: var(--phase-3); }
.phase-badge.phase-4 { background: var(--phase-4); }
.phase-badge.phase-5 { background: var(--phase-5); }
.phase-badge.phase-6 { background: var(--phase-6); }
.phase-badge.phase-7 { background: var(--phase-7); }
.phase-badge.phase-8 { background: var(--phase-8); }
.phase-badge.phase-9 { background: var(--phase-9); }
.phase-badge.phase-10 { background: var(--phase-10); }

/* アクティブなチップ内では、塗りつぶしのコントラストが取れないため反転表示 */
.tm-group-filters .chip.chip-active .phase-badge,
.tip-group-chip.chip-active .phase-badge { background: #fff; }
.tm-group-filters .chip.phase-1.chip-active .phase-badge,
.tip-group-chip.phase-1.chip-active .phase-badge { color: var(--p1-dark); }
.tm-group-filters .chip.phase-2.chip-active .phase-badge,
.tip-group-chip.phase-2.chip-active .phase-badge { color: var(--p2-dark); }
.tm-group-filters .chip.phase-3.chip-active .phase-badge,
.tip-group-chip.phase-3.chip-active .phase-badge { color: var(--p3-dark); }
.tm-group-filters .chip.phase-4.chip-active .phase-badge,
.tip-group-chip.phase-4.chip-active .phase-badge { color: var(--p4-dark); }
.tm-group-filters .chip.phase-5.chip-active .phase-badge,
.tip-group-chip.phase-5.chip-active .phase-badge { color: var(--p5-dark); }
.tm-group-filters .chip.phase-6.chip-active .phase-badge,
.tip-group-chip.phase-6.chip-active .phase-badge { color: var(--p6-dark); }
.tm-group-filters .chip.phase-7.chip-active .phase-badge,
.tip-group-chip.phase-7.chip-active .phase-badge { color: var(--p7-dark); }
.tm-group-filters .chip.phase-8.chip-active .phase-badge,
.tip-group-chip.phase-8.chip-active .phase-badge { color: var(--p8-dark); }
.tm-group-filters .chip.phase-9.chip-active .phase-badge,
.tip-group-chip.phase-9.chip-active .phase-badge { color: var(--p9-dark); }
.tm-group-filters .chip.phase-10.chip-active .phase-badge,
.tip-group-chip.phase-10.chip-active .phase-badge { color: var(--p10-dark); }

/* フェーズ色：タスクマスタのグループバッジ */
.tmst-group-tag.phase-1 { background: var(--p1-tint); color: var(--p1-dark); }
.tmst-group-tag.phase-2 { background: var(--p2-tint); color: var(--p2-dark); }
.tmst-group-tag.phase-3 { background: var(--p3-tint); color: var(--p3-dark); }
.tmst-group-tag.phase-4 { background: var(--p4-tint); color: var(--p4-dark); }
.tmst-group-tag.phase-5 { background: var(--p5-tint); color: var(--p5-dark); }
.tmst-group-tag.phase-6 { background: var(--p6-tint); color: var(--p6-dark); }
.tmst-group-tag.phase-7 { background: var(--p7-tint); color: var(--p7-dark); }
.tmst-group-tag.phase-8 { background: var(--p8-tint); color: var(--p8-dark); }
.tmst-group-tag.phase-9 { background: var(--p9-tint); color: var(--p9-dark); }
.tmst-group-tag.phase-10 { background: var(--p10-tint); color: var(--p10-dark); }

/* フェーズ色：タスクマスタのグループ見出し */
.tmst-group-header.phase-1 { background: var(--p1-tint); color: var(--p1-dark); }
.tmst-group-header.phase-1 .gh-caret { color: var(--p1-dark); }
.tmst-group-header.phase-2 { background: var(--p2-tint); color: var(--p2-dark); }
.tmst-group-header.phase-2 .gh-caret { color: var(--p2-dark); }
.tmst-group-header.phase-3 { background: var(--p3-tint); color: var(--p3-dark); }
.tmst-group-header.phase-3 .gh-caret { color: var(--p3-dark); }
.tmst-group-header.phase-4 { background: var(--p4-tint); color: var(--p4-dark); }
.tmst-group-header.phase-4 .gh-caret { color: var(--p4-dark); }
.tmst-group-header.phase-5 { background: var(--p5-tint); color: var(--p5-dark); }
.tmst-group-header.phase-5 .gh-caret { color: var(--p5-dark); }
.tmst-group-header.phase-6 { background: var(--p6-tint); color: var(--p6-dark); }
.tmst-group-header.phase-6 .gh-caret { color: var(--p6-dark); }
.tmst-group-header.phase-7 { background: var(--p7-tint); color: var(--p7-dark); }
.tmst-group-header.phase-7 .gh-caret { color: var(--p7-dark); }
.tmst-group-header.phase-8 { background: var(--p8-tint); color: var(--p8-dark); }
.tmst-group-header.phase-8 .gh-caret { color: var(--p8-dark); }
.tmst-group-header.phase-9 { background: var(--p9-tint); color: var(--p9-dark); }
.tmst-group-header.phase-9 .gh-caret { color: var(--p9-dark); }
.tmst-group-header.phase-10 { background: var(--p10-tint); color: var(--p10-dark); }
.tmst-group-header.phase-10 .gh-caret { color: var(--p10-dark); }

/* フェーズ色：タスクマスタ画面のフィルタチップ */
.tm-group-filters .chip.phase-1 { border-color: var(--phase-1); color: var(--p1-dark); }
.tm-group-filters .chip.phase-1.chip-active { background: var(--phase-1); color: #fff; border-color: var(--phase-1); }
.tm-group-filters .chip.phase-2 { border-color: var(--phase-2); color: var(--p2-dark); }
.tm-group-filters .chip.phase-2.chip-active { background: var(--phase-2); color: #fff; border-color: var(--phase-2); }
.tm-group-filters .chip.phase-3 { border-color: var(--phase-3); color: var(--p3-dark); }
.tm-group-filters .chip.phase-3.chip-active { background: var(--phase-3); color: #fff; border-color: var(--phase-3); }
.tm-group-filters .chip.phase-4 { border-color: var(--phase-4); color: var(--p4-dark); }
.tm-group-filters .chip.phase-4.chip-active { background: var(--phase-4); color: #fff; border-color: var(--phase-4); }
.tm-group-filters .chip.phase-5 { border-color: var(--phase-5); color: var(--p5-dark); }
.tm-group-filters .chip.phase-5.chip-active { background: var(--phase-5); color: #fff; border-color: var(--phase-5); }
.tm-group-filters .chip.phase-6 { border-color: var(--phase-6); color: var(--p6-dark); }
.tm-group-filters .chip.phase-6.chip-active { background: var(--phase-6); color: #fff; border-color: var(--phase-6); }
.tm-group-filters .chip.phase-7 { border-color: var(--phase-7); color: var(--p7-dark); }
.tm-group-filters .chip.phase-7.chip-active { background: var(--phase-7); color: #fff; border-color: var(--phase-7); }
.tm-group-filters .chip.phase-8 { border-color: var(--phase-8); color: var(--p8-dark); }
.tm-group-filters .chip.phase-8.chip-active { background: var(--phase-8); color: #fff; border-color: var(--phase-8); }
.tm-group-filters .chip.phase-9 { border-color: var(--phase-9); color: var(--p9-dark); }
.tm-group-filters .chip.phase-9.chip-active { background: var(--phase-9); color: #fff; border-color: var(--phase-9); }
.tm-group-filters .chip.phase-10 { border-color: var(--phase-10); color: var(--p10-dark); }
.tm-group-filters .chip.phase-10.chip-active { background: var(--phase-10); color: #fff; border-color: var(--phase-10); }

/* フェーズ色：講座詳細のタスク呼び出しパネル チップ・見出し */
.tip-group-chip.phase-1 { border-color: var(--phase-1); color: var(--p1-dark); }
.tip-group-chip.phase-1.chip-active { background: var(--phase-1); color: #fff; border-color: var(--phase-1); }
.tip-group-chip.phase-2 { border-color: var(--phase-2); color: var(--p2-dark); }
.tip-group-chip.phase-2.chip-active { background: var(--phase-2); color: #fff; border-color: var(--phase-2); }
.tip-group-chip.phase-3 { border-color: var(--phase-3); color: var(--p3-dark); }
.tip-group-chip.phase-3.chip-active { background: var(--phase-3); color: #fff; border-color: var(--phase-3); }
.tip-group-chip.phase-4 { border-color: var(--phase-4); color: var(--p4-dark); }
.tip-group-chip.phase-4.chip-active { background: var(--phase-4); color: #fff; border-color: var(--phase-4); }
.tip-group-chip.phase-5 { border-color: var(--phase-5); color: var(--p5-dark); }
.tip-group-chip.phase-5.chip-active { background: var(--phase-5); color: #fff; border-color: var(--phase-5); }
.tip-group-chip.phase-6 { border-color: var(--phase-6); color: var(--p6-dark); }
.tip-group-chip.phase-6.chip-active { background: var(--phase-6); color: #fff; border-color: var(--phase-6); }
.tip-group-chip.phase-7 { border-color: var(--phase-7); color: var(--p7-dark); }
.tip-group-chip.phase-7.chip-active { background: var(--phase-7); color: #fff; border-color: var(--phase-7); }
.tip-group-chip.phase-8 { border-color: var(--phase-8); color: var(--p8-dark); }
.tip-group-chip.phase-8.chip-active { background: var(--phase-8); color: #fff; border-color: var(--phase-8); }
.tip-group-chip.phase-9 { border-color: var(--phase-9); color: var(--p9-dark); }
.tip-group-chip.phase-9.chip-active { background: var(--phase-9); color: #fff; border-color: var(--phase-9); }
.tip-group-chip.phase-10 { border-color: var(--phase-10); color: var(--p10-dark); }
.tip-group-chip.phase-10.chip-active { background: var(--phase-10); color: #fff; border-color: var(--phase-10); }

.tip-group-section-header.phase-1 { background: var(--p1-tint); color: var(--p1-dark); }
.tip-group-section-header.phase-2 { background: var(--p2-tint); color: var(--p2-dark); }
.tip-group-section-header.phase-3 { background: var(--p3-tint); color: var(--p3-dark); }
.tip-group-section-header.phase-4 { background: var(--p4-tint); color: var(--p4-dark); }
.tip-group-section-header.phase-5 { background: var(--p5-tint); color: var(--p5-dark); }
.tip-group-section-header.phase-6 { background: var(--p6-tint); color: var(--p6-dark); }
.tip-group-section-header.phase-7 { background: var(--p7-tint); color: var(--p7-dark); }
.tip-group-section-header.phase-8 { background: var(--p8-tint); color: var(--p8-dark); }
.tip-group-section-header.phase-9 { background: var(--p9-tint); color: var(--p9-dark); }
.tip-group-section-header.phase-10 { background: var(--p10-tint); color: var(--p10-dark); }

/* 閲覧のみのお知らせ（非管理者向け） */
.tm-readonly-notice {
  background: #FFF8E8;
  border: 1px solid #F0D88A;
  color: #7A5A1F;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin: -6px 0 14px;
}

/* グループフィルタチップ */
.tm-group-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.tm-group-filters .chip { font-size: 12px; padding: 4px 12px; }
.tmst-simple-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}
.tm-more {
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .12s;
}
.tm-more:hover { background: #fff; border-color: var(--line); color: var(--wine); }
.tm-more.danger:hover { color: var(--danger); }
.tmst-simple-caret {
  color: var(--muted);
  font-size: 13px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  align-self: center;
  transition: transform .15s;
}
.tmst-simple-row.expanded .tmst-simple-caret { transform: rotate(90deg); }

/* タスクマスタ展開パネル */
.tmst-action-panel {
  background: #FCFAF6;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  padding: 14px 18px 16px 30px;
}
.tmst-act-group { margin-bottom: 13px; }
.tmst-act-group:last-child { margin-bottom: 0; }
.tmst-act-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  letter-spacing: .3px;
}
.tmst-act-title .ic { font-size: 13px; }
.tmst-act-step {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 3px 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.tmst-act-step .num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.tmst-act-item {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.tmst-act-item .dot { color: var(--wine); font-weight: 700; flex-shrink: 0; }
.tmst-act-item.ai-item .dot { color: var(--ai); }
.tmst-act-prompt {
  background: #fff;
  border: 1px solid #D5CDE8;
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 11px;
  color: var(--ink);
  margin-top: 6px;
  font-family: "SF Mono", Consolas, Menlo, monospace;
  line-height: 1.6;
  white-space: pre-wrap;
}
.tmst-act-empty {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 0;
}
.integration-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 2px 4px 2px 0;
}

/* ============================================================
   タスクマスタ追加・編集モーダル
   ============================================================ */
.tm-edit-modal {
  background: #fff;
  border-radius: 14px;
  width: 640px;
  max-width: 100%;
  box-shadow: 0 12px 48px rgba(42, 35, 32, .25);
  overflow: hidden;
  border: 1px solid var(--line);
}
.tm-edit-modal .cam-field textarea,
.cam-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 56px;
}
.cam-field textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}

.tm-list-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tm-step-row,
.tm-notif-row,
.tm-integ-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.tm-step-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.tm-step-content {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
}
.tm-notif-row select,
.tm-integ-row select,
.tm-notif-row input,
.tm-integ-row input {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  font: inherit;
  font-size: 11.5px;
  background: #fff;
  color: var(--ink);
}
.tm-n-trigger { flex: 0 0 90px; }
.tm-n-offset { width: 60px; flex-shrink: 0; }
.tm-n-target { flex: 1; min-width: 0; }
.tm-n-channel { flex: 0 0 76px; }
.tm-i-service { flex: 0 0 140px; }
.tm-i-config { flex: 1; min-width: 0; }
.tm-row-del {
  color: var(--danger);
  cursor: pointer;
  font-size: 13px;
  padding: 0 5px;
  flex-shrink: 0;
}
.tm-row-del:hover { color: #8B2D2D; }
.tm-add-row {
  font-size: 11px;
  color: var(--wine);
  font-weight: 600;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  text-align: center;
  margin-top: 4px;
  background: #fff;
}
.tm-add-row:hover { background: var(--cream-2); }

@media (max-width: 700px) {
  .app-nav { margin-left: 8px; padding-left: 8px; }
  .app-nav-item { padding: 5px 9px; font-size: 12px; }
  .tm-step-row, .tm-notif-row, .tm-integ-row { flex-wrap: wrap; }
}

/* ============================================================
   スマホ専用スタイル（640px以下）
   ----------------------------------------------------------------
   ヘッダーCSSやカレンダーCSSは本ファイル上方で定義されているため、
   それらより後ろに @media を置かないと「後勝ち」で打ち消される。
   このブロックはファイル末尾に置くこと。
   ============================================================ */
@media (max-width: 640px) {
  .app-header-right { gap: 6px; }
  /* ヘッダー上段のタブ群を隠してハンバーガー優先に */
  .app-header-left { display: none; }
  .mobile-menu-btn { display: inline-flex !important; }
  .app-header-top { padding: 8px 12px 0; justify-content: flex-end; }
  .app-header-top::before {
    content: "Vinoteras Task Hub";
    color: var(--wine);
    font-weight: 800;
    font-size: 15px;
    margin-right: auto;
    align-self: center;
  }

  /* ============================================================
     スマホ：ダッシュボードのカレンダーを横スクロール対応にする
     ----------------------------------------------------------------
     ポイント：
       1) .calendar { overflow: hidden } を上書きするため overflow-x:auto
          ※ iOS Safari は overflow-x:auto + overflow-y:visible の組合せが
            動かないので、両方 auto にする（縦は必要なら出る）。
       2) .cal-grid 内側の列が minmax(0,1fr) のままだと grid が親幅まで
          収縮してしまい横スクロールが発生しないので、minmax(100px,1fr)
          に書き換えて grid を 700px に強制拡張する。
       3) 日ビュー(.cal-grid.day)は1列なので横スクロール除外。
     ============================================================ */
  .cal-panel {
    padding: 12px 8px 14px;
    position: relative;
  }
  .calendar {
    overflow-x: auto !important;
    overflow-y: auto;            /* iOS Safari の overflow-x/y 組合せバグ回避 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    max-width: 100%;
  }
  .calendar::-webkit-scrollbar { height: 6px; }
  .calendar::-webkit-scrollbar-thumb { background: rgba(114, 47, 55, .35); border-radius: 3px; }
  .calendar::-webkit-scrollbar-track { background: rgba(0, 0, 0, .04); }

  /* 月ビュー：曜日ヘッダと7列グリッドに最小幅と最低列幅を与える */
  .cal-weekdays {
    min-width: 700px;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
  }
  .cal-grid:not(.day) {
    min-width: 700px;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
  }
  /* 週ビュー：56px の時間軸＋7列で 720px 確保 */
  .cal-week-frame { min-width: 720px; }
  .cal-week-header {
    min-width: 720px;
    grid-template-columns: 56px repeat(7, minmax(95px, 1fr));
  }
  .cal-week-timeline { min-width: 720px; }
  .cal-week-days {
    grid-template-columns: repeat(7, minmax(95px, 1fr));
  }
  .cal-allday-row {
    min-width: 720px;
    grid-template-columns: 56px repeat(7, minmax(95px, 1fr));
  }
  /* 日ビューは1列なので横スクロール除外 */
  .cal-grid.day,
  .cal-day-frame { min-width: 0; }

  /* 横スクロール可能だと分かるよう、右端にフェード */
  .cal-panel::after {
    content: "";
    position: absolute;
    top: 60px;
    right: 0;
    width: 18px;
    bottom: 14px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
    z-index: 1;
  }
}

/* =====================================================
   マスタ詳細ポップアップ（講師／スタッフ／チーム 共通）
   ===================================================== */
.instr-card { cursor: pointer; }
.instr-card-foot { cursor: default; }
.master-detail-modal { max-width: 720px; }
.md-section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cream-2);
}
.md-section:last-child { border-bottom: none; }
.md-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.md-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 16px;
  font-size: 13px;
  margin-bottom: 4px;
  align-items: baseline;
}
.md-row .md-label { color: var(--muted); font-size: 12px; }
.md-row .md-val { color: var(--ink); word-break: break-all; }
.md-row .md-val.empty { color: var(--muted); font-style: italic; }
.md-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.md-chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--wine-tint);
  color: var(--wine-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.md-related-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.md-related-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--cream-1);
  border: 1px solid var(--cream-2);
  border-radius: 6px;
  font-size: 12px;
}
.md-related-item .md-name { font-weight: 600; color: var(--ink); }
.md-related-item .md-sub { color: var(--muted); font-size: 11px; }
.md-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.md-counts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.md-count-card {
  flex: 1 1 80px;
  min-width: 80px;
  padding: 10px 12px;
  background: var(--cream-1);
  border: 1px solid var(--cream-2);
  border-radius: 6px;
  text-align: center;
}
.md-count-card .md-count-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--wine);
  line-height: 1;
}
.md-count-card .md-count-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* カテゴリ削除（カスケード）モーダル */
.cat-delete-warn {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.cat-delete-warn.safe {
  background: #E8F4EA;
  border: 1px solid #7BB37D;
  color: #3D6E40;
}
.cat-delete-warn.warning {
  background: #FFF4E0;
  border: 1px solid #E0A24A;
  color: #8B5A1E;
}
.cat-delete-warn.danger {
  background: #FCE8E8;
  border: 1px solid #C0392B;
  color: #8B1F1F;
}
.btn-primary.danger-btn {
  background: #C0392B;
  border-color: #A93226;
}
.btn-primary.danger-btn:hover {
  background: #A93226;
}
.btn-primary.danger-btn:disabled {
  background: #D4A4A0;
  border-color: #D4A4A0;
  cursor: not-allowed;
  color: #fff;
}

/* ========================================================
   開催日バッジ（講座一覧カード・ダッシュボード共通）
   - 単発講座: ゴールド系（一発勝負感）
   - シリーズ次回: 緑系（継続中）
   - 全回終了: グレー系
   - 緊急度: 本日=赤、1週間以内=オレンジ
   ======================================================== */
.course-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  border: 1.5px solid;
  white-space: nowrap;
  margin-bottom: 6px;
}
.course-date-badge .cdb-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
}
.course-date-badge .cdb-date {
  font-size: 13px;
  font-weight: 700;
}

/* 種別カラー */
.course-date-badge.single {
  background: #FFF4E0;
  border-color: var(--gold);
  color: #8B6914;
}
.course-date-badge.series {
  background: #E8F4EA;
  border-color: #5C8A60;
  color: #3D6E40;
}
.course-date-badge.ended {
  background: #ECECEC;
  border-color: #BDBDBD;
  color: #757575;
}

/* 緊急度（種別カラーより優先） */
.course-date-badge.soon {
  background: #FFE9D6;
  border-color: #E0822E;
  color: #8B4A1E;
}
.course-date-badge.today {
  background: #FCE3E3;
  border-color: #C0392B;
  color: #8B1F1F;
  animation: cdb-pulse 1.8s ease-in-out infinite;
}
@keyframes cdb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(192, 57, 43, 0); }
}

/* アーカイブ済バッジ */
.course-date-badge.archived {
  background: #EFE9DC;
  border-color: #A08C6B;
  color: #6B5A38;
}

/* バッジ横のアクションリンク（アーカイブ/復帰） */
.cdb-action {
  display: inline-block;
  margin-left: 8px;
  margin-bottom: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wine-dark, #5C2A33);
  background: transparent;
  border: 1px dashed var(--wine, var(--wine));
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
}
.cdb-action:hover {
  background: var(--wine, var(--wine));
  color: #fff;
  border-style: solid;
}

/* アーカイブフィルタチップ（区別をつけるため少しトーン違い） */
.chip.chip-archived {
  border-color: #A08C6B;
  color: #6B5A38;
}
.chip.chip-archived.chip-active {
  background: #A08C6B;
  border-color: #A08C6B;
  color: #fff;
}

/* ============================================================
 * タスク期限カレンダー（試験運用 / 新グローバルタブ）
 * page-deadlines / dl-* の名前空間で既存カレンダーと衝突を避ける
 * ============================================================ */
.dl-beta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.dl-panel { padding: 16px; }

.dl-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 4px 12px;
  border-bottom: 1px dashed #E6DAC8;
  margin-bottom: 12px;
}

.dl-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dl-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--wine);
}
.dl-member-select,
.dl-team-select,
.dl-bl-select {
  padding: 6px 10px;
  border: 1px solid #C8B9A6;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #4A2A30;
  cursor: pointer;
  min-width: 160px;
}
.dl-member-select:focus,
.dl-team-select:focus,
.dl-bl-select:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 2px rgba(114,47,55,.15);
}
/* 2026-05-29 追加: チームを選択中なら、左ボーダーをそのチームのカラーで着色 */
.dl-team-select.is-team-selected {
  border-left-width: 5px;
  border-left-color: var(--dl-team-tint, var(--wine));
  padding-left: 8px;
}

.dl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4A2A30;
  cursor: pointer;
  user-select: none;
}
.dl-toggle input { cursor: pointer; }

.dl-summary {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #555;
}
.dl-sum-name { font-weight: 700; color: var(--wine); font-size: 13px; }
.dl-sum-item { padding: 2px 8px; border-radius: 10px; background: #F4EFE6; }
.dl-sum-item b { color: var(--wine); font-weight: 800; margin: 0 2px; }
.dl-sum-overdue { background: #FFE0E0; color: var(--danger-strong); }
.dl-sum-overdue b { color: var(--danger-strong); }
.dl-sum-today { background: var(--gold-tint); color: var(--gold-text); }
.dl-sum-today b { color: var(--gold-text); }

.dl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 11px;
}
.dl-legend-item {
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}
.dl-legend-item.dl-overdue { background: var(--danger-strong); color: #fff; }
.dl-legend-item.dl-today   { background: var(--wine); color: #fff; }
.dl-legend-item.dl-week    { background: #F4B856; color: #573800; }
.dl-legend-item.dl-future  { background: #F4EFE6; color: #555; border-color: #D9CDB6; }
.dl-legend-item.dl-done    { background: #D8EBD4; color: #2D6A3B; border-color: #A8D5A5; }

/* dl-grid は cal-grid を継承（同じ7列カレンダー） */
.dl-grid .dl-cell {
  min-height: 100px;
  cursor: pointer;
  transition: .12s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-grid .dl-cell:hover { background: #FFFAF0; box-shadow: inset 0 0 0 2px var(--gold); }
.dl-grid .dl-cell.has-overdue { background: #FFE9E9; }
.dl-grid .dl-cell.has-overdue:hover { background: #FFDADA; }
.dl-grid .dl-cell.has-today { background: var(--gold-tint); }
.dl-grid .dl-cell.has-week { background: #FFF6E0; }
.dl-grid .dl-cell.has-open { background: #FBF7EE; }
.dl-grid .dl-cell.has-done-only { background: #F2F8F0; }
.dl-grid .dl-cell.outside { opacity: 0.55; }
.dl-grid .dl-cell.today { box-shadow: inset 0 0 0 2px var(--wine); }

.dl-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.dl-dots {
  display: inline-flex;
  gap: 2px;
}
.dl-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dl-badge-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  margin-top: auto;
}
.dl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dl-badge-open { background: var(--wine); }
.dl-cell.has-overdue .dl-badge-open { background: var(--danger-strong); }
.dl-cell.has-today .dl-badge-open { background: #C8881F; }
.dl-cell.has-week .dl-badge-open { background: #C8881F; }
.dl-badge-done {
  background: #A8D5A5;
  color: #1E4F2D;
  font-size: 11px;
  height: 20px;
  min-width: 28px;
}

/* 日詳細パネル（モーダル） */
.dl-day-panel {
  background: #fff;
  border-radius: 12px;
  max-width: 760px;
  width: calc(100% - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.dl-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #E6DAC8;
  background: linear-gradient(180deg, #FBF7EE 0%, #fff 100%);
}
.dl-day-date {
  font-size: 19px;
  font-weight: 800;
  color: var(--wine);
  letter-spacing: 0.02em;
}
.dl-day-count {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}
.dl-day-count b { color: var(--wine); font-weight: 800; }
.dl-day-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
  color: #fff;
}
.dl-day-pill.dl-overdue { background: var(--danger-strong); }
.dl-day-pill.dl-today { background: var(--wine); }
.dl-day-pill.dl-future { background: #888; }

.dl-day-body {
  overflow-y: auto;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-task-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: #FCFAF6;
  border: 1px solid #E6DAC8;
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
}
.dl-task-row:hover {
  background: #FFFAF0;
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dl-task-row.is-done {
  opacity: 0.65;
  background: #F2F8F0;
  border-color: #A8D5A5;
}
.dl-task-row.is-done .dl-task-name { text-decoration: line-through; }

.dl-task-main { flex: 1; min-width: 0; }
.dl-task-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11.5px;
}
.dl-phase-chip {
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid;
  font-weight: 700;
  font-size: 11px;
}
.dl-course {
  font-weight: 700;
  color: var(--wine);
}
.dl-session {
  color: #888;
  font-size: 11px;
}
.dl-task-name {
  font-size: 14px;
  font-weight: 700;
  color: #2A1B1F;
  line-height: 1.4;
}
.dl-task-desc {
  font-size: 12px;
  color: #6A4F55;
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dl-task-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  min-width: 110px;
}
.dl-team {
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 700;
  font-size: 11px;
}
.dl-assignee {
  padding: 2px 10px;
  background: var(--wine);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
}
.dl-assignee.is-ai { background: var(--ai-deep); }
.dl-assignee.dl-no-assignee { background: #B8AC97; }
.dl-completed {
  color: #2D6A3B;
  font-size: 11px;
  font-weight: 700;
}

/* スマホ対応：コントロール縦並び、セルやや小さく */
@media (max-width: 720px) {
  .dl-controls { gap: 8px; }
  .dl-summary { margin-left: 0; width: 100%; }
  .dl-member-select, .dl-team-select, .dl-bl-select { min-width: 140px; font-size: 12px; }
  .dl-grid .dl-cell { min-height: 70px; padding: 4px; }
  .dl-badge { min-width: 28px; height: 22px; font-size: 12px; padding: 0 6px; }
  .dl-day-panel { width: calc(100% - 16px); max-height: 88vh; }
  .dl-task-row { flex-direction: column; }
  .dl-task-meta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .dl-grid.dl-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dl-week-task { font-size: 10.5px; padding: 4px 6px; }
}

/* ============================================================
 * タスクカレンダー：週ビュー（7列・縦リスト）
 * ============================================================ */
.dl-grid.dl-week {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--line);
  gap: 1px;
  min-height: 480px;
}
.dl-week-col {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dl-week-col.today { background: #FFF8E8; box-shadow: inset 0 0 0 2px var(--wine); }
.dl-week-col.past-open { background: #FFF3F3; }
.dl-week-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid #EBE0CC;
  background: linear-gradient(180deg, #FBF7EE 0%, #fff 100%);
  cursor: pointer;
  transition: .12s;
}
.dl-week-head:hover { background: #FFF8E8; }
.dl-week-col.today .dl-week-head { background: var(--gold-tint); }
.dl-week-col.sun .dlw-dow { color: var(--danger); }
.dl-week-col.sat .dlw-dow { color: #3978C6; }
.dlw-dow {
  font-size: 11px;
  font-weight: 700;
  color: #888;
}
.dlw-num {
  font-size: 15px;
  font-weight: 800;
  color: #2A1B1F;
  letter-spacing: 0.02em;
}
.dlw-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--wine);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.dl-week-col.past-open .dlw-count { background: var(--danger-strong); }
.dl-week-col.today .dlw-count { background: var(--wine); }

.dl-week-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  max-height: 540px;
}
.dl-week-empty {
  color: #BBB;
  font-size: 12px;
  text-align: center;
  padding: 24px 0;
}
.dl-week-task {
  border-left: 4px solid #999;
  background: #FCFAF6;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 11.5px;
  cursor: pointer;
  transition: .12s;
}
.dl-week-task:hover {
  background: #FFFAF0;
  transform: translateX(2px);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.dl-week-task.is-done {
  opacity: 0.6;
  background: #F2F8F0;
  border-left-color: #A8D5A5;
}
.dl-week-task.is-done .dlwt-name { text-decoration: line-through; }
.dlwt-name {
  font-weight: 700;
  color: #2A1B1F;
  line-height: 1.3;
  margin-bottom: 2px;
}
.dlwt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 10.5px;
}
.dlwt-course {
  color: var(--wine);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.dlwt-assign {
  background: var(--wine);
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 10px;
  white-space: nowrap;
}
.dlwt-assign.is-ai { background: var(--ai-deep); }
.dlwt-assign.dlwt-noassign { background: #B8AC97; }

/* ============================================================
 * タスクカレンダー：日ビュー（1日の全タスクリスト）
 * ============================================================ */
.dl-grid.dl-day {
  display: block;
  background: transparent;
  padding: 0;
  border: none;
}
.dl-day-view {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.dl-day-view-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(180deg, #FBF7EE 0%, #fff 100%);
  border-bottom: 1px solid #E6DAC8;
}
.dl-day-view-head.today {
  background: linear-gradient(180deg, var(--gold-tint) 0%, #fff 100%);
  border-bottom-color: var(--gold);
}
.dlv-num {
  font-size: 42px;
  font-weight: 800;
  color: var(--wine);
  letter-spacing: -0.02em;
  line-height: 1;
}
.dlv-meta-block { flex: 1; }
.dlv-meta {
  font-size: 14px;
  font-weight: 700;
  color: #4A2A30;
  margin-bottom: 6px;
}
.dlv-state {
  font-size: 12px;
  color: #555;
}
.dlv-state b { color: var(--wine); font-weight: 800; margin: 0 2px; }
.dl-day-view-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.dl-day-view-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* ============================================================
 * タスクボリューム（標準工数）の表示
 * - tmst-vol-tag: タスクマスタ一覧カード内
 * - tm-vol-*:     タスクマスタ編集モーダル
 * - vol-chip:     講座詳細フェーズヘッダ・セッション行
 * - cd-stat-vol:  講座詳細統計バー
 * - st-vol:       タスク行（subtask-row）
 * - dl-sum-vol:   タスクカレンダーのサマリー
 * - dl-task-vol:  タスクカレンダーのタスク行
 * - dl-day-vol:   タスクカレンダー日詳細モーダル
 * 全て「人時換算」で集計し、AI担当分はうっすら紫系で区別する
 * ============================================================ */

/* タスクマスタ一覧カードの工数バッジ */
.tmst-vol-tag {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--gold-tint);
  color: var(--gold-text);
  border: 1px solid #E6CB7F;
  white-space: nowrap;
  height: 24px;
  box-sizing: border-box;
}
.tmst-vol-tag.unset {
  background: #F4EFE6;
  color: var(--muted);
  border-color: #DACFB6;
  font-weight: 500;
}
.tmst-vol-tag.stale {
  background: #FFE5A8;
  color: #6E4A00;
  border-color: #D6A93C;
}
/* admin が編集可能なときだけクリック可能。マスタ専用：講座詳細やカレンダーには出さない */
.tmst-vol-tag.editable {
  cursor: pointer;
  transition: transform .1s, box-shadow .12s, border-color .12s;
}
.tmst-vol-tag.editable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(138, 99, 0, 0.25);
  border-color: var(--gold);
}
.tmst-vol-tag.editable:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* tm-more（編集／削除ボタン）の高さも揃える */
.tm-more {
  height: 24px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  align-self: center;
}

/* ============================================================
 * タスクボリューム インライン編集ポップオーバー
 * タスクマスタ画面の 📊 バッジクリックで開く。マスタ専用UI。
 * ============================================================ */
.vol-popover {
  width: 320px;
  background: #fff;
  border: 1px solid #E6DAC8;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  font-size: 13px;
  color: #2A1B1F;
  overflow: hidden;
  animation: vol-pop-in .14s ease-out;
}
@keyframes vol-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vol-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #FBF7EE 0%, #fff 100%);
  border-bottom: 1px solid #EBE0CC;
}
.vol-pop-title {
  font-weight: 800;
  color: var(--wine);
  font-size: 13px;
}
.vol-pop-tm {
  flex: 1;
  color: #6A4F55;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vol-pop-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vol-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vol-pop-input {
  flex: 0 0 100px;
  padding: 6px 10px;
  border: 1px solid #C8B9A6;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #2A1B1F;
}
.vol-pop-input:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 2px rgba(114,47,55,.15);
}
.vol-pop-unit {
  color: #6A4F55;
  font-size: 12px;
}
.vol-pop-preview {
  margin-left: auto;
  padding: 3px 10px;
  background: var(--gold-tint);
  color: var(--gold-text);
  border-radius: 8px;
  border: 1px solid #E6CB7F;
  font-weight: 700;
  font-size: 13px;
  min-width: 88px;
  text-align: center;
}
.vol-pop-preview.is-unset {
  background: #F4EFE6;
  color: var(--muted);
  border-color: #DACFB6;
  font-weight: 500;
}
.vol-pop-preview.is-error { background: #FFE0E0; color: var(--danger-strong); border-color: #E5A0A0; }
.vol-pop-hint {
  font-size: 11px;
  color: #6A4F55;
  line-height: 1.5;
  background: #FBF7EE;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--gold);
}
.vol-pop-meta {
  font-size: 11px;
  color: #6A4F55;
}
.vol-pop-meta.is-unset { color: var(--muted); font-style: italic; }
.vol-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.vol-pop-error {
  background: #FFE0E0;
  color: var(--danger-strong);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* タスクマスタ編集モーダル：工数入力欄
 * .cam-hint-sm のグローバル修正で input 下のヒント重なり問題は解消済み。
 * ここでは input の幅固定だけ行う。 */
.tm-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-vol-row input[type="number"] {
  /* .cam-field input { width: 100% } を打ち消し、固定幅にする */
  width: 160px !important;
  flex: 0 0 160px;
  min-width: 0;
}
.tm-vol-preview {
  font-weight: 700;
  font-size: 14px;
  color: var(--wine);
  padding: 6px 12px;
  background: var(--gold-tint);
  border-radius: 8px;
  border: 1px solid #E6CB7F;
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
.tm-vol-preview.is-unset {
  background: #F4EFE6;
  color: var(--muted);
  border-color: #DACFB6;
  font-weight: 500;
}
.tm-vol-preview.is-error { background: #FFE0E0; color: var(--danger-strong); border-color: #E5A0A0; }
.tm-vol-meta { display: block; margin-top: 4px; font-size: 11px; }
.tm-vol-stale { color: var(--danger-strong); font-weight: 700; }
.tm-vol-fresh { color: #6A4F55; }

/* 講座詳細：フェーズヘッダ・セッション行に出る合計工数チップ */
.vol-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--gold-tint);
  color: var(--gold-text);
  border: 1px solid #E6CB7F;
  margin-right: 8px;
  white-space: nowrap;
}
.vol-chip.vol-unset {
  background: #F4EFE6;
  color: var(--muted);
  border-color: #DACFB6;
  font-weight: 500;
}
.vol-chip .vol-ai {
  color: var(--ai-deep);
  font-weight: 700;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px dotted var(--ai-deep);
}
.vol-chip .vol-unset-mark {
  color: var(--danger-strong);
  font-weight: 700;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px dotted var(--danger-strong);
  font-size: 10.5px;
}

/* 講座統計バーの「講座合計工数」カード */
.cd-stat.cd-stat-vol .v {
  color: var(--gold-text);
  font-size: 18px;
}
.cd-stat-ai-sub {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--ai-deep) 13%, transparent);
  color: var(--ai-deep);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.cd-stat-unset-sub {
  display: inline-block;
  margin-left: 6px;
  color: var(--danger-strong);
  font-size: 11px;
  font-weight: 700;
}

/* タスク行（subtask-row）の工数ピル */
.st-vol {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--gold-tint);
  color: var(--gold-text);
  border-radius: 9px;
  border: 1px solid #E6CB7F;
  vertical-align: middle;
}
.st-vol.is-ai {
  background: color-mix(in srgb, var(--ai-deep) 9%, transparent);
  color: var(--ai-deep);
  border-color: #B7AED6;
}
.st-vol.unset {
  background: transparent;
  color: #C8B9A6;
  border-color: #E6DAC8;
  font-weight: 500;
}

/* タスクカレンダーのサマリーに出る総工数チップ */
.dl-sum-item.dl-sum-vol {
  background: var(--gold-tint);
  color: var(--gold-text);
}
.dl-sum-item.dl-sum-vol b { color: var(--gold-text); }
.dl-sum-vol-ai {
  color: var(--ai-deep);
  font-weight: 700;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px dotted var(--ai-deep);
}
.dl-sum-vol-unset {
  color: var(--danger-strong);
  font-weight: 700;
  margin-left: 6px;
  font-size: 10.5px;
}
.dl-sum-item.dl-sum-vol.unset { background: #F4EFE6; color: var(--muted); }

/* タスクカレンダーのタスク行と日詳細モーダル */
.dl-task-vol {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  background: var(--gold-tint);
  color: var(--gold-text);
  border-radius: 9px;
  border: 1px solid #E6CB7F;
  margin-left: auto;
}
.dl-task-vol.is-ai { background: color-mix(in srgb, var(--ai-deep) 9%, transparent); color: var(--ai-deep); border-color: #B7AED6; }
.dl-task-vol.unset { background: transparent; color: #C8B9A6; border-color: #E6DAC8; font-weight: 500; }
.dl-day-vol {
  color: var(--gold-text);
  font-weight: 700;
}

/* ============================================================
 * タスクカレンダー → 講座一覧へのジャンプ時：該当タスク行ハイライト
 * 矢印（::before）＋背景色を表示。
 * 解除タイミングはJS：フェーズ/セッション開閉・編集・ページ遷移
 * ============================================================ */
.subtask-row {
  /* deadline-highlight の ::before 矢印を行の端に絶対配置するための土台 */
  position: relative;
}
.subtask-row.deadline-highlight {
  background: linear-gradient(90deg, var(--gold-tint) 0%, #FFFAF0 70%, #fff 100%) !important;
  box-shadow: inset 4px 0 0 var(--gold), inset -1px 0 0 var(--gold);
  animation: dl-row-pulse 1.6s ease-out 1;
}
.subtask-row.deadline-highlight::before {
  content: '▶';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wine);
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  animation: dl-arrow-bounce 1.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.subtask-row.deadline-highlight.is-open {
  background: linear-gradient(90deg, #FFE7AB 0%, var(--cream-2) 70%) !important;
}
@keyframes dl-row-pulse {
  0%   { background-color: #FFE5A8; box-shadow: inset 4px 0 0 var(--gold), 0 0 0 0 rgba(200,169,81,0.45); }
  60%  { background-color: var(--gold-tint); box-shadow: inset 4px 0 0 var(--gold), 0 0 0 12px rgba(200,169,81,0); }
  100% { background-color: transparent; box-shadow: inset 4px 0 0 var(--gold), 0 0 0 0 rgba(200,169,81,0); }
}
@keyframes dl-arrow-bounce {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
  50%      { transform: translateY(-50%) translateX(4px); opacity: 0.75; }
}

/* ============================================================
   Step1（2026-05-30）：ナビゲーション デザイン刷新
   ----------------------------------------------------------------
   横ヘッダー → 左サイドバー化（PC幅・641px以上のみ）。
   - DOM/ID/data-*/ハンドラは一切変更せず、見た目だけCSSで再構成。
   - 640px以下は従来のヘッダー＋ハンバーガードロワーのまま（未変更）。
   - 配色は「ワイン地＋ゴールド1アクセント＋ニュートラル」に集約。
   - 事業ラインタブの個別5色は撤去し、絵文字はモノクロ寄りに。
   この区画を丸ごと削除すれば旧デザインへ即ロールバック可能。
   ============================================================ */
.side-collapse-btn { display: none; }   /* 既定は非表示。PC幅のときだけ表示 */

@media (min-width: 1px) {  /* 全幅適用（旧:641px以上。スマホもサイドバー化のため全幅に変更） */
  .app-view { --side-w: 248px; padding-left: var(--side-w); transition: padding-left .18s ease; }
  .app-view.side-collapsed { --side-w: 66px; }

  /* ヘッダー → 固定の左サイドバー */
  .app-header {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w);
    display: flex; flex-direction: column;
    padding: 12px 10px 70px;
    background: linear-gradient(180deg, #2c1a1f, #241519);
    border-bottom: none; border-right: 1px solid rgba(0,0,0,.28);
    backdrop-filter: none;
    overflow-y: auto; overflow-x: hidden;
    z-index: 60;
    transition: width .18s ease;
  }
  .app-header::-webkit-scrollbar { width: 6px; }
  .app-header::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
  /* 子要素をサイドバーの直接フレックス項目として扱う */
  .app-header-top { display: contents; }

  /* ブランド */
  .app-header-left {
    order: 1; display: flex; flex-direction: column; align-items: stretch;
    gap: 1px; overflow: visible; min-width: 0; flex: 0 0 auto;
  }
  .app-logo-mark {
    align-self: flex-start; margin: 2px 6px 2px;
    background: linear-gradient(135deg, var(--gold), #a9842f); color: #241519;
  }
  .app-logo-title { color: #fff; padding: 0 8px 10px; font-size: 14px; opacity: .96; white-space: nowrap; }

  /* ナビ群を縦並びに */
  .app-header .global-nav, .app-header .bl-nav {
    flex-direction: column; align-items: stretch; gap: 1px;
    margin: 0; padding: 0; border: none;
  }
  .app-header .global-nav-divider {
    width: auto; height: 1px; background: rgba(255,255,255,.10);
    margin: 11px 10px 7px; align-self: stretch;
  }

  /* タブ（グローバル＆事業ライン）→ 縦のナビ項目（中立配色） */
  .app-header .global-tab, .app-header .bl-tab {
    width: auto; border-radius: 9px; top: 0; margin: 0; padding: 9px 11px;
    font-size: 13.5px; font-weight: 600; justify-content: flex-start;
    color: rgba(255,255,255,.62) !important; background: transparent !important;
    box-shadow: none !important; opacity: 1 !important;
  }
  .app-header .global-tab:hover, .app-header .bl-tab:hover {
    background: rgba(255,255,255,.06) !important; color: #fff !important;
  }
  .app-header .global-tab.active, .app-header .bl-tab.active {
    background: rgba(255,255,255,.10) !important; color: #fff !important;
    box-shadow: inset 3px 0 0 0 var(--gold) !important;
  }
  /* 絵文字アイコンの彩度を落としてノイズを減らす */
  .app-header .t-ico, .app-header .bl-tab-icon { filter: grayscale(.85) opacity(.92); font-size: 15px; }

  /* サブタブ（講座一覧/タスクマスタ… ／ マスタ配下）→ 縦リスト */
  .app-header .app-nav, .app-header .master-nav,
  body[data-bl] .app-header .app-nav {
    flex-direction: column; gap: 1px; padding: 6px 0 0; margin: 6px 0 0;
    background: transparent !important; border-top: 1px solid rgba(255,255,255,.10);
  }
  .app-header .app-nav { order: 2; }
  .app-header .master-nav { order: 3; }
  .app-header .app-nav-item, .app-header .master-nav-item,
  body[data-bl] .app-header .app-nav-item {
    border-radius: 8px; padding: 8px 11px 8px 22px; font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,.55) !important; background: transparent !important; box-shadow: none !important;
  }
  .app-header .app-nav-item:hover, .app-header .master-nav-item:hover {
    background: rgba(255,255,255,.06) !important; color: #fff !important;
  }
  .app-header .app-nav-item.active, .app-header .master-nav-item.active {
    background: rgba(255,255,255,.10) !important; color: #fff !important; box-shadow: none !important;
  }

  /* ユーザーメニューをサイドバー下部に固定 */
  .app-header-right {
    order: 4; position: fixed; left: 10px; bottom: 12px;
    width: calc(var(--side-w) - 20px); gap: 8px; z-index: 61;
  }
  .app-header .user-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }

  /* 折りたたみトグル */
  .side-collapse-btn {
    order: 0; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 0 4px 8px auto;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04); color: rgba(255,255,255,.72);
    cursor: pointer; font-size: 15px; line-height: 1; flex: 0 0 auto;
  }
  .side-collapse-btn:hover { background: rgba(255,255,255,.10); color: #fff; }

  /* 折りたたみ時：アイコンのみ表示 */
  .app-view.side-collapsed .app-logo-title,
  .app-view.side-collapsed .global-tab .t-name,
  .app-view.side-collapsed .bl-tab .t-name,
  .app-view.side-collapsed .app-nav-item,
  .app-view.side-collapsed .master-nav-item,
  .app-view.side-collapsed .app-header-right .user-name { display: none; }
  .app-view.side-collapsed .app-header .global-tab,
  .app-view.side-collapsed .app-header .bl-tab { justify-content: center; padding-left: 0; padding-right: 0; }
  .app-view.side-collapsed .app-header .global-nav-divider { margin: 9px 16px; }
  .app-view.side-collapsed .app-header-right { align-items: center; justify-content: center; }
}

/* ------------------------------------------------------------
   Step1 追補（2026-05-30）：サブページ（一覧/タスクマスタ/カテゴリマスタ）を
   選択中の事業ラインの直下に入れ子（折りたたみ）表示する。
   従来の平置きサブタブ #app-nav は PC幅では隠す（スマホは従来通り表示）。
   ------------------------------------------------------------ */
@media (min-width: 1px) {  /* 全幅適用（旧:641px以上。スマホもサイドバー化のため全幅に変更） */
  /* 平置きの旧サブタブはPCでは非表示（事業ライン直下の入れ子に集約） */
  #app-nav { display: none !important; }

  .bl-subnav {
    display: flex; flex-direction: column; gap: 1px;
    margin: 1px 0 5px; padding-left: 8px; position: relative;
  }
  /* 入れ子を示す縦ガイド線 */
  .bl-subnav::before {
    content: ""; position: absolute; left: 9px; top: 3px; bottom: 6px;
    width: 1px; background: rgba(255,255,255,.13);
  }
  .bl-subitem {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 7px 10px 7px 18px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5);
    white-space: nowrap;
  }
  .bl-subitem:hover { background: rgba(255,255,255,.06); color: #fff; }
  .bl-subitem.active {
    background: rgba(255,255,255,.10); color: #fff;
    box-shadow: inset 3px 0 0 0 var(--gold);
  }
  .bl-sub-ico { filter: grayscale(.85) opacity(.9); font-size: 13px; }

  /* 折りたたみ（アイコンレール）時は入れ子サブナビを隠す */
  .app-view.side-collapsed .bl-subnav { display: none; }
}

/* ------------------------------------------------------------
   Step1.1（2026-05-30）：モック準拠の仕上げ（PC幅のみ）
   - カテゴリ見出し（事業ライン／設定）＋折りたたみキャレット
   - 事業ラインはアコーディオン（名クリック＝開閉のみ）＋キャレット
   - グローバル／事業ラインアイコンを SVG ラインアイコンに
   ------------------------------------------------------------ */
@media (min-width: 1px) {  /* 全幅適用（旧:641px以上。スマホもサイドバー化のため全幅に変更） */
  /* ブランド副題 */
  .app-logo-title { display: flex; flex-direction: column; line-height: 1.2; }
  .app-logo-title small {
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    color: rgba(255,255,255,.4); margin-top: 1px;
  }

  /* SVG アイコン（currentColor 継承・サイズ統一） */
  .app-header .t-ico { filter: none; display: inline-flex; }
  .app-header .t-ico svg,
  .app-header .bl-tab-icon.svg svg { width: 17px; height: 17px; display: block; }

  /* カテゴリ見出し（事業ライン／設定） */
  .app-header .side-group {
    display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    margin: 14px 4px 4px; padding: 4px 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
    color: rgba(255,255,255,.42);
  }
  .app-header .side-group:hover { color: rgba(255,255,255,.7); }
  .app-header .side-group .side-caret {
    margin-left: auto; font-size: 10px; opacity: .7; transition: transform .15s;
  }
  .app-header .side-group.collapsed .side-caret { transform: rotate(-90deg); }
  /* 見出しを畳むと直後の nav（事業ライン or 設定）を隠す */
  .app-header .side-group.collapsed + nav { display: none; }

  /* 事業ライン＝アコーディオンの見出し行 */
  .app-header .bl-tab .bl-caret {
    margin-left: auto; font-size: 10px; opacity: .55; transition: transform .15s;
  }
  .app-header .bl-tab:not(.expanded) .bl-caret { transform: rotate(-90deg); }
  .app-header .bl-tab.current .t-name { color: #fff; }
  .app-header .bl-tab.expanded { color: #fff !important; }
  /* 選択中（現在の事業ライン）はアイコンを金色に（モック準拠） */
  .app-header .bl-tab.current .bl-tab-icon.svg svg { color: var(--gold); }
  .app-header .bl-tab.current .bl-tab-icon { color: var(--gold); }

  /* サブナビの開閉 */
  .bl-subnav.collapsed { display: none; }

  /* 折りたたみ（レール）時に隠す要素 */
  .app-view.side-collapsed .app-logo-title small,
  .app-view.side-collapsed .side-group,
  .app-view.side-collapsed .bl-caret { display: none; }
}

/* ------------------------------------------------------------
   Step1.2（2026-05-30）：スマホもサイドバー化（オーバーレイ式）
   上の3ブロックは全幅適用に変更済み。ここでは 640px 以下を
   「左からスライドインするオーバーレイ」に切り替える。
   旧ハンバーガードロワーは使わず、専用トップバー＋背景で開閉。
   ------------------------------------------------------------ */
.mobile-topbar, .mobile-side-backdrop { display: none; }  /* PC幅では非表示 */

@media (max-width: 640px) {
  /* 本文の左パディングを戻す（サイドバーは重ねて表示） */
  .app-view { padding-left: 0 !important; }

  /* サイドバー＝左からのオーバーレイ */
  .app-header {
    width: min(84vw, 300px) !important;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
    z-index: 200;
  }
  body.side-open .app-header { transform: translateX(0); }

  /* 旧モバイル要素の無効化（オーバーレイに一本化） */
  .app-header-left { display: flex !important; }
  .app-header-top::before { content: none !important; }
  .mobile-menu-btn { display: none !important; }
  .side-collapse-btn { display: none !important; }
  #app-nav { display: none !important; }

  /* モバイル用トップバー（常時表示の開閉トリガ） */
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 90;
    height: 52px; padding: 0 14px;
    background: linear-gradient(180deg, #2c1a1f, #241519); color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.25);
  }
  .mobile-side-toggle {
    width: 38px; height: 38px; padding: 0; flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
  }
  .mobile-side-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
  .mobile-side-toggle .mark { width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, var(--gold), #a9842f); color: #241519;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
  .mtb-title { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
  .mtb-title small { font-weight: 700; font-size: 9.5px; letter-spacing: .16em; opacity: .55; margin-left: 6px; }

  /* 背景（タップで閉じる） */
  .mobile-side-backdrop { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); }
  .mobile-side-backdrop[hidden] { display: none; }
}

/* ------------------------------------------------------------
   Step1.3（2026-05-31）：マスタもアコーディオン化
   「設定 > マスタ」直下に 講師/スタッフ/チームマスタ… を入れ子表示。
   マスタ名クリック＝開閉のみ（body.master-open）。改善はその下に並ぶ。
   旧仕様：マスタを押すと講師マスタへ即遷移＋サブタブが改善の後ろに出る → 解消。
   ------------------------------------------------------------ */
/* 旧 order:3（最下部送り）を解除し、DOM順＝マスタ直下→改善 の並びにする */
.app-header .master-nav { display: none !important; order: 0 !important; }
body.master-open .app-header .master-nav {
  display: flex !important; order: 0 !important; border-top: none; padding: 1px 0 4px 8px; position: relative;
}
/* 入れ子の縦ガイド線（事業ラインのサブナビと同じ見た目） */
body.master-open .app-header .master-nav::before {
  content: ""; position: absolute; left: 9px; top: 2px; bottom: 4px; width: 1px; background: rgba(255,255,255,.13);
}
/* マスタのキャレット（事業ラインと同じ挙動・閉のとき右向き） */
.app-header .master-acc .bl-caret { margin-left: auto; font-size: 10px; opacity: .55; transition: transform .15s; }
body:not(.master-open) .app-header .master-acc .bl-caret { transform: rotate(-90deg); }

/* ============================================================
   商品マスタ・仕入先マスタ（pm-*）（2026-05-31）
   全社共通マスタの一覧テーブル＋追加/編集/詳細モーダル。
   ============================================================ */
.pm-tablewrap { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:auto; }
.pm-table { width:100%; border-collapse:collapse; font-size:13px; }
.pm-table thead th { background:var(--cream-2); color:var(--ink-soft); font-weight:700; font-size:12px; text-align:left; padding:9px 12px; border-bottom:2px solid var(--line); white-space:nowrap; }
.pm-table tbody td { padding:9px 12px; border-bottom:1px solid #efe9e0; vertical-align:middle; }
.pm-table tbody tr:last-child td { border-bottom:none; }
.pm-table tbody tr:hover { background:#fcfaf6; }
.pm-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.pm-code { font-family:ui-monospace,monospace; font-size:12px; color:var(--ink-soft); }
.pm-rowname { font-weight:700; color:var(--ink); }
.pm-rowsub { font-size:11.5px; color:var(--muted); }
.pm-clickable { cursor:pointer; color:var(--wine); }
.pm-clickable:hover { text-decoration:underline; }
.pm-edit { font-size:12px; color:var(--wine); cursor:pointer; font-weight:700; }
.pm-copy { font-size:12px; color:var(--muted); cursor:pointer; font-weight:700; margin-left:10px; }
.pm-copy:hover { color:var(--wine); }
.pm-del { font-size:12px; color:#C0473F; cursor:pointer; font-weight:700; margin-left:10px; }
.pm-lnk { color:var(--wine); font-size:12px; }
.pm-pill { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.pm-c-white{background:#f3efe4;color:#8a7a3a} .pm-c-red{background:#f3dcdc;color:#9e2b23}
.pm-c-rose{background:#f6e2e6;color:#a64d63} .pm-c-orange{background:#f7e6cf;color:#b06a1c}
.pm-c-other{background:#eceae6;color:#6b6258}

/* モーダル */
.pm-modal-bg { position:fixed; inset:0; background:rgba(40,24,20,.42); display:flex; align-items:flex-start; justify-content:center; z-index:600; overflow:auto; padding:26px 14px; }
.pm-modal-bg.hidden { display:none !important; }
.pm-modal { background:#fff; border-radius:14px; width:min(820px,100%); box-shadow:0 18px 50px rgba(0,0,0,.3); overflow:hidden; }
.pm-modal-head { background:var(--wine); color:#fff; padding:14px 20px; display:flex; align-items:center; gap:10px; }
.pm-modal-head h3 { margin:0; font-size:16px; font-weight:800; }
.pm-x { margin-left:auto; cursor:pointer; font-size:20px; opacity:.85; }
.pm-modal-body { padding:18px 20px; max-height:70vh; overflow:auto; }
.pm-modal-foot { padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; background:var(--cream-2); }
.pm-btn { font-size:13.5px; padding:9px 16px; border-radius:9px; background:var(--wine); color:#fff; border:none; cursor:pointer; font-weight:700; }
.pm-btn.ghost { background:#fff; color:var(--wine); border:1px solid var(--wine); }

.pm-sec { font-size:12px; font-weight:800; color:var(--wine); letter-spacing:.04em; margin:16px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--line); }
.pm-sec.first { margin-top:2px; }
.pm-sec .pm-note { font-weight:600; color:var(--muted); font-size:10.5px; margin-left:8px; }
.pm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.pm-grid.three { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:680px){ .pm-grid, .pm-grid.three { grid-template-columns:1fr; } }
.pm-f { display:flex; flex-direction:column; gap:3px; }
.pm-f.pm-full { grid-column:1/-1; }
.pm-f label { font-size:11.5px; font-weight:700; color:var(--ink-soft); }
.pm-req { color:#C0473F; }
.pm-f input, .pm-f select, .pm-f textarea { font-size:13.5px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font-family:inherit; outline:none; }
.pm-f input:focus, .pm-f select:focus, .pm-f textarea:focus { border-color:var(--gold); }
.pm-f textarea { resize:vertical; min-height:54px; }
.pm-ziprow { display:flex; gap:6px; }
.pm-ziprow input { flex:1; }
.pm-zipbtn { padding:8px 12px; font-size:12px; white-space:nowrap; border:1px solid var(--wine); background:#fff; color:var(--wine); border-radius:8px; cursor:pointer; font-weight:700; }
/* ボトル画像（商品編集モーダル） */
.pm-image-field { margin-top:6px; }
.pm-image-row { display:flex; align-items:flex-start; gap:14px; }
.pm-image-preview { width:120px; height:120px; border:1px solid var(--line); border-radius:10px; background:#FAF7F2; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.pm-image-preview img { width:100%; height:100%; object-fit:contain; display:block; }
.pm-image-preview.empty { border-style:dashed; }
.pm-image-ph { font-size:11px; color:var(--muted); }
.pm-image-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pm-image-actions .pm-btn { font-size:12.5px; padding:7px 13px; }
.pm-image-hint { font-size:11px; color:var(--muted); }
/* 商品一覧／ワイン選定のボトル画像サムネイル */
/* ボトルは縦長なので contain で全体を表示（cover で中央が切れて判別不能だったため） */
.pm-thumb { width:34px; height:50px; border-radius:6px; object-fit:contain; border:1px solid var(--line); background:#fff; display:block; cursor:zoom-in; }
.pm-thumb-none { width:34px; height:50px; border-radius:6px; border:1px dashed var(--line); background:#FAF7F2; display:flex; align-items:center; justify-content:center; font-size:16px; color:#C8B9A6; }
td.pm-thumb-cell { width:46px; text-align:center; }
.pm-image-preview img { cursor:zoom-in; }
/* 商品詳細モーダルの大きめボトル画像 */
.pm-detail-image { text-align:center; margin:2px 0 16px; }
.pm-detail-img { max-width:200px; max-height:300px; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:#fff; padding:8px; cursor:zoom-in; box-shadow:0 1px 4px rgba(114,47,55,.06); }
/* ワイン選定：試飲順（①②③）＋ドラッグ並べ替え */
.bo-wine-ordercell { text-align:center; white-space:nowrap; user-select:none; cursor:grab; vertical-align:middle; }
.bo-wine-ordercell:active { cursor:grabbing; }
.bo-wine-ordnum { display:block; font-size:18px; font-weight:800; color:var(--wine); line-height:1.1; }
.bo-wine-grip { display:block; font-size:12px; color:var(--muted); line-height:1; margin-top:1px; }
tr.bo-dragging { opacity:.55; background:var(--wine-tint); }
/* ワイン選定：行のサムネイル＋候補リストのサムネイル（こちらも縦長で全体表示） */
.bo-wine-rowtop { display:flex; align-items:center; gap:8px; }
.bo-wine-rowtop .bo-wine-search { flex:1; min-width:0; }
.bo-wine-thumb { flex:none; }
.bo-wine-thumb .pm-thumb, .bo-wine-thumb .pm-thumb-none { width:28px; height:42px; }
.bo-sug-item { display:flex; align-items:center; gap:8px; }
.bo-sug-thumb { flex:none; }
.bo-sug-thumb .pm-thumb, .bo-sug-thumb .pm-thumb-none { width:24px; height:36px; }
/* ボトル画像クリックで拡大表示（ライトボックス） */
.img-lightbox { position:fixed; inset:0; background:rgba(20,12,12,.78); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; }
.img-lightbox.hidden { display:none; }
.img-lightbox-inner { position:relative; max-width:92vw; max-height:92vh; }
.img-lightbox-inner img { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:10px; background:#fff; box-shadow:0 8px 40px rgba(0,0,0,.5); display:block; }
.img-lightbox-close { position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; border:none; background:#fff; color:var(--wine); font-size:20px; font-weight:800; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.3); }

/* 品種・配合比率 */
.pm-grape-blend { display:flex; flex-direction:column; gap:10px; }
.pm-grape-row { display:grid; grid-template-columns:1fr 140px; gap:10px 14px; align-items:end; }
@media (max-width:680px){ .pm-grape-row { grid-template-columns:1fr 110px; } }
.pm-grape-pct { min-width:0; }
.pm-pctwrap { position:relative; display:flex; align-items:center; }
.pm-pctwrap input { width:100%; box-sizing:border-box; padding-right:26px; text-align:right; }
.pm-pctsign { position:absolute; right:10px; color:var(--muted); font-size:12.5px; pointer-events:none; }
.pm-grape-sum { font-size:12px; font-weight:700; color:var(--muted); text-align:right; padding-top:2px; }
.pm-grape-sum.ok { color:#2e7d32; }
.pm-grape-sum.warn { color:#b8860b; }

/* 詳細ポップアップの品種・配合比率（1件ずつ明示） */
.pm-grape-dv { display:flex; flex-direction:column; gap:3px; min-width:200px; }
.pm-grape-dv-item { display:flex; justify-content:space-between; gap:14px; }
.pm-grape-dv-name { color:var(--ink-soft); }
.pm-grape-dv-pct { color:var(--wine); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pm-grape-dv-total { margin-top:3px; padding-top:3px; border-top:1px dashed var(--line); font-size:11.5px; font-weight:700; color:var(--muted); text-align:right; }

/* 詳細表示 */
.pm-dv-sec { font-size:12px; font-weight:800; color:var(--wine); letter-spacing:.04em; margin:16px 0 4px; padding-bottom:4px; border-bottom:1px solid var(--line); }
.pm-dv-sec.first { margin-top:2px; }
.pm-dv-row { display:flex; gap:12px; padding:6px 2px; border-bottom:1px solid #f4eee5; font-size:13.5px; }
.pm-dv-row:last-child { border-bottom:none; }
.pm-dv-l { flex:0 0 150px; color:var(--ink-soft); font-weight:600; font-size:12.5px; }
.pm-dv-v { flex:1; color:var(--ink); word-break:break-word; }
.pm-dv-v a { color:var(--wine); }

.pm-auto { background:#f3efe8; color:var(--muted); cursor:not-allowed; }

/* ボトリング：ワイン選定 */
.bo-wines-head { display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; }
.bo-wines-title { font-size:13.5px; font-weight:800; color:var(--wine); }
.bo-est { font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--cream-2); padding:4px 10px; border-radius:999px; }
.bo-wine-table td { vertical-align:middle; }
.bo-wine-table select, .bo-wine-table input { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff; }
.bo-wine-wrap { overflow:visible; }
.bo-wine-prodcell { vertical-align:top; }
.bo-wine-search { position:relative; }
.bo-wine-prodcell .bo-wine-sel { margin-bottom:5px; }
.bo-wine-suggest { position:absolute; left:0; right:0; top:calc(100% - 3px); z-index:50; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.16); max-height:230px; overflow:auto; }
.bo-wine-suggest[hidden] { display:none; }
.bo-sug-item { display:flex; align-items:baseline; gap:8px; padding:7px 10px; cursor:pointer; font-size:12.5px; border-bottom:1px solid #f0ece6; }
.bo-sug-item:last-child { border-bottom:none; }
.bo-sug-item:hover { background:var(--wine-tint); }
.bo-sug-code { font-weight:800; color:var(--wine); flex-shrink:0; min-width:54px; }
.bo-sug-name { color:var(--ink); }
.bo-sug-empty { padding:8px 10px; font-size:12px; color:var(--muted); }
.bo-wine-prodcell .bo-wine-suprow { display:flex; align-items:center; gap:6px; }
.bo-wine-prodcell .bo-wine-suplbl { font-size:10.5px; font-weight:700; color:var(--muted); flex-shrink:0; }
.bo-wine-prodcell .bo-wine-sup { font-size:12px; padding:5px 7px; }
.bo-wine-add { margin-top:10px; width:100%; padding:9px; border:1px dashed var(--wine); background:#fff; color:var(--wine); border-radius:9px; font-weight:700; font-size:13px; cursor:pointer; }
.bo-wine-add:hover { background:var(--cream-2); }
.bo-wine-del { background:#fff; color:#b3261e; border:1px solid #e6c9c6; border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; font-weight:700; }
.bo-status-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; }
.bo-status-draft { background:#eee; color:#666; }
.bo-status-progress { background:#fff3da; color:var(--gold-text); }
.bo-status-done { background:#e3f3e6; color:#2c7a3d; }

/* セット数：暫定/確定トグル */
.bo-sets-row { display:flex; gap:8px; align-items:center; }
.bo-sets-row input { flex:1; min-width:0; }
.bo-confirm-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0; }
.bo-ct-btn { border:none; background:#fff; color:var(--muted); padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; }
.bo-ct-btn.active[data-confirmed="0"] { background:#fff3da; color:var(--gold-text); }
.bo-ct-btn.active[data-confirmed="1"] { background:var(--wine); color:#fff; }
/* セット数バッジ（一覧・詳細） */
.bo-sets-badge { display:inline-block; margin-left:5px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:700; vertical-align:middle; }
.bo-sets-badge.prov { background:#fff3da; color:var(--gold-text); }
.bo-sets-badge.conf { background:#efe3e4; color:var(--wine); }
/* 生産可能数の充足/不足 */
.bo-est.ok { background:#e3f3e6; color:#2c7a3d; }
.bo-est.short { background:#fbe6e4; color:#b3261e; }
.bo-wine-yield { color:var(--ink-soft); font-weight:600; }
.bo-wine-cap { font-weight:800; color:var(--wine); }
.bo-wine-cap.bottleneck { color:#b3261e; }
/* 各ワインの発注判定バッジ */
.bo-judge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.bo-judge.ok { background:#e3f3e6; color:#2c7a3d; }
.bo-judge.short { background:#fbe6e4; color:#b3261e; }
.bo-judge.warn { background:#fdeccf; color:var(--gold-text); }
.bo-judge.pending { background:#eee; color:#666; }

/* 工程コメントスレッド */
.bo-thread { max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--cream-2); display:flex; flex-direction:column; gap:8px; }
.bo-thread-empty { color:var(--muted); font-size:12.5px; text-align:center; padding:14px 6px; }
.bo-thread-msg { background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 11px; }
.bo-thread-meta { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); margin-bottom:4px; flex-wrap:wrap; }
.bo-thread-author { font-weight:800; color:var(--ink); }
.bo-thread-role { font-size:10px; font-weight:700; background:#eee; color:#666; border-radius:999px; padding:1px 7px; }
.bo-thread-role.admin { background:var(--wine-tint); color:var(--wine); }
.bo-thread-date { margin-left:auto; }
.bo-thread-del { margin-left:8px; border:1px solid #e6c9c6; background:#fff; color:#b3261e; border-radius:6px; padding:1px 8px; font-size:10.5px; font-weight:700; cursor:pointer; }
.bo-thread-del:hover { background:#fbe6e4; }
.bo-thread-body { font-size:13px; color:var(--ink); white-space:pre-wrap; line-height:1.5; }
.bo-thread-input { display:flex; gap:8px; margin-top:8px; align-items:flex-end; }
.bo-thread-input textarea { flex:1; min-height:38px; resize:vertical; padding:8px 10px; border:1px solid var(--line); border-radius:9px; font-size:13px; box-sizing:border-box; }

/* 日付テキスト＋カレンダー選択 */
.bo-date-wrap { display:flex; gap:6px; align-items:center; }
.bo-date-wrap .bo-date-text { flex:1; min-width:0; }
.bo-date-wrap .bo-datepick { width:44px; flex:0 0 44px; padding:7px 4px; border:1px solid var(--line); border-radius:8px; background:#fff; color:transparent; cursor:pointer; }
.bo-date-wrap .bo-datepick::-webkit-calendar-picker-indicator { opacity:1; cursor:pointer; margin:0; }
.bo-date-wrap .bo-datepick::-webkit-datetime-edit { display:none; }
.bo-date-wrap .bo-datepick::-webkit-inner-spin-button,
.bo-date-wrap .bo-datepick::-webkit-clear-button { display:none; }

/* 会社設定 */
.cs-sec-title { font-size:13.5px; font-weight:800; color:var(--wine); margin:6px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.cs-sec-title:not(:first-child) { margin-top:24px; }

/* ② ワイン発注 */
.bo-po-table select, .bo-po-table input { width:100%; box-sizing:border-box; padding:7px 8px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; background:#fff; }
.bo-po-table td.bo-po-ro { color:var(--ink); font-weight:700; font-size:12.5px; }
.bo-po-hint { font-size:11.5px; color:var(--muted); margin:6px 2px 0; }
.bo-dl-group { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:12px; background:#fff; }
.bo-dl-grouphead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.bo-dl-supname { font-weight:800; font-size:13px; }
.bo-dl-badge { font-size:10.5px; font-weight:700; color:var(--muted); background:#F5F2EC; border-radius:999px; padding:2px 9px; }
.bo-dl-badge.done { color:var(--ok-text); background:var(--ok-tint); }
.bo-dl-table th, .bo-dl-table td { vertical-align:middle; }
.bo-dl-table input[type="number"], .bo-dl-table input[type="text"] { box-sizing:border-box; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; background:#fff; }
.bo-dl-table .bo-dl-loc { width:100%; }
.bo-dl-chk { text-align:center; }
.bo-dl-arr { width:18px; height:18px; cursor:pointer; }
.bo-dl-done { color:var(--ok-text); font-weight:700; font-size:12px; }
.bo-dl-pend { color:var(--muted); font-size:12px; }
.bo-dl-saving { color:var(--gold-text); font-size:11.5px; }
tr[data-done="1"] .bo-dl-loc { background:#FFFDF6; }
.bo-bt-used { box-sizing:border-box; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; background:#fff; }
.inv-reason { font-size:11px; font-weight:700; border-radius:999px; padding:2px 9px; background:#F5F2EC; color:var(--muted); }
.inv-reason.inv-in { background:var(--ok-tint); color:var(--ok-text); }
.inv-reason.inv-out { background:#F6E0DE; color:var(--danger-ink); }
.inv-plus { color:var(--ok-text); }
.inv-minus { color:var(--danger-ink); }
#page-inventory .bo-view-toggle { margin-left:0; margin-right:8px; }
#page-inventory .inv-who { white-space:nowrap; }
/* 個人別タスクボリューム */
.tv-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 12px; }
.tv-calc { background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:14px; }
.tv-calc-title { font-weight:800; font-size:12.5px; color:var(--wine); margin-bottom:3px; }
.tv-calc-body { font-size:12px; color:var(--ink-soft,#555); line-height:1.7; }
.tv-overview-head, .tv-d-head { font-weight:800; font-size:13px; margin:6px 0 10px; display:flex; align-items:center; gap:12px; }
.tv-overview { display:flex; flex-direction:column; gap:6px; }
.tv-ov-row { display:grid; grid-template-columns:140px 1fr 110px auto; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; transition:background .12s; }
.tv-ov-row:hover { background:var(--wine-tint,#F5E6E8); }
.tv-ov-name { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-ov-cnt { font-weight:600; font-size:11px; color:var(--muted); margin-left:6px; }
.tv-ov-barwrap { background:#F0ECE6; border-radius:999px; height:16px; overflow:hidden; }
.tv-ov-bar { height:100%; background:linear-gradient(90deg,#9A4452,var(--wine)); border-radius:999px; min-width:2px; }
.tv-ov-val { text-align:right; font-weight:800; font-size:13px; color:var(--wine); white-space:nowrap; }
.tv-ov-tags { display:flex; gap:6px; white-space:nowrap; }
.tv-ov .tv-ov, .tv-ov { font-size:10.5px; font-weight:700; color:var(--danger-ink); background:#F6E0DE; border-radius:999px; padding:2px 8px; }
.tv-unset { font-size:10.5px; font-weight:700; color:#9A7B33; background:#FFF8E8; border-radius:999px; padding:2px 8px; }
.tv-d-name { font-size:15px; }
.tv-d-total { color:var(--wine); font-weight:800; }
.tv-d-bars { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.tv-d-row { display:grid; grid-template-columns:130px 1fr 90px; align-items:center; gap:10px; }
.tv-d-label { font-size:11.5px; color:var(--ink-soft,#555); white-space:nowrap; }
.tv-d-barwrap { background:#F0ECE6; border-radius:6px; height:18px; overflow:hidden; }
.tv-d-bar { height:100%; background:linear-gradient(90deg,#9A4452,var(--wine)); border-radius:6px; min-width:2px; }
.tv-d-bar.overdue { background:linear-gradient(90deg,#C0504D,var(--danger-ink)); }
.tv-d-val { text-align:right; font-size:12px; font-weight:700; white-space:nowrap; }
.tv-d-tasks-title { font-weight:800; font-size:12.5px; margin:6px 0; }
.tv-od { color:var(--danger-ink); }
.tv-task-row { cursor:pointer; transition:background .12s; }
.tv-task-row:hover { background:var(--wine-tint,#F5E6E8); }
@media (max-width:640px){ .tv-ov-row { grid-template-columns:90px 1fr 70px; } .tv-ov-tags { display:none; } .tv-d-row { grid-template-columns:90px 1fr 64px; } }
#inv-history-wrap th:last-child, #inv-history-wrap td:last-child { white-space:nowrap; }
.bo-label-upload { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 6px; }
.bo-label-upmsg { font-size:11.5px; color:var(--muted); }
.bo-label-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.bo-label-row { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; }
.bo-label-ic { font-size:18px; flex-shrink:0; }
.bo-label-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
.bo-label-name { font-weight:700; font-size:13px; word-break:break-all; }
.bo-label-sub { font-size:10.5px; color:var(--muted); }
.bo-label-dl { font-size:12px; font-weight:700; color:var(--wine); text-decoration:none; white-space:nowrap; padding:5px 10px; border:1px solid var(--wine); border-radius:7px; }
.bo-label-dl:hover { background:var(--wine-tint,#F5E6E8); }
.bo-label-del { font-size:11.5px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:7px; padding:5px 10px; cursor:pointer; white-space:nowrap; }
.bo-label-del:hover { color:var(--danger,var(--danger)); border-color:var(--danger,var(--danger)); }
.bo-row-attach { font-size:11.5px; color:var(--wine); background:#fff; border:1px solid var(--wine); border-radius:7px; padding:4px 10px; cursor:pointer; white-space:nowrap; }
.bo-row-attach:hover { background:var(--wine-tint,#F5E6E8); }
.bo-cat-sec { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px; background:#fff; }
.bo-cat-head { font-weight:800; font-size:14px; margin-bottom:2px; }
.bo-cat-hint { font-size:11px; color:var(--muted); margin-bottom:8px; }
.bo-cat-upload { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.bo-cat-upmsg { font-size:11px; color:var(--muted); }
.bo-up-prog { display:inline-flex; align-items:center; gap:8px; font-size:11px; }
.bo-up-prog-label { color:var(--ink-soft,#555); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-up-bar { width:120px; height:10px; background:#F0ECE6; border-radius:999px; overflow:hidden; }
.bo-up-bar-fill { display:block; height:100%; background:linear-gradient(90deg,#9A4452,var(--wine)); border-radius:999px; transition:width .15s; }
.bo-up-pct { font-weight:800; color:var(--wine); min-width:34px; text-align:right; }
.bo-link-hint { font-size:11.5px; color:var(--gold-text); background:#FFF8E8; border-radius:8px; padding:8px 12px; margin:6px 0 10px; line-height:1.6; }
.bo-link-table .bl-task-th, .bo-link-table .extra-th, .bo-link-table .bl-cell { white-space:nowrap; vertical-align:top; }
.bo-link-table .bo-info-td { white-space:normal; }
/* 縦の仕切り線：各列の「左側」に、その列の番号と同じ色で1本だけ引く。
   右罫線は使わないので、ヘッダー→本文が同じ太さ・同じ位置の連続した縦線になる。 */
.bo-link-table thead th, .bo-link-table tbody td { border-right:none; }
.bo-link-table th.flow-th, .bo-link-table td.bl-cell { border-left:2px solid var(--col, var(--line)); }
.bo-link-table th.g-info, .bo-link-table td.bo-info-td { border-left:none; border-right:none; }
.bo-link-table th.g-extra, .bo-link-table td.note-td { border-left:2px solid var(--extra); }
.bo-link-table th.g-meta, .bo-link-table td.simple-td { border-left:1px solid var(--line); }
/* セル全体クリックでリッチモーダル */
.bo-link-table td.bl-clickable { cursor:pointer; }
.bo-link-table td.bl-clickable:hover { background:rgba(114,47,55,.06); box-shadow:inset 0 0 0 1.5px rgba(114,47,55,.2); }
.bo-link-table .bl-msg { font-size:10px; font-weight:700; color:var(--gold-text); margin-top:4px; }
.bo-link-table .bl-task-th { font-size:11px; }
.bo-link-table .bl-cell { text-align:center; }
.bo-link-table .bl-none { color:#ccc; }
.bo-link-table .bl-done { font-size:10px; color:var(--ok-text); margin-top:3px; line-height:1.3; }
.bo-link-table .bl-due { font-size:10px; color:var(--gold-text); margin-top:3px; line-height:1.3; font-weight:700; }
.bo-link-table .bl-due.overdue { color:#fff; background:#B23A48; border-radius:4px; padding:1px 5px; display:inline-block; }
.bo-link-table .bl-plan { font-size:10px; color:#5B6B73; margin-top:2px; line-height:1.3; }
.bo-link-table .bl-asg { font-size:10.5px; color:#3a2f2a; margin-top:3px; line-height:1.3; font-weight:600; }
.bo-link-table .bl-asg-none { color:#b39a9d; font-weight:400; }
/* 添付・メモモーダル内の担当者・作業期限エディタ（講座タスクと共通） */
.bo-ct-edit { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; padding:10px 12px; margin-bottom:12px; background:#FBF7F0; border:1px solid #E6DCCB; border-radius:8px; }
.bo-ct-edit-f { display:flex; flex-direction:column; gap:3px; }
.bo-ct-edit-f label { font-size:11px; font-weight:700; color:var(--wine); }
.bo-ct-edit-f select, .bo-ct-edit-f .bo-date-text { min-width:150px; }
.bo-ct-edit-msg { font-size:11px; color:var(--ok-text); }
.bo-link-table .bl-clickable { cursor:pointer; }
.bo-link-table .bl-clickable:hover { background:var(--wine-tint,#F5E6E8); }
.bo-link-table .bl-task-comp { font-size:9.5px; font-weight:600; color:var(--ok-text); margin-top:2px; }
.bo-link-table .bl-task-comp.none { color:var(--muted); }
.bo-link-table .bl-info-ev { margin-bottom:2px; }
.bo-link-table .bl-info-title { font-weight:800; font-size:12.5px; white-space:normal; }
.bo-link-table .bl-info-nums { font-size:10px; color:var(--muted); margin-top:3px; }
.bo-link-table .bl-cell { text-align:center; min-width:120px; }
.bo-link-table .bl-ct-status { font-size:11px; font-weight:700; border:1px solid var(--line); border-radius:7px; padding:3px 6px; cursor:pointer; appearance:auto; }
.bo-link-table .bl-ct-status.st-todo { background:#EFEAE6; color:#555; }
.bo-link-table .bl-ct-status.st-in_progress, .bo-link-table .bl-ct-status.st-review { background:var(--gold-tint); color:var(--gold-text); border-color:#E7C987; }
.bo-link-table .bl-ct-status.st-done { background:var(--ok-tint); color:var(--ok-text); border-color:#Bcd6B8; }
.bo-cat-list { display:flex; flex-direction:column; gap:6px; }
.bo-cat-thread-head { font-weight:700; font-size:12px; color:var(--ink-soft,#555); margin:12px 0 5px; }
.bo-cat-thread { max-height:220px; overflow:auto; }
.bo-cat-thread-input { display:flex; gap:8px; align-items:flex-end; margin-top:6px; }
.bo-cat-thread-input textarea { flex:1; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; font-size:13px; resize:vertical; }
.bo-cat-focus { box-shadow:0 0 0 3px rgba(114,47,55,.25); }
.ex-cell { cursor:pointer; display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:24px; border-radius:7px; padding:3px 5px; transition:background .12s; }
.ex-cell:hover { background:var(--wine-tint,#F5E6E8); }
.ex-cell .ava-empty { font-size:10.5px; color:#b6a; opacity:.6; }
.ex-badge { font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px; white-space:nowrap; }
.ex-badge.ex-file { color:var(--ok-text); background:var(--ok-tint); }
.ex-badge.ex-msg { color:var(--gold-text); background:var(--gold-tint); font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px; white-space:nowrap; }
.ex-files { display:flex; flex-direction:column; gap:2px; width:100%; }
.ex-file-name { font-size:10.5px; font-weight:600; color:var(--ok-text); background:#E6F0E4; border-radius:5px; padding:2px 6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-storage { margin-bottom:14px; }
.cs-storage-card { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; }
.cs-st-head { font-weight:800; font-size:14px; margin-bottom:6px; }
.cs-st-warn { color:var(--danger-ink); font-size:11.5px; font-weight:700; }
.cs-st-main { font-size:13px; margin-bottom:8px; }
.cs-st-main b { color:var(--wine); font-size:16px; }
.cs-st-barwrap { height:14px; background:#F0ECE6; border-radius:999px; overflow:hidden; }
.cs-st-bar { height:100%; background:linear-gradient(90deg,#9A4452,var(--wine)); border-radius:999px; }
.cs-st-bar.cs-bar-warn { background:linear-gradient(90deg,#D8A23A,#9A7B33); }
.cs-st-bar.cs-bar-danger { background:linear-gradient(90deg,#C0504D,var(--danger-ink)); }
.cs-st-cats { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cs-st-chip { font-size:11px; font-weight:700; color:var(--ink-soft,#555); background:#F5F2EC; border-radius:999px; padding:3px 9px; }
.cs-st-details { margin-top:10px; }
.cs-st-details summary { cursor:pointer; font-size:12.5px; font-weight:700; color:var(--wine); }
.cs-st-note { font-size:11px; color:var(--muted); margin-top:10px; line-height:1.6; }
.cs-st-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cs-st-src { font-size:10.5px; font-weight:700; color:var(--ok-text); background:var(--ok-tint); border-radius:999px; padding:2px 8px; }
.cs-st-refresh { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--wine); background:#fff; border:1px solid var(--wine); border-radius:7px; padding:3px 10px; cursor:pointer; }
.cs-st-refresh:hover { background:var(--wine-tint,#F5E6E8); }
.cs-st-orphan { font-size:11.5px; color:var(--gold-text); background:#FFF8E8; border-radius:8px; padding:6px 10px; margin-top:8px; }
.cs-orphan { color:var(--muted); font-style:italic; }
.bo-dl-actions { margin-top:8px; display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.bo-dl-addnote { font-size:11.5px; color:var(--gold-text); background:var(--gold-tint); border-radius:6px; padding:4px 10px; }
.bo-dl-complete { font-size:12.5px; }
.bo-po-sub { font-weight:700; color:var(--wine); }
.bo-po-bysup { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.bo-po-supcard { display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:210px; background:var(--cream-2); }
.bo-sup-desiredwrap { margin:4px 0 2px; }
.bo-sup-desiredwrap label { display:block; font-size:10.5px; font-weight:700; color:var(--muted); margin-bottom:3px; }
.bo-po-supcard .bo-date-wrap .bo-date-text { font-size:12px; padding:6px 8px; }
.bo-po-supname { font-size:12.5px; font-weight:800; color:var(--ink); }
.bo-po-supmeta { font-size:11.5px; color:var(--ink-soft); }
.bo-po-btn { margin-top:4px; align-self:flex-start; background:var(--wine); color:#fff; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.bo-po-btn.disabled { background:#eee; color: var(--muted); cursor:default; }

/* 工程フロー（詳細の8工程カード） */
.bo-modal-hint { font-size:12px; color:var(--ink-soft); background:var(--cream-2); border-radius:8px; padding:9px 12px; margin:0 0 14px; }
/* 稼働中／アーカイブ 表示切替 */
.bo-view-toggle { display:inline-flex; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-left:auto; }
.bo-view-btn { font-size:12px; padding:5px 14px; border:none; background:#fff; color:var(--ink-soft); cursor:pointer; }
.bo-view-btn.on { background:var(--wine,var(--wine)); color:#fff; font-weight:700; }
/* 新規オーダー追加モーダル：入力欄を列幅に収め、横スクロールを防ぐ */
.bo-order-modal .pm-modal-body { overflow-x: hidden; }
.bo-order-modal .pm-grid { width: 100%; }
.bo-order-modal .pm-f { min-width: 0; }
.bo-order-modal .pm-f input,
.bo-order-modal .pm-f select,
.bo-order-modal .pm-f textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.bo-order-modal .bo-sets-row,
.bo-order-modal .bo-date-wrap { min-width: 0; flex-wrap: wrap; }
.bo-step-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.bo-step-card { border:1px solid var(--line); border-radius:11px; padding:11px 13px; cursor:pointer; background:#fff; transition:all .12s; }
.bo-step-card:hover { border-color:var(--wine); box-shadow:0 2px 10px rgba(114,47,55,.10); }
.bo-step-card-top { display:flex; align-items:center; gap:7px; }
.bo-step-num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--wine); color:#fff; font-size:11px; font-weight:800; flex-shrink:0; }
.bo-step-name { font-size:13px; font-weight:800; color:var(--ink); flex:1; }
.bo-step-card-mid { margin-top:7px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bo-step-team { display:inline-block; font-size:11px; font-weight:700; border:1px solid var(--wine); color:var(--wine); border-radius:999px; padding:1px 8px; }
.bo-step-team.unset { border-color:#ccc; color: var(--muted); }
.bo-step-member { font-size:12.5px; color:var(--ink); font-weight:600; }
.bo-step-unset { color:#b08; color:var(--muted); font-style:italic; }
.bo-step-card-bot { margin-top:5px; min-height:14px; }
.bo-step-date { font-size:11px; color:var(--ink-soft); }
.bo-step-context { font-size:12px; color:var(--ink-soft); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }

/* ============================================================
   ボトリング一覧シート（v8モック準拠）。すべて .bo-sheet 配下にスコープ。
   ============================================================ */
.bo-usage-hint { margin:0 0 12px; padding:11px 16px; background:#FFF8E1; border-left:4px solid var(--gold); border-radius:0 8px 8px 0; color:#5C420F; font-size:12.5px; display:flex; align-items:center; gap:8px; }
.bo-usage-hint b { color:var(--wine); }
/* 2026-06-19: ボトリング上部をコンパクト化（説明文を撤去し、検索をタイトル隣へ）。 */
.bo-head { align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:10px 16px; }
.bo-head-left { display:flex; align-items:center; gap:12px; flex:1 1 360px; min-width:0; }
.bo-head-left .page-title { white-space:nowrap; }
.bo-head-search { flex:1 1 220px; max-width:420px; min-width:150px; }
.bo-head-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bo-head-right .bo-view-toggle { margin-left:0; }
.bo-sheet { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:auto; box-shadow:0 1px 4px rgba(114,47,55,.04); }
.bo-sheet table { border-collapse:separate; border-spacing:0; width:100%; min-width:2550px; font-size:12px; }
.bo-sheet thead th, .bo-sheet tbody td { vertical-align:top; }
.bo-sheet thead .group-row th { position:sticky; top:0; padding:5px 8px; font-size:10.5px; font-weight:800; text-align:center; color:#fff; letter-spacing:.06em; z-index:15; height:25px; box-sizing:border-box; }
.bo-sheet thead .group-row .g-info { background:linear-gradient(180deg,#5B5048,#3D3631); }
.bo-sheet thead .group-row .g-qty { background:linear-gradient(180deg,#8A6F2B,#6F5520); }
.bo-sheet thead .group-row .g-flow { background:linear-gradient(90deg,#7B5EA8 0%,#6A6EBE 13%,#5B86C5 26%,var(--gold) 39%,#D17A40 52%,#E08855 65%,#5C9E72 78%,var(--wine) 100%); }
.bo-sheet thead .group-row .g-extra { background:linear-gradient(180deg,#3D6E7A,#2A4F5B); }
.bo-sheet thead .group-row .g-meta { background:linear-gradient(180deg,#5B5048,#3D3631); }
.bo-sheet thead .col-row th { position:sticky; top:25px; background:linear-gradient(180deg,#FCF8F1,#F0E8DC); color:var(--wine); font-weight:700; padding:10px 8px; text-align:left; border-bottom:2px solid var(--wine); white-space:nowrap; font-size:11px; z-index:14; height:48px; box-sizing:border-box; }
.bo-sheet thead .col-row th.flow-th { padding-left:30px; }
.bo-sheet thead .col-row th.flow-th .step-num { position:absolute; left:7px; top:50%; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; background:var(--col, var(--wine)); }
.bo-sheet thead .col-row th.flow-th { position:sticky; }
.bo-sheet thead .col-row th.extra-th { color:var(--extra); }
/* ===== 2026-06-19: Excel風ウィンドウ枠固定（左=基本情報列／上=ヘッダー行） ===== */
/* ① 縦横スクロールをこの枠内に閉じ込める（右の工程エリアだけがスクロールするように）。
      これによりヘッダー(sticky top・既存)が枠の上端で確実に固定される。 */
.bo-link-wrap { max-height:calc(100vh - 150px); min-height:360px; overflow:auto; }
/* ② 左端「📋 基本情報・数量」列を、横スクロールしても固定する。 */
.bo-link-table thead .group-row th.g-info,
.bo-link-table tbody td.bo-info-td { position:sticky; left:0; }
/* 本文の固定列＝白背景でフローセルを透けさせない。重なり順は
   本文フローセル(z:auto) < 固定列(z:6) < ヘッダー(z:14〜15) < 左上コーナー(z:22)。 */
.bo-link-table tbody td.bo-info-td { z-index:6; background:#fff; box-shadow:6px 0 6px -4px rgba(60,40,30,.18); }
.bo-link-table tbody tr.data-row:hover td.bo-info-td { background:#FDF9F3; }
/* ③ 左上コーナー（基本情報のグループ見出し）は最前面に固定（top:0 は既存ルール）。 */
.bo-link-table thead .group-row th.g-info { z-index:22; box-shadow:6px 0 6px -4px rgba(60,40,30,.18); }
/* ④ 横スクロール中（.bo-scrolled-x＝scrollLeft>0）は固定列を「講座名」だけに“じわじわ”縮約する。
      日付・担当・数量・行アクションを max-width / opacity / margin のトランジションで畳み、
      bo-ig-main（イベント名）だけ残す。左端（scrollLeft=0）に戻すと滑らかに元の全項目へ戻る。 */
/* gap:14px を margin に置換（gap はトランジション不可なため。見た目は同一）。 */
.bo-info-grid { gap:0; }
.bo-info-grid > * + * { margin-left:14px; }
/* 畳む対象は「担当・数量」だけ。開催日(bo-ig-date)は残し、縮約時は講座名の上に出す。
   担当・数量は max-height/opacity をアニメーション。overflow:hidden で中身をクリップ。 */
.bo-link-table td.bo-info-td .bo-ig-who,
.bo-link-table td.bo-info-td .bo-ig-nums {
  overflow:hidden; max-height:90px;
  transition: max-width .32s ease, max-height .32s ease, opacity .24s ease, margin .32s ease;
}
.bo-link-table td.bo-info-td .bo-ig-date { transition: margin .32s ease, flex-basis .32s ease; }
.bo-link-table td.bo-info-td .bo-ig-main { transition: margin .32s ease; }
.bo-link-table td.bo-info-td .bo-row-actions { transition: opacity .2s ease; }
.bo-link-table thead .group-row th.g-info,
.bo-link-table tbody td.bo-info-td { transition: width .32s ease, background .12s; }
/* スクロール中＝基本情報カードを縦並びにして「📅 開催日 → 講座名」の2段に。
   担当・数量は畳む。bo-ig-main（講座名）と bo-ig-date（開催日）は残す。 */
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-info-grid { flex-direction:column; align-items:flex-start; }
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-ig-who,
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-ig-nums {
  max-width:0; max-height:0; min-width:0; margin:0; opacity:0;
}
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-ig-date { flex:0 0 auto; width:auto; margin:0 0 4px; }
/* 縮約時も講座名に十分な幅を確保（min-width:0 だと極端に細くなり読みづらく・押しづらかった）。
   右側にゆとりを持たせ、① テイスティングワイン決定 列との境界も明確にする。 */
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-ig-main { margin-left:0; min-width:220px; }
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-info-card { padding-right:18px; }
.bo-link-wrap.bo-scrolled-x td.bo-info-td { box-shadow:2px 0 0 0 var(--gold), 10px 0 10px -5px rgba(60,40,30,.22); }
.bo-link-wrap.bo-scrolled-x td.bo-info-td .bo-row-actions { opacity:0; pointer-events:none; }
.bo-sheet tbody tr.data-row { border-bottom:1px solid var(--line); transition:background .12s; }
.bo-sheet tbody tr.data-row:hover { background:#FDF9F3; }
.bo-sheet tbody td { padding:10px 8px; border-bottom:1px solid var(--line); }
.bo-sheet .cell-click { cursor:pointer; transition:background .12s, box-shadow .12s, transform .08s; border-radius:6px; padding:6px 8px; margin:-6px -2px; display:block; }
.bo-sheet .cell-click:hover { background:rgba(114,47,55,.06); box-shadow:0 0 0 1.5px rgba(114,47,55,.25); }
.bo-sheet .cell-click:active { transform:translateY(1px); }
.bo-sheet td.flow-td { position:relative; padding:10px 8px 10px 13px; min-width:155px; }
.bo-sheet td.flow-td::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; z-index:1; pointer-events:none; }
.bo-sheet td.flow-td.s1::before { background:var(--s1); } .bo-sheet td.flow-td.s2::before { background:var(--s2); }
.bo-sheet td.flow-td.s3::before { background:var(--s3); } .bo-sheet td.flow-td.s4::before { background:var(--s4); }
.bo-sheet td.flow-td.s5::before { background:var(--s5); } .bo-sheet td.flow-td.s6::before { background:var(--s6); }
.bo-sheet td.flow-td.s7::before { background:var(--s7); } .bo-sheet td.flow-td.s8::before { background:var(--s8); }
.bo-sheet .flow-cell { display:flex; flex-direction:column; gap:4px; }
.bo-sheet .flow-status-sel { font:inherit; font-size:11px; font-weight:800; border:1px solid var(--line); border-radius:6px; padding:3px 6px; cursor:pointer; width:max-content; max-width:100%; appearance:auto; }
.bo-sheet .flow-status-sel:disabled { cursor:default; opacity:.6; }
.bo-sheet .flow-status-sel.st-todo { background:#eee; color:#555; }
.bo-sheet .flow-status-sel.st-doing { background:#fff3da; color:var(--gold-text); border-color:#e7c987; }
.bo-sheet .flow-status-sel.st-done { background:var(--wine); color:#fff; border-color:var(--wine); }
.bo-sheet .flow-date { font-size:11.5px; font-weight:800; color:var(--ink); line-height:1.3; }
.bo-sheet .flow-date.todo { color:var(--muted); font-style:italic; font-weight:400; }
.bo-sheet .flow-team { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; width:max-content; }
.bo-sheet .flow-team.unset { background:#F5F2EC; color:var(--muted); font-style:italic; }
.bo-sheet .flow-assignee { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink); font-weight:600; }
.bo-sheet .ava-sm { width:18px; height:18px; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; flex-shrink:0; background:var(--wine); }
.bo-sheet .ava-sm.unset { background:var(--muted); }
.bo-sheet .assignee-name { font-size:11px; line-height:1.3; }
.bo-sheet .assignee-unset { font-size:10.5px; color:var(--muted); font-style:italic; }
.bo-sheet td.simple-td { padding:6px 4px; }
.bo-sheet .cell-meta { display:inline-flex; align-items:center; gap:4px; padding-top:2px; pointer-events:none; }
.bo-sheet .meta-comments { display:inline-flex; align-items:center; gap:2px; font-size:9.5px; font-weight:700; color:var(--wine); background:var(--wine-tint); padding:1px 6px; border-radius:999px; line-height:1; }
.bo-sheet .meta-comments.empty { color:var(--muted); background:#F5F2EC; }
.bo-sheet .ev-date { background:var(--wine); color:#fff; font-weight:800; padding:5px 10px; border-radius:6px; display:inline-block; font-size:11.5px; white-space:nowrap; width:max-content; }
.bo-sheet .ev-date.dash { background:var(--muted); }
/* 開催日の新表示：年は小さく上に、月日を大きく、曜日付き（土=青/日=赤） */
.bo-sheet .ev-date.evd {
  background: transparent;
  color: var(--ink);
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start; /* 年は月日の左端に揃える */
  gap: 0;
  line-height: 1.05;
}
.bo-sheet .evd-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--wine, var(--wine));
  letter-spacing: .02em;
  margin-bottom: 1px;
}
.bo-sheet .evd-year {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .12em;
}
.bo-sheet .evd-main { display: flex; align-items: baseline; gap: 3px; }
.bo-sheet .evd-md {
  font-size: 22px;
  font-weight: 800;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.bo-sheet .evd-wd { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.bo-sheet .evd-wd.wd-sat { color: var(--info-text); }
.bo-sheet .evd-wd.wd-sun { color: var(--danger); }

/* 基本情報＋数量の統合カード（全面クリックで編集） */
.bo-sheet .bo-info-th { min-width: 600px; text-align: left; padding-left: 14px; }
.bo-sheet .bo-info-th-sub { font-size: 10px; font-weight: 600; color: var(--muted); }
.bo-sheet .bo-info-td { padding: 0; vertical-align: top; }
.bo-info-card {
  display: block;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s;
}
.bo-info-card:hover { background: rgba(200, 169, 81, .08); }
.bo-imp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bo-ig-who { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 130px; }
.bo-cat-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bo-type-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.bo-type-single { background: #F4EAD8; color: #7A5A1F; }
.bo-type-series { background: #E1DCE8; color: #4A3D6B; }
.bo-type-sub { background: #DDE8E0; color: #2E6B43; }
.bo-info-grid { position: relative; }
.bo-row-actions { position: absolute; top: -4px; right: -4px; display: flex; gap: 6px; }
.bo-row-archive, .bo-row-del {
  font-size: 11px; font-weight: 700; color: var(--ink-soft, #6B635E);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; background: #fff; cursor: pointer; white-space: nowrap;
}
.bo-row-archive:hover { color: var(--wine, var(--wine)); border-color: var(--wine, var(--wine)); background: var(--cream, var(--cream)); }
.bo-row-del:hover { color: var(--danger, var(--danger)); border-color: var(--danger, var(--danger)); background: rgba(179,58,58,.06); }
.bo-card-linked:hover .ev-name { text-decoration: underline; }
.bo-imp-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.bo-imp-chip.on { background: rgba(114, 47, 55, .10); color: var(--wine, var(--wine)); border-color: rgba(114, 47, 55, .35); }
.bo-imp-chip.off { background: var(--cream-2, #F1EBE4); color: var(--muted); }
.bo-imp-chip.unset { background: transparent; color: #C7BFB6; border: 1px dashed var(--line); }
.bo-chip-header { cursor: pointer; }
.bo-chip-header:hover { box-shadow: 0 0 0 2px rgba(200, 169, 81, .35); }
.bo-info-grid { display: flex; align-items: center; gap: 14px; }
.bo-ig-date { flex: 0 0 110px; width: 110px; }
.bo-ig-main { flex: 2 1 0; min-width: 280px; text-align: left; }
.bo-ig-main .ev-name { font-size: 15px; font-weight: 800; display: block; line-height: 1.35; }
.bo-ig-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bo-ig-nums { flex: none; display: flex; gap: 10px; }
.bo-num { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.bo-num-l { font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.bo-num-v { font-size: 13px; font-weight: 800; color: var(--ink); }
/* 受講者数 と セット数 を確認しやすく：セット数を強調＋区切り */
.bo-num-sets { border-left: 1px dashed var(--line); padding-left: 10px; }
.bo-num-sets .bo-num-v { color: var(--wine, var(--wine)); }
.bo-sheet .cat-chip { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; width:max-content; background:#E2D7F0; color:#4A2A75; }
.bo-sheet .ev-name { font-weight:700; color:var(--ink); font-size:12.5px; line-height:1.35; }
.bo-sheet .ava-row { display:inline-flex; align-items:center; gap:5px; }
.bo-sheet .ava { width:22px; height:22px; border-radius:50%; background:var(--wine); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.bo-sheet .ava-name { font-size:11.5px; color:var(--ink-soft); }
.bo-sheet .ava-empty { color:var(--muted); font-style:italic; font-size:11.5px; }
.bo-sheet .num-set { color:var(--wine); font-size:14px; font-weight:800; }
.bo-sheet .num-bottles { color:var(--gold-dark); font-size:13px; font-weight:800; }
.bo-sheet .num-bottles .unit { font-weight:500; font-size:10px; color:var(--muted); margin-left:1px; }
.bo-sheet .num-item { font-weight:700; color:var(--ink-soft); font-size:13px; }
.bo-sheet .num-vol { color:var(--ink-soft); font-size:11.5px; }
.bo-sheet td.extra-td { padding:6px 4px; border-left:1px solid #E8DFD9; min-width:100px; background:#F7FAFB; }
.bo-sheet td.extra-td.first { border-left:2px solid var(--extra); }
.bo-sheet tbody tr.data-row:hover td.extra-td { background:#EFF6F8; }
.bo-sheet .yn-pill { display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; width:max-content; }
.bo-sheet .yn-no { background:#F5F2EC; color:var(--muted); font-weight:500; font-style:italic; }
.bo-sheet td.note-td { padding:6px 8px; border-left:2px solid var(--extra); background:#F7FAFB; min-width:160px; max-width:220px; }
.bo-sheet .note-text { font-size:11.5px; color:var(--extra); font-weight:600; line-height:1.5; background:#fff; border:1px dashed #B5CCD3; border-radius:6px; padding:6px 10px; }
.bo-sheet .note-text.empty { color:var(--muted); font-style:italic; font-weight:400; background:#FCFCFA; border-color:#E5DFDA; }
.bo-sheet .status-chip { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.bo-sheet .st-planned { background:#EFEAE6; color:var(--muted); }
.bo-sheet .st-progress { background:var(--gold-tint); color:var(--gold-text); }
.bo-sheet .st-shipped { background:var(--ok-tint); color:var(--ok-text); }
.bo-sheet .bo-ord-status { font:inherit; font-size:11px; font-weight:800; border:1px solid var(--line); border-radius:999px; padding:4px 8px; cursor:pointer; appearance:auto; }
.bo-sheet .bo-ord-status.st-draft { background:#EFEAE6; color:#555; }
.bo-sheet .bo-ord-status.st-progress { background:var(--gold-tint); color:var(--gold-text); border-color:#E7C987; }
.bo-sheet .bo-ord-status.st-done { background:var(--ok-tint); color:var(--ok-text); border-color:#Bcd6B8; }
.bo-sheet .flow-done-chip { display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px 5px; font-size:10px; font-weight:700; color:var(--ok-text); background:var(--ok-tint); border-radius:10px; padding:2px 8px; width:max-content; max-width:100%; line-height:1.35; }
.bo-sheet .flow-done-chip .fdc-name { font-weight:800; }
.bo-sheet .flow-done-chip .fdc-at { font-weight:600; opacity:.85; white-space:nowrap; }
#bo-step-status .bo-ct-btn.active[data-status="todo"] { background:#eee; color:#555; }
#bo-step-status .bo-ct-btn.active[data-status="doing"] { background:#fff3da; color:var(--gold-text); }
#bo-step-status .bo-ct-btn.active[data-status="done"] { background:var(--wine); color:#fff; }
.bo-status-select { width:100%; font:inherit; font-size:13px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; }
.bo-status-select:focus { outline:none; border-color:var(--wine); }
.bo-status-meta { margin-top:6px; font-size:11.5px; color:var(--muted); }
.bo-status-meta .bo-status-meta-empty { color:#aaa; }
@media (max-width:640px){ .bo-step-grid { grid-template-columns:1fr; } }

/* ============================================================
   トースト通知（操作結果フィードバック）
============================================================ */
.toast-wrap {
  position: fixed; right: 16px; bottom: 16px; z-index: 1100;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--ok);
  box-shadow: 0 6px 20px rgba(42, 35, 32, .16);
  font-size: 13px; font-weight: 600;
  animation: toast-in .22s ease-out;
}
.toast-error { border-left-color: var(--danger); background: #FDF3F3; }
.toast-info  { border-left-color: var(--wine); }
.toast-msg { flex: 1; line-height: 1.45; }
.toast-action {
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--wine); background: var(--wine-tint);
  border: 1px solid var(--wine); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.toast-action:hover { background: var(--wine); color: #fff; }
.toast-close {
  font: inherit; font-size: 16px; line-height: 1;
  color: var(--muted); background: none; border: none;
  cursor: pointer; padding: 2px 4px;
}
.toast-close:hover { color: var(--ink); }
.toast-out { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) {
  .toast-wrap { left: 12px; right: 12px; bottom: 72px; max-width: none; }
}