/*
 * 管理画面の共通スタイル。
 *
 * 画面ごとに書き分けない。ここ1箇所を直せば全画面に効く。
 * 色や余白は下の変数で定義しているので、変えるときはそこだけ触る。
 */

:root {
  /* --- 色。ここだけ直せば全画面に効く --- */
  --accent:      #0066cc;   /* ボタン・リンク・選択中 */
  --accent-dark: #0055aa;   /* その文字色 */
  --accent-soft: #e8f1fb;   /* 選択中の背景 */

  --bg:          #f4f6f8;   /* 画面全体の背景 */
  --panel:       #ffffff;   /* パネル・カードの背景 */
  --head-bg:     #fafbfc;   /* 表の見出し行 */

  --text:        #1a1d21;   /* 本文 */
  --text-sub:    #5b6672;   /* 補足。読ませる気のある文字 */
  --muted:       #8b95a1;   /* 弱い補足・プレースホルダ */

  --line-strong: #cfd6de;   /* 入力欄・枠付きボタンの枠 */
  --line:        #e3e7ec;   /* 標準の枠 */
  --line-weak:   #eef1f4;   /* 行の区切り */

  --ok:          #00845c;   /* 放映中・保存済み */
  --ok-bg:       #e4f4ec;
  --ok-text:     #00654a;
  --busy:        #8a4008;   /* 変換中・未保存 */
  --busy-bg:     #fdf1e3;

  --sidebar-w:   204px;   /* 「端末のセットアップ」が1行に収まる幅 */
  /*
   * 角丸と影は**スマホとパソコンで同じ**（2026-09-17 に統一）。
   * 以前は @media の中で別々に上書きしていたが、直す場所が2つになり、
   * 片方だけ変わってずれる元になっていた。ここ1か所だけにする。
   */
  --radius:      4px;       /* ボタン・入力欄・面 */
  --radius-card: 4px;       /* パネル・カード */
  --radius-pill: 999px;     /* チップ・バッジ・押すところ */
  --radius-tap:  14px;      /* 44px角のボタン（‹ › ✕）。スマホだけで使う */

  /* 影は使わない。境界は1pxの罫線だけにする */
  --shadow: none;
}

* { box-sizing: border-box; }

/*
 * ダブルタップで拡大されるのを止める。
 *
 * スマホのブラウザは「ダブルタップ＝拡大」を既定の動きにしている。
 * ボタンを続けて2回押しただけで画面が拡大されてしまい、操作しづらい。
 * manipulation を指定すると、その拡大だけが無効になる。
 *
 * **指2本でのピンチ操作は残る。** これは意図してそうしている。
 * 完全に禁止すると、文字を大きくして読みたい人が読めなくなる。
 */
html { touch-action: manipulation; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------
   全体の骨組み：左サイドバー／中央／右プレビュー
   ------------------------------------------------------------------ */

.layout {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* --- 左：サイドバー --- */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  flex-direction: column;

  /* 一覧を下までスクロールしても、メニューは画面に残す。
     sticky を効かせるには、親に引き伸ばされない指定（align-self）が要る */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .brand {
  padding: 0 16px 14px;
  font-size: 14.5px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.sidebar .brand small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: normal;
  color: var(--muted);
}

.sidebar nav { display: flex; flex-direction: column; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0 8px;
  padding: 8px 11px;
  border-radius: var(--radius);
  color: var(--text-sub);
  text-decoration: none;
}
.sidebar nav a .nav-icon { flex-shrink: 0; color: var(--muted); }
.sidebar nav a.current .nav-icon { color: var(--accent); }
.sidebar nav a:hover { background: #f7f9fb; }

/* 今どの画面にいるかを分かるようにする */
.sidebar nav a.current {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

.sidebar .foot {
  margin-top: auto;
  padding: 12px 16px 0;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* --- 中央：各画面の中身 --- */

.main { flex: 1; min-width: 0; padding: 22px 26px 30px; }

.main h1 { font-size: 24px; font-weight: 800; letter-spacing: .01em; margin: 0 0 4px; }
.main .lead { color: var(--text-sub); margin: 0 0 18px; }

/* ------------------------------------------------------------------
   部品：見た目を全画面でそろえる
   ------------------------------------------------------------------ */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 18px;
}
.panel > h2 { font-size: 15px; font-weight: 800; margin: 0 0 10px; }

button, .btn {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  /* 押すところは完全な丸。スマホ・パソコン共通（2026-09-17） */
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--accent-dark);
  font-weight: 700;
  cursor: pointer;
}
button:hover, .btn:hover { background: #f7f9fb; }

button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}
button.primary:hover, .btn.primary:hover { background: var(--accent-dark); }

button.quiet { border-color: transparent; background: transparent; color: var(--accent-dark); }
button.quiet:hover { background: var(--accent-soft); }

button:disabled { opacity: 0.5; cursor: default; }

/*
 * ⚠ **丸いボタンの中身は、必ず中央に置くこと。**
 *
 * ‹ › ✕ ↻ ＋ は文字なので、そのままだと**文字の並ぶ位置（ベースライン）**で
 * 決まってしまい、丸の中で上や左にずれる。
 * 2026-09-17 に「＋が3.5px上にずれている」と実機で指摘された。
 * 幅と高さが同じ丸には、余白を残さないこと。
 */
.film-move, .film-off, .turn, .icon-btn, .card-more, .film-more, .dev-more,
.media-card .card-foot .ops button,
.head-tools button:has(.only-narrow) {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}

input[type=text], input[type=number], input[type=time], input[type=datetime-local], select {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
}

table { border-collapse: collapse; width: 100%; }

/*
 * 端末の表：列の幅を見出しで固定する。
 *
 * 既定だとブラウザが中身の長さを見て列幅を決めるので、
 * プレイリスト名が長い日と短い日で表の形が変わってしまう。
 * table-layout: fixed にすると、**見出しの width だけ**で決まる。
 *
 * 伸びうる列（名前・再生中）に最初から余裕を持たせ、
 * 決まった短い列（向き・素材・最終通信・削除）を詰めてある（view-devices.js）。
 */
.fixed-table { table-layout: fixed; }

/* 固定幅からはみ出す中身は、折り返さずに「…」で切る */
.fixed-table td { overflow: hidden; }
.fixed-table td > div,
.fixed-table td > span { max-width: 100%; }
.fixed-table .c-name { white-space: nowrap; }
.fixed-table .c-name > div:first-child { display: flex; gap: 6px; align-items: center; }
.fixed-table .c-sub select { max-width: 100%; }
/* 「削除」が「削 / 除」と2行に割れないようにする */
.fixed-table .c-ops { text-align: right; }
.fixed-table .c-ops button { white-space: nowrap; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-weak); }
th { font-size: 12px; color: var(--text-sub); font-weight: 700; background: var(--head-bg); border-bottom-color: var(--line); }

/* 画面幅で言葉を出し分ける。
   並びが変わるので「左の一覧から」「下の一覧から」も変える必要がある。
   ※ この基本指定は、必ず @media より前に書くこと。
      CSSは後に書いたほうが勝つので、逆にすると切り替わらない（実際に間違えた）。 */
.only-narrow { display: none; }
.only-wide   { display: inline; }

.meta  { font-size: 12px; color: var(--muted); }
.ok    { color: var(--ok); }
.busy  { color: var(--busy); }
.off   { color: var(--muted); }

/* まだ作っていない画面に出す案内 */
.placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--panel);
}

/* 通信に失敗したときの帯 */
.error-bar {
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #900;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------
   画面が狭いとき（タブレット・スマホ）
   横に3列は入らないので、縦に積む
   ------------------------------------------------------------------ */

@media (max-width: 880px) {
  .layout { flex-direction: column; min-height: 100vh; }

  /*
   * スマホでは「下タブ」にする。
   *
   * 以前は上に横並びだったが、**5つ並べると画面からはみ出し、
   * 横スクロールしないと端末画面に行けなかった**（2026-09-11 に実機で確認）。
   * 下タブなら5つ入り、親指も届く。
   */
  .sidebar {
    position: fixed;
    /* パソコン用の top: 0 を打ち消す。
       消さないと上下に引き伸ばされ、白い帯が本文を覆う（実際にやった） */
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--line);
    border-bottom: none;
    overflow: visible;
    z-index: 10;
    align-self: auto;
    /* iPhone の下端（ホームバー）にかからないようにする */
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* ブランド名とアカウント欄は、下タブでは場所がない */
  .sidebar .brand, .sidebar .foot { display: none; }

  .sidebar nav { flex-direction: row; flex: 1; }
  .sidebar nav a {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border-left: none;
    padding: 7px 2px 6px;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    /* 指で押す的は44px以上にする */
    min-height: 52px;
  }
  .sidebar nav a.current {
    border-left: none;
    background: transparent;
    color: var(--accent);
  }
  .sidebar nav a.current .nav-icon { color: var(--accent); }

  /* 下タブは46px。アイコンは出さず、名前だけにする（2語は2行に折る） */
  .sidebar nav a {
    min-height: 46px;
    padding: 5px 2px;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    gap: 0;
    border-top: 2px solid transparent;
  }
  .sidebar nav a .nav-icon { display: none; }
  .sidebar nav a.current { font-weight: 700; border-top-color: var(--accent); }

  /*
   * 余白は「各画面の部品が持つ」形にする。
   * main に付けていた16pxをやめ、帯や罫線を画面の端まで届かせるため。
   * ⚠ その代わり、板（.panel）には左右12pxの余白を持たせること。
   */
  .main { padding: 0 0 70px; }

}


/* ------------------------------------------------------------------
   素材のグリッド表示
   ------------------------------------------------------------------ */

.media-grid {
  display: grid;
  /* 画面の幅に合わせて自動で列数が変わる。狭い端末では1列になる */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.media-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.media-card:hover { border-color: var(--line-strong); }

/* サムネイル。動画は最初のコマが映る */
.media-card .shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  display: block;
  cursor: zoom-in;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.media-card .shot.none {
  display: flex; align-items: center; justify-content: center;
  background: #eee; color: var(--muted); font-size: 12px;
}

.media-card .card-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.media-card .card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
/* 「削除」が「削 / 除」と2行に割れないようにする */
.media-card .card-foot button { white-space: nowrap; flex-shrink: 0; }

/* 保存中を表す回転印（既存画面から引き継ぎ） */
/* ------------------------------------------------------------------
   拡大表示（素材をクリックしたとき）
   ------------------------------------------------------------------ */

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--panel); border-radius: var(--radius);
  padding: 14px; max-width: 94vw; max-height: 94vh; overflow: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.modal-box video, .modal-box img { max-width: 86vw; max-height: 74vh; display: block; background: #000; }

/*
 * 狭い画面での出し分け。
 *
 * ⚠ .only-wide / .only-narrow の基本指定は、この @media より前にある。
 *   CSSは後に書いたほうが勝つので、順番を逆にすると切り替わらない（実際に間違えた）。
 */
@media (max-width: 880px) {
  .only-narrow { display: inline; }
  .only-wide   { display: none; }

  /*
   * 表を「積む」：横に何列も入らない。
   *
   * ⚠ 880px にしてあるのは、**620〜880px で表が窮屈になっていた**ため
   *   （2026-09-11）。サイドバーがタブに変わるのと同じ幅に揃えた。
   */
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody { display: block; width: 100%; }

  .stack-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .stack-table tr:last-child { border-bottom: none; }

  .stack-table td { display: block; border: none; padding: 0; }

  /* 主役（プレイリスト名・端末名）は独立した1行に */
  .stack-table td.c-name {
    flex-basis: 100%;
    font-weight: bold;
    font-size: 14px;
  }
  /* 残りの項目は、その下に横並びで詰める */
  .stack-table td.c-sub { color: var(--muted); font-size: 12px; }
  /* 狭い画面では見出し行が消えるので、値の上に小さなラベルを出す */
  .stack-table td.c-sub .sub-label {
    display: block; font-size: 10px; color: var(--muted); line-height: 1.4;
  }
  .stack-table td.c-sub:empty { display: none; }
  /* グループは選ぶ欄なので、狭い画面でも出す（以前は中身が無かったので隠していた） */
  .stack-table td.c-group select { max-width: 10em; }
  /* 画面の向き。スマホでは行が縦に積まれるので、幅を抑える */
  .stack-table td.c-orient select { max-width: 10em; }

  /* 操作ボタンは右端へ寄せる */
  .stack-table td.c-ops { margin-left: auto; display: flex; gap: 4px; }
  .stack-table td.c-ops button { white-space: nowrap; }

  /* 端末画面の名前欄は、狭いと押しにくいので広げる */
  .stack-table td.c-name input[type=text] { width: auto; flex: 1; min-width: 0; }

  /* 表を積むときは、列幅の固定を解除する（幅は中身に任せる） */
  .fixed-table { table-layout: auto; }
  .fixed-table td { overflow: visible; }

}

/* 1周の合計時間。運用でいちばん見る数字なので目立たせる */
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 「編集するプレイリスト」と「新しく作る」を見た目で分ける。
   混ざっていると、削除ボタンの隣が作成用の入力欄という状態になる。 */
.picker .group-label { color: var(--muted); width: 148px; flex-shrink: 0; }

.make-new {
  margin: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.make-new input[type=text] { min-width: 200px; }

/* ------------------------------------------------------------------
   スケジュールのタイムライン（24時間の横帯）
   ------------------------------------------------------------------ */

/*
 * 配信先ごとのタイムラインの段（2026-09-11）。
 * 全部の配信先を並べて、どの端末に何が流れるかを1画面で見せる。
 */
.tl-panel > h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-panel .tl-who { font-weight: normal; }

.tl { font-size: 12px; }

.tl-head, .tl-row, .tl-detail {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: start;
}
.tl-row { padding: 8px 0; border-top: 1px solid var(--line); }

.tl-label { color: var(--text); padding-top: 3px; word-break: keep-all; }
.tl-label .sub { color: var(--muted); font-size: 11px; display: block; }

.tl-track { position: relative; }

/* 3時間ごとの目盛り線 */
.tl-grid { position: absolute; inset: 0; pointer-events: none; }
.tl-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }

.tl-lane { position: relative; height: 26px; margin-bottom: 4px; }
.tl-lane:last-child { margin-bottom: 0; }

.tl-bar {
  position: absolute; top: 0; height: 26px;
  border-radius: 3px; padding: 0 6px; line-height: 26px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: pointer; color: #fff; font-weight: 700;
}
/* 優先度の高さを色の濃さで表す。上の帯ほど優先度が高い */
.tl-bar.selected { outline: 2px solid var(--busy); outline-offset: 1px; }

/* 「すべての端末」から継いだ帯。このグループ専用ではないことを見た目で分ける */
/* 日をまたぐ帯の右端。24時で切れて翌日へ続くことを示す */

.tl-hours { position: relative; height: 16px; color: var(--muted); }
.tl-hours span { position: absolute; transform: translateX(-50%); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
/* 読み方は畳んである。常に4行出していると、色の見本が目に入りにくい */
.legend-how { margin-left: auto; height: 28px; padding: 0 10px; font-weight: 700; }
.legend-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-weak); }
.legend .chip { display: inline-flex; align-items: center; gap: 5px; }
.legend .swatch { width: 22px; height: 12px; border-radius: 2px; display: inline-block; }

/*
 * タブ。**見る画面と、直す画面を分ける。**
 * 下線で選択中を示す。枠で囲むと、その下の panel と枠が二重に見える。
 */
.tabs {
  display: flex; gap: 4px; align-items: flex-end;
  border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.tab {
  border: 0; background: transparent; border-radius: 0;
  padding: 0 14px; height: 40px; font: inherit; font-weight: 700;
  color: var(--text-sub); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { background: transparent; color: var(--text); }
.tab.on { color: var(--accent-dark); border-bottom-color: var(--accent); }

@media (max-width: 880px) {
  .tabs { margin-bottom: 12px; }
  .tab { padding: 0 10px; font-size: 13px; }
}

/* 曜日の選択 */
.days { display: flex; flex-wrap: wrap; gap: 4px; }
.days label {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 9px; cursor: pointer; user-select: none; background: #fff;
}
.days label.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.days input { display: none; }

.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.form-row > .form-label { width: 92px; color: var(--muted); flex-shrink: 0; }

/* ------------------------------------------------------------------
   スマホ（幅620px以下）での調整
   ------------------------------------------------------------------
   880px の区切りはサイドバーを横タブに変えるためのもの。
   ここはさらに狭い「手に持つ画面」向けに、情報の詰め方を変える。
   ------------------------------------------------------------------ */

@media (max-width: 620px) {

  /* --- 素材：カードを横並びにして、サムネイルを小さくする ---
     縦積みのままだと、サムネイルが画面幅いっぱいになり
     1件で画面が埋まってしまう（18件あると延々スクロールになる）。 */
  .media-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .media-card { flex-direction: row; }
  .media-card .shot {
    width: 104px;              /* 画面幅ではなく実寸で指定する */
    height: auto;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    align-self: flex-start;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
  .media-card .card-body { flex: 1; min-width: 0; padding: 8px; gap: 4px; }
  .media-card .card-foot { gap: 6px; }

  /* --- プレイリストの選択欄：区切りの「｜」は縦積みでは意味がない --- */
  .picker { row-gap: 10px; }
  .picker .sep { display: none; }
  /* 見出しは1行使って、下に操作を並べる */
  .picker .group-label { width: 100%; font-weight: bold; color: var(--text); }
  /* 選ぶ欄と入力欄は、横に並べると潰れる。それぞれ1行を使わせる */
  .picker select,
  .picker input[type=text] { flex: 1 1 100%; min-width: 0; }
  .make-new .meta { flex-basis: 100%; }

  /* --- タイムライン：曜日の列を詰める --- */
  .tl-head, .tl-row, .tl-detail { grid-template-columns: 64px minmax(0, 1fr); gap: 6px; }
  .tl-bar { font-size: 11px; padding: 0 4px; }

  /* --- フォーム：ラベルを上に置く --- */
  .form-row > .form-label { width: 100%; }
}

/* ------------------------------------------------------------------
   iPhone で入力欄を押したときに、画面が勝手に拡大されるのを防ぐ
   ------------------------------------------------------------------
   Safari は、文字の大きさが16px未満の入力欄を押すと自動で拡大する。
   本文が14pxなので、そのままだと名前を打つたびに画面が動いてしまう。
   スマホのときだけ入力欄を16pxにして、拡大の条件から外す。
   ------------------------------------------------------------------ */

@media (max-width: 880px) {
  input[type=text], input[type=number], input[type=time],
  input[type=datetime-local], select, textarea {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
   手順の箇条書き（アプリ画面）
   ------------------------------------------------------------------ */

.steps { margin: 0; padding-left: 1.4em; }
.steps > li { margin-bottom: 14px; }
.steps > li:last-child { margin-bottom: 0; }
.steps > li > .meta { margin-top: 3px; }
.steps code {
  background: var(--line-weak); border-radius: 3px; padding: 1px 5px;
  font-size: 12px;
}

/* ------------------------------------------------------------------
   1枚だけの画面（パスワードの設定・ログイン）
   ------------------------------------------------------------------ */

.single-page {
  max-width: 460px;
  margin: 8vh auto;
  padding: 0 16px;
}
.single-page .brand-title {
  font-size: 15px; font-weight: bold; margin-bottom: 12px;
}
.single-page .brand-title small {
  display: block; font-size: 11px; font-weight: normal; color: var(--muted);
}
.single-page .form-row > .form-label { width: 84px; }
.single-page input[type=password],
.single-page input[type=text] { flex: 1; min-width: 0; }

/* download.html で使う余白（インラインstyleを外に出したもの） */
.meta.spaced { margin-top: 10px; }

/* 素材が「どこで使われているか」の表示（view-media.js）。
   今まさに放映中のものを、消す前に気づけるようにするためのもの。 */
/*
 * 反時計回りに90度回すボタン。
 *
 * 角丸の四角＝素材、その右上を回る矢印＝回す向き。
 * iPhone や LINE の回転ボタンと同じ形にしてある（2026-09-11）。
 */
.turn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 8px;
  line-height: 0;
}
.turn .turn-icon { display: block; }

/* 取得中の印。件数の隣に小さく出す */
.dl-mark {
  display: inline-flex; align-items: center; color: var(--ok);
  animation: dl-pulse 1.4s ease-in-out infinite;
}
@keyframes dl-pulse { 50% { opacity: .35; } }

/* 長い名前で列が広がらないようにする */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 状態を表す小さな札。色文字より一目で分かる */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; line-height: 1.7;
  padding: 1px 8px; border-radius: var(--radius-pill);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*
 * ⚠ display を指定しているので、**JS側の hidden が効かなくなる。**
 *   （要素の既定の display:none より、クラスの指定のほうが強い）
 *   隠せるように、ここで打ち消しておくこと。
 */
.chip[hidden] { display: none; }
.chip.air  { background: var(--ok-bg); color: var(--ok-text); }          /* 今まさに流れている */
.chip.use  { background: var(--line-weak); color: var(--text-sub); }          /* プレイリストに在籍 */
.chip.free { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.chip.warn { background: var(--busy-bg); color: var(--busy); }

/* ボタンだけの行。右に寄せる */
.media-card .card-foot { justify-content: flex-end; }

/* --- ボタンが2段に割れないようにする（狭い画面） --- */
.media-card .card-foot { flex-wrap: nowrap; }
.media-card .card-foot > .meta,
.media-card .card-foot > .ok,
.media-card .card-foot > .off,
.media-card .card-foot > .busy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card .card-foot .ops { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.media-card .card-foot .ops button { padding: 4px 9px; }

/* ------------------------------------------------------------------
   キーボードで操作する人に、今どこにいるかを見せる
   ------------------------------------------------------------------
   :focus-visible は「キーボードで移動してきたとき」だけ光る。
   マウスで押したときには出ないので、見た目の邪魔にならない。
   ------------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------
   素材カードの操作ボタン：正方形にそろえる
   ------------------------------------------------------------------ */

.media-card .card-foot .ops button {
  height: 28px; padding: 0 9px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  border-color: var(--line-strong);
}
.media-card .card-foot .ops button.turn { width: 28px; padding: 0; }

/* 「この向きで保存」。横に並べると入らないので、カードの下に1本で置く */
.media-card .keep { width: 100%; height: 32px; font-size: 12px; }
/* ------------------------------------------------------------------
   指で押す場所は 44px 以上にする（スマホ）
   ------------------------------------------------------------------
   Appleの指針で、指で確実に押せる最小の大きさが 44px とされている。
   これより小さいと、隣のボタンを押してしまう。
   ------------------------------------------------------------------ */

@media (max-width: 880px) {
  button, .btn,
  input[type=text], input[type=number], input[type=time],
  input[type=datetime-local], select {
    min-height: 44px;
  }
  /* 表の中の小さなボタンまで44pxにすると行が間延びするので、そこは対象外 */
  .fixed-table button, .row-list .row-ops button { min-height: 36px; }

  .media-card .card-foot .ops button { height: 44px; }
  .media-card .card-foot .ops button.turn { width: 44px; }
  .media-card .keep { height: 44px; }

  /* 文字が小さいと読めない。本文は下げない */
  body { font-size: 15px; }
  .meta { font-size: 13px; }
}

/* ------------------------------------------------------------------
   削除など、取り消せない操作のボタン
   ------------------------------------------------------------------
   枠付きボタンの文字はすべて青（押してほしい色）にしたので、
   削除まで青いと「押していいボタン」に見えてしまう。ここだけ赤にする。
   ------------------------------------------------------------------ */

button.danger { color: #b42318; }
button.danger:hover { background: #fef3f2; border-color: #f0a8a0; }

/* ==================================================================
   画面の見出し行
   ================================================================== */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h1 { margin: 0; }
.page-head .lead { margin: 4px 0 0; }
.head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-tools:empty { display: none; }

/*
 * ⚠ スマホ専用の部品は、**既定では隠す。**
 *   @media の中で出す指定だけ書くと、パソコンにも出てしまう
 *   （2026-09-16 に、件数・2行目・「⋯」の3つで実際に起きた）。
 */
/*
 * ⚠ **スマホ専用の部品は、既定では隠す。**
 *   @media の中で「出す」指定だけ書くと、パソコンにも出てしまう
 *   （2026-09-16 に、件数・「⋯」の2つで実際にパソコン表示を崩した）。
 */
#head-count, .card-more, .film-reorder, .film-more, .film-sec-on-shot,
.dd-prio, .sum-clock, .dev-more, .su-url { display: none; }

/*
 * この2つは**スマホでもパソコンでも出す。**
 *   .card-sub    … 素材の2行目「動画 39.1 MB・ランチ」。消す前に使用先に気づくため
 *   .tl-now-text … スケジュールの行の「▶ いま流れているもの」
 */
.card-sub {
  display: block; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-card.unsaved .card-sub { color: var(--busy); font-weight: 700; }
/* 下の「種類と容量」は2行目と重複する */
.media-card .card-foot > .meta { display: none; }

.tl-now-text {
  font-size: 11.5px; font-weight: 700; color: var(--ok-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-now-text.dead { color: var(--busy); }

/* 名前で探す欄。虫眼鏡を左に重ねる */
.search-box { position: relative; display: flex; align-items: center; }
.search-box svg {
  position: absolute; left: 10px; width: 16px; height: 16px;
  color: var(--muted); pointer-events: none;
}
.search-box input {
  height: 40px; width: 200px; max-width: 100%;
  padding-left: 32px; padding-right: 10px;
}
.head-tools button, .head-tools .btn { height: 40px; padding: 0 18px; }

/* ==================================================================
   素材：ファイルを投げ込む場所
   ================================================================== */

.drop-zone {
  border: 1px dashed #a9bed6; background: #f7fafd;
  border-radius: 8px; padding: 16px; text-align: center;
  cursor: pointer; margin-bottom: 18px;
}
.drop-zone:hover { background: var(--accent-soft); }
.drop-zone.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.drop-zone .dz-main { font-size: 14.5px; font-weight: 700; color: var(--accent-dark); }
.drop-zone .dz-sub  { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.drop-zone.busy { cursor: default; border-style: solid; border-color: var(--busy); background: var(--busy-bg); }
.drop-zone.busy .dz-main { color: var(--busy); }

/* ==================================================================
   絞り込みのチップ
   ================================================================== */

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fchip {
  height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--text-sub); cursor: pointer;
}
.fchip:hover { background: #f7f9fb; }
.fchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }

/* ==================================================================
   素材のタイル
   ================================================================== */

/* 列数は画面幅で決め打ちする。
   auto-fill だと幅によって半端な列数になり、タイルの大きさが毎回変わる */
.media-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1199px) { .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width:  899px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:  767px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:  430px) { .media-grid { grid-template-columns: 1fr; } }

/* サムネイルの高さをそろえる。中身の縦横比に引きずられないようにする */
.shot-wrap {
  position: relative; height: 112px; overflow: hidden;
  background: #000; border-bottom: 1px solid var(--line);
}
.media-card .shot {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border-bottom: 0;
}

/* 動画だけ、右下に長さを出す */
.shot-badge {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(26, 29, 33, .75); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1.6;
  border-radius: 3px; padding: 1px 6px; pointer-events: none;
}

/* 名前を変えたがまだ保存していない状態 */
.media-card.unsaved { border-color: #cfe1f7; }
.shot-flag {
  position: absolute; left: 6px; top: 6px;
  background: var(--busy); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1.7;
  border-radius: var(--radius-pill); padding: 0 8px;
}

/* 一覧の下。今いくつ出ているか */
.grid-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.grid-foot .count { font-size: 13px; color: var(--muted); }
.grid-foot button { height: 34px; }

/* ==================================================================
   プレイリスト：フィルム帯
   ==================================================================
   2026-09-14 に作り直した。以前は「一覧 → 選ぶ → 編集」の2階層。
   なぜやめたかは view-playlists.js の先頭に書いてある。
   ================================================================== */

.film-list { display: flex; flex-direction: column; gap: 16px; }

.film-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden;
}

/* --- 見出し行：色の札・名前・件数・放映中・削除 --- */
.film-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px 10px;
}
/* スケジュール画面の帯と同じ色。色は js/playlist-color.js が決める */
.film-color { width: 12px; height: 22px; border-radius: 3px; flex-shrink: 0; }
/* 名前は直接打ち替える。「名前を変更」ボタンは置かない */
.film-name {
  font-size: 18px; font-weight: 800; width: 200px;
  padding: 4px 8px; border-color: transparent; background: transparent;
}
.film-name:hover { border-color: var(--line); background: #fff; }
.film-name:focus { border-color: var(--line-strong); background: #fff; }
.film-sub { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.film-del {
  margin-left: auto; height: 30px; padding: 0 12px;
  font-size: 12.5px; font-weight: 700;
}

/* --- 帯。左から順に流れる --- */
.film-strip {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 4px 14px 14px; overflow-x: auto;
}
.film-frame {
  width: 148px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 5px;
}
/* 足した・動かしたコマを光らせる。押しても何も変わらないように見えるのを防ぐ */
.film-frame.fresh { animation: row-in 1.6s ease-out; }
@keyframes row-in { from { background: var(--ok-bg); } to { background: transparent; } }

.film-shot {
  position: relative; width: 148px; height: 84px;
  border-radius: 6px; overflow: hidden;
}
/* サムネイルが出るまでの下地。真っ白で待たせない */
.film-shot.v { background: #2b3240; }
.film-shot.i { background: #4a5563; }
.film-shot img, .film-shot video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.film-no {
  position: absolute; left: 5px; top: 5px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.film-kind {
  position: absolute; right: 5px; bottom: 5px;
  padding: 0 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .5); color: #fff;
  font-size: 9.5px; font-weight: 700; font-family: ui-monospace, Menlo, monospace;
}
.film-nm { font-size: 12px; line-height: 1.4; }

.film-ops { display: flex; gap: 4px; }
.film-ops button { padding: 0; flex-shrink: 0; }
.film-move {
  width: 30px; height: 30px; border-radius: 5px;
  border-color: var(--line-strong); color: var(--accent-dark);
  font-size: 15px; font-weight: 800;
}
.film-gap { flex: 1; }
.film-off {
  width: 30px; height: 30px; border-radius: 5px;
  font-size: 13px; font-weight: 700;
}

.film-sec {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--muted);
}
.film-sec input {
  /*
   * ⚠ 上下の矢印は欄の右端に出る。**右の余白を詰めて矢印を端へ寄せ、
   *   数字の場所を空けること。** 既定の9pxのままだと2桁で数字と矢印が重なる
   *   （伊藤さんの指摘・2026-09-17）。
   */
  width: 58px; height: 28px; text-align: right;
  padding-right: 2px;
  font-size: 12px; font-weight: 700;
}

/* --- 帯の末尾の空きコマ --- */
.film-add {
  width: 148px; height: 84px; flex-shrink: 0;
  border: 2px dashed #a9bed6; border-radius: 6px; background: #f7fafd;
  color: var(--accent-dark); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.film-add:hover { background: var(--accent-soft); border-color: var(--accent); }
.film-add.on { border-color: var(--accent); background: var(--accent-soft); }
.film-add .plus { font-size: 26px; font-weight: 300; line-height: 1; }
.film-add .cap { font-size: 11.5px; font-weight: 700; }

/* --- 素材の棚。「＋」を押したとき、そのカードの中に開く --- */
.film-pick {
  border-top: 1px solid #bcd6f3; background: #f2f7fd;
  padding: 11px 14px 13px;
}
.film-pick-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.film-pick-search { width: 220px; }
.film-pick-done { margin-left: auto; height: 32px; padding: 0 16px; }
/*
 * 棚は**縦スクロール。**帯そのものが横スクロールなので、
 * 棚まで横に流すと、どちらを動かしているのか分からなくなる。
 */
.film-pick-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; max-height: 300px; overflow-y: auto; align-content: start;
}
.film-cell {
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  padding: 0 0 7px; cursor: pointer; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.film-cell:hover { border-color: var(--accent); }
/* すでにこの帯に入っているものは枠で示す。二重に足しにくくする */
.film-cell.used { border-color: var(--ok); }
.film-cell-shot { position: relative; width: 100%; height: 48px; }
.film-cell-shot.v { background: #2b3240; }
.film-cell-shot.i { background: #4a5563; }
.film-cell-shot img, .film-cell-shot video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.film-cell-nm { font-size: 11.5px; padding: 5px 7px 0; }
.film-cell-cap { font-size: 11px; color: var(--muted); padding: 0 7px; }
.film-cell-chip { align-self: flex-start; margin: 2px 0 0 7px; }

/* --- 新しいプレイリスト --- */
.film-new {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.film-new label { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.film-new-line { display: flex; gap: 8px; flex-wrap: wrap; }
.film-new-line input[type=text] { flex: 1; min-width: 180px; }

/* --- 狭い画面（375pxから）--- */
@media (max-width: 880px) {
  /* カードは左右いっぱいに。狭い画面で左右の余白に幅を取られない */
  .film-card {
    margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0;
    padding: 12px 0 14px;
  }
  .film-head { padding: 0 16px 10px; }
  .film-name { flex: 1; min-width: 0; width: auto; font-size: 17px; }
  .film-strip { padding: 0 16px 4px; }
  .film-frame { width: 138px; }
  .film-shot { width: 138px; height: 78px; }
  /* 指で押す的は44px以上。‹ › ✕ を3等分する */
  .film-ops button { flex: 1; width: auto; height: 44px; }
  .film-gap { display: none; }
  /* ⚠ 16px未満にするとiOSが勝手に拡大する。16pxは必須 */
  .film-sec input { width: 62px; height: 36px; font-size: 16px; padding-right: 2px; }
  .film-add { width: 138px; height: 78px; }
  .film-pick { margin-top: 4px; }
  .film-pick-search { flex: 1; min-width: 0; height: 40px; font-size: 16px; }
  .film-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 330px; }
  .film-new { margin-bottom: 14px; }
}

/* ------------------------------------------------------------------
   素材タイルの中身
   ------------------------------------------------------------------ */

.media-card .card-body { padding: 9px 10px 10px; gap: 7px; }

/*
 * 名前の欄。ふだんは文字に見え、触ると入力欄になる。
 * 枠を常に出すと、タイルが5つ並んだときに枠だらけになって読みにくい。
 */
.media-card .card-name {
  width: 100%; padding: 2px 4px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid transparent; background: transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-card .card-name:hover { border-color: var(--line); background: #fff; }
.media-card .card-name:focus { border-color: var(--line-strong); background: #fff; }

/* 左に種類と容量、右にボタン */
.media-card .card-foot { justify-content: space-between; min-height: 28px; }
.media-card .card-foot > .meta { font-size: 11.5px; }

/* サムネイルの左上に積む札 */
.shot-flags {
  position: absolute; left: 6px; top: 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.shot-flag { position: static; }
.shot-flag.air { background: var(--ok); }

/* ------------------------------------------------------------------
   端末の向き：回してから保存する
   ------------------------------------------------------------------ */

.c-orient .orient-label.pending { color: var(--busy); font-weight: 700; }
.c-orient .keep-orient {
  width: 100%; height: 26px; margin-top: 5px;
  padding: 0 4px; font-size: 11px; white-space: nowrap;
}

/* ------------------------------------------------------------------
   端末の表：行を読み分けやすくする
   ------------------------------------------------------------------ */

.fixed-table tbody tr { height: 58px; }
.fixed-table tbody tr:nth-child(even) { background: #f7f9fb; }

/* 応答が無い・古い、を表す文字 */
.warn-text { color: var(--busy); font-weight: 700; }

/* 絞り込みのチップは、表のすぐ上に置く */
.filter-chips + div .panel { margin-top: 0; }

@media (max-width: 880px) {
  /* 縦に積むので、行の高さは中身に任せる */
  .fixed-table tbody tr { height: auto; }
}

/* ==================================================================
   スケジュール：今日、どの端末に何が流れるか
   ================================================================== */

/* いま流れているものの要約カード */
/*
 * 「いま放映中」の1行。
 * 以前はプレイリストごとにカードを並べていたが、種類が増えると横に伸びて
 * タイムラインが下へ押し出された。**1行に収める。**
 */
.sched-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-bottom: 18px;
}
.sum-label { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.sum-item { display: inline-flex; align-items: center; gap: 7px; }
.sum-item .swatch {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
}
.sum-name { font-size: 15px; font-weight: 700; }
.sum-count { font-size: 13px; color: var(--text-sub); }

/* 端末の行。押すと下に内訳が出る */
.dev-label {
  border: 0; background: transparent; border-radius: 0;
  text-align: left; font: inherit; cursor: pointer;
  padding: 3px 6px 0 0; color: var(--text); font-weight: 700;
  /* 三角のぶんの列を取る。名前と「グループ未設定」は三角の右にそろえる */
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 4px;
  align-items: start;
}
.dev-label:hover { background: #f7f9fb; }
.dev-label-text { min-width: 0; }

/*
 * 開けることを示す三角。
 *
 * 文字の「▶」ではなく枠線で描いている。**文字は端末ごとに大きさと位置が変わる**ため。
 * 開いた行では90度回して下を向く。
 */
.dev-label .tri {
  width: 0; height: 0; margin: 5px 0 0 2px;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  color: var(--muted);
  transform-origin: 2px 50%;
  transition: transform .12s ease;
}
.dev-label:hover .tri { color: var(--text-sub); }
.dev-row.on .dev-label .tri { transform: rotate(90deg); color: var(--accent-dark); }
.dev-row.on { background: var(--accent-soft); }
.dev-row.on .dev-label { color: var(--accent-dark); }

/* 応答が無い端末。流れている保証が無いので、帯を描かず斜線にする */
.tl-lane.dead {
  background: repeating-linear-gradient(135deg,
    #f3f4f6 0 6px, #e7e9ed 6px 12px);
  border-radius: 3px;
}
.tl-lane .dead-note {
  position: absolute; left: 8px; top: 4px;
  font-size: 12px; font-weight: 700; color: var(--busy);
}

/* 今この瞬間を示す縦線 */
.tl-now {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: #d92d20; pointer-events: none; z-index: 2;
}

/* 選んだ端末の内訳 */
/*
 * 端末の内訳。**押した行のすぐ下**に出す（2026-09-16）。
 * 一番下に出していたときは、どの端末の内訳なのか離れていて分からなかった。
 * 左に青い縦線を引いて、上の行から続いていることを示す。
 */
.tl-detail { padding: 2px 0 10px; }
.dd-body {
  background: #f7fafd; border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 10px 14px;
}
.dev-detail { display: flex; flex-direction: column; gap: 2px; }
.dd-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line-weak);
}
.dd-row:last-child { border-bottom: 0; }
.dd-time { font-size: 13px; color: var(--text-sub); width: 110px; flex-shrink: 0; }
.dd-name { font-size: 14px; font-weight: 700; }
.dd-lost { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dd-lost-head { font-size: 13px; font-weight: 700; color: var(--busy); margin-bottom: 6px; }

@media (max-width: 880px) {
  .dd-body { padding: 9px 10px; }
  /* 時刻の欄を詰める。110pxのままだと、狭い画面で名前が入らない */
  .dd-time { width: 96px; font-size: 12.5px; }
}

/* ------------------------------------------------------------------
   サイドバー：項目名を1行に収める
   ------------------------------------------------------------------
   「端末のセットアップ」が2行に折れていた。幅を少し広げ、
   折り返しを止めて、入りきらないときだけ「…」で切る。
   ------------------------------------------------------------------ */

.sidebar nav a {
  white-space: nowrap; overflow: hidden;
  font-size: 13.5px;
}

/* ------------------------------------------------------------------
   グループの編集欄：1グループ＝1行
   ------------------------------------------------------------------ */

.group-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line-weak);
}
.group-row:last-child { border-bottom: 0; }
.group-row input[type=text] { flex: 1; min-width: 0; }
.group-count { width: 48px; flex-shrink: 0; text-align: right; }
.group-new { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 6px; padding-top: 12px; }

/* 端末がまだ入っていないグループの行 */
.dev-row.no-device .dev-label { color: var(--text-sub); }
.dev-row.no-device .tl-lane { opacity: .55; }

/* ------------------------------------------------------------------
   スケジュールの帯：中身は白寄り、左の縁の太さが優先度
   ------------------------------------------------------------------ */


/* 凡例の見本も同じ形にする */
.legend .swatch { height: 14px; width: 26px; }

/* 承認待ちの端末。ここで承認するまで、その端末には何も渡っていない */
.waiting-box { border-color: var(--busy); border-width: 2px; }
.waiting-box > h2 { color: var(--busy); }

/* ------------------------------------------------------------------
   操作の記録
   ------------------------------------------------------------------ */

.audit-table .act { font-weight: 700; }
/* 取り消せない操作（削除・承認）は目立たせる */
.audit-table tr.heavy .act { color: var(--busy); }
.audit-table tbody tr { height: auto; }
.audit-table td { padding: 9px 10px; }


/* ==================================================================
   パソコン表示（881px以上）(2026-09-17)
   ==================================================================
   ⚠ 必ず「ここから下はスマホ用」の見出しより前に置くこと。
     スマホ用の指定は後ろにあり、**後に書いたほうが勝つ。**

   角丸・影・丸いボタン・アイコンの中央寄せ・素材の2行目・
   「いま流れているもの」は**共通**なので、ここには書いていない
   （ファイル先頭の :root と、部品の指定にある）。
   ================================================================== */

@media (min-width: 881px) {

  .main { padding: 18px 24px 24px; }
  .main h1 { font-size: 20px; }

  /* 画面名・件数・補足を1行に並べる。見出しだけで3行使っていた */
  .page-head { align-items: center; margin-bottom: 12px; }
  .page-head #head-text { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .page-head .lead { margin: 0; font-size: 12.5px; color: var(--muted); }

  .panel { padding: 12px 14px; margin-bottom: 12px; }
  .panel > h2 { font-size: 14px; margin-bottom: 8px; }

  button, .btn { height: 32px; padding: 0 16px; white-space: nowrap; }
  .head-tools button, .head-tools .btn { height: 34px; padding: 0 18px; font-size: 13px; }
  .search-box input { height: 34px; }
  .fchip { height: 30px; font-size: 12.5px; }
  .filter-chips { margin-bottom: 12px; }
  .grid-foot { margin-top: 10px; }
  .grid-foot button { height: 30px; }

  /* 表：見出しは弱く、行のゼブラをやめて罫線だけにする */
  th, td { padding: 7px 10px; }
  th { font-size: 11.5px; color: var(--muted); }
  .fixed-table tbody tr { height: 48px; }
  .fixed-table tbody tr:nth-child(even) { background: transparent; }

  /* ---------------- 1 素材 ---------------- */

  /* 投げ込み枠は残す（パソコンではドラッグが主な使い方）。3行を1行にする */
  .drop-zone {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 40px; padding: 0 14px; margin-bottom: 12px;
  }
  .drop-zone .dz-main { font-size: 13.5px; }
  .drop-zone .dz-sub { margin-top: 0; font-size: 12.5px; }

  .media-grid { gap: 12px; }
  .shot-wrap { height: 96px; }             /* 変更前 112px */
  .media-card .card-body { padding: 7px 9px 8px; gap: 1px; }
  .media-card .card-name { font-size: 13.5px; padding: 1px 3px; }
  .card-sub { font-size: 11.5px; color: var(--text-sub); }
  .media-card .card-foot { min-height: 26px; margin-top: 4px; }
  .media-card .card-foot .ops button { height: 26px; }
  .media-card .card-foot .ops button.turn { width: 26px; }
  .media-card .keep { height: 30px; }

  /* ---------------- 2 プレイリスト ---------------- */

  .film-list { gap: 12px; }
  .film-head { padding: 10px 14px 8px; gap: 10px; }
  .film-color { width: 4px; height: 18px; border-radius: 2px; }
  .film-name { font-size: 17px; }
  .film-del { height: 28px; }
  .film-strip { padding: 2px 14px 12px; gap: 10px; }

  /*
   * ‹ › ✕ と秒数を同じ行に置く。段を分けていたぶん（約30px×3本）が
   * そのまま画面の縦幅に効く。**HTMLは変えない。**置き場所だけ決める。
   */
  /*
   * ⚠ コマの幅は、1段に収める中身から逆算すること。
   *
   *   ‹ › ✕（26px×3＋隙間4px×2）= 86px
   * ＋ 隙間 4px
   * ＋ 秒数 78px（入力欄58px ＋「秒」16px ＋ 隙間4px）
   * ───────────────────────────────
   *   168px
   *
   * 設計書は140pxだったが、**秒数が「1(」と切れ、動画の
   * 「18秒（動画）」が隣のボタンに重なった**（2026-09-17 に実測）。
   * 入力欄58pxは、上下の矢印と数字が重ならない幅（2026-09-17 に確定）。
   */
  .film-frame {
    width: 168px;
    display: grid; grid-template-columns: auto 1fr; gap: 4px; align-content: start;
  }
  .film-shot, .film-nm { grid-column: 1 / -1; }
  .film-shot { width: 168px; height: 95px; }
  .film-ops { grid-column: 1; }
  .film-sec { grid-column: 2; justify-self: end; white-space: nowrap; }
  .film-gap { display: none; }
  /* ⚠ flex-shrink: 0 を忘れないこと。3つ並べると潰れて楕円になる */
  .film-move, .film-off { width: 26px; height: 26px; flex-shrink: 0; }
  .film-sec input { width: 58px; height: 26px; flex-shrink: 0; padding-right: 2px; }
  .film-add { width: 168px; height: 95px; border-width: 1px; }

  /* ---------------- 3 スケジュール ---------------- */

  .sched-summary {
    margin-bottom: 10px; padding: 8px 14px; gap: 8px 16px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  }

  /* 端末名の列を 96px → 168px。3行ぶんの情報を入れる */
  .tl-head, .tl-row, .tl-detail { grid-template-columns: 168px minmax(0, 1fr); }
  .tl-row { padding: 7px 0; border-top: 1px solid var(--line-weak); }
  .tl-label .sub { font-size: 11.5px; }
  /*
   * 端末名の欄は、パソコンでは**格子をやめて素直に積む。**
   *
   * 2列の格子のままだと「いま流れているもの」が2段目に入り、
   * その段の高さが確保されず**下の行へはみ出して重なった**（2026-09-17 に実測）。
   * 三角だけ左に浮かせれば、名前・グループ・いま流れているもの が素直に縦に並ぶ。
   */
  /*
   * ⚠ 上の `button { height: 32px }` をここで解除すること。
   *   端末名のボタンは中身が3行（名前・グループ・いま流れているもの）で58pxある。
   *   32pxに押し込まれ、**下の行へはみ出して重なった**（2026-09-17 に実測）。
   */
  .dev-label {
    display: block; position: relative; height: auto;
    padding: 2px 6px 0 16px; white-space: normal;
  }
  .dev-label .tri { position: absolute; left: 2px; top: 8px; margin: 0; }
  .tl-now-text { display: block; }
  .tl-lane { height: 23px; }
  .tl-bar { height: 23px; line-height: 23px; font-size: 11.5px; }

  /* ---------------- 4 端末とグループ ---------------- */

  /*
   * 列そのものは残す（パソコンは列が揃っているほうが読みやすい）。
   * 減らすのは**目で追う列の数**で、「素材」は「再生中」の下へ寄せる。
   * 表を grid にして置き場所だけ決める。**HTMLは変えない。**
   */
  .dev-table, .dev-table thead, .dev-table tbody { display: block; width: 100%; }
  .dev-table thead tr,
  .dev-table tbody tr:not(.dev-group-head) {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 140px 120px 200px 120px 84px;
    gap: 2px 12px; align-items: center;
    height: auto; padding: 8px 14px;
  }
  .dev-table th, .dev-table td { padding: 0; border: 0; overflow: visible; }
  /*
   * ⚠ 見出しの幅は HTML に直接書いてある（width:12% など）。
   *   grid にすると、その幅が効いて**見出しが1文字ずつ縦に折れる。**
   *   直接書かれた指定を打ち消すには !important が要る。
   */
  .dev-table th { width: auto !important; white-space: nowrap; }
  .dev-table thead tr { padding: 7px 14px; background: var(--head-bg); border-bottom: 1px solid var(--line); }
  .dev-table tbody tr:not(.dev-group-head) { border-bottom: 1px solid var(--line-weak); }
  .dev-table th:nth-child(6) { display: none; }          /* 「素材」の見出しは要らない */
  .dev-table td.c-media {                                 /* 素材の件数は再生中の下へ */
    grid-column: 5; grid-row: 2; font-size: 11.5px; color: var(--muted);
  }
  .dev-table td.c-name input[type=text] { height: 28px; max-width: 230px; }
  .dev-table td.c-name .meta { font-size: 11.5px; }
  .dev-table td.c-ops { text-align: right; }
  .dev-table td.c-ops button { height: 28px; padding: 0 13px; }
  .dev-table .c-orient .keep-orient { height: 24px; margin-top: 4px; }

  /* 注意書きは板ではなく帯にする。本題の一覧を下へ押し出さない */
  .waiting-box { border-width: 1px; padding: 9px 14px; }
  .waiting-box > h2 { font-size: 13px; margin-bottom: 4px; }
  .dev-unnamed { padding: 8px 14px; }

  /* ---------------- 5 操作の記録 ---------------- */

  .audit-table td { padding: 6px 10px; }
  .audit-table .act { font-size: 14px; }
  /* 「誰が」「結果」は今はほぼ全行が同じ値。弱くして本文を読みやすくする */
  .audit-table tbody td:nth-child(4),
  .audit-table tbody td:nth-child(5) { font-size: 12px; color: var(--muted); }
  .audit-table .ok { color: var(--muted); font-weight: 400; }
  .audit-table .warn-text { color: #900; }
  /* 取り消せない操作と失敗だけ、左の縦線で立たせる（スマホと同じ言葉） */
  .audit-table tbody tr.heavy td:first-child { box-shadow: inset 3px 0 0 var(--busy); }
  .audit-table tbody tr:has(.warn-text) td:first-child { box-shadow: inset 3px 0 0 #d92d20; }
  /* 日付の見出し行 */
  .audit-table tr.log-day-row td {
    padding: 5px 10px; background: #f7f9fb;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-weak);
    font-size: 12px; font-weight: 800; color: var(--text-sub);
  }
  .audit-table tr.log-day-row .n { font-weight: 400; color: var(--muted); margin-left: 9px; }

  /* ---------------- 6 端末のセットアップ ---------------- */

  /*
   * 左に手順、右に「打ち込むアドレス」と「アプリ」。
   * 説明書きではなく、**手を動かしながら見る台**として並べ替える。
   * **HTMLは変えない。** view-app.js が置く3つの箱を2列に配るだけ。
   */
  .main > div:has(> .su-url) {
    display: grid; grid-template-columns: minmax(0, 1fr) 352px;
    gap: 0 16px; align-items: start;
  }
  .main > div:has(> .su-url) > .su-url {
    display: block; grid-column: 2; grid-row: 1;
    margin: 0 0 12px; padding: 12px 14px 13px;
    border: 1px solid #cfe1f7; background: var(--panel); border-radius: var(--radius);
  }
  .main > div:has(> .su-url) > .su-url .cap {
    font-size: 12.5px; font-weight: 700; color: var(--accent-dark); margin-bottom: 7px;
  }
  .main > div:has(> .su-url) > .su-url .addr {
    padding: 10px 12px; background: #f2f7fd;
    border: 1px solid #cfe1f7; border-radius: var(--radius);
    /* 40文字のアドレスが352pxの列に1行で収まる大きさ。
       折り返しても横に切れても、現地で打ち間違える */
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; white-space: nowrap;
  }
  .main > div:has(> .su-url) > .su-url .note {
    font-size: 12px; color: var(--text-sub); margin-top: 7px; line-height: 1.7;
  }
  /*
   * ⚠ 並び順で指定しないこと。:nth-of-type は**divの順番**を数えるので、
   *   .su-url もdivである以上、1つずれる（実際に左右が逆になった）。
   *   クラスで名指しする。
   */
  .su-app { grid-column: 2; grid-row: 2; margin: 0; }
  .su-steps { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding: 4px 16px 8px; }

  /* 手順：番号を面として立て、本文と注意書きを分ける */
  .steps { padding-left: 0; list-style: none; counter-reset: step; }
  .steps > li {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px;
    margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line-weak);
  }
  .steps > li:last-child { border-bottom: 0; }
  .steps > li::before {
    counter-increment: step; content: counter(step);
    width: 26px; height: 26px; border-radius: var(--radius);
    background: var(--accent-soft); color: var(--accent-dark);
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  .steps > li > strong { font-size: 15px; }
  .steps > li > .meta { grid-column: 2; margin-top: 3px; font-size: 12.5px; line-height: 1.8; }
  .steps code { font-family: ui-monospace, Menlo, monospace; }
}


/* ==================================================================
   ⚠ ここから下は「スマホ用」。**必ずファイルの末尾に置くこと。**
   ==================================================================
   CSSは、同じ強さの指定なら**後に書いたほうが勝つ。**
   スマホ用を途中に置くと、そのあとに出てくるパソコン用の指定に
   黙って負ける（2026-09-16 に .fchip と .card-foot で実際に起きた）。
   新しくスマホ用の指定を足すときも、必ずこの下に足すこと。
   ================================================================== */

/* ==================================================================
   スマホの共通の作り（2026-09-16）
   ==================================================================
   ⚠ **すべて @media の中に書くこと。**
     パソコン表示（881px以上）は今のまま変えない、と決めている。
     :root の変数もここで上書きする（先頭の :root は触らない）。
   ================================================================== */

@media (max-width: 880px) {

  /* --- 1行の見出し --- */
  .page-head {
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    /*
     * ⚠ 高さを先に確保しておく。
     *
     * 右の道具（検索・追加）は**読み込みが終わってから**入る。
     * 場所を取っておかないと、入った瞬間に見出しが 44px → 61px に伸び、
     * 下の中身がまるごと跳ねる（実機で指摘された・2026-09-17）。
     *   8px + 44px（ボタンの高さ）+ 8px + 下の罫線1px = 61px
     *   （box-sizing: border-box なので、罫線のぶんも min-height に含める）
     */
    min-height: 61px;
  }
  .page-head #head-text {
    display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1;
  }
  .main h1 { font-size: 17px; }
  /* 説明文はスマホでは出さない。かわりに件数だけを画面名の右に出す */
  .page-head .lead { display: none; }
  #head-count { display: inline; font-size: 13px; color: var(--muted); white-space: nowrap; }
  #head-count:empty { display: none; }
  .head-tools { flex-wrap: nowrap; gap: 6px; flex-shrink: 0; }

  /* --- 押すところ --- */
  button, .btn { min-height: 44px; padding: 0 18px; }
  .head-tools button, .head-tools .btn { height: 44px; padding: 0 16px; }
  /* 44px角のアイコンボタン。「＋」だけのボタンもこの幅にそろえる */
  .icon-btn { width: 44px; padding: 0; }
  .head-tools button:has(.only-narrow) { width: 44px; }
  .head-tools button .only-narrow { font-size: 19px; line-height: 1; display: block; }

  /*
   * 検索欄は44×44に畳んでおき、押したときだけ広がる。
   * 畳まないと画面名が押し出され、「素／材」と2行に折れる（実際に起きた）。
   */
  .head-tools .search-box { width: 44px; }
  .head-tools .search-box svg { left: 13px; }
  .head-tools .search-box input {
    width: 44px; padding: 0; opacity: 0;
    min-height: 44px; border-radius: var(--radius-pill);
  }
  .head-tools .search-box.on { flex: 1; min-width: 0; }
  .head-tools .search-box.on input { width: 100%; padding: 0 12px 0 38px; opacity: 1; }
  /* 検索を開いている間は、画面名を引っ込めて幅を譲る */
  .page-head:has(.search-box.on) #head-text { display: none; }

  /* ⚠ 入力欄の文字は16pxを下回らせない。iOSが勝手に画面を拡大する */
  input[type=text], input[type=number], input[type=time],
  input[type=datetime-local], select, textarea {
    font-size: 16px; min-height: 44px; border-radius: 12px;
  }

  /* --- 画面の中の板は、左右12pxの余白を自分で持つ --- */
  .panel { margin: 10px 12px; }

  /* --- 4等分のタブ（絞り込み・今日の流れ／設定一覧） --- */
  .m-tabs {
    display: flex; background: var(--head-bg);
    border-bottom: 1px solid var(--line); margin: 0;
  }
  .m-tabs button {
    flex: 1; min-width: 0; height: 40px; min-height: 40px; padding: 0 4px;
    border: 0; border-radius: 0; background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 700; color: var(--text-sub);
  }
  .m-tabs button.on {
    background: var(--panel); color: var(--accent-dark);
    border-bottom-color: var(--accent);
  }

  /* ================================================================
     素材：1画面に何件入るかを優先して、タイルをやめ1行にする
     ================================================================ */

  /* 絞り込みは4等分のタブにする（ピルのままだと2段に折れて場所を取る） */
  .filter-chips {
    display: flex; gap: 0; flex-wrap: nowrap; margin: 0;
    background: var(--head-bg); border-bottom: 1px solid var(--line);
  }
  .fchip {
    flex: 1; min-width: 0; height: 40px; min-height: 40px; padding: 0 2px;
    border: 0; border-radius: 0; background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 13px; white-space: nowrap; overflow: hidden;
  }
  .fchip.on {
    background: var(--panel); color: var(--accent-dark);
    border-bottom-color: var(--accent);
  }

  /* 投げ込み枠はスマホでは出さない。「＋ 素材を追加」がファイル選びを開く */
  .drop-zone { display: none; }

  /* 1列。カード＝1行 */
  .media-grid { grid-template-columns: 1fr; gap: 0; }
  .media-card {
    display: flex; align-items: center; gap: 10px;
    border: 0; border-bottom: 1px solid var(--line-weak); border-radius: 0;
    padding: 7px 12px; background: var(--panel);
  }

  /* サムネイルは 78×44 に固定。縦横比をそろえて、行の高さを一定に保つ */
  .media-card .shot-wrap {
    width: 78px; height: 44px; flex-shrink: 0;
    border: 0; border-radius: var(--radius); overflow: hidden;
  }
  .media-card .shot { border-radius: var(--radius); }
  .media-card .shot-badge { font-size: 10px; padding: 0 4px; border-radius: 2px; }
  .media-card .shot-flags { left: 3px; top: 3px; gap: 2px; }
  .media-card .shot-flag { font-size: 9.5px; padding: 0 4px; border-radius: 2px; }

  .media-card .card-body {
    flex: 1; min-width: 0; padding: 0; gap: 1px;
    display: flex; flex-direction: column;
  }

  /* 名前は「読むもの」。枠も背景も出さない（打ち替えは「⋯」から） */
  .media-card .card-name {
    min-height: 0; height: auto; padding: 0; font-size: 15px; font-weight: 700;
    border-color: transparent; background: transparent; border-radius: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .media-card .card-name:read-only { cursor: default; }
  .media-card.open .card-name {
    border-color: var(--line-strong); background: var(--panel);
    border-radius: 12px; min-height: 44px; padding: 0 10px; font-size: 16px;
  }


  /* 「⋯」。ふだん使わない操作は、押したときだけ出す */
  .card-more {
    display: block; width: 44px; min-height: 44px; flex-shrink: 0; padding: 0;
    border: 0; background: transparent; color: var(--muted); font-size: 20px;
  }
  .media-card .card-foot { display: none; }
  .media-card.open { flex-wrap: wrap; background: #f7fafd; }
  .media-card.open .card-foot {
    display: flex; flex-basis: 100%; justify-content: flex-end; margin-top: 6px;
  }
  .media-card.open .card-foot .ops { gap: 8px; }

  /* 回したあとの「この向きで保存」は、行の下に帯として出す */
  .media-card .keep {
    flex-basis: 100%; margin-top: 6px; width: 100%;
    background: var(--busy-bg); border-color: var(--busy); color: var(--busy);
  }

  /* ================================================================
     プレイリスト：ふだんは見るだけ。直すときだけ操作を出す
     ================================================================ */

  .film-list { gap: 0; }
  .film-card { margin: 0; padding: 0 0 10px; }

  /* --- 見出しを1行に収める --- */
  .film-head { padding: 8px 12px 6px; gap: 8px; flex-wrap: nowrap; }
  .film-color { width: 3px; height: 20px; border-radius: 1px; }
  .film-name {
    flex: 1; min-width: 0; width: auto; font-size: 16px; font-weight: 800;
    min-height: 0; height: auto; padding: 2px 4px; border-radius: 4px;
  }
  /* 件数と1周は同じ行の右端に置く（下へ回すと3行になる） */
  .film-sub { margin-left: auto; flex-shrink: 0; font-size: 13px; }
  .film-more {
    display: block; width: 32px; min-height: 32px; flex-shrink: 0; padding: 0;
    border: 0; background: transparent; color: var(--muted); font-size: 20px;
  }
  /* 「並べ替え」と「削除」は「⋯」を押したときだけ出す */
  .film-head .film-reorder, .film-head .film-del { display: none; }
  .film-head.menu { flex-wrap: wrap; }
  .film-head.menu .film-reorder, .film-head.menu .film-del {
    display: block; min-height: 40px; height: 40px; padding: 0 14px; font-size: 13px;
  }
  .film-head.menu .film-reorder { margin-left: auto; }
  .film-head.menu .film-del { margin-left: 0; }

  /* --- 見るだけ（既定） --- */
  .film-strip { padding: 0 12px 10px; gap: 6px; }
  .film-frame { width: 104px; }
  .film-shot { width: 104px; height: 59px; }
  .film-no { left: 4px; top: 4px; min-width: 17px; height: 17px; border-radius: 2px; font-size: 11px; }
  .film-kind { display: none; }
  .film-sec-on-shot {
    display: block; position: absolute; right: 4px; bottom: 4px;
    padding: 0 4px; border-radius: 2px; background: rgba(0, 0, 0, .6);
    color: #fff; font-size: 10px; font-weight: 700;
  }
  .film-nm { font-size: 11.5px; color: var(--text-sub); }
  /* 見るだけのときは操作を出さない。**コマより部品のほうが場所を取っていた** */
  .film-card:not(.reorder) .film-ops,
  .film-card:not(.reorder) .film-sec { display: none; }
  .film-add { width: 56px; height: 59px; border-width: 1px; }
  .film-add .plus { font-size: 22px; }
  .film-add .cap { display: none; }

  /* --- 並べ替え中 --- */
  .film-card.reorder { background: #f7fafd; }
  .film-card.reorder .film-frame { width: 138px; }
  .film-card.reorder .film-shot { width: 138px; height: 78px; }
  .film-card.reorder .film-sec-on-shot { display: none; }
  .film-card.reorder .film-add { width: 138px; height: 78px; }
  .film-card.reorder .film-add .cap { display: block; }
  /* ‹ › ✕ は44px角。指の的をそろえる */
  .film-ops button {
    width: 44px; height: 44px; min-height: 44px; flex: 0 0 auto; padding: 0;
    border-radius: var(--radius-tap);
  }
  .film-gap { display: none; }
  .film-sec input { width: 68px; height: 44px; font-size: 16px; border-radius: 12px;
                    padding-right: 2px; }

  /* 素材の棚 */
  .film-pick { padding: 10px 12px 12px; }
  .film-cell { border-radius: var(--radius); }

  /* ================================================================
     スケジュール：端末名の列をやめ、帯を画面の全幅に出す
     ================================================================ */

  /* 要約は板をやめ、1本の帯にする */
  .sched-summary {
    margin: 0; padding: 7px 12px; border: 0; border-radius: 0; box-shadow: none;
    background: #f7fafd; border-bottom: 1px solid var(--line);
    gap: 6px 12px;
  }
  .sum-clock { display: inline; font-size: 12px; font-weight: 700; color: var(--text-sub); }
  .sum-label { display: none; }   /* 時刻があれば「いま放映中」は要らない */

  .tl-panel { margin: 0; padding: 0; border: 0; border-radius: 0; }
  .tl-panel > h2 { padding: 8px 12px 0; margin: 0; }

  /*
   * 端末名の列（96px）をやめ、**名前を上、帯を下**の2段にする。
   * 375pxでは列に取られると帯が250pxほどになり、3時間の帯に文字が入らない。
   */
  /* 目盛りは帯と同じ幅に置く。列が無くなったので全幅でよい */
  .tl-head { display: block; padding: 0 12px; }
  .tl-head .tl-label { display: none; }
  /* 0 / 6 / 12 / 18 / 24 だけ出す。3時間ごとだと375pxでは数字が重なる */
  .tl-hours span:nth-child(even) { display: none; }
  .tl-row, .tl-detail { display: block; }
  .tl-row { padding: 8px 12px 6px; border-top: 0; border-bottom: 1px solid var(--line-weak); }

  .dev-label {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 0 0 5px; min-height: 0;
  }
  .dev-label .tri { margin-top: 0; }
  .dev-label-text {
    display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0;
    font-size: 14px;
  }
  .tl-label .sub { display: inline; font-size: 12px; font-weight: 400; }
  .tl-now-text { display: inline; flex-shrink: 0; font-size: 12px; }

  .tl-lane { height: 24px; }
  .tl-bar { height: 24px; font-size: 11px; padding: 0 3px; line-height: 24px; }
  /* 帯が狭いので優先度は書かない。優先度は下の内訳の右端に出す */
  .bar-prio { display: none; }
  /* 目盛りは6時間ごと。3時間ごとだと線が多すぎて帯が読みにくい */
  .tl-grid i:nth-child(odd) { display: none; }

  /* --- 内訳 --- */
  .tl-detail { padding: 0 0 8px; }
  .dd-body { margin-top: 2px; padding: 4px 10px; border-radius: 0 4px 4px 0; }
  .dd-row { padding: 6px 0; gap: 8px; flex-wrap: nowrap; }
  .dd-time { width: 96px; font-size: 12.5px; }
  .dd-name { font-size: 14px; flex: 1; min-width: 0; }
  .dd-prio {
    display: inline; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--muted);
  }

  /* タブ（今日の流れ／設定一覧）は4等分のタブと同じ作りにする */
  .tabs { margin: 0; border-bottom: 1px solid var(--line); background: var(--head-bg); }
  .tab { flex: 1; min-width: 0; height: 40px; min-height: 40px; padding: 0 4px; font-size: 13px; }
  .tab.on { background: var(--panel); }

  /* ================================================================
     端末とグループ：グループごとに束ねて、1台1行にする
     ================================================================ */

  /* 絞り込みのチップは要らない（見出しで全部見えるため） */
  .filter-chips.group-chips { display: none; }

  /* 説明は出さない。**画面の半分を説明が占めていた** */
  .dev-note { display: none; }

  /* 注意書きは帯にする。板のままだと本題の端末一覧が画面の外へ出る */
  .dev-unnamed, .waiting-box {
    margin: 0; border-radius: 0; border-left: 0; border-right: 0;
    padding: 8px 12px; font-size: 13px;
  }
  .dev-unnamed .meta, .waiting-box .meta { font-size: 12px; }
  .waiting-box > h2 { font-size: 13px; margin-bottom: 4px; }
  .dev-table { border: 0; }

  /* グループの見出し */
  .dev-group-head td {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 12px; background: var(--line-weak);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .dev-group-head .g-name { font-size: 13px; font-weight: 800; }
  .dev-group-head .g-sub { font-size: 12px; color: var(--text-sub); }
  .dev-group-head.none td { background: var(--busy-bg); }
  .dev-group-head.none .g-name { color: var(--busy); }

  /* 1台1行。ふだん要らない列は畳む */
  .dev-table tbody tr:not(.dev-group-head) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 44px;
    align-items: center; gap: 4px 8px;
    height: auto; padding: 6px 12px;
    border-bottom: 1px solid var(--line-weak); background: var(--panel);
  }
  .dev-table tbody tr.open { background: #f7fafd; }
  .dev-table td { padding: 0; border: 0; overflow: visible; }
  /* ⚠ .stack-table td.xxx（0,2,1）に勝つため、こちらも td. を付けて書くこと */
  /* 積んだ表につく小見出しは、ここでは邪魔になる */
  .dev-table td.c-sub .sub-label { display: none; }

  .dev-table td.c-state { grid-column: 1; }
  .dev-table td.c-name  { display: block; grid-column: 2; min-width: 0; }
  .dev-table td.c-seen  { grid-column: 3; text-align: right; font-size: 12px; }
  .dev-table td.c-more  { grid-column: 4; }
  .dev-more { display: block; width: 44px; min-height: 44px; padding: 0;
              border: 0; background: transparent; color: var(--muted); font-size: 20px; }

  /* 名前は読むもの。打ち替えは「⋯」を押してから */
  .dev-table td.c-name input {
    min-height: 0; height: auto; padding: 0; font-size: 15px; font-weight: 700;
    border-color: transparent; background: transparent; border-radius: 0;
  }
  /* 開いたら名前の欄を1行ぜんぶ使う。列の幅のままだと数文字しか見えない */
  .dev-table tbody tr.open td.c-name { grid-column: 1 / -1; }
  .dev-table tbody tr.open td.c-name > div { display: flex; gap: 6px; }
  .dev-table tbody tr.open td.c-name input {
    flex: 1; min-width: 0;
    min-height: 44px; padding: 0 10px; font-size: 16px;
    border-color: var(--line-strong); background: var(--panel); border-radius: 12px;
  }
  /* 機種名とIDは、ふだんは要らない */
  .dev-table td.c-name .meta { display: none; }
  .dev-table tbody tr.open td.c-name .meta { display: block; margin-top: 4px; }
  .dev-table td.c-name button { display: none; }
  .dev-table tbody tr.open td.c-name button { display: inline-block; margin-top: 6px; }

  /* 再生中・素材の数は、名前の下に小さく続ける */
  .dev-table td.c-playing, .dev-table td.c-media {
    grid-column: 2; font-size: 12px; color: var(--muted);
  }
  .dev-table td.c-playing { grid-row: 2; }
  .dev-table td.c-media   { grid-row: 2; justify-self: end; grid-column: 3; }
  /* 再生中は「プレイリスト名」だけでよい。素材名まで出すと2行になる */
  .dev-table td.c-playing .meta { display: none; }

  /* グループ・向き・削除は「⋯」を押したときだけ */
  .dev-table td.c-group, .dev-table td.c-orient, .dev-table td.c-ops { display: none; }
  .dev-table tbody tr.open td.c-group,
  .dev-table tbody tr.open td.c-orient,
  .dev-table tbody tr.open td.c-ops {
    display: block; grid-column: 1 / -1; margin-top: 6px; margin-left: 0;
  }

  /* ================================================================
     操作の記録：1件＝1行。そろっている値は出さない
     ================================================================ */

  .log-panel { margin: 0; padding: 0; border: 0; border-radius: 0; }

  /* 日付の見出し。日をまたぐ場所が分かれば、時刻は「時:分」で足りる */
  .log-day {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 12px; background: var(--line-weak);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 800;
  }
  .log-day .n { font-weight: 400; color: var(--text-sub); }

  .log-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 8px 12px; min-height: 38px;
    background: var(--panel); border: 0; border-radius: 0;
    border-bottom: 1px solid var(--line-weak);
    /* ⚠ 線のない行にも透明な線を置く。**置かないと本文の始まる位置がずれる** */
    border-left: 3px solid transparent;
    /* ⚠ button の既定は「青・太字」。そのままだと全行がリンクのように見える */
    font: inherit; font-weight: 400; color: var(--text);
  }
  .log-row .what strong { font-weight: 700; }
  .log-row .at {
    width: 44px; flex-shrink: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px; color: var(--muted);
  }
  .log-row .what {
    flex: 1; min-width: 0; font-size: 14px; font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 取り消せない操作と、失敗だけ目立たせる */
  .log-row.heavy { border-left-color: var(--busy); }
  .log-row.heavy .what, .log-row.heavy .at { color: var(--busy); }
  .log-row.bad { border-left-color: #d92d20; }
  .log-row.bad .what, .log-row.bad .at { color: #900; }

  .log-open {
    padding: 8px 12px; background: #f7fafd;
    border-left: 3px solid var(--accent);
    border-bottom: 1px solid var(--line-weak);
  }
  .log-open .head { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .log-open .kv { display: flex; gap: 10px; padding: 3px 0; }
  .log-open .kv > .k { width: 76px; flex-shrink: 0; font-size: 12px; color: var(--muted); }
  .log-open .kv > .v { font-size: 13px; min-width: 0; word-break: break-all; }
  .log-open .kv > .v.ok { color: var(--ok-text); }
  .log-open .kv > .v.bad { color: #900; }

  .grid-foot { padding: 10px 12px; margin: 0; }

  /* ================================================================
     端末のセットアップ：アドレスを先頭に、手順は畳む
     ================================================================ */

  /* 現地で最初に要るのはアドレス。手順3の中に埋もれさせない */
  .su-url {
    display: block; margin: 10px 12px; padding: 10px;
    border: 1px solid #cfe1f7; background: #f2f7fd; border-radius: var(--radius);
  }
  .su-url .cap { font-size: 12px; font-weight: 700; color: var(--accent-dark); margin-bottom: 6px; }
  .su-url .addr {
    min-height: 44px; padding: 10px;
    background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
    /* 375pxで1行に収まる大きさ。折り返すと打ち間違えやすい */
    font-family: ui-monospace, Menlo, monospace; font-size: 12px;
    overflow-wrap: anywhere;
  }
  .su-url .note { font-size: 12px; color: var(--text-sub); margin-top: 6px; line-height: 1.6; }

  /* アプリの行を詰める。見出しはボタンの文言と同じなので出さない */
  .su-url + .panel > h2 { display: none; }
  .su-url + .panel { padding: 10px 12px; }
  .su-url + .panel .meta { font-size: 12px; line-height: 1.6; }

  /* 手順は畳む。開くのは1つだけ */
  .steps { padding-left: 0; list-style: none; counter-reset: step; }
  .steps > li {
    position: relative; margin: 0; padding: 9px 12px 9px 44px;
    border-top: 1px solid var(--line-weak); cursor: pointer;
  }
  .steps > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 12px; top: 9px;
    width: 22px; height: 22px; border-radius: var(--radius);
    background: var(--line-weak); color: var(--text-sub);
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  .steps > li > strong { font-size: 15px; }
  /* 本文は開いたときだけ。**5手順を全部開くと手順3で画面が終わる** */
  .steps > li > .meta { display: none; }
  .steps > li.on { background: #f7fafd; }
  .steps > li.on::before { background: var(--accent); color: #fff; }
  .steps > li.on > strong { color: var(--accent-dark); }
  .steps > li.on > .meta { display: block; margin-top: 6px; line-height: 1.75; }
  .steps > li code {
    background: var(--line-weak); border-radius: 3px; padding: 1px 5px;
    font-size: 12px; font-family: ui-monospace, Menlo, monospace;
  }

}