/* =========================================================
   유튜브 자막 추출기 — 전용 스타일 (공유 style.css 뒤에 로드)
   ========================================================= */

.yt-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.yt-lang{font:inherit;font-size:13px;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--paper);color:var(--ink)}
.yt-search{flex:1;min-width:140px;font-size:13px;padding:9px 12px}
.yt-copy{width:auto;margin-top:0;padding:9px 14px;font-size:13px}

.yt-layout{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px}
@media(min-width:800px){.yt-layout{grid-template-columns:1fr 1fr;align-items:start}}

.yt-player-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-sm);overflow:hidden;background:#000;box-shadow:var(--shadow-sm)}
.yt-player-wrap #yt-player{position:absolute;inset:0;width:100%;height:100%}

.yt-transcript{max-height:480px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.yt-cue{display:flex;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5}
.yt-cue:last-child{border-bottom:none}
.yt-cue:hover{background:var(--surface-2)}
.yt-cue.active{background:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.yt-cue .yt-t{flex:none;color:var(--accent-ink);font-weight:700;font-variant-numeric:tabular-nums;font-size:12px;padding-top:1px}
.yt-cue .yt-txt{color:var(--ink)}
.yt-cue mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.yt-cue.hide{display:none}

.yt-empty{padding:20px;text-align:center;color:var(--faint);font-size:13px}