/* 動画編集ソフト風のダークUI。映像=青紫／字幕=琥珀／BGM=緑のトラック色、再生ヘッド=赤 */
:root{
  color-scheme:dark;
  --bg:#0f1013; --pane:#18191d; --pane-2:#1f2026; --field:#121317; --line:#2b2d34; --line-2:#383a43;
  --text:#e7e7ea; --sub:#a0a2ab; --accent:#5b8cff; --accent-2:#3f6fe0;
  --video:#4b4fa8; --video-hi:#7479e0; --sub-track:#8a5a1f; --audio:#256b4d;
  --head:#ff4d4d; --warn:#ffb454; --radius:6px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif; font-size:16px; line-height:1.6;
}
[hidden]{display:none !important} /* display指定のある要素でも hidden 属性を効かせる */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
button,input,select,textarea{font:inherit; font-size:16px; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* ── トップバー ─────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px clamp(12px,2vw,20px); background:var(--pane); border-bottom:1px solid var(--line);
}
.brand{min-width:0}
.topbar h1{margin:0; font-size:clamp(18px,1.8vw,21px); letter-spacing:-0.02em}
.topbar p{margin:0; color:var(--sub); font-size:16px}
.topbar-links{display:flex; gap:8px; flex:none; flex-wrap:wrap; justify-content:flex-end}
.topbar-link{
  flex:none; color:var(--text); text-decoration:none; border:1px solid var(--line-2);
  padding:6px 14px; border-radius:999px;
}
.topbar-link:hover{border-color:var(--accent); color:var(--accent)}

/* ── ワークスペース（左=設定／中央=モニター／右=インスペクター／下=タイムライン・出力） ── */
.workspace{
  display:grid; gap:6px; padding:6px;
  grid-template-columns:minmax(280px,320px) minmax(0,1fr) minmax(300px,360px);
  grid-template-rows:clamp(440px,calc(100vh - 380px),720px) auto auto;
  grid-template-areas:"left mon ins" "tl tl tl" "out out out";
}
.pane{background:var(--pane); border:1px solid var(--line); border-radius:var(--radius); min-width:0; display:flex; flex-direction:column}
.pane-left{grid-area:left; min-height:0}
.pane-monitor{grid-area:mon; min-height:0}
.pane-inspector{grid-area:ins; min-height:0}
.pane-timeline{grid-area:tl}
.pane-output{grid-area:out}
.pane-body{padding:14px; overflow:auto; flex:1; min-height:0}
.pane-title{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 14px; border-bottom:1px solid var(--line); color:var(--sub); background:var(--pane-2);
  border-radius:var(--radius) var(--radius) 0 0;
}
.pane-title span:first-child{color:var(--text); font-weight:700}

@media (max-width:1180px){
  .workspace{
    grid-template-columns:minmax(0,1fr) minmax(300px,360px);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"mon ins" "tl tl" "out out" "left left";
  }
  .pane-monitor{height:clamp(360px,60vh,560px)}
  .pane-inspector{max-height:clamp(360px,60vh,560px)}
}
/* 2段組みでは設定ペインが全幅になるので、右下固定広告（PCのみ）の列を空けておく */
@media (min-width:769px) and (max-width:1180px){
  .pane-left .pane-body{padding-right:340px}
}
@media (max-width:768px){
  .workspace{grid-template-columns:minmax(0,1fr); grid-template-areas:"mon" "tl" "ins" "out" "left"}
  .pane-monitor{height:auto}
  .pane-inspector{max-height:none}
  .topbar{align-items:flex-start}
}

/* ── タブ ───────────────────────────────── */
.pane-tabs{
  display:flex; align-items:center; gap:2px; padding:0 6px; border-bottom:1px solid var(--line);
  background:var(--pane-2); border-radius:var(--radius) var(--radius) 0 0; flex-wrap:wrap;
}
.pane-tabs [role="tab"]{
  padding:8px 12px; border:none; background:none; color:var(--sub); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.pane-tabs [role="tab"]:hover{color:var(--text)}
.pane-tabs [role="tab"][aria-selected="true"]{color:var(--text); border-bottom-color:var(--accent); font-weight:700}

/* ── フォーム ───────────────────────────── */
.field{margin-bottom:14px}
.field > label,.label{display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; color:var(--sub)}
.field > label.check{justify-content:flex-start; align-items:center; gap:10px; cursor:pointer; color:var(--text)}
.check input{width:18px; height:18px; accent-color:var(--accent); margin:0; flex:none}
.val{color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap}
input[type="text"],input[type="number"],textarea,select{
  width:100%; padding:7px 10px; border:1px solid var(--line-2); border-radius:4px; background:var(--field);
}
textarea{resize:vertical; line-height:1.55}
input[type="range"]{width:100%; accent-color:var(--accent)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 10px}
.note{color:var(--sub); margin:6px 0 0}
.pane h3{margin:18px 0 10px; font-size:16px; color:var(--sub); border-top:1px solid var(--line); padding-top:14px}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  padding:3px 11px; border:1px solid var(--line-2); border-radius:4px; background:var(--pane-2);
  cursor:pointer; color:var(--sub);
}
.chip:hover{color:var(--text); border-color:#50535e}
.chip[aria-pressed="true"]{background:var(--accent-2); border-color:var(--accent); color:#fff}

.btn,.file-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 14px; border-radius:4px; cursor:pointer; border:1px solid var(--line-2);
  background:var(--pane-2); color:var(--text); text-decoration:none;
}
.btn:hover:not(:disabled),.file-btn:hover{border-color:#5a5d69; background:#262730}
.btn:disabled{opacity:.4; cursor:default}
.btn.primary{background:var(--accent-2); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent)}
.btn.danger{color:#ff8a80}
.btn.small{padding:2px 12px}
.link{border:none; background:none; color:var(--sub); text-decoration:underline; cursor:pointer; padding:2px 0; align-self:flex-start}
.stack{display:flex; flex-direction:column; gap:8px}
.file{display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer}
.file-name{color:var(--sub); overflow-wrap:anywhere}

/* ── モニター ───────────────────────────── */
.aspect-tag{font-variant-numeric:tabular-nums}
.stage{flex:1; min-height:0; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:10px}
@media (max-width:768px){ .stage{height:clamp(260px,62vh,520px); flex:none} }
.frame{
  position:relative; height:100%; max-width:100%; aspect-ratio:16/9; background:#0a0a0c;
  outline:1px solid #2a2a30; overflow:hidden; container-type:inline-size;
}
.stage[data-aspect="9:16"] .frame{aspect-ratio:9/16}
.stage[data-aspect="1:1"] .frame{aspect-ratio:1}
.stage[data-aspect="4:5"] .frame{aspect-ratio:4/5}
.frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#6f7280; text-align:center; padding:12px}
.caption-box{position:absolute; left:6%; right:6%; bottom:8%; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.speaker{font-size:16px; color:#ffd966; text-shadow:0 1px 3px #000}
.caption{
  font-size:clamp(16px,6cqi,28px); font-weight:700; color:#fff; line-height:1.4; white-space:pre-wrap;
  text-shadow:0 0 4px #000,0 2px 6px #000;
}
.transport{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 12px;
  border-top:1px solid var(--line); background:var(--pane-2); border-radius:0 0 var(--radius) var(--radius);
}
.tbtn{
  width:40px; height:36px; border-radius:4px; border:1px solid var(--line-2); background:var(--field);
  cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:center;
}
.tbtn.play{width:52px; background:var(--accent-2); border-color:var(--accent); color:#fff}
.tbtn:hover{filter:brightness(1.15)}
.timecode{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-variant-numeric:tabular-nums; color:var(--text); min-width:9em; text-align:center}

/* ── インスペクター ─────────────────────── */
.ins-time{font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
.ins-row{display:flex; gap:12px; margin-bottom:14px; align-items:flex-start}
.thumb{
  width:112px; aspect-ratio:16/10; flex:none; border:1px dashed #4a4d58; border-radius:4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--sub); cursor:pointer; background:var(--field);
}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb:hover{border-color:var(--accent); color:var(--text)}
.ins-side{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0}
.ins-side .label{margin-bottom:0}
.voice-lead{margin:0 0 12px}
.voice-card{border:1px solid var(--line); border-radius:4px; padding:10px 12px 0; margin-bottom:10px; background:var(--pane-2)}
.voice-name{font-weight:700; margin-bottom:8px}
.mini{display:flex; flex-direction:column; gap:4px; color:var(--sub); margin-bottom:10px}
.ins-tools{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding-top:4px}

/* ── タイムライン ───────────────────────── */
.tl-toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--pane-2); border-radius:var(--radius) var(--radius) 0 0}
.total{color:var(--sub); font-variant-numeric:tabular-nums}
.zoom{display:flex; align-items:center; gap:8px; color:var(--sub)}
.zoom input{width:140px}
.warn{margin:0; padding:6px 12px; color:var(--warn); border-bottom:1px solid var(--line)}
.tl-body{display:grid; grid-template-columns:72px minmax(0,1fr)}
.tl-heads{display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--pane-2)}
.tl-head{display:flex; align-items:center; padding:0 10px; color:var(--sub); border-bottom:1px solid var(--line)}
.ruler-head{height:28px}
.tl-heads .tl-head:nth-child(2){height:72px}
.tl-heads .tl-head:nth-child(3),.tl-heads .tl-head:nth-child(4){height:40px}
.tl-scroll{overflow-x:auto; overflow-y:hidden; background:var(--field)}
.tl-inner{position:relative; min-width:100%; user-select:none; touch-action:pan-x}
.ruler{
  position:relative; height:28px; border-bottom:1px solid var(--line); cursor:pointer;
  background-image:linear-gradient(to right,#3a3c45 1px,transparent 1px); background-repeat:repeat-x;
  background-position:0 100%; background-size:40px 8px;
}
.tick{position:absolute; top:0; padding-left:4px; border-left:1px solid #5a5d69; height:100%; color:var(--sub); font-size:16px; line-height:28px; font-variant-numeric:tabular-nums; white-space:nowrap}
.lane{position:relative; border-bottom:1px solid var(--line)}
.lane-video{height:72px}
.lane-sub,.lane-audio{height:40px}
.clip{
  position:absolute; top:4px; bottom:4px; border-radius:4px; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; cursor:pointer; box-shadow:inset -1px 0 0 rgba(0,0,0,.6), inset 1px 0 0 rgba(255,255,255,.08);
}
.clip-video{background:var(--video) center/cover no-repeat; border:1px solid #5d61c0}
.clip-video::before{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,20,40,.85),rgba(20,20,40,.25))}
.clip-video.is-playing{border-color:#9ea2ff}
.clip-video.is-selected{border:2px solid #fff; box-shadow:0 0 0 1px var(--video-hi)}
.clip-label{position:relative; display:flex; gap:6px; align-items:baseline; padding:2px 12px 0 6px; min-width:0}
.clip-no{font-weight:700; color:#fff; flex:none}
.clip-text{color:#dcdcf5; overflow:hidden; text-overflow:ellipsis}
.handle{position:absolute; top:0; right:0; bottom:0; width:14px; cursor:ew-resize; background:rgba(255,255,255,.12); touch-action:none} /* タッチでも横スクロールより長さ変更を優先 */
.handle:hover,.clip-video.is-selected .handle{background:rgba(255,255,255,.35)}
.clip-sub{background:var(--sub-track); border:1px solid #b27a32; color:#fff3e0; padding:0 8px; line-height:30px}
.clip-audio{background:var(--audio); border:1px solid #33936a; color:#dff5ea; padding:0 8px; line-height:30px; cursor:default;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 2px,transparent 2px 6px)}
.target-line{position:absolute; top:0; bottom:0; border-left:2px dashed var(--warn); pointer-events:none}
.playhead{position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:var(--head); pointer-events:none; z-index:2}
.playhead::before{content:""; position:absolute; top:0; left:-6px; border:7px solid transparent; border-top:9px solid var(--head)}
.hint{margin:0; padding:6px 12px; color:var(--sub)}

/* ── 出力 ───────────────────────────────── */
/* 右下固定の広告に重ならないよう、言語切替・コピー類は右端ではなく左側に置く */
.out-actions{margin-left:16px; display:flex; align-items:center; gap:10px; padding:4px 0; flex-wrap:wrap}
.out-buttons{display:flex; gap:8px}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:4px; overflow:hidden}
.seg button{padding:3px 12px; border:none; background:var(--field); color:var(--sub); cursor:pointer}
.seg button + button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--accent-2); color:#fff}
.tab-note{color:var(--sub); margin:0; padding:10px 14px 0}
.out{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:8px; padding:10px 14px 14px}
.out-block{border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--field); display:flex; flex-direction:column}
.out-block:only-child{grid-column:1/-1} /* 一括・BGM・SRTは1枚なので全幅 */
.out-head{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:12px; align-items:center; padding:4px 10px; background:var(--pane-2); color:var(--sub)}
.out pre{
  margin:0; padding:10px 12px; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:16px;
  line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; color:#d6d7de;
}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:#2b2d36; color:#fff; border:1px solid var(--line-2); padding:10px 18px; border-radius:6px; transition:.2s; z-index:100;
}
.toast.is-show{opacity:1; transform:translate(-50%,0)}

/* ── 広告（ツール規格: PC/SPとも320×100・PCは右下フローティング） ───────── */
.footer-ad {
  position: fixed; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0;
  width: 320px; overflow: hidden; /* AdSenseレスポンシブの横伸び防止＋×を右端に固定 */
  background: transparent; border: none; box-shadow: none;
}
.footer-ad.is-closed { display: none; }
.ad-widget__head { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; z-index: 1; }
.ad-widget__label { color: #64748b; font-size: 12px; letter-spacing: 0.04em; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; }
.ad-widget__close {
  appearance: none; border: none; background: #f1f5f9; color: #64748b;
  width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.ad-widget__close:hover { background: #e2e8f0; color: #1e293b; }
.footer-ad ins.adsbygoogle { display: block; width: 320px; height: 100px; }

@media screen and (max-width: 768px) {
  .footer-ad {
    position: static; align-self: center; margin: 24px auto 0;
    gap: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; z-index: auto;
  }
  .footer-ad.is-closed { display: flex; } /* PCで閉じてもSPでは表示 */
  .ad-widget__head { display: none; }     /* SPはラベル・×を隠す */
  .footer-ad ins.adsbygoogle { width: 320px; height: 100px; }
}

/* ── フッター（規格: 左寄せ＋wrap） ─────────────────────────────────── */
footer{
  display:flex; justify-content:flex-start; flex-wrap:wrap; gap:12px 24px; align-items:center;
  padding:24px clamp(16px,4vw,32px); color:var(--sub); font-size:16px;
  border-top:1px solid var(--line); background:var(--pane); margin-top:6px;
  padding-right:340px; /* 右下固定広告（320px）にリンクが隠れないよう空ける。SPは下で解除 */
}
footer a{color:var(--text); text-decoration:none; transition:color .2s}
footer a:hover{color:var(--accent)}
.footer-links{display:flex; flex-wrap:wrap; gap:16px}
.footer-links a{border:1px solid var(--line-2); padding:8px 16px; border-radius:6px; font-size:16px}
.footer-links a:hover{border-color:var(--accent)}
@media (max-width:768px){
  footer{flex-direction:column; gap:16px; text-align:center; padding-right:clamp(16px,4vw,32px)}
  .footer-links{justify-content:center}
}