/* ============================================================
   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: #94908C;
  --danger: #B33A3A;
  --cream-2: #F4F0EA;
  --gold: #C8A951;
  --ai: #7B5EA8;
  --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: #2D618C;
  --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: #722F37; --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);

  /* 現在アクティブな事業ラインの色（JS が data-bl 属性で更新） */
  --bl: var(--bl-1);
  --bl-dark: var(--bl-1-dark);
  --bl-tint: var(--bl-1-tint);
}
/* ルート/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); }

* { 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: #FBEAEA;
  color: #B23B3B;
  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-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, #6B5B95);
  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: #8E4F1F; }
.dash-due.upcoming   { background: rgba(74, 143, 185, .15); color: #2D618C; }
.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 未満：事業ラインタブのテキストも隠して絵文字のみ
   どのサイズでも横スクロールがフォールバックとして機能 */
@media (max-width: 1200px) {
  .app-logo-title { display: none; }
}
@media (max-width: 1000px) {
  .global-tab .t-name { display: none; }
  .global-tab { padding: 7px 12px; }
  .global-tab .t-ico { font-size: 16px; }
}
@media (max-width: 850px) {
  .bl-tab .t-name { display: none; }
  .bl-tab { padding: 7px 12px; }
  .bl-tab .bl-tab-icon { font-size: 18px; }
  .global-nav-divider { margin: 0 2px 0 6px; }
  .app-header-top { padding: 10px 14px 0; gap: 8px; }
}
@media (max-width: 640px) {
  .user-name { display: none; }
  .app-header-right { gap: 6px; }
}

/* ============================================================
   ダッシュボード内：月別カレンダー
   ============================================================ */
.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: #B33A3A; }
.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 #43A047; }
.cal-event.reg-closed  { box-shadow: 0 0 0 3px #1A1A1A; }
.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); }  /* 🍇 ツアー：紫 */

/* 週表示：時間軸付きタイムライン（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 #43A047, 0 2px 8px rgba(0,0,0,.18); }
.cal-time-event.reg-closed  { box-shadow: 0 0 0 3px #1A1A1A, 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 .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, #6B5B95);
}
.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, #6B5B95);
  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;
}
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.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 #43A047; }
.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;
}
.course-row:hover { background: var(--cream-2); }
.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, #C8A951, #722F37);
  transition: width 0.3s ease;
}

/* 次の期限 表示（最も近い未完了タスク） */
.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: #C8453F;
  font-weight: 600;
}
.ci-nextdue.soon {
  color: #B85800;
}
.ci-nextdue.overdue {
  color: #C8453F;
  font-weight: 700;
}
.ci-nextdue.overdue strong { color: #C8453F; }
.ci-nextdue-done {
  color: #2E8659;
  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;
}

/* 講座情報の編集ボタン／編集フォーム */
.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-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.cef-field input,
.cef-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
}
.cef-field input:focus,
.cef-field select: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: #FBEAEA;
  color: #B23B3B;
  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); }
.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.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-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 132px 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 {
  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;
}
.st-due.soon {
  color: #B85800;
  background: #FFF4E0;
  border-left-color: #FF9F1A;
}
.st-due.today {
  color: #C8453F;
  background: #FFEDEB;
  border-left-color: #C8453F;
  font-weight: 800;
}
.st-due.overdue {
  color: #fff;
  background: #C8453F;
  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;
}

/* 完了タスクの「チェックを入れた人」表示 */
.st-doneby {
  margin-top: 4px;
  font-size: 11px;
  color: #2E8659;
  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); }

/* タスクのパラメータ設定パネル */
.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);
}
.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: grid;
  grid-template-columns: 14px 20px 1fr 62px 92px 96px;
  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-num { font-weight: 700; color: var(--ink); min-width: 0; }
.ses-type-tag {
  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-date { color: var(--ink-soft); }
.ses-progress { font-size: 11px; color: var(--muted); text-align: right; }

/* セッションを展開したときの中身（各回の運用タスク） */
.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; }
.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 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: #FBEAEA;
  color: #B23B3B;
  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 .assignee { display: none; }
  .st-due { font-size: 11.5px; padding: 3px 7px; }
  .session-row { grid-template-columns: 14px 20px 1fr 96px; }
  .session-row .ses-type-tag,
  .session-row .ses-date { 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);
}
.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;
}
.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-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-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: #FBEAEA;
  color: #B23B3B;
  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: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.tmst-ai-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ai-tint);
  color: var(--ai);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.tmst-group-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--wine-tint);
  color: var(--wine);
  white-space: nowrap;
  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: #2D618C; }
.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: #8E4F1F; }
.imp-card-status.accepted  { background: rgba(46,134,89,.16); color: #1F6242; }
.imp-card-status.fixed     { background: rgba(74,143,185,.18); color: #2D618C; }
.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-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);
}
.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: #2D618C; 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-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: #C8A951; font-size: 20px; }
.imp-rank-row.top2 .rank-no { color: #999; 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: #8E4F1F; }
.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 #C8A951;
  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, #722F37);
}
.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); }

/* フェーズ色：タスクマスタのグループバッジ */
.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-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); }

/* フェーズ色：タスクマスタ画面のフィルタチップ */
.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); }

/* フェーズ色：講座詳細のタスク呼び出しパネル チップ・見出し */
.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-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); }

/* 閲覧のみのお知らせ（非管理者向け） */
.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; }
}