/* ══════════════════════════════════════════════════════════════════════════
   KUGINA STUDIO — editor.css  (M0 骨格・城野命名 2026-08-14 / 計画書 §M0)
   ────────────────────────────────────────────────────────────────────────
   ★このファイルの全セレクタは .kstudio 配下にスコープする(グローバルにロード
     されても既存画面に1バイトも影響しない=計画書4節「本番挙動を1バイトも変えない」)。
   ★:root や body や素の要素セレクタは禁止(スコープ外に漏れる)。CSS変数は
     .kstudio 自身に定義する。★真似るのは配置と体験のみ・意匠は自前(計画書1節)。
   ══════════════════════════════════════════════════════════════════════════ */

.kstudio {
  /* ダークUI(採用済みカードモックの世界観・意匠は自前)。青系アクセントは本体の --accent(#4a9eff)に寄せる */
  --ks-bg:        #0e1116;
  --ks-panel:     #161b22;
  --ks-panel-2:   #1c232d;
  --ks-line:      #29323d;
  --ks-fg:        #e6edf3;
  --ks-fg-dim:    #9aa7b4;
  --ks-fg-faint:  #6b7681;
  --ks-accent:    #4a9eff;
  --ks-accent-2:  #2f86e6;
  --ks-accent-rgb: 74, 158, 255;
  /* ★クリップの種類色(城野裁定 2026-08-17「映像と音とテキストでカラー分け」)。映像=青(既存アクセント)/音=緑/テキスト=琥珀。自前の配色 */
  --ks-kind-video: #4a9eff;  --ks-kind-video-rgb: 74, 158, 255;
  --ks-kind-audio: #3ecf8e;  --ks-kind-audio-rgb: 62, 207, 142;
  --ks-kind-caption: #f2b544; --ks-kind-caption-rgb: 242, 181, 68;
  --ks-zone-badge: #9B7BD4;
  --ks-radius:    12px;
  --ks-topbar-h:  48px;
  --ks-left-w:    340px;
  --ks-materials-w: 264px;
  --ks-inspector-w: 280px;
  --ks-timeline-h: 332px;   /* NLE化(2026-08-17): ツール行+帯+ルーラー34+T1 34+V1 76+A1 48(骨格の絵と同じ比率) */

  position: fixed;
  inset: 0;
  z-index: 2147483000;   /* 既存の最前面(オーバーレイ/トースト)より上に確実に覆う */
  display: grid;
  grid-template-rows: var(--ks-topbar-h) 1fr;
  background: var(--ks-bg);
  color: var(--ks-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.kstudio, .kstudio * { box-sizing: border-box; }

/* ── 上帯 ── */
.kstudio-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ks-line);
  background: linear-gradient(180deg, #12171e, #0e1116);
}
.kstudio-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .02em;
}
.kstudio-brand b { color: var(--ks-fg); }
.kstudio-brand span { color: var(--ks-accent); }
.kstudio-badge {
  font-size: 11px;
  color: var(--ks-fg-dim);
  border: 1px solid var(--ks-line);
  border-radius: 999px;
  padding: 2px 10px;
}
.kstudio-topbar-spacer { flex: 1; }
.kstudio-topbtn {
  appearance: none;
  border: 1px solid var(--ks-line);
  background: var(--ks-panel-2);
  color: var(--ks-fg-dim);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.kstudio-topbtn:hover { color: var(--ks-fg); border-color: var(--ks-accent); }

/* ── 本体3ペイン: [左=チャット] [右= 上:素材+ビューア / 下:タイムライン] ── */
.kstudio-body {
  display: grid;
  grid-template-columns: var(--ks-left-w) 1fr;
  min-height: 0;
}
.kstudio-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--ks-line);
  background: var(--ks-panel);
}
.kstudio-right {
  display: grid;
  /* ★列を minmax(0,1fr) で固定する。暗黙の auto 列だと、下のクリップ列(数万px)に引きずられて
     ビューアも数万px幅になり、動画が画面の外(中央=約2万px先)へ行く=「プレビューが真っ黒」の正体
     (城野実機 2026-08-16・ローカル実測: viewer幅45,435px / video x=23,161px)。 */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr var(--ks-timeline-h);
  min-height: 0;
  min-width: 0;
}

/* ── 左: AIチャット(M0は枠のみ・M2でカード合流) ── */
.kstudio-pane-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ks-fg-dim);
  text-transform: none;
  border-bottom: 1px solid var(--ks-line);
}
.kstudio-pane-h .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ks-accent);
  box-shadow: 0 0 0 3px rgba(var(--ks-accent-rgb), .18);
}
.kstudio-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kstudio-msg {
  border-radius: var(--ks-radius);
  padding: 12px 14px;
  font-size: 13px;
  max-width: 92%;
}
.kstudio-msg.ai {
  align-self: flex-start;
  background: var(--ks-panel-2);
  border: 1px solid var(--ks-line);
  color: var(--ks-fg);
}
.kstudio-msg.ai b { color: var(--ks-accent); font-weight: 600; }
.kstudio-msg-note { color: var(--ks-fg-faint); font-size: 12px; }
.kstudio-chat-input {
  border-top: 1px solid var(--ks-line);
  padding: 12px;
  display: flex;
  gap: 8px;
}
.kstudio-chat-input input {
  flex: 1;
  background: var(--ks-panel-2);
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ks-fg);
  font-size: 13px;
}
.kstudio-chat-input input::placeholder { color: var(--ks-fg-faint); }
.kstudio-chat-input input:disabled { opacity: .7; cursor: not-allowed; }
.kstudio-chat-send {
  appearance: none;
  border: none;
  background: var(--ks-accent);
  color: #06121f;
  font-weight: 700;
  border-radius: 10px;
  padding: 0 16px;
  cursor: not-allowed;
  opacity: .55;
}

/* ── 中: 素材(左) + ビューア(右) ── */
.kstudio-stage {
  display: grid;
  grid-template-columns: var(--ks-materials-w) minmax(0, 1fr) var(--ks-inspector-w);   /* 素材 | ビューア | インスペクタ(右上) */
  min-height: 0;
  min-width: 0;
  border-bottom: 1px solid var(--ks-line);
}
.kstudio-materials {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;   /* 中身(素材の札)に引きずられて広がらない */
  border-right: 1px solid var(--ks-line);
  background: var(--ks-panel);
}
.kstudio-materials-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;   /* 素材欄に横スクロールを出さない(城野裁定 2026-07-13「横スクロールは使わない」) */
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kstudio-material {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  appearance: none;
  border: 1px solid var(--ks-line);
  background: var(--ks-panel-2);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  color: var(--ks-fg);
}
.kstudio-material:hover { border-color: rgba(var(--ks-accent-rgb), .55); }
.kstudio-material.is-on {
  border-color: var(--ks-accent);
  box-shadow: 0 0 0 1px var(--ks-accent) inset;
}
.kstudio-material-thumb {
  width: 56px; height: 40px;
  border-radius: 6px;
  /* サムネ無しは真っ黒の箱にしない: 淡い板+頭文字(「壊れている」に見えないように)。絵が来たら .has-img で覆う */
  background: linear-gradient(160deg, #232c38, #171d26) center/cover no-repeat;
  border: 1px solid var(--ks-line);
  flex: none;
  display: grid; place-items: center;
  overflow: hidden;
}
.kstudio-material-thumb-ph {
  font-size: 15px; font-weight: 700; color: var(--ks-fg-faint);
}
.kstudio-material-thumb.has-img .kstudio-material-thumb-ph { display: none; }
/* ★title/meta は <span> なので display:block が無いと overflow/ellipsis が効かず、長い素材名が右へはみ出す
   (=素材名の切れ+素材欄の横スクロールの原因・城野実機 2026-08-16)。 */
.kstudio-material-body { display: block; min-width: 0; }
.kstudio-material-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* 素材名は2行まで見せる(同名の区別は下の日時で) */
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.kstudio-material-meta {
  display: block;
  font-size: 11px;
  color: var(--ks-fg-faint);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kstudio-empty {
  color: var(--ks-fg-faint);
  font-size: 12.5px;
  padding: 16px;
  text-align: center;
  line-height: 1.7;
}

/* ── ビューア(プレビュー動画 + 素材情報) ── */
.kstudio-viewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(var(--ks-accent-rgb), .05), transparent 60%),
    var(--ks-bg);
}
.kstudio-viewer-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.kstudio-viewer-stage video {
  height: 100%;          /* 枠いっぱいに(縦を合わせ・横は比率で。はみ出す場合は max-width が効く) */
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--ks-radius);
  background: #000;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.kstudio-viewer-placeholder {
  color: var(--ks-fg-faint);
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}
.kstudio-viewer-placeholder .big { font-size: 15px; color: var(--ks-fg-dim); }
.kstudio-viewer-info {
  border-top: 1px solid var(--ks-line);
  padding: 10px 16px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ks-fg-dim);
  background: var(--ks-panel);
}
.kstudio-viewer-info b { color: var(--ks-fg); font-weight: 600; }

/* ── 右上: インスペクタ(城野裁定 2026-08-17)。M1は選択中の情報のみ ── */
.kstudio-inspector {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-left: 1px solid var(--ks-line); background: var(--ks-panel);
}
.kstudio-inspector-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; font-size: 12.5px; }
/* タイトル行のタブ i 情報 / T テキスト(2026-08-23 城野: 右端の縦列はスペースがもったいない → ヘッダーへ。Premiere のパネルタブと同じ) */
.kstudio-insp-head { display: flex; align-items: center; gap: 8px; }
.kstudio-insp-tabs { display: inline-flex; gap: 4px; }
.kstudio-insp-tabs button { appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim); border-radius: 6px; padding: 2px 9px 2px 7px; font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; line-height: 1.4; }
.kstudio-insp-tabs button b { font-weight: 700; font-size: 12px; font-style: normal; }
.kstudio-insp-tabs button.is-on { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; }
.kstudio-dim { color: var(--ks-fg-faint); }
.kstudio-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; }
.kstudio-kv dt { color: var(--ks-fg-faint); }
.kstudio-kv dd { margin: 0; color: var(--ks-fg); font-variant-numeric: tabular-nums; }
.kstudio-insp-h { font-size: 11px; font-weight: 600; color: var(--ks-fg-dim); margin: 10px 0 6px; }
.kstudio-insp-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kstudio-insp-lines li { cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1.5; }
.kstudio-insp-lines li:hover { background: var(--ks-panel-2); }
.kstudio-insp-lines li .t { color: var(--ks-accent); font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.kstudio-insp-lines li.more { color: var(--ks-fg-faint); cursor: default; }
.kstudio-insp-text { line-height: 1.7; }
.kstudio-insp-note { margin-top: 14px; color: var(--ks-fg-faint); font-size: 11.5px; line-height: 1.6; border-top: 1px solid var(--ks-line); padding-top: 10px; }

/* ── 下: タイムライン(クリップ列) ── */
.kstudio-timeline {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;   /* 横に伸びるのは中の .kstudio-timeline-scroll だけ(横スクロールはタイムラインが正しい) */
  background: var(--ks-panel);
}
.kstudio-timeline-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ks-line);
  font-size: 12px;
  color: var(--ks-fg-dim);
}
.kstudio-timeline-h .count { color: var(--ks-fg); font-weight: 600; }
.kstudio-timeline-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 16px;
}
.kstudio-track {
  position: relative;
  height: 100%;
  min-height: 96px;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.kstudio-clip {
  position: relative;
  flex: none;
  min-width: 8px;
  border-radius: 8px;
  border: 1px solid var(--ks-line);
  background: linear-gradient(180deg, var(--ks-panel-2), #141a22);
  padding: 8px 10px 8px 12px;
  overflow: hidden;
  cursor: default;
  transition: border-color .12s ease;
}
/* ★幅で文字を出し分ける(城野「ごちゃついていて無理」2026-08-16): 縦に折らない。
   .is-xs(<40px)=色だけ / .is-s(40-120px)=時刻だけ / .is-m(>120px)=時刻+台詞1行 */
.kstudio-clip.is-xs { padding: 0; }
.kstudio-clip.is-xs .kstudio-clip-time,
.kstudio-clip.is-xs .kstudio-clip-text,
.kstudio-clip.is-s  .kstudio-clip-text { display: none; }
.kstudio-clip.is-s { padding: 8px 4px 8px 8px; }
.kstudio-clip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ks-accent);
  opacity: .8;
}
.kstudio-clip:hover { border-color: rgba(var(--ks-accent-rgb), .55); }
.kstudio-clip-time {
  font-size: 10px;
  color: var(--ks-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.kstudio-clip-text {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ks-fg);
  white-space: nowrap;             /* ★縦に折らない・1行・はみ出しは… */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
}
/* ── M1: ヘッダの右側(タイムコード・ズーム) ── */
.kstudio-timeline-h-spacer { flex: 1; }
.kstudio-tl-tc { color: var(--ks-fg); font-variant-numeric: tabular-nums; font-size: 12px; }
.kstudio-zoom { display: inline-flex; gap: 2px; }
.kstudio-zoom button {
  appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim);
  border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; line-height: 1.4;
}
.kstudio-zoom button:hover { color: var(--ks-fg); border-color: var(--ks-accent); }

/* ── M1-③: 全体マップ帯(素材の全尺を1画面に。塊=小さな棒 / 見ている範囲=枠 / 再生位置=針) ── */
.kstudio-overview {
  position: relative;
  height: 22px;
  margin: 8px 16px 0;
  border-radius: 6px;
  background: #0b0e13;
  border: 1px solid var(--ks-line);
  overflow: hidden;
  cursor: pointer;
}
.kstudio-overview[hidden] { display: none; }
.kstudio-ov-block { position: absolute; top: 5px; bottom: 5px; background: rgba(var(--ks-accent-rgb), .55); border-radius: 2px; }
.kstudio-ov-view { position: absolute; top: 0; bottom: 0; border: 1px solid var(--ks-fg-dim); border-radius: 4px; background: rgba(255,255,255,.06); pointer-events: none; }
.kstudio-ov-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff5a5a; pointer-events: none; }

/* ── M1-②: 話の塊(折り畳み)。見た目は clip と同じ規則(幅で文字を出し分け)。開いた塊は中の行を並べる ── */
.kstudio-group {
  position: relative; flex: none; min-width: 8px;
  border-radius: 8px; border: 1px solid var(--ks-line);
  background: linear-gradient(180deg, #1f2937, #171e28);
  padding: 8px 10px 8px 12px; overflow: hidden; cursor: pointer;
  transition: border-color .12s ease;
}
.kstudio-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ks-accent); }
.kstudio-group:hover { border-color: rgba(var(--ks-accent-rgb), .55); }
.kstudio-group .kstudio-clip-time .n { color: var(--ks-fg-faint); margin-left: 4px; }
.kstudio-group.is-xs { padding: 0; }
.kstudio-group.is-xs .kstudio-clip-time, .kstudio-group.is-xs .kstudio-clip-text, .kstudio-group.is-s .kstudio-clip-text { display: none; }
.kstudio-group.is-s { padding: 8px 4px 8px 8px; }
.kstudio-group-open {
  flex: none; display: flex; align-items: stretch; gap: 4px;
  padding: 4px; border-radius: 10px; border: 1px dashed rgba(var(--ks-accent-rgb), .45); background: rgba(var(--ks-accent-rgb), .05);
}
.kstudio-group-close {
  appearance: none; border: none; background: transparent; color: var(--ks-accent); font-size: 11px; cursor: pointer;
  writing-mode: vertical-rl; padding: 4px 2px; white-space: nowrap; overflow: hidden; max-height: 100%;
}
.kstudio-clip { cursor: pointer; }
.kstudio-clip.is-sel, .kstudio-group.is-sel { border-color: var(--ks-accent); box-shadow: 0 0 0 1px var(--ks-accent) inset; }
.kstudio-clip.is-now, .kstudio-group.is-now { background: linear-gradient(180deg, #24364d, #1a2838); }
/* 種類色: 行(data-kind)ごとに、左の縦線・時刻の色・全体マップの棒が変わる */
.kstudio-track[data-kind="video"]   { --ks-kind: var(--ks-kind-video);   --ks-kind-rgb: var(--ks-kind-video-rgb); }
.kstudio-track[data-kind="audio"]   { --ks-kind: var(--ks-kind-audio);   --ks-kind-rgb: var(--ks-kind-audio-rgb); }
.kstudio-track[data-kind="caption"] { --ks-kind: var(--ks-kind-caption); --ks-kind-rgb: var(--ks-kind-caption-rgb); }
.kstudio-track[data-kind] .kstudio-clip::before, .kstudio-track[data-kind] .kstudio-group::before { background: var(--ks-kind); }
.kstudio-track[data-kind] .kstudio-clip-time { color: var(--ks-kind); }
.kstudio-track[data-kind] .kstudio-clip:hover, .kstudio-track[data-kind] .kstudio-group:hover { border-color: rgba(var(--ks-kind-rgb), .55); }
.kstudio-track[data-kind] .kstudio-clip.is-sel, .kstudio-track[data-kind] .kstudio-group.is-sel { border-color: var(--ks-kind); box-shadow: 0 0 0 1px var(--ks-kind) inset; }
.kstudio-track[data-kind="audio"] .kstudio-clip, .kstudio-track[data-kind="audio"] .kstudio-group { background: linear-gradient(180deg, #16302a, #122420); }
.kstudio-track[data-kind="caption"] .kstudio-clip, .kstudio-track[data-kind="caption"] .kstudio-group { background: linear-gradient(180deg, #33291a, #251d12); }

/* ── NLEタイムライン(参謀指示 2026-08-17: ルーラー/再生ヘッド/ヘッダー列/T1/V1/A1) ── */
.kstudio-tl-inner { position: relative; min-height: 100%; }
.kstudio-tl-row { position: relative; display: flex; border-bottom: 1px solid var(--ks-line); }
.kstudio-tl-head {
  position: sticky; left: 0; z-index: 6;
  flex: 0 0 200px; width: 200px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--ks-panel-2); border-right: 1px solid var(--ks-line);
}
.kstudio-tl-head.is-corner { justify-content: flex-start; background: var(--ks-panel); }
.kstudio-tl-bigtc { font-size: 17px; font-weight: 700; color: var(--ks-fg); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kstudio-tl-badge {
  display: inline-block; min-width: 26px; text-align: center; padding: 2px 6px; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #0b0e13; background: var(--ks-kind, var(--ks-accent));
}
.kstudio-tl-row[data-kind="video"]   { --ks-kind: var(--ks-kind-video);   --ks-kind-rgb: var(--ks-kind-video-rgb); }
.kstudio-tl-row[data-kind="audio"]   { --ks-kind: var(--ks-kind-audio);   --ks-kind-rgb: var(--ks-kind-audio-rgb); }
.kstudio-tl-row[data-kind="caption"] { --ks-kind: var(--ks-kind-caption); --ks-kind-rgb: var(--ks-kind-caption-rgb); }
.kstudio-tl-sub { font-size: 11px; color: var(--ks-fg-dim); flex: 1; }
.kstudio-tl-headbtns { display: inline-flex; gap: 4px; }
.kstudio-tl-headbtns button {
  appearance: none; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-fg-faint);
  border-radius: 5px; padding: 1px 6px; font-size: 10.5px; cursor: pointer; line-height: 1.5;
}
.kstudio-tl-headbtns button.is-on { color: var(--ks-fg); border-color: var(--ks-fg-dim); }
.kstudio-tl-headbtns button.is-act { color: var(--ks-kind, var(--ks-accent)); border-color: var(--ks-kind, var(--ks-accent)); }
.kstudio-tl-lane { position: relative; flex: none; overflow: hidden; }
.kstudio-tl-lane.is-off { opacity: .18; }
/* ルーラー */
.kstudio-tl-row.is-ruler { background: #10151c; }
.kstudio-tl-lane.is-ruler { cursor: ew-resize; }
.kstudio-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #2a3441; pointer-events: none; }
.kstudio-tick span { position: absolute; top: 2px; left: 4px; font-size: 10px; color: var(--ks-fg-faint); font-variant-numeric: tabular-nums; }
/* 章マーカー(話の塊の見出し) */
.kstudio-marker { position: absolute; bottom: 0; height: 16px; display: flex; align-items: center; gap: 3px; cursor: pointer; z-index: 2; }
.kstudio-marker i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--ks-accent); transform: translateX(-4px); }
.kstudio-tl-lane.is-dense .kstudio-marker span { display: none; }   /* 章が過密なズームでは旗だけ(文字はホバーのtitle) */
.kstudio-marker span { font-size: 10px; color: var(--ks-fg-dim); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kstudio-marker:hover span { color: var(--ks-fg); }
/* 再生ヘッド: 定規から最下段まで貫く1本+定規上の三角 */
.kstudio-playhead { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #ff5a5a; z-index: 5; pointer-events: none; }
.kstudio-playhead i { position: absolute; top: 0; left: -6px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #ff5a5a; }
/* V1のクリップ(絶対配置に切替) */
.kstudio-tl-lane .kstudio-clip { position: absolute; top: 4px; bottom: 4px; padding: 5px 8px 24px; }
/* T1: 字幕の行ブロック */
.kstudio-capblock {
  position: absolute; top: 5px; bottom: 5px; border-radius: 4px; cursor: pointer;
  background: rgba(var(--ks-kind-caption-rgb), .2); border: 1px solid rgba(var(--ks-kind-caption-rgb), .45);
  color: var(--ks-fg-dim); font-size: 10.5px; line-height: 1.9; padding: 0 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kstudio-capblock:hover { border-color: var(--ks-kind-caption); color: var(--ks-fg); }
.kstudio-capblock.is-sel { border-color: var(--ks-kind-caption); box-shadow: 0 0 0 1px var(--ks-kind-caption) inset; }
/* A1: 素材音声のブロック(波形) */
.kstudio-aublock { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; overflow: hidden; background: rgba(var(--ks-kind-audio-rgb), .08); border: 1px solid rgba(var(--ks-kind-audio-rgb), .3); cursor: pointer; }
.kstudio-aublock .kstudio-wave.is-a1 { position: absolute; inset: 0; width: 100%; height: 100%; }
.kstudio-aunote { position: sticky; left: 210px; display: inline-block; margin: 12px 0 0 8px; font-size: 11px; color: var(--ks-fg-faint); }
.kstudio-play {
  appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg);
  border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer; line-height: 1.5;
}
.kstudio-play:hover { border-color: var(--ks-accent); }

/* 波形(城野裁定 2026-08-17): クリップ/塊の下段に、素材時刻の範囲の音を種類色で描く */
.kstudio-wave { position: absolute; left: 3px; right: 0; bottom: 0; height: 22px; width: calc(100% - 3px); display: block; pointer-events: none; }
.kstudio-clip.is-xs .kstudio-wave, .kstudio-group.is-xs .kstudio-wave { left: 0; width: 100%; height: 100%; }
.kstudio-clip, .kstudio-group, .kstudio-clip.is-s, .kstudio-group.is-s { padding-bottom: 28px; }

.kstudio-timeline-empty {
  color: var(--ks-fg-faint);
  font-size: 12.5px;
  padding: 8px 2px;
}

/* スクロールバー(ダーク) */
.kstudio ::-webkit-scrollbar { width: 10px; height: 10px; }
.kstudio ::-webkit-scrollbar-thumb {
  background: #2b333d; border-radius: 8px; border: 2px solid var(--ks-panel);
}
.kstudio ::-webkit-scrollbar-thumb:hover { background: #3a444f; }

/* 狭い画面(スマホ): 縦積み。M0は骨格確認が目的=最低限崩れない形にする */
@media (max-width: 1400px) {
  .kstudio-stage { grid-template-columns: var(--ks-materials-w) minmax(0, 1fr); }
  .kstudio-inspector { display: none; }   /* 狭い画面ではインスペクタを畳む(M2で開閉ボタン) */
}
@media (max-width: 860px) {
  .kstudio-body { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .kstudio-left { border-right: none; border-bottom: 1px solid var(--ks-line); }
  .kstudio-stage { grid-template-columns: 1fr; grid-template-rows: 116px 1fr; }
  .kstudio-materials { border-right: none; border-bottom: 1px solid var(--ks-line); }
  .kstudio-materials-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }   /* スマホは横に札を並べる(欄の中だけで横に流す・画面幅は広げない) */
  .kstudio-material { grid-template-columns: 48px 120px; flex: none; }
}

/* ── カード欄(M2・editor_cards.js のマウント先。中身の見た目は editor_cards.css が持つ) ── */
.kstudio-cards { margin-top: 4px; }

/* タイムベース(シーケンス設定)の選択・ツール行 */
.kstudio-tb { appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim); border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.kstudio-tb:hover { color: var(--ks-fg); border-color: var(--ks-accent); }

.kstudio-tbsrc { font-size: 11px; color: var(--ks-fg-faint); }

/* ── 段階0/1: 道具(選択/レーザー/スナップ)・履歴・配色・トースト(2026-08-22) ── */
.kstudio-tools, .kstudio-hist { display: inline-flex; gap: 2px; margin-right: 6px; }
.kstudio-tools button, .kstudio-hist button {
  appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim);
  border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; line-height: 1.5;
}
.kstudio-tools button kbd { font: inherit; font-size: 10px; color: var(--ks-fg-faint); margin-left: 4px; }
.kstudio-tools button.is-on { color: var(--ks-fg); border-color: var(--ks-accent); background: rgba(var(--ks-accent-rgb), .14); }
.kstudio-tools button:hover, .kstudio-hist button:hover:not(:disabled) { color: var(--ks-fg); border-color: var(--ks-accent); }
.kstudio-hist button:disabled { opacity: .35; cursor: default; }
.kstudio-timeline-scroll.is-razor .kstudio-tl-lane .kstudio-clip { cursor: col-resize; }
.kstudio-toast { font-size: 12px; color: var(--ks-fg); background: rgba(var(--ks-accent-rgb), .18); border: 1px solid rgba(var(--ks-accent-rgb), .5); border-radius: 6px; padding: 2px 10px; margin-left: 8px; }
.kstudio-toast[hidden] { display: none; }
.kstudio-palette { font-size: 11px; color: var(--ks-fg-faint); margin-right: 8px; }
.kstudio-palette select { appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim); border-radius: 6px; padding: 2px 6px; font-size: 11px; margin-left: 4px; cursor: pointer; }

/* ★映像クリップの配色 案A/B/C(城野「色が背景と被って見え辛い」2026-08-21 → 実物を見て決める)。
   共通: 塗りを濃く(背景の紺と分離)・枠を種類色・選択は白縁。A=青(現行の明度上げ) B=水色(シアン) C=藤色(Premiere系の紫寄り) */
.kstudio[data-palette="A"] { --ks-kind-video: #5fb0ff; --ks-kind-video-rgb: 95, 176, 255; }
.kstudio[data-palette="B"] { --ks-kind-video: #38d6f0; --ks-kind-video-rgb: 56, 214, 240; }
.kstudio[data-palette="C"] { --ks-kind-video: #b39cff; --ks-kind-video-rgb: 179, 156, 255; }
.kstudio-tl-row[data-kind="video"] .kstudio-clip {
  background: linear-gradient(180deg, rgba(var(--ks-kind-rgb), .34), rgba(var(--ks-kind-rgb), .20));
  border-color: rgba(var(--ks-kind-rgb), .75);
}
.kstudio-tl-row[data-kind="video"] .kstudio-clip .kstudio-clip-time { color: #eaf2ff; }
.kstudio-tl-row[data-kind="video"] .kstudio-clip .kstudio-clip-text { color: #dfe8f3; }
.kstudio-tl-row[data-kind="video"] .kstudio-clip.is-now { background: linear-gradient(180deg, rgba(var(--ks-kind-rgb), .5), rgba(var(--ks-kind-rgb), .3)); }
.kstudio-tl-row[data-kind="video"] .kstudio-clip.is-sel { border-color: #fff; box-shadow: 0 0 0 1px #fff inset; }
.kstudio-tl-row[data-kind="video"] .kstudio-tl-lane { background: #0f141b; }

/* 段階2: トリム道具のカーソル */
.kstudio-timeline-scroll.is-trim .kstudio-tl-row[data-kind="video"] .kstudio-clip { cursor: ew-resize; }

/* ツール行は1段で(段階2で道具が増えた): ボタン・TC・件数は折り返さない */
.kstudio-timeline-h { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.kstudio-timeline-h::-webkit-scrollbar { display: none; }
.kstudio-timeline-h > * { flex: none; }
.kstudio-tools button, .kstudio-hist button, .kstudio-zoom button, .kstudio-play { white-space: nowrap; }
.kstudio-tools button kbd { display: inline; }
.kstudio-tl-tc, .kstudio-timeline-h .count, .kstudio-tbsrc, .kstudio-toast { white-space: nowrap; }
.kstudio-timeline-h-spacer { flex: 1 1 auto; min-width: 8px; }
/* 1700px 未満ではキー表示(V/C/B…)を畳んでツール行を収める */
@media (max-width: 1700px) { .kstudio-tools button kbd { display: none; } }
.kstudio-tools button { padding: 2px 7px; }
/* タイムベースの案内文が長いとき(fps未読)にツール行がはみ出さないよう、案内文だけ省略記号で畳む(全文は title で) */
.kstudio-tbsrc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* ── インスペクタ「テロップ」節(行ごとスタイル・2026-08-22) ── */
.kstudio-capstyle { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.kstudio-capstyle label { display: flex; align-items: center; gap: 8px; color: var(--ks-fg-dim); }
.kstudio-capstyle label input[type="range"] { flex: 1; min-width: 0; }
.kstudio-capstyle label output { min-width: 2.5em; text-align: right; color: var(--ks-fg); font-variant-numeric: tabular-nums; }
.kstudio-capstyle select { flex: 1; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.kstudio-capstyle input[type="color"] { width: 36px; height: 22px; border: 1px solid var(--ks-line); background: transparent; border-radius: 4px; padding: 0; }
/* T パネルの行: 見出し(固定幅)+つまみ(伸びる)+数値(直接入力)。帯のとき縁の行は灰色(is-off) */
.kstudio-capstyle .kstudio-row { display: flex; align-items: center; gap: 8px; }
.kstudio-capstyle .kstudio-row > .k { flex: none; width: 58px; color: var(--ks-fg-dim); }
.kstudio-capstyle .kstudio-row.is-off { opacity: .4; }
.kstudio-capstyle input[type="number"] { width: 56px; flex: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg); border-radius: 4px; padding: 2px 4px; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.kstudio-capstyle .chk { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; color: var(--ks-fg-dim); white-space: nowrap; }
.kstudio-capstyle .kstudio-row-chk { padding-left: 66px; flex-wrap: wrap; row-gap: 4px; }
.kstudio-capstyle .sub, .kstudio-insp-h .sub { font-size: 10.5px; font-weight: 400; color: var(--ks-fg-faint); }
.kstudio-align { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.kstudio-align button { appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim); border-radius: 5px; padding: 4px 0; font-size: 11px; cursor: pointer; }
.kstudio-align button.is-on { color: var(--ks-fg); border-color: var(--ks-kind-caption); background: rgba(var(--ks-kind-caption-rgb), .18); }
.kstudio-capstyle-btns { display: flex; gap: 6px; margin-top: 6px; }
.kstudio-capstyle-btns button { appearance: none; border: 1px solid var(--ks-line); background: var(--ks-panel-2); color: var(--ks-fg-dim); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
.kstudio-capstyle-btns button:disabled { opacity: .4; cursor: default; }
.kstudio-insp-flag { font-weight: 400; color: var(--ks-kind-caption); margin-left: 6px; }

/* ── テロップ(A): STUDIO内の書き出し(上帯) ── */
.kstudio-export-wrap { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.kstudio-export { appearance: none; border: 1px solid var(--ks-kind-caption); background: rgba(var(--ks-kind-caption-rgb), .16); color: var(--ks-fg); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.kstudio-export:disabled { opacity: .45; cursor: not-allowed; }
.kstudio-export-status { font-size: 11.5px; color: var(--ks-fg-dim); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kstudio-export-status[hidden] { display: none; }
.kstudio-export-dl { font-size: 12.5px; font-weight: 700; color: var(--ks-kind-caption); text-decoration: none; border: 1px solid var(--ks-kind-caption); border-radius: 8px; padding: 6px 12px; }
.kstudio-export-dl[hidden] { display: none; }

/* ── テロップのプレビュー(libass-wasm): 重ね描きの canvas を動画の箱に固定する(ライブラリは video の隣に div を差し込む) ── */
.kstudio-viewer-stage { position: relative; }
.kstudio-viewer-stage .libassjs-canvas-parent { position: absolute !important; inset: 0; pointer-events: none; }
.kstudio-viewer-stage .libassjs-canvas { pointer-events: none; }

/* ── 構成トラック(§737・C-1・城野裁定 2026-08-26「Premiere/FCPX のタイムライン方式」) ──
   話のかたまり=Premiere のネスト / FCPX の複合クリップ。V1 の上に1本。★C-1 は表示するだけ(掴めない)。
   ★V1 のクリップは属する話の色に揃える([data-ks-zc] を帯とクリップの両方に付ける)=「どの話がどこか」を探さなくてよくする。
   ★使わない(off)は消さずに灰色+点線で残す(Premiere の「クリップを無効にする」と同じ・戻せる)。 */
.kstudio-tl-badge.is-zone { background: var(--ks-zone-badge); color: #0b0e12; }
.kstudio-zone {
  position: absolute; top: 5px; bottom: 5px; border-radius: 5px; padding: 0 8px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  overflow: hidden; cursor: pointer; font-weight: 700; border: 1px solid transparent;
}
.kstudio-zone-nm { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kstudio-zone-tc { font-size: 9.5px; font-weight: 400; opacity: .72; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ★選択の印は帯だけの名前にする(既存の paintSelection が .is-sel を全部消すため・2026-08-26 実測) */
.kstudio-zone.is-zonesel { outline: 2px solid var(--ks-fg); outline-offset: -2px; }
.kstudio-zone.is-off { background: var(--ks-panel-2) !important; border: 1px dashed var(--ks-line) !important; color: var(--ks-fg-faint) !important; }
.kstudio-zone.is-short { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); }
/* 6色で回す(帯と V1 クリップで同じ色) */
.kstudio-zone[data-ks-zc="0"] { background: #3B7FC4; border-color: #5A9AD8; color: #EAF2FB; }
.kstudio-zone[data-ks-zc="1"] { background: #3E8496; border-color: #58A5B8; color: #E4F4F8; }
.kstudio-zone[data-ks-zc="2"] { background: #C4923C; border-color: #D8A855; color: #2A1F08; }
.kstudio-zone[data-ks-zc="3"] { background: #7B65A8; border-color: #9A85C6; color: #F0EAFA; }
.kstudio-zone[data-ks-zc="4"] { background: #4E8F6B; border-color: #6BB08A; color: #E8F6EE; }
.kstudio-zone[data-ks-zc="5"] { background: #B0605F; border-color: #CE8281; color: #FBECEC; }
.kstudio-clip.has-zone[data-ks-zc="0"] { background: linear-gradient(180deg, #3E6FA5, #2F5885); border-color: #4E82BC; }
.kstudio-clip.has-zone[data-ks-zc="1"] { background: linear-gradient(180deg, #3A6E7E, #2B5460); border-color: #4B8B9E; }
.kstudio-clip.has-zone[data-ks-zc="2"] { background: linear-gradient(180deg, #7A6438, #5C4B29); border-color: #9C8148; }
.kstudio-clip.has-zone[data-ks-zc="3"] { background: linear-gradient(180deg, #5A4A78, #443859); border-color: #75619B; }
.kstudio-clip.has-zone[data-ks-zc="4"] { background: linear-gradient(180deg, #3D6E56, #2E5240); border-color: #55906F; }
.kstudio-clip.has-zone[data-ks-zc="5"] { background: linear-gradient(180deg, #8A4C4B, #6A3A39); border-color: #A96866; }
.kstudio-clip.is-zoneoff { opacity: .35; }   /* 使わない話の映像=薄く残す(消さない) */

/* ── C-2(§739): 帯を掴んで動かす。落ちる先はゴーストで見せる(Premiere のネスト移動+リップルと同じ手つき) ── */
.kstudio-zone { user-select: none; touch-action: none; }
.kstudio-zone.is-dragging { opacity: .55; cursor: grabbing; }
.kstudio-zone-ghost {
  position: absolute; top: 2px; bottom: 2px; width: 3px; z-index: 4;
  background: var(--ks-accent); border-radius: 2px; box-shadow: 0 0 0 3px rgba(var(--ks-accent-rgb), .25);
}