/* 動画の一覧はアプリとして動かす。HTML は入れ物だけで、中身は index.json から組む。
   以前は全308本の台本を HTML に焼いていて 1.2MB あった */
:root{color-scheme:dark;--bg:#0f0f0f;--fg:#f1f1f1;--mute:#aaa;--chip:#272727;--line:#303030;
  --acc:#3ea6ff;--ok:#2e7d32;--ng:#b3261e}
*{box-sizing:border-box}
html,body{overscroll-behavior-y:none}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.4;
  font-family:Roboto,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}

/* ---- ヘッダー ---- */
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:12px;padding:10px 24px}
.hd h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.hd h1 span{color:#ff0033}
.sbox{position:relative;flex:1;max-width:520px}
.sbox input{width:100%;background:#121212;border:1px solid var(--line);border-radius:999px;
  color:var(--fg);font-family:inherit;font-size:14px;line-height:1;padding:10px 74px 10px 38px}
.sbox input:focus{outline:none;border-color:var(--acc)}
.sbox .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mute);font-size:13px}
.sbox kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--mute);
  font-family:inherit;font-size:11px;line-height:1;border:1px solid var(--line);border-radius:4px;padding:3px 5px}
.sbox input:not(:placeholder-shown)~kbd{display:none}
select.srt{background:var(--chip);color:var(--fg);border:0;border-radius:8px;
  font-family:inherit;font-weight:500;font-size:13px;line-height:1;padding:9px 10px;cursor:pointer}
.hd .grow{margin-left:auto}
.prog{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:12px;white-space:nowrap}
.bar{width:90px;height:6px;border-radius:3px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);width:0;transition:width .2s}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 24px 10px;scrollbar-width:none;align-items:center}
.chips::-webkit-scrollbar{display:none}
.chips .sep{width:1px;height:20px;background:var(--line);flex:none;margin:0 4px}
.chip{flex:none;border:0;cursor:pointer;background:var(--chip);color:var(--fg);
  font-family:inherit;font-weight:500;font-size:13px;line-height:1;padding:9px 13px;border-radius:8px;white-space:nowrap}
.chip:hover{background:#3f3f3f}
.chip.on{background:var(--fg);color:#0f0f0f}
.chip b{font-weight:400;opacity:.6;margin-left:6px}
.chip.ok.on{background:var(--ok);color:#fff}
.chip.ng.on{background:var(--ng);color:#fff}
/* ジャンル (脱成長など)。チャンネルのチップと見分けられるよう緑の縁 */
.chip.gn{box-shadow:inset 0 0 0 1.5px #3fae64}
.chip.gn.on{background:#3fae64;color:#fff;box-shadow:none}

/* ---- 一覧 ---- */
main{padding:16px 24px 90px;max-width:1800px;margin:0 auto}
.grid{display:grid;gap:26px 16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.empty{color:var(--mute);text-align:center;padding:80px 0;font-size:14px}
article{min-width:0;scroll-margin:120px}
article.playing{grid-column:span 2}
article.playing .thumb{height:min(88vh,1000px);width:auto;max-width:100%;margin:0 auto;aspect-ratio:auto}
article.playing .thumb video{width:100%;height:100%;display:block;background:#000}
article.sel .thumb{box-shadow:0 0 0 3px var(--acc)}
.thumb{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;background:#000;
  aspect-ratio:9/16;transition:border-radius .12s}
article.h .thumb{aspect-ratio:16/9}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{border-radius:4px}
.thumb .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;
  font-family:inherit;font-weight:500;font-size:12px;line-height:1;padding:3px 5px;border-radius:4px}
.thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s;background:rgba(0,0,0,.25);font-size:44px;color:#fff}
.thumb:hover .play{opacity:1}
.thumb video{width:100%;height:100%;display:block;background:#000}
.badge{position:absolute;left:6px;top:6px;font-family:inherit;font-weight:600;font-size:11px;line-height:1;padding:4px 6px;border-radius:5px;
  background:rgba(0,0,0,.75);color:#fff}
.info{padding:10px 2px 0}
.ttl{margin:0;font-size:14px;font-weight:500;line-height:1.35;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ttl:hover{color:var(--acc)}
.ttl mark{background:#4a3a00;color:#ffd866;border-radius:2px}
.sub{color:var(--mute);font-size:12px;margin-top:3px}
.dlc{color:var(--acc)}
.dl0{opacity:.55}
.chip.dl.on{background:var(--acc);color:#fff}
.rv{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.rv button{border:1px solid var(--line);background:var(--chip);color:var(--mute);
  border-radius:7px;padding:3px 9px;font-size:11px;cursor:pointer;white-space:nowrap}
.rv button:hover{background:#3f3f3f}
.rv button.on{color:#fff;border-color:transparent}
.rv button[data-s=""].on{background:#555}
.rv button[data-s="ok"].on{background:var(--ok)}
.rv button[data-s="ng"].on{background:var(--ng)}
.rv button.ntb{margin-left:auto}
.rv button.ntb.has{color:#ffd866;border-color:#6b5a1a;background:#2a2410}
.note{color:#ffd866;font-size:12px;margin-top:5px;white-space:pre-wrap;cursor:pointer;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note:empty{display:none}
.nted{margin-top:6px}
.nted textarea,#fnote{width:100%;background:#181818;color:var(--fg);border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:13px;line-height:1.5;padding:8px;resize:vertical;min-height:64px}
.nted textarea:focus,#fnote:focus{outline:none;border-color:#ffd866}
/* iPhone の Safari は 16px 未満の入力欄を押すと拡大して戻らない (2026-09-25「コメントを書くときに拡大されてしまう」)。タッチの端末だけ 16px */
@media (pointer:coarse){.nted textarea,#fnote{font-size:16px}}
.ntact{display:flex;align-items:center;gap:6px;margin-top:2px}
.ntact .cpb{margin-top:4px}
.chip.nt.on{background:#ffd866;color:#1a1400}
/* ゴミ箱。押した直後はその場に薄く残す (通常の一覧では入れたもの、ゴミ箱では戻したもの) */
.rv button.trb:hover{color:#fecaca;border-color:#7f1d1d}
.grid:not(.trview) article.trashed,.grid.trview article:not(.trashed){opacity:.38}
.chip.tr.on{background:#7a7a7a;color:#fff}
article.rv-ok .thumb{outline:2px solid var(--ok);outline-offset:2px}
article.rv-ng .thumb{outline:2px solid var(--ng);outline-offset:2px}
.cpb{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:4px 10px;
  border:0;border-radius:8px;background:var(--chip);color:var(--fg);
  font-family:inherit;font-weight:500;font-size:12px;line-height:1.2;cursor:pointer;transition:background .12s,color .12s}
.cpb:hover{background:#3f3f3f}
.cpb.ok{background:#14532d;color:#4ade80}
.cpb.ng{background:#7f1d1d;color:#fecaca}
details.tg{margin-top:6px}
details.tg>summary{list-style:none;cursor:pointer;color:var(--mute);font-size:12px;
  padding:3px 0;user-select:none;-webkit-user-select:none}
details.tg>summary::-webkit-details-marker{display:none}
details.tg>summary:hover{color:var(--fg)}
.tri{display:inline-block;width:12px;font-size:9px;transition:transform .15s}
details.tg[open]>summary .tri{transform:rotate(90deg)}
.tgb{padding:4px 0 0 12px}
pre{white-space:pre-wrap;font-family:inherit;font-size:12px;line-height:1.6;color:#c9d3df;margin:6px 0 0;
  background:#181818;padding:10px;border-radius:8px}
pre.scr,pre.desc{max-height:360px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;margin:4px 0 0;white-space:pre-wrap}
.lbl{margin-top:10px;color:var(--mute);font-size:12px;display:flex;align-items:center;gap:8px}
.lbl .cpb{margin:0;padding:3px 8px;font-size:11px}
.chap{margin-top:6px}.chap a{color:var(--acc);text-decoration:none;margin-right:10px;font-size:12px}
.dl{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.dl a{display:inline-flex;align-items:center;padding:5px 10px;border-radius:8px;font-size:12px;
  text-decoration:none;background:var(--chip);color:var(--fg)}
.dl a:hover{background:#3f3f3f}
footer{color:var(--mute);font-size:12px;text-align:center;padding:24px}

/* ---- 画面の切替 (カンバン / 一覧) ---- */
.vsw{display:flex;background:var(--chip);border-radius:8px;padding:2px;flex:none}
.vsw button{border:0;background:transparent;color:var(--mute);font-family:inherit;font-weight:500;font-size:13px;line-height:1;padding:7px 11px;border-radius:6px;cursor:pointer}
.vsw button.on{background:var(--fg);color:#0f0f0f}
body.kb .kbhide{display:none}
body:not(.kb) .kbonly{display:none}
.chip.fx.on{background:#7c3aed;color:#fff}
article.rv-fixed .thumb{outline:2px solid #8b5cf6;outline-offset:2px}

/* ---- カンバン。列は横に5本、列の中だけ縦に流れる ---- */
.board{display:grid;grid-template-columns:repeat(5,minmax(236px,1fr));grid-template-rows:minmax(0,1fr);gap:12px;align-items:start;
  overflow-x:auto;padding-bottom:6px;height:100%}
.col{background:#161616;border:1px solid var(--line);border-top:3px solid #666;border-radius:12px;
  display:flex;flex-direction:column;max-height:100%;min-width:0}
.col.c-ng{border-top-color:var(--ng)}
.col.c-fixed{border-top-color:#8b5cf6}
.col.c-ok{border-top-color:var(--ok)}
.col.c-posted{border-top-color:var(--acc)}
.col.over{border-color:var(--acc);background:#0f1d2a}
.colh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.colh b{font-size:14px}
.colh .cn{color:var(--mute);font-size:12px}
.colgo{margin-left:auto;border:0;cursor:pointer;background:var(--chip);color:var(--fg);
  font-family:inherit;font-weight:600;font-size:11px;line-height:1;padding:6px 9px;border-radius:7px}
.colgo:hover{background:#3f3f3f}
.cards{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:64px}
.kc{display:flex;gap:9px;background:#202020;border:1px solid transparent;border-radius:10px;padding:6px;cursor:pointer}
.kc:hover{border-color:#4a4a4a}
.kc.drag{opacity:.35}
.kp{width:44px;height:78px;object-fit:cover;border-radius:6px;background:#000;flex:none}
.kbody{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.kt{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kt{cursor:copy;border-radius:4px}
.kt:hover{background:#262626}
.kt.ok{color:#4ade80}
.kt.ng{color:#fecaca}
.kt mark{background:#4a3a00;color:#ffd866;border-radius:2px}
.ks{color:var(--mute);font-size:11px}
.kbadge{background:#333;color:#ddd;border-radius:4px;padding:1px 5px}
.knote{color:#ffd866;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kact{margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kdl,.fdla{display:inline-flex;align-items:center;justify-content:center;color:var(--acc);border-radius:7px;background:#10202e;border:0;padding:0;cursor:pointer}
.kdl{width:28px;height:24px}
.kdl.gifb,.fdla.gifb{width:auto;padding:0 7px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.02em}
.kdl:hover,.fdla:hover{background:#163049}
.kar{color:var(--mute);background:#1f1f1f}
.kar:hover{color:var(--fg);background:#2c2c2c}
.kdl.ok,.fdla.ok{background:#14532d;color:#4ade80}
.kdl.ng,.fdla.ng{background:#7f1d1d;color:#fecaca}
.fdl{display:inline-flex;gap:6px}
.fdla{width:36px;height:32px}
.fdla svg{width:20px;height:20px}
.kmv{align-self:flex-start;width:74px;background:var(--chip);color:var(--mute);border:1px solid var(--line);
  border-radius:6px;font-family:inherit;font-size:11px;line-height:1.2;padding:3px 4px;cursor:pointer}

/* ---- チェック専用モード ---- */
.rvbtn{position:fixed;right:22px;bottom:22px;z-index:30;border:0;cursor:pointer;
  background:var(--acc);color:#04121f;font-family:inherit;font-weight:700;font-size:14px;line-height:1;padding:14px 18px;border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.5)}
.rvbtn:hover{filter:brightness(1.1)}
#focus{position:fixed;inset:0;z-index:60;background:#000;display:none;flex-direction:column}
body.focus #focus{display:flex}
body.focus{overflow:hidden}
#focus .fbar{display:flex;align-items:center;gap:12px;padding:10px 16px;color:var(--fg);
  background:#0b0b0b;border-bottom:1px solid var(--line);flex:none}
#focus .fbar .t{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#focus .fbar .n{color:var(--mute);font-size:12px;white-space:nowrap;margin-left:auto}
#focus .stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px}
#focus video{max-width:100%;max-height:100%;background:#000}
#focus .fnote{flex:none;background:#0b0b0b;border-top:1px solid var(--line);padding:10px 16px 0;
  display:flex;gap:8px;align-items:stretch}
#focus .fnote textarea{min-height:56px;max-height:160px;flex:1}
#fsend{flex:none;border:0;cursor:pointer;border-radius:10px;padding:0 18px;font-family:inherit;font-weight:700;font-size:14px;line-height:1;
  background:#ffd866;color:#1a1400}
#fsend:hover{filter:brightness(1.08)}
#fsend:disabled{opacity:.5;cursor:default}
#focus .fact{display:flex;gap:10px;justify-content:center;padding:12px 16px 20px;flex:none;
  background:#0b0b0b;flex-wrap:wrap}
#focus .fact button{border:0;cursor:pointer;border-radius:10px;padding:12px 20px;
  font-family:inherit;font-weight:700;font-size:14px;line-height:1;background:var(--chip);color:var(--fg)}
#focus .fact button.ok{background:var(--ok);color:#fff}
#focus .fact button.ng{background:var(--ng);color:#fff}
#focus .fact button.tr{background:#3a3a3a;color:#fecaca}
#focus .fact button:hover{filter:brightness(1.15)}
.rvbtn .k{opacity:.6;font-weight:400;margin-left:4px}
#focus .fact .k{opacity:.65;font-weight:400;margin-left:7px;font-size:12px}
.x{background:transparent;border:0;color:var(--mute);font-size:20px;cursor:pointer;line-height:1}
.x:hover{color:var(--fg)}

/* ---- 出したり消したり ---- */
#toast{position:fixed;left:50%;bottom:26px;z-index:80;pointer-events:none;
  transform:translateX(-50%) translateY(10px);opacity:0;transition:opacity .15s,transform .15s;
  background:#e9eef5;color:#101010;font-size:13px;font-weight:700;padding:9px 18px;
  border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{background:#f87171;color:#fff}
#help{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.72);display:none;
  align-items:center;justify-content:center;padding:20px}
body.help #help{display:flex}
#help .box{background:#181818;border:1px solid var(--line);border-radius:14px;padding:22px 26px;
  max-width:460px;width:100%}
#help h3{margin:0 0 14px;font-size:16px}
#help table{width:100%;border-collapse:collapse;font-size:13px}
#help td{padding:5px 0;color:var(--fg)}
#help td:first-child{width:92px;color:var(--mute)}
#help kbd{background:var(--chip);border-radius:5px;padding:2px 7px;font-family:inherit;font-weight:600;font-size:12px;line-height:1.5}
@media(max-width:820px){
  .hd{flex-wrap:wrap}
  .hd h1{font-size:17px}
  .sbox{order:3;flex-basis:100%;max-width:none}
  .prog .bar{display:none}
}
/* 狭い画面では列を1本ずつ横にめくる (ページ自体は横に動かさない) */
@media(max-width:820px){
  .board{grid-template-columns:repeat(5,84%);scroll-snap-type:x mandatory}
  .col{scroll-snap-align:start}
}
@media(max-width:600px){.hd,.chips,main{padding-left:12px;padding-right:12px}
  /* 画面が狭いとヘッダーだけで230px 使う。貼り付けをやめて一覧に画面を渡す */
  header{position:static}
  .rvbtn{right:14px;bottom:14px;padding:12px 16px}
  /* 進みの文は長いので折り返す (折り返さないとページが横にはみ出して全体が縮む) */
  .prog{white-space:normal;flex-wrap:wrap;row-gap:2px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  article.playing{grid-column:1/-1}}

/* ---- 2026-09-26「サイト UI UX 改善して」 ---- */
/* カンバンは画面の高さぴったりに収め、ページは動かさない。列の中だけが縦に流れる。
   以前はページと列の両方が動き、スマホではヘッダーが画面の3分の1を取ったまま列だけが流れていた */
body.kb{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.kb header{flex:none}
body.kb main{flex:1;min-height:0;width:100%;padding-bottom:12px}
body.kb footer{display:none}
/* 右下の「チェックを始める」が最後のカードに重ならないよう、重なる列の最後に余白 */
.col:last-child .cards::after{content:"";flex:none;height:56px}
.rvbtn{bottom:calc(22px + env(safe-area-inset-bottom))}
#toast{bottom:calc(26px + env(safe-area-inset-bottom))}
/* iPhone は 16px 未満の入力欄・選択を押すと拡大して戻らない。検索・並び・移動… も 16px にする */
@media (pointer:coarse){.sbox input,select.srt,.kmv{font-size:16px}.kmv{width:88px}}
/* キーボードの無い端末ではキーの手がかりを出さない */
@media (hover:none) and (pointer:coarse){.k,.sbox kbd,#helpbtn,.ntact .sub{display:none}}
/* チェック専用モードの下の端 (iPhone のホームバー) */
#focus .fact{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

@media(max-width:600px){
  /* ヘッダーを詰める (307px → 約160px)。1段目: 名前・画面の切替・並び / 2段目: 検索 / 3段目: 進み / 4段目: チップを1列に */
  .hd{gap:8px;padding:8px 12px}
  .hd h1{font-size:16px;order:1}
  .vsw{order:2;margin-left:auto}
  select.srt{order:3;padding:7px 8px}
  /* 並びは16pxだと1段目に入らない。カンバンの列の中は更新順のまま使うので、スマホのカンバンでは出さない (一覧では出す) */
  body.kb select.srt{display:none}
  .hd .grow{display:none}
  .sbox{order:4}
  .sbox input{padding-top:8px;padding-bottom:8px}
  .prog{order:5;flex-basis:100%;min-width:0;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;font-size:11px}
  #progtext{min-width:0;overflow:hidden;text-overflow:ellipsis}
  body.kb #count,body.kb #dltotal{display:none}
  .chipbar{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 12px 8px}
  .chipbar::-webkit-scrollbar{display:none}
  .chipbar .chips{flex:none;overflow:visible;padding:0 8px 0 0}
  .chip{padding:8px 11px}
  body.kb main{padding-top:10px}
  /* スマホは列が画面の幅いっぱいなので、どの列でも右下のボタンの分だけ下を空ける */
  .col .cards::after{content:"";flex:none;height:60px}
  .rvbtn{bottom:calc(14px + env(safe-area-inset-bottom))}
  /* チェック専用モード: 題名は2行まで出す (1行だと「ゾウが聞き…」で切れていた)。
     判定は親指の届く下に大きく: 1段目 NG・OK / 2段目 前・ゴミ箱・次へ */
  #focus .fbar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t x" "d n";gap:6px 10px;padding:8px 12px}
  #focus .fbar .t{grid-area:t;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
  #focus .fbar .fdl{grid-area:d}
  #focus .fbar .n{grid-area:n;align-self:center;margin-left:0}
  #closerv{grid-area:x;align-self:start;justify-self:end;padding:0 2px}
  #focus .stage{padding:4px 0}
  #focus .fnote{padding:8px 12px 0}
  #focus .fact{display:grid;grid-template-columns:repeat(6,1fr);grid-template-areas:"ng ng ng ok ok ok" "pv pv tr tr nx nx";
    gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  #focus .fact button{padding:13px 4px}
  #focus .fact button[data-s=ng]{grid-area:ng;padding:17px 4px;font-size:16px}
  #focus .fact button[data-s=ok]{grid-area:ok;padding:17px 4px;font-size:16px}
  #focus .fact button[data-d="-1"]{grid-area:pv}
  #focus .fact button[data-trash]{grid-area:tr}
  #focus .fact button[data-d="1"]{grid-area:nx}
}

/* GIF を見るモード: GIF のある動画だけを動いたまま並べる。縦の GIF は高さを抑える */
.gifgrid{display:grid;gap:22px 16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));align-items:start}
.gc{margin:0;min-width:0;background:#161616;border-radius:10px;overflow:hidden}   /* min-width:0 が無いと GIF の元の幅 (720px) で横にはみ出した */
.gc img{display:block;width:100%;background:#fff}
.gc.v img{max-height:min(72vh,560px);object-fit:contain}   /* 縦の GIF は高くなりすぎるので抑える (横は白で埋まる) */
.gc figcaption{display:flex;align-items:center;gap:8px;padding:8px 10px}
.gc .gt{flex:1;font-size:13px;line-height:1.35;cursor:pointer}
.gc .gifb{flex:none;height:26px}
/* GIF を見るモードでは「チェックを始める」(字幕の上に重なる) と、スマホの並びの選択を出さない */
body.gifv .rvbtn{display:none}
@media(max-width:600px){body.gifv select.srt{display:none}}
.gc .gv{color:#ffd866;font-weight:700;margin-left:4px}