* { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .display, .num {
    font-family: "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", sans-serif;
  }

  /* 進捗管理のガント（日付単位モード、#projectProgressGroups.has-expanded）表示中は
     mainの左paddingを無くす（2026-09-23）。以前はサイドバー右端〜mainの実コンテンツ
     開始位置の隙間を別のposition:fixed要素（.gantt-left-gap-cover）で覆う対症療法を
     していたが、進捗管理の全画面表示（html.progress-fullscreen、サイドバーごと隠れる）
     ではその固定位置が合わなくなり、変な場所に表示され続けるバグになっていた
     （ユーザー指摘）。隙間そのものを無くす方が根本的な解決になる。IDセレクタを含む
     :has()なので、html.progress-fullscreen main側のpadding-left指定より優先される。 */
  main:has(#projectProgressGroups.has-expanded) { padding-left: 0; }

  /* プルリフレッシュのインジケーター（Androidアプリ版のみ、2026-09-19追加）。
     通常はtop:-40pxで画面外に隠れており、app.jsのinitPullToRefresh()が
     タッチ位置に応じてtopを動かす。2026-09-22：文字ラベルをやめ、円形の更新アイコン
     だけにした（ユーザー指定）。 */
  .pull-refresh-indicator {
    position: fixed;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-muted);
    box-shadow: var(--shadow-card);
    z-index: 30;
    transition: top 0.2s ease;
    pointer-events: none;
  }
  .pull-refresh-indicator.pulling { transition: none; }
  .pull-refresh-indicator.ready { color: var(--pine-deep); }
  /* 離した後、実際にリロードされるまでの間はくるくる回して「更新中」を示す。 */
  .pull-refresh-indicator.refreshing svg { animation: pull-refresh-spin 0.7s linear infinite; }
  @keyframes pull-refresh-spin { to { transform: rotate(360deg); } }

  .app {
    max-width: 480px;
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }

  /* header+mainをまとめるラッパー。スマホ時は単なる縦積み（実質何もしない）だが、
     PC版（1024px以上）でサイドバー化したnav.tabbarと横並びにするための土台になる。
     2026-09-13追加。 */
  .app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  /* main（スクロールする本体）と編集FABをまとめるラッパー。スマホ時は
     単なる透明ラッパー（実質何もしない）。PC版では、ここにmax-width＋
     中央寄せを適用し、その内部でFABをposition:absoluteにする。
     2026-09-13追加。 */
  .main-scroll-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    position: relative;
  }

  main {
    flex: 1;
    padding: 8px 4px 100px;
    overflow-y: auto;
    /* スクロールバーの出現・消滅でレイアウト幅が変わらないよう、常にその分の余白を
       確保しておく（2026-09-18追加）。例えば予定タブのカレンダー表示で「+予定・todoを
       追加する」フォームを開くと縦に長くなりスクロールバーが出るが、それだけで
       3カラム（カレンダー/選択日/バックログ）の幅が微妙にずれてしまっていた。 */
    scrollbar-gutter: stable;
  }

  /* スマホの右下FAB（今日タブの編集/保存、進捗管理の「てりーさんとガントを整える」）の
     下に、スクロール末尾の内容が隠れないよう余白を追加する（バックログ#33-13、
     2026-09-30。以前は最後の項目の下30px程度が常にFABの下に入っていた）。
     FABが出ないタブ（てりーさんタブ等）では余白を広げすぎないよう、対象を絞る。 */
  @media (max-width: 1023.98px) {
    body[data-view="today"] main,
    html.schedule-progress-active body[data-view="schedule"] main {
      padding-bottom: calc(150px + env(safe-area-inset-bottom));
    }
    /* 編集中はキャンセルFAB（bottom: 148px）も積み重なるため、さらに広げる。 */
    html.editing body[data-view="today"] main {
      padding-bottom: calc(220px + env(safe-area-inset-bottom));
    }
  }

  /* ページ全体（main）の縦スクロールバーは標準のままにする。::-webkit-scrollbarで
     見た目を変えると、Androidアプリ（WebView）でスクロールバーが常時表示になり、
     画面全体が左に寄ってしまったため元に戻した（2026-09-21、ユーザー指摘）。
     細いバーにしているのはダイアログ（.sheet）と、進捗管理のガント表示中のmainの
     横スクロールバーだけ（`:horizontal`で縦とは別に指定、schedule.css参照）。 */

  /* --- ヘッダー：日付ナビゲーター --- */
  header.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 14px 12px 6px;
  }

  .wordmark {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
  }
  .wordmark .mark {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--pine-deep);
    flex-shrink: 0;
  }

  .day-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* :not(.today-btn)で除外する（2026-09-23追加）。#todayBtnは.date-labelの中に
     入っており.day-navの子孫のbuttonに該当するため、この丸型ボタンの見た目
     （円形・影付き）を意図せず継承してしまい、.today-btn側の指定（カレンダーの
     「今月」ボタンと同じ、角丸の細い枠のピル）が上書きされてしまっていた。
     同じ理由で.header-attendance-trigger（勤怠ドロップダウンの<button>、これも
     .date-labelの中＝.day-navの子孫）も除外する（2026-09-23、勤怠表示のヘッダー
     移設時に同じ丸型ボタン化のバグを踏んだ）。 */
  /* 左：前日／日付／次の日（.day-nav-main）、右：省エネと設定の2つだけ（.header-actions）
     （2026-09-26、下部ツールバーを4項目に絞るのに伴い、設定をヘッダー右上へ移した）。 */
  .day-nav-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
  }
  /* 今日タブ以外のヘッダー（バックログ#40-3-3）: 日付の部分・「体調を記録」・🌱を隠し、左にタブの名前、
     右に「てりーさん」ボタンだけを出す。表示領域を狭めないよう、上下の余白を詰めて今日タブより低くする（#29の経緯）。
     「体調を記録」・🌱はJSがstyle.displayで出し入れするので!importantで隠す。body[data-view]はapp.jsのswitchToTab()が更新する。 */
  .app-header-title { display: none; margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
  body:not([data-view="today"]) header.app-header { padding-top: 8px; padding-bottom: 8px; }
  body:not([data-view="today"]) .app-header-title { display: block; }
  body:not([data-view="today"]) .day-nav { margin-bottom: 0; }
  body:not([data-view="today"]) .day-nav-controls,
  body:not([data-view="today"]) #todayEditHeaderBtn,
  body:not([data-view="today"]) #todayHeaderEnergyBadge { display: none !important; }
  .day-nav button:not(.today-btn):not(.header-attendance-link):not(.today-edit-header-btn):not(.nagi-header-btn) {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .day-nav button:not(.today-btn):not(.header-attendance-link):not(.today-edit-header-btn):not(.nagi-header-btn):active { background: var(--pine-soft); color: var(--pine-deep); }

  .header-attendance-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    box-shadow: none;
    cursor: default;
  }
  .header-attendance-icon[hidden],
  .header-attendance-link[hidden] { display: none; }
  .header-attendance-icon .attendance-icon-img {
    width: auto;
    height: auto;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    opacity: 0.9;
    filter: saturate(0.72) hue-rotate(-8deg) brightness(0.98);
    vertical-align: middle;
  }
  .header-attendance-link {
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #24788B;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  /* 文字リンクは小さいので、押せる範囲だけ上下左右に広げる（見た目は変えない） */
  .header-attendance-link { position: relative; }
  .header-attendance-link::after { content: ""; position: absolute; inset: -8px -4px; }
  .header-attendance-link:focus-visible {
    outline: 2px solid #267B72;
    outline-offset: 2px;
    border-radius: 4px;
  }
  .date-jump-trigger { cursor: pointer; border-radius: 6px; }
  .date-jump-trigger:active { background: var(--surface-sunk); }
  .date-jump-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
  }

  /* --- タグピッカー（体調サイン/ストレッサー/コーピング。20〜50件規模を想定） --- */
  .tag-group { margin-top: 16px; }
  .tag-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .tag-group-label { font-size: 13.5px; color: var(--ink-muted); font-weight: 700; }
  .tag-group-count { font-size: 11px; color: var(--ink-faint); }

  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--pine);
    color: #fff;
    border-radius: 999px;
    padding: 6px 8px 6px 13px;
    font-size: 13.5px;
    font-weight: 700;
  }
  .chip .chip-remove {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .add-tag-btn {
    border: 1.5px dashed var(--line);
    background: transparent;
    color: var(--ink-muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
  }
  .add-tag-btn:active { background: var(--surface-sunk); }

  .tag-picker-panel {
    margin-top: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px;
    display: none;
  }
  .tag-picker-panel.open { display: block; }

  .tag-search {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 8px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--surface);
    margin-bottom: 8px;
  }
  .tag-picker-list {
    max-height: 192px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tag-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    cursor: pointer;
  }
  .tag-picker-row:active { background: var(--surface-sunk); }
  .tag-picker-row .box {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 2px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: transparent;
    font-size: 12px;
  }
  .tag-picker-row.checked .box { background: var(--pine); border-color: var(--pine); color: #fff; }
  .tag-picker-empty {
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-faint);
    padding: 16px 0;
  }
  .tag-picker-close {
    width: 100%;
    margin-top: 8px;
    border: none;
    background: none;
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 0 2px;
    cursor: pointer;
  }
  /* 今日タブの各選択パネル内から、マスタ未登録の項目をその場で新規追加するための
     ボタン・フォーム（ストレッサー/コーピング/体調サイン共通）。 */
  .inline-new-master-btn {
    width: 100%;
    margin-top: 8px;
    border: 1px dashed var(--pine);
    background: var(--pine-soft);
    color: var(--pine-deep);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .inline-new-master-form {
    margin-top: 8px;
    padding: 10px;
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
  }
  .inline-new-master-form .task-form-input { margin-bottom: 8px; }
  .inline-new-master-form-actions { display: flex; gap: 8px; margin-top: 4px; }
  .inline-new-master-form-actions button {
    flex: 1;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 0;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .inline-new-master-save-btn { background: var(--pine); color: #fff; }
  .inline-new-master-cancel-btn { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--line) !important; }
  /* サインのカテゴリ色（良好/注意/悪化） */
  .chip[data-cat="良好"] { background: var(--ok); }
  .chip[data-cat="注意"] { background: var(--amber); }
  .chip[data-cat="悪化"] { background: var(--brick); }

  .picker-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
    padding: 8px 8px 4px;
  }
  .picker-group-header .dot { width: 7px; height: 7px; border-radius: 50%; }
  .picker-group-header .dot.c-良好 { background: var(--ok); }
  .picker-group-header .dot.c-注意 { background: var(--amber); }
  .picker-group-header .dot.c-悪化 { background: var(--brick); }
  /* タスクマスター選択欄のカテゴリ見出しだけ、文字サイズはそのままに
     背景色を付けて目立たせる（体調サイン選択の見出しには影響させない）。 */
  .picker-group-header-tm {
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    margin: 4px 0 4px;
  }
  .tag-picker-row .dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; flex-shrink: 0; }
  .tag-picker-row .dot.c-良好 { background: var(--ok); }
  .tag-picker-row .dot.c-注意 { background: var(--amber); }
  .tag-picker-row .dot.c-悪化 { background: var(--brick); }

  /* --- タスクリスト --- */
  .task-list { display: flex; flex-direction: column; gap: 2px; }
  .task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--line);
  }
  .task-item:last-child { border-bottom: none; }
  /* 完了チェック（丸）: 予定タブの.schedule-item-checkbox（<input type="checkbox">、
     schedule.jsで使用）と、この.task-check（<div role="checkbox">、今日タブの未完了
     （過去分）カード・面談メモで使用）の見た目を統一する（バックログ#33-1、2026-09-30）。
     以前は前者が四角、後者も薄いグレーの角丸で「押せなさそう」に見えていた。
     appearance:noneで<input>側も丸に描き直すが、change/clickイベントやキーボード操作は
     <input>のまま保持されるので、schedule.jsのイベント登録側は変更不要。
     見た目の円は22pxだが、タップ領域はmargin:-5pxで32x32pxまで広げる（周囲のレイアウトの
     占有幅は22px相当のまま、はみ出した分だけタップに反応する）。 */
  .schedule-item-checkbox,
  .task-check {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: -5px;
    border: none;
    background: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    color: transparent;
    font-size: 0;
  }
  .schedule-item-checkbox::before,
  .task-check::before {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pine);
    background: var(--surface);
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .schedule-item-checkbox:checked::before,
  .task-check.done::before {
    background: var(--pine);
    border-color: var(--pine);
  }
  .schedule-item-checkbox::after,
  .task-check::after {
    content: '';
    position: absolute;
    display: none;
    width: 6px;
    height: 10px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
  }
  .schedule-item-checkbox:checked::after,
  .task-check.done::after {
    display: block;
  }
  /* 未完了→完了の瞬間だけ弾む（元に戻す時・初期描画時は再生しない。JS側でis-bouncingを
     一時的に付け外しする）。 */
  .schedule-item-checkbox.is-bouncing::before,
  .task-check.is-bouncing::before {
    animation: taskCheckBounce 0.3s ease-out;
  }
  @keyframes taskCheckBounce {
    0% { transform: scale(1); }
    45% { transform: scale(1.25); }
    75% { transform: scale(0.95); }
    100% { transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .schedule-item-checkbox.is-bouncing::before,
    .task-check.is-bouncing::before {
      animation: none;
    }
  }
  .task-body { flex: 1; min-width: 0; }
  .task-title {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .task-item.done .task-title { color: var(--ink-faint); text-decoration: line-through; }
  .task-meta-category { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .cat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pine); flex-shrink: 0; }
  .task-meta-category span:last-child { font-size: 13px; color: var(--ink-faint); }
  /* 工数・締切は、カテゴリ名の長さに巻き込まれて位置がバラつかないよう、
     専用の行として分離している（同じ行に詰め込むと、カテゴリ名が折り返した
     タスクだけ工数・締切の位置がずれて見た目が揃わなくなるため）。 */
  .task-meta-detail { display: flex; gap: 10px; margin-top: 2px; }
  .task-meta-detail span { font-size: 13px; color: var(--ink-faint); }
  .load-badge {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
  }

  .task-delete-btn {
    width: 36px; height: 36px;
    border: none;
    background: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--ink-faint);
    cursor: pointer;
    flex-shrink: 0;
  }
  .task-delete-btn:active { background: var(--brick-soft); color: var(--brick); }

  /* --- 下部タブ --- */
  /* 左下のてりーさん（#47）はPCのサイドバーだけ（shared.cssの「PC版のデザイン刷新」）。スマホの下部タブでは出さない */
  .sidebar-terry { display: none; }
  nav.tabbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: flex;
    /* 2026-09-06: ナビゲーションバー分の余白は、背景色（.tabbar自体）は画面端まで
       届かせつつ、中身のボタン部分だけ内側に寄せたいため、ここではpadding-bottomで
       処理する（bottom:0のまま、内側の余白として確保する）。ネイティブ側
       （MainActivity.java）は上部の余白だけを担当し、下部はこちらに一本化している。 */
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 15;
  }
  nav.tabbar button {
    position: relative;
    flex: 1;
    border: none;
    background: none;
    padding: 14px 0 12px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--ink-faint);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
  }
  nav.tabbar button .icon { font-size: 21px; line-height: 1; }
  nav.tabbar button.active { color: var(--pine); }
  /* タブのアイコン画像（#33-46、2026-10-10。以前は記号◐▤▦⚙）。大きさは置き場所ごとの.iconのfont-sizeに連動させる
     （スマホ下部・PCサイドバー・アプリ横画面・今日タブのスマホ版で、それぞれの値がそのまま効く）。
     未選択は灰色で薄く、選択中は元の色で出して、これまでの文字色の切り替えに当たる見分けを保つ */
  nav.tabbar button .icon img {
    display: block;
    width: 1.15em;
    height: 1.15em;
    margin: 0 auto;
    filter: grayscale(1);
    opacity: 0.5;
    transition: opacity 0.15s, filter 0.15s;
  }
  nav.tabbar button.active .icon img { filter: none; opacity: 1; }

  /* --- 下のメニュー中央のてりーさん（バックログ#48-27、2026-10-13、案A） ---
     スマホ（1023px以下）の入口。4つのタブの真ん中に枠（.tabbar-terry、タブ1つ分の幅）を取り、丸いアバター（58px）を
     バーの上端から30pxはみ出させ、ラベルは他のタブと同じ高さの下端に置く。選択中の表示は付けない（タブではないため）。
     ボタンはnav.tabbarの中のbuttonなので、`nav.tabbar button`・今日タブの`body[data-view="today"] nav.tabbar button`
     （min-height・padding等）が当たる。それより詳細度を上げた`body[data-view] nav.tabbar .tabbar-terry-btn`で打ち消す。
     PCは左下の.sidebar-terry（#47）があるので隠す（PC版の@media内）。アプリの横向きは縦並びの一番下（is-app-landscapeの所）。
     AIをオフにした時は枠ごと隠してタブ4つにする（下の「使い方」でオフにした時の一覧）。 */
  .tabbar-terry {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  body[data-view] nav.tabbar .tabbar-terry-btn {
    position: absolute;
    left: 50%;
    top: -30px;
    bottom: 0;
    transform: translateX(-50%);
    width: 76px;
    min-height: 0;
    flex: none;
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    border: none;
    background: none;
    color: var(--ink-faint);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-view] nav.tabbar .tabbar-terry-avatar {
    flex: none;
    width: 58px;
    height: 58px;
    box-sizing: border-box;
    border: 3px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    background: #E7F6F4;
    box-shadow: 0 4px 14px rgba(36, 91, 101, 0.2);
    transition: transform 0.15s;
  }
  body[data-view] nav.tabbar .tabbar-terry-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body[data-view] nav.tabbar .tabbar-terry-btn:active .tabbar-terry-avatar { transform: scale(0.95); }
  body[data-view] nav.tabbar .tabbar-terry-btn:focus { outline: none; }
  body[data-view] nav.tabbar .tabbar-terry-btn:focus-visible .tabbar-terry-avatar { outline: 2px solid #2FA3B6; outline-offset: 2px; }
  /* 未確定の提案の印: アバターの右上 */
  body[data-view] nav.tabbar .tabbar-terry-badge {
    top: 2px;
    left: calc(50% + 17px);
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-view] nav.tabbar .tabbar-terry-avatar { transition: none; }
    body[data-view] nav.tabbar .tabbar-terry-btn:active .tabbar-terry-avatar { transform: none; }
  }
  /* スマホ（1023px以下）では、ヘッダーのてりーさんボタン（と印#nagiBadge）は出さず、上の丸を入口にする（#48-27） */
  @media (max-width: 1023.98px) {
    #nagiHeaderBtn { display: none; }
  }

  /* --- ナビゲーションバッジ（未読通知件数。2026-09-16追加） --- */
  /* お知らせの未読ポッチ（件数ではなく点だけ。2026-09-26、下部ナビを4項目にしたのに合わせて） */
  .nav-badge {
    position: absolute;
    top: 9px;
    left: 56%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brick);
    border: 2px solid var(--surface);
    box-sizing: content-box;
  }


  /* --- 起動時通知バナー（2026-09-16追加。toastと同じく常に最前面固定） --- */
  .notification-banner-stack {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 448px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    pointer-events: none;
  }
  .notification-banner {
    background: var(--ink);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    font-size: 13px;
    cursor: pointer;
    pointer-events: auto;
  }
  .notification-banner-title { font-weight: 700; }

  /* --- トースト --- */
  .toast {
    position: fixed;
    left: 50%;
    bottom: 150px;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    /* ダイアログ（.sheet-overlay、z-index:40）の上に出す。入力チェックのメッセージ等を
       ダイアログを開いたまま表示するため（2026-09-21、フォームをダイアログ化したのに伴う）。 */
    z-index: 60;
    white-space: nowrap;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* --- 起動時カバー（2026-09-19追加、#44-3でTidiaロゴ付きに。仕様: docs/design-refresh/loading-spec.md）。
     app.jsのbootApp()/showLoginScreen()が.hiddenを付けて閉じる。背景・ロゴ画像の読み込みは閉じる条件にしない。
     画像が無くても単色#edf7f8と中央の状態表示（CSSだけ）が先に見える。
     重なり順は背景0／ベール1／状態面・ロゴ2。負のz-indexはAndroid WebViewで親の単色背景の後ろへ回り得るので使わない --- */
  .boot-cover {
    position: fixed;
    inset: 0;
    z-index: 250;
    isolation: isolate;
    overflow: hidden;
    background-color: #edf7f8;
  }
  .boot-cover.hidden { display: none; }
  .boot-cover::before,
  .boot-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .boot-cover::before {
    z-index: 0;
    background-image: url("../assets/today-bg-sea-sunrise.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 48%;
  }
  .boot-cover::after {
    z-index: 1;
    background: linear-gradient(180deg, rgba(248, 252, 253, .68), rgba(237, 247, 249, .76));
  }
  .boot-cover-status {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    min-width: 142px;
    padding: 14px 20px;
    border: 1px solid rgba(126, 181, 193, .32);
    border-radius: 22px;
    background: rgba(255, 255, 255, .56);
    box-shadow: 0 10px 30px rgba(45, 92, 111, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .boot-cover-spinner {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(107, 166, 171, .28);
    border-top-color: #2f7f82;
    animation: boot-cover-spin 0.9s linear infinite;
  }
  @keyframes boot-cover-spin {
    to { transform: rotate(360deg); }
  }
  .boot-cover-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #315f70;
  }
  /* 下部ロゴ（#44-4で横長ロゴの静止画に。アニメWebPの<img>は外した。横長で動く版は後日Codexに素材を依頼）。
     tidia-logo-horizontal.pngはdocs/brand/tidia-logo-variants/tidia_horizontal.pngの透明な余白を詰めて幅400px（PC表示の2倍）に縮小したもの
     （#47で細字版の素材から作り直した。余白を詰めた縦横比は860:291） */
  .boot-cover-logo {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 200px;
    aspect-ratio: 860 / 291;
    background: url("../assets/tidia-logo-horizontal.png") center / contain no-repeat;
  }
  @media (max-width: 1023.98px) and (orientation: portrait) {
    .boot-cover::before { background-position: 62% 50%; }
    .boot-cover::after {
      background: linear-gradient(180deg, rgba(248, 252, 253, .66), rgba(237, 247, 249, .75));
    }
    .boot-cover-status {
      padding: 13px 18px;
      border-radius: 21px;
    }
    .boot-cover-logo {
      width: 180px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
  }
  @media (max-width: 1023.98px) and (orientation: landscape) {
    .boot-cover::before { background-position: 50% 47%; }
    .boot-cover-status {
      min-width: 128px;
      padding: 10px 16px;
      gap: 8px;
      border-radius: 18px;
    }
    .boot-cover-spinner {
      width: 26px;
      height: 26px;
    }
    .boot-cover-label { font-size: 12px; }
    .boot-cover-logo {
      width: 128px;
      bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .boot-cover-spinner { animation: none; }
  }

  /* --- ログイン/新規登録画面（#33-58で摩周湖の背景＋青白・青緑の配色に。仕様: docs/design-refresh/login-spec.md） ---
     背景画像・ベールは起動時カバー（.boot-cover、z-index:250）と同じ位置・値にして、カバーが消えた時に構図と明るさが動かないようにする。
     重なり順は背景0／ベール1／カード2。負のz-indexはAndroid WebViewで親の単色背景の後ろへ回り得るので使わない。
     配色はこの画面だけのもの（--auth-*）。アプリ全体のトークンは変えない。
     .auth-remember-label・.auth-errorは設定タブでも使うので、上書きは.auth-card配下に限る */
  .auth-overlay {
    --auth-ink: #12385f;
    --auth-muted: #48667e;
    --auth-faint: #7892a5;
    --auth-line: rgba(183, 214, 220, .86);
    --auth-teal: #2f8a84;
    --auth-teal-deep: #1f5e62;
    position: fixed;
    inset: 0;
    z-index: 200;
    isolation: isolate;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    background-color: #edf7f8;
    color: var(--auth-ink);
  }
  .auth-overlay.hidden { display: none; }
  .auth-overlay::before,
  .auth-overlay::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
  }
  .auth-overlay::before {
    z-index: 0;
    background-image: url("../assets/today-bg-sea-sunrise.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 48%;
  }
  .auth-overlay::after {
    z-index: 1;
    background: linear-gradient(180deg, rgba(248, 252, 253, .68), rgba(237, 247, 249, .76));
  }
  .auth-card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    padding: 26px 30px 24px;
    border: 1px solid rgba(183, 214, 220, .82);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 18px 54px rgba(37, 91, 111, .16), inset 0 1px 0 rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
  }
  .auth-error {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--brick);
    line-height: 1.5;
  }
  /* 「次回から自動でログインする」チェックボックス。2026-09-07追加。 */
  .auth-remember-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .auth-remember-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--pine);
    cursor: pointer;
  }
  /* ログイン画面の画像ロゴ＋キャッチコピー（バックログ#33-6）。tidia-logo-login.pngはTidiaのマーク（#44-1、文字なし。docs/brand/tidia-logo-v1/master/の余白を詰めて360px幅に縮小したもの） */
  .auth-intro { margin: 0 0 18px; text-align: center; }
  .auth-logo {
    display: block;
    width: 104px;
    height: auto;
    margin: 0 auto 10px;
    filter: drop-shadow(0 5px 10px rgba(32, 112, 133, .10));
  }
  .auth-tagline {
    margin: 0;
    color: var(--auth-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .01em;
  }
  .auth-card .task-form-input {
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    color: var(--auth-ink);
    font-size: 14px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  .auth-card .task-form-input::placeholder { color: var(--auth-faint); }
  .auth-card .task-form-input:focus {
    border-color: rgba(47, 138, 132, .74);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 3px rgba(74, 174, 177, .14);
  }
  .auth-card .auth-remember-label {
    gap: 8px;
    margin-top: 12px;
    color: var(--auth-muted);
    font-size: 12.5px;
  }
  .auth-card .auth-remember-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--auth-teal);
  }
  .auth-card .task-form-submit {
    min-height: 46px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f8a84, #3197a0);
    box-shadow: 0 7px 16px rgba(47, 138, 132, .18);
    font-size: 14px;
    letter-spacing: .02em;
  }
  .auth-card .task-form-submit:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(47, 138, 132, .16);
  }
  .auth-card .task-form-submit:disabled {
    opacity: .58;
    cursor: default;
    transform: none;
    box-shadow: none;
  }
  .auth-card .auth-error { line-height: 1.55; }
  @media (max-width: 1023.98px) and (orientation: portrait) {
    .auth-overlay {
      padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    }
    .auth-overlay::before { background-position: 62% 50%; }
    .auth-overlay::after {
      background: linear-gradient(180deg, rgba(248, 252, 253, .66), rgba(237, 247, 249, .75));
    }
    .auth-card {
      max-width: 358px;
      padding: 24px 20px 22px;
      border-radius: 22px;
    }
    .auth-intro { margin-bottom: 17px; }
    .auth-logo { width: 96px; margin-bottom: 9px; }
    .auth-tagline { font-size: 13px; }
  }
  /* スマホ横: 既存DOMのままGridで2列（左＝ロゴとキャッチコピー、右＝フォーム。ログイン／新規登録のタブは2026-10-23に撤去）。#33-58以前は915×412でカードの上下が切れていた */
  @media (max-width: 1023.98px) and (orientation: landscape) {
    .auth-overlay {
      padding: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    }
    .auth-overlay::before { background-position: 50% 47%; }
    .auth-card {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: 24px;
      width: min(680px, 100%);
      max-width: 680px;
      padding: 18px 24px;
      border-radius: 22px;
    }
    .auth-intro {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      margin: 0;
      padding-right: 16px;
      border-right: 1px solid rgba(183, 214, 220, .66);
    }
    .auth-logo { width: 100px; margin-bottom: 8px; }
    .auth-tagline { font-size: 12px; line-height: 1.6; }
    #authLoginRegisterFields {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      min-width: 0;
    }
    .auth-card .task-form-input { height: 42px; min-height: 42px; }
    .auth-card .auth-remember-label { margin-top: 9px; }
    .auth-card .task-form-submit { min-height: 42px; margin-top: 12px; padding: 8px 12px; }
  }
  /* 縦が極端に短い縦画面では上寄せ（中央寄せだとカード上端が画面外に出てスクロールでも届かない） */
  @media (max-height: 520px) and (orientation: portrait) {
    .auth-overlay { align-items: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-card .task-form-input,
    .auth-card .task-form-submit { transition: none; }
  }

  .placeholder-view {
    padding: 80px 20px;
    text-align: center;
    color: var(--ink-faint);
  }
  .placeholder-view .glyph { font-size: 32px; margin-bottom: 12px; }
  .placeholder-view p { font-size: 13.5px; line-height: 1.7; }

  /* --- タスクタブ：追加フォーム --- */
  .task-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* 数値入力欄など、値が入るとプレースホルダーが消えて何の項目か分からなくなる入力欄用に、
     常時表示の小さなラベルを上に添える。 */
  .field-block { display: flex; flex-direction: column; gap: 3px; }
  .field-block.full { grid-column: 1 / -1; }
  .field-block-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-faint);
    padding-left: 2px;
  }
  /* てりーさんの提案の共通の見た目（緑のオーロラ）。#33-30で作り、#33-33（2026-10-04）で紫から緑に変更。
     #33-52（2026-10-11）で全タブの正にし、値をtokens.cssの--aurora-*へまとめた。
     - .nagi-suggest-aurora: 固定のオーロラ（適用済み・確定済みなど、応答を待っていない表示）
     - .nagi-suggest-aurora.is-flowing: 動くオーロラ。ユーザーの応答を待っている間だけ付ける（押すまで残るもの）
     - .nagi-suggest-aurora-pill: ピル・小さなタグ用（枠1px・影なし・角丸999px。動かさない）
     録音中・整理中の.voice-log-aurora（today.css）は処理中を示す別の動きなので、これには寄せない。
     各部品の側では、border・background・box-shadowを書かない（ここと二重管理にしない）。 */
  .nagi-suggest-aurora {
    border: 1.5px solid transparent;
    background: var(--aurora-fill) padding-box, var(--aurora-border) border-box;
    box-shadow: var(--aurora-glow);
  }
  .nagi-suggest-aurora.is-flowing {
    background: var(--aurora-fill) padding-box, var(--aurora-border-flow) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: nagiAuroraFlow 12s ease infinite;
  }
  .nagi-suggest-aurora-pill {
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--aurora-fill) padding-box, var(--aurora-border) border-box;
    box-shadow: none;
  }
  @keyframes nagiAuroraFlow {
    0% { background-position: 0 0, 0% 50%; }
    50% { background-position: 0 0, 100% 50%; }
    100% { background-position: 0 0, 0% 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nagi-suggest-aurora.is-flowing { animation: none; background-position: 0 0, 0% 50%; }
  }
  /* タスクのフォームの「てりーさんに目安を聞く」（#33-30）。utils.jsのsetupAiLoadSuggest()。
     ボタンは省エネモードのヘッダーのボタンのOFF時に揃える。入力欄を書き換えるのは
     提案の箱の［この値を入れる］を押した時だけ。 */
  .ai-load-ask {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 6px;
    border: 1.5px solid var(--pine-soft);
    background: var(--surface);
    color: var(--pine-deep);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .ai-load-ask:active { opacity: 0.85; }
  .ai-load-ask:disabled { opacity: 0.6; cursor: default; }
  .ai-load-ask-note { font-size: 11px; color: var(--ink-muted); margin-top: 4px; line-height: 1.5; }
  .ai-load-ask-note[hidden] { display: none; }
  .ai-load-suggest {
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
  }
  .ai-load-suggest[hidden] { display: none; }
  .ai-load-suggest-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--pine-deep); }
  .ai-load-suggest-label { font-size: 11px; font-weight: 700; }
  .ai-load-suggest-value { font-size: 15px; font-weight: 700; }
  .ai-load-suggest-reason { margin-top: 2px; color: var(--ink-muted); }
  .ai-load-suggest-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
  .ai-load-suggest-btns button {
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .ai-load-suggest-btns .no { border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); }
  .ai-load-suggest-btns .yes { border: 1px solid var(--pine); background: var(--pine); color: #fff; }
  .ai-load-suggest-btns button:active { opacity: 0.85; }
  /* 用語の説明「?」ボタン（#33-2）。今日タブの「キャパ使用率」の見出しと、フォームの「負荷の合計(pt)」の
     ラベルの横に置く。見た目は16pxの円、タップできる範囲は::afterで約32pxに広げる。
     開閉はutils.jsのinitTermHelp()（documentへの委譲1本）。 */
  .term-help-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--ink-faint);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
  }
  .term-help-btn::after { content: ''; position: absolute; inset: -8px; }
  .term-help-btn[aria-expanded="true"] { background: var(--surface-sunk); border-color: var(--ink-muted); }
  /* フォーム用：ラベルの直下に開閉する説明 */
  .term-help-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
    padding: 8px 10px;
  }
  .term-help-text[hidden], .term-help-pop[hidden] { display: none; }
  /* 真偽値フィールド用（2026-09-24追加、勤怠設定の「勤務日として扱う」等）。 */
  .field-block-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
    grid-column: 1 / -1;
    cursor: pointer;
  }
  .simple-field-checkbox { width: 16px; height: 16px; accent-color: var(--pine); cursor: pointer; flex-shrink: 0; }
  /* 「点数の理由・対策」「気づき・備考」のラベルは、体調サインの見出し
     （.tag-group-label）と同じ大きさに揃える。また、直前の体調サイン欄
     （+追加ボタン等）とくっつきすぎないよう、上に余白を確保する。
     直後のtextarea.note側のmargin-topは、ラベルのmargin-bottomと
     二重にならないよう0にリセットする。 */
  .note-label {
    font-size: 13.5px;
    color: var(--ink-muted);
    margin-top: 16px;
    margin-bottom: 6px;
  }
  .note-label + textarea.note {
    margin-top: 0;
  }
  .task-form-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
  }
  .task-form-input + .task-form-input,
  .task-form-input + .task-form-textarea,
  .task-form-textarea + .task-form-input {
    margin-top: 10px;
  }
  /* .task-form-grid内は横並びなので、上の縦積み用marginを打ち消す（gapで間隔を取るため） */
  .task-form-grid > .task-form-input {
    margin-top: 0;
  }
  .task-form-input.full { grid-column: 1 / -1; }
  /* input/select要素の高さを明示的に揃える（date/numberはネイティブUIの都合で高さがずれやすいため） */
  input.task-form-input,
  select.task-form-input {
    height: 40px;
  }
  .task-form-textarea {
    min-height: 52px;
    resize: none;
    overflow: hidden;
    font-family: inherit;
  }

  /* --- モダンセレクト（タスクマスター・カテゴリ選択：タップで検索付きパネルが開く） --- */
  .modern-select { position: relative; grid-column: 1 / -1; }
  .modern-select-trigger {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 0 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }
  /* トリガー内のテキストが長いカテゴリ名などで折り返されると、
     ボタンの高さが崩れて隣の項目とズレるため、1行に収めて省略表示にする */
  .modern-select-trigger > span:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .modern-select-trigger.placeholder { color: var(--ink-faint); }
  .modern-select-trigger span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
  }
  .modern-select-caret { color: var(--ink-faint); font-size: 11px; margin-left: 8px; flex-shrink: 0; }
  .modern-select .tag-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 15;
    /* カードの白背景に沈んで見えないよう、影を付けて浮き上がらせる */
    box-shadow: 0 8px 24px -4px rgba(38,43,40,0.22), 0 2px 8px rgba(38,43,40,0.10);
  }
  /* コーピング追加フォーム最下部にある分類タグ選択は、画面下端に近く、
     下向きに開くとドロップダウンが画面外にはみ出して選べなくなるため、上向きに開く。 */
  #copingCategoryModernSelect .tag-picker-panel {
    top: auto;
    bottom: calc(100% + 4px);
  }
  /* パネル自体が白なので、検索欄はうっすら色を付けて境界を分かりやすくする */
  .modern-select .tag-search {
    background: var(--surface-sunk);
    border-color: transparent;
  }
  .modern-select-row-check {
    margin-left: auto;
    color: var(--pine);
    font-weight: 700;
    opacity: 0;
  }
  .tag-picker-row.checked .modern-select-row-check { opacity: 1; }

  /* --- タップでオン/オフするトグルピル（汎用コンポーネント） --- */
  .toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
  }
  .toggle-pill::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
    flex-shrink: 0;
    transition: background 0.15s ease;
  }
  .toggle-pill.active {
    background: var(--pine-soft);
    border-color: var(--pine);
    color: var(--pine-deep);
  }
  .toggle-pill.active::before { background: var(--pine); }

  .task-form-submit {
    width: 100%;
    margin-top: 12px;
    border: none;
    background: var(--pine);
    color: #fff;
    padding: 11px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
  }
  /* タスク追加フォームで、何か入力された時だけ表示するキャンセルボタン。2026-09-06追加。 */
  .task-form-cancel-btn {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  /* 「やめる」と「実行」が対になったボタンの行（2026-10-04、バックログ#33-29）。
     PCでもスマホでも横並び・左にやめる（枠線）・右に実行（緑）・幅1:2。
     並びはDOMの順番で決める（Tabキーの順を左→右にするため、orderは使わない）。
     やめる方が非表示の時は、実行が全幅になる。 */
  .form-actions { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
  .form-actions > .task-form-submit,
  .form-actions > .task-form-cancel-btn { margin: 0; width: auto; }
  /* やめる側の文言は折り返さない（「もう少し続け／る」のような割れ方を防ぐ）。文字の分より狭くならないので、
     文言が長い時は1:2の比率を少し崩して、実行側が詰める（実行側は長ければ折り返してよい）。 */
  .form-actions > .task-form-cancel-btn { flex: 1; white-space: nowrap; min-width: max-content; }
  .form-actions > .task-form-submit { flex: 2; }
  /* 編集フォームの左下の「削除」（スケジュール・Todoの編集。#48-13）。やめる・実行の1:2はそのままで、左に文字幅で置く */
  .form-actions > .sheet-btn.schedule-form-delete-btn { flex: 0 0 auto; padding: 10px 14px; border-radius: var(--radius-sm); font-family: inherit; }
  /* 実行側の長い文言で、改行してよい位置を決める（各かたまりの中では折り返さない。#33-29の差し戻し）。 */
  .form-actions-chunk { white-space: nowrap; }
  /* フォーム下部に積む「削除」ボタン（2026-09-19、プロジェクト編集フォームで使用）。
     .sheet-actions内の.dangerピルとは別に、縦積みフォーム内で使う用の見た目。 */
  .task-form-delete-btn {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--brick-soft);
    background: var(--brick-soft);
    color: var(--brick);
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }

  /* --- タスクタブ：追加モード切替（タスクマスター / 自由入力） --- */
  .add-mode-tabs {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 12px;
    background: var(--surface-sunk);
    border-radius: var(--radius-lg);
    padding: 3px;
  }
  .add-mode-tab {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .add-mode-tab.active { background: var(--surface); color: var(--pine-deep); box-shadow: var(--shadow-card); }

  .master-preview {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .master-preview-cat, .master-preview-load {
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
  }
  .master-preview-cat { background: var(--pine-soft); color: var(--pine-deep); }
  .master-preview-load { background: var(--amber-soft); color: #6B4A15; }

  /* --- 詳細シート（ボトムシート） --- */
  .sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(38,43,40,0.35);
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .sheet-overlay.open { opacity: 1; pointer-events: auto; }
  .sheet {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 22px 22px 0 0;
    padding: 10px 22px 26px;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .sheet-overlay.open .sheet { transform: translateY(0); }
  /* ダイアログ内のスクロールバー（2026-09-21、ユーザー指摘）。PCの標準スクロールバーは
     カードの右端いっぱいに（上下の矢印付きで）通り、角丸の外にはみ出して不格好だった。
     細く・角丸で・目立たない色にし、トラックの上下に余白を取って角丸の角を避ける。 */
  .sheet::-webkit-scrollbar { width: 10px; }
  .sheet::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
  .sheet::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
    border: 2px solid var(--surface);
  }
  .sheet::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
  .sheet::-webkit-scrollbar-button { display: none; }
  /* ダイアログを開いている間は、背後のページ（main）をスクロールさせない。PCで
     ダイアログの隣に背後のページのスクロールバーが並んで見えるのも避ける
     （scrollbar-gutter: stableにより、隠しても幅は変わらずレイアウトはずれない）。 */
  body:has(.sheet-overlay.open) main { overflow-y: hidden; }
  @supports not selector(::-webkit-scrollbar) {
    .sheet { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  }
  .sheet-handle {
    width: 36px; height: 4px;
    background: var(--line);
    border-radius: 2px;
    margin: 6px auto 16px;
  }
  .sheet-title { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
  .sheet-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--ink-faint); }
  .sheet-breadcrumb-sep { color: var(--ink-faint); }
  .sheet-breadcrumb-link { background: none; border: 0; padding: 2px 0; font: inherit; color: var(--pine-deep); cursor: pointer; text-align: left; }
  .sheet-breadcrumb-link:hover { text-decoration: underline; }
  .sheet-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .sheet-title-row .sheet-title { flex: 1; min-width: 0; }
  .sheet-btn.sheet-title-action { flex: 0 0 auto; width: auto; padding: 6px 12px; font-size: 12.5px; }
  .sheet-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
  }
  .sheet-row:last-of-type { border-bottom: none; }
  /* ラベルは折り返さず、必要なら値の方だけ折り返す（2026-09-18: 「カテゴリ」→
     「プロジェクト」等、用語統一で長くなったラベルが値と一緒に詰まって
     折り返さないよう固定）。 */
  .sheet-label { color: var(--ink-muted); white-space: nowrap; flex-shrink: 0; margin-right: 8px; }
  .sheet-value { color: var(--ink); font-weight: 500; text-align: right; }
  /* タスク詳細シートの実施日の後ろに付ける「期限切れ」ピル（.delay-pill、バックログ#33-4） */
  .sheet-value .detail-date-pill { display: inline-block; margin-left: 8px; vertical-align: 1px; }
  .sheet-row-tappable { cursor: pointer; }
  .sheet-row-tappable:active { background: var(--surface-sunk); }
  .sheet-row-arrow { color: var(--ink-faint); font-size: 14px; margin-left: 6px; }
  .sheet-detail-block { padding: 12px 0; border-top: 1px solid var(--line); }
  .sheet-detail-block .sheet-label { display: block; font-size: 13.5px; margin-bottom: 6px; }
  .sheet-detail-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
  }
  .sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
  .sheet-btn {
    flex: 1;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
  }
  .sheet-btn.secondary { background: var(--surface-sunk); color: var(--ink-muted); }
  .sheet-btn.sheet-btn-block { display: block; width: 100%; margin-top: 14px; }
  .sheet-btn.primary { background: var(--pine); color: #fff; }
  .sheet-btn.danger { background: var(--brick-soft); color: var(--brick); flex: 0 0 auto; padding: 12px 16px; }
  .sheet-btn.danger-solid { background: var(--brick); color: #fff; }
  #confirmDialogOverlay { z-index: 50; }

/* ============================================================
   PC版レイアウト（画面幅1024px以上）
   ------------------------------------------------------------
   判定は画面幅ベース（デバイス種別ではなく、実際の表示領域の広さで切り替える）。
   ウィンドウを狭めればスマホ版に近い表示に、タブレットを横向きにすれば
   PC版になる、という素直な挙動を意図している。
   ナビゲーションは下部タブバー→左サイドバーに変更する。各タブの中身は、
   「今日タブ」は構造を変えず横幅だけ活かす（体調記録はスマホ入力が主で、
   PCではついでに触る程度、という運用を踏まえた判断）。「予定タブ」は
   PCでの主戦場と位置づけ、カレンダーと選択日カードを左右2カラムにする。
   2026-09-13追加。
   ============================================================ */
/* アプリ版の横画面表示（2026-09-22追加）：ブラウザの表示倍率を90%にした時くらいの
   密度がちょうどいい、というユーザーの指摘を踏まえ、画面全体を90%に縮小する。
   zoomはBlink（Android WebViewも同じエンジン）ではwidth:auto/100%等の割合ベースの
   サイズは実効ビューポート基準で正しく再計算される（余白ができたりはみ出したりしない）
   が、100vh/100dvhのような明示的なビューポート単位は再計算されず実機の生の
   ビューポート寸法のまま扱われる（Chromiumで実機確認済み。zoom適用後の要素を
   実測すると`100vh`はズーム前の値でレンダリングされ、下に隙間ができてしまう）。
   そのため、高さをvh/dvhで指定している箇所（.app・nav.tabbar）はこのクラス配下で
   ズーム倍率の逆数（÷0.9）を掛けて打ち消す必要がある（.progress-col-leftは
   2026-09-23にvh/dvh指定自体を廃止したため対象外）。 */
html.is-app-landscape { --app-zoom: 0.9; zoom: var(--app-zoom); }

/* アプリ版（Capacitor）の横画面表示（2026-09-22追加）：PC版と全く同じ内容を
   html.is-app-landscape（app.js側でorientationを見て付け外し）でも適用する。
   画面幅（1024px以上）とは独立した条件なので、min-width:1024pxのブロックとは別に、
   同じ宣言をこのクラスセレクタでも重複して持たせている（高さのvh/dvhは上記の理由で
   ÷var(--app-zoom)を掛けている）。 */
html.is-app-landscape .app {
  max-width: none;
  flex-direction: row;
  height: calc(100vh / var(--app-zoom));
  height: calc(100dvh / var(--app-zoom));
}
html.is-app-landscape nav.tabbar {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: 96px;
  max-width: 96px;
  flex-shrink: 0;
  height: calc(100vh / var(--app-zoom));
  height: calc(100dvh / var(--app-zoom));
  flex-direction: column;
  border-top: none;
  border-right: 1px solid var(--line);
  padding-bottom: 0;
  order: -1;
}
html.is-app-landscape nav.tabbar button {
  flex: none;
  padding: 22px 0;
}
html.is-app-landscape nav.tabbar button .icon {
  font-size: 20px;
}
/* アプリの横向き（左の縦並び96px）: てりーさん（#48-27）ははみ出させず、縦並びの一番下に置く（1024px以上はPC版の@mediaで隠す） */
html.is-app-landscape nav.tabbar .tabbar-terry {
  flex: none;
  order: 1;
  margin-top: auto;
  height: 78px;
}
/* 縦並びにてりーさんの分（78px）を足すと、横向きの低い画面（高さ約390px）で一番下がはみ出すので、4つのタブの上下の余白を22→18pxに詰める */
@media (max-width: 1023.98px) {
  html.is-app-landscape body[data-view] nav.tabbar button[data-view] {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
html.is-app-landscape body[data-view] nav.tabbar .tabbar-terry-btn {
  top: 0;
  padding-bottom: 12px;
  justify-content: flex-end;
  gap: 4px;
}
html.is-app-landscape body[data-view] nav.tabbar .tabbar-terry-avatar {
  width: 42px;
  height: 42px;
  border-width: 2px;
  box-shadow: 0 3px 10px rgba(36, 91, 101, 0.16);
}
html.is-app-landscape body[data-view] nav.tabbar .tabbar-terry-badge {
  top: 4px;
  left: calc(50% + 11px);
}

@media (min-width: 1024px) {
  .app {
    max-width: none;
    flex-direction: row;
  }

  /* 下部タブバー → 左サイドバー。position:fixedはDOM順序と表示位置が
     独立しているため、HTML側の順序（app-contentの後）はそのままで、
     order:-1により視覚的にだけ左端へ移動させている。 */
  nav.tabbar {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 96px;
    max-width: 96px;
    flex-shrink: 0;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--line);
    padding-bottom: 0;
    order: -1;
  }
  nav.tabbar button {
    flex: none;
    padding: 22px 0;
  }
  nav.tabbar button .icon {
    font-size: 20px;
  }
  /* 下のメニュー中央のてりーさん（#48-27）はスマホ用。PCは左下の.sidebar-terry（#47）が入口 */
  nav.tabbar .tabbar-terry { display: none; }

  /* app-content自体はサイドバー横の残りスペースを端から端まで占有するだけにし、
     中央寄せの責務は持たせない（flexアイテム自身にmax-width+margin:autoで
     中央寄せさせようとすると、widthの指定と絡んでブラウザによって計算が
     不安定になりうるため。2026-09-13修正：以前はここに直接max-width+marginを
     置いていたが、画面幅を広く取った時に中央寄せされず、右側にだけ余白が
     偏って出てしまう不具合があった）。
     中央寄せ自体は、この中の通常のブロック要素（header/main-scroll-wrapper）
     側で行う。 */
  header.app-header,
  .main-scroll-wrapper {
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
  }

  header.app-header {
    padding: 20px 24px 10px;
  }

  /* PC版のみ、前日・翌日ボタンを日付表示のすぐ近くに寄せる（バックログ#6、
     2026-09-17追加）。header.app-headerがmax-width:1800pxまで広がるため、
     .day-nav本体のjustify-content:space-betweenのままだと前日・翌日ボタンが
     画面の両端近くまで離れてしまっていた。Androidアプリ版（Capacitor）では
     この調整を適用しない（html.is-webクラスで絞り込み、app.js参照）。 */
  html.is-web .day-nav {
    justify-content: flex-start;
    gap: 12px;
  }

  main {
    padding: 8px 24px 40px;
  }

  /* 編集/保存FABは、PC版では「実際に見えているコンテンツ幅
     （main-scroll-wrapper、中央寄せ済み）」を基準に位置決めする。
     position:fixedのままだと、ビューポート全体の右端を基準にしてしまい、
     画面が広い時にコンテンツ列から離れた位置に浮いてしまうため。 */
  .main-scroll-wrapper {
    position: relative;
  }
  .edit-save-fab, .edit-cancel-fab {
    position: absolute;
  }

}

/* 名前の左の種別アイコン（プロジェクト・タスク・スケジュール・Todo、2026-09-21）。
   親の文字サイズ(em)に合わせて縮小表示する。行の高さを変えないよう、縦は
   vertical-alignで下げて、文字のベースラインに揃える。 */
.name-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
  vertical-align: -0.24em;
  flex: none;
}
/* 勤怠マスタのアイコン画像（2026-09-23追加）。.name-iconと同じく親のfont-sizeに
   連動するem指定にすることで、ヘッダーの勤怠バッジ・カレンダーセル・ガント軸・
   ドロップダウンの選択肢一覧など、置かれる場所ごとに違うfont-sizeがそのまま
   アイコンサイズにも反映される（置き場所ごとに個別のpx指定をしなくて済む）。
   マージンは置き場所（flexのgapで間隔を取るか等）によって欲しさが違うため、
   ここでは持たせない。 */
.attendance-icon-img {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.24em;
  flex: none;
}

/* ===== ワンタップ実績（G2、2026-09-26）：Todo/スケジュール完了直後に画面下へ出る確認 ===== */
.actual-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  /* 非表示時は8px下から出す（20pxだと出始めに中央のてりーさんの丸へ最大12px重なっていた。#48-27レビュー修正） */
  transform: translate(-50%, 8px);
  width: min(92vw, 420px);
  padding: 12px 14px 14px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(38,43,40,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 45;
}
.actual-prompt.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.actual-prompt-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.actual-prompt-close { border: none; background: none; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 2px 6px; }
.actual-prompt-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actual-prompt-btns button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: 1px solid var(--pine);
  background: var(--pine-soft);
  color: var(--pine-deep);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.actual-prompt-btns button small { font-size: 10.5px; font-weight: 500; color: var(--ink-muted); }
.actual-prompt-btns button:active { background: var(--pine); color: #fff; }
/* 見積もり補正のヒント（追加フォーム内） */
.estimate-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--pine-soft);
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pine-deep);
}
.estimate-hint span { flex: 1; min-width: 0; }
.estimate-hint-btn {
  flex-shrink: 0;
  border: 1px solid var(--pine);
  background: var(--surface);
  color: var(--pine-deep);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .actual-prompt { left: calc(50% + 48px); bottom: 24px; }
}
/* 下のバー中央にてりーさんの丸（#tabbarTerryBtn、バーから約29pxはみ出す）がある時は、丸の上端と8px空くよう上げる（#48-27の後追い）。
   バーの高さはブラウザの横向きで72px（＋丸29px＋隙間8px＝109px）、スマホ縦は全タブ55px（→92px。下のスマホ縦のブロックで縮めている）。
   AIオフ（丸なし）・アプリの横向き（バーが左の縦並び）は元の84pxのまま */
@media (max-width: 1023.98px) {
  html:not(.prefs-no-ai):not(.is-app-landscape) .actual-prompt { bottom: calc(109px + env(safe-area-inset-bottom)); }
}
@media (max-width: 1023.98px) and (orientation: portrait) {
  html:not(.prefs-no-ai):not(.is-app-landscape) body[data-view] .actual-prompt { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---- 「使い方」でてりーさん（AI）をオフにした時に隠すもの（バックログ#40-3-4） ----
   <html>のprefs-no-aiはapplyPreferences()（utils.js）が付け外しする。JSがstyle.displayを直接書く要素
   （#voiceLogOpenBtn・#nagiNoticeBand・#ganttDecomposeBanner）にも勝つよう、!importantを付ける。
   オンに戻すとクラスが外れるだけで、元の表示に戻る（再読み込み不要）。 */
html.prefs-no-ai #nagiHeaderBtn,
html.prefs-no-ai .tabbar-terry,
html.prefs-no-ai #nagiNoticeBand,
html.prefs-no-ai #voiceLogOpenBtn,
html.prefs-no-ai .ai-load-ask,
html.prefs-no-ai .ai-load-ask-note,
html.prefs-no-ai .ai-load-suggest,
html.prefs-no-ai #ganttDecomposeBanner,
html.prefs-no-ai #gaStartProject,
html.prefs-no-ai #gaDecompose,
html.prefs-no-ai .ai-only-text,
/* 設定「連携・データ」のGemini APIキーの行と、PC左下のてりーさん（オフ時は押しても会話できない飾りになるため。#43-11） */
html.prefs-no-ai #masterMenu .master-menu-item[data-master="aiSettings"],
html.prefs-no-ai body[data-view] nav.tabbar .sidebar-terry { display: none !important; }

/* ---- 「使い方」でプロジェクト・タスクをオフにした時に隠すもの（バックログ#40-3-5） ----
   見た目だけ（データ・計算は変えない）。<html>のprefs-no-projectsはapplyPreferences()（utils.js）が付け外しする。
   #ganttAssistBtnは進捗管理の中にあるので本来出ないが、念のため並べる。
   追加・編集シートの「タスク（任意）」は、タスクに紐づいた予定を開いた時（.tm-linked。openScheduleForm()が付け外し）だけ残す。
   設定タブの「予定・タスクに使う項目」は、見出しとメニューの両方に.prefs-projects-onlyを付けてある。 */
html.prefs-no-projects #scheduleModeTabs [data-mode="progress"],
html.prefs-no-projects #scheduleDeadlineCard,
html.prefs-no-projects #ganttAssistBtn,
html.prefs-no-projects #scheduleFormTaskMasterGroup:not(.tm-linked),
html.prefs-no-projects .prefs-projects-only { display: none !important; }

/* ===== PC版のデザイン刷新（バックログ#33-8、2026-10-09） =====
   仕様・基準画像は docs/design-refresh/（README.md・final-reference.png、1680×941）と CODEX.md「全画面共通の外枠」。
   - 全タブ共通の外枠（1024px以上）: 水彩背景（.app）、140pxのサイドバー（ロゴ・1行の項目・選択状態・下のてりーさん）。
     タブを移ってもサイドバー幅・背景・本文の左端が動かないよう、body[data-view]（どのタブでも付いている）で書く。
     （素の nav.tabbar だと html.is-app-landscape nav.tabbar の96pxに詳細度で負けるため、body[data-view]を付けて詳細度をそろえている）
   - 今日タブ限定（body[data-view="today"]）: 60pxのヘッダー（#33-57で132pxから変更）（日付・勤怠・てりーさんの入口）、薄い白のベール。
     本文のカードはtoday.css、右列の予定カードはschedule.css、てりーさんのシートはnagi.css、青緑のトークンはtokens.css（いずれも今日タブ限定）。
   - 他のタブは、本文（ヘッダーを含む.app-content）に今日タブより強い白いベールを重ねて可読性を守る。ヘッダーの高さ・カード・色・操作は変えない。
   1023px以下（スマホ・WebViewの縦画面）は変えない。 */
@media (min-width: 1024px) {
  /* 背景（全タブ共通）: 海・山・朝日・植物の水彩を画面全体に敷く。今日タブは本文の側（.main-scroll-wrapper）だけ薄い白を重ねて、カードを読みやすくする */
  body[data-view] .app {
    background: #E9F7FA url("../assets/today-bg-sea-sunrise.webp") center / cover no-repeat;
  }
  /* 省エネ中は、これまでの「背景が薄いミント」に当たる色を背景の上に重ねて伝える（tokens.cssの--bg-energy-mode） */
  body.energy-mode-active[data-view="today"] .app {
    background:
      linear-gradient(rgba(225, 236, 228, 0.6), rgba(225, 236, 228, 0.6)),
      #E1ECE4 url("../assets/today-bg-sea-sunrise.webp") center / cover no-repeat;
  }
  body[data-view="today"] .main-scroll-wrapper { background: rgba(236, 248, 250, 0.54); }
  /* 他のタブ: ヘッダーと本文をまとめて、今日タブより強い白いベール（従来の背景色--bg #F3F4EEを86%）で覆う。
     ヘッダーは従来不透明の--bgだったので、透明にしてベールを共有させる（高さ・中身は従来のまま） */
  body[data-view]:not([data-view="today"]) .app-content { background: rgba(243, 244, 238, 0.86); }
  body[data-view]:not([data-view="today"]) header.app-header { background: transparent; }

  /* 左のサイドバー（140px、全タブ共通）: 上にロゴ（≋ nagi）、項目はアイコンと文字の1行、下にてりーさん */
  body[data-view] nav.tabbar {
    position: relative;
    width: 140px;
    max-width: 140px;
    padding: 25px 11px;
    gap: 5px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.94), rgba(244, 252, 253, 0.72)),
      url("../assets/today-bg-sea-sunrise.webp") 7% bottom / auto 100% no-repeat;
    border-right: 1px solid rgba(183, 218, 226, 0.6);
  }
  body[data-view] nav.tabbar::before {
    /* ロゴ画像（#47、2026-10-12。#44-4の縦組み100pxは押せる塊に見えたので、横組みフルカラー・高さ28pxにした。
       仕様: docs/design-refresh/sidebar-terry-proposal-review.md「1. ロゴ」）。tidia-logo-horizontal.pngは読み込み画面と共用
       （縦横比860:291なので表示は約83×28px）。140pxのサイドバーの水平中央に置く（Codex実装レビュー後のユーザー判断で、左15pxから変更）。
       ロゴ下から最初のナビ面まで26px（margin 21px＋gap 5px）。
       面・枠・影・hover・cursorは付けない（押せる見た目にしない） */
    content: "";
    display: block;
    flex: none;
    height: 28px;
    margin: 0 0 21px;
    background: url("../assets/tidia-logo-horizontal.png") center / contain no-repeat;
    pointer-events: none;
  }

  /* 左下のてりーさん＝会話の入口（#47、2026-10-12。仕様: BACKLOG #47・docs/design-refresh/sidebar-terry-proposal-review.md「2」「3」）。
     立ち絵と足元の「てりーさんと話す」を1つのbutton（#sidebarTerryBtn）にし、押すとてりーさんの窓を開く（nagi-console.js）。
     未確定の提案がある時だけ、頭の上に小さな吹き出し（#sidebarTerryNotice、動くオーロラ）を出す（ヘッダーの#nagiBadgeの代わり）。
     nav.tabbar の中に置くので、`body[data-view] nav.tabbar button`（サイドバーの項目）の値を、ここで詳細度を上げて打ち消す。
     1023px以下（スマホ・タブレット縦・アプリ横）は.sidebar-terryごと出さない（既定のdisplay:none、下の「てりーさんの入口」） */
  body[data-view] nav.tabbar .sidebar-terry {
    display: block;
    position: absolute;
    left: 11px;
    bottom: 0;
    width: 118px;
    height: 0;
  }
  body[data-view] nav.tabbar .sidebar-terry-btn {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 118px;
    height: auto;
    padding: 0 0 2px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    border: 0;
    border-radius: 16px;
    background: none;
    color: #1F7A8C;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
  }
  /* 立ち絵（terry-normal.webp、512px四方。118px四方に収めると、くまの頭の上端は下から約137px） */
  body[data-view] nav.tabbar .sidebar-terry-figure {
    display: block;
    width: 118px;
    height: 118px;
    background: url("../assets/terry-normal.webp") center bottom / contain no-repeat;
    filter: drop-shadow(0 9px 12px rgba(29, 108, 119, 0.12));
    transition: filter 180ms cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
  }
  /* 足元のラベル（常に表示。立ち絵の足に少し重ねて台座のように見せる） */
  body[data-view] nav.tabbar .sidebar-terry-label {
    position: relative;
    margin-top: -6px;
    padding: 3px 10px;
    border: 1px solid rgba(205, 230, 236, 0.95);
    border-radius: 999px;
    background: #fff;
    color: #1F7A8C;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(31, 102, 124, 0.1);
    pointer-events: none;
  }
  body[data-view] nav.tabbar .sidebar-terry-btn:hover { transform: translateY(-4px); }
  body[data-view] nav.tabbar .sidebar-terry-btn:hover .sidebar-terry-figure { filter: drop-shadow(0 12px 14px rgba(29, 108, 119, 0.2)); }
  body[data-view] nav.tabbar .sidebar-terry-btn:active { transform: translateY(-1px); }
  body[data-view] nav.tabbar .sidebar-terry-btn:focus { outline: none; }
  body[data-view] nav.tabbar .sidebar-terry-btn:focus-visible { outline: 2px solid #2FA3B6; outline-offset: 2px; }
  /* 「使い方」でてりーさん（AI）をオフにした時は、立ち絵だけの飾りに戻す（押せない。applyPreferences()がdisabledを付ける） */
  body[data-view] nav.tabbar .sidebar-terry-btn:disabled { cursor: default; transform: none; }
  body[data-view] nav.tabbar .sidebar-terry-btn:disabled .sidebar-terry-label { visibility: hidden; }
  /* 未確定の提案の小吹き出し。しっぽの先端は画面の下から約148px（てりーさんの頭の約11px上）。
     本体は動くオーロラ（.nagi-suggest-aurora.is-flowing、index.html）。赤い点は付けない。窓を開いている間は隠す */
  body[data-view] nav.tabbar .sidebar-terry-notice {
    position: absolute;
    left: 0;
    bottom: 159px;
    width: 118px;
    height: auto;
    padding: 8px 9px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    border-radius: 12px;
    color: #244A67;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    cursor: pointer;
  }
  /* しっぽ: 下向き・幅16px・高さ11pxの丸みのある短い三角。頭の中央（吹き出しの中央）より少し右へ向ける。
     上端2pxを吹き出しの下の枠に重ねて、枠の切れ目を隠す */
  body[data-view] nav.tabbar .sidebar-terry-notice::after {
    content: "";
    position: absolute;
    left: 58px;
    bottom: -11px;
    width: 16px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 0H16V1.5Q12.6 4.4 10.9 10Q10.3 11.6 9.5 10.2Q6.5 4.6 0 1.5Z' fill='%23EBF8F2'/%3E%3Cpath d='M0 1.5Q6.5 4.6 9.5 10.2Q10.3 11.6 10.9 10Q12.6 4.4 16 1.5' fill='none' stroke='%237FD1C2' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  html.nagi-sheet-open body[data-view] nav.tabbar .sidebar-terry-notice,
  html.prefs-no-ai body[data-view] nav.tabbar .sidebar-terry-notice { display: none !important; }
  /* PCのヘッダーの「てりーさん」ボタン（と印#nagiBadge）は隠して、入口を左下のてりーさんの1つにする（#47）。
     縦が620px以下でサイドバーのてりーさんを出さない時（下の「縦が短い画面」）は、ヘッダーのボタンを入口として残す */
  @media (min-height: 620.02px) {
    body[data-view] #nagiHeaderBtn { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-view] nav.tabbar .sidebar-terry-btn { transition: none; }
    body[data-view] nav.tabbar .sidebar-terry-btn:hover,
    body[data-view] nav.tabbar .sidebar-terry-btn:active { transform: none; }
  }
  body[data-view] nav.tabbar button {
    flex: none;
    height: 48px;
    padding: 0 15px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    border-radius: 14px;
    color: #365F7F;
    font-size: 14px;
    white-space: nowrap;
  }
  body[data-view] nav.tabbar button .icon {
    width: 21px;
    text-align: center;
    font-size: 19px;
  }
  body[data-view] nav.tabbar button.active {
    background: rgba(205, 241, 247, 0.94);
    color: #087B9E;
  }

  /* ヘッダー（60px、#33-57で132pxから他タブと同じ高さへ）: 背景をそのまま見せ、下に細い線。
     日付・前後ボタン・勤怠アイコン・右のボタンは、上から30pxの同じ中心線にそろえる */
  body[data-view="today"] header.app-header {
    height: 60px;
    padding: 10px 24px 10px 22px; /* 上下10px: 40pxの日付操作群（#50）の中心を上から30pxにする。右は他タブと同じ24px（タブを切り替えても「てりーさん」ピルの右端が動かないように） */
    background: none;
    border-bottom: 1px solid rgba(203, 233, 238, 0.52);
  }
  body[data-view="today"] .day-nav {
    align-items: center;
    margin-bottom: 0;
  }

  /* ヘッダー右: 「体調を記録」と、てりーさんの入口（他タブと同じ小さいピル、#33-57） */
  body[data-view="today"] .header-actions {
    gap: 8px;
    align-items: center;
    min-height: 0;
  }
  body[data-view="today"] .today-edit-header-btn {
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.84);
    color: var(--ink);
    box-shadow: 0 5px 15px rgba(55, 120, 139, 0.12);
  }
  body[data-view="today"] .today-edit-header-btn::before { display: none; }
  body[data-view="today"] .nagi-header-btn {
    width: auto;
    height: 32px;
    padding: 3px 12px 3px 3px;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--ink);
    box-shadow: 0 5px 15px rgba(55, 120, 139, 0.12);
  }
  body[data-view="today"] .nagi-header-btn .nav-mascot-icon {
    width: 26px;
    height: 26px;
    border: 0;
    background: #E7F6F4;
  }
  body[data-view="today"] .nagi-header-btn-text {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }
  /* 「に頼む」と›は他タブと同じく出さない（nagi.cssの既定のdisplay:noneのまま） */
}
/* 縦が短い画面では、サイドバー下のてりーさんが項目に重なるので出さない（#47: 入口ごと隠し、ヘッダーの「てりーさん」ボタンを残す。
   窓のしっぽも向ける先が無いので隠す（nagi.css）） */
@media (min-width: 1024px) and (max-height: 620px) {
  body[data-view] nav.tabbar .sidebar-terry { display: none; }
}

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

/* ===== スマホ版「今日」タブの外枠（バックログ#33-8、2026-10-10。仕様: CODEX.md「今日タブのスマホ版デザイン初稿」、
   見本: docs/design-refresh/mobile-today-preview.css） =====
   1023px以下の縦画面の今日タブだけ。PC版のヘッダー・140pxサイドバーは持ち込まず、一行ヘッダーと下部4タブのまま、
   水彩背景・すりガラスのヘッダー/ナビ・青緑の操作色にする（412×915でヘッダー47px・下部ナビ58px、タップ領域54px）。
   他のタブ・PC版・アプリ横画面（横向きなのでorientation:portraitに当たらない）は変えない。カード類はtoday.css。 */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="today"] .app {
    background:
      linear-gradient(rgba(238, 248, 248, 0.32), rgba(242, 249, 247, 0.38)),
      url("../assets/today-bg-sea-sunrise.webp") center top / cover no-repeat,
      #EAF5F4;
  }
  /* 省エネ中は、PC版と同じく従来の「背景が薄いミント」に当たる色を背景の上に重ねて伝える（見本には無い。PC版に合わせて追加） */
  body.energy-mode-active[data-view="today"] .app {
    background:
      linear-gradient(rgba(225, 236, 228, 0.6), rgba(225, 236, 228, 0.6)),
      url("../assets/today-bg-sea-sunrise.webp") center top / cover no-repeat,
      #E1ECE4;
  }
  body[data-view="today"] .app-content,
  body[data-view="today"] .main-scroll-wrapper {
    background: transparent;
  }

  /* ヘッダーは一行のまま。高さを増やさず、素材（すりガラス）と色だけを変える。
     高さは他タブのヘッダー（48px）とそろえる（#33-57。そろえないと1px低い47pxになり、タブ切替で中心線がずれる） */
  body[data-view="today"] header.app-header {
    min-height: 48px;
    padding: 9px 10px 5px;
    background: rgba(247, 251, 249, 0.78);
    border-bottom: 1px solid rgba(204, 224, 227, 0.72);
    box-shadow: 0 2px 12px rgba(42, 105, 119, 0.045);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* 前日／翌日ボタンの見た目は、末尾の#50のブロック（一体型の日付操作群）で指定する */
  /* ヘッダーのてりーさんボタン（.nagi-header-btn）は、スマホでは下のメニュー中央の丸に移したので出さない（#48-27） */

  /* 下端の余白（132px）は「体調を記録」FAB・キャンセルFABの位置（today.css）に合わせたもの */
  body[data-view="today"] main {
    padding-top: 7px;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
    background: rgba(241, 248, 246, 0.24);
  }

  /* 下部ナビ: 少し薄いすりガラスにして縦を返す。4つのタップ領域は54pxを保つ */
  body[data-view="today"] nav.tabbar {
    background: rgba(255, 255, 255, 0.9);
    border-top-color: rgba(204, 224, 227, 0.8);
    box-shadow: 0 -4px 16px rgba(36, 91, 101, 0.055);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* 高さと縦のリズム（ボタン54px＋上枠1px＝55px＋safe area）は全タブ共通（#48-27レビュー修正、2026-10-13）。
     以前は今日タブだけで、他タブは約72pxあり、タブ移動のたびに下端の土台と中央のてりーさんの丸が約17px動いていた。
     背景（すりガラス）・文字色・選択中の面など各タブ固有の表現は、それぞれのタブの指定のまま */
  body[data-view] nav.tabbar button {
    min-height: 54px;
    padding: 8px 0 7px;
    gap: 2px;
    font-size: 11.5px;
  }
  body[data-view] nav.tabbar button .icon {
    font-size: 19px;
  }
  body[data-view="today"] nav.tabbar button {
    color: #819292;
  }
  body[data-view="today"] nav.tabbar button.active {
    color: var(--pine-deep);
  }
  /* 選択中の背景面（#35-8）: .icon自身のpaddingで作ると選択中だけアイコン箱が6px高くなり、ラベルが下がる。
     .iconの寸法は4項目で同じに保ち、背景面は::beforeの絶対配置（46×28px、アイコン中央）で描く */
  body[data-view="today"] nav.tabbar button .icon {
    position: relative;
  }
  body[data-view="today"] nav.tabbar button.active .icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(211, 240, 238, 0.88);
    z-index: 0;
  }
  body[data-view="today"] nav.tabbar button .icon img {
    position: relative;
    z-index: 1;
  }
  /* 中央のてりーさん（#48-27）のラベルも、4つのタブの文字（11.5px・下7px）と同じ縦位置にそろえる（全タブ共通） */
  body[data-view] nav.tabbar .tabbar-terry-btn {
    padding-bottom: 7px;
    color: #819292;
    font-size: 11.5px;
  }
}

/* ===== 今日タブのヘッダーの日付操作群（バックログ#50 案A、2026-10-14。正本: docs/design-refresh/today-header-spec.md） =====
   前日・日付＋勤怠・翌日を40px高の一体面（.day-nav-main）にまとめ、今日以外の時だけの「今日」はその外側・右の小型ピル。
   以前の4列グリッド（勤怠の88px固定列）・勤怠枠の絶対配置・「今日」の日付下への絶対配置は廃止した。
   この節の外側（無指定）がPC・アプリ横の値、下の@media (max-width:1023.98px) and (orientation:portrait)がスマホ縦の値。
   .day-nav-mainは今日タブにしか出ない（他タブは.day-nav-controlsごと隠す）。
   前日／翌日はIDで指定する（.day-nav button:not(…)×4の丸ボタンの指定に詳細度で勝つため）。 */
.day-nav-controls {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body[data-view="today"] .day-nav-main {
  height: 40px;
  box-sizing: border-box;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(190, 216, 217, 0.68);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 4px 14px rgba(42, 105, 119, 0.075);
}
body[data-view="today"] .day-nav-main > #prevDay,
body[data-view="today"] .day-nav-main > #nextDay {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: #476B78;
  font-size: 23px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body[data-view="today"] .day-nav-main > #nextDay {
  border-left: 1px solid rgba(187, 211, 212, 0.58);
  border-radius: 0 12px 12px 0;
}
@media (hover: hover) {
  body[data-view="today"] .day-nav-main > #prevDay:hover,
  body[data-view="today"] .day-nav-main > #nextDay:hover { background: rgba(220, 240, 239, 0.72); }
}
body[data-view="today"] .day-nav-main > #prevDay:active,
body[data-view="today"] .day-nav-main > #nextDay:active { background: rgba(220, 240, 239, 0.72); color: #476B78; }
body[data-view="today"] .day-nav-main > #prevDay:focus-visible,
body[data-view="today"] .day-nav-main > #nextDay:focus-visible {
  outline: 2px solid #267B72;
  outline-offset: 1px;
}
/* 日付＋勤怠（.date-labelは横並びのflex。絶対配置・固定幅・右marginは使わない） */
body[data-view="today"] .day-nav .date-label {
  position: static;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}
body[data-view="today"] .date-only {
  display: flex;
  align-items: center;
  flex: none;
}
body[data-view="today"] .day-nav .date-label .date {
  display: inline-block;
  min-width: 0;
  padding-left: 7px;
  font-size: 17px;
  font-weight: 800;
  line-height: 36px;
  color: var(--ink);
  white-space: nowrap;
  text-align: left;
}
body[data-view="today"] .header-attendance-view {
  height: 32px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin: 0 8px 0 6px;
}
body[data-view="today"] .header-attendance-icon {
  width: 24px;
  height: 24px;
  flex: none;
}
body[data-view="today"] .header-attendance-icon .attendance-icon-img { max-width: 24px; max-height: 24px; }
.header-attendance-name {
  min-width: 0;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #557176;
}
.header-attendance-name[hidden] { display: none; }
body[data-view="today"] .header-attendance-link { font-size: 11px; }
/* 「今日」（今日以外の日だけ。表示の条件はtoday.jsのrenderDateHeader()） */
.today-btn {
  flex: none;
  height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(85, 145, 145, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #356B77;
  box-shadow: 0 3px 10px rgba(39, 103, 119, 0.07);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.today-btn:active { background: rgba(220, 240, 239, 0.72); }
.today-btn:focus-visible { outline: 2px solid #267B72; outline-offset: 2px; }

/* アプリ横（915×412など）: 全タブ共通のヘッダー52pxの中央に40pxの操作群を置く。右の操作と重なる場合に備えて勤怠名だけ96pxまで */
@media (max-width: 1023.98px) and (orientation: landscape) {
  body[data-view="today"] header.app-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .header-attendance-name { max-width: 96px; }
}

/* スマホ縦（375〜412px）: 勤怠名は出さずアイコンだけ。ヘッダーの高さは他タブと同じ48pxのまま（#33-57）、
   上下の余白を詰めて40pxの操作群を中央に置く */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="today"] header.app-header {
    padding-top: 3px;
    padding-bottom: 4px;
  }
  body[data-view="today"] .day-nav-controls {
    width: 100%;
    justify-content: center;
    gap: 6px;
  }
  body[data-view="today"] .day-nav-main { gap: 0; }
  body[data-view="today"] .day-nav .date-label .date {
    padding-left: 4px;
    font-size: 16px;
  }
  body[data-view="today"] .header-attendance-view { margin: 0 3px; }
  body[data-view="today"] .header-attendance-view.is-unset { margin: 0 6px 0 4px; }
  body[data-view="today"] .header-attendance-icon {
    width: 28px;
    height: 28px;
    justify-content: center;
  }
  body[data-view="today"] .header-attendance-icon .attendance-icon-img { max-width: 23px; max-height: 23px; }
  .header-attendance-name { display: none; }
  body[data-view="today"] .header-attendance-link { font-size: 10.5px; }
  .today-btn {
    height: 32px;
    padding: 0 11px;
  }
}
@media (max-width: 380px) and (orientation: portrait) {
  body[data-view="today"] header.app-header {
    padding-left: 6px;
    padding-right: 6px;
  }
  body[data-view="today"] .day-nav-controls { gap: 4px; }
  body[data-view="today"] .day-nav .date-label .date { font-size: 15px; }
  body[data-view="today"] .day-nav-main > #prevDay,
  body[data-view="today"] .day-nav-main > #nextDay { width: 34px; }
  body[data-view="today"] .header-attendance-view.is-unset { margin: 0 3px; }
  body[data-view="today"] .header-attendance-link { font-size: 10px; }
  .today-btn { padding: 0 9px; }
}

/* ===== スマホの押せる範囲を44px以上に（バックログ#43-8、2026-10-15。ペルソナテスト5-E） =====
   見た目の大きさは変えず、透明な::afterを要素の中央に重ねて、押せる範囲だけを44px以上に広げる
   （幅・高さが44px以上ある向きは広げない＝隣の部品と重ならない）。::afterを使っていない部品だけに付ける。
   丸い完了チェック（::before/::afterを見た目に使っている<input>）は、箱を44pxにして負のmarginで占有幅を22pxのまま保つ。
   PC版（1024px以上）は変えない。 */
@media (max-width: 1023.98px) {
  .day-adjust-chip,
  .add-tag-btn,
  .unset-start-btn,
  .rr-segmented button,
  .estimate-hint-btn,
  .gantt-decompose-dismiss,
  .auth-remember-label,
  .include-completed-check,
  body[data-view="today"] .day-nav-main > #prevDay,
  body[data-view="today"] .day-nav-main > #nextDay,
  body[data-view="today"] .today-btn {
    position: relative;
  }
  .day-adjust-chip::after,
  .add-tag-btn::after,
  .unset-start-btn::after,
  .rr-segmented button::after,
  .estimate-hint-btn::after,
  .gantt-decompose-dismiss::after,
  .auth-remember-label::after,
  .include-completed-check::after,
  body[data-view="today"] .today-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* 前日／翌日（36px角）は一体面の外側へだけ広げる（内側へ広げると日付・勤怠の押せる範囲を食う）。
     翌日の右は「今日」ピルまで9px（面の内側の余白3px＋間隔6px）あるので、8px広げても重ならない */
  body[data-view="today"] .day-nav-main > #prevDay::after,
  body[data-view="today"] .day-nav-main > #nextDay::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 44px;
    width: 44px;
    transform: translateY(-50%);
  }
  body[data-view="today"] .day-nav-main > #prevDay::after { right: 0; }
  body[data-view="today"] .day-nav-main > #nextDay::after { left: 0; }
  /* ストレッサー・コーピングの3択（大中小など）は隣どうしが2pxしか離れていないので、透明な範囲では横に広げられない。
     ボタンの最小幅を44pxにする（高さ・文字・色はそのまま。3択の帯が約40px横に伸びる） */
  .rr-segmented button { min-width: 44px; }
  /* 「ほかの調整」のチップが2行に折り返した時（390px以下など）、上下の押せる範囲が重ならないよう行間を16pxに（1行の時は変わらない） */
  .day-adjust-switch { row-gap: 16px; }
  /* かかり具合の確認（.actual-prompt）: 390pxで「ちょっとオーバー」の「ー」だけが次の行へ落ちていた（ペルソナテスト5-I）。
     折り返さず、左右の内側の余白を4px→2pxに（ボタンの幅・高さは変えない） */
  .actual-prompt-btns button {
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
  }
  /* 丸い完了チェック: 32px→44px（見た目の円22pxと、周りのレイアウトの占有幅22pxは同じ） */
  .schedule-item-checkbox,
  .task-check {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: -11px;
  }
}