/* LiveCG2 — 画面のスタイル
 *
 * ★これは「ワイヤー v1.8」（deliverables/wireframe_v1/index.html の <style>）を**そのまま**取り込んだもの。
 *   見た目・配置・数値（誤押し対策の余白・モニターの実寸・チップの大きさ）はワイヤーが正なので、
 *   ここを手で直さない。直す時はワイヤー側と一緒に直して取り込み直す。
 *   S3 では送出コンソールとデッキだけを使う（番組ページ・テロップ編集・キューシート印刷の分は S4／S5 で使う）。
 * ★アプリだけで要る追加（canvas でモニターを描く等）は console_add.css に分けてある。
 */
/* ===========================================================================
   0. 変数・基礎
   配色は現行 LiveCG のタリーを継承（LINE/ON AIR=#e53935・NEXT=#7ad6c4・
   TAKE=#2f8f4a・T1=#c98ec1・T2=#d8453a）。FIX は現行に専用色が無いので
   琥珀 #e0a33c を新設（最前面レイヤー＝注意色）。
   =========================================================================== */
:root{
  --bg:#141619; --bg2:#1a1d21; --panel:#212429; --panel2:#282c32; --well:#141619;
  --line:#33383f; --line2:#414751;
  --text:#e9ebed; --dim:#98a0a8; --dim2:#6d747c;
  --live:#e53935; --next:#7ad6c4; --take:#2f8f4a;
  --t1:#c98ec1; --t2:#d8453a; --fix:#e0a33c;
  --accent:#4f8ef7; --warn:#e8b64c;
  --mono:ui-monospace,SFMono-Regular,Menlo,"SF Mono",Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  font-size:13px; line-height:1.45; overflow-y:scroll;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit;color:inherit}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hide{display:none !important}

/* ---- ワイヤーフレーム告知帯 ---- */
.wfbar{
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
  padding:5px 16px;font-size:11.5px;
  background:repeating-linear-gradient(135deg,#2a2410 0 9px,#221d0c 9px 18px);
  border-bottom:1px solid #4a3f1a;color:#e8c77a;
}
.wfbar b{color:#ffd98a;font-weight:700}
.wfbar .sep{color:#6b5a28}
.wfbar > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wfbar .chgBtn{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:800;color:#1e1705;background:#e8c77a;border:1px solid #ffd98a;border-radius:3px;padding:2px 10px}
.wfbar .chgBtn:hover{background:#ffd98a}

/* ---- v1→v1.1 変更点パネル（右ドロワー） ---- */
.chgPanel{position:fixed;top:0;right:0;bottom:0;width:470px;max-width:92vw;z-index:160;background:#1b1e23;border-left:1px solid var(--line2);
  box-shadow:-18px 0 40px rgba(0,0,0,.55);display:flex;flex-direction:column}
.chgPanel .ch{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#23201a}
.chgPanel .ch h3{font-size:14px;font-weight:800;color:#ffd98a}
.chgPanel .ch .sp{flex:1}
.chgPanel .cb{flex:1;overflow-y:auto;padding:10px 16px 20px}
.chgPanel h4{font-size:11px;letter-spacing:.08em;color:var(--dim);margin:12px 0 5px;padding-top:8px;border-top:1px solid var(--line)}
.chgPanel h4:first-child{border-top:0;margin-top:2px}
.chgPanel ul{list-style:none}
.chgPanel li{font-size:11.5px;line-height:1.6;color:#cfd4da;padding:3px 0 3px 12px;position:relative}
.chgPanel li::before{content:'';position:absolute;left:2px;top:10px;width:4px;height:4px;border-radius:50%;background:var(--dim2)}
.chgPanel .tg{font-size:9.5px;font-weight:800;font-family:var(--mono);border-radius:2px;padding:0 5px;margin-right:5px;white-space:nowrap}
.chgPanel .tg.ok{background:#1f4a2c;color:#9fe0b0;border:1px solid #2f7a45}
.chgPanel .tg.jd{background:#3b3120;color:var(--warn);border:1px solid #6d5a2e}
.chgPanel .tg.fx{background:#2b3f63;color:#a9c8ff;border:1px solid #3a5687}

/* ---- トップバー（画面切替） ---- */
.topbar{
  display:flex;align-items:stretch;background:#191c20;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:9px;padding:0 18px 0 16px;border-right:1px solid var(--line)}
.brand .mk{width:22px;height:22px;border-radius:3px;background:linear-gradient(135deg,var(--t1),var(--t2));
  display:grid;place-items:center;font-size:11px;font-weight:900;color:#1a1114}
.brand .nm{font-weight:800;letter-spacing:.04em;font-size:14px}
.brand .ver{font-size:10px;color:var(--dim2);align-self:flex-end;padding-bottom:3px}
.nav{display:flex}
.nav button{
  padding:11px 20px 9px;font-size:13px;color:var(--dim);border-bottom:2px solid transparent;
  border-right:1px solid var(--line);letter-spacing:.02em;
}
.nav button .pth{display:block;font-size:10px;color:var(--dim2);font-family:var(--mono);margin-top:1px}
.nav button:hover{color:var(--text);background:#1f2328}
.nav button.on{color:#fff;background:var(--panel);border-bottom-color:var(--accent)}
.nav button.on .pth{color:var(--accent)}
.topbar .sp{flex:1}
.topbar .st{display:flex;align-items:center;gap:12px;padding:0 16px;border-left:1px solid var(--line)}
.badge-prep{font-size:11px;color:var(--dim);border:1px solid var(--line2);border-radius:3px;padding:3px 9px;letter-spacing:.08em}
.badge-onair{
  font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--live);
  border-radius:3px;padding:4px 10px;animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.tc{font-family:var(--mono);font-size:15px;color:var(--live);letter-spacing:.04em}
.tc.off{color:var(--dim2)}

/* ---- 各画面の「何を決めた画面か」メモ ---- */
.vnote{
  display:flex;gap:12px;align-items:flex-start;
  padding:8px 16px;background:#1b2028;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--dim);
}
.vnote .tag{
  flex:0 0 auto;font-family:var(--mono);font-size:10px;color:#8fb8ff;border:1px solid #2f4a75;
  background:#16233a;border-radius:3px;padding:2px 7px;letter-spacing:.04em;
}
.vnote em{font-style:normal;color:var(--text)}

/* ---- 共通パーツ ---- */
.btn{
  font-size:12px;padding:6px 12px;border-radius:4px;background:var(--panel2);
  border:1px solid var(--line2);color:var(--text);white-space:nowrap;
}
.btn:hover{border-color:#5d6570;background:#31363d}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.sm{font-size:11px;padding:4px 8px}
.btn.xs{font-size:10.5px;padding:2px 6px;border-radius:3px}
.btn.pri{background:#2d5ea8;border-color:#3d76c6;font-weight:700}
.btn.pri:hover{background:#376bbb}
.btn.go{background:var(--take);border-color:#3fae5d;font-weight:800;color:#fff}
.btn.go:hover{background:#38a257}
.btn.dgr{border-color:#7d3a36;color:#f0a9a4}
.btn.dgr:hover{background:#3a2422;border-color:#a44a44}
.btn.on{background:#24506e;border-color:var(--accent);color:#cfe4ff}
.chip{font-size:10px;font-family:var(--mono);padding:1px 5px;border-radius:2px;border:1px solid var(--line2);color:var(--dim)}
.kbd{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:3px;background:#2b3037;border:1px solid var(--line2);border-bottom-width:2px;color:var(--dim)}
.sect-h{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--dim2);
  text-transform:uppercase;padding:0 0 6px;
}
input[type=text],input[type=number],select,textarea{
  background:var(--well);border:1px solid var(--line2);border-radius:4px;padding:5px 7px;font-size:12px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{width:100%;resize:vertical;line-height:1.6;font-size:12.5px}
.sw{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-size:11px;color:var(--dim)}
.sw input{display:none}
.sw .tr{width:30px;height:16px;border-radius:9px;background:#3a3f47;position:relative;transition:background .13s}
.sw .tr::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#8d949c;transition:.13s}
.sw input:checked + .tr{background:#2b5c86}
.sw input:checked + .tr::after{left:16px;background:#8fc6ff}
.sw input:checked ~ .lb{color:var(--text)}

/* ---- 種別チップ（定型テロップ／画像／動画） ---- */
.kd{font-size:9.5px;font-family:var(--mono);padding:1px 4px;border-radius:2px;letter-spacing:.03em;white-space:nowrap}
.kd-title{background:#2b3f63;color:#a9c8ff;border:1px solid #3a5687}
.kd-side{background:#2f3a58;color:#9fb6e8;border:1px solid #3d4d74}
.kd-name{background:#333a2c;color:#bcd49a;border:1px solid #4a5540}
.kd-image{background:#3d3350;color:#c6a9ec;border:1px solid #52456b}
.kd-video{background:#4a3324;color:#eab68c;border:1px solid #67462f}

/* ===========================================================================
   1. 画面1: 番組ページ /programs/:id （作業場）
   非対称の2カラム（左＝プールの長い表／右＝設定レール）。
   カードの連発を避け、表は全幅ベタ組み・右レールは区切り線で段組みする。
   =========================================================================== */
.pgHead{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;background:linear-gradient(180deg,#1e2228,#1a1d22);
  border-bottom:1px solid var(--line);
}
.pgHead .psel{display:flex;align-items:center;gap:7px}
.pgHead .psel label{font-size:10.5px;color:var(--dim2);letter-spacing:.1em}
.pgHead select.prog{font-size:14px;font-weight:700;padding:6px 10px;min-width:260px;background:#15181c}
.pgHead .meta{font-size:11px;color:var(--dim2)}
.pgHead .sp{flex:1}
.outbox{
  display:flex;align-items:center;gap:8px;padding:6px 10px;background:#15181c;
  border:1px solid var(--line);border-radius:5px;
}
.outbox .lb{font-size:10px;color:var(--dim2);letter-spacing:.1em}
.outbox .u{font-family:var(--mono);font-size:11px;color:#a9c8ff;background:#11151a;border:1px solid var(--line);
  border-radius:3px;padding:3px 7px;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outbox .lyb{display:flex;gap:4px}

.pgBody{display:flex;align-items:flex-start;gap:0;min-height:calc(100vh - 210px)}
.poolWrap{flex:1;min-width:0;border-right:1px solid var(--line)}
.poolBar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid var(--line);background:#1b1e23;position:sticky;top:calc(var(--topbarH,48px) + var(--pgCurH,0px));z-index:20;
}
.poolBar h2{font-size:13px;font-weight:700;letter-spacing:.02em}
.poolBar .cnt{font-size:11px;color:var(--dim2);font-family:var(--mono)}
.poolBar .sp{flex:1}

table.pool{width:100%;border-collapse:collapse;font-size:12.5px}
table.pool thead th{
  position:sticky;top:calc(var(--topbarH,48px) + var(--pgCurH,0px) + var(--poolBarH,38px));z-index:15;background:#1f2328;text-align:left;font-size:10px;letter-spacing:.1em;
  color:var(--dim2);font-weight:700;padding:5px 8px;border-bottom:1px solid var(--line2);
}
table.pool td{padding:4px 8px;border-bottom:1px solid #23262b;vertical-align:middle}
table.pool tr.pg:hover{background:#1e2228}
table.pool tr.sel{background:#1c2836;box-shadow:inset 3px 0 0 var(--accent)}
.c-grip{width:22px;color:var(--dim2);cursor:grab;text-align:center;user-select:none}
.c-grip:active{cursor:grabbing}
.c-cg{width:56px;font-family:var(--mono);font-size:13px;color:#cfd4da;letter-spacing:.04em}
.c-th{width:56px}
.c-kind{width:74px}
.c-sub{width:190px;color:var(--dim)}
.c-note{width:220px;color:var(--dim2);font-size:11.5px}
.c-star{width:34px;text-align:center}
.c-ops{width:132px;text-align:right;white-space:nowrap}
.c-ops .btn{opacity:.35}
tr:hover .c-ops .btn{opacity:1}
.mainCell{font-weight:600}
.mainCell .noc{font-family:var(--mono);font-size:10.5px;color:#f0a8a4;background:#3a1f1e;border:1px solid #5e2d2a;
  border-radius:2px;padding:1px 4px;margin-right:6px}
.thumb{width:44px;height:25px;border-radius:2px;background:#2a2e34;border:1px solid var(--line2);
  display:grid;place-items:center;font-size:9px;color:var(--dim2);overflow:hidden;position:relative}
.thumb.t-title{background:linear-gradient(180deg,#1c2a4d,#16223e)}
.thumb.t-title::after{content:'';position:absolute;left:6px;right:6px;bottom:5px;height:7px;border-radius:1px;background:#d8242e}
.thumb.t-side{background:linear-gradient(180deg,#1c2a4d,#16223e)}
.thumb.t-side::after{content:'';position:absolute;right:4px;top:4px;width:22px;height:6px;border-radius:3px;background:#5f7fc4}
.thumb.t-name{background:linear-gradient(180deg,#22301f,#1a2418)}
.thumb.t-name::after{content:'';position:absolute;left:10px;right:10px;bottom:6px;height:6px;border-radius:1px;background:#9dc46f}
.thumb.t-image{background:repeating-linear-gradient(45deg,#3a2f4c 0 5px,#332943 5px 10px);color:#c6a9ec}
.thumb.t-video{background:#20242a;color:#eab68c}
.star{font-size:13px;color:#3d434b;cursor:pointer;line-height:1}
.star.on{color:var(--fix)}
.lockb{font-size:9.5px;font-family:var(--mono);color:#ffb3b0;background:#3d1c1b;border:1px solid var(--live);
  border-radius:2px;padding:1px 4px;margin-left:6px}
.nextb{font-size:9.5px;font-family:var(--mono);color:#0d2c27;background:var(--next);border-radius:2px;padding:1px 4px;margin-left:6px;font-weight:700}

/* 区切り線（シーン）＝章見出しの行。箱ではない、が一目で章と分かる強さにする */
tr.div td{
  padding:0;border-bottom:1px solid var(--line2);
  background:linear-gradient(90deg,#2b313a,#20242a 55%,#1c1f24);
}
tr.div .dv{display:flex;align-items:center;gap:10px;padding:7px 10px;border-left:4px solid var(--accent)}
tr.div .dv .nm{font-weight:800;font-size:13px;letter-spacing:.06em}
tr.div .dv .rg{font-family:var(--mono);font-size:10.5px;color:var(--dim2)}
tr.div .dv .sp{flex:1}
tr.div .dv .btn{opacity:.3}
tr.div:hover .dv .btn{opacity:1}
tr.drag{opacity:.35}
tr.dropb{box-shadow:inset 0 3px 0 0 var(--accent)}
tr.dropa{box-shadow:inset 0 -3px 0 0 var(--accent)}

.addRow{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line);background:#191c21}
.dropzone{
  margin:12px 14px 22px;border:2px dashed #3d434c;border-radius:6px;padding:16px;text-align:center;
  color:var(--dim2);font-size:12px;background:#17191d;
}
.dropzone.hot{border-color:var(--accent);background:#1a2331;color:#a9c8ff}
.dropzone b{display:block;font-size:13px;color:var(--dim);margin-bottom:3px}

/* 右レール */
.rail{width:314px;flex:0 0 314px;background:#1b1e23;align-self:stretch}
.rail .rs{padding:13px 14px;border-bottom:1px solid var(--line)}
.rail .rs h3{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--dim2);margin-bottom:9px}
.startRow{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.startRow .tag{
  width:34px;flex:0 0 34px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:800;
  border-radius:3px;padding:3px 0;
}
.startRow .tag.t1{background:#3c2b3a;color:var(--t1);border:1px solid #6b4c67}
.startRow .tag.t2{background:#3d2220;color:#f0a8a4;border:1px solid #7d3a36}
.startRow .tag.fx{background:#3b3120;color:var(--fix);border:1px solid #6d5a2e}
.startRow select{flex:1;min-width:0;font-size:11.5px}
.rail .hint{font-size:10.5px;color:var(--dim2);line-height:1.6}
.rail .hint code{font-family:var(--mono);color:#9fb6e8}
.kv{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;border-bottom:1px dotted #2c3037}
.kv .k{color:var(--dim2)}

/* ---- v1.2: 番組ページ＝サムネメイン（ラムダ型のグリッド） ---- */
.pgCur{display:flex;align-items:stretch;flex-wrap:wrap;background:#16191d;border-bottom:1px solid var(--line);position:sticky;top:var(--topbarH,48px);z-index:30}
.pgCur .ly{display:flex;align-items:center;gap:12px;padding:6px 16px;border-right:1px solid var(--line)}
.pgCur .ly .nm{font-weight:900;letter-spacing:.1em;font-size:15px}
.pgCur .ly.t1 .nm{color:var(--t1)}
.pgCur .ly.t2 .nm{color:#f07a72}
.pgCur .big{display:flex;flex-direction:column;align-items:flex-start;min-width:84px;background:#0d1013;border:1px solid var(--line2);border-radius:3px;padding:2px 8px 1px}
.pgCur .big .k{font-size:9.5px;font-family:var(--mono);font-weight:800;letter-spacing:.08em;padding:0 5px;border-radius:2px;margin-top:2px}
.pgCur .big.l .k{background:var(--live);color:#fff}
.pgCur .big.n .k{background:var(--next);color:#0d2c27}
.pgCur .big .v{font-family:var(--mono);font-size:26px;font-weight:800;line-height:1.1;letter-spacing:.08em}
.pgCur .big.l .v{color:#ff8f89}
.pgCur .big.n .v{color:var(--next)}
.pgCur .big .v.off{color:#3d434b}
.pgCur .big .v small{font-size:10px;color:var(--dim2);letter-spacing:0;margin-left:4px;font-weight:600}
.pgCur .note{font-size:10.5px;color:var(--dim2);padding:0 16px;align-self:center;line-height:1.5}
.viewSw{display:inline-flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.viewSw button{font-size:11px;padding:4px 12px;background:#22262b;color:var(--dim);border-right:1px solid var(--line2)}
.viewSw button:last-child{border-right:0}
.viewSw button.on{background:#2c4f7a;color:#e3efff;font-weight:800}
.rail.closed{display:none}
.toc{width:178px;flex:0 0 178px;align-self:flex-start;position:sticky;top:calc(var(--topbarH,48px) + var(--pgCurH,0px));
  max-height:calc(100vh - var(--topbarH,48px) - var(--pgCurH,0px));overflow-y:auto;border-right:1px solid var(--line);background:#17191d;padding:8px 0 16px}
.toc h3{font-size:10.5px;letter-spacing:.1em;color:var(--dim2);padding:2px 12px 6px;font-weight:800}
.toc a{display:block;padding:6px 10px 6px 12px;border-left:3px solid transparent;color:var(--dim);cursor:pointer;text-decoration:none}
.toc a:hover{background:#1f242a;color:var(--text)}
.toc a.cur{border-left-color:var(--accent);background:#1c2836;color:#fff}
.toc a .n{display:block;font-size:12px;font-weight:700}
.toc a .r{font-family:var(--mono);font-size:10px;color:var(--dim2)}
.toc .mk{display:inline-block;font-size:8.5px;font-family:var(--mono);font-weight:800;padding:0 4px;border-radius:2px;margin-left:4px;vertical-align:1px}
.toc .mk.mkL{background:var(--live);color:#fff}
.toc .mk.mkN{background:var(--next);color:#0d2c27}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:12px 14px 18px}
.gsec{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:7px 10px;margin-top:4px;border-radius:3px;
  background:linear-gradient(90deg,#2b313a,#20242a 55%,#1c1f24);border-left:4px solid var(--accent);
  scroll-margin-top:calc(var(--topbarH,48px) + var(--pgCurH,0px) + var(--poolBarH,38px) + 8px)}
.gsec:first-child{margin-top:0}
.gsec .nm{font-weight:800;font-size:13px;letter-spacing:.06em}
.gsec .rg{font-family:var(--mono);font-size:10.5px;color:var(--dim2)}
.card{position:relative;min-width:0;background:#1d2126;border:2px solid #2c3138;border-radius:6px;overflow:hidden;
  scroll-margin-top:calc(var(--topbarH,48px) + var(--pgCurH,0px) + var(--poolBarH,38px) + 12px)}
.card:hover{border-color:#4a525c}
.card .th{position:relative;aspect-ratio:16/9;background:#101215;overflow:hidden}
.card .th img{display:block;width:100%;height:100%;object-fit:cover}
.card .th .stage{border:0}
.card .bd{display:flex;flex-direction:column;padding:5px 8px 7px}
.card .r1{display:flex;align-items:center;gap:6px;min-width:0}
.card .r1 .sp{flex:1}
.card .cgn{font-family:var(--mono);font-size:15px;font-weight:800;color:#e3e7eb;letter-spacing:.04em}
.card .mn{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.card .sb{font-size:10.5px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:15px}
.card .ops{display:flex;gap:4px;margin-top:5px}
.card .ops .btn{flex:1;padding:3px 0;text-align:center}
.card .bdg{position:absolute;top:6px;left:6px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;z-index:2}
.card .bdg span{font-size:10px;font-family:var(--mono);font-weight:800;padding:1px 6px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.card .bdg .l{background:var(--live);color:#fff}
.card .bdg .h{background:#3a3f47;color:#e1e5e9}
.card .bdg .n{background:var(--next);color:#0d2c27}
.card .bdg .f{background:var(--fix);color:#2b2107}
.card .bdg .lk{background:#3d1c1b;color:#ffb3b0;border:1px solid var(--live)}
.card .dm{position:absolute;right:6px;bottom:6px;z-index:2;font-size:10px;font-weight:800;background:rgba(255,196,0,.94);color:#241a00;border-radius:2px;padding:0 6px}
.card .stale{position:absolute;right:6px;bottom:6px;z-index:2;font-size:10px;font-weight:800;background:rgba(79,142,247,.92);color:#fff;border-radius:2px;padding:0 6px}
.card.next{border-color:var(--next)}
.card.line{border-color:var(--live);box-shadow:0 0 0 1px var(--live)}
.card.line.next{box-shadow:0 0 0 1px var(--live),inset 0 0 0 2px var(--next)}
.card.hid{border-color:#8a5a56;box-shadow:none}
.card.jump{animation:cjump 1.4s ease-out}
@keyframes cjump{0%,45%{box-shadow:0 0 0 4px #ffd98a}100%{box-shadow:0 0 0 0 rgba(255,217,138,0)}}
.card.sel{outline:2px solid var(--accent);outline-offset:1px}

/* ===========================================================================
   2. 画面2: 送出コンソール /onair
   3カラム（T1列｜中央｜T2列）。列は「同じプール全件」を各レイヤーの
   カーソル付きで表示する（レイヤー別の登録箱ではない）。
   =========================================================================== */
#v-onair{display:flex;flex-direction:column;height:calc(100vh - var(--chromeH,74px))}
.cons{display:flex;align-items:stretch;gap:0;flex:1;min-height:0}
.lyCol{flex:1;min-width:0;display:flex;flex-direction:column;background:#191c20;overflow:hidden}
.lyCol.t1{border-right:1px solid var(--line)}
.lyCol.t2{border-left:1px solid var(--line)}
.lyHead{display:flex;align-items:center;gap:9px;padding:5px 10px;border-bottom:1px solid var(--line);background:#1d2126}
.lyCol.t1 .lyHead{border-top:3px solid var(--t1)}
.lyCol.t2 .lyHead{border-top:3px solid var(--t2)}
.lyHead .nm{font-size:16px;font-weight:900;letter-spacing:.1em}
.lyCol.t1 .lyHead .nm{color:var(--t1)}
.lyCol.t2 .lyHead .nm{color:#f07a72}
.lyHead .sp{flex:1}
.lyHead .btn .k{font-family:var(--mono);font-size:9px;color:var(--dim2);margin-left:5px}
.lySt{font-size:10px;font-family:var(--mono);font-weight:800;letter-spacing:.06em;padding:1px 7px;border-radius:2px;border:1px solid var(--line2);color:var(--dim2)}
.lySt.live{background:var(--live);border-color:var(--live);color:#fff}
.lySt.hid{background:#3a3f47;border-color:#555c66;color:#d5dade}

/* レイヤーごとの PGM｜NEXT モニター（v1.1: タブをやめて常時表示） */
.mons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px 8px;background:#15181c;border-bottom:1px solid var(--line)}
.mon{min-width:0;border:2px solid var(--line2);border-radius:4px;background:#0b0d0f;overflow:hidden}
.mon .hd{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9.5px;font-family:var(--mono);font-weight:800;
  letter-spacing:.06em;padding:2px 6px;background:#2b3037;color:var(--dim);white-space:nowrap;overflow:hidden}
.mon .hd .dim{opacity:.6;font-weight:600}
.mon .stage{border:0}
.mon .cap{font-size:10.5px;color:var(--dim);padding:2px 6px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#15181c;border-top:1px solid #0b0d0f}
.mon.pgm.live{border-color:var(--live)}
.mon.pgm.live .hd{background:var(--live);color:#fff}
.mon.pgm.hid{border-color:#5d646e}
.mon.pgm.hid .hd{background:#3a3f47;color:#d5dade}
.mon.nxt{border-color:var(--next)}
.mon.nxt .hd{background:var(--next);color:#0d2c27}
.mon.nxt.none{border-color:#2f5a53}
.mon.nxt.none .hd{background:#244a44;color:#9cd9cd}
.onhint{margin-left:6px;background:#0d2c27;color:var(--next);border-radius:2px;padding:0 5px;font-size:9px;letter-spacing:.04em}
.mon.nxt.flash{animation:nflash .75s ease-out}
@keyframes nflash{0%,35%{box-shadow:0 0 0 3px #bff5ea,0 0 18px rgba(122,214,196,.9)}100%{box-shadow:0 0 0 0 rgba(122,214,196,0)}}
.stage .veil{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.stage .veil b{font-size:11px;font-family:var(--mono);letter-spacing:.14em;color:#e9ebed;background:rgba(20,22,25,.85);border:1px solid var(--line2);border-radius:3px;padding:2px 9px}
.lyr.ghost{opacity:.2;filter:grayscale(.8)}

.cueList{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}
.cue{
  display:flex;align-items:center;gap:7px;padding:3px 8px 3px 0;border-bottom:1px solid #202429;
  border-left:4px solid transparent;cursor:pointer;user-select:none;
}
.cue:hover{background:#1f242a}
.cue .cg{font-family:var(--mono);font-size:12px;color:#c3c9d0;width:44px;flex:0 0 44px;text-align:right}
.cue .tb{width:30px;height:18px;flex:0 0 30px;border-radius:2px;border:1px solid var(--line2);background:#2a2e34}
.cue .tx{flex:1;min-width:0;overflow:hidden}
.cue .mn{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cue .sb{font-size:10.5px;color:var(--dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cue .fg{flex:0 0 auto;display:flex;gap:3px;align-items:center}
.cue.line{background:#3a1512;border-left-color:var(--live);cursor:default}
.cue.line .mn{color:#fff;font-weight:700}
.cue.line .cg{color:#ffb3b0}
.cue.line.hid{background:#2a2020;border-left-color:#8a5a56}
.cue.line.hid .mn{color:#bba9a7;font-weight:600}
.cue.next{background:#12312c;border-left-color:var(--next)}
.cue.next .mn{color:#d8fbf4;font-weight:600}
.cue.next .cg{color:var(--next)}
.cue.line.next{background:linear-gradient(90deg,#3a1512 50%,#12312c);border-left-color:var(--live)}
.cue.next.flash{animation:cflash .75s ease-out}
@keyframes cflash{0%,35%{background:#2f8a7a}100%{background:#12312c}}
.cue.fixon{box-shadow:inset -3px 0 0 var(--fix)}
.cue .tag{font-size:9px;font-family:var(--mono);font-weight:800;padding:1px 4px;border-radius:2px}
.cue .tag.l{background:var(--live);color:#fff}
.cue .tag.h{background:#3a3f47;color:#d5dade}
.cue .tag.n{background:var(--next);color:#0d2c27}
.cue .tag.f{background:var(--fix);color:#2b2107}
.cdiv{
  display:flex;align-items:center;gap:8px;padding:5px 8px;background:#262b32;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);font-size:11px;font-weight:800;letter-spacing:.08em;color:#c8cfd7;
  position:sticky;top:0;z-index:5;
}
.cdiv::before{content:'';width:3px;height:12px;background:var(--accent);border-radius:1px}
.cdiv .n{font-family:var(--mono);font-size:9.5px;color:var(--dim2);font-weight:400;margin-left:auto}

/* Transport（機械っぽい操作帯） */
.trans{padding:8px;background:linear-gradient(180deg,#23272d,#1b1e23);border-top:2px solid #3a4049}
.trans .row1{display:flex;gap:6px;align-items:stretch;margin-bottom:6px}
.takeBtn{
  flex:1;background:linear-gradient(180deg,#39a85a,#26773e);border:1px solid #47c169;border-radius:5px;
  color:#fff;font-size:20px;font-weight:900;letter-spacing:.14em;padding:13px 8px;
  box-shadow:0 2px 0 #174a27, inset 0 1px 0 rgba(255,255,255,.22);
}
.takeBtn:hover{background:linear-gradient(180deg,#42b866,#2b8646)}
.takeBtn:active{transform:translateY(2px);box-shadow:0 0 0 #174a27,inset 0 1px 0 rgba(255,255,255,.1)}
.takeBtn:disabled{background:#2c3138;border-color:#3b4149;color:#5d646c;box-shadow:none;cursor:not-allowed}
.takeBtn .k{display:block;font-size:9.5px;font-weight:600;letter-spacing:.08em;opacity:.8;margin-top:2px}
/* ON/OFF（v1.1: KEY OFF を統合した1ボタンのトグル。表示中＝赤） */
.onoffBtn{
  flex:0 0 118px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:5px;
  background:linear-gradient(180deg,#30353c,#22262b);border:1px solid #4a515b;color:#b9c0c7;
  box-shadow:0 2px 0 #121417,inset 0 1px 0 rgba(255,255,255,.08);padding:4px 4px;
}
.onoffBtn .t{font-size:13px;font-weight:900;letter-spacing:.08em}
.onoffBtn .s{font-size:10px;font-family:var(--mono);font-weight:800;letter-spacing:.12em;color:#8d959e}
.onoffBtn .k{font-size:9.5px;opacity:.8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onoffBtn:hover{border-color:#6b737d}
.onoffBtn:active{transform:translateY(2px);box-shadow:0 0 0}
.onoffBtn.live{background:linear-gradient(180deg,#e04b46,#a81f1a);border-color:#ff7a74;color:#fff;box-shadow:0 2px 0 #5e100d,inset 0 1px 0 rgba(255,255,255,.25)}
.onoffBtn.live .s{color:#fff}
.onoffBtn:disabled{opacity:.4;cursor:not-allowed}
.trans .row2{display:flex;gap:5px;margin-bottom:6px}
.trans .row2 .btn{flex:1;text-align:center;padding:6px 2px;font-size:11.5px;background:#2b3037}
.trans .row2 .btn .k{display:block;font-size:9px;color:var(--dim2);margin-top:1px;font-family:var(--mono)}
.efRow{display:flex;align-items:center;gap:6px;padding:5px 7px;background:#16191d;border:1px solid var(--line);border-radius:4px;margin-bottom:6px}
.efBtn{font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:4px 11px;border-radius:3px;background:#2b3037;border:1px solid var(--line2);color:var(--dim)}
.efBtn.on{background:#2c4f7a;border-color:#4e8ed6;color:#d6e8ff;box-shadow:0 0 0 1px rgba(79,142,247,.25)}
.efRow select{font-size:11px;padding:3px 5px}
.efRow .sp{flex:1}
/* 送りスイッチ（OFF→ON で: 同じテロップ｜次のテロップ） */
.sendRow{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--dim2);white-space:nowrap;min-width:0}
.sendRow .lb{color:var(--dim);font-weight:700}
.sendRow .sp{flex:1}
.sendRow .nt{font-size:10px;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden;flex:0 0 auto}
.seg button{font-size:11px;padding:3px 10px;background:#22262b;color:var(--dim);border-right:1px solid var(--line2)}
.seg button:last-child{border-right:0}
.seg button.on{background:#2c4f7a;color:#e3efff;font-weight:800}
.seg button:disabled{opacity:.45;cursor:not-allowed}

/* 中央カラム */
/* v1.5（#28）: 左右の列との間に押せない余白 24px（斜線の地）＋区切り線。左右の列の幅は v1.4 と同じ＝TAKE・ON/OFF の位置と大きさは変えない（余白は中央カラムの幅の内側から取る）。中身は .midIn */
.mid{flex:0 0 440px;display:flex;flex-direction:column;overflow-y:auto;padding:0 24px;background:repeating-linear-gradient(135deg,#121418 0 6px,#0c0e10 6px 12px);border-left:1px solid #59616c;border-right:1px solid #59616c}
.midIn{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;min-width:0;background:#15181c;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.midTop{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line);background:#1d2126}
.midTop .sp{flex:1}
.midTop .pn{font-size:10.5px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* テンキー */
.keypad{padding:8px 10px;border-bottom:1px solid var(--line)}
.kpTop{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.kpTgt{display:flex;gap:3px}
.kpTgt button{font-size:10.5px;font-family:var(--mono);font-weight:800;padding:3px 9px;border-radius:3px;
  background:#2b3037;border:1px solid var(--line2);color:var(--dim)}
.kpTgt button.on[data-t=t1]{background:#4a3547;border-color:var(--t1);color:var(--t1)}
.kpTgt button.on[data-t=t2]{background:#4a2421;border-color:var(--t2);color:#f0a8a4}
.kpTgt button.on[data-t=fix]{background:#463a23;border-color:var(--fix);color:var(--fix)}
.kpDisp{
  position:relative;flex:1;font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:.16em;text-align:right;
  background:#0d1013;border:1px solid var(--line2);border-radius:3px;padding:1px 9px 3px;color:var(--next);
  box-shadow:inset 0 0 12px rgba(122,214,196,.08);overflow:hidden;
}
.kpDisp .ph{color:#31383e}
.kpDisp .kpLeft{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.04em;color:var(--dim2);font-weight:600}
.kpDisp .kpBar{position:absolute;left:0;bottom:0;height:3px;background:var(--next);opacity:.75}
.kpGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.kpGrid button{
  font-family:var(--mono);font-size:17px;font-weight:700;padding:7px 0;border-radius:4px;
  background:linear-gradient(180deg,#31363d,#22262b);border:1px solid var(--line2);box-shadow:0 2px 0 #15181c;
}
.kpGrid button:hover{background:linear-gradient(180deg,#3a4048,#282d33)}
.kpGrid button:active{transform:translateY(2px);box-shadow:0 0 0}
.kpGrid button.act{background:linear-gradient(180deg,#2e7f6f,#1e5a4e);border-color:var(--next);color:#d8fbf4;font-size:13px;letter-spacing:.06em}
.kpGrid button.act .k{font-size:9.5px;opacity:.75;margin-left:6px}
.kpGrid button.clr{font-size:12px;color:#e8b6b2}
.kpHint{font-size:10px;color:var(--dim2);margin-top:5px;line-height:1.5}

/* FIX パネル（v1.7 #43: 行ではなく「横並びのチップ」。1つのチップ＝1つの押せるボタン。高さは --fixChipH） */
.fixP{flex:1;display:flex;flex-direction:column;min-height:120px;border-bottom:1px solid var(--line);container-type:inline-size}
.fixHd{display:flex;align-items:center;gap:8px;padding:5px 10px;background:#221f18;border-top:2px solid var(--fix);border-bottom:1px solid var(--line)}
.fixHd .nm{font-size:12.5px;font-weight:900;letter-spacing:.1em;color:var(--fix)}
.fixHd .sp{flex:1}
.fixHd .cn{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap;flex:0 0 auto}
/* チップの帯: 折り返しは2段まで（段の高さは measureConsole() が決める）。増えた分は帯の中だけでスクロール */
.fixChips{flex:1;min-height:calc(var(--fixChipH,40px) + 6px);display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;
  padding:3px 5px;overflow-y:auto;overflow-x:hidden}
.fixChip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"cg nm st";align-items:center;gap:0 6px;
  flex:1 1 var(--fixChipMin,118px);min-width:var(--fixChipMin,118px);max-width:190px;height:var(--fixChipH,40px);padding:0 8px;border-radius:5px;text-align:left;
  background:#2b3037;border:1px solid var(--line2);color:#c3c9d0;box-shadow:0 1px 0 #15181c}
.fixChip .cg{grid-area:cg;font-family:var(--mono);font-size:12.5px;font-weight:800;letter-spacing:.02em}
.fixChip .nm{grid-area:nm;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.fixChip .st{grid-area:st;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--dim2);white-space:nowrap}
.fixChip:hover:not(:disabled){background:#333941;border-color:#7b838f}
.fixChip:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.fixChip.on{background:var(--fix);border-color:#f7c260;color:#2b2107;box-shadow:0 1px 0 #8a6416}
.fixChip.on .st{color:#2b2107}
.fixChip.on .nm{font-weight:700}
.fixChip:disabled{opacity:.45;cursor:not-allowed}
/* 帯が狭い時は2段組みのチップ（上＝番号と状態・下＝名前）にして、★常設の3件を1行に並べる。
   1行の「034 校章ロゴ ●ON」は帯が 470px 以上ある時の形（名前が切れずに並ぶのはそこから） */
@container (max-width:469px){
  .fixChip{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"cg st" "nm nm";align-content:center;gap:0 5px;
    --fixChipMin:72px;max-width:134px;padding:0 6px}
  .fixChip .cg{font-size:11.5px}
  .fixChip .nm{font-size:10.5px;color:#aab1b9}
  .fixChip.on .nm{color:#3a2c08}
  .fixChip .st{font-size:9px;justify-self:end}
}
.fixNote{font-size:10px;color:var(--dim2);padding:5px 10px;border-top:1px solid var(--line)}

/* マスター行 */
.bothBtn{
  width:100%;background:linear-gradient(180deg,#2f6f9c,#1f4e70);border:1px solid #4b90c4;border-radius:5px;
  color:#fff;font-size:15px;font-weight:900;letter-spacing:.12em;padding:10px;
  box-shadow:0 2px 0 #143449,inset 0 1px 0 rgba(255,255,255,.18);
}
.bothBtn:hover{background:linear-gradient(180deg,#3680b3,#245b81)}
.bothBtn:active{transform:translateY(2px);box-shadow:0 0 0}
.bothBtn:disabled{background:#2c3138;border-color:#3b4149;color:#5d646c;box-shadow:none;cursor:not-allowed}
.lockBtn{font-size:11px;padding:5px 11px;border-radius:4px;background:#2b3037;border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.lockBtn.on{background:#5a3a12;border-color:var(--warn);color:#ffdb9a;font-weight:700}

/* ショートカット凡例 */
.keys{display:flex;flex-wrap:wrap;gap:4px 14px;padding:5px 16px;background:#16191d;border-top:1px solid var(--line);font-size:10.5px;color:var(--dim2)}
.keys .g{display:flex;align-items:center;gap:5px}
.keys .g .nm{color:var(--dim)}

/* ===========================================================================
   3. テロップ・プレビュー（16:9 ステージ）
   canvas ではなく DOM で「それらしく」描く。cqw でステージ幅に追従。
   実装では event_telop の描画エンジンをそのまま載せる想定。
   =========================================================================== */
.stage{
  position:relative;width:100%;aspect-ratio:16/9;background:#0b0d0f;overflow:hidden;
  container-type:inline-size;border:1px solid #000;
}
.stage.chk{
  background-image:linear-gradient(45deg,#1b1e22 25%,transparent 25%,transparent 75%,#1b1e22 75%),
                   linear-gradient(45deg,#1b1e22 25%,#131518 25%,#131518 75%,#1b1e22 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
}
.stage .empty{position:absolute;inset:0;display:grid;place-items:center;color:#3a4047;font-size:10px;font-family:var(--mono);letter-spacing:.12em}
.lyr{position:absolute;inset:0}
.fx-fade{animation:fxfade var(--d,.5s) ease-in-out}
@keyframes fxfade{from{opacity:0}to{opacity:1}}
.fx-wl{animation:fxwl var(--d,.5s) ease-out}
@keyframes fxwl{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.fx-wr{animation:fxwr var(--d,.5s) ease-out}
@keyframes fxwr{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.fx-wu{animation:fxwu var(--d,.5s) ease-out}
@keyframes fxwu{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.fx-wd{animation:fxwd var(--d,.5s) ease-out}
@keyframes fxwd{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* OFF（出ていく側）。forwards で消えた状態を保つ */
.fxo-fade{animation:fxofade var(--d,.5s) ease-in-out forwards}
@keyframes fxofade{from{opacity:1}to{opacity:0}}
.fxo-wl{animation:fxowl var(--d,.5s) ease-in forwards}
@keyframes fxowl{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.fxo-wr{animation:fxowr var(--d,.5s) ease-in forwards}
@keyframes fxowr{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
.fxo-wu{animation:fxowu var(--d,.5s) ease-in forwards}
@keyframes fxowu{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
.fxo-wd{animation:fxowd var(--d,.5s) ease-in forwards}
@keyframes fxowd{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}

/* 定型テロップ（体育祭プリセットに寄せた簡略描画。合成 PGM・編集プレビュー・サムネ未生成のページで使う。
   実サムネは event_telop 本体で描いた thumbs/cg_XXX.jpg） */
.tp{position:absolute;display:flex;align-items:stretch}
.tp .pl{display:flex;align-items:stretch;transform:skewX(-14deg);background:linear-gradient(180deg,rgba(58,64,72,.96),rgba(13,16,19,.96));box-shadow:0 .3cqw .8cqw rgba(0,0,0,.5)}
.tp .pl > span{display:block;align-self:center;transform:skewX(14deg);white-space:nowrap;color:#fff}
.tp .pl > .no{align-self:stretch;display:flex;align-items:center;transform:none;background:#E12B24;font-weight:900}
.tp .pl > .no > i{font-style:normal;transform:skewX(14deg)}
.tp-title{left:0;right:0;bottom:4.2cqw;justify-content:center}
.tp-title .no{font-size:1.9cqw;padding:0 1.4cqw}
.tp-title .mn{font-size:4.8cqw;font-weight:900;padding:.7cqw 1.4cqw .7cqw 2cqw;max-width:58cqw;overflow:hidden;text-overflow:ellipsis;text-shadow:0 .25cqw .5cqw rgba(0,0,0,.6)}
.tp-title .sb{font-size:2cqw;font-weight:800;padding-right:2cqw}
.tp-side{right:4cqw;top:2.6cqw}
.tp-side .no{font-size:1.25cqw;padding:0 .9cqw}
.tp-side .mn{font-size:2.1cqw;font-weight:900;padding:.35cqw .7cqw .35cqw 1.1cqw;max-width:36cqw;overflow:hidden;text-overflow:ellipsis}
.tp-side .sb{font-size:1.2cqw;font-weight:700;padding-right:1.1cqw}
.tp-name{left:0;right:0;bottom:4.2cqw;justify-content:center}
.tp-name .no{font-size:1.8cqw;padding:0 1.6cqw}
.tp-name .mn{font-size:4cqw;font-weight:900;letter-spacing:.06em;padding:.6cqw 2.2cqw .6cqw 1.6cqw}
/* 素材（画像／動画）はダミー枠で表す */
.asm{position:absolute;display:grid;place-items:center;border-radius:.6cqw;font-family:var(--mono)}
.asm.img{left:50%;top:50%;transform:translate(-50%,-50%);width:38cqw;height:38cqw;
  background:repeating-linear-gradient(45deg,rgba(150,110,210,.30) 0 2cqw,rgba(120,85,175,.30) 2cqw 4cqw);
  border:.25cqw solid rgba(198,169,236,.6);color:#e3d3f8}
.asm.img.corner{left:4cqw;top:4cqw;transform:none;width:16cqw;height:16cqw}
.asm.img.bar{left:0;right:0;top:auto;bottom:3cqw;transform:none;width:auto;height:9cqw;border-radius:0}
.asm.vid{inset:0;border-radius:0;background:#07090b;color:#eab68c}
.asm .in{text-align:center;font-size:1.5cqw;line-height:1.7}
.asm .ic{font-size:4cqw;display:block}
.asm.vid .bar2{position:absolute;left:8cqw;right:8cqw;bottom:6cqw;height:.5cqw;background:rgba(255,255,255,.18)}
.asm.vid .bar2::after{content:'';position:absolute;left:0;top:0;bottom:0;width:34%;background:#eab68c}

/* ===========================================================================
   4. 画面3: デッキ /deck
   =========================================================================== */
.deck{padding:16px 18px 28px;max-width:1180px;margin:0 auto}
.deckTop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.deckTop h2{font-size:15px;font-weight:800;letter-spacing:.04em}
.deckTop .sp{flex:1}
.deckStat{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-bottom:14px;
}
.deckStat .c{background:#1b1e23;padding:8px 12px}
.deckStat .c .k{font-size:9.5px;letter-spacing:.1em;color:var(--dim2);font-family:var(--mono)}
.deckStat .c .v{font-size:13px;font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deckStat .c .v .cg{font-family:var(--mono);color:var(--dim)}
.deckStat .c.live{background:#2e1513}
.deckStat .c.live .v{color:#ff9d98}
.deckGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 9px}
.dk{
  aspect-ratio:1/.72;border-radius:8px;border:1px solid var(--line2);
  background:linear-gradient(180deg,#2a2f36,#1e2228);box-shadow:0 3px 0 #101316,inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;
  min-width:0;position:relative;overflow:hidden;
}
.dk:hover{border-color:#5d6570}
.dk:active{transform:translateY(3px);box-shadow:0 0 0 #101316}
.dk .ic{font-size:19px;line-height:1}
.dk .lb{font-size:13px;font-weight:800;letter-spacing:.05em}
.dk .sub{font-size:10px;color:var(--dim2);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dk .api{font-size:9px;color:#5a6270;font-family:var(--mono);margin-top:1px}
.dk.take{background:linear-gradient(180deg,#39a85a,#26773e);border-color:#47c169;box-shadow:0 3px 0 #164826,inset 0 1px 0 rgba(255,255,255,.2)}
.dk.take .sub,.dk.take .api{color:rgba(255,255,255,.72)}
.dk.off{background:linear-gradient(180deg,#4a2320,#331816);border-color:#8a423c;color:#ffc9c5}
.dk.off .sub,.dk.off .api{color:rgba(255,190,185,.6)}
.dk.both{background:linear-gradient(180deg,#2f6f9c,#1f4e70);border-color:#4b90c4;box-shadow:0 3px 0 #143449,inset 0 1px 0 rgba(255,255,255,.18)}
.dk.both .sub,.dk.both .api{color:rgba(255,255,255,.7)}
.dk.tally-live{background:linear-gradient(180deg,#e04b46,#a81f1a);border-color:#ff7a74;color:#fff;
  box-shadow:0 3px 0 #5e100d,inset 0 1px 0 rgba(255,255,255,.25);animation:pulse 1.6s ease-in-out infinite}
.dk.tally-next{background:linear-gradient(180deg,#39a494,#1f6b5e);border-color:var(--next);color:#eafffb;box-shadow:0 3px 0 #0f3e36}
.dk.tally-next .sub,.dk.tally-live .sub{color:rgba(255,255,255,.8)}
.dk.efon{background:linear-gradient(180deg,#3d6ca8,#27496f);border-color:#5f9be0;color:#eaf3ff}
.dk.efon .sub,.dk.efon .api{color:rgba(234,243,255,.85)}
.dk .ic.txt{font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:.06em}
.dk.fixon{background:linear-gradient(180deg,#d9a03a,#a06f18);border-color:#f7c260;color:#2b2107}
.dk.fixon .sub,.dk.fixon .api{color:rgba(43,33,7,.72)}
.dk .t1t{color:var(--t1)} .dk .t2t{color:#f0a8a4}
.dk:disabled{opacity:.42;cursor:not-allowed}
.dk.onoff{background:linear-gradient(180deg,#2a2f36,#1b1e23);border-color:#4a515b;color:#9aa2ab}
.dk.onoff .ic.txt{color:#7d858e}
.dk .sendc{font-size:9.5px;font-family:var(--mono);padding:1px 6px;border-radius:9px;border:1px solid rgba(255,255,255,.22);opacity:.9}
.dk.alloff{background:repeating-linear-gradient(135deg,#8f1d19 0 12px,#761613 12px 24px);border:2px solid #ff5a52;color:#fff;box-shadow:0 3px 0 #3d0b09;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dk.alloff .sub,.dk.alloff .api{color:rgba(255,220,218,.85)}
.dk > span{position:relative}
.dk .hs{font-size:10px;font-family:var(--mono);font-weight:800;color:#fff;min-height:1px}
.deckGrid .gap{grid-column:1/-1;height:0}
.deckMap{font-size:10.5px;color:var(--dim2);margin:10px 0 0;line-height:1.6}
.deckMap b{color:var(--warn);font-weight:700}
.deckBelow{display:flex;gap:16px;align-items:flex-start;margin-top:16px;flex-wrap:wrap}
.apiTbl{flex:1;min-width:430px;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.apiTbl table{width:100%;border-collapse:collapse;font-size:11px}
.apiTbl th{background:#1f2328;text-align:left;padding:5px 9px;font-size:9.5px;letter-spacing:.1em;color:var(--dim2)}
.apiTbl td{padding:4px 9px;border-top:1px solid #23262b;color:var(--dim)}
.apiTbl td.m{font-family:var(--mono);color:#a9c8ff;font-size:10.5px}
.deckNote{flex:0 0 300px;font-size:11px;color:var(--dim2);line-height:1.75;background:#1b1e23;border:1px solid var(--line);border-radius:5px;padding:11px 13px}
.deckNote b{color:var(--dim);display:block;margin-bottom:4px;font-size:11.5px}

/* ===========================================================================
   5. モーダル・トースト
   =========================================================================== */
.ovl{position:fixed;inset:0;background:rgba(6,8,10,.72);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:44px 20px;overflow-y:auto}
.mdl{background:var(--panel);border:1px solid var(--line2);border-radius:8px;width:100%;max-width:900px;box-shadow:0 22px 60px rgba(0,0,0,.6)}
.mdl.sm{max-width:470px}
.mdlH{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#1d2126;border-radius:8px 8px 0 0}
.mdlH h3{font-size:14px;font-weight:800;letter-spacing:.03em}
.mdlH .sp{flex:1}
.mdlB{padding:15px 16px;max-height:66vh;overflow-y:auto}
.mdlF{display:flex;gap:8px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);background:#1b1e23;border-radius:0 0 8px 8px}
.mdlF .sp{flex:1}
.fld{margin-bottom:13px}
.fld > label{display:block;font-size:11px;color:var(--dim);margin-bottom:5px;font-weight:600}
.fld .hint{font-size:10.5px;color:var(--dim2);margin-top:4px;line-height:1.55}
.radios{display:flex;flex-direction:column;gap:6px}
.radios label{display:flex;gap:7px;align-items:flex-start;font-size:12px;cursor:pointer}
.radios input{margin-top:3px;accent-color:var(--accent)}
.radios .d{font-size:10.5px;color:var(--dim2);display:block}
.warnbox{background:#2e2611;border:1px solid #5e4c1c;border-radius:4px;padding:8px 11px;font-size:11px;color:#ecc87c;line-height:1.6}
.prevTbl{border:1px solid var(--line);border-radius:5px;overflow:hidden;max-height:260px;overflow-y:auto}
.prevTbl table{width:100%;border-collapse:collapse;font-size:12px}
.prevTbl th{position:sticky;top:0;background:#1f2328;text-align:left;padding:4px 8px;font-size:9.5px;letter-spacing:.09em;color:var(--dim2)}
.prevTbl td{padding:3px 8px;border-top:1px solid #23262b}
.prevTbl td input{width:100%;padding:3px 5px;font-size:11.5px;background:#191c20}
.prevTbl td.ix{width:34px;color:var(--dim2);font-family:var(--mono);font-size:10.5px;text-align:right}
.prevTbl td.no{width:60px}
.prevTbl td.no input{text-align:center}
.prevTbl td.kd{width:112px}
.prevTbl td.kd select{width:100%;font-size:11px;padding:3px 4px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#2b3037;border:1px solid var(--line2);
  border-radius:5px;padding:9px 18px;font-size:12.5px;z-index:200;box-shadow:0 8px 26px rgba(0,0,0,.5)}
.toast.err{background:#4a2320;border-color:#8a423c;color:#ffcdc9}
.pvModal .stage{border:1px solid var(--line2)}
.pvMeta{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-top:11px}
.pvMeta b{color:var(--text);font-weight:600}

/* ===========================================================================
   6. 画面サイズ対応（1280〜1600px 幅・高さ 800px でも成立させる）
   =========================================================================== */
select:disabled,input:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:1440px){
  .outbox .u{max-width:190px}
  .pgHead .meta{max-width:240px;line-height:1.35}
  .mid{flex-basis:400px}
  .onoffBtn{flex-basis:108px}
  .sendRow .nt{display:none}
}
@media (max-height:880px){
  .vnote{padding:5px 16px}
  .vnote > span:last-child{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .midTop{padding:4px 10px}
  .mons{padding:4px 8px}
  .mon .cap{padding:1px 6px 2px}
  .keypad{padding:6px 10px}
  .kpTop{margin-bottom:4px}
  .kpDisp{font-size:20px}
  .kpGrid button{padding:3px 0;font-size:15px}
  .kpHint{display:none}
  .fixP{min-height:80px}
  .fixNote{display:none}
  .bothBtn{padding:7px}
  .trans{padding:6px 8px}
  .takeBtn{padding:9px 8px;font-size:18px}
  .trans .row1,.trans .row2,.efRow{margin-bottom:5px}
  .trans .row2 .btn{padding:4px 2px}
  .efRow{padding:3px 6px}
  .lyHead{padding:4px 10px}
}

/* キュー行のサムネ（v1.2: 実サムネイル 128×72・行 80px） */
.cue{min-height:80px;padding:4px 8px 4px 0;gap:9px}
.cue .cg{font-size:14px;font-weight:700}
.cue .tb{position:relative;overflow:hidden;width:128px;height:72px;flex:0 0 128px;border-radius:3px;border:1px solid #3a4049;background:#101215}
.cue .tb img{display:block;width:100%;height:100%;object-fit:cover}
.cue .tb .stage{border:0}
.cue .tb .dmy{position:absolute;right:3px;bottom:3px;font-size:8.5px;font-weight:800;background:rgba(255,196,0,.94);color:#241a00;border-radius:2px;padding:0 4px;line-height:1.35}
.cue .mn{font-size:13.5px}
.cue .sb{font-size:11px;margin-top:2px}
.cue.line .tb{border-color:var(--live);box-shadow:0 0 0 1px var(--live)}
.cue.next .tb{border-color:var(--next)}
/* モニター・プレビューに出す実サムネ */
.lyr > img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ===========================================================================
   7. v1.3: テロップ作成（テロップ編集・すぐ作る・クイック追加・動画の終了設定）
   =========================================================================== */
.kd-free{background:#233b47;color:#8fcde6;border:1px solid #35596b}
.thumb.t-free{background:#1c2f38;color:#8fcde6}
/* 定型のプリセット（ワイヤーは色と形だけ寄せた簡易描画。本番は event_telop の PRESETS） */
.tp[data-ps=undoukai] .pl{transform:none;background:rgba(19,39,94,.95);border-radius:.8cqw;overflow:hidden}
.tp[data-ps=undoukai] .pl > span,.tp[data-ps=undoukai] .pl > .no > i{transform:none}
.tp[data-ps=undoukai] .pl > .no{background:#D8242E}
.tp[data-ps=simple] .pl{transform:none;background:rgba(255,255,255,.95);border-radius:.3cqw;overflow:hidden}
.tp[data-ps=simple] .pl > span{transform:none;color:#1a1a1a;text-shadow:none}
.tp[data-ps=simple] .pl > .no{background:#2B2B2B}
.tp[data-ps=simple] .pl > .no > i{transform:none;color:#fff}

/* 画面をまたぐ通知（番組ページ・テロップ編集・送出コンソールに同時に出す）。クリックを邪魔しない */
.ntfBox{position:fixed;top:calc(var(--chromeH,74px) + 6px);left:50%;transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.ntoast{display:flex;align-items:center;gap:10px;background:#12312c;border:1px solid var(--next);color:#d8fbf4;border-radius:5px;padding:6px 14px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.55);white-space:nowrap}
.ntoast b{font-family:var(--mono);font-size:14px;color:#fff;letter-spacing:.04em}
.ntoast .d{font-size:11px;color:#9cd9cd}
.ntoast .src{font-size:9.5px;font-family:var(--mono);color:#0d2c27;background:var(--next);border-radius:2px;padding:0 5px;font-weight:800}

/* 送出コンソール: クイック追加（v1.5: 中央上の帯＝TAKE 群・ALL OFF から一番遠い場所） */
.qaBtn{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:4px;background:#1d3346;border:1px solid #3d6a8f;color:#cfe4ff;white-space:nowrap}
.qaBtn:hover{background:#244058}

/* トリキリ動画の再生状況: 各レイヤーの PGM モニターに重ねる */
.mon{position:relative}
.vplay{position:absolute;left:6px;right:6px;top:22px;display:flex;align-items:center;gap:6px;padding:2px 6px 3px;border-radius:3px;background:rgba(10,12,14,.84);border:1px solid #67462f;font-size:10px;font-family:var(--mono);color:#eab68c;pointer-events:none;z-index:3;overflow:hidden;white-space:nowrap}
.vplay .vs{font-weight:800}
.vplay .vt{margin-left:auto;color:var(--dim);overflow:hidden;text-overflow:ellipsis;min-width:0}
.vplay .vb{position:absolute;left:0;bottom:0;height:2px;background:#eab68c}
.vplay.frz{border-color:var(--warn);color:#ffdb9a}
.vplay.frz .vb{background:var(--warn)}
.vplay.lp{border-color:#4e8ed6;color:#a9c8ff}
.vplay.lp .vb{background:#4e8ed6}
.vplay.gone{border-color:var(--live);color:#ffb3b0}

/* すぐ作る・クイック追加のモーダル */
.btn.quick{background:#1d3346;border-color:#3d6a8f;color:#dcecff;font-weight:800}
.btn.quick:hover{background:#244058}
.qkKinds{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.qkGrp{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#1b1e23}
.qkGrp .gl{font-size:10.5px;color:var(--dim2);letter-spacing:.1em;font-weight:800;margin-right:2px}
.qkK{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:4px;background:#2b3037;border:1px solid var(--line2);color:var(--dim)}
.qkK.on{background:#2c4f7a;border-color:#4e8ed6;color:#e3efff}
.qkBody{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.qkBody .col{flex:1;min-width:250px}
.qkBody .pv{flex:0 0 340px;min-width:0}
.tplGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tplCard{border:2px solid #2c3138;border-radius:6px;background:#1d2126;overflow:hidden;text-align:left;padding:0}
.tplCard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tplCard img{display:block;width:100%;aspect-ratio:16/9;background:#101215}
.tplCard .nm{display:block;font-size:12px;font-weight:700;padding:4px 8px 0}
.tplCard .ps{display:block;font-size:10.5px;color:var(--dim2);padding:0 8px 6px}
.tplCard .u{font-size:9px;font-family:var(--mono);background:#3b3120;color:var(--warn);border:1px solid #6d5a2e;border-radius:2px;padding:0 4px;margin-left:4px}
.nxOpt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.nxOpt .lb{font-size:11px;color:var(--dim);font-weight:700}
.nxOpt .h{font-size:10.5px;color:var(--dim2)}
.qaNote{font-size:10.5px;color:var(--dim2);line-height:1.6;margin-top:10px}
.qaNote b{color:var(--warn)}
.endNote{font-size:10.5px;color:#cfd4da;background:#15181c;border:1px solid var(--line);border-radius:4px;padding:5px 8px;line-height:1.55;margin:6px 0 4px}
.mdl.lg{max-width:min(1280px, calc((100vh - 190px) * 16 / 9))}

/* ===== 画面4: テロップ編集 /pages/:id/edit（フリーテロップ） ===== */
#v-editor{display:flex;flex-direction:column;height:calc(100vh - var(--chromeH,74px))}
.edBar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#1d2126;border-bottom:1px solid var(--line);min-width:0;white-space:nowrap}
.edBar .cgc{font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:.04em}
.edBar .mode{font-size:10.5px;color:var(--dim2);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;max-width:260px}
.edBar input.pname{flex:0 1 220px;width:220px;min-width:100px;font-size:13px;font-weight:700}
.edBar .dirty{font-size:10.5px;color:var(--warn)}
.edBar .dirty.saved{color:var(--dim2)}
.edBar .lb{font-size:10.5px;color:var(--dim2)}
.edBar .sp{flex:1}
.edRO{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#3a1512;border-bottom:1px solid var(--live);color:#ffc9c5;font-size:12px;white-space:nowrap;min-width:0}
.edRO b{color:#fff}
.edRO .sp{flex:1}
.edRO .nt{font-size:11px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.edMain{flex:1;min-height:0;display:flex}
.edLeft{flex:0 0 212px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#191c20;min-height:0}
.edLeft h3,.edRight h3{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--dim2);padding:8px 10px 5px}
.pal{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 10px 8px}
.pal button{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 7px;border-radius:4px;background:#262a30;border:1px solid var(--line2);color:var(--text)}
.pal button:hover:not(:disabled){border-color:#5d6570;background:#2d3239}
.pal button:disabled{opacity:.35;cursor:not-allowed}
.pal button .i{width:18px;text-align:center;font-family:var(--mono);font-weight:800;color:var(--dim)}
.pal .hint{grid-column:1/-1;font-size:10px;color:var(--dim2);line-height:1.5}
.nodeList{flex:1;min-height:60px;overflow-y:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nodeList .emp{font-size:11px;color:var(--dim2);padding:10px}
.nrow{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid #22262b;cursor:pointer;user-select:none}
.nrow:hover{background:#1f242a}
.nrow.sel{background:#1c2836;box-shadow:inset 3px 0 0 var(--accent)}
.nrow .gp{color:var(--dim2);cursor:grab}
.nrow .ty{flex:0 0 38px;font-size:9px;font-family:var(--mono);font-weight:800;padding:0 2px;border-radius:2px;border:1px solid var(--line2);color:var(--dim);text-align:center}
.nrow .ty.text{color:#9fe0b0;border-color:#2f7a45}
.nrow .ty.image{color:#c6a9ec;border-color:#52456b}
.nrow .ty.plate{color:#a9c8ff;border-color:#3a5687}
.nrow .ty.video{color:#eab68c;border-color:#67462f}
.nrow .ty.audio{color:#e3b5f0;border-color:#6b3f7a}
.nrow .lb{flex:1;min-width:0;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrow .z{font-size:9.5px;font-family:var(--mono);color:var(--dim2)}
.nrow.drag{opacity:.35}
.nrow.dropb{box-shadow:inset 0 2px 0 var(--accent)}
.nrow.dropa{box-shadow:inset 0 -2px 0 var(--accent)}
.nodeOps{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px 10px 10px}
.nodeOps .btn{text-align:center;padding:4px 0}
.edCenter{flex:1;min-width:0;display:flex;flex-direction:column;background:#0e1012}
.edTools{display:flex;align-items:center;gap:10px;padding:5px 10px;border-bottom:1px solid var(--line);background:#16191d;white-space:nowrap;min-width:0;overflow:hidden}
.edTools .lb{font-size:10.5px;color:var(--dim2)}
.edTools select{font-size:11px;padding:3px 5px}
.posGrid{display:grid;grid-template-columns:repeat(3,17px);grid-template-rows:repeat(3,12px);gap:2px}
.posGrid button{background:#2b3037;border:1px solid var(--line2);border-radius:2px;padding:0}
.posGrid button:hover:not(:disabled){background:var(--accent)}
.posGrid button:disabled{opacity:.35;cursor:not-allowed}
.edTools .zoom{font-family:var(--mono);font-size:10.5px;color:var(--dim2);margin-left:auto}
.edWrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.edStage{position:relative;flex:0 0 auto;box-shadow:0 0 0 1px #000,0 6px 30px rgba(0,0,0,.6)}
.edStage canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.edBg{position:absolute;inset:0}
.edBg.chk{background-image:linear-gradient(45deg,#1b1e22 25%,transparent 25%,transparent 75%,#1b1e22 75%),linear-gradient(45deg,#1b1e22 25%,#131518 25%,#131518 75%,#1b1e22 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.edBg.black{background:#000}
.edBg.green{background:#00b140}
.edBg.photo{background:radial-gradient(ellipse at 70% 115%,rgba(255,255,255,.18),transparent 45%),linear-gradient(180deg,#6f9fd0 0%,#a9c9e6 36%,#d7dfcf 45%,#8aa965 46%,#648a43 70%,#4d6c30 100%)}
.edBg.photo::after{content:'確認用の背景（保存・サムネ・出力に含めない）';position:absolute;right:8px;top:6px;font-size:10px;color:#0b1a2a;background:rgba(255,255,255,.72);border-radius:2px;padding:0 6px}
.edGuide{position:absolute;left:2.5%;top:2.5%;right:2.5%;bottom:2.5%;border:1px dashed rgba(255,217,138,.9);pointer-events:none}
.edGuide span{position:absolute;left:4px;top:2px;font-size:9.5px;font-family:var(--mono);color:#ffd98a;background:rgba(0,0,0,.5);padding:0 4px;border-radius:2px}
.edHit{position:absolute;inset:0}
.edHit.hot{box-shadow:inset 0 0 0 3px var(--accent)}
.edSel{position:absolute;border:1.5px dashed #38bdf8;pointer-events:none}
.edSel .hd{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;background:#38bdf8;border:2px solid #0b5f8a;border-radius:50%;pointer-events:auto}
.edSel.ro{border-color:#8a5a56}
.edEmpty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--dim);text-align:center;padding:20px}
.edEmpty .t{font-size:15px;font-weight:800;color:var(--text)}
.edEmpty .fl{display:flex;flex-direction:column;gap:4px;min-width:320px;max-height:40vh;overflow-y:auto}
.edEmpty .fl button{display:flex;gap:8px;align-items:center;text-align:left}
.edRight{flex:0 0 292px;overflow-y:auto;border-left:1px solid var(--line);background:#1b1e23}
.pf{padding:0 12px 14px}
.pf .row{display:flex;align-items:center;gap:6px;margin-bottom:7px;min-width:0}
.pf .row > label:first-child{flex:0 0 58px;font-size:11px;color:var(--dim)}
.pf .row input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.pf .row input[type=color]{flex:0 0 34px;width:34px;height:24px;padding:0 2px;background:var(--well);border:1px solid var(--line2);border-radius:3px}
.pf .row select,.pf .row textarea{flex:1;min-width:0}
.pf .row .v{flex:0 0 40px;font-family:var(--mono);font-size:10.5px;color:var(--dim2);text-align:right}
.pf .grp{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--dim2);margin:12px 0 6px;padding-top:8px;border-top:1px solid var(--line)}
.pf .nt{font-size:10.5px;color:var(--dim2);line-height:1.6;margin:0 0 8px}
.pf .nt b{color:var(--text);font-weight:700}
.pf textarea{min-height:66px;font-size:12.5px}
.pf .xy{display:grid;grid-template-columns:14px 1fr 14px 1fr;gap:5px 6px;align-items:center;margin-bottom:6px}
.pf .xy label{font-size:10.5px;color:var(--dim2);font-family:var(--mono)}
.pf .xy input{width:100%;min-width:0}
.pf .xy input[readonly]{opacity:.55}
.pf input:disabled,.pf select:disabled,.pf textarea:disabled{opacity:.5}
.endSeg{display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden;flex:1;min-width:0}
.endSeg button{flex:1;font-size:11px;padding:4px 0;background:#22262b;color:var(--dim);border-right:1px solid var(--line2);white-space:nowrap}
.endSeg button:last-child{border-right:0}
.endSeg button.on{background:#2c4f7a;color:#e3efff;font-weight:800}
.endSeg button:disabled{opacity:.45;cursor:not-allowed}
.pf .sw .lb{font-size:11px}
@media (max-width:1440px){
  .edLeft{flex-basis:196px}
  .edRight{flex-basis:270px}
  .edBar .mode{max-width:150px}
  .edBar input.pname{flex-basis:170px;width:170px}
  .pal button{white-space:nowrap;gap:4px;padding:6px 5px;font-size:11.5px}
  .pal button .i{width:14px}
}
@media (max-height:880px){
  .qaBtn{padding:3px 10px}
}
/* v1.3（9/16 確定）: 番組ページはページ自体をスクロールさせない。タブ・番組ヘッダー・T1/T2 の LINE／NEXT の帯・目次は固定し、
   スクロールするのはグリッド／リストの領域（#poolScroll）だけ（送出コンソールと同じ構成） */
#v-program{display:flex;flex-direction:column;height:calc(100vh - var(--chromeH,74px));overflow:hidden}
#v-program > .vnote,#v-program > .pgHead,#v-program > .pgCur{flex:0 0 auto}
.pgCur{position:relative;top:auto}
.pgBody{flex:1;min-height:0;align-items:stretch}
.toc{position:relative;top:auto;align-self:stretch;max-height:none;overflow-y:auto}
.poolWrap{display:flex;flex-direction:column;min-height:0}
.poolBar{position:relative;top:auto;flex:0 0 auto}
.poolScroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
table.pool thead th{top:0}
.gsec{scroll-margin-top:8px}
.card{scroll-margin-top:12px}
.rail{overflow-y:auto;min-height:0}
/* 固定レイアウトの画面（番組ページ・テロップ編集・送出コンソール）はページのスクロールバーを出さない（デッキだけページがスクロールする） */
body.fixedView{overflow-y:hidden}
/* 部品一覧の長い名前で左右のパネルが広がらないようにする（広がるとキャンバスの縮尺がずれて端が切れる） */
.edLeft{min-width:0;overflow:hidden}
.edRight{min-width:0;overflow-x:hidden}
.nodeList{min-width:0}
/* 通知はモーダルの下（クイック追加の入力を隠さない） */
.ntfBox{z-index:90}
/* ===========================================================================
   8. v1.4: BACK の結果表示・BOTH TAKE を小さく・コンソールのレイアウト切替・テンキー折りたたみ・キューシート印刷
   =========================================================================== */
/* BACK（#18）: 1行目＝BACK＋キー・2行目＝押した結果（「008 を出す」「NEXT を 002 へ」） */
.trans .row2 .btn .bl i{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:400;color:var(--dim2);margin-left:5px}
.trans .row2 .btn[data-back] .k{color:#b9d8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* BOTH TAKE（#19）: 高さ 32px・控えめ（キー Ctrl+Shift+Space とデッキのボタンはそのまま） */
.bothBtn{height:32px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.1em;
  background:#1d2f3d;border:1px solid #33556f;color:#bcd7ee;box-shadow:none}
.bothBtn:hover{background:#243a4b}
.bothBtn .kk{font-size:9.5px;font-weight:600;letter-spacing:.04em;opacity:.7}
/* レイアウト切替（#21）［列の上にモニター｜中央に集める］。既定＝列の上（v1.3 と同じ） */
/* 中央上の帯は1行に保つ（切替が入った分、縮むのは番組名だけ＝ON AIR の札とタイムコードは折り返さない） */
.midTop > span:not(.pn){flex-shrink:0}
.midTop .badge-onair,.midTop .badge-prep,.midTop .tc{white-space:nowrap}
.mvWrap{display:none}
.kpGo,.kpFold{display:none}
#v-onair[data-lay=center] .mons{display:none}
#v-onair[data-lay=center] .mid{flex-basis:640px}
#v-onair[data-lay=center] .mvWrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:5px 4px 5px;background:#15181c;border-bottom:1px solid var(--line)}
.mvCol{display:flex;flex-direction:column;gap:5px;min-width:0;border-top:3px solid var(--t1);padding-top:4px}
.mvCol.t2{border-top-color:var(--t2)}
#v-onair[data-lay=center] .kpFold{display:inline-block;flex:0 0 auto}
/* 中央に集めた時のテンキー: 帯に確定ボタンを常に置き、開くと数字と CLR を 6×2 で出す（モニター・FIX・BOTH TAKE を押し出さない） */
#v-onair[data-lay=center] .keypad{padding:5px 10px;position:relative;z-index:6}
#v-onair[data-lay=center] .kpTop{margin-bottom:0}
#v-onair[data-lay=center] .keypad:not(.fold) .kpGrid{position:absolute;left:0;right:0;top:100%;padding:6px 10px 8px;background:#1d2126;
  border-top:1px solid var(--line2);border-bottom:2px solid var(--next);box-shadow:0 12px 26px rgba(0,0,0,.6)}
#v-onair[data-lay=center].kpOpen .fixP{opacity:.3;pointer-events:none}
#v-onair[data-lay=center] .kpDisp{font-size:18px}
#v-onair[data-lay=center] .kpGo{display:block}
#v-onair[data-lay=center] .kpGrid{grid-template-columns:repeat(6,1fr)}
#v-onair[data-lay=center] .kpGrid button{padding:5px 0;font-size:15px}
#v-onair[data-lay=center] .kpGrid button[data-k=ENT]{display:none}
#v-onair[data-lay=center] .kpHint{display:none}
/* テンキーの折りたたみ（中央に集めた時だけ）: 閉じている時は「対象・入力中の番号・確定ボタン・［テンキーを開く］」の細い帯。数字キーと K は閉じたままでも効く */
.keypad.fold .kpGrid,.keypad.fold .kpHint{display:none}
.keypad.fold .kpTop{margin-bottom:0}
.keypad.fold .kpDisp{font-size:18px}
.keypad.fold .kpGo{display:block}
.kpGo{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 10px;border-radius:4px;white-space:nowrap;
  background:linear-gradient(180deg,#2e7f6f,#1e5a4e);border:1px solid var(--next);color:#d8fbf4}
.kpGo:hover{background:linear-gradient(180deg,#36907e,#236557)}
@media (max-width:1440px){
  .midTop .pn{display:none}
  #v-onair[data-lay=center] .mid{flex-basis:460px}
}
@media (max-height:880px){
  #v-onair[data-lay=center] .mvWrap{padding:4px 4px 5px;gap:6px}
  #v-onair[data-lay=center] .mvCol{gap:4px;padding-top:3px}
  #v-onair[data-lay=center] .mvWrap .mon .cap{display:none}
  #v-onair[data-lay=center] .keypad{padding:4px 10px}
  #v-onair[data-lay=center] .kpGrid button{padding:3px 0;font-size:14px}
}
/* キューシート印刷（#22）: 画面＝印刷プレビュー（A4 縦の紙・ページ割りは目安）＋オプション／印刷＝#cueFlow だけ */
.cueRoot{position:fixed;inset:0;z-index:170;display:flex;background:#3b3f45}
.cueSide{flex:0 0 340px;display:flex;flex-direction:column;gap:12px;padding:16px 16px 20px;background:#1b1e23;border-right:1px solid var(--line2);overflow-y:auto}
.cueSide h3{font-size:15px;font-weight:800;letter-spacing:.03em}
.cueProg{font-size:12px;color:var(--dim);line-height:1.6}
.cueProg b{color:var(--text)}
.cueOpt{display:flex;align-items:center;gap:10px}
.cueOpt > label{flex:0 0 90px;font-size:12px;color:var(--dim);font-weight:700}
.cueOpt .seg button{font-size:12px;padding:5px 14px}
.cueSecs{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:#15181c;max-height:260px;overflow-y:auto}
.cueSecs .ops{display:flex;gap:6px;margin-bottom:5px}
.cueSecs label{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0;cursor:pointer}
.cueSecs label input{accent-color:var(--accent)}
.cueSecs label .r{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim2)}
.cueInfo{font-size:12px;color:#cfe4ff;background:#16233a;border:1px solid #2f4a75;border-radius:4px;padding:8px 10px;line-height:1.65}
.cueInfo b{font-size:15px;color:#fff;font-family:var(--mono)}
.cueInfo .s{font-size:10.5px;color:#8fb8ff}
.cueBtns{display:flex;gap:8px}
.cueBtns .btn{flex:1;padding:8px 0;font-size:13px;text-align:center}
.cueNote{font-size:10.5px;color:var(--dim2);line-height:1.75}
.cueNote b{color:var(--dim)}
.cueMain{flex:1;min-width:0;overflow:auto;padding:22px 0 40px}
.cueSheets{display:flex;flex-direction:column;align-items:center;gap:18px;zoom:.8}
.cueSheet{position:relative;flex:0 0 auto;width:210mm;height:297mm;padding:10mm 10mm 12mm;background:#fff;box-shadow:0 4px 26px rgba(0,0,0,.45);overflow:hidden}
.cueSheet .pno{position:absolute;left:0;right:0;bottom:4.5mm;text-align:center;font:8pt/1 "Hiragino Sans","Yu Gothic",sans-serif;color:#555}
.cueSheet.over{box-shadow:0 0 0 3px #e53935,0 4px 26px rgba(0,0,0,.45)}
.cueFlow{position:absolute;left:0;top:0;width:190mm;visibility:hidden;pointer-events:none;z-index:-1;background:#fff}
/* 紙の中身（プレビューの紙と印刷用で共通） */
.cs{font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;font-size:9pt;line-height:1.4;color:#111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cs *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cs-head{display:flex;align-items:flex-end;gap:4mm;padding-bottom:2.5mm;border-bottom:.6mm solid #111}
.cs-head .t{font-size:15pt;font-weight:900;letter-spacing:.02em;line-height:1.25}
.cs-head .t small{font-size:9pt;font-weight:700;color:#555;margin-left:3mm}
.cs-head .m{font-size:8.5pt;color:#333;margin-top:.8mm}
.cs-head .sp{flex:1}
.cs-head .pr{font-size:8pt;color:#444;text-align:right;line-height:1.55}
.cs-sec{margin-top:4mm}
.cs-sec.top{margin-top:0}
.cs-empty{margin-top:10mm;font-size:11pt;color:#777;text-align:center}
table.cs-t{width:100%;border-collapse:collapse;table-layout:fixed}
.cs-t thead{break-after:avoid}
.cs-t tr.cs-h{break-after:avoid}
.cs-t tr.cs-h th{background:#e6ebf2;border:.3mm solid #9aa3ad;border-left:1.6mm solid #2d5ea8;text-align:left;padding:1.1mm 2mm;font-size:10pt;font-weight:900;letter-spacing:.04em}
.cs-t tr.cs-h th .r{font-family:ui-monospace,Menlo,monospace;font-size:8pt;font-weight:600;color:#555;margin-left:3mm;letter-spacing:0}
.cs-t tr.cs-c th{background:#f4f5f7;border:.3mm solid #9aa3ad;font-size:7pt;font-weight:700;color:#444;padding:.7mm 1.5mm;text-align:left}
.cs-t tbody tr{break-inside:avoid}
.cs-t td{border:.3mm solid #b4bbc3;padding:1.1mm 1.5mm;vertical-align:middle;overflow:hidden;word-break:break-word}
.cs-t td.cg{font-family:ui-monospace,Menlo,monospace;font-size:15pt;font-weight:800;text-align:center;padding:1mm .5mm;letter-spacing:.02em}
.cs-t td.th{padding:1mm}
.cs-t td.th img,.cs-t td.th .ph{display:block;width:120px;height:68px;object-fit:cover;border:.25mm solid #9aa0a6;background:#fff;overflow:hidden}
.cs .stage{background:#fff}
.cs-t td.th .ph .stage{border:0}
.cs-t td.kd{font-size:7.5pt;color:#333}
.cs-t td.mn{font-size:10pt;font-weight:700;line-height:1.35}
.cs-t td.mn .no{display:inline-block;font-size:7pt;font-weight:700;color:#fff;background:#d8242e;border-radius:.6mm;padding:0 1mm;margin-right:1.2mm;vertical-align:1px}
.cs-t td.sb{font-size:8.5pt}
.cs-t td.nt{font-size:7.5pt;color:#555}
.cs-t td.st{text-align:center;font-size:10pt;color:#b37400}
.cs-t td.memo{background:repeating-linear-gradient(180deg,transparent 0 6.2mm,#c9ced6 6.2mm 6.45mm)}
@media print{
  @page{size:A4 portrait;margin:10mm 10mm 12mm;
    @bottom-center{content:counter(page) " / " counter(pages);font-size:8pt;color:#555;font-family:"Hiragino Sans","Yu Gothic",sans-serif}}
  html,body{height:auto !important;min-height:0 !important;overflow:visible !important;background:#fff !important}
  body.cueOpen > *:not(#cueRoot){display:none !important}
  body.cueOpen #cueRoot{position:static !important;display:block !important;inset:auto !important;background:#fff !important}
  body.cueOpen #cueRoot .cueSide,body.cueOpen #cueRoot .cueMain{display:none !important}
  body.cueOpen #cueRoot #cueFlow{position:static !important;visibility:visible !important;width:auto !important;z-index:auto !important}
}
/* ==== v1.4 CSS end ==== */
/* ===========================================================================
   9. v1.5: 送出コンソール（中央上の帯・［表示］メニュー・中央の下側＝押せない帯＋BOTH TAKE／ALL OFF・長押し）
   =========================================================================== */
/* 中央上の帯: ON AIR・タイムコード・番組名｜＋クイック追加・誤操作ロック・［表示］（狭い時は文字を短くする＝コンテナクエリ） */
.midTop{gap:8px;container-type:inline-size}
.midTop .qaBtn,.midTop .lockBtn,.midTop .layBtn{flex:0 0 auto;height:26px;line-height:24px;padding:0 9px;font-size:11px;display:inline-block;white-space:nowrap}
@container (max-width:520px){ .midTop .lg{display:none} }
@container (max-width:380px){ .midTop .lg2{display:none} .midTop .badge-onair,.midTop .badge-prep{padding:3px 6px;letter-spacing:.04em} .midTop .tc{font-size:13px} }
.layMenu{position:relative;flex:0 0 auto;display:inline-flex}
.layBtn{border-radius:4px;background:#22262b;border:1px solid var(--line2);color:var(--dim);font-weight:700}
.layBtn:hover,.layBtn.on{color:var(--text);border-color:#5d6570;background:#2b3037}
.layPop{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:210px;padding:6px;background:#23272d;border:1px solid var(--line2);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.layPop.hide{display:none}
.layPop .lh{font-size:10px;letter-spacing:.1em;color:var(--dim2);padding:2px 8px 4px;font-weight:800}
.layPop button{display:flex;align-items:center;gap:8px;text-align:left;font-size:12px;padding:6px 8px;border-radius:4px;color:var(--text);white-space:nowrap}
.layPop button::before{content:'';width:12px;flex:0 0 12px;text-align:center;color:var(--accent);font-weight:900}
.layPop button.on::before{content:'✓'}
.layPop button:hover{background:#2f353d}
.layPop button .st{margin-left:auto;font-size:9.5px;font-family:var(--mono);color:#9fe0b0;border:1px solid #2f7a45;background:#1f4a2c;border-radius:2px;padding:0 5px}
.layPop .ln{font-size:9.5px;color:var(--dim2);padding:4px 8px 1px;border-top:1px solid var(--line);margin-top:3px}
/* 中央の下側（#28・#31・v1.6 #36）: 1段目＝押せない帯（左右の列の TAKE・ON/OFF の行と同じ高さ・中身は「TAKE で出るもの」だけ）／
   2段目＝BOTH TAKE と ALL OFF（BACK・EFFECT・送りスイッチと同じ高さ）。帯の高さ（--bandH・--mastH）は measureConsole() が左右の列の TAKE の行を測って決める */
.lowZone{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--bandH,80px) var(--mastH,116px);padding:0 10px;background:#13161a;box-shadow:inset 0 1px 0 var(--line2)}
.tbInfo{grid-row:1;grid-column:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;pointer-events:none;user-select:none;-webkit-user-select:none}
.tbInfo .lb{font-size:9.5px;letter-spacing:.1em;color:var(--dim2);font-weight:800}
.tbInfo .r{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:11px;color:#cfd4da;white-space:nowrap}
.tbInfo .r b{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;font-weight:800;padding:0 5px;border-radius:2px;border:1px solid var(--line2)}
.tbInfo .r b.t1{color:var(--t1);border-color:#6b4c67;background:#3c2b3a}
.tbInfo .r b.t2{color:#f0a8a4;border-color:#7d3a36;background:#3d2220}
.tbInfo .r .num{flex:0 0 auto;font-family:var(--mono);font-weight:800;color:var(--next);font-size:12px}
.tbInfo .r .num.off{color:var(--dim2)}
.tbInfo .r .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lowZone .master{grid-row:2;grid-column:1;min-width:0;width:100%;max-width:330px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0;container-type:inline-size}
.lowZone .bothBtn{width:100%;flex:0 0 auto}
@container (max-width:205px){ .bothBtn .kk{display:none} }
.allOffBtn{position:relative;overflow:hidden;flex:0 0 auto;width:100%;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;color:#fff;
  background:repeating-linear-gradient(135deg,#8f1d19 0 9px,#761613 9px 18px);border:2px solid #ff5a52;box-shadow:0 2px 0 #3d0b09;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.allOffBtn .t{position:relative;font-size:14px;font-weight:900;letter-spacing:.14em;line-height:1.15}
.allOffBtn .k,.allOffBtn .hs{position:relative;font-size:9px;font-weight:700;letter-spacing:.02em;opacity:.92;white-space:nowrap;line-height:1.25}
.allOffBtn:hover{border-color:#ff8c86}
.allOffBtn:disabled{opacity:.35;cursor:not-allowed}
/* 長押しの進み具合（--hold＝0〜1）: 左から白く塗りつぶすバー＋残り秒（コンソール・デッキ共通） */
.allOffBtn .hold,.dk .hold{position:absolute;left:0;top:0;bottom:0;width:calc(var(--hold,0) * 100%);background:rgba(255,255,255,.36);pointer-events:none}
.allOffBtn.holding,.dk.holding{border-color:#fff;box-shadow:0 0 0 2px rgba(255,90,82,.6)}
.allOffBtn .hs{display:none}
.allOffBtn.holding .k{display:none}
.allOffBtn.holding .hs{display:block;font-weight:800}
@media (max-height:880px){ .allOffBtn{height:36px} .allOffBtn .t{font-size:13px} .lowZone .master{gap:12px} .tbInfo .r{font-size:10.5px} .tbInfo{gap:2px} }
/* v1.5: 印刷の形式［キューシート（表）｜サムネ一覧］。サムネ一覧＝A4 縦・サムネのグリッド（列数 3／4／5）。
   表組みで作る＝区切りの見出しは thead（ページをまたぐと繰り返す）・マスの段は tr（break-inside: avoid で割れない）。ページ割りの目安もキューシートと同じ規則 */
.cueFmtRow .seg button{padding:5px 8px;font-size:11.5px}
.cs-t.tg-t{border-collapse:separate;border-spacing:0}
.cs-t.tg-t td{border:0;padding:1.4mm 1.2mm 2.2mm;vertical-align:top;overflow:hidden;word-break:normal}
.tg-th img,.tg-th .ph{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border:.25mm solid #9aa0a6;background:#fff;overflow:hidden}
.tg-th .ph .stage{border:0}
.tg-r1{display:flex;align-items:baseline;gap:1.4mm;margin-top:1mm;white-space:nowrap;min-width:0}
.tg-cg{font-family:ui-monospace,Menlo,monospace;font-size:13pt;font-weight:800;letter-spacing:.02em;line-height:1.1}
.tg-kd{font-size:6.5pt;font-weight:700;color:#333;border:.25mm solid #9aa3ad;border-radius:.6mm;padding:0 1mm;line-height:1.35}
.tg-st{font-size:8pt;color:#b37400}
.tg-mn{font-size:8.5pt;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.5mm}
.tg-mn .no{display:inline-block;font-size:6.5pt;font-weight:700;color:#fff;background:#d8242e;border-radius:.6mm;padding:0 1mm;margin-right:1.2mm;vertical-align:1px}
.tg-sb{font-size:7pt;color:#555;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-c3 .tg-cg{font-size:15pt} .tg-c3 .tg-mn{font-size:9.5pt} .tg-c3 .tg-sb{font-size:7.5pt}
.tg-c5 .tg-cg{font-size:11pt} .tg-c5 .tg-mn{font-size:7.5pt} .tg-c5 .tg-sb{font-size:6.5pt}
/* v1.5（#32）: テロップ編集の［↶ 元に戻す］［↷ やり直す］ */
.edBar .hist{display:inline-flex;gap:4px;flex:0 0 auto}
.edBar .hist .btn{padding:4px 8px}
/* v1.5: 番組ページのグリッドの D&D（つかみ手＝サムネと CG 番号・差し込み位置はカードの横の縦線／見出しの下線。カードは overflow:hidden なので線は box-shadow で外に出す） */
.card .th[draggable="true"],.card .cgn[draggable="true"]{cursor:grab}
.card.dragging{opacity:.35}
.card.dropL{box-shadow:-8px 0 0 -3px var(--accent),-10px 0 14px -6px rgba(79,142,247,.95)}
.card.dropR{box-shadow:8px 0 0 -3px var(--accent),10px 0 14px -6px rgba(79,142,247,.95)}
.gsec.dropTop{box-shadow:inset 0 -4px 0 var(--accent),0 0 0 1px var(--accent)}
/* ==== v1.5 CSS end ==== */
/* ===========================================================================
   10. v1.6（9/16 オーナー）: 合成 LINE を中央の上へ（#35・小さく）／FIX パネルを右に並べて行を大きく（#38）／押せない帯は「TAKE で出るもの」だけ（#36）
   =========================================================================== */
#v-onair{--fixChipH:40px}
/* 中央の上側: 左＝小さい合成 LINE（押せない）・右＝FIX パネル。高さは「FIX の3行」と「モニター」の高い方 */
.topZone{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,var(--compW,200px)) minmax(0,1fr);grid-template-rows:minmax(0,var(--topRowH,auto));gap:10px;
  padding:6px 10px 6px;background:#15181c;border-bottom:1px solid var(--line)}
.topZone .mon.comp{align-self:center;border-color:#6b4a48;pointer-events:none}
.topZone .mon.comp .hd{background:#3a2524;color:#ffc9c5}
.topZone .mon.comp .cap{font-size:10px;padding:1px 5px 2px}
.topZone .fixP{min-height:0;height:100%;flex:1 1 auto;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.topZone .fixHd{padding:4px 10px}
.topZone .fixP > .fixNote{display:none}
#v-onair[data-lay=columns] .topZone{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:7px 10px 8px}
#v-onair[data-lay=columns] .fixChips{min-height:92px}
#v-onair[data-lay=columns] .topZone .mon.comp{width:100%;max-width:var(--compW,240px)}
.topZone .fixHd{overflow:hidden}
@container (max-width:320px){
  .topZone .fixHd{gap:4px;padding:4px 6px}
  .topZone .fixHd .nm{font-size:11.5px;letter-spacing:.04em}
  .topZone .fixHd .cn{font-size:9.5px}
  .topZone .fixHd .sp{display:none}
  .topZone .fixHd select{font-size:9.5px;padding:2px 2px;flex:0 1 auto;min-width:0}
  .topZone .fixHd .btn.xs{font-size:9.5px;padding:2px 5px;flex:0 0 auto}
}
@media (max-height:880px){ .topZone{padding:5px 10px 6px;gap:8px} }
/* マルチビュー: 残りの高さに収まるよう measureConsole() がモニターの幅（--mvW）を決める（16:9 のまま・足りない時だけ小さくなる） */
#v-onair[data-lay=center] .mvWrap{flex:1 1 auto;min-height:0;overflow:hidden;align-content:center}
#v-onair[data-lay=center] .mvCol .mon{width:100%;max-width:var(--mvW,100%);margin:0 auto}
/* 押せない帯（#36）: 「TAKE で出るもの」を T1／T2 の2列で大きく出す */
.tbInfo .rw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px}
.tbInfo .r{font-size:12px}
.tbInfo .r .num{font-size:14px}
/* 開いたテンキー（6×2）は FIX パネルの上にだけ重ねる（合成 LINE は隠さない） */
#v-onair[data-lay=center] .keypad:not(.fold) .kpGrid{left:calc(var(--compW,200px) + 20px);right:10px}
/* ==== v1.6 CSS end ==== */
/* ===========================================================================
   11. v1.7（9/16 オーナー #43）: T1/T2 の LINE・NEXT を元の大きさに戻す
   ・中央カラムを 580 → 640px に広げる（左右の列は 510 → 480px・TAKE と ON/OFF は外側の端を動かさない）
   ・高さの配り方を逆にした: 「マルチビューに要る高さ」を先に取り、余りを中央の上の段（合成 LINE＋FIX チップ）へ（measureConsole）
   ・FIX は横並びのチップ（上の「FIX パネル」の節）／合成 LINE は下の説明を削除してさらに小さく（#41）
   =========================================================================== */
/* 1280 級（縦 800）はマルチビュー優先で上下を詰める＝モニターの見出し・告知帯・中央上の帯を薄く */
@media (max-height:880px){
  .mon .hd{padding:1px 6px;line-height:1.3}
  .vnote{padding:4px 16px}
  .midTop .qaBtn,.midTop .lockBtn,.midTop .layBtn{height:24px;line-height:22px}
  #v-onair[data-lay=center] .mvWrap{padding:3px 4px 4px}
}
/* ==== v1.7 CSS end ==== */
/* ===========================================================================
   12. v1.8（9/16 オーナー #45・#40）: ［表示］に「合成 LINE を表示」の切替／送出PC の画面が小さい時の段階的な縮小
   ・#45: 合成 LINE を畳むと中央の上の段は FIX チップだけになり、空いた高さはマルチビューへ回る（measureConsole）
   ・#40:「送出PC の解像度はまちまちで小さい時もある」→ 1366×768・1280×720 でも成立させる。
     縮める順番は ①合成 LINE を畳む ②FIX チップを1段 ③行のサムネ 112×63 ④マルチビュー（下限 150×84）。
     どの段でもページはスクロールしない・TAKE×2・ON/OFF×2・BOTH TAKE・ALL OFF は見える・誤押し対策は保つ。
   ・中央カラムの幅は畳んでも変えない＝TAKE・ON/OFF の位置と大きさは動かない（#28・#43 の約束）
   =========================================================================== */
/* ［表示］メニューの2つ目のまとまり（チェックの印は .layPop button.on::before の ✓ を流用） */
.layPop .lh2{font-size:10px;letter-spacing:.1em;color:var(--dim2);padding:6px 8px 4px;font-weight:800;border-top:1px solid var(--line);margin-top:3px}
/* #45: 畳んだ時＝合成 LINE のモニターを消して、上の段は FIX チップだけの1カラムにする */
#v-onair[data-comp=off] #compMon{display:none}
#v-onair[data-comp=off][data-lay=center] .topZone{grid-template-columns:minmax(0,1fr)}
#v-onair[data-comp=off][data-lay=columns] .topZone{display:none}
/* 畳んでいる間は、開いたテンキーは中央の幅いっぱいに重ねてよい（隠す合成 LINE がない） */
#v-onair[data-comp=off][data-lay=center] .keypad:not(.fold) .kpGrid{left:10px}
/* 畳んでいる間の目印（押せない帯の「TAKE で出るもの」の横・押せない） */
.tbInfo .lb .cx{margin-left:8px;font-size:9px;font-weight:800;letter-spacing:.04em;color:#ffc9c5;background:#3a2524;border:1px solid #6b4a48;border-radius:2px;padding:0 5px;white-space:nowrap}
/* ③ 行のサムネを 112×63 に（中央の高さには効かない＝左右の列の一覧に見える行数を増やすための段） */
#v-onair[data-thumb=sm] .cue{min-height:71px;gap:8px}
#v-onair[data-thumb=sm] .cue .tb{width:112px;height:63px;flex:0 0 112px}
#v-onair[data-thumb=sm] .cue .mn{font-size:12.5px}
#v-onair[data-thumb=sm] .cue .sb{font-size:10.5px}
/* #40: 縦 790px 未満（1366×768・1280×720 など）はさらに詰める。1600×1000・1280×800 には当たらない＝既存の寸法は不変 */
@media (max-height:790px){
  .midTop{padding:2px 10px}
  .midTop .qaBtn,.midTop .lockBtn,.midTop .layBtn{height:22px;line-height:20px;font-size:10.5px;padding:0 8px}
  #v-onair[data-lay=center] .keypad{padding:3px 10px}
  #v-onair[data-lay=center] .kpDisp{font-size:16px;padding:0 9px 1px}
  .kpTgt button{padding:2px 8px}
  .kpGo{padding:3px 9px;font-size:11.5px}
  .topZone{padding:4px 10px 4px;gap:8px}
  .fixHd{padding:3px 8px}
  #v-onair[data-lay=center] .mvWrap{padding:2px 4px 3px;gap:5px}
  #v-onair[data-lay=center] .mvCol{gap:3px;padding-top:2px}
  .lyHead{padding:2px 10px}
  /* TAKE の行の高さを決めているのは TAKE ではなく ON/OFF（3行ある）。TAKE だけ詰めても縮まないので両方詰める。
     TAKE の行より下（BACK・EFFECT・送りスイッチ）を 1px 詰めると中央は 1px 広がり、TAKE の行自体を 1px 詰めるとさらに 1px 広がる */
  .trans{padding:4px 8px}
  .takeBtn{padding:7px 8px;font-size:17px}
  .onoffBtn{padding:2px 4px;gap:0}
  .onoffBtn .t{font-size:12px}
  .onoffBtn .s{font-size:9.5px}
  .onoffBtn .k{font-size:9px}
  .trans .row1,.trans .row2,.efRow{margin-bottom:3px}
  .trans .row2 .btn{padding:2px 2px;font-size:11px}
  .efRow{padding:1px 6px}
  .efBtn{padding:3px 9px}
  .efRow select{padding:2px 5px}
  .bothBtn{padding:6px;font-size:14px}
  .allOffBtn{height:32px}
  .lowZone .master{gap:10px}
}
/* ==== v1.8 CSS end ==== */