/* ============ 予定タブ（スケジュール・todo管理）2026-09-07追加 ============ */
  /* 締切カード（バックログ#26、2026-09-23追加） */
  .schedule-deadline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  .schedule-deadline-row:last-child { border-bottom: none; }
  .schedule-deadline-row:active { background: var(--surface-sunk); }
  .schedule-deadline-date {
    flex-shrink: 0;
    /* 違う年の月を表示した時は「2025/12/26」と年が付くので、幅は最小値にする（バックログ#33-28） */
    min-width: 34px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-muted);
  }
  .schedule-deadline-date.schedule-item-overdue { color: var(--brick); }
  .schedule-deadline-date.schedule-item-due-soon { color: var(--amber); }
  .schedule-deadline-kind-icon { flex-shrink: 0; color: var(--pine); font-size: 13px; }
  .schedule-deadline-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* プロジェクトのタイトルは他の画面（進捗管理のプロジェクト見出し等）と同様に
     太字にする（2026-09-25、ユーザー指摘）。 */
  .schedule-deadline-name.is-project { font-weight: 800; }
  .schedule-deadline-row.is-done .schedule-deadline-name {
    color: var(--ink-faint);
    text-decoration: line-through;
  }
  /* 予定・todoの追加／編集フォーム。2026-09-21にダイアログ（#scheduleFormOverlay、
     .sheet内）へ変更したため、以前の枠線・背景・余白（インライン表示時に「フォームの
     範囲」を区別するためのもの）は不要になり、外側の.sheetに任せる。 */
  #scheduleAddForm {
    margin: 0;
  }
  /* 終了時刻が開始時刻より前の時の理由（#35-1）。開始・終了の2列の下に全幅で出す */
  .schedule-form-time-error {
    grid-column: 1 / -1;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--brick);
  }
  #scheduleFormEndTime[aria-invalid="true"] { border-color: var(--brick); }
  /* フォーカス中もブラウザ標準の黒い輪郭で赤枠が隠れないよう、輪郭も赤にする（35-1の手直し②） */
  #scheduleFormEndTime[aria-invalid="true"]:focus {
    border-color: var(--brick);
    outline: 2px solid var(--brick);
    outline-offset: 0;
  }
  .schedule-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .schedule-cal-nav-btn {
    width: 32px; height: 32px;
    border: none;
    background: var(--surface-sunk);
    border-radius: 50%;
    font-size: 16px;
    color: var(--ink);
    cursor: pointer;
  }
  .schedule-cal-month-label { font-size: 15px; font-weight: 700; }
  .schedule-cal-today-btn {
    display: block;
    margin: 0 auto 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--pine);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    padding: 4px 14px;
    border-radius: 999px;
    cursor: pointer;
  }
  .schedule-cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    color: var(--ink-faint);
    margin-bottom: 4px;
  }
  .schedule-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
  }
  .schedule-cal-cell {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    cursor: pointer;
    font-size: 10px;
    color: var(--ink);
    position: relative;
    overflow: hidden;
  }
  .schedule-cal-cell.other-month { opacity: 0.35; }
  /* 今日の枠線はセルの外側（outline）に描く。borderだとセルの内側が狭まり、スマホ幅で
     ギリギリのカレンダーが崩れるため（2026-09-21、ユーザー指摘）。 */
  .schedule-cal-cell.is-today { outline: 1.5px solid var(--pine); outline-offset: 0; z-index: 1; }
  .schedule-cal-cell.is-past { opacity: 0.6; background-color: var(--bg-faint, #f9f9f9); }
  .schedule-cal-cell.is-selected { background: var(--pine); color: #fff; }
  .schedule-cal-cell .cal-top-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-inline: 2px;}
  .schedule-cal-cell .cal-day-num { font-weight: 700; font-size: 12px; }
  /* 締切マーク（◆）と勤怠アイコンをひとまとめにして右端に置く（バックログ#27、
     2026-09-23）。.cal-top-row自体はjustify-content:space-betweenのまま
     （日付／右側アイコン群の2要素）に保つことで、既存の件数・工数・負荷の行の
     レイアウトに影響しないようにしている。 */
  .schedule-cal-cell .cal-right-icons { display: flex; align-items: center; gap: 2px; }
  .schedule-cal-cell .cal-deadline-mark { font-size: 10px; line-height: 1; color: var(--brick); }
  /* ◇（タスク期日）と◆（プロジェクト締切）が同じ日にある場合、◇を左・下レイヤー、
     ◆を右・上レイヤーにして70%ほど重ねる（2026-09-23、ユーザー指摘）。隣接
     セレクタ（.cal-deadline-mark-task + .cal-deadline-mark-project）なので、
     ◇が直前の兄弟にある時だけ効く＝◆単独の時は通常間隔のまま。position指定は
     せず、通常のDOM描画順（後の要素が上）だけでレイヤー順を出している。 */
  /* .cal-right-icons自体のgap:2pxが負のmarginとは別に効いてしまう（flexboxの
     gapはmarginに関わらず常に加算される）ため、その分も差し引いて狙った重なり幅に
     する。 */
  .schedule-cal-cell .cal-deadline-mark-task + .cal-deadline-mark-project {
    margin-left: calc(-0.7em - 2px);
  }
  .schedule-cal-cell .cal-attendance-icon { font-size: 11px; line-height: 1; }
  /* 選択中セル（緑地）の勤怠アイコン・件数アイコン（#33-46、2026-10-10）: 以前は白抜き（filter: brightness(0) invert(1)）に
     していたが、新しい青系の画像は中の白い部分まで塗りつぶされて形が分からなくなる（予定の「カレンダー＋時計」が白い塊になる）。
     白抜きをやめ、未選択のセルと同じく白地の上に元の色で見えるよう、小さな白い下地を敷く */
  .schedule-cal-cell.is-selected .cal-attendance-icon img,
  .schedule-cal-cell.is-selected .cal-icon {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92);
  }
  .schedule-cal-cell .cal-count-line { font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* 件数の記号（旧⏰/✅の絵文字）の代わりの画像。絵文字は10px文字で幅12px（PCの13px文字で
     幅16px）だったので、同じ幅（画像10px＋左右1px／13px＋左右1.5px）にして、行の高さも
     変わらないよう縦位置を調整している。選択中のセルは緑地なので白い下地を敷く（上の.is-selectedのルール）。 */
  .schedule-cal-cell .cal-icon {
    width: 10px;
    height: 10px;
    margin: 0 1px;
    vertical-align: -1px;
  }
  .schedule-cal-cell .cal-count-schedule { color: #000000; }
  .schedule-cal-cell.is-selected .cal-count-schedule { color: #ffffff; }
  .schedule-cal-cell .cal-count-todo { color: var(--amber); }
  .schedule-cal-cell.is-selected .cal-count-todo { color: #ffe6bd; }
  .schedule-cal-cell .cal-total-hours { font-size: 10px; margin-top: 0px; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .schedule-cal-cell.is-selected .cal-total-hours { color: #ffffff; }
  .schedule-cal-cell .cal-load-line { font-size: 10px; margin-top:0px; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .schedule-cal-cell.is-selected .cal-load-line { color: #ffffff; }
  /* マスの負荷は小数1桁（#33-23）。412px以上・PCのマスでも「負荷 62.5pt」でちょうど収まる幅しかなく、
     390では切れたため、狭い画面では「負荷 」を省いて数字だけにする（境目は下の@media参照）。3桁＋小数（105.5ptなど）はどの幅でも
     収まらないので、JS側で.is-longを付けてラベルを省く（#33-23、2026-10-04）。 */
  .schedule-cal-cell .cal-load-line.is-long .cal-load-label { display: none; }
  /* 境目は430px（2026-10-04、PM指示）。この環境では412で「負荷 62.5pt」が余り0pxで収まるが、ユーザーの
     ブラウザはフォントの幅がこの環境より広い（#33-29で1行の文字が2行に割れた実例）ため、412でも切れうる。
     412（ユーザーの実機）を含む430px未満では数字だけにする。 */
  @media (max-width: 429.98px) {
    .schedule-cal-cell .cal-load-label { display: none; }
  }
  .schedule-cal-cell.is-selected .cal-deadline-mark { color: #ffe6bd; }

  .schedule-item-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    margin-bottom: 6px;
  }
  .schedule-item-row:last-child { margin-bottom: 0; }
  /* 「予定」（時刻あり）は白地・枠線無しで、本体（時刻/チェックボックスの右側）との
     境目に太いアクセント線を入れてtodoと見分ける。以前は行全体の外枠を線で囲って
     いたが、一覧表示で日付グループ自体をカード化した（2026-09-18）ことで二重の
     囲みになってしまうため廃止し、線の位置も「行の左端」から「チェックボックス
     （一覧表示ではtodoと同じ位置に出る）のすぐ右」へ移動した（ユーザー指摘、
     2026-09-18）。「todo」は背景色で見分ける（2026-09-10、以降pine系に統一）。 */
  .schedule-item-row.type-schedule {
    background: var(--surface);
  }
  .schedule-item-row.type-schedule .schedule-item-body {
    border-left: 4px solid var(--pine);
    padding-left: 10px;
  }
  .schedule-item-row.type-todo {
    /* pine-softは一覧表示の日付グループヘッダーや「+ 予定・todoを追加する」ボタンと
       同じ色で紛らわしいため、surface-sunk（アプリ内の他の「控えめな囲み」と同じ
       トーン）に変更（2026-09-18、ユーザー指摘）。 */
    background: var(--surface-sunk);
    border-radius: 4px;
  }
  .schedule-item-time { font-size: 11px; color: var(--ink-faint); flex-shrink: 0; width: 76px; }
  /* 進捗管理画面（#projectProgressGroups）だけ、スケジュール・Todoの文字サイズを
     さらに下げる（2026-09-24、ユーザー指摘。プロジェクト名14px基準の比率(÷16×14)で
     他の共通クラスも揃えて縮小。カレンダー・一覧表示タブ側の同じクラスには影響しない
     よう#projectProgressGroups配下に限定している）。 */
  #projectProgressGroups .schedule-item-time { font-size: 9.5px; }
  #projectProgressGroups .schedule-item-meta,
  #projectProgressGroups .schedule-item-meta-inline { font-size: 9.5px; }
  #projectProgressGroups .schedule-item-overdue { font-size: 11px; }
  #projectProgressGroups .delay-pill,
  #projectProgressGroups .due-soon-pill { font-size: 9.5px; }
  .schedule-item-body { flex: 1; min-width: 0; }
  .schedule-item-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .schedule-item-title.is-completed { text-decoration: line-through; color: var(--ink-faint); }
  /* 終了したスケジュール（時刻あり＋完了済み）：取り消し線ではなく、行全体を薄く・左の線を灰色・
     時刻の下に「終了」ラベル（バックログ#33-11、2026-10-02）。Todoの完了（取り消し線）と見分ける
     ため。タイトルの文字色は変えず、薄さはopacityだけで出す。 */
  .schedule-item-row.is-ended { opacity: 0.5; }
  .schedule-item-row.type-schedule.is-ended .schedule-item-body { border-left-color: var(--ink-faint); }
  .schedule-item-ended-label { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--ink-muted); }
  #projectProgressGroups .schedule-item-ended-label { font-size: 9px; }
  .schedule-item-meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
  /* シンプル表示（2026-09-22追加）：タイトル・工数/負荷・期日・遅延を1行に収める。
     タイトルだけが可変幅で、長い場合は末尾を省略する。ガント表示中（幅に余裕がある）は
     必ず1行に収め、それ以外（スマホの縦画面等）は折り返しを許して横にはみ出さない
     ようにする（.date-group-header-row1.is-simpleと同じ理由、2026-09-22）。 */
  .schedule-item-row.is-one-line { align-items: center; flex-wrap: wrap; }
  #projectProgressGroups.gantt-on .schedule-item-row.is-one-line { flex-wrap: nowrap; }
  .schedule-item-row.is-one-line .schedule-item-title.one-line {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 32px;
  }
  .schedule-item-meta-inline { flex-shrink: 0; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
  .schedule-item-overdue { color: var(--brick); font-weight: 700; font-size: 12.5px; }
  /* 行全体を赤背景で塗るのはやめた（バックログ#33-9、2026-09-30。赤の使いすぎで警告の
     意味が薄れる・「責められている感」が出るという指摘への対応）。期限切れは下の
     .delay-pillだけで示す。 */
  /* 期限切れ（実施日を過ぎて未完了のTodo）を示す赤太字のピル。カード右端、および
     タスク・プロジェクトの「期限切れあり」で共用（2026-09-21）。 */
  .due-soon-pill { flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--amber); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
  .delay-pill { flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 800; color: var(--brick); background: var(--surface); border: 1px solid var(--brick); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
  .schedule-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .schedule-item-actions button {
    border: none; background: none; color: var(--ink-faint); font-size: 13px; cursor: pointer; padding: 2px 4px;
  }
  /* 完了チェックの丸い見た目はshared.css（.schedule-item-checkbox, .task-checkで統一。バックログ#33-1）。 */

  .schedule-backlog-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    margin-bottom: 6px;
  }
  .schedule-backlog-row:last-child { margin-bottom: 0; }
  .schedule-backlog-body { flex: 1; min-width: 0; }
  .schedule-backlog-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .schedule-backlog-meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
  .schedule-assign-btn {
    flex-shrink: 0;
    border: none;
    background: var(--pine);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .schedule-assign-day-list { max-height: 50vh; overflow-y: auto; }
  .schedule-assign-day-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    margin-bottom: 6px;
    cursor: pointer;
  }
  .schedule-assign-day-row:last-child { margin-bottom: 0; }
  .schedule-assign-day-date { font-size: 13px; font-weight: 700; color: var(--ink); }
  .schedule-assign-day-attendance { margin-left: 8px; font-size: 11.5px; font-weight: 400; color: var(--ink-muted); }
  .schedule-assign-day-capacity { font-size: 12px; font-weight: 700; }

  /* 日付詳細カード内の「予定」「todo」の区切りラベル。閉じるボタンと同じ文字サイズに揃えている。 */
  .schedule-section-label { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin-bottom: 6px; }
  .schedule-show-more-btn {
    width: 100%;
    margin-top: 8px;
    border: none;
    background: none;
    color: var(--pine);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 8px 0 2px;
    cursor: pointer;
  }

  .task-list-empty { text-align: center; padding: 20px 0; color: var(--ink-faint); font-size: 13px; font-weight: 700; }

  /* --- 予定タブ：一覧表示（2026-09-15追加。旧タスクタブの絞り込み・ソート・
     日付グループ・ページネーションのCSSをそのまま移植したもの） --- */
  .task-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .task-filter-chevron {
    color: var(--ink-faint);
    font-size: 12px;
    transition: transform 0.15s ease;
  }
  .task-filter-chevron.open { transform: rotate(90deg); }
  .task-filter-body { margin-top: 12px; }
  .task-filter-completed-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .task-filter-completed-toggle input { width: 16px; height: 16px; accent-color: var(--pine); }
  .task-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  .task-sort-tabs { flex: 1; margin-bottom: 0; }
  .task-filter-clear {
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 0 14px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
  }
  .task-filter-clear:active { background: var(--surface-sunk); }
  .task-filter-summary {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--ink-muted);
  }
  .task-filter-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-faint);
    font-size: 13px;
  }

  .task-load-more {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--pine-deep);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .task-load-more:active { background: var(--surface-sunk); }

  /* 日付・締切日ごとのグループを白いカードにして、ページ地色との差を出す
     （2026-09-18、薄緑の塗りつぶしヘッダーだけだと視認性が悪いという指摘への対応）。
     ヘッダーはカード内の見出し行として扱い、sticky指定は廃止（カード化した結果、
     短いグループばかりになりスティッキー表示の意味が薄れたため）。 */
  .date-group {
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .date-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface);
    padding: 10px 12px;
    margin: 0;
    border-bottom: 1px solid var(--line);
  }
  .date-group-header .count { color: var(--ink-muted); opacity: 1; font-weight: 400; margin-left: 4px; }
  /* 締切順の各グループヘッダーが期日超過の時の警告色（2026-09-17追加、2026-09-18：
     グループ内のタスクが全件完了済みの場合は警告色にしないよう条件を追加）。
     schedule-item-overdue（行本体の期日ラベル）と同系統の色。 */
  .date-group-header.is-overdue { color: var(--brick); }
  .date-group-header.is-overdue .count { color: var(--brick); }
  .date-group-body { padding: 12px; }
  .date-group-summary-pills { display: flex; gap: 6px; flex-shrink: 0; }
  .date-group-hours,
  .date-group-load {
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* ヘッダーが白地カードになった（2026-09-18）ため、ピル自体にsurface-sunkの背景を
     持たせて輪郭が見えるようにする（以前はpine-soft地に白ピルで見えていた）。 */
  .date-group-hours { background: var(--surface-sunk); color: var(--ink-muted); }
  .date-group-load.load-ok { background: var(--surface-sunk); color: var(--pine-deep); }
  .date-group-load.load-warn { background: var(--surface-sunk); color: #6B4A15; }
  .date-group-load.load-alert { background: var(--surface-sunk); color: #6E241B; }

  /* カレンダー表示の選択日詳細カード：見出し（日付）と工数・心理的負荷の合計ピルを
     同じ行に並べる（一覧表示の各グループヘッダーと同じ.date-group-summary-pillsを
     流用。2026-09-17追加）。 */
  .schedule-day-detail-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    margin-bottom: 14px;
  }
  .schedule-day-detail-header-row .card-title { margin: 0; padding: 0; }
  /* タスクが無い日は空文字のままなので:emptyで余白ごと消す。 */
  .schedule-day-detail-summary:empty { display: none; }

  /* 一覧表示の行に、カテゴリ・タスクマスター連動の補足情報を出す時に使う
     （schedule-item-row/backlog-row本体は既存のスタイルをそのまま使う）。 */
  .task-master-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-top: 4px;
    cursor: pointer;
  }
  .task-master-hint:active { background: var(--pine-soft); }
  .task-master-hint-text { flex: 1; }
  .task-master-hint-arrow { color: var(--ink-faint); font-size: 14px; flex-shrink: 0; }
  .task-edit-meta-line {
    font-size: 12px;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-top: 4px;
  }

  /* タスクマスターのクイック追加ボタン（field-block-labelの隣に置く小さいボタン）。
     2026-09-16追加。 */
  .field-block-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .field-block-label-row .field-block-label { padding-left: 0; }
  /* 負荷の合計の計算式の目安（#33-2）。「目安：1時間あたり15pt × 1.5h = 22.5pt」 */
  .load-calc-hint { font-size: 11px; color: var(--ink-muted); margin-top: 4px; }
  .load-calc-hint[hidden] { display: none; }
  .tm-quick-add-btn {
    border: none;
    background: none;
    color: var(--pine-deep);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
  }
  /* 「タスク（任意）」の下の説明の一文（バックログ#33-3、2026-10-03） */
  .tm-select-hint {
    font-size: 11px;
    color: var(--ink-muted);
    margin: 2px 0 6px;
  }

  /* タスクマスター選択欄＋参照情報のまとまり（2026-09-18追加）。通常の編集項目とは
     視覚的に区別するため、borderと薄い背景で「これはタスクマスターの内容の参照表示」
     であることを示す。 */
  .task-master-select-group {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    padding: 10px;
  }
  .task-master-info-box {
    margin-top: 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    margin-left: -6px;
    margin-right: -6px;
  }
  .task-master-info-box:active { background: var(--pine-soft); }
  .task-master-info-box .sheet-row { padding: 6px 0; font-size: 12.5px; }
  .task-master-info-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: var(--pine-deep);
    padding: 2px 0 4px;
  }

  /* 入力不可（自動算出）の予定工数欄を、通常の空欄と見分けやすくする
     （バックログ、2026-09-18追加）。ラベル側にも「（自動算出）」を出しているが、
     入力欄自体の見た目もはっきり変える。 */
  .task-form-input:disabled {
    background: repeating-linear-gradient(
      135deg, var(--surface-sunk), var(--surface-sunk) 6px, var(--surface) 6px, var(--surface) 12px
    );
    color: var(--ink-muted);
    cursor: not-allowed;
  }

  /* ============ 予定タブ「進捗表示」（バックログ#14、2026-09-18追加） ============
     プロジェクト（カテゴリー）ごとのグルーピングは、一覧表示の日付グループと同じ
     .date-group/.date-group-header/.date-group-bodyをそのまま流用する
     （白背景カードでグループ化する見た目を揃えるため）。 */
  /* PC2ペイン化（バックログ#18）の右ペインは、モバイルでは隠す（@media側で表示に
     切り替える）。モバイルはタスク行の直下にアコーディオン展開する（下記
     .task-progress-drilldown）。 */
  /* 階層が分かるよう、プロジェクト配下のタスクはインデント＋左の縦線、タスク配下の
     スケジュール・Todoはさらに一段インデント＋縦線にする（2026-09-20、ユーザー指摘）。
     縦線の色は--tree-line。ガント表示中は下の#projectProgressGroups.gantt-on側で
     擬似要素の縦線に置き換える。 */
  .task-progress-row {
    --tree-line: rgba(63, 110, 93, 0.4);
    padding: 7px 0 7px 12px;
    margin-left: 6px;
    border-left: 2px solid var(--tree-line);
    /* タスク間の区切り線は、左の縦線に重ならないよう、縦線から少し離して引く
       （borderではなく背景で描いて、左を12px空ける。2026-09-21、ユーザー指摘）。 */
    background: linear-gradient(var(--line), var(--line)) 12px 100% / calc(100% - 12px) 1px no-repeat;
    cursor: pointer;
  }
  .task-progress-row:last-child { background: none; }
  .task-progress-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  /* 階層の大小が直感的に分かるよう、プロジェクト名(14px)＞タスク名(12.5px)＞配下の
     スケジュール・Todo名(下の.task-progress-drilldown内は11.5px)の順にする（2026-09-21。
     2026-09-24、ユーザー指摘でプロジェクト名を16px→14pxにし、他も同じ比率(÷16×14)で
     縮小・行の高さも詰めた）。 */
  .task-progress-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .task-progress-drilldown .schedule-item-title { font-size: 11.5px; }
  /* シンプル表示（2026-09-22追加）：タスク名・プロジェクト名・バッジ類を1行にまとめる。
     ガント表示中（PC・アプリ横画面。左側が440px確保されている）は名前を省略してでも
     必ず1行に収め、それ以外（スマホの縦画面等、幅が足りないことがある）は折り返しを
     許して横にはみ出さないようにする（2026-09-22、ユーザー指摘。厳密に1行固定にすると
     スマホ縦画面で横スクロールが発生してしまっていた）。 */
  .task-progress-row-top.is-simple,
  .date-group-header-row1.is-simple {
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  #projectProgressGroups.gantt-on .task-progress-row-top.is-simple,
  #projectProgressGroups.gantt-on .date-group-header-row1.is-simple {
    flex-wrap: nowrap;
  }
  .task-progress-row-top.is-simple .task-progress-name,
  .date-group-header-row1.is-simple .date-group-header-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 32px;
    flex-shrink: 1;
  }
  .task-progress-row-top.is-simple .task-progress-status,
  .task-progress-row-top.is-simple .task-progress-count-pill,
  .task-progress-row-top.is-simple .task-progress-due-badge,
  .task-progress-row-top.is-simple .task-progress-recurring-label,
  .task-progress-row-top.is-simple .delay-pill,
  .date-group-header-row1.is-simple .task-progress-status,
  .date-group-header-row1.is-simple .task-progress-count-pill,
  .date-group-header-row1.is-simple .task-progress-due-badge,
  .date-group-header-row1.is-simple .delay-pill,
  .date-group-header-row1.is-simple .due-soon-pill { flex-shrink: 0; }
  /* プロジェクト見出し行もタスク行と同じくぎりぎりまで詰める（2026-09-24）。
     .date-group-headerは進捗管理シンプル表示以外（一覧表示の日付グループ見出し等）
     でも使う共通クラスなので、:has()でシンプル表示の見出し行を含む時だけ絞る。
     これも非ガントの場合のみ効き、ガント表示中は下の.gantt-row-main側を見る。 */
  .date-group-header:has(.date-group-header-row1.is-simple) {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  /* シンプル表示はぎりぎりまで行の高さを詰める（2026-09-24、ユーザー指摘。文字の高さ
     ＋2pxくらいのイメージ）。以前は8pxでまだ余白が目立っていた。これは非ガント
     （スマホ縦画面等）の場合のみ効く。ガント表示中（PC・アプリ横画面）は
     #projectProgressGroups.gantt-on .task-progress-row側でpadding:0にリセットされ、
     代わりに.gantt-row-mainの方が実際の縦padding担当になるため、そちらも別途
     下で同じ値に揃える。 */
  .task-progress-row.is-simple { padding-top: 2px; padding-bottom: 2px; }
  /* タスク行タップでドリルダウンを表示している間の強調表示（2026-09-19追加。以前は
     専用の展開ボタンにopenクラスで色を付けていたが、行タップ自体がトリガーになった
     ため行側に付ける）。 */
  /* ステータス（未着手/実施中/完了）は、他のピル（完全な角丸）と見分けが付くよう、
     角の小さい四角形＋太字にする（2026-09-21、ユーザー指定）。完了=緑・実施中=青の
     ベタ塗り、未着手=白地に灰色の枠（2026-09-19の「見分けやすく」の方針は維持）。 */
  .task-progress-status {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1.5px solid var(--ink-faint);
    padding: 1px 8px;
    border-radius: 4px;
  }
  .task-progress-status.is-done { color: #fff; background: var(--pine); border-color: var(--pine); }
  .task-progress-status.is-in-progress { color: #fff; background: var(--score-mental); border-color: var(--score-mental); }
  .task-progress-bar-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .task-progress-bar-fill { height: 100%; background: var(--pine); border-radius: 999px; }
  /* 定例タスク（バックログ#16）は進捗バーの代わりにこのラベルだけを出す。 */
  .task-progress-recurring-label {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    padding: 3px 8px;
    border-radius: 999px;
  }
  /* モバイル版ドリルダウンのアコーディオン展開部分（バックログ#17）。行タップで
     開くようになった（2026-09-19、以前は専用ボタンだったため位置合わせの
     インデントが必要だったが、行タップ化に伴い軽めのインデントに変更）。 */
  .task-progress-drilldown {
    margin: 8px 0 0 20px;
    padding-left: 10px;
    border-left: 2px solid rgba(63, 110, 93, 0.4);
  }
  .task-progress-drilldown .schedule-item-row { padding: 5px 0; }
  /* このドリルダウンの行は左右のpaddingが0のため、遅延ピルがカードの右端に張り付く。
     右に余白を取る（2026-09-21）。 */
  .task-progress-drilldown .schedule-item-row .delay-pill { margin-right: 10px; }
  /* タスク行・プロジェクト行の3行目（展開中だけ表示、2026-09-20）：
     「完了も含める」と、タスク行はさらに編集（✎）・追加（＋）ボタン。 */
  .task-progress-row-extra { display: none; margin-top: 8px; }
  .task-progress-row.is-expanded .task-progress-row-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .task-progress-row-extra .include-completed-check { width: auto; flex: 0 0 auto; padding-bottom: 0; white-space: nowrap; }
  .task-progress-row-extra { flex-wrap: wrap; }
  .date-group-header-row3 .include-completed-check { padding-bottom: 0; }
  .date-group-header-row3 { display: none; margin-top: 6px; }
  .date-group.is-expanded .date-group-header-row3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .date-group-header-row3 .include-completed-check { flex: 1; min-width: 0; }
  .task-progress-row-top .progress-drilldown-edit-btn { display: none; }
  .task-progress-row.is-expanded .task-progress-row-top .progress-drilldown-edit-btn { display: block; }
  /* シンプル表示（2026-09-23）は「詳細」ボタンが主役なので、展開状態に関わらず常に
     表示する（詳細表示の✎とは違い、隠しておく理由が無いため）。 */
  .task-progress-row-top.is-simple .progress-drilldown-edit-btn { display: block; }
  /* プロジェクト見出しの✎（編集）・＋（タスク追加）をまとめて右寄せする
     （2026-09-19追加、以前は＋がカード下部の全幅ボタンだった）。 */
  .date-group-header-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
  /* プロジェクト見出しの2行構成（2026-09-19追加）。.date-group-headerは一覧表示の
     日付グループでも使う1行flexレイアウトのため、進捗管理のプロジェクト見出しにだけ
     .is-project-header修飾子でblock化し、中を2行（row1/row2）に積む。 */
  .date-group-header.is-project-header { display: block; cursor: pointer; }
  /* プロジェクトを初期表示ではタスク非表示にし、見出しタップで開閉する
     （2026-09-19追加、PCでスクロールせず全プロジェクトを見渡せるようにするため）。
     .date-group-bodyは一覧表示の日付グループでも使う共通クラスのため、
     .is-project-group修飾子で進捗管理のプロジェクトカードだけに限定する。 */
  .date-group.is-project-group .date-group-body { display: none; }
  .date-group.is-project-group.is-expanded .date-group-body { display: block; }
  .date-group-chevron {
    color: var(--ink-faint);
    font-size: 12px;
    transition: transform 0.15s ease;
  }
  .date-group.is-expanded .date-group-chevron { transform: rotate(90deg); }
  .date-group-header-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  /* プロジェクト名はタスク名より大きく・濃い緑の太字にして階層の上下が分かるようにする
     （2026-09-20。2026-09-24、ユーザー指摘で16px→14pxに縮小） */
  .date-group-header-name { font-size: 14px; font-weight: 800; color: var(--pine-deep); }
  .date-group-header-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  /* 「x/x件完了」ピル。背景を完了割合（--pct）に応じて左から塗りつぶす
     （塗り部分は薄い緑、残りは灰色）。 */
  .task-progress-count-pill {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--pine-deep);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: linear-gradient(to right, #A9DCD6 var(--pct), var(--surface-sunk) var(--pct));
    white-space: nowrap;
  }
  /* プロジェクトの締切は、期限切れかどうかに関わらずピルにする（2026-09-20）。
     期限切れ（かつ未完了）だけ赤系。 */
  .task-progress-due-badge {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .task-progress-due-badge.is-overdue { color: var(--brick); background: var(--brick-soft); }
  .task-progress-due-badge.is-due-soon { color: #fff; background: var(--amber); font-weight: 800; }
  /* 文字入りの小ボタン（プロジェクト・タスクの「＋…を追加」） */
  .progress-text-btn {
    flex-shrink: 0;
    border: 1px solid var(--pine);
    background: var(--pine-soft);
    color: var(--pine-deep);
    border-radius: var(--radius-sm);
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .progress-text-btn:active { background: var(--pine); color: #fff; }
  /* ドリルダウン内の「完了も含める」チェック（2026-09-19追加）。デフォルトでは
     完了済みを含めずに表示する。 */
  /* ドリルダウン一覧の日付ヘッダー（2026-09-19追加）。既存の.schedule-section-label
     より控えめに、日付の区切りだけ分かるようにする。 */
  .task-progress-drilldown-date-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-muted);
    margin: 9px 0 3px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  .task-progress-drilldown-date-header:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .task-progress-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 9.5px;
    color: var(--ink-muted);
  }

@media (min-width: 1024px) {
  /* --- 予定タブ：カレンダー／選択日の予定／実施日未定のtodoの3カラム --- */
  /* 2026-09-13修正：以前は`:not(section.card:first-child)`で右カラムを
     判定していたが、grid-auto-flowの自動配置が、空のアンカーdiv
     （#scheduleDayDetailAnchor）の影響を受けて行がずれ、右側のカードが
     カレンダーの下まで押し下げられてしまう不具合があった。左右を
     明示的なラッパーdiv（.schedule-col-left/.schedule-col-mid/
     .schedule-col-right）で囲む方式に変更した。2026-09-14: 右カラムを
     選択日カードとバックログに分割し3カラム化。2026-09-15: カレンダー表示/
     一覧表示のモード切替を追加したのに伴い、このグリッドの対象を
     #view-schedule自体から、カレンダー表示側の子要素をまとめる
     #scheduleCalendarModeViewに変更した（#view-schedule直下にはモード
     切替タブと2つのモードのラッパーが並ぶだけになったため）。 */
  #scheduleCalendarModeView {
    display: grid;
    /* 素の1frはminmax(auto, 1fr)扱いで中身の最小幅より縮まないため、狭い画面で
       横に溢れていた（バックログ#33-10、2026-10-02）。minmax(0, 1fr)にして
       画面幅に合わせて縮むようにする。カレンダーの上限550pxは現状維持。 */
    grid-template-columns: minmax(0, 550px) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .schedule-col-left {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
  }
  .schedule-col-mid { grid-column: 2; grid-row: 1; }
  .schedule-col-right { grid-column: 3; grid-row: 1; }
}

/* 1024〜1365px: 3カラムだと窮屈なため2カラムにする（バックログ#33-10、2026-10-02）。
   左にカレンダー（grid-row: 1 / span 2）、右列に選択日→締切→未完了のTodo→実施日未定の
   Todoを縦に並べる。カレンダー下に余白が空く点は今回は対応しない（#33-8と同種の課題）。 */
@media (min-width: 1024px) and (max-width: 1365px) {
  #scheduleCalendarModeView {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  }
  .schedule-col-left { grid-column: 1; grid-row: 1 / span 2; }
  .schedule-col-mid { grid-column: 2; grid-row: 1; }
  .schedule-col-right { grid-column: 2; grid-row: 2; }
}

@media (min-width: 1024px) {

  /* 3カラム目（.schedule-col-right）の「未完了のTodo」行は、期限切れ・省エネ系の
     ピルをタイトル・メタ情報の下の行へ回す（バックログ#33-10、2026-10-02。列幅が
     狭く、ピルが右側に固定幅を取るせいでタイトルが単語の途中で不自然に折り返して
     いたため）。2カラム時（右カラムが広い時）も同じ並びでよい。中央カラムの選択日
     カード・一覧表示の行・実施日未定のTodo（.schedule-backlog-row、対象外）には
     影響しない。 */
  .schedule-col-right .schedule-item-row { flex-wrap: wrap; row-gap: 4px; }
  .schedule-col-right .schedule-item-body { flex: 1 1 calc(100% - 40px); }
  /* 1つ目のピルの左端をタイトルの左端（チェックボックスの右）に揃える。 */
  .schedule-col-right .schedule-item-body + span { margin-left: 30px; }

  /* 中央カラム（選択日カード）の見出し: 日付は1行のまま（「10月13／日(火)」と折れないように）、
     合計のピルが入らない幅ではピルを次の行へ回す（バックログ#43-13 6-J）。 */
  .schedule-col-mid .schedule-day-detail-header-row { flex-wrap: wrap; row-gap: 6px; }
  .schedule-col-mid .schedule-day-detail-header-row .card-title { white-space: nowrap; }

  /* 中央カラムの選択日カードは、3カラム（1366px以上）で約320px、2カラム（1024〜1365px）でも1024px付近では
     約285pxしかなく、時刻（76px）と右側の「調整済み」「短縮済み」「期限切れ」ピルに挟まれて、タイトルが
     「5分休／憩」のように1文字ずつ折れていた（バックログ#43-13 6-J）。3列目（#33-10）と同じく、
     ピルはタイトル・メタ情報の下の行へ回し、1つ目のピルの左端をタイトルの左端
     （Todo=チェックボックスの右、スケジュール=時刻の右）にそろえる。 */
  .schedule-col-mid .schedule-item-row { flex-wrap: wrap; row-gap: 4px; }
  .schedule-col-mid .schedule-item-row.type-todo .schedule-item-body { flex: 1 1 calc(100% - 40px); }
  .schedule-col-mid .schedule-item-row.type-schedule .schedule-item-body { flex: 1 1 calc(100% - 84px); }
  .schedule-col-mid .schedule-item-row.type-todo .schedule-item-body + :is(span, button) { margin-left: 30px; }
  .schedule-col-mid .schedule-item-row.type-schedule .schedule-item-body + :is(span, button) { margin-left: 84px; }

  /* 一覧表示（旧タスクタブ）のレイアウト。左=絞り込みカード（独立スクロール）、
     右=一覧。旧#view-tasksのグリッド定義をそのまま移植。 */
  #scheduleListModeView {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 16px;
    align-items: start;
  }
  #scheduleListModeView .task-col-left {
    grid-column: 1;
    position: sticky;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }
  #scheduleListModeView .task-col-right { grid-column: 2; }

  /* 進捗管理のPC版：右ペインは廃止し、各行の右側にガントを表示する（2026-09-20）。
     縦横のスクロールは.progress-col-left自身ではなく、mainひとつにまとめている
     （2026-09-23、ユーザー指摘。以前はmain（縦）と.progress-col-left（縦横）の
     二重スクロールになっていて、ガントの表示エリアが狭くなっていた。詳しくは
     下のmain:has(#projectProgressGroups.gantt-on)参照）。 */
  .schedule-cal-cell .cal-day-num { font-size: 16px; }
  .schedule-cal-cell .cal-deadline-mark { font-size: 13px; }
  .schedule-cal-cell .cal-attendance-icon { font-size: 15px; }
  .schedule-cal-cell .cal-icon { width: 13px; height: 13px; margin: 0 1.5px; vertical-align: -1.5px; }
  .schedule-cal-cell .cal-count-line,
  .schedule-cal-cell .cal-total-hours,
  .schedule-cal-cell .cal-load-line {
    font-size: 13px;
  }
  .schedule-cal-weekday-row {
    font-size: 13px;
  }
  .schedule-cal-month-label {
    font-size: 18px;
  }

}

/* 進捗管理のガント表示中（PC幅・アプリ横画面のどちらでも#projectProgressGroupsに
   gantt-onが付く）は、mainだけが縦横スクロールを担う単一のスクロールコンテナになる
   （2026-09-23）。以前は.progress-col-left（position:sticky+max-height+overflow-y/x）
   がmainの中でさらに独自にスクロールする入れ子構造で、ガントの実表示エリアが
   max-height分（100px）狭くなっていた。:has()でガント表示中だけに絞り込み、他のタブ・
   他の予定タブの画面には影響しない。 */
main:has(#projectProgressGroups.gantt-on) {
  overflow-x: auto;
  /* 「すべて展開する」等で内容の高さが大きく変わると、ブラウザのスクロールアンカリング
     機能がscrollLeftまで勝手にずらしてしまい、固定表示のはずの左ペインが千切れた
     位置に見える不具合があった（2026-09-23）。スクロール位置の維持は
     schedule.js側で明示的に行っているため、ブラウザ側の自動調整は切る。 */
  overflow-anchor: none;
  /* PC・タッチパネルでの横スクロール中、端まで達した後のオーバースクロールが
     ブラウザの「戻る／進む」ジェスチャーとして解釈されてしまう干渉があった
     （2026-09-24、ユーザー指摘）。containにすると、この要素の外側へスクロールが
     波及しなくなり、ブラウザ側のジェスチャーに解釈されなくなる。 */
  overscroll-behavior-x: contain;
}
/* 横スクロールバーだけ、ダイアログや進捗管理の一覧と同じ細い角丸のものにする。
   mainの縦スクロールバーは標準のまま維持する（2026-09-21の反省を踏まえ、
   ::-webkit-scrollbar:horizontalで水平方向だけに絞る。Androidアプリ（WebView）の
   常時表示バグは縦スクロールバーの見た目を変えた時に起きたため、横だけなら影響しない）。 */
main:has(#projectProgressGroups.gantt-on)::-webkit-scrollbar:horizontal { height: 10px; }
main:has(#projectProgressGroups.gantt-on)::-webkit-scrollbar-track:horizontal { background: transparent; margin: 0 4px; }
main:has(#projectProgressGroups.gantt-on)::-webkit-scrollbar-thumb:horizontal {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
main:has(#projectProgressGroups.gantt-on)::-webkit-scrollbar-thumb:horizontal:hover { background: var(--ink-faint); }

/* ============================================================
   進捗管理のガントチャート（バックログ#19、2026-09-20、PC版のみ）
   #projectProgressGroups.gantt-on の時だけ有効（JSがPC幅の時にだけ付ける）。
   各行の左（.gantt-row-main、固定幅）と右（.gantt-cell、残り全部）を横に並べ、
   全行で左右の境界が揃うようにカードの余白を行側に寄せている。
   位置は表示期間（70日）に対する％指定。
   ============================================================ */
#projectProgressGroups.gantt-on { --gantt-left: 440px; }
#projectProgressGroups.gantt-on .date-group-header.is-project-header {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
#projectProgressGroups.gantt-on .gantt-row-main {
  flex: 0 0 var(--gantt-left);
  width: var(--gantt-left);
  padding: 7px 12px;
  min-width: 0;
}
/* プロジェクト見出し行のシンプル表示も、ガント表示中はここが実際の縦paddingを
   決めている（2026-09-24、タスク行側と同じ理由）。 */
#projectProgressGroups.gantt-on .gantt-row-main:has(.date-group-header-row1.is-simple) {
  padding-top: 2px;
  padding-bottom: 2px;
}
#projectProgressGroups.gantt-on .date-group-header-row1,
#projectProgressGroups.gantt-on .date-group-header-row2 { display: flex; }
#projectProgressGroups.gantt-on .date-group-header-row2 { margin-top: 6px; }
#projectProgressGroups.gantt-on .date-group-body { padding: 0; }
#projectProgressGroups.gantt-on .date-group-body > :not(.task-progress-row):not(.task-progress-drilldown) { margin-left: 12px; margin-right: 12px; }
#projectProgressGroups.gantt-on { --tree-line: rgba(63, 110, 93, 0.4); }
#projectProgressGroups.gantt-on .task-progress-row {
  display: flex;
  align-items: stretch;
  padding: 0;
  margin-left: 0;
  border-left: 0;
  background: none;
}
/* 区切り線は、左（一覧側）は縦線から離して引き、右（ガント側）はセルの下線として
   全幅で引く（2026-09-21）。 */
#projectProgressGroups.gantt-on .task-progress-row .gantt-row-main {
  background: linear-gradient(var(--line), var(--line)) 34px 100% / calc(100% - 46px) 1px no-repeat;
}
#projectProgressGroups.gantt-on .task-progress-row .gantt-cell { border-bottom: 1px solid var(--line); }
#projectProgressGroups.gantt-on .task-progress-row:last-child .gantt-row-main { background: none; }
#projectProgressGroups.gantt-on .task-progress-row:last-child .gantt-cell { border-bottom: 0; }
/* プロジェクト→タスクのインデント（左20pxの縦線＋タスク内容を右へ）。行が連続して
   縦線がつながる。 */
#projectProgressGroups.gantt-on .task-progress-row .gantt-row-main { padding: 7px 12px 7px 34px; position: relative; }
/* シンプル表示はガント表示中もぎりぎりまで詰める（2026-09-24）。ガント表示中は
   タスク行自身のpaddingが0にリセットされ、この.gantt-row-mainの縦paddingが
   実際の行の高さを決めているため、上の非ガント側（.task-progress-row.is-simple）
   とは別にここも合わせて縮める必要がある。 */
#projectProgressGroups.gantt-on .task-progress-row .gantt-row-main:has(.task-progress-row-top.is-simple) {
  padding-top: 2px;
  padding-bottom: 2px;
}
#projectProgressGroups.gantt-on .task-progress-row .gantt-row-main::before,
#projectProgressGroups.gantt-on .gantt-drill-left::before,
#projectProgressGroups.gantt-on .gantt-drill-left::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tree-line);
}
#projectProgressGroups.gantt-on .task-progress-row .gantt-row-main::before { left: 20px; }
.gantt-cell {
  position: relative;
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--line);
  /* 列全体の背景帯（.gantt-today-band等）にz-index:-1を使っているため、このセル自身を
     独立したスタッキングコンテキストにして、他の行のセルへ影響が漏れないようにする
     （2026-09-24追加）。 */
  isolation: isolate;
}
/* 縦の区切り線（週の境目・展開した週の日の境目）。位置は日ごとの重みで決まるためJSで描く。 */
.gantt-vline { top: 0; bottom: 0; width: 1px; background: var(--line); }
.gantt-vline.is-day { background: rgba(225, 227, 218, 0.7); }
.gantt-cell i { position: absolute; display: block; }
/* 列全体を塗る背景（本日・勤務日ではない日）。z-index:-1で他の内容（バー・点・
   軸見出しの文字等）の常に下に来るようにする（DOM順に関わらず。2026-09-24追加）。
   以前は本日を中央の縦線（.gantt-today）で示していたが、他の表示と紛らわしいとの
   指摘を受けて列全体の薄い背景に変更した。 */
.gantt-today-band,
.gantt-nonworkday-band { top: 0; bottom: 0; z-index: -1; }
/* 本日の列は、休日のグレー列と見分けやすいよう、濃いめの背景＋両端の縦線で強調する
   （2026-09-25、ユーザー指摘。opacity 0.55のpine-softだけだと休日のグレーと色味が
   近く、パッと見で判別しづらかった）。休日と重なった場合も、この境界線があるため
   グレーに埋もれず判別できる。 */
.gantt-today-band {
  background: var(--pine-soft);
  opacity: 0.9;
  box-sizing: border-box;
  border-left: 2px solid var(--pine);
  border-right: 2px solid var(--pine);
}
.gantt-nonworkday-band { background: var(--ink-faint); opacity: 0.16; }
.gantt-bar {
  top: 50%;
  height: 8px;
  margin-top: -4px;
  min-width: 6px;
  border-radius: 6px;
  /* 未着手は白抜き＋濃いグレーの枠。枠は内側（inset）に描いて、バーの太さは変えない
     （2026-09-21、ユーザー指定）。 */
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #6E756D;
}
.gantt-bar.is-in-progress { box-shadow: none; background: var(--pine); }
.gantt-bar.is-done { box-shadow: none; background: var(--pine); opacity: 0.4; }
.gantt-bar.is-due-soon { box-shadow: none; background: var(--amber); }
/* 期日超過のバーを赤塗りにするクラスは廃止（バックログ#33-9、2026-09-30）。
   状態色のままにし、遅れは「期限切れあり」バッジだけで示す。 */
/* プロジェクトのバーはタスクのバーの倍の太さにする（2026-09-20） */
.gantt-bar.is-project { height: 16px; margin-top: -8px; border-radius: 8px; }
.gantt-bar.clip-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gantt-bar.clip-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gantt-dot {
  top: 50%;
  /* 隣り合う日の●が重ならないよう、1日分の幅（セル幅÷表示日数）を直径にする。
     幅が広い画面でも大きくなりすぎないよう上限、狭い画面でも消えないよう下限を設ける。 */
  width: clamp(6px, calc(100% / 70), 16px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--pine-deep);
  box-sizing: border-box;
}
.gantt-dot.done { background: var(--pine-deep); }
/* 期日・締切の◆／◇。プロジェクトの太いバーの上でも目立つよう大きくする
   （2026-09-20）。プロジェクト締切は濃い赤の塗りつぶし◆、タスク期日は白抜き・赤枠の
   ◇にして見分ける（2026-09-23、ユーザー指摘でタスク側を白抜きに変更。それまでは
   タスクも塗りつぶしの◆で、カレンダー・締切カード側の「◆=プロジェクト/◇=タスク」の
   使い分けと揃っていなかった）。●（実施日）と同じ日に重なる場合は、●が上・
   ◆／◇がその裏でわずかにはみ出す見え方にする（z-indexで●を上に）。 */
.gantt-due {
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: #fff;
  border: 2px solid var(--brick);
  box-sizing: border-box;
  transform: rotate(45deg);
  z-index: 1;
}
.gantt-due.is-project {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: #7A2419;
  border: 2px solid #fff;
}
.gantt-dot { z-index: 2; }
/* プロジェクトの締切日から下へ伸びる赤い点線（2026-09-24、ユーザー指摘で2px→3pxに太くした） */
.gantt-pdue-line {
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px dotted var(--brick);
  margin-left: -1.5px;
}
.gantt-pdue-line.is-head { top: 50%; }
.date-group:not(.is-expanded) .gantt-pdue-line.is-head { display: none; }
/* .progress-toolbar：固定表示（ガント表示中のみ）。「◀今日▶期間＋週/日切替」と日付の軸だけを
   持つ（2026-09-22、表示エリアが狭いスマホ横画面でも固定される範囲を最小限にするため、
   他の操作は.progress-toolbar-controlsへ分離した）。 */
.progress-toolbar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 10px;
}
/* mainのpadding-top（8px）の分だけ、position:sticky;top:0がその内側（パディングの
   外）でしか張り付かず、ビューポート最上端との間に隙間（y:0〜8px）ができてしまい、
   そこにスクロール中の後続の行（プロジェクト見出し等）が一瞬突き出て見える不具合が
   あった（2026-09-23、ユーザー指摘）。topを-8pxにして、その隙間ぶんも含めて
   張り付くようにする。 */
.progress-toolbar.has-gantt {
  position: sticky;
  top: -8px;
  z-index: 5;
}
.progress-toolbar-left { flex: 0 0 440px; width: 440px; min-width: 0; padding: 8px 12px; display: flex; align-items: center; }
.progress-toolbar-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.progress-toolbar-left button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.progress-toolbar-left button:active { background: var(--pine-soft); }
/* 無限スクロールが上限に達した時だけ現れる「前の期間/次の期間を読み込む」ボタン
   （2026-09-25追加）。440px幅の左ペインに収める必要があるため、通常の◀▶より
   文字が長い分、余白とフォントサイズを詰めている。押せることが分かるよう
   pine系で少し強調する。 */
.progress-toolbar-left button.gantt-load-more-btn {
  padding: 4px 7px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--pine-deep);
  border-color: var(--pine);
  background: var(--pine-soft);
}
.progress-toolbar-left button.gantt-load-more-btn:active { background: var(--pine); color: #fff; }
.gantt-axis-range { margin-left: 6px; font-size: 11.5px; color: var(--ink-muted); }
.gantt-axis-cell { align-self: stretch; min-height: 30px; background-color: transparent; }
/* 週単位モードの週ラベル（クリック不可、俯瞰用の目印）。 */
.gantt-axis-week {
  position: absolute;
  top: 8px;
  font-size: 10.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
}
/* 2026-09-24：勤怠アイコン・日付・工数・負荷の縦4段表示に合わせた最小限の高さ
   （4行ぶんの実測値＋上下パディングをぎりぎりまで詰めた値）。 */
.gantt-axis-cell.has-days { min-height: 50px; }
/* .progress-toolbar-controls：固定しない操作行（完了したプロジェクトも含める／
   すべて展開・たたむ／シンプル・詳細表示切替／全画面切替、2026-09-22追加）。 */
.progress-toolbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.progress-toolbar-controls .include-completed-check { padding: 0; flex: 1 1 auto; min-width: 0; }
.gantt-axis-day {
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 9px;
  line-height: 1.15;
  color: var(--ink-muted);
  overflow: hidden;
}
/* カラム幅を狭めるのに合わせ、勤怠アイコン・日付・工数・負荷を縦4段に積む表示にした
   （2026-09-24、ユーザー指摘。以前は日付+アイコンを1行、工数+負荷を1行にまとめていた）。 */
.gantt-axis-day-date { font-weight: 800; color: var(--ink); white-space: nowrap; }
.gantt-axis-day.is-weekend .gantt-axis-day-date { color: var(--pm); }
.gantt-axis-day.is-today .gantt-axis-day-date { color: var(--pine-deep); text-decoration: underline; }
/* 勤務日ではない日（休日・欠勤等）は列の背景が.gantt-nonworkday-bandでグレーになるのに
   合わせ、日付の文字色もやや控えめにする（is-weekendより後段に置いて優先させる、
   2026-09-24追加）。 */
.gantt-axis-day.is-non-workday .gantt-axis-day-date { color: var(--ink-faint); }
/* min-heightは、勤怠アイコン（1.2em=13.2px相当）が無い「未設定」表示の日でも
   他の日と行の高さ・縦位置がずれないようにするため（2026-09-25追加）。 */
.gantt-axis-day-att { font-size: 11px; line-height: 1; min-height: 13px; display: flex; align-items: center; justify-content: center; }
.gantt-axis-day-att-unset { font-size: 7.5px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.gantt-axis-day-hours,
.gantt-axis-day-load { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* is-warn/is-alertはキャパ判定（心理的負荷＝ptの合計）に基づく配色なので、
   pt側（.gantt-axis-day-load）だけに効かせる。h側（.gantt-axis-day-hours）は
   ptの多寡と無関係なため常に通常色のまま（2026-09-23、ユーザー指摘）。 */
.gantt-axis-day.is-warn .gantt-axis-day-load { color: var(--amber); }
.gantt-axis-day.is-alert .gantt-axis-day-load { color: var(--brick); }

/* ---- 2026-09-20 ガントの見た目の調整 ---- */
/* プロジェクト同士は間隔0で、1枚のカードの中にプロジェクトが並んでいるように見せる。
   プロジェクトを区切る横線は、タスクの区切り線（--line）より濃い色にする
   （2026-09-21、ユーザー指定）。区切りは、下のプロジェクトの上の線として引く。
   2026-09-23：この横線を.date-group自体（横スクロールで実レイアウト位置が動く、
   固定表示ではない全幅要素）ではなく、.gantt-row-main／.gantt-cellそれぞれに分けて
   引くよう変更した（タスク行の区切り線で既にやっている方式と同じ）。.date-group
   自体に引くと、横スクロール時に左の固定列（.gantt-row-main、sticky）の位置と
   横線の実際の描画位置がずれてしまい、固定列の左端が線からはみ出て見えていた。 */
#projectProgressGroups.gantt-on .date-group {
  margin: 0;
  border-radius: 0;
  border-bottom: 0;
}
#projectProgressGroups.gantt-on .date-group-header.is-project-header > .gantt-row-main,
#projectProgressGroups.gantt-on .date-group-header.is-project-header > .gantt-cell {
  border-top: 1px solid var(--ink-faint);
}
/* 最後のプロジェクトの下（カードの下端）は通常の薄い線。最後のプロジェクトは、直後に
   「+ プロジェクトを追加」ボタンが続くため:last-childでは判定できない。こちらも
   同じ理由で.gantt-row-main／.gantt-cellへ分けて引く。 */
#projectProgressGroups.gantt-on .date-group:has(+ .progress-add-project-btn) {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#projectProgressGroups.gantt-on .progress-toolbar-controls + .date-group:has(+ .progress-add-project-btn) {
  border-radius: var(--radius-lg);
}
#projectProgressGroups.gantt-on .date-group:has(+ .progress-add-project-btn) .task-progress-row:last-child .gantt-row-main,
#projectProgressGroups.gantt-on .date-group:has(+ .progress-add-project-btn):not(.is-expanded) .date-group-header.is-project-header > .gantt-row-main {
  border-bottom: 1px solid var(--line);
}
#projectProgressGroups.gantt-on .date-group:has(+ .progress-add-project-btn) .task-progress-row:last-child .gantt-cell,
#projectProgressGroups.gantt-on .date-group:has(+ .progress-add-project-btn):not(.is-expanded) .date-group-header.is-project-header > .gantt-cell {
  border-bottom: 1px solid var(--line);
}
#projectProgressGroups.gantt-on .progress-toolbar-controls + .date-group {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* 先頭のプロジェクトだけは、上のプロジェクト区切りより薄い色（--line）にする
   （カードの縁と同じ扱い）。こちらも.gantt-row-main／.gantt-cellへ分けて引く。 */
#projectProgressGroups.gantt-on .progress-toolbar-controls + .date-group .date-group-header.is-project-header > .gantt-row-main,
#projectProgressGroups.gantt-on .progress-toolbar-controls + .date-group .date-group-header.is-project-header > .gantt-cell {
  border-top: 1px solid var(--line);
}
#projectProgressGroups.gantt-on .task-progress-drilldown {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-left: 0;
}
#projectProgressGroups.gantt-on .task-progress-drilldown .gantt-cell { border-bottom: 1px solid var(--line); }
#projectProgressGroups.gantt-on .task-progress-drilldown:last-child .gantt-cell { border-bottom: 0; }
/* タスク→スケジュール・Todoのインデント：プロジェクトの縦線（左20px、上から続く）と、
   タスクの縦線（左40px）の2本を引き、内容はさらに右（54px）から始める。 */
#projectProgressGroups.gantt-on .gantt-drill-left {
  position: relative;
  flex: 0 0 var(--gantt-left);
  width: var(--gantt-left);
  padding: 6px 12px 6px 54px;
  min-width: 0;
  background: linear-gradient(var(--line), var(--line)) 54px 100% / calc(100% - 66px) 1px no-repeat;
}
#projectProgressGroups.gantt-on .task-progress-drilldown:last-child .gantt-drill-left { background: none; }
#projectProgressGroups.gantt-on .gantt-drill-left::before { left: 20px; }
#projectProgressGroups.gantt-on .progress-drilldown-form-anchor { height: 0; }
#projectProgressGroups.gantt-on .gantt-drill-left::after { left: 40px; }
#projectProgressGroups.gantt-on .task-progress-drilldown .gantt-cell { background-color: transparent; }
.progress-toolbar-expand-actions { display: flex; gap: 4px; }
.progress-add-project-btn { margin-top: 10px; }
@media (max-width: 1023px) { .progress-add-project-btn { margin-left: auto; margin-right: auto; } }
/* ガント表示中（PC幅のブラウザ版のみ）、ボタンの.inline-new-master-btn共通の
   width:100%が#projectProgressGroups全体（日付軸の分まで含めた幅）に伸びてしまい、
   期間の右端まで届くほど間延びして見えていた（2026-09-23、ユーザー指摘）。
   左の固定列（プロジェクト名等が並ぶ列）と同じ幅に収める。html.is-webに限定し、
   Androidアプリ版（横画面でも同じgantt-onになる）の見た目は変えない
   （ユーザー指定）。 */
html.is-web #projectProgressGroups.gantt-on .progress-add-project-btn {
  width: var(--gantt-left);
}
/* 横スクロールしても左に固定表示する（2026-09-23、ユーザー指摘）。他の左固定列
   （.gantt-row-main・.gantt-drill-left・.progress-toolbar-left/controls）と同じ
   position:sticky;left:0のパターン。このボタンは既に上でwidth:var(--gantt-left)に
   固定済みなので、.progress-toolbar-controlsで踏んだ「実レイアウト幅が親の巨大な幅の
   ままで、クリック時にブラウザがそこまで横スクロールさせてしまう」不具合は
   width固定の時点で回避できている（fit-content指定は不要）。アプリ版はボタン幅を
   固定していない（前の指摘で意図的にhtml.is-web限定にした）ため、そちらにこの
   stickyだけ付けても実質意味が無く、むしろ同じ不具合を再現しかねないので、
   ここもhtml.is-web限定のままにする。背景は.inline-new-master-btn自体が
   pine-soft（不透明）を持っているため、他の左固定列のような
   background-color強制は不要。 */
html.is-web #projectProgressGroups.gantt-on.has-expanded .progress-add-project-btn {
  position: sticky;
  left: 0;
  z-index: 3;
}
.progress-toolbar-left .gantt-icon-btn,
.progress-toolbar-controls .gantt-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.progress-toolbar-controls .gantt-icon-btn:active,
.progress-toolbar-left .gantt-icon-btn:active { background: var(--pine-soft); }
/* シンプル/詳細表示の切替ボタンは、常に右端寄せにする（2026-09-22）。 */
#progressSimpleToggle { margin-left: auto; }

.task-progress-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* スケジュール・Todoの行同士の区切り（粗い点線、色はタスクの区切り線と同じ--line）。
   位置は行の高さの実測でJS側が置く（populateProgressDrilldownList）。日付見出しの
   上の実線は、この点線に置き換えるため消す。 */
.gantt-row-sep,
.gantt-row-sep-left {
  position: absolute;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line) 0 4px, transparent 4px 9px);
}
.gantt-cell .gantt-row-sep { left: 0; right: 0; }
.gantt-row-sep-left { left: 54px; right: 12px; }
#projectProgressGroups.gantt-on .task-progress-drilldown-date-header { border-top: 0; }

/* 期日を過ぎて未完了のタスク行を赤系の背景にするのはやめた（バックログ#33-9、2026-09-30。
   赤の使いすぎ対策）。遅れは`.task-progress-due-badge.is-overdue`（小さいバッジ）と
   「期限切れあり」ピルだけで示す。 */

/* ---- 日付単位モードの間（2026-09-21、2026-09-23に週クリック展開から単位切替へ変更）：
   main全体が横にもスクロールする（上のmain:has(...)参照）。内容の幅は左の固定列＋
   ガント（JSが--gantt-wに設定）。左の固定列は横スクロールしても見えるようstickyで
   貼り付け、下のセルが透けないよう背景を塗る。 ---- */
#projectProgressGroups.gantt-on.has-expanded { min-width: calc(var(--gantt-left) + var(--gantt-w)); }
/* #scheduleModeTabs（進捗管理より前の兄弟要素）をposition:sticky;left:0で固定表示に
   するための土台。sticky要素は自身のcontaining block（＝親の#view-schedule）の
   実レイアウト幅の範囲内でしか貼り付けない。#projectProgressGroupsの子孫側だけ
   min-widthを広げても、overflow:visibleな祖先（#view-schedule等）の実レイアウト幅は
   自動的には広がらないため、#view-scheduleにも同じ幅を明示的に与える必要がある
   （2026-09-23）。--gantt-wはJS側で#view-scheduleに設定し、子孫の
   #projectProgressGroupsへは通常のCSS変数の継承で伝わる。 */
#view-schedule {
  /* --gantt-leftは#projectProgressGroups.gantt-onにも定義があるが（値は440pxで同一）、
     子孫方向にしか継承しないCSS変数の性質上、祖先の#view-schedule側でも別途
     定義しておく必要がある。 */
  --gantt-left: 440px;
}
#view-schedule:has(#projectProgressGroups.gantt-on.has-expanded) {
  min-width: calc(var(--gantt-left) + var(--gantt-w));
}
#projectProgressGroups.gantt-on.has-expanded .gantt-row-main,
#projectProgressGroups.gantt-on.has-expanded .gantt-drill-left,
#projectProgressGroups.gantt-on.has-expanded .progress-toolbar-left,
#projectProgressGroups.gantt-on.has-expanded .progress-toolbar-controls {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: var(--surface) !important;
}
/* .gantt-row-main等は元々width:440pxの固定幅だが、.progress-toolbar-controlsは幅指定が
   無いブロック要素のため、親（#projectProgressGroups、dayモードでは2000px超）の幅を
   そのまま引き継いでしまい、「見た目はstickyで左に張り付いているのに、実際の
   レイアウト上の幅は数千pxある」という状態になっていた。この状態で中のボタンを
   クリックすると、ブラウザがフォーカスした要素をスクロール領域内に収めようとして、
   そのレイアウト上の（sticky適用前の）位置までmainを横スクロールさせてしまい、
   左ペインが千切れて見える不具合の原因になっていた（2026-09-23）。中身のボタン列が
   ちょうど収まる幅まで縮めて、この食い違いを無くす。 */
#projectProgressGroups.gantt-on.has-expanded .progress-toolbar-controls {
  width: fit-content;
}
/* 「カレンダー表示」等のモード切替タブは#projectProgressGroupsより前の兄弟要素で、
   ガントとは幅の基準が異なる（mainの元の幅のまま）ため、横スクロールすると
   ちぎれた断片が変な位置に見えてしまっていた（2026-09-23、ユーザー指摘）。
   #projectProgressGroupsの状態は:has()で親（#view-schedule）経由で参照する。
   幅は--main-w（JSがmainの本来の幅を設定）に固定し、#view-schedule自体の
   min-widthを引き継いで広がってしまわないようにする（.progress-toolbar-controlsで
   踏んだのと同じ理由）。タブは中身が均等幅で埋まるデザインのため、
   .progress-toolbar-controlsのfit-contentとは違い、本来の幅で固定する。 */
#view-schedule:has(#projectProgressGroups.gantt-on.has-expanded) #scheduleModeTabs {
  position: sticky;
  left: 0;
  z-index: 4;
  width: var(--main-w);
}
/* .date-groupのoverflow:hiddenがあると、その中のstickyが効かない（切り抜きの基準が
   スクロール領域になってしまう）。overflow:clipなら角丸の切り抜きはそのままで、
   スクロール領域にはならない。 */
#projectProgressGroups.gantt-on.has-expanded .date-group,
#projectProgressGroups.gantt-on.has-expanded .date-group-body { overflow: clip; }

/* 日付単位モードでは、スケジュール・Todo行のセルをクリックして実施日をクイック変更できる */
#projectProgressGroups.gantt-on.has-expanded .task-progress-drilldown .gantt-cell { cursor: pointer; }
.gantt-quick-menu {
  position: fixed;
  z-index: 45;
  width: 320px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(38, 43, 40, 0.22);
}
.gantt-quick-menu-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; overflow-wrap: anywhere; }
.gantt-quick-menu-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); margin-bottom: 10px; }
.gantt-quick-menu-label input { display: block; width: 100%; margin-top: 4px; }
.gantt-quick-menu-actions { display: flex; gap: 8px; justify-content: flex-end; }
.gantt-quick-menu-actions button { border: 0; border-radius: var(--radius-md); padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--surface-sunk); color: var(--ink-muted); }
.gantt-quick-menu-actions .gantt-quick-save { background: var(--pine); color: #fff; }
/* クイック変更メニューで選択中のセル（行×日）。ドット・バーより下に敷く。 */
.gantt-cell .gantt-cell-sel { background: var(--pine-soft); z-index: 0; pointer-events: none; }

/* 進捗管理の全画面表示（2026-09-22追加、ガント表示中のみ）。タブバー・カレンダー表示
   などのモード切替タブを隠し、余白を最小限にする。表示エリアが狭いスマホ横画面で、
   シンプル表示と組み合わせてより多くの行を見渡せるようにするのが狙い。 */
html.progress-fullscreen nav.tabbar { display: none; }
html.progress-fullscreen #scheduleModeTabs { display: none; }
html.progress-fullscreen main { padding-top: 4px; padding-left: 4px; padding-right: 4px; }
html.progress-fullscreen header.app-header { display: none; }

/* ===== 確度のグラデーション（G1、2026-09-26、Gemini設計） =====
   今日から14日先までは濃い実線、それより先は半透明・点線の「仮置き」。 */
.gantt-bar.is-tentative {
  opacity: 0.5;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.75) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px currentColor;
  outline: 1px dashed #6E756D;
  outline-offset: -1px;
}
.gantt-dot.is-tentative { opacity: 0.5; border-style: dashed; }
.task-tentative-label {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-faint);
}
.gantt-nagi-hint {
  margin: 0 0 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--pine-deep);
  background: var(--pine-soft);
  border-radius: var(--radius-md);
}


/* ===== てりーさんとガントを整える（ガント伴走G3、2026-09-26） ===== */
.gantt-assist-btn {
  position: fixed;
  right: 18px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 24;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--pine);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(38,43,40,0.28);
  cursor: pointer;
}
/* PC版は右下FABをやめ、ツールバー内の通常ボタン（.gantt-assist-btn-inline）に
   置き換える（バックログ#33-13、2026-09-30。進捗管理を最下部までスクロールすると
   「+ プロジェクトを追加」に重なっていたため）。 */
@media (min-width: 1024px) { .gantt-assist-btn { display: none; } }
.gantt-assist-btn-inline {
  border: none; border-radius: var(--radius-sm); padding: 7px 14px;
  background: var(--pine); color: #fff; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.gantt-assist-btn-inline:active { opacity: 0.85; }
@media (max-width: 1023.98px) { .gantt-assist-btn-inline { display: none; } }
.gantt-assist-sheet { max-height: 88vh; }
.gantt-assist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gantt-assist-nagi {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--pine-soft);
  border-radius: 14px 14px 14px 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pine-deep);
}
.gantt-assist-chip {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--pine);
  background: var(--surface);
  color: var(--pine-deep);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.gantt-assist-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.gantt-assist-chips .gantt-assist-chip { text-align: center; margin: 0; padding: 14px 4px; }
.gantt-assist-custom { display: flex; gap: 8px; margin-bottom: 12px; }
.gantt-assist-custom input { flex: 1; margin: 0; }
.gantt-assist-textarea { width: 100%; resize: vertical; }
.gantt-assist-task-list { margin: 12px 0; }
.gantt-assist-task, .gantt-assist-option, .gantt-assist-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--surface-sunk);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.gantt-assist-pick { flex-direction: column; gap: 2px; }
.gantt-assist-task-body, .gantt-assist-option-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gantt-assist-task-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.gantt-assist-task-meta { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; }
.gantt-assist-note { font-size: 12px; color: var(--ink-muted); margin-bottom: 10px; }
.gantt-assist-change { font-size: 12px; color: var(--ink); line-height: 1.6; }
.gantt-assist-warning { font-size: 12px; color: var(--brick); line-height: 1.5; }
.gantt-assist-chips-wide { grid-template-columns: repeat(3, 1fr); }
.gantt-assist-chip.is-selected { background: var(--pine-soft); }
.gantt-assist-report-body { font-size: 14px; line-height: 1.7; }

/* 直近タスクのTodo分解のお知らせ（G5）。枠・面は動くオーロラ（.nagi-suggest-aurora.is-flowing、index.html。#33-52） */
.gantt-decompose-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--pine-deep);
}
.gantt-decompose-banner span { flex: 1; min-width: 0; line-height: 1.5; }
.gantt-decompose-dismiss { flex-shrink: 0; border: none; background: none; color: var(--ink-muted); font-size: 12px; font-family: inherit; cursor: pointer; text-decoration: underline; }

/* ===== PC版「今日」タブの右列の予定カード（バックログ#33-8、2026-10-09） =====
   #scheduleDayDetailCardは予定タブと共有のカード。今日タブにいる間だけ#todayScheduleCardSlotへ移されるので、
   必ず#todayScheduleCardSlotの下に限って指定する（予定タブ側の見た目は変えない）。
   右列は265px（広い時は本文の24%まで）。カードは右列の縦いっぱいに伸ばし、「＋追加」を下端に置く。 */
@media (min-width: 1024px) {
  body[data-view="today"] #todayScheduleCardSlot {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  body[data-view="today"] #todayScheduleCardSlot #scheduleDayDetailCard {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 13px 12px 11px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.94), rgba(241, 250, 250, 0.88)),
      url("../assets/today-bg-sea-sunrise.webp") center bottom / 260% auto no-repeat;
  }
  body[data-view="today"] #todayScheduleCardSlot #scheduleDayDetailContent { flex: 1 0 auto; }
  /* 見出し: 日付を1行目、時間・負荷の合計ピルを2行目に回す（265pxでは横に並ばない） */
  body[data-view="today"] #todayScheduleCardSlot .schedule-day-detail-header-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 8px;
    padding: 0;
    margin-bottom: 12px;
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-day-detail-header-row .card-title {
    flex: 1 0 100%;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
  }
  body[data-view="today"] #todayScheduleCardSlot .date-group-summary-pills { gap: 5px; }
  body[data-view="today"] #todayScheduleCardSlot .date-group-hours,
  body[data-view="today"] #todayScheduleCardSlot .date-group-load {
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    background: #EDF6F6;
  }
  body[data-view="today"] #todayScheduleCardSlot .date-group-hours { color: #365B72; }
  body[data-view="today"] #todayScheduleCardSlot .schedule-section-label {
    margin: 12px 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-section-label::before {
    content: "≋";
    margin-right: 4px;
    font-weight: 800;
    color: var(--today-teal);
  }
  /* 予定・Todoの行: 淡い青緑の地の小さなカード。右端に›（行を押すと詳細が開く目印） */
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row {
    position: relative;
    flex-wrap: wrap;
    row-gap: 4px;
    min-height: 64px;
    margin-bottom: 6px;
    padding: 9px 22px 9px 8px;
    border-radius: 10px;
    background: var(--todo-card-bg); /* rgba(235, 247, 246, 0.91)。全タブのTodoカード・セルの色の正（tokens.css） */
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row::after {
    content: "›";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #77A7BC;
    pointer-events: none;
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-body { flex: 1 1 calc(100% - 40px); }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-title { font-size: 12.5px; line-height: 1.35; }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-meta { font-size: 10.5px; color: #58748A; }
  /* 期限切れ・調整済みのピルは、タイトルの下の行に回す（予定タブの3列目と同じ考え方。#33-10） */
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-body ~ span,
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-body ~ button { margin-left: 30px; }
  /* 時刻のある予定は、時刻（と「終了」）を1行目に置き、本文を2行目に回す（265pxで本文が細くならないように） */
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row.type-schedule .schedule-item-time {
    display: flex;
    gap: 6px;
    width: auto;
    flex: 1 0 100%;
    font-size: 10.5px;
    color: #58748A;
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row.type-schedule .schedule-item-ended-label { margin-top: 0; }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row.type-schedule .schedule-item-body {
    flex-basis: 100%;
    border-left-color: var(--pine);
    padding-left: 8px;
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row.type-schedule .schedule-item-body ~ span,
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row.type-schedule .schedule-item-body ~ button { margin-left: 12px; }
  /* 「＋スケジュール・Todoを追加する」: カードの下端 */
  body[data-view="today"] #todayScheduleCardSlot #scheduleAddToggleBtn {
    height: 39px;
    padding: 0;
    border: 1px solid #B9E0E5;
    border-radius: 8px;
    background: #EAF8FA;
    color: #19718E;
    font-size: 11.5px;
    font-weight: 800;
  }
}

/* ===== 今日タブの行を押すと編集フォームが直接開く（バックログ#48-13、2026-10-13、案2） =====
   カードの見出しの下に薄い一言を出し、行の右端に「›」を付ける（PCは上の#33-8で付け済み。スマホ・タブレット幅にも付ける）。
   一言は今日タブでだけ見せる（予定タブの同じカードの行は、これまでどおり閲覧シートを開くため）。 */
.schedule-day-detail-edit-hint { display: none; }
body[data-view="today"] #todayScheduleCardSlot .schedule-day-detail-edit-hint:not([hidden]) {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (max-width: 1023.98px) {
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row {
    position: relative;
    padding-right: 26px;
  }
  body[data-view="today"] #todayScheduleCardSlot .schedule-item-row::after {
    content: "›";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #77A7BC;
    pointer-events: none;
  }
}

/* ===== 今日タブ: 表示中の日の予定・Todoが全部完了したら一覧をたたむ（バックログ#48-14、2026-10-14） =====
   JS（schedule.jsのupdateDayDetailDoneState）は全部完了の時にカードへ.is-all-done、「一覧を見る」で開いた時に.is-done-expandedを付けるだけ。
   一言を見せる・一覧を隠すのは、今日タブ（#todayScheduleCardSlot）で、編集中（#view-today.editing、#48-13）でない時だけ。
   予定タブの同じカードは今までどおり一覧を出す。色は既存のトークン（--ink・--ink-muted・--pine・--pine-soft・--pine-deep・--todo-card-bg）だけ。 */
.schedule-day-detail-done { display: none; }
body[data-view="today"] #view-today:not(.editing) #todayScheduleCardSlot #scheduleDayDetailCard.is-all-done .schedule-day-detail-done:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 2px 0 4px;
  padding: 12px 12px 4px;
  border-radius: 10px;
  background: var(--todo-card-bg);
}
body[data-view="today"] #view-today:not(.editing) #todayScheduleCardSlot #scheduleDayDetailCard.is-all-done:not(.is-done-expanded) #scheduleDayDetailContent { display: none; }
body[data-view="today"] #view-today:not(.editing) #todayScheduleCardSlot #scheduleDayDetailCard.is-all-done.is-done-expanded .schedule-day-detail-done { margin-bottom: 10px; }
.schedule-day-detail-done-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}
.schedule-day-detail-done-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pine-soft);
  color: var(--pine-deep);
  font-size: 12px;
  font-weight: 800;
}
/* 控えめな文字ボタン。見た目は小さな文字だけ、押せる範囲はスマホの44pxを確保する */
.schedule-day-detail-done-toggle {
  min-height: 44px;
  margin-left: 22px;
  padding: 0 8px;
  border: none;
  background: none;
  color: var(--pine-deep);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .schedule-day-detail-done-toggle { min-height: 34px; }
  /* PCはカードが右列の縦いっぱいに伸びるので、たたんでいる間は一言の箱の下を空けて「＋追加」を下端に残す */
  body[data-view="today"] #view-today:not(.editing) #todayScheduleCardSlot #scheduleDayDetailCard.is-all-done:not(.is-done-expanded) .schedule-day-detail-done:not([hidden]) {
    margin-bottom: auto;
  }
}

/* ===== 予定タブ3モードのデザイン刷新（バックログ#33-47、2026-10-10、案B） =====
   仕様: docs/design-refresh/schedule-spec.md（CSS値の正本）。移植元: 同フォルダの schedule-concept-a.css に
   schedule-concept-b.css を重ねたもの。基準画像: .uiux-shots/schedule-concept-b_<pc|sp|landscape>_*.png。
   すべて body[data-view="schedule"] に限定し、今日・ふりかえり・設定タブ、他タブのアイコン、元の画像は変えない。
   HTML・JS は変えていない。カード密度・DOM順・表示内容は従来のまま。
   - PC（1024px以上）: 60pxの一段ヘッダー。左に「予定」（アイコン面は ::before）、中央に3モード切替（fixed）、右に「てりーさん」
   - スマホ縦画面: 48pxのタイトル行＋本文先頭の42pxのモード切替
   - アプリ横画面（html.is-app-landscape）: 既存の左ナビ付き構成のまま。色・面だけが当たる（下の2つのメディアクエリには当たらない） */
body[data-view="schedule"] {
  --schedule-blue: #147f9f;
  --schedule-blue-deep: #145c7b;
  --schedule-aqua: #d8f1f2;
  --schedule-line: rgba(147, 193, 201, 0.46);
  --schedule-shadow: 0 7px 22px rgba(37, 91, 105, 0.08);
}

/* 背景: 緑味を抑えた青白いベール＋水彩背景（今日タブと同じ画像を再利用） */
body[data-view="schedule"] .app {
  background:
    linear-gradient(rgba(239, 248, 250, 0.1), rgba(247, 250, 249, 0.16)),
    url("../assets/today-bg-sea-sunrise.webp") center / cover no-repeat,
    #edf7f8;
}
/* .app > .app-content / .app-content > header としているのは、shared.css の PC版
   「body[data-view]:not([data-view="today"]) .app-content（ベール.86）／header.app-header（透明）」と詳細度をそろえ、
   後から読み込むこちらを効かせるため（素の body[data-view="schedule"] .app-content だと負ける） */
body[data-view="schedule"] .app > .app-content,
body[data-view="schedule"] .main-scroll-wrapper {
  background: rgba(245, 249, 250, 0.64);
}
body[data-view="schedule"] .app-content > header.app-header {
  background: rgba(249, 252, 252, 0.76);
  border-bottom: 1px solid rgba(184, 213, 218, 0.58);
  box-shadow: 0 3px 16px rgba(31, 87, 101, 0.045);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 見出し: 30pxの淡いカレンダーアイコン面（メニューと同じ画像）＋19px/800の「予定」。案Cの背景面・左線・下線は付けない */
body[data-view="schedule"] .app-header-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--schedule-blue-deep);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
}
body[data-view="schedule"] .app-header-title::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(110, 180, 194, 0.38);
  border-radius: 10px;
  background:
    rgba(218, 242, 245, 0.82)
    url("../assets/icons/menu/menu_icon_schedule.png") center / 20px 20px no-repeat;
  box-shadow: 0 3px 10px rgba(28, 96, 112, 0.08);
  filter: saturate(0.72) hue-rotate(-8deg);
}

/* 3モード切替 */
body[data-view="schedule"] #scheduleModeTabs {
  border: 1px solid rgba(159, 198, 204, 0.36);
  border-radius: 14px;
  background: var(--pine-soft); /* 2026-10-11（#33-49追補3）: 旧 rgba(224, 234, 229, 0.72) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 3px;
  gap: 3px;
}
body[data-view="schedule"] #scheduleModeTabs > .add-mode-tab {
  min-height: 32px;
  border-radius: 10px;
  color: #536c73;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body[data-view="schedule"] #scheduleModeTabs > .add-mode-tab.active {
  color: #0b6886;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 10px rgba(31, 91, 105, 0.1);
}

/* 共通カード。内容量の多い画面なので、今日タブより影を弱くして境界を明瞭にする */
body[data-view="schedule"] #scheduleCalendarModeView .card,
body[data-view="schedule"] #scheduleListModeView .card,
body[data-view="schedule"] #scheduleListModeView .date-group,
body[data-view="schedule"] .progress-toolbar,
body[data-view="schedule"] .progress-toolbar-controls,
body[data-view="schedule"] #projectProgressGroups:not(.gantt-on) .date-group {
  border-color: var(--schedule-line);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--schedule-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body[data-view="schedule"] #scheduleCalendarModeView .card,
body[data-view="schedule"] #scheduleListModeView .card,
body[data-view="schedule"] #scheduleListModeView .date-group {
  border-radius: 15px;
}
body[data-view="schedule"] .inline-new-master-btn {
  border-color: rgba(86, 167, 179, 0.64);
  background: rgba(226, 246, 246, 0.82);
  color: #17677c;
  font-weight: 800;
}
body[data-view="schedule"] .date-group-hours,
body[data-view="schedule"] .date-group-load {
  border: 1px solid rgba(167, 202, 201, 0.32);
  background: var(--surface-sunk); /* 2026-10-11（#33-49追補3）: 旧 rgba(232, 242, 239, 0.9)。今日タブの同じピルは#EDF6F6 */
}

/* 本文のアイコン: 予定タブ本文の中だけ、水彩アイコンの鮮やかさを周囲の淡いカードになじませる（元画像・他タブは変えない） */
body[data-view="schedule"] main img.name-icon,
body[data-view="schedule"] main img.attendance-icon-img,
body[data-view="schedule"] main img.cal-icon,
body[data-view="schedule"] main .cal-attendance-icon img {
  opacity: 0.9;
  filter: saturate(0.72) hue-rotate(-8deg) brightness(0.98);
}

/* カレンダー: 罫線ではなく、淡い面と余白で月全体を読みやすくする */
body[data-view="schedule"] .schedule-cal-nav-btn {
  background: var(--pine-soft); /* 2026-10-11（#33-49追補3）: 旧 rgba(225, 238, 234, 0.8) */
  color: var(--schedule-blue-deep);
}
body[data-view="schedule"] .schedule-cal-cell {
  border: 1px solid rgba(174, 203, 202, 0.2);
  border-radius: 7px;
  background: var(--todo-card-bg); /* 2026-10-11: 古い薄緑 rgba(236, 242, 237, 0.9) から今日タブのTodoカードの色へ */
}
body[data-view="schedule"] .schedule-cal-cell.is-past {
  /* 2026-10-11（#33-49追補3）: 旧 rgba(247, 248, 245, 0.82)（黄み白）。今日タブの記録行と同じ淡い青白（通常のセル--todo-card-bgより白く、
     ベースの opacity:0.6 と合わせて過去日と分かる） */
  background: rgba(244, 248, 247, 0.82);
}
body[data-view="schedule"] .schedule-cal-cell.is-today {
  outline: 2px solid rgba(34, 151, 169, 0.72);
  outline-offset: -2px;
}
body[data-view="schedule"] .schedule-cal-cell.is-selected {
  border-color: transparent;
  background: linear-gradient(145deg, #247d86, #1b6179);
  box-shadow: 0 5px 12px rgba(30, 101, 117, 0.2);
}
/* 選択日のアイコンは不透明な白い四角を外す。白い光彩だけで濃いセルとの境界を保つ */
body[data-view="schedule"] .schedule-cal-cell.is-selected .cal-attendance-icon img,
body[data-view="schedule"] .schedule-cal-cell.is-selected .cal-icon {
  background: transparent;
  box-shadow: none;
  opacity: 1;
  filter:
    saturate(0.78)
    brightness(1.16)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.82));
}
body[data-view="schedule"] .schedule-item-row.type-todo,
body[data-view="schedule"] .schedule-backlog-row {
  border: 1px solid rgba(168, 201, 199, 0.28);
  border-radius: 10px;
  background: var(--todo-card-bg); /* 2026-10-11: 古い薄緑 rgba(237, 244, 240, 0.9) から今日タブのTodoカードの色へ */
}
body[data-view="schedule"] .schedule-item-row.type-schedule {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}
body[data-view="schedule"] .schedule-item-row.type-schedule .schedule-item-body {
  border-left-color: #40a8b4;
}
body[data-view="schedule"] #scheduleDeadlineCard,
body[data-view="schedule"] .schedule-col-right > .card {
  border-top: 3px solid rgba(59, 155, 169, 0.42);
}
body[data-view="schedule"] .schedule-deadline-row {
  border-bottom-color: rgba(150, 188, 191, 0.32);
}

/* 一覧: 操作列を少し細くし、日付カードの本文幅を確保する */
body[data-view="schedule"] #scheduleListAddCardSection {
  padding: 10px;
}
body[data-view="schedule"] #taskFilterCard {
  border-top: 3px solid rgba(59, 155, 169, 0.42);
}
body[data-view="schedule"] #scheduleListModeView .date-group {
  overflow: clip;
}
body[data-view="schedule"] #scheduleListModeView .date-group-header {
  min-height: 44px;
  border-bottom-color: rgba(151, 191, 194, 0.34);
  background: linear-gradient(90deg, rgba(227, 244, 242, 0.92), rgba(255, 255, 255, 0.76) 36%);
}
body[data-view="schedule"] #scheduleListModeView .date-group-body {
  padding: 10px;
}

/* 進捗管理: 上部の情報を細い帯へまとめ、ガントの縦領域を優先する */
body[data-view="schedule"] .gantt-decompose-banner {
  min-height: 40px;
  margin-bottom: 8px;
  border-radius: 12px;
  /* 枠・面・影は動くオーロラ（shared.css）に任せる（#33-52で旧グラデ・枠線・影を削除） */
  color: #2d625f;
}
body[data-view="schedule"] .progress-toolbar {
  margin-bottom: 7px;
  border-radius: 12px;
}
body[data-view="schedule"] .progress-toolbar-controls {
  min-height: 44px;
  margin-bottom: 8px;
  border-radius: 12px;
}
body[data-view="schedule"] .gantt-nagi-hint {
  margin-bottom: 7px;
  border: 1px solid rgba(130, 186, 177, 0.26);
  border-radius: 10px;
  background: var(--pine-soft); /* 2026-10-11（#33-49追補3）: 旧 rgba(226, 242, 236, 0.86) */
  color: #396963;
}
body[data-view="schedule"] #projectProgressGroups.gantt-on .date-group-header.is-project-header > .gantt-row-main,
body[data-view="schedule"] #projectProgressGroups.gantt-on .date-group-header.is-project-header > .gantt-cell {
  border-top-color: rgba(119, 161, 165, 0.52);
}
body[data-view="schedule"] #projectProgressGroups.gantt-on .gantt-row-main,
body[data-view="schedule"] #projectProgressGroups.gantt-on .gantt-drill-left {
  background-color: rgba(255, 255, 255, 0.91);
}
body[data-view="schedule"] #projectProgressGroups.gantt-on .gantt-cell {
  background-color: rgba(255, 255, 255, 0.72);
}
body[data-view="schedule"] .gantt-bar.is-in-progress {
  background: linear-gradient(90deg, #277a72, #3b948d);
}
body[data-view="schedule"] .gantt-assist-btn-inline,
body[data-view="schedule"] .gantt-assist-btn {
  background: linear-gradient(135deg, #218d91, #23708a);
  box-shadow: 0 5px 14px rgba(28, 105, 119, 0.18);
}

/* 1366px以上: カレンダーは560px＋残り2列、一覧は左330px＋本文（1024〜1365pxは既存の2列のまま） */
@media (min-width: 1366px) {
  body[data-view="schedule"] #scheduleCalendarModeView {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }
  body[data-view="schedule"] #scheduleListModeView {
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 14px;
  }
}

/* PC: 約60pxの一段ヘッダー。モード切替は本文から浮かせ、ヘッダー中央（本文領域＝サイドバー140pxを除いた幅の中央）へ置く。
   left: 50vw - 190px = 140px + (100vw - 140px) / 2 - 520px / 2。
   進捗管理のガント表示中に付く position:sticky / width:var(--main-w)（上の #view-schedule:has(...) #scheduleModeTabs）や
   index.html のインラインの margin-bottom より確実に優先させるため、位置・幅・余白は !important にしている */
@media (min-width: 1024px) {
  body[data-view="schedule"] .app-content > header.app-header {
    height: 60px;
    padding: 0 24px;
    box-sizing: border-box;
  }
  body[data-view="schedule"] header.app-header .day-nav {
    width: 100%;
    min-height: 60px;
    align-items: center;
  }
  body[data-view="schedule"] #scheduleModeTabs {
    position: fixed !important;
    z-index: 19 !important;
    top: 10px !important;
    left: calc(50vw - 190px) !important;
    width: 520px !important;
    height: 40px;
    margin: 0 !important;
    box-sizing: border-box;
  }
  body[data-view="schedule"] main {
    padding-top: 10px;
  }
  /* stickyの基準はmainのpadding-top:10pxを除いた内側から測られるため、top:10pxだと
     初期位置・固定位置とも本文上端（中央・右列）より10px低くなっていた（#35-13）。
     margin-top:-10pxはstickyに押し戻されて効かないので、top:0にする。
     固定時もmainのpadding分の10pxがヘッダー下に残る（ヘッダー下端60px→左列70px）。 */
  body[data-view="schedule"] .schedule-col-left {
    top: 0;
  }
}

/* スマホ縦画面: 48pxのタイトル行＋直下の42pxモード切替（横一列には詰めない）。下部ナビはすりガラスにする（高さ・タップ領域は従来のまま） */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="schedule"] .app > .app-content,
  body[data-view="schedule"] .main-scroll-wrapper {
    background: rgba(245, 249, 250, 0.54);
  }
  body[data-view="schedule"] .app-content > header.app-header {
    min-height: 48px;
    padding: 9px 10px 6px;
  }
  body[data-view="schedule"] .app-header-title {
    gap: 7px;
    font-size: 17px;
  }
  body[data-view="schedule"] .app-header-title::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    background-size: 18px 18px;
  }
  body[data-view="schedule"] main {
    padding-top: 7px;
    padding-left: 4px;
    padding-right: 4px;
  }
  body[data-view="schedule"] #scheduleModeTabs {
    min-height: 42px;
    margin: 0 0 10px !important;
    border-radius: 13px;
  }
  body[data-view="schedule"] #scheduleModeTabs > .add-mode-tab {
    min-height: 34px;
    padding-inline: 5px;
    font-size: 12px;
  }
  body[data-view="schedule"] #scheduleCalendarModeView .card,
  body[data-view="schedule"] #scheduleListModeView .card,
  body[data-view="schedule"] #scheduleListModeView .date-group,
  body[data-view="schedule"] #projectProgressGroups:not(.gantt-on) .date-group {
    border-radius: 13px;
  }
  body[data-view="schedule"] .schedule-cal-cell {
    border-radius: 6px;
  }
  body[data-view="schedule"] #scheduleListModeView .date-group-header {
    min-height: 42px;
  }
  body[data-view="schedule"] .gantt-decompose-banner {
    align-items: center;
    padding: 9px 11px;
    font-size: 12px;
  }
  body[data-view="schedule"] #projectProgressGroups:not(.gantt-on) .date-group {
    border-left: 3px solid rgba(59, 155, 169, 0.42);
  }
  /* 進捗管理のバッジ行: 375・390px端末で5個並ぶと親の overflow:hidden で最後のバッジが隠れるため、
     次の行へ折り返す（412pxでは一行に収まる）。Codexレビュー指摘の修正（2026-10-10） */
  body[data-view="schedule"] #projectProgressGroups .date-group-header-row2 {
    flex-wrap: wrap;
    gap: 4px;
  }
  body[data-view="schedule"] nav.tabbar {
    background: rgba(255, 255, 255, 0.91);
    border-top-color: rgba(191, 216, 216, 0.78);
    box-shadow: 0 -4px 16px rgba(36, 91, 101, 0.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* アプリ横（#33-57追加修正）: ヘッダーを全タブ52px・中身の上端10pxにそろえる（今日はshared.css、振り返り・設定は各css）。
   下の線（1px）の分、下の余白は9px */
@media (max-width: 1023.98px) and (orientation: landscape) {
  body[data-view="schedule"] .app-content > header.app-header {
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 9px;
  }
}

/* ===== 勤務予定（勤怠）のまとめ登録（バックログ#49-1、2026-10-13。見た目の正本: docs/design-refresh/attendance-calendar-edit-spec.md）=====
   入口の副ボタン・編集中の帯・説明・勤怠のパレット・編集中のセル。編集中は#scheduleCalendarModeViewに.is-attendance-planning
   （html.attendance-planningも）が付く（schedule.jsのapplyAttendancePlanChrome()）。 */
.attendance-plan-band[hidden],
.attendance-plan-entry-row[hidden],
.attendance-plan-instruction[hidden],
.attendance-plan-palette[hidden] { display: none; }

/* 入口（#49-3、2026-10-14。正本: docs/design-refresh/attendance-entry-compact-spec.md）: 月ヘッダー内・翌月ボタンの左の小型ピル。
   月ヘッダーを「前月 / (余白) / 入口 / 翌月」の4列にし、月ラベルは絶対配置でカード中央に固定する（入口の有無で動かさない） */
.schedule-cal-header {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 32px;
  column-gap: 7px;
  align-items: center;
  min-height: 34px;
  margin-bottom: 10px;
}
.schedule-cal-header #scheduleCalPrevBtn { grid-column: 1; grid-row: 1; }
.schedule-cal-header .attendance-plan-entry-row { grid-column: 3; grid-row: 1; }
.schedule-cal-header #scheduleCalNextBtn { grid-column: 4; grid-row: 1; }
.schedule-cal-header .schedule-cal-month-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.attendance-plan-entry-row { display: flex; }
.attendance-plan-entry-btn {
  position: relative;
  min-width: 102px;
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  border: 1px solid #79AAA2;
  border-radius: 999px;
  background: rgba(247, 252, 251, 0.82);
  color: #286E61;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.attendance-plan-entry-btn:hover { background: #E7F4F1; }

/* 編集中の帯（カードの先頭。stickyにはしない） */
.attendance-plan-band {
  min-height: 54px;
  margin-bottom: 9px;
  padding: 7px 8px 7px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid #5E9D8F;
  border-radius: 11px;
  background: linear-gradient(105deg, #E2F3EF, #EEF8F4);
}
.attendance-plan-band-text { min-width: 0; }
.attendance-plan-band-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.attendance-plan-band-status {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #57736F;
}
.attendance-plan-band-status b { font-weight: 800; color: var(--ink); }
.attendance-plan-band-actions {
  display: flex;
  flex: none;
  gap: 7px;
}
.attendance-plan-cancel-btn,
.attendance-plan-done-btn {
  position: relative;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.attendance-plan-cancel-btn {
  border: 1px solid #4F8A7F;
  background: #fff;
  color: #356B62;
}
.attendance-plan-done-btn {
  border: 1px solid #347564;
  background: #347564;
  color: #fff;
}
.attendance-plan-done-btn:disabled { opacity: 0.48; cursor: default; }
.attendance-plan-cancel-btn:disabled { cursor: default; }
/* 34pxのボタンでも、押せる範囲は上下に広げて44px以上にする */
.attendance-plan-entry-btn::after,
.attendance-plan-cancel-btn::after,
.attendance-plan-done-btn::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
}
.attendance-plan-entry-btn:focus-visible,
.attendance-plan-cancel-btn:focus-visible,
.attendance-plan-done-btn:focus-visible,
.attendance-plan-chip:focus-visible,
.attendance-plan-cell:focus-visible {
  outline: 2px solid #267B72;
  outline-offset: 2px;
}

/* 説明と勤怠のパレット（折り返しても固定高・横スクロールにしない） */
.attendance-plan-instruction {
  margin: 3px 0 7px;
  font-size: 11px;
  color: #536D72;
}
.attendance-plan-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}
.attendance-plan-empty {
  flex-basis: 100%;
  margin: 0;
  font-size: 11.5px;
  color: #536D72;
}
.attendance-plan-chip {
  min-height: 36px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  border: 1px solid #C7D9D7;
  border-radius: 999px;
  background: #fff;
  color: #31535B;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.attendance-plan-chip .attendance-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: none;
}
.attendance-plan-chip.is-unset {
  border-style: dashed;
  background: #FBFCFB;
}
.attendance-plan-chip-x { font-size: 13px; line-height: 1; }
/* 選択中: 枠を2pxにする分だけpaddingを1px減らし、寸法を動かさない */
.attendance-plan-chip.is-selected {
  padding: 3px 8px;
  border: 2px solid #267B72;
  background: #DFF3EF;
  color: #175D57;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* 編集中のセル: 日付・勤怠アイコン・勤怠名だけ。過去の薄表示（.is-past）・選択日の濃い面は使わない */
body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell {
  height: 72px;
  min-height: 72px;
  min-width: 0;
  padding: 3px 3px 4px;
  box-sizing: border-box;
  border: 1px dashed #CDD9D7;
  border-radius: 7px;
  background: rgba(251, 253, 252, 0.70);
  color: #253F45;
  font: inherit;
  text-align: left;
  opacity: 1;
  box-shadow: none;
}
body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell .cal-day-num {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.attendance-plan-cell-body {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}
.attendance-plan-cell-icon {
  width: 22px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: none;
}
body[data-view="schedule"] main .attendance-plan-cell-icon .attendance-icon-img {
  width: auto;
  height: auto;
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
}
.attendance-plan-cell-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 9.5px;
  line-height: 1.15;
  word-break: break-all;
}
.attendance-plan-cell-dash {
  font-size: 13px;
  line-height: 1;
  color: #A5B3B2;
}
body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell.is-set {
  border-style: solid;
  border-color: #CFE2DF;
  background: #EDF6F5;
}
/* 変更済み（まだ保存していない日）: 枠と面を少し濃くし、右上に点。読み上げはaria-labelの「変更済み」 */
body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell.is-changed {
  border-style: solid;
  border-color: #71B8AE;
  background: #E2F3EF;
}
body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell.is-changed::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27847A;
  box-shadow: 0 0 0 2px #fff;
}
/* 表示月の外の日は押せない */
body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell.other-month {
  opacity: 0.32;
  pointer-events: none;
  cursor: default;
}

/* 編集中の周り: PC（とアプリ横）は右2列を薄くして押せなくする（DOMは残す。inertも付ける） */
#scheduleCalendarModeView .schedule-col-mid,
#scheduleCalendarModeView .schedule-col-right {
  transition: opacity 0.19s ease, filter 0.19s ease;
}
#scheduleCalendarModeView.is-attendance-planning .schedule-col-mid,
#scheduleCalendarModeView.is-attendance-planning .schedule-col-right {
  opacity: 0.36;
  filter: saturate(0.35);
  pointer-events: none;
  user-select: none;
}
/* モード切替の一覧・進捗管理は編集中は押せない（disabled） */
body[data-view="schedule"] #scheduleModeTabs > .add-mode-tab:disabled {
  opacity: 0.5;
  cursor: default;
}

/* スマホ縦: 編集中はカレンダーのカードだけを出す（選択日の詳細・期日・右側のカードは隠し、場所も取らない） */
@media (max-width: 1023.98px) and (orientation: portrait) {
  #scheduleCalendarModeView.is-attendance-planning .schedule-col-mid,
  #scheduleCalendarModeView.is-attendance-planning .schedule-col-right { display: none; }
  /* 最終行（カレンダーのカードの下端）が下タブバー・てりーさんの丸ボタンに隠れないよう、今日タブ・進捗管理と同じ150pxにする
     （共通の100pxだと、末尾までスクロールしても丸の上端との間が約30pxしか残らなかった） */
  html.attendance-planning body[data-view="schedule"] main {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
  .attendance-plan-band { padding: 7px 8px 7px 9px; }
  .attendance-plan-band-status { font-size: 10.5px; }
  .attendance-plan-cancel-btn,
  .attendance-plan-done-btn { padding: 0 12px; }
  /* #49-3: 月ヘッダーは44px高、入口自体が44pxなので不可視の押せる範囲ははみ出させない */
  .schedule-cal-header { min-height: 44px; }
  .attendance-plan-entry-btn { min-width: 92px; height: 44px; padding: 0 10px; }
  .attendance-plan-entry-btn::after { inset: 0; }
  .attendance-plan-instruction { font-size: 10.5px; line-height: 1.45; }
  .attendance-plan-palette { gap: 6px 5px; }
  .attendance-plan-chip { padding: 4px 8px; font-size: 11px; }
  .attendance-plan-chip.is-selected { padding: 3px 7px; }
  body[data-view="schedule"] .schedule-cal-cell.attendance-plan-cell {
    padding: 3px 2px 4px;
    border-radius: 6px;
  }
  .attendance-plan-cell-icon { width: 21px; }
  body[data-view="schedule"] main .attendance-plan-cell-icon .attendance-icon-img { max-width: 21px; max-height: 21px; }
  .attendance-plan-cell-name { font-size: 9px; line-height: 1.13; }
}
/* スマホ縦: カレンダーのカードは内側の余白を10px 9pxにして7列のマスを広く取る（#49の基準画像・仕様5節） */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="schedule"] #scheduleCalendarModeView #scheduleCalCard { padding: 10px 9px; }
}