* { box-sizing: border-box; }
  body {
    font-family: -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
    background: #f5f3ee;
    color: #2a2a2a;
    margin: 0;
    /* padding-bottom は固定フローティングバー分の余白（最下部の要素が隠れないように）。
       --floating-bar-space は app.js の syncFloatingBarPadding() がバーの実高さ + 余白を
       反映する（狭い幅でボタンが折り返して高さが伸びるケースに追従するため）。
       未反映時（JS未実行時）のフォールバックは 100px。 */
    padding: 32px 16px var(--floating-bar-space, 100px) 16px;
    line-height: 1.6;
  }
  .wrap { max-width: 760px; margin: 0 auto; }
  /* ヘッダー薄型帯（ロットE）：body の左右padding(16px)を打ち消して画面幅いっぱいに
     広げつつ、内側で16pxを再確保して .wrap の内容と縁を揃える。フローティングバー
     （z-index:50）より手前、モーダル（z-index:100）より奥に固定表示する。 */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #f5f3ee;
    margin: 0 -16px;
    padding: 4px 16px 6px;
    border-bottom: 1px solid #e0dcd2;
  }
  h1 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: 0.02em; line-height: 1.2; }
  .app-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
  }
  .app-header-info {
    margin-top: 2px;
  }
  /* ヘッダーボタン群（使い方ガイド・スタート画面・イベントの管理・ライセンス）：
     狭い幅ではタイトル行の下に折り返して並ぶ（.app-header-top の flex-wrap による） */
  .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tutorial-launch-btn {
    background: #2980b9;
    color: #fff;
    border: 1px solid #1f6391;
    border-radius: 4px;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  .tutorial-launch-btn:hover { background: #1f6391; }
  .tutorial-launch-btn:disabled { background: #ddd; border-color: #ccc; color: #999; cursor: wait; }
  @media (max-width: 620px) {
    .header-actions {
      gap: 6px;
    }
    .tutorial-launch-btn {
      font-size: 12px;
      padding: 4px 10px;
    }
  }
  /* 印刷時はガイド・イベント管理ボタンを隠す */
  @media print {
    .header-actions { display: none !important; }
  }
  /* 現在のイベント名の常時表示欄：長い名前は末尾「…」で省略。
     全体の枠の常時表示（.frame-time-display）と同じ帯に並べるため inline-block。 */
  .current-event-display {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: #555;
    margin: 0 12px 4px 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .current-event-display .current-event-label {
    font-weight: 600;
    margin-right: 4px;
  }
  /* 印刷時は隠す（印刷ヘッダの printEventName が別途表示されるため） */
  @media print {
    .current-event-display { display: none !important; }
  }
  /* 全体の枠の常時表示：現在のイベント表示の隣に並ぶ控えめなボタン。
     中身のテキストは app.js が更新（例：⏰ 8:00〜17:00（占有 9:00〜16:00））。
     is-warning は .input-warning と同じ配色（#fdecea）で警告状態を示す。 */
  .frame-time-display {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px 0;
    padding: 3px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #555;
    background: #f5f3ee;
    border: 1px solid #e0dcd2;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .frame-time-display:hover { background: #efeae0; }
  .frame-time-display.is-warning {
    color: #c0392b;
    background: #fdecea;
    border-color: #f3c6c0;
  }
  .frame-time-display.is-warning:hover { border-color: #c0392b; }
  @media print {
    .frame-time-display { display: none !important; }
  }
  /* 印刷時は固定帯を解除（負マージンを残すと .wrap の padding:0 と合わさって
     運営用印刷の見出しが用紙外へ16pxずれるため必ずリセット） */
  @media print {
    .app-header {
      position: static !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: auto;
      border: none;
      background: transparent;
    }
  }
  /* 使い方ガイドの選択メニュー（5つのガイドから選ぶモーダル） */
  .tutorial-menu-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    padding: 16px;
  }
  .tutorial-menu-overlay.is-open { display: flex; }
  .tutorial-menu {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }
  .tutorial-menu-header {
    background: #efeae0;
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #e0dcd2;
  }
  .tutorial-menu-title { font-weight: 700; font-size: 15px; color: #555; }
  .tutorial-menu-close {
    background: transparent; border: none; font-size: 22px;
    cursor: pointer; color: #999; line-height: 1; padding: 0 6px;
  }
  .tutorial-menu-close:hover { color: #333; }
  .tutorial-menu-body { padding: 16px; overflow-y: auto; }
  .tutorial-menu-lead { margin: 0 0 12px; color: #666; font-size: 13px; }
  .tutorial-menu-list { display: flex; flex-direction: column; gap: 8px; }
  .tutorial-menu-item {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #e0dcd2;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
  }
  .tutorial-menu-item:hover {
    background: #f7f3eb;
    border-color: #c9c2b4;
  }
  .tutorial-menu-item.is-disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
  }
  .tutorial-menu-item.is-disabled:hover {
    background: #f5f5f5;
    border-color: #e0dcd2;
  }
  .tutorial-menu-item-label {
    font-weight: 600; font-size: 14px; color: #333;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .tutorial-menu-item.is-disabled .tutorial-menu-item-label { color: #999; }
  .tutorial-menu-item-desc {
    font-size: 12px; color: #777;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .tutorial-menu-item.is-disabled .tutorial-menu-item-desc { color: #aaa; }
  /* ガイドツアーの吹き出し（driver.js が body 直下に動的生成する要素）の読みやすさ改善。
     driver.css は index.html 内で style.css より後に読み込まれるため、
     同じ詳細度のプロパティは !important で明示的に上書きする。 */
  .driver-popover {
    max-width: min(380px, calc(100vw - 32px)) !important;
  }
  .driver-popover-title {
    text-wrap: balance;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .driver-popover-description {
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .driver-popover-description li + li { margin-top: 4px; }
  /* ガイドツアー中もページ全体を自由に操作できるようにする（社長方針：幕は暗くする演出のみで、クリックを奪わない）。
     driver.css の `.driver-active .driver-overlay, .driver-active *{pointer-events:none}` を打ち消す。
     driver.css が style.css より後に読み込まれ、詳細度も同じため、読み込み順に関係なく確実に上書きするには !important が必須。 */
  .driver-active * {
    pointer-events: auto !important;
  }
  /* 幕（svg.driver-overlay）自体は操作不能のままにし、クリックを下の要素へ素通しさせる。
     driver.js がオーバーレイへ直接クリック判定を付けて「枠外クリックでツアー終了」を発生させるため、
     それより確実に優先させる必要があり !important が必須。
     さらに driver.js は svg 内の path 要素に JS でインライン pointer-events:auto を無条件付与するため、
     svg 自体だけでなく子要素の path も明示的に無効化する。 */
  .driver-overlay,
  .driver-overlay path {
    pointer-events: none !important;
  }
  /* ロットE実測で発覚：driver.css は `:not(body):has(>.driver-active-element){overflow:hidden!important}`
     で「ハイライト対象の直接の親」に overflow:hidden を強制する。.panel-chart など .wrap 直下の要素を
     ハイライトすると、その親 .wrap が overflow:hidden になり、同じ .wrap の子である .app-header の
     position:sticky の基準（最も近いスクロール祖先）が window から .wrap 自身に変わってしまい、
     ヘッダーが画面外へ流れて消える（sticky が効かなくなる）。.wrap は本来スクロールしない要素なので、
     ツアー中だけ overflow を明示的に visible へ戻して打ち消す。 */
  body.driver-active .wrap {
    overflow: visible !important;
  }
  /* ガイド①：一括生成の確認ダイアログで「はい」を選ぶよう案内している間、
     実際のボタンがどれか一目でわかるようパルス表示で光らせる。
     ガイド実行中（tutorial.js から）だけ付与し、ダイアログが閉じたら外す。 */
  @keyframes tutorialPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.55); }
    50% { box-shadow: 0 0 0 8px rgba(41, 128, 185, 0); }
  }
  .tutorial-highlight-pulse {
    animation: tutorialPulseGlow 1.2s ease-in-out infinite;
    outline: 2px solid #2980b9;
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .tutorial-highlight-pulse { animation: none; }
  }
  /* タイトル下のサブテキスト（「タイムテーブル計算ツール」）。ロットEで固定帯（.app-header）の
     外の独立した <p> に分離。帯は固定表示だがこのタグラインは非固定で、スクロールすると帯の裏に隠れる */
  .app-tagline {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #888;
    margin: 4px 0 16px;
    letter-spacing: 0.05em;
  }
  .subtitle { color: #888; font-size: 13px; margin-bottom: 24px; }

  .panel {
    background: #fff;
    border: 1px solid #e0dcd2;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .panel-header {
    background: #efeae0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e0dcd2;
  }
  .panel-body { padding: 16px; }

  /* イベント切り替えバー（イベント管理 panel 内に配置） */
  .event-bar {
    display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
  }
  .event-bar .event-label {
    font-size: 13px; color: #555; font-weight: 600;
    margin-right: 4px;
  }
  .event-bar select {
    padding: 5px 8px; font-size: 13px;
    font-family: inherit;
    background: #fff;
    border: 1px solid #c8c2b3; border-radius: 3px;
    min-width: 200px;
  }
  .event-bar .event-btn {
    padding: 5px 10px; font-size: 12px;
    background: #fff;
    border: 1px solid #d0c8b0; border-radius: 3px;
    color: #555; cursor: pointer;
    font-family: inherit;
  }
  .event-bar .event-btn:hover { background: #f0ece0; }
  .event-bar .event-btn.danger { color: #c43a3a; border-color: #d8a0a0; }
  .event-bar .event-btn.danger:hover { background: #fdecea; }

  /* イベント管理 panel 内：event-bar と JSON 保存/読込の間の仕切り線 */
  .event-storage-divider {
    border-top: 1px solid #f0ece2;
    margin: 12px 0;
  }
  .event-storage-hint {
    font-size: 13px;
    color: #555;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .event-storage-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .event-storage-note {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #888;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  /* 全体の枠モーダル */
  .time-frame { display: grid; gap: 10px; }
  .time-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .time-row label { width: 110px; font-size: 14px; color: #555; }
  .time-row input[type="time"] {
    font-size: 16px; padding: 6px 10px;
    border: 1px solid #c8c2b3; border-radius: 4px;
    font-family: inherit;
  }
  .time-row .hint { color: #888; font-size: 12px; }
  .time-row.is-occupy label { color: #2a2a2a; font-weight: 500; }
  .frame-summary-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid #f0ece2;
  }
  .ts-label {
    font-size: 12px; color: #888; letter-spacing: 0.05em; margin-bottom: 2px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .ts-value { font-size: 18px; font-weight: 600; font-family: "SF Mono", Menlo, monospace; }

  /* 進行リスト */
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #f0ece2; }
  th { color: #888; font-weight: 500; font-size: 12px; letter-spacing: 0.05em; }
  tr.row-class { background: #fff; }
  tr.row-interval { background: #fafaf5; color: #888; }
  tr.row-break { background: #fff8e8; }
  tr.row-class td:nth-child(2) { font-weight: 500; }
  tr.row-section td {
    background: #f5f3ee; color: #888;
    font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
    padding: 6px 12px;
    border-bottom: 1px solid #e0dcd2;
    border-top: 1px solid #e0dcd2;
  }
  tr.row-section td span.section-tag {
    margin-left: 8px; color: #b8915a; font-size: 12px; font-weight: 500;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  tr.row-free { background: #fcf9f3; }
  tr.row-free td:nth-child(2) { font-style: italic; color: #6b5836; }
  tr.row-event { background: #fcf9f3; }
  .duration { color: #888; font-size: 13px; }
  .time-cell { font-family: "SF Mono", Menlo, monospace; color: #555; white-space: nowrap; }
  /* 項目名セル（クラス名＋詳細）：通常は「<クラス名> <詳細>」の間（spanの境目＝スペース）
     でしか改行させたくない（wq7指摘）。デスクトップ幅は横に十分余裕があるため nowrap のみ
     （1行表示）で問題ない。 */
  .list-name-class,
  .list-name-detail { white-space: nowrap; }
  /* 狭幅（767px以下）だけ緊急脱出を用意する。クラス名は自由入力で文字数制限が無いため、
     nowrap のままだと20文字級のスペース無し名前が .panel の overflow:hidden で
     見切れて消えてしまう（wq9致命2）。
     ・word-break: keep-all … 日本語はスペースが無くても文字間で改行できてしまうため抑止し、
       「混走2」「予選」等の単語内で1〜2文字だけ孤立する崩れを防ぐ
     ・overflow-wrap: break-word … word-break: keep-all と違い、テーブルの自動幅計算に使う
       最小コンテンツ幅を縮めない（overflow-wrap: anywhere だと最小幅が1文字まで縮み、
       「スプリント混走2」のような短い名前まで不要に途中で折り返されてしまうため使わない）
     ・display: inline-block + max-width: 8em … white-space を normal に戻すだけだと
       auto-layout テーブルが「1行に収める前提の幅」を要求してテーブルごと横に膨張し、
       隣の「時間」列が枠外へ押し出されて見えなくなる。8em（実測で「スプリント混走2」が
       1行に収まる最小限より少し広い値）に上限を切ることで、テーブル幅は膨張させず、
       上限を超えた極端に長い名前だけ span 内でさらに折り返す。 */
  @media (max-width: 767px) {
    .list-name-class,
    .list-name-detail {
      display: inline-block;
      max-width: 8em;
      vertical-align: top;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: break-word;
    }

    td.duration { white-space: nowrap; }
  }

  .empty-row td {
    text-align: center; color: #aaa; font-style: italic;
    padding: 16px;
  }

  .add-btn {
    background: #fff; border: 1px dashed #b8b0a0; color: #555;
    padding: 8px 14px; border-radius: 4px; cursor: pointer;
    font-size: 13px; font-family: inherit;
  }
  .add-btn:hover { background: #efeae0; border-style: solid; }
  .add-btn:disabled { opacity: 0.4; cursor: default; }
  .add-btn:disabled:hover { background: #fff; border-style: dashed; }

  /* タイムチャート下の画面表示切替トグル群（印刷とは独立・画面確認用） */
  .chart-display-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #d8d0bc;
  }
  .chart-display-toggles-label {
    font-size: 12px;
    color: #888;
    margin-right: 2px;
  }
  .chart-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #d8d0bc;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
  }
  .chart-toggle-chip input { margin: 0; }
  .chart-toggle-chip span {
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .chart-toggle-chip:hover {
    border-color: #b8ac88;
  }
  .chart-toggle-chip:has(input:checked) {
    background: #f0ece0;
    border-color: #b8ac88;
    color: #3a3020;
  }
  .chart-toggle-chip:has(input:checked):hover {
    border-color: #b09b6a;
  }

  /* 画面下端の固定フローティングバー：追加ボタン＋バッファ表示。
     編集中の現在地に関係なく、常に追加とバッファ確認ができるよう常時表示。
     body 側の padding-bottom（--floating-bar-space）にこのバーの実高さを反映して
     最下部要素が隠れないようにしている（app.js の syncFloatingBarPadding()）。 */
  .floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #d0c8b8;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 10px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    z-index: 50;
  }
  /* バー内の案内文：空状態の案内／超過警告。既定は非表示、状態クラスが付いた時だけ
     バーの1行目として全幅表示する（.floating-bar の flex-wrap: wrap を利用）。 */
  .fb-note {
    display: none;
  }
  .fb-note.is-empty,
  .fb-note.is-over {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    font-size: 12px;
    line-height: 1.6;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  @supports (word-break: auto-phrase) {
    .fb-note.is-empty,
    .fb-note.is-over {
      word-break: auto-phrase;
    }
  }
  .fb-note.is-empty { color: #6b6b6b; }
  .fb-note.is-over { color: #c43a3a; }
  .fb-context {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #f5f0e0;
    border: 1px solid #d8cfae;
    border-radius: 4px;
    font-size: 12px;
    color: #5a4f30;
    font-weight: 500;
    flex: 0 0 auto;
    transition: background 0.15s;
  }
  .fb-context-icon { font-size: 13px; line-height: 1; }
  .fb-info {
    display: flex;
    gap: 16px;
    align-items: center;
    flex: 0 0 auto;
  }
  .fb-info-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .fb-info-label {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.05em;
  }
  .fb-info-value {
    font-size: 16px;
    font-weight: 600;
    font-family: "SF Mono", Menlo, monospace;
  }
  .fb-divider {
    width: 1px;
    background: #ddd;
    align-self: stretch;
  }
  .fb-buttons {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: wrap;
  }
  /* フローティングバー右端の右寄せグループ（戻す／やり直す＋運営用/配布用印刷）。
     flex: 0 0 auto で固有幅を取り、左の .fb-buttons (flex: 1) が膨らむことで
     自動的に右端に押し出される。戻す／やり直すは .fb-buttons の横スクロール行
     （480px以下）には巻き込まれない、この行の中に同居させる。 */
  .fb-print {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .fb-print-divider {
    width: 1px;
    align-self: stretch;
    background: #ddd;
  }
  .floating-bar .fb-print-btn {
    background: #f5f0e0;
    border-color: #c8b988;
    color: #5a4f30;
    font-weight: 600;
  }
  .floating-bar .fb-print-btn:hover {
    background: #ebe0c0;
    border-color: #b09b6a;
  }
  .floating-bar .add-btn {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* 戻す／やり直すは印刷ボタンと同じ行に収めるため、左右パディングを少し詰める
     （1280px幅で右寄せグループが3段目に押し出されるのを防ぐための調整）。 */
  .floating-bar #undoBtn,
  .floating-bar #redoBtn {
    padding: 6px 6px;
  }

  @media print {
    .floating-bar { display: none !important; }
  }

  /* フローティングバーの狭幅（390px想定）向け圧縮：
     ボタンの文言・id・DOM構造は変えず、パディング・間隔を詰めつつ
     .fb-buttons を横スクロール1行にまとめてバーの占有高さを抑える。 */
  @media (max-width: 480px) {
    .floating-bar {
      padding: 8px 10px;
      gap: 6px;
    }
    .fb-context {
      padding: 4px 8px;
    }
    .fb-info {
      gap: 10px;
    }
    .fb-info-item {
      gap: 4px;
    }
    .fb-info-value {
      font-size: 14px;
    }
    .fb-buttons {
      flex: 1 1 100%;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      gap: 6px;
    }
    .fb-buttons .add-btn {
      flex: 0 0 auto;
    }
    .floating-bar .add-btn {
      padding: 6px 8px;
    }
    .fb-print {
      flex: 1 1 100%;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }

  /* タイムチャート項目クリック選択の操作バー：既存フローティングバー（.floating-bar）の
     DOM・高さ計算（--floating-bar-space / ResizeObserver）には触らず、独立した fixed 要素
     として、そのバーの実高さ分（--floating-bar-space が反映済み）の直上に重ねて表示する。 */
  .chart-select-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--floating-bar-space, 100px);
    z-index: 49;
    background: #fff;
    border-top: 1px solid #b8d0e0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 8px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .chart-select-bar.show { display: flex; }
  .csb-label {
    font-size: 13px;
    color: #2a2a2a;
    min-width: 0;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .csb-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
  }
  .csb-btn {
    min-height: 44px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #c5c0b0;
    background: #fff;
    color: #2a2a2a;
    cursor: pointer;
  }
  .csb-btn-edit {
    background: #2980b9;
    border-color: #1f6391;
    color: #fff;
  }
  .csb-btn-edit:hover { background: #1f6391; }
  .csb-btn-delete {
    background: #c0392b;
    border-color: #a93226;
    color: #fff;
  }
  .csb-btn-delete:hover { background: #a93226; }
  .csb-btn-close {
    min-width: 44px;
    padding: 6px 10px;
  }
  .csb-btn-close:hover { background: #f0ebe0; }

  @media (max-width: 480px) {
    .chart-select-bar {
      padding: 8px 10px;
      gap: 6px;
    }
    .csb-label {
      flex: 1 1 100%;
      font-size: 12px;
    }
    .csb-actions {
      flex: 1 1 100%;
      justify-content: flex-end;
    }
  }

  /* バッファ色（フローティングバー共用） */
  .buffer-positive { color: #2d7a3f; }
  .buffer-positive::before { content: "+"; }
  .buffer-negative { color: #c43a3a; }
  .buffer-negative::before { content: "-"; }

  /* タイムチャート */
  .gantt-wrap {
    border: 1px solid #e0dcd2; border-radius: 4px;
    overflow: hidden; background: #fff;
    padding-bottom: 14px;
  }
  .gantt-headers {
    display: flex; background: #efeae0;
    border-bottom: 1px solid #e0dcd2;
  }
  .gantt-time-spacer { width: 80px; flex-shrink: 0; }
  .gantt-class-header,
  .gantt-event-header {
    flex: 1; padding: 8px 4px; text-align: center;
    font-weight: 600; font-size: 13px;
    border-left: 1px solid #e0dcd2;
    container-type: inline-size;
    overflow: hidden;
  }
  /* 列見出しの自動縮小：セル幅（cqi=コンテナクエリ単位）に応じて12〜13pxで自動フィットし、
     クラス数が多く列が狭い時の語中折り返し（例:「エキスパー／ト」）を防ぐ。
     --hdr-len はJS側（app.js renderChart）が表示名の実効文字数（全角=1・半角=0.55）を
     CSS変数として渡す。文字数はレイアウト値ではないため、配布用印刷（html2canvas による
     画面DOMのクローンを幅794px固定で描画）でも同じ変数から再計算され安全。
     cqi非対応ブラウザは既定の13px・折返しのまま（現状維持のフォールバック）。 */
  @supports (font-size: 1cqi) {
    .gantt-class-header .gantt-header-label,
    .gantt-event-header .gantt-header-label {
      font-size: clamp(12px, calc(100cqi / var(--hdr-len, 6)), 13px);
    }
  }
  /* あふれ防止（ロットI）：cqi縮小が12px下限に達してもなお収まらない半角連続語
     （例:「Under200Special」）は、日本語のような自然な折り返し位置を持たないため、
     隣列へ食い込む恐れがある。overflow-wrap: anywhere で収まらない時だけ語中で
     折り返し、親セル側の overflow: hidden で物理的に食い込みを止める。
     日本語見出しは元々折り返せるため見た目に変化はなく、全文表示のまま。
     画面・印刷（運営用window.print・配布用html2canvasとも）ともに同じ折り返し表示。 */
  .gantt-class-header .gantt-header-label,
  .gantt-event-header .gantt-header-label {
    overflow-wrap: anywhere;
  }
  .gantt-body { position: relative; display: flex; }
  .gantt-time-col {
    width: 80px; flex-shrink: 0; position: relative;
    background: #fafaf5; border-right: 1px solid #e0dcd2;
  }
  .gantt-time-label {
    position: absolute; right: 6px;
    font-size: 10px; color: #888;
    font-family: "SF Mono", Menlo, monospace;
    transform: translateY(-50%);
    text-align: right; line-height: 1.1;
  }
  .gantt-time-label .tag {
    display: block;
    font-family: -apple-system, "Hiragino Sans", sans-serif;
    font-size: 9px; color: #b8915a; font-weight: 600;
    margin-bottom: 1px;
  }
  /* overflow を付けないこと（ロットK）：全幅帯（.gantt-break/.gantt-free）は
     inline style の負の right でこのイベント列まではみ出させて実現しており、
     overflow: hidden にすると帯が切れる。 */
  .gantt-class-cols { flex: 1; display: flex; position: relative; }
  .gantt-class-col {
    flex: 1; position: relative;
    border-left: 1px solid #f0ece2;
  }
  .gantt-class-col:first-child { border-left: none; }
  /* イベント列（ロットI）：.gantt-class-cols の兄弟要素（.gantt-body 直下）。
     クラス列コンテナが flex:1 のため、同じ flex 配分・同じ左境界線にして
     クラス列と横並びで釣り合う1列分の見た目にする（既存の .gantt-class-col と同等）。 */
  .gantt-event-col {
    flex: 1; position: relative;
    border-left: 1px solid #f0ece2;
  }
  .gantt-non-occupy {
    position: absolute; left: 0; right: 0;
    background: repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.0), rgba(0,0,0,0.0) 6px,
      rgba(0,0,0,0.05) 6px, rgba(0,0,0,0.05) 12px
    );
    pointer-events: none; z-index: 1;
  }
  .gantt-hour-line {
    position: absolute; left: 0; right: 0;
    border-top: 1px solid #f0ece2;
    pointer-events: none;
  }
  .gantt-occupy-line {
    position: absolute; left: 0; right: 0;
    border-top: 1.5px dashed #b89060;
    pointer-events: none; z-index: 2;
  }
  .gantt-block {
    position: absolute; left: 3px; right: 3px;
    border-radius: 3px; padding: 0 4px;
    font-size: 10px;
    white-space: nowrap; line-height: 1; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    /* overflow: hidden は付けない（バッジを枠の上に飛び出すため）。
       ラベル長すぎ対策は .gantt-block-label 側で text-overflow: ellipsis を指定。 */
    /* 既定（A〜L 以外のクラス用フォールバック）*/
    background: #e8e2d2; border: 1px solid #b8b0a0; color: #555;
  }
  /* イベント項目の帯（ロットI）：.gantt-block に併記。バッジを伴わないため、
     自由項目の帯（.gantt-free）と同様にここで overflow: hidden にして文字あふれを防ぐ。 */
  .gantt-event-block {
    overflow: hidden;
    cursor: pointer;
  }
  /* クリックで選択・編集できる帯だと分かるホバー枠（.gantt-free:hover と同じトーン）。
     ドラッグ不可のため cursor は grab にしない。 */
  .gantt-event-block:hover {
    box-shadow: 0 0 0 1.5px #6f9e62;
  }
  /* ロットK：全幅の項目をイベント列まで伸ばしている時だけ、イベント列の帯を
     目印・時刻ラベルと同じ最前列（5）に上げる。🔒時刻固定の休憩は z-index:4
     （走行帯に隠れないための既存意図）を保つため、下げるのではなく上げる。
     クラス列側の重なり順は不変。伸ばしている項目が1つも無ければこのルールは
     効かない＝従来の描画と完全に同じ。 */
  .gantt-body.has-span-band .gantt-event-col .gantt-block { z-index: 5; }
  .gantt-block-label {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  /* 2行レイアウト（ブロック高さに余裕がある時のみ）：上＝クラス表示名、下＝詳細 */
  .gantt-block-label.two-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    gap: 1px;
    max-width: 100%;
  }
  .gantt-block-label .block-class-name {
    font-size: 8px;
    font-weight: 400;
    opacity: 0.75;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gantt-block-label .block-detail {
    font-size: 10px;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* タイムチャートのブロック内バッジ（予選兼用 / 混走 / 合同）。
     ブロックの枠の上、右側に飛び出して表示（時刻ラベルの反対側）。 */
  .gantt-block-badges {
    position: absolute;
    top: -13px;
    right: 0;
    display: flex;
    gap: 2px;
    z-index: 5;
    pointer-events: none;
  }
  .gantt-block-badge {
    font-size: 8px;
    font-weight: 600;
    padding: 0 3px;
    border-radius: 2px;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  /* 直上のブロックと隙間なく接している場合は、バッジを枠の内側（右上）に表示して重なりを防ぐ */
  .gantt-block.badges-inside .gantt-block-badges {
    top: 1px;
    right: 2px;
  }
  /* 内側にも収めきれない場合の最終フォールバック：ブロックの下側（インターバル等の
     空きスペース側）に表示する。バッジは非表示にしない＝必ずどこかに表示する。 */
  .gantt-block.badges-below .gantt-block-badges {
    top: auto;
    bottom: -13px;
    right: 0;
  }
  /* 下側でもなお他の文字と重なると実測された場合は、さらに下へ逃がす */
  .gantt-block.badges-below-far .gantt-block-badges {
    bottom: -26px;
  }
  /* below-far に落ちた隣接列同士がなお接触する場合は、道連れにせず片方だけを
     もう一段下げて段違いにし、どの列のバッジか判別できるようにする
     （badges-below-far の下端＝-26px からバッジの高さ14px＋最低間隔2px以上を
     確保できるよう、余裕を持って-44pxまで下げる）。 */
  .gantt-block.badges-below-far2 .gantt-block-badges {
    bottom: -44px;
  }
  .gantt-block-badge.qualify  { background: #fbf2e0; color: #8a6c2a; border-color: #d4b87f; }
  .gantt-block-badge.parallel { background: #e6f0fa; color: #2d5475; border-color: #95b8d4; }
  .gantt-block-badge.multi    { background: #f0e8f5; color: #4d316b; border-color: #a888c4; }
  .gantt-block.A { background: #d5e7f4; border: 1px solid #95b8d4; color: #2d5475; }
  .gantt-block.B { background: #d8ecd3; border: 1px solid #8eb87e; color: #355e2a; }
  .gantt-block.C { background: #f7e0c5; border: 1px solid #d4a878; color: #6b4222; }
  .gantt-block.D { background: #e2d2ea; border: 1px solid #a888c4; color: #4d316b; }
  .gantt-block.E { background: #f5d5e0; border: 1px solid #d495a8; color: #6b2244; }
  .gantt-block.F { background: #cfe5e3; border: 1px solid #88b5b0; color: #285550; }
  .gantt-block.G { background: #f4eaca; border: 1px solid #c4ad77; color: #6b5524; }
  .gantt-block.H { background: #d5dbf0; border: 1px solid #8a96c0; color: #2a3870; }
  .gantt-block.I { background: #e3d6c6; border: 1px solid #b09a82; color: #5a4630; }
  .gantt-block.J { background: #d2e8d6; border: 1px solid #7eb088; color: #2d5836; }
  .gantt-block.K { background: #f0d6cc; border: 1px solid #c89483; color: #6b3a2a; }
  .gantt-block.L { background: #d8ddd2; border: 1px solid #95a085; color: #4a523c; }
  /* 複数クラスにまたがる合同走行ブロック（item.classKeys.length > 1） */
  .gantt-block.multi-class {
    z-index: 4;
    border-width: 2px !important;
    border-style: dashed !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  /* クラスブロックの上に出す開始時刻ラベル「HH:MM -」 */
  .gantt-block-time {
    position: absolute;
    left: 0;
    font-size: 9px;
    line-height: 1.2;
    color: #555;
    font-family: "SF Mono", Menlo, monospace;
    white-space: nowrap;
    pointer-events: none;
    padding: 0 3px;
    z-index: 5;
  }
  /* 枠のすぐ下・右寄せに出す終了時刻ラベル「- HH:MM」（ロットM：開始ラベル
     .gantt-block-time と上下対称の兄弟div方式に変更。子span＋枠内表示では帯系の
     overflow:hidden で外に出せないため）。色は開始ラベルと同値の#555に統一
     （枠外に出るため、枠の色を引き継ぐ inherit はやめる）。隙間が足りない時は
     そのまま重ねて出す（社長回答A＝開始ラベルが直上の枠に重なる既存作法と対称。
     自己クリップの max-width/overflow は枠外なので不要＝撤去）。 */
  .gantt-block-time-end {
    position: absolute;
    right: 0;
    text-align: right;
    font-size: 9px;
    line-height: 1.2;
    color: #555;
    font-family: "SF Mono", Menlo, monospace;
    white-space: nowrap;
    pointer-events: none;
    padding: 0 3px;
    z-index: 5;
  }
  /* インターバル名の目印優先（致命2・社長回答A・2026-08-18）：終了時刻ラベルが
     重なる場所だけ「インターバル」の文字を隠す（枠自体は下の細破線のまま残る＝
     インターバルは形で識別可能。名前を丸ごと消したい場合は既存の「インターバル」
     表示チップで対応できるため、文字だけ隠す対応で問題ない）。covered な
     インターバルは app.js が end-covered クラスを付与する（判定は静的材料のみ）。
     display:none でなくvisibility:hiddenにする（レイアウト・実測フォールバック
     パスへの影響ゼロ＝.gantt-block-labelのoffsetWidth/Heightは変わらない）。
     名前を隠すのは「終了ラベルが見えている経路」だけ（OFF時は必ず見える＝
     回帰の絶対条件。ロットLのpaddingゲートと同じ2ルール構成）。 */
  body:not(.screen-hide-chart-block-time-end):not(.print-distribute) .gantt-block.is-interval.end-covered .gantt-block-label {
    visibility: hidden;
  }
  body.print-distribute:not(.print-hide-chart-block-time-end) .gantt-block.is-interval.end-covered .gantt-block-label {
    visibility: hidden;
  }
  /* インターバルブロック（kind: 'interval'）: 細め・薄め */
  .gantt-block.is-interval {
    background: rgba(255,255,255,0.7) !important;
    border: 1px dashed rgba(0,0,0,0.25) !important;
    color: #888 !important;
    font-size: 9px;
    opacity: 0.85;
    /* 見た目の細さは変えず、他ブロックより手前に出ないよう z-index を下げておく
       （::before の当たり判定拡張が隣接の走行ブロックの領域に重なっても、
       走行ブロック側のクリックを奪わないようにするため） */
    z-index: 1;
  }
  .gantt-block.is-interval:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.45) !important;
  }
  /* クリックしづらい問題への対処：見た目はそのまま、当たり判定だけ上下に拡張する。
     擬似要素は要素本体のヒット判定に含まれるため、透明な::beforeを上下に
     はみ出させることでクリック・右クリック・ドラッグの起点を広げる。
     隣接ブロックの領域を奪いすぎないよう拡張は上下5pxまでに留める。 */
  .gantt-block.is-interval::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    bottom: -5px;
  }

  /* ====== 編集画面のタイムチャート表示/非表示トグル（画面表示のみ） ======
     印刷／PDF出力には一切影響しない。出力直前に app.js の
     removeAllScreenDisplayClasses() が body から必ず外し、出力後に
     applyScreenDisplayOptionsToBody() で復元する（クラス名も print-hide-chart-*
     とは別名にしてあるので、印刷用CSS・@media print と衝突しない）。 */
  body.screen-hide-chart-intervals .gantt-block.is-interval {
    display: none !important;
  }
  body.screen-hide-chart-block-name .gantt-block-label { display: none !important; }
  body.screen-hide-chart-class-name .block-class-name { display: none !important; }
  body.screen-hide-chart-detail .block-detail { display: none !important; }
  body.screen-hide-chart-block-time .gantt-block-time { display: none !important; }
  body.screen-hide-chart-block-time-end .gantt-block-time-end { display: none !important; }
  body.screen-hide-chart-badges .gantt-block-badges { display: none !important; }

  /* はみ出し警告: 占有時間外まで伸びている走行ブロック */
  .gantt-block.overflow {
    background: #fdecea !important;
    border: 1.5px solid #c43a3a !important;
    color: #6b1f1f !important;
    box-shadow: 0 0 0 1px #c43a3a inset;
    /* 占有終了を超過した警告状態では、後から描画される時間外の自由項目（z-index 3）に
       覆われてクリックできなくなるため、警告時のみ手前に出す */
    z-index: 4;
  }
  /* 超過インターバルは z4 に上げない＝is-interval の当たり判定意図（885行）を維持 */
  .gantt-block.overflow.is-interval {
    z-index: 1;
  }
  /* はみ出し警告: 占有外バンド項目（休憩・自由項目） */
  .gantt-break.overflow,
  .gantt-free.overflow {
    background: #fdecea !important;
    border: 1.5px solid #c43a3a !important;
    color: #6b1f1f !important;
  }
  /* クリック選択中の項目の強調枠。outline はレイアウト（幅・位置）に影響しないため、
     インターバルの当たり判定拡張（::before）や既存の hover の box-shadow と衝突しない。 */
  .gantt-block.is-selected,
  .gantt-break.is-selected,
  .gantt-free.is-selected {
    outline: 2px solid #2980b9;
    outline-offset: 1px;
  }
  .gantt-min-grid {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.045) 0, rgba(0,0,0,0.045) 1px,
      transparent 1px, transparent 15px
    );
    pointer-events: none; z-index: 0;
  }
  /* マウスオーバー／クリック固定で表示する時刻ガイドライン */
  .gantt-hover-line {
    position: absolute; left: 0; right: 0;
    height: 0;
    border-top: 1px solid rgba(70, 130, 220, 0.85);
    pointer-events: none;
    z-index: 10;
  }
  .gantt-hover-line.pinned {
    border-top: 2px solid #2c6cb0;
  }
  .gantt-hover-label {
    position: absolute; left: 0;
    width: 60px; padding: 1px 4px;
    box-sizing: border-box;
    background: #4a90e2; color: #fff;
    font-family: "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 600;
    text-align: right;
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 11;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .gantt-hover-label.pinned {
    background: #2c6cb0;
  }
  .gantt-body { cursor: crosshair; }
  .gantt-break {
    position: absolute; left: 0; right: 0;
    background: rgba(255, 248, 224, 0.92);
    border-top: 1px dashed #d4b87f;
    border-bottom: 1px dashed #d4b87f;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #8a6c2a; z-index: 2;
    cursor: move;
    overflow: hidden;
  }
  .gantt-break:hover { box-shadow: inset 0 0 0 1.5px #b89060; }
  /* 時刻固定の break（お昼休み時刻固定モード等）：
     見た目は通常のお昼休みと同じで、ドラッグ不可だけ示す。
     クラスブロック（z-index 3）の後ろに隠れないよう z-index を 1 段上げる。 */
  .gantt-break.is-fixed {
    cursor: not-allowed;
    z-index: 4;
  }
  .gantt-break.is-fixed:hover { box-shadow: none; }
  .gantt-free {
    position: absolute; left: 4px; right: 4px;
    background: #dcebd5; border: 1px solid #a8c89c;
    border-radius: 3px; padding: 2px 6px;
    font-size: 10px; color: #3d5e30;
    display: flex; align-items: center; justify-content: center;
    z-index: 3; overflow: hidden; white-space: nowrap;
    cursor: move;
  }
  .gantt-free:hover { box-shadow: 0 0 0 1.5px #6f9e62; }
  /* 自由項目の色バリエーション（7色パステル）。イベント項目の帯（.gantt-event-block）も同じ配色を共用する（ロットI）。 */
  .gantt-free.color-green,  .gantt-event-block.color-green  { background: #dcebd5; border-color: #a8c89c; color: #3d5e30; }
  .gantt-free.color-yellow, .gantt-event-block.color-yellow { background: #f5ecc4; border-color: #c4ad77; color: #6b5524; }
  .gantt-free.color-orange, .gantt-event-block.color-orange { background: #f7e0c5; border-color: #d4a878; color: #6b4222; }
  .gantt-free.color-pink,   .gantt-event-block.color-pink   { background: #f5d5e0; border-color: #d495a8; color: #6b2244; }
  .gantt-free.color-purple, .gantt-event-block.color-purple { background: #e2d2ea; border-color: #a888c4; color: #4d316b; }
  .gantt-free.color-blue,   .gantt-event-block.color-blue   { background: #d5e7f4; border-color: #95b8d4; color: #2d5475; }
  .gantt-free.color-gray,   .gantt-event-block.color-gray   { background: #e4e4dc; border-color: #b0b0a5; color: #555550; }
  /* 自由・休憩・イベント項目の帯の名前（ロットJ）：Enter改行の反映＋自動折り返し。
     display: block + max-height: 100% + overflow: hidden により、自身の高さが
     親帯（align-items: center の flex）の高さに制約され、1行目は必ず上端から
     読める状態で表示され、収まらない分だけ下側が行単位で切れる。
     word-break: keep-all は使用禁止（WebKit禁則破壊が実証済みのため、
     overflow-wrap: anywhere のみで長い英数字対策を行う）。
     走行帯のラベル（.gantt-block-label）は別セレクタのため対象外。 */
  .gantt-band-label {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: center;
  }
  .gantt-empty {
    padding: 40px 20px; text-align: center;
    color: #888; font-style: italic;
  }
  .footer-note {
    margin-top: 16px; padding: 12px;
    text-align: center; font-size: 11px; color: #aaa;
  }

  /* ====== 印刷専用要素（通常時は非表示） ====== */
  .print-only { display: none; }
  .print-event-name { font-size: 18pt; font-weight: 600; color: #333; }
  .print-date { font-size: 10pt; color: #666; margin-top: 2mm; }

  /* ====== ロゴ設定セクション（イベントの管理モーダル内、画面側プレビュー） ====== */
  .logo-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0ece2;
  }
  .logo-section-label {
    font-size: 12px;
    color: #555;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .logo-preview {
    width: 100%;
    min-height: 64px;
    max-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf8f3;
    border: 1px dashed #d6cfc0;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
  }
  .logo-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
  }
  .logo-placeholder {
    color: #999;
    font-size: 12px;
  }
  .logo-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .logo-hint {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-top: 6px;
  }

  /* ====== 配布用印刷のオプションモーダル内のスタイル ====== */
  .print-options-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0ece2;
  }
  .print-options-section:last-child {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
  }
  .print-options-title {
    font-weight: 600; color: #555; margin-bottom: 8px;
    font-size: 13px;
  }
  /* フッターのボタン（リセット／キャンセル／PDFダウンロード／印刷）が
     狭い画面でボタン内改行しないよう、ボタン単位で折り返す */
  #printOptionsModal .modal-footer {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  #printOptionsModal .btn-cancel,
  #printOptionsModal .btn-save {
    white-space: nowrap;
  }
  .sync-screen-display-btn {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .checkbox-row {
    display: block; font-size: 13px; color: #333;
    margin-bottom: 6px; cursor: pointer; user-select: none;
  }
  .checkbox-row:last-child { margin-bottom: 0; }
  .checkbox-row input { margin-right: 8px; vertical-align: middle; }
  /* モーダル冒頭の説明文（配布用印刷オプションの導入）：
     箱で囲まず、地のテキストとして自然に置く。 */
  .modal-intro-text {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: #555;
    line-height: 1.7;
  }

  /* ? ヘルプボタン：クリックで対応する .hint-bubble を開閉する。
     既存パレット（form-hint-block の青系）に揃えた薄い見た目で、
     ラベルテキストの邪魔にならないよう控えめに。
     ラベル全体は cursor:pointer なのでチェックトグルと干渉しないよう
     JS 側で preventDefault + stopPropagation する。 */
  .checkbox-row .hint-btn {
    display: inline-block;
    background: #fff;
    color: #6a90b0;
    border: 1px solid #c5d7e6;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .checkbox-row .hint-btn:hover {
    background: #95b8d4;
    color: #fff;
    border-color: #95b8d4;
  }
  .checkbox-row .hint-btn.active {
    background: #6a90b0;
    color: #fff;
    border-color: #6a90b0;
  }
  /* ? クリックで開く吹き出し。.form-hint-block と同じ配色で統一感を出す。
     親が user-select:none でも本文は選択・コピーできるよう text に上書き。 */
  .checkbox-row .hint-bubble {
    display: none;
    margin: 6px 0 4px 24px;
    padding: 7px 10px;
    background: #f0f4f7;
    border-left: 2px solid #95b8d4;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    cursor: default;
    user-select: text;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .checkbox-row .hint-bubble.show { display: block; }

  /* ====== 印刷時の調整 ====== */
  @media print {
    @page {
      size: A4;
      /* 上 12mm / 左右 12mm / 下 18mm（位置固定フッター用に下に余白を多めに確保） */
      margin: 12mm 12mm 18mm 12mm;
    }
    /* 全要素の色印刷を有効化（背景色・色付きブロックを残す） */
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    /* 印刷時は body の余白（画面用フローティングバー分の padding-bottom）をリセット。
       残しておくと最後のページに空白が積まれて余分なページが発生する。 */
    body { background: #fff; font-size: 10pt; padding: 0; }

    /* 印刷時のクレジットフッター（フリー利用時のみ表示）。
       position: fixed bottom で各ページの最下部に繰り返し表示される（Chrome/Safari）。
       body.has-license が付いている時はライセンス所持済みとして非表示。 */
    .print-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      padding: 2mm 6mm;
      border-top: 1px solid #ccc;
      text-align: center;
      font-size: 8pt;
      color: #888;
    }
    .print-footer strong { color: #555; font-weight: 600; }
    .print-footer-note {
      display: inline-block;
      margin-left: 6px;
      font-size: 7.5pt;
      color: #aaa;
    }
    body.has-license .print-footer { display: none !important; }
    .wrap { max-width: none; margin: 0; padding: 0; }
    h1 { font-size: 14pt; margin: 0 0 4mm; color: #555; }
    /* ライセンス所持時は印刷物にサービス名（「タイスケくん／タイムテーブル計算ツール」）を出さない。
       フッターのオフタスクレジット非表示と同じ条件。 */
    body.has-license h1,
    body.has-license .app-tagline { display: none !important; }

    /* 操作系のUIはすべて隠す */
    .subtitle,
    .event-bar,
    .panel-event-management,
    .frame-actions-row,
    .add-btn,
    .chart-display-toggles,
    .modal-overlay,
    .tutorial-menu-overlay,
    .footer-note,
    .gantt-hover-line,
    .gantt-hover-label,
    .gantt-drop-label,
    .save-toast {
      display: none !important;
    }
    /* チュートリアル関連は印刷に出さない（driver.js のツアー表示は body 直下に動的追加されるため）。
       .driver-active-element はツアー中にハイライトされる実要素側に付くクラスなので対象に含めない。 */
    .driver-overlay,
    .driver-popover {
      display: none !important;
    }
    /* タイムチャートは必ず新ページから始める（進行リストの末尾と混在しないように）。
       進行リストには page-break-before を付けない: 全体の枠はモーダル化により印刷には
       出ないため、強制改ページにすると1ページ目がヘッダだけの空白ページになってしまう。
       順序変更は印刷直前に JS が DOM を入れ替える方式（display:flex の order 方式は
       page-break-inside: avoid と衝突して空白ページを生むので不採用）。 */
    .panel-chart { page-break-before: always; }
    /* 進行リストの最後の列（編集・削除）も非表示 */
    table th:last-child { display: none; }

    /* 印刷専用のヘッダを表示 */
    .print-only { display: block; }
    .print-header {
      margin: 0 0 6mm;
      padding-bottom: 3mm;
      border-bottom: 1px solid #888;
      display: flex;  /* .print-only の display:block を上書きして横並びに */
      justify-content: space-between;
      align-items: flex-start;
      gap: 8mm;
    }
    .print-header-text { flex: 1; min-width: 0; }
    .print-logo {
      max-height: 22mm;
      max-width: 50mm;
      object-fit: contain;
      flex-shrink: 0;
    }
    /* ロゴ未設定時は印刷ヘッダから消す（src 空 or 未設定の時に出るアイコンを防ぐ） */
    .print-logo:not([src]) { display: none; }
    .print-logo[src=""] { display: none; }

    /* パネルは枠線・ヘッダ・内側余白をすべて消して、紙面の幅をフルに使う。
       灰色の枠線が右端で切れる問題の根本対処も兼ねる。
       セクション名（進行リスト / タイムチャート）は
       中身の見た目（表／ガントチャート）で十分判別できるためタイトル非表示で問題なし。 */
    .panel {
      box-shadow: none !important;
      border: none !important;
      page-break-inside: avoid;
      margin-bottom: 4mm;
    }
    .panel-header { display: none !important; }
    .panel-body { padding: 0 !important; }

    /* タイムチャートは長くなれば改ページOK */
    .gantt-wrap { page-break-inside: auto; border: 1px solid #bbb; }
    .gantt-block, .gantt-break, .gantt-free, .gantt-non-occupy {
      box-shadow: none !important;
    }
    /* 画面用のクリック当たり判定拡張（::before）は印刷では不要 */
    .gantt-block.is-interval::before { content: none; }
    /* 運営用印刷（window.print）は @media print で選択枠・操作バーを非表示にする。
       配布用印刷／PDFダウンロード（html2canvas経路）は @media print が効かないため、
       出力直前に deselectChartItem() で選択そのものを解除して対応する
      （applyPrintOptionsForOutput 内）。 */
    .gantt-block.is-selected,
    .gantt-break.is-selected,
    .gantt-free.is-selected {
      outline: none;
    }
    /* .chart-select-bar.show（クラス2つ）の方が詳細度が高く display:none だけでは
       打ち消せないため、既存の .floating-bar と同じ !important パターンに合わせる。 */
    .chart-select-bar { display: none !important; }
    /* 印刷時はクラス記号の色付き枠を維持しつつ、文字をはっきりと */
    .gantt-block-label { font-weight: 500; }
    .gantt-block-time { color: #333 !important; }
    .gantt-block-time-end { color: #333 !important; }

    /* 入力欄は読み取り専用の見た目に */
    input[type="time"], input[type="text"], input[type="number"], select {
      border: none !important; background: transparent !important;
      padding: 0 !important; font-size: 10pt;
    }
    /* 警告ハイライトはそのまま残す */
    .input-warning { background: #fdecea !important; }

    /* ====== 1ページに収める（配布用印刷オプション・zoom 方式） ======
       進行リストとタイムチャートでそれぞれ独立した zoom を当てる。
       JS が --print-fit-list-scale / --print-fit-chart-scale（0.5〜1.0）を計算してセットする。
       素材化モードまたは「同じ側のストレッチ」と併用された場合は zoom を効かせない（等倍 = 1）。
       リスト側 fit はリスト側ストレッチと排他、チャート側 fit はチャート側ストレッチと排他。 */
    body.print-fit-list:not(.print-material-mode):not(.print-stretch-list) .panel-list {
      zoom: var(--print-fit-list-scale, 1);
    }
    body.print-fit-chart:not(.print-material-mode):not(.print-stretch-chart) .panel-chart {
      zoom: var(--print-fit-chart-scale, 1);
    }
    /* リスト fit ON 時はリストの直後で改ページ（チャートを2ページ目へ送る） */
    body.print-fit-list:not(.print-material-mode):not(.print-stretch-list) .panel-list {
      page-break-after: always;
      break-after: page;
    }
    /* チャート fit ON 時はチャートの直前で改ページ（前ページから切り離す）。
       ただし リスト非表示 + チャート fit ON で1ページ目が空白にならないよう、
       リスト非表示時は改ページしない */
    body.print-fit-chart:not(.print-material-mode):not(.print-stretch-chart):not(.print-hide-list-panel) .panel-chart {
      page-break-before: always;
      break-before: page;
    }

    /* ====== 縦方向ストレッチモード（リスト側） ======
       下余白を詰めて A4 をフルに使うモード（進行リストのみ）。
       行 padding と line-height を倍率拡大して紙面を埋める。
       --print-list-pad-scale / --print-list-line-scale は :root に JS が設定する。
       padding は最低 0.75（=6px/side）で空気感を残し、行間（line-height）で
       積極的に高さを吸収することで、セル上下の余白と1ページ収容率を両立する。 */
    body.print-stretch-list .panel-list table {
      line-height: calc(1.6 * var(--print-list-line-scale, 1));
    }
    body.print-stretch-list .panel-list table th,
    body.print-stretch-list .panel-list table td {
      padding-top: calc(8px * var(--print-list-pad-scale, 1)) !important;
      padding-bottom: calc(8px * var(--print-list-pad-scale, 1)) !important;
    }
    /* ストレッチモード時のリストは page-break-inside を auto に戻す。
       .panel { page-break-inside: avoid } が効いていると、A4 を 1px でも超えただけで
       リスト全体が次ページに飛ばされ「イベント名直下に出ない」現象が発生する。
       auto にすれば自然に行単位で改ページされ、1ページ目はイベント名直下から始まる。 */
    body.print-stretch-list .panel-list {
      page-break-inside: auto !important;
      break-inside: auto !important;
    }
    /* 右端の見切れ対策（サブピクセル安全マージン）兼 水平センタリング。
       ストレッチモード時はパネル左右に 3mm（≒11px）ずつ余白を確保。
       リスト側／チャート側で独立して効かせる（片方だけストレッチでも対称余白が当たる）。 */
    body.print-stretch-list .panel-list .panel-body {
      padding-left: 3mm !important;
      padding-right: 3mm !important;
    }

    /* ====== 縦方向ストレッチモード（チャート側） ======
       チャートは JS 側で最適 PX を再計算して再描画するため、CSS による zoom は不要。
       ここではセンタリングと左右余白だけを当てる。 */
    body.print-stretch-chart .panel-chart .panel-body {
      padding-left: 3mm !important;
      padding-right: 3mm !important;
    }
    /* チャートが A4 1ページに余裕を持って収まるサイズの場合の垂直センタリング。
       .panel-chart を A4 印刷可能高さで満たし、中身を中央に配置する。
       中身の高さが用紙より小さければ上下余白が均等に分かれる。
       ぴったりサイズの場合はセンタリングは事実上効かない（上下余白がほぼ無いので）。 */
    body.print-stretch-chart .panel-chart {
      min-height: calc(297mm - 12mm - 18mm);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    body.print-stretch-chart .panel-chart .panel-body {
      width: 100%;
    }

    /* ====== 配布用印刷の個別オプション（チェックされた時に効く） ====== */
    /* 全体ヘッダ */
    body.print-hide-event-name #printEventName { display: none !important; }
    body.print-hide-event-logo .print-logo { display: none !important; }
    body.print-hide-print-date #printDate { display: none !important; }

    /* 進行リスト */
    body.print-hide-list-panel .panel-list { display: none !important; }
    body.print-hide-list-section-headers tr.row-section,
    body.print-hide-list-section-headers tr.empty-row {
      display: none !important;
    }
    body.print-hide-list-intervals tr.row-interval { display: none !important; }
    body.print-hide-list-badges .qualify-badge,
    body.print-hide-list-badges .parallel-badge,
    body.print-hide-list-badges .multi-badge {
      display: none !important;
    }

    /* 保険: 画面用の screen-hide-chart-* が万一 beforeprint のJSで外れないまま
       印刷されても、画面設定が印刷結果に乗らないよう表示を復帰させる。
       revert は UAデフォルトまで巻き戻してしまう（.gantt-block の flex 等が壊れる）ため、
       各セレクタの通常時の display 値をそのまま明示する。
       配布用印刷オプション（print-hide-chart-*）で明示的に非表示を選んだ場合は、
       下のルールが後勝ちで上書きされ、そちらの非表示が優先される。 */
    body.screen-hide-chart-intervals .gantt-block.is-interval {
      display: flex !important;
    }
    body.screen-hide-chart-block-name .gantt-block-label { display: flex !important; }
    body.screen-hide-chart-class-name .block-class-name { display: block !important; }
    body.screen-hide-chart-detail .block-detail { display: block !important; }
    body.screen-hide-chart-block-time .gantt-block-time { display: block !important; }
    /* 終了時刻ラベルは運営用印刷では下の「常に非表示」ルールが別途効くため、この復帰は
       配布用印刷（print-distribute）限定にする（運営用にまで復帰させない＝番頭裁定）。
       配布用オプション「終了時刻を非表示」(print-hide-chart-block-time-end) がONの時は
       そちらを必ず優先させるため :not() で排他にする（特異度の逆転を避ける・番頭裁定）。 */
    body.print-distribute.screen-hide-chart-block-time-end:not(.print-hide-chart-block-time-end) .gantt-block-time-end {
      display: block !important;
    }
    body.screen-hide-chart-badges .gantt-block-badges { display: flex !important; }

    /* タイムチャート */
    body.print-hide-chart-panel .panel-chart { display: none !important; }
    body.print-hide-chart-intervals .gantt-block.is-interval {
      display: none !important;
    }
    body.print-hide-chart-block-name .gantt-block-label { display: none !important; }
    /* クラス名／詳細を個別に非表示（renderClassBlockLabelHtml で span 分離してある時のみ効く） */
    body.print-hide-chart-class-name .block-class-name { display: none !important; }
    body.print-hide-chart-detail .block-detail { display: none !important; }
    body.print-hide-chart-block-time .gantt-block-time { display: none !important; }
    /* 終了時刻ラベル（ロットL）：配布用印刷オプション「終了時刻を非表示」ON時に隠す。 */
    body.print-hide-chart-block-time-end .gantt-block-time-end { display: none !important; }
    /* 運営用印刷（print-distribute なし）は終了時刻ラベルを常に非表示（社長決定）。
       配布用印刷（print-distribute あり）はここでは対象外＝上の print-hide-chart-block-time-end
       と、直前の screen-hide 復帰ルールだけで判定させる（番頭裁定：precision指定）。 */
    body:not(.print-distribute) .gantt-block-time-end { display: none !important; }
    /* インターバル名の目印優先（致命2）の復帰：beforeprint で
       screen-hide-chart-block-time-end クラスが外れたまま運営用印刷が走っても、
       運営用は終了時刻ラベル自体を出さない（上のルール）ため、インターバル名を
       隠す理由が無い。ロットLの padding 打ち消しと同じ理由・同じ場所で明示的に
       visibility を戻す。 */
    body:not(.print-distribute) .gantt-block.is-interval.end-covered .gantt-block-label {
      visibility: visible !important;
    }
    body.print-hide-chart-badges .gantt-block-badges { display: none !important; }

    /* ====== 素材化モード（PDF素材として Illustrator 等に取り込む用途） ====== */
    /* ヘッダ・パネルタイトル・パネル枠線を一括非表示にして、本体（テーブル/ガント）だけ残す */
    body.print-material-mode {
      margin: 0 !important;
      padding: 0 !important;  /* 通常時の padding: 32px 16px をリセット（紙面の上下左右ズレ防止） */
    }
    body.print-material-mode .wrap { padding: 0 !important; margin: 0 !important; }
    body.print-material-mode .print-header { display: none !important; }
    body.print-material-mode .panel-header { display: none !important; }
    body.print-material-mode .panel {
      border: none !important;
      margin: 0 !important;
      page-break-inside: auto;
      /* 通常時の overflow: hidden を解除（@page 幅にぴったり合わせた時に
         サブピクセル分の右端が clip されるのを防ぐ） */
      overflow: visible !important;
    }
    body.print-material-mode .panel-body { padding: 0 !important; }
    body.print-material-mode h1 { display: none !important; }
    /* ガントチャート本体の外枠線・角丸も消す（素材として使う時に邪魔になる） */
    /* overflow: visible で右端 clip も解除 */
    /* 最下端の時刻ラベル（"18:00 退場期限" 等）は transform: translateY(-50%) で
       半分だけ下にはみ出すが、Chrome の印刷エンジンはラベルの「変形前の論理位置」で
       ページ送りを判定するため、@page にラベル full-height ぶんの余白が無いと
       2 ページ目に押し出される。padding-bottom で gantt-body 直下に物理的な余白を
       確保し、計測値（baseRect.height）にも反映させる。 */
    body.print-material-mode .gantt-wrap {
      border: none !important;
      border-radius: 0 !important;
      overflow: visible !important;
      padding-bottom: 16px !important;
    }
    /* ストレッチ系（A4 に押し込む系）の干渉を打ち消す。
       JS 側でも素材化時はクラスを外しているが、CSS でも保険として無効化。 */
    body.print-material-mode .panel-chart {
      min-height: 0 !important;
      display: block !important;
      /* チャートは「常に新ページから」の標準ルールを解除（素材化時は単独出力前提のため）。
         残しておくと、リスト非表示でチャート単独でも空白の先頭ページが生まれる。 */
      page-break-before: auto !important;
      break-before: auto !important;
    }
    body.print-material-mode .panel-list {
      page-break-after: auto !important;
      break-after: auto !important;
    }
    /* 高さ計算誤差で 1〜2px 溢れて 2 ページ目に空ページが出るのを防ぐ。
       素材化時は @page サイズが要素実寸ぴったりに設定されているので、
       内側の avoid 系（.panel）も auto に統一しておく。 */
    body.print-material-mode .panel,
    body.print-material-mode .gantt-wrap {
      page-break-inside: auto !important;
      break-inside: auto !important;
    }
  }

  /* 編集モーダル */
  .modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center; justify-content: center;
    z-index: 100;
    padding: 16px;
  }
  .modal-overlay.show { display: flex; }
  .modal {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 480px;
    /* overlay padding 32px ＋ フローティングバー 100px ぶんの余裕を引く */
    max-height: calc(100vh - 132px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal-header {
    padding: 14px 20px;
    background: #efeae0;
    border-bottom: 1px solid #e0dcd2;
    font-weight: 600;
    font-size: 15px;
    color: #555;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .modal-header-title { flex: 1 1 auto; min-width: 0; }
  .modal-header-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
  }
  .modal-nav-btn {
    background: #fff;
    border: 1px solid #c8c2b3;
    border-radius: 3px;
    padding: 3px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    font-family: inherit;
    line-height: 1.2;
  }
  .modal-nav-btn:hover:not(:disabled) {
    background: #f5f0e0;
    border-color: #95a88a;
  }
  .modal-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  /* モーダル右上の × ボタン（閉じる） */
  .modal-close-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 6px;
    font-family: inherit;
  }
  .modal-close-btn:hover { color: #333; }
  /* 項目を編集モーダルのフッター: 削除（左）／ナビ（中央）／保存（右） */
  .edit-modal-footer { justify-content: space-between; }
  .edit-modal-nav { display: flex; gap: 6px; }
  .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .modal-footer {
    padding: 12px 20px;
    background: #fafaf5;
    border-top: 1px solid #e0dcd2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
  }
  /* モーダルが開いている時はフローティングバーを隠す（重なり回避） */
  body:has(.modal-overlay.show) .floating-bar {
    display: none;
  }
  /* スタート画面モーダル：入口ボタンを縦積みで並べる */
  .start-screen-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .start-screen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    color: #555;
    background: #fff;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.3;
  }
  .start-screen-btn:hover { background: #efeae0; border-style: solid; }
  /* 前回の続きから：主ボタンとして強調（既存アクセント色＝#2980b9 系を踏襲） */
  .start-screen-continue {
    justify-content: flex-start;
    background: #2980b9;
    color: #fff;
    border-color: #1f6391;
    font-weight: 600;
  }
  .start-screen-continue:hover { background: #1f6391; }
  .start-screen-continue-label { flex-shrink: 0; white-space: nowrap; }
  /* イベント名が長い場合は省略表示にして崩れを防ぐ */
  #startContinueEventName {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .start-screen-hint {
    margin-top: -2px;
    font-size: 12px;
    color: #6b6b6b;
    line-height: 1.5;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  /* 項目を編集モーダル：項目の種類で行数が変わるが、高さを固定して
     ◀ ▶ で隣の項目に移動する時のチラつきを防ぐ。
     画面高が低い場合は .modal の max-height (calc(100vh - 132px)) が優先される。 */
  #editModal .modal {
    height: 720px;
  }
  .form-row {
    display: flex; align-items: center;
    gap: 12px; margin-bottom: 14px;
    min-width: 0;
  }
  .form-row:last-child { margin-bottom: 0; }
  .form-row label {
    width: 90px; font-size: 13px; color: #555;
    flex-shrink: 0;
  }
  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row input[type="time"],
  .form-row select,
  .form-row textarea {
    flex: 1;
    min-width: 0;
    font-size: 14px; padding: 6px 10px;
    border: 1px solid #c8c2b3; border-radius: 4px;
    font-family: inherit;
    background: #fff;
  }
  .form-row textarea {
    resize: vertical;
    line-height: 1.4;
  }
  /* select は長い option text に押し広げられるので明示的に幅を抑える */
  .form-row select {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  /* disabled 状態（同時スタート中の開始時刻など）：押せないことが見た目で分かるように */
  .form-row input:disabled,
  .form-row select:disabled {
    background: #eee;
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
  }
  /* 入力ミス警告（時刻整合性が取れていない欄） */
  input.input-warning {
    border: 1.5px solid #c43a3a !important;
    background: #fdecea !important;
  }
  /* 進行リスト行のはみ出し警告 */
  tr.row-overflow td {
    background: #fdecea !important;
    color: #6b1f1f !important;
  }
  .form-row input[type="number"] { max-width: 100px; }
  .form-row input[type="time"] { max-width: 130px; }
  /* クラス記号の入力欄：ヒント文（basis auto）に押されて欄がつぶれるのを防ぐ最小幅。
     全幅共通（767px以下は下の @media 内でヒントが下の行に落ちるが、その場合もこの最小幅は有効）。
     .form-row 全体への一般解にはしない（#editClassKeyRow 限定）。 */
  #editClassKeyRow input[type="text"] { min-width: 72px; }
  /* イベント列の名前欄（追加／編集モーダル・ロットI）：ヒント文（basis auto）に押されて
     欄がつぶれるのを防ぐ最小幅。クラス記号欄と同じ手口（ID限定）。 */
  #editEventColumnName,
  #addEventColumnName {
    min-width: 120px;
  }
  .form-row .hint {
    color: #888;
    font-size: 12px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  /* 同時スタートのヒント文：390px幅で単語途中割れ防止（自動フィット） */
  #editParallelRow .hint {
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  /* クラス記号・開始時刻の行：狭幅では長いヒント文を入力欄の下の行に落とす（縦積み）。
     幅の分け合いでは390pxで入力欄かヒントのどちらかが必ず潰れるため折り返し方式。
     クラス記号入力欄の最小幅（72px）は767px以下でもPC幅でも必要なため上の全幅ルールで確保済み。 */
  @media (max-width: 767px) {
    #editClassKeyRow, #editStartTimeRow { flex-wrap: wrap; }
    #editClassKeyRow .hint,
    #editStartTimeRow .hint {
      flex: 1 0 100%;
      min-width: 0;
      margin-top: 4px;
      text-wrap: pretty;
      line-break: strict;
      word-break: keep-all;
      word-break: auto-phrase;
      overflow-wrap: anywhere;
    }
    #editStartTimeRow input[type="time"] { min-width: 130px; }
  }
  /* クラス一括追加／レース一括追加モーダルのステッパー＋ヒントの行：
     #editClassKeyRow / #editStartTimeRow と同じ「狭幅ではヒントを下の行に落とす」方式。
     クラスピッカーの行（form-row-block）と本数×ステッパー2組の行（form-row-dual-stepper）は
     別の折り返し方式を既に持っているため対象外。 */
  @media (max-width: 767px) {
    #bulkClassModal .form-row:not(.form-row-block),
    #bulkRaceModal .form-row:not(.form-row-block):not(.form-row-dual-stepper) {
      flex-wrap: wrap;
    }
    #bulkClassModal .form-row:not(.form-row-block) .hint,
    #bulkRaceModal .form-row:not(.form-row-block):not(.form-row-dual-stepper) .hint {
      flex: 1 0 100%;
      min-width: 0;
      margin-top: 4px;
      text-wrap: pretty;
      line-break: strict;
      word-break: keep-all;
      word-break: auto-phrase;
      overflow-wrap: anywhere;
    }
  }
  .btn-cancel, .btn-save {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
  }
  .btn-cancel {
    background: #fff;
    border: 1px solid #c8c2b3;
    color: #555;
  }
  .btn-cancel:hover { background: #f5f3ee; }
  .btn-save {
    background: #5a7a4f;
    border: 1px solid #5a7a4f;
    color: #fff;
  }
  .btn-save:hover:not(:disabled) { background: #6a8a5f; }
  .btn-save:disabled {
    background: #b8c2b0;
    border-color: #b8c2b0;
    cursor: not-allowed;
  }
  /* 「下までスクロールしないと押せない」状態の視覚フィードバック。
     btn-save:disabled と同じ見た目で、tooltip 経由で理由を伝える。 */
  .btn-save.btn-locked { cursor: not-allowed; }
  /* 保存ボタンを押した瞬間の「手応え」演出：0.2秒ほど沈んで色が変わる。
     .btn-save:hover:not(:disabled) とは詳細度が同点。ここでは
     ソース順で後に書くことで hover に勝たせている。順序を入れ替えないこと。 */
  .btn-save.btn-pressed:not(:disabled) {
    transform: translateY(1px);
    background: #4a6a3f;
    transition: transform 0.1s ease, background 0.1s ease;
  }
  /* 破壊的操作（端末解除など）の確認ダイアログ用OKボタン。
     .btn-save と併用されるため、.btn-save 側より詳細度を上げて上書きする。 */
  .dialog-btn-danger,
  .btn-save.dialog-btn-danger {
    background: #c0392b;
    border: 1px solid #a93226;
    color: #fff;
  }
  .dialog-btn-danger:hover,
  .btn-save.dialog-btn-danger:hover:not(:disabled) {
    background: #a93226;
  }
  /* 保存完了トースト：画面下中央に小さく出て、自然に消える */
  .save-toast {
    position: fixed; left: 50%; bottom: 24px;
    transform: translateX(-50%) translateY(8px);
    background: #3d3d38; color: #fff;
    font-size: 13px; padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0; pointer-events: none;
    z-index: 10000;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .save-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .btn-delete {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c43a3a;
    color: #c43a3a;
    margin-right: auto;
  }
  .btn-delete:hover { background: #fdecea; }

  /* 右クリックメニュー（タイムチャートのブロック上・空きスペース共通） */
  .context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #c8c2b3;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    min-width: 180px;
    z-index: 200;
    font-size: 13px;
    user-select: none;
  }
  .context-menu-item {
    padding: 6px 14px;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
  }
  .context-menu-item:hover {
    background: #efeae0;
  }
  .context-menu-item.disabled {
    color: #bbb;
    cursor: default;
  }
  .context-menu-item.disabled:hover {
    background: transparent;
  }
  .context-menu-item.danger {
    color: #b34a4a;
  }
  .context-menu-item.danger:hover {
    background: #fdecea;
  }
  .context-menu-divider {
    height: 1px;
    background: #e8e3d4;
    margin: 4px 0;
  }
  .context-menu-heading {
    padding: 5px 14px 3px;
    font-size: 12px;
    color: #888;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .context-menu-hint {
    padding: 2px 14px;
    font-size: 12px;
    color: #777;
    line-height: 1.5;
  }

  /* カスタムダイアログ用（ブラウザ標準 alert/confirm/prompt の置き換え） */
  .modal-confirm {
    max-width: 420px;
  }
  .custom-confirm-message {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    white-space: pre-line;
    text-align: center;
    padding: 4px;
  }
  .custom-prompt-input-wrap {
    margin-top: 14px;
    text-align: center;
  }
  .custom-prompt-input-wrap input {
    width: 100%;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
  }

  /* 一括生成モーダル用 */
  .modal-large {
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .modal-large .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .gen-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0ece2;
  }
  .gen-section:last-child {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
  }
  .gen-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
  }
  /* お昼休みの「分で指定」「時刻で固定」モード切替タブ */
  .lunch-mode-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
  }
  .lunch-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    user-select: none;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    flex-basis: max-content;
  }
  .lunch-mode-tab input[type="radio"] {
    margin: 0;
  }
  .gen-class-row {
    border: 1px solid #e0dcd2;
    border-radius: 6px;
    background: #fafaf5;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .gen-class-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .gen-class-key {
    width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 6px;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    font-family: inherit;
    background: #fff;
  }
  .gen-class-name {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
  }
  .gen-class-remove {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 18px;
    padding: 0 6px;
  }
  .gen-class-remove:hover { color: #c43a3a; }
  .gen-class-move-up,
  .gen-class-move-down {
    background: none;
    border: 1px solid #d8d2c2;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
  }
  .gen-class-move-up:hover,
  .gen-class-move-down:hover {
    background: #efeae0;
    color: #5a7a4f;
  }
  .gen-type-row {
    display: flex; gap: 14px; align-items: center;
    margin-bottom: 8px;
    font-size: 13px; color: #555;
  }
  .gen-type-row label { font-weight: normal; cursor: pointer; }
  .gen-type-row input[type="radio"] { margin-right: 4px; }
  .gen-class-row .form-row { margin-bottom: 8px; }
  .gen-class-row .form-row label { width: 80px; font-size: 12px; }
  .gen-add-class-btn {
    margin-top: 4px;
    width: 100%;
  }
  .gen-section .form-row label { width: 110px; }
  .gen-checkbox-row {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 8px; font-size: 13px;
  }
  .gen-checkbox-row input[type="checkbox"] { margin: 0; }
  .gen-checkbox-row label { width: 170px; cursor: pointer; }
  .gen-checkbox-row input[type="number"] {
    width: 70px; padding: 4px 8px;
    border: 1px solid #c8c2b3; border-radius: 4px;
    font-family: inherit; font-size: 13px;
  }
  .gen-checkbox-row .hint { color: #888; font-size: 12px; }
  .gen-warning {
    background: #fdf3e0;
    border-left: 3px solid #d4a878;
    padding: 8px 12px;
    font-size: 12px;
    color: #6b4222;
    margin-top: 12px;
    border-radius: 3px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .gen-warning-note {
    font-size: 12px;
    color: #888;
  }
  /* モーダル冒頭のスクロール案内：「下までスクロールしないと生成ボタンが押せない」を予告 */
  .gen-scroll-notice {
    background: #f0f4f7;
    border-left: 3px solid #95b8d4;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #2c4a66;
    line-height: 1.7;
    border-radius: 3px;
  }
  .gen-info {
    background: #f0f4f7;
    border-left: 3px solid #95b8d4;
    padding: 8px 12px;
    font-size: 12px;
    color: #2d5475;
    margin-top: 12px;
    border-radius: 3px;
  }
  .link-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
    margin-top: 8px;
  }
  .link-btn:hover { color: #c43a3a; }
  .btn-reset {
    background: none;
    border: 1px solid #c8c2b3;
    color: #888;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    margin-right: auto;
  }
  .btn-reset:hover { background: #f5f3ee; color: #6b5836; }
  .existing-classes-hint {
    margin: -8px 0 12px 102px;
    font-size: 12px;
    color: #6b5836;
    background: #f7f3ea;
    padding: 5px 10px;
    border-radius: 3px;
    border-left: 2px solid #b89060;
  }
  .form-hint-block {
    margin: -6px 0 14px 102px;
    font-size: 12px;
    color: #555;
    background: #f0f4f7;
    padding: 7px 10px;
    border-radius: 3px;
    border-left: 2px solid #95b8d4;
    line-height: 1.6;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  /* 一括生成モーダルの狭幅対応：ラベル＋入力欄の右にヒント文を詰めると
     残り幅が数十pxしかなくなり、1〜2文字ずつ縦に割れてしまう。
     767px以下ではヒントを行の右横でなく下の行にまるごと回して、
     読める幅を確保する（768px以上の見た目は変更しない）。 */
  @media (max-width: 767px) {
    .modal-large .form-row {
      flex-wrap: wrap;
    }
    .modal-large .form-row .hint {
      flex: 1 1 100%;
      margin-top: 2px;
      text-wrap: pretty;
      line-break: strict;
      word-break: keep-all;
      word-break: auto-phrase;
      overflow-wrap: anywhere;
    }
  }

  /* 予選兼用バッジ */
  .qualify-badge {
    display: inline-block;
    font-size: 12px;
    color: #8a6c2a;
    background: #fbf2e0;
    border: 1px solid #d4b87f;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.3;
  }
  /* 並列（前の項目と同時開始）バッジ */
  .parallel-badge {
    display: inline-block;
    font-size: 12px;
    color: #2d5475;
    background: #e6f0fa;
    border: 1px solid #95b8d4;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.3;
  }
  /* 合同走行（複数クラスにまたがる）バッジ */
  .multi-badge {
    display: inline-block;
    font-size: 12px;
    color: #4d316b;
    background: #f0e8f5;
    border: 1px solid #a888c4;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.3;
  }

  /* ドラッグ＆ドロップ */
  tr.draggable-row { cursor: grab; }
  tr.draggable-row:active { cursor: grabbing; }
  tr.dragging { opacity: 0.4; }
  tr.drop-above td { box-shadow: inset 0 2px 0 0 #5a7a4f; }
  tr.drop-below td { box-shadow: inset 0 -2px 0 0 #5a7a4f; }

  /* タイムチャートのクラスブロック ドラッグ用 */
  .gantt-block[draggable="true"] { cursor: grab; }
  .gantt-block[draggable="true"]:active { cursor: grabbing; }
  .gantt-block.dragging { opacity: 0.4; }
  /* 「ここに入る」挿入線：帯の縁ではなく独立した水平線で挿入位置を示す。
     隙間にドロップした時も最寄りの位置にこの線が出る（handleChartDragOver で位置を更新）。 */
  .gantt-drop-line {
    position: absolute; left: 0; right: 0; height: 0;
    border-top: 3px solid #5a7a4f;
    pointer-events: none;
    z-index: 20;
  }
  .gantt-drop-line::before,
  .gantt-drop-line::after {
    content: '';
    position: absolute; top: -4px;
    width: 8px; height: 8px;
    background: #5a7a4f; border-radius: 50%;
  }
  .gantt-drop-line::before { left: -4px; }
  .gantt-drop-line::after { right: -4px; }
  /* 挿入線（緑）の時刻ラベル。青いホバー時刻ラベル（.gantt-hover-label）と
     同じ位置・見た目の言語（左端の小さなラベル）で、色だけ挿入線と同じ緑系にする。
     ドラッグ中は青いホバー線を隠すため、時刻の目安はこのラベルだけが担う。 */
  .gantt-drop-label {
    position: absolute; left: 0;
    width: 60px; padding: 1px 4px;
    box-sizing: border-box;
    background: #5a7a4f; color: #fff;
    font-family: "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 600;
    text-align: right;
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 21;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }

  .license-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .license-label { font-weight: 600; color: #555; }
  .license-state {
    padding: 2px 10px;
    border-radius: 4px;
    background: #e8e2d0;
    color: #555;
    font-size: 12px;
  }
  .license-state.is-active { background: #d8eed8; color: #2a6b2a; }
  .license-state.is-error  { background: #f5d8d8; color: #8b3a3a; }
  #licenseEmailInput {
    padding: 5px 8px;
    width: 220px;
    border: 1px solid #c5c0b0;
    border-radius: 4px;
  }
  #licenseKeyInput {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 1px;
    padding: 5px 8px;
    width: 200px;
    border: 1px solid #c5c0b0;
    border-radius: 4px;
  }
  .license-btn {
    padding: 5px 12px;
    font-size: 12px;
    border: 1px solid #c5c0b0;
    background: #fff;
    color: #444;
    border-radius: 4px;
    cursor: pointer;
  }
  .license-btn:hover { background: #f0ebe0; }
  .license-btn:disabled { background: #ddd; cursor: wait; }
  .license-btn-buy {
    background: #2980b9;
    color: white;
    border-color: #1f6391;
  }
  .license-btn-buy:hover { background: #1f6391; }
  /* 「この端末での利用を解除」など破壊的操作用（赤系）。
     隣接ボタンとの押し間違いを避けるため左右に余白を足す。 */
  .license-btn.btn-danger {
    background: #c0392b;
    color: #fff;
    border-color: #a93226;
    margin: 0 4px;
  }
  .license-btn.btn-danger:hover { background: #a93226; }
  .license-msg {
    margin-top: 6px;
    font-size: 12px;
    min-height: 16px;
    color: #777;
  }
  .license-msg.is-ok    { color: #2a6b2a; }
  .license-msg.is-error { color: #8b3a3a; }
  .license-banner-success {
    background: #e8f8f0;
    border: 1px solid #a9dfbf;
    color: #1e8449;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .license-banner-cancel {
    background: #fef5e7;
    border: 1px solid #f5cba7;
    color: #b9770e;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .license-banner-trial {
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: #7b5a00;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .license-banner-trial-text {
    font-weight: 600;
    flex: 1 1 auto;
  }
  .license-banner-trial-sub {
    font-weight: 400;
    font-size: 12px;
    color: #8a6d00;
    margin-top: 2px;
  }
  .license-banner-trial-btn {
    background: #fff;
    border: 1px solid #c89500;
    color: #7b5a00;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
  }
  .license-banner-trial-btn:hover { background: #fdf3c4; }
  .license-banner-trial-btn:disabled { background: #eee; cursor: wait; color: #999; border-color: #ccc; }
  .license-help {
    margin-top: 6px;
    font-size: 12px;
  }
  .license-help a {
    color: #2980b9;
    text-decoration: underline;
    cursor: pointer;
  }
  .license-help a:hover { color: #1f6391; }

  /* キー再送モーダル */
  .resend-modal-note {
    font-size: 13px;
    color: #555;
    margin: 0 0 12px 0;
    line-height: 1.6;
  }
  #resendEmailInput {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c5c0b0;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
  }
  .resend-modal-result {
    margin: 12px 0 0 0;
    font-size: 13px;
    min-height: 18px;
    color: #2a6b2a;
  }
  .resend-modal-result.is-error { color: #8b3a3a; }

  /* 登録デバイス管理モーダル */
  .device-modal-note {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.5;
  }
  .device-modal-note.is-error { color: #8b3a3a; }
  .device-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .device-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d8d2c0;
    border-radius: 4px;
    background: #fff;
  }
  .device-item.is-current {
    background: #f0f7f0;
    border-color: #a9c89f;
  }
  .device-item-info { flex: 1 1 auto; min-width: 0; }
  .device-item-label {
    font-weight: 600;
    font-size: 13px;
    color: #444;
  }
  .device-item-current-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #d8eed8;
    color: #2a6b2a;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .device-item-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .device-item-remove {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 12px;
    border: 1px solid #c5b3b3;
    background: #fff;
    color: #8b3a3a;
    border-radius: 4px;
    cursor: pointer;
  }
  .device-item-remove:hover { background: #f5e8e8; }
  .device-item-remove:disabled { opacity: 0.4; cursor: wait; }

  /* 登録デバイス管理モーダル：狭幅では「いま使っている端末」タグと解除ボタンに挟まれて
     メタ行（登録日時／最終使用日時）の実効幅が数十pxまで縮み、日付が途中で割れる。
     767px以下では名前＋タグ／メタ行／解除ボタンを縦積みにして、横幅いっぱい使わせる。 */
  @media (max-width: 767px) {
    .device-item {
      flex-direction: column;
      align-items: stretch;
    }
    .device-item-remove {
      width: 100%;
      padding: 12px;
    }
  }

  /* 有料版のご案内モーダル */
  .paid-info-campaign {
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: #7b5a00;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .paid-info-lead {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #555;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .paid-info-list {
    margin: 0 0 12px 0;
    padding-left: 20px;
    line-height: 1.8;
  }
  .paid-info-list li {
    font-size: 13px;
    color: #444;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .paid-info-price {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .modal-nav-btn.paid-info-detail-btn {
    background: #2980b9;
    color: #fff;
    border-color: #1f6391;
  }
  .modal-nav-btn.paid-info-detail-btn:hover { background: #1f6391; border-color: #1f6391; }

  /* ＋追加モーダル共通パーツ：ステッパー（− / 数値 / ＋） */
  .stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
  }
  .stepper-btn {
    width: 34px;
    border: none;
    background: #f5f3ee;
    color: #555;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    line-height: 1;
  }
  .stepper-btn:hover { background: #e8e3d6; color: #333; }
  .stepper-btn:active { background: #d8d2c2; }
  .stepper-input {
    width: 60px;
    border: none;
    border-left: 1px solid #e0dcd2;
    border-right: 1px solid #e0dcd2;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    padding: 6px 4px;
    -moz-appearance: textfield;
  }
  .stepper-input::-webkit-outer-spin-button,
  .stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .stepper-input:focus {
    outline: none;
    background: #fffbe8;
  }

  /* ＋追加モーダル共通パーツ：A〜Z クラスピッカー */
  .class-picker {
    display: grid;
    /* minmax(0, 1fr) にしないと、セル内の長いクラス名（"Under200" 等）が
       セル幅を押し広げてグリッド全体がモーダルからはみ出す */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .class-pick-btn {
    background: #fff;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 42px;
  }
  .class-pick-btn:hover {
    background: #f5f3ee;
    border-color: #95a88a;
  }
  .class-pick-btn.selected {
    background: #5a7a4f;
    border-color: #5a7a4f;
    color: #fff;
  }
  .class-pick-btn.used {
    background: #efeae0;
    border-color: #b89060;
    color: #6b5836;
  }
  .class-pick-btn.used.selected {
    background: #5a7a4f;
    border-color: #5a7a4f;
    color: #fff;
  }
  .class-pick-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .class-pick-btn .class-name-sub {
    font-size: 9px;
    font-weight: 400;
    color: inherit;
    opacity: 0.85;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ＋自由項目モーダル：配置ピッカー */
  .placement-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex: 1;
  }
  .placement-pick-btn {
    background: #fff;
    border: 1px solid #c8c2b3;
    border-radius: 4px;
    padding: 8px 6px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    text-align: center;
    user-select: none;
  }
  .placement-pick-btn:hover {
    background: #f5f3ee;
    border-color: #95a88a;
  }
  .placement-pick-btn.selected {
    background: #5a7a4f;
    border-color: #5a7a4f;
    color: #fff;
  }
  /* 配置ボタンの例示行：文言が変わっても単語途中割れ・横はみ出しを起こさない（自動フィット） */
  .placement-pick-btn span {
    font-size: 12px;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }

  /* 自由項目の色ピッカー（7色の丸ボタン） */
  .free-color-picker {
    display: flex;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
  }
  .free-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    transition: transform 0.1s;
  }
  .free-color-btn:hover { transform: scale(1.1); }
  .free-color-btn.selected {
    border-color: #2a3a25;
    box-shadow: 0 0 0 1px #fff inset;
  }
  .free-color-btn.color-green   { background: #dcebd5; }
  .free-color-btn.color-yellow  { background: #f5ecc4; }
  .free-color-btn.color-orange  { background: #f7e0c5; }
  .free-color-btn.color-pink    { background: #f5d5e0; }
  .free-color-btn.color-purple  { background: #e2d2ea; }
  .free-color-btn.color-blue    { background: #d5e7f4; }
  .free-color-btn.color-gray    { background: #e4e4dc; }

  /* ＋追加モーダル：注意書きの行（クラスピッカー下のヒント等） */
  .picker-note {
    margin-top: 8px;
    font-size: 12px;
    color: #6b5836;
    background: #fcf8ef;
    padding: 6px 10px;
    border-radius: 3px;
    border-left: 2px solid #d4b87f;
    display: none;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  .picker-note.show { display: block; }

  /* WebKit（auto-phrase非対応）では、長文ヒントは keep-all の緊急折り返し（禁則無視）より
     ブラウザ標準の折り返し＋line-break:strict の禁則の方が読みやすい */
  @supports not (word-break: auto-phrase) {
    .gen-warning,
    .form-hint-block,
    #editParallelRow .hint,
    .lunch-mode-tab,
    .form-row .hint {
      word-break: normal;
    }
  }

  /* form-row 内でステッパーを単独で置く時、stepper の右にヒントが来る */
  .form-row .stepper { flex: 0 0 auto; }

  /* レースクラス一括追加：練習走行／予選／決勝の行は「本数×ステッパー」が
     2組並ぶため、狭い画面では入りきらない。ステッパー＋ヒントを1組として
     まとめて折り返すことで、モーダル幅からはみ出さずに2組目が次の行へ回る。
     row-gap（折り返した2組の間隔）を column-gap（label⇔グループの間隔）より
     詰めて、同じ項目内の2組だと分かるようにする。768px以上では折り返しが
     発生しないため column-gap のみが効き、見た目は変わらない。 */
  .form-row.form-row-dual-stepper {
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 12px;
  }
  .form-row-dual-stepper .dual-stepper-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  /* 折り返しが起きうる幅（モーダルが最大幅480pxを維持できないビューポート
     ＝ 480 + オーバーレイの左右余白32px 未満）でだけ、項目間の余白を広げて
     隣の項目（予選／決勝）の2組目と混同しないようにする。
     実測（Chromium/WebKit）では折り返し自体は幅500px前後から発生するが、
     フォント幅の誤差で境界がブラウザにより数px前後するため、モーダルが
     縮み始める512px未満を安全側の閾値とした。768px以上は modal が常に
     480px幅で確定しており、このクエリの対象外＝レイアウトは変わらない。 */
  @media (max-width: 511px) {
    .form-row.form-row-dual-stepper { margin-bottom: 20px; }
  }

  /* ラベル上・内容下の縦レイアウト（クラスピッカー等の幅広パーツ向け） */
  .form-row.form-row-block {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .form-row.form-row-block > label {
    width: auto;
  }