/* 1021 새 영상 편집기 2단계 — [자막](제목 · 자막) · [꾸미기](필터 · 화면 가이드) · [키트] · 떠 있는 창(글꼴 · 색상환 · 제목 추천) — edv2-look.js */
.lk { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lk-subtabs { display: flex; gap: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.lk-subtabs > button { flex: 1 1 0; min-height: 44px; border: 0; background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 600; cursor: pointer; }
.lk-subtabs > button + button { border-left: 1px solid var(--line-2); }
.lk-subtabs > button.on { background: var(--ink); color: var(--surface); }
.lk-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lk-card p { margin: 0; }
.lk-inp { width: 100%; min-height: 44px; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font: 15px var(--font-body, inherit); color: var(--ink); background: var(--surface); box-sizing: border-box; }
textarea.lk-inp { resize: vertical; }
.lk-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lk .btn, .lk-pop .btn { min-height: 44px; font-size: 14px; padding: 0 12px; }
.lk-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--ink); cursor: pointer; }
.lk-check input { width: 22px; height: 22px; flex: 0 0 auto; }
.lk-range input[type="range"] { width: 100%; min-height: 32px; }
.lk-fontb { max-width: 100%; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px !important; }
.lk-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-swb { width: 44px; height: 44px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.lk-swb.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.lk-swb.del { position: relative; opacity: .85; }
.lk-swb.del::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; text-shadow: 0 0 3px #000; }
.lk-wheelb { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important; border-radius: 50%; }
.lk-h4 { margin: 10px 0 4px; font-size: 13px; color: var(--ink-2); font-weight: 700; }
.lk-tag { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 99px; background: var(--ok-light, #e6f4ea); color: var(--ink); font-weight: 600; }
.lk-now { margin: 0; font-size: 14px; }
/* 필터 아코디언 · 한 줄에 5개 */
.lk-accs { display: flex; flex-direction: column; gap: 4px; }
.lk-acch { width: 100%; text-align: left; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.lk-acch[aria-expanded="true"] { border-color: var(--ink-2); }
.lk-fxgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px 0 4px; }
.lk-fx { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 44px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.lk-fx.on { border-color: var(--ink); }
.lk-fx:hover { border-color: var(--line-2); }
.lk-fxt { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden; }
.lk-fxt > i { position: absolute; inset: 0; }
.lk-fxn { font-size: 13px; line-height: 1.25; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.lk-det { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.lk-det > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
/* 키트 */
.lk-kits { display: flex; flex-direction: column; gap: 6px; }
.lk-kit { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; min-height: 56px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; }
.lk-kit.on { border-color: var(--ink); }
.lk-kitc { display: flex; gap: 4px; } .lk-kitc i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
/* 떠 있는 창 — 반투명 · 화면 안 */
.lk-pop { position: fixed; z-index: 1200; width: min(360px, calc(100vw - 16px)); max-height: min(72vh, calc(100vh - 16px)); overflow: auto; box-sizing: border-box; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.92); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 32px rgba(0,0,0,.2); color: var(--ink); font-size: 14px; }
.lk-pop.lk-fontpop { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.lk-poph { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lk-poph b { font-size: 15px; }
.lk-x { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.lk-x:hover { background: var(--bg); }
.lk-flist { overflow: auto; min-height: 0; flex: 1 1 auto; max-height: calc(min(72vh, 100vh - 16px) - 150px); }
.lk-frow { display: flex; align-items: stretch; gap: 4px; border-radius: 8px; }
.lk-frow.on { background: var(--bg); }
.lk-star { flex: 0 0 44px; min-height: 44px; border: 0; background: none; color: var(--ink-2); font-size: 20px; cursor: pointer; border-radius: 8px; }
.lk-star.on { color: #b45309; }
.lk-fpick { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.lk-fpick:hover, .lk-fpick:focus-visible { background: var(--bg); }
.lk-fpick[disabled] { opacity: .55; cursor: not-allowed; }
.lk-fs { font-size: 18px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lk-fn { font-size: 13px; color: var(--ink-2); }
.lk-wheel { position: relative; width: 200px; height: 200px; max-width: 70vw; max-height: 70vw; margin: 6px auto 8px; border-radius: 50%; cursor: crosshair; touch-action: none;
  background: radial-gradient(circle closest-side, #fff, rgba(255,255,255,0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.lk-wdark { position: absolute; inset: 0; border-radius: 50%; background: #000; pointer-events: none; }
.lk-wmark { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #000, 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.lk-pvrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.lk-pv { width: 44px; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); flex: 0 0 auto; }
.lk-hex { width: 120px; font-family: ui-monospace, monospace; }
.lk-recs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lk-recs li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.lk-rk { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.lk-rt { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
/* 미리보기 덧그림 */
.lk-tone { position: absolute; inset: 0; pointer-events: none; }
.ev2-sub.lk-hook .ev2-subt { line-height: 1.448; }
.lk-guide { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-family: "Noto Sans KR", "Roboto", sans-serif; container-type: size; }
/* 1021 대표 18:33 실제 폰 비율 — --u = 미리보기 폭 / 390(폰 폭 pt) · 크기 근거는 edv2-look.js YT_HTML 위 주석([추정]) */
.lk-yt, .lk-safe { --u: calc(100cqw / 390); position: absolute; inset: 0; }
@supports not (width: 1cqw) { .lk-yt, .lk-safe { --u: 0.82px; } }
.lk-safe i { position: absolute; background: rgba(239,68,68,.22); }
.lk-safe i.t { top: 0; left: 0; right: 0; height: calc(var(--u) * 56); } .lk-safe i.b { bottom: 0; left: 0; right: 0; height: calc(var(--u) * 176); }
.lk-safe i.r { top: calc(var(--u) * 56); bottom: calc(var(--u) * 176); right: 0; width: calc(var(--u) * 76); } .lk-safe i.l { top: calc(var(--u) * 56); bottom: calc(var(--u) * 176); left: 0; width: calc(var(--u) * 12); }
.lk-safe span { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 76); top: calc(var(--u) * 56); bottom: calc(var(--u) * 176); border: 2px dashed rgba(255,255,255,.85); display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; color: #fff; font-size: max(10px, calc(var(--u) * 12)); text-shadow: 0 0 3px #000; box-sizing: border-box; text-align: center; }
.lk-yt { color: #fff; text-shadow: 0 0 calc(var(--u) * 3) rgba(0,0,0,.55); font-size: calc(var(--u) * 12); line-height: 1.3; letter-spacing: -0.01em; }
.lk-yt b { font-weight: 700; }
.lk-yt-top { position: absolute; top: calc(var(--u) * 10); left: calc(var(--u) * 12); right: calc(var(--u) * 12); height: calc(var(--u) * 32); display: flex; align-items: center; gap: calc(var(--u) * 18); }
.lk-yt-top .sp { flex: 1; } .lk-yt-ic { font-size: calc(var(--u) * 24); line-height: 1; }
.lk-yt-rail { position: absolute; right: calc(var(--u) * 6); bottom: calc(var(--u) * 66); width: calc(var(--u) * 56); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 14); }
.lk-yt-rail span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 12); font-weight: 500; white-space: nowrap; }
.lk-yt-rail span b { font-size: calc(var(--u) * 30); line-height: 1; font-weight: 400; }
.lk-yt-av { width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: calc(var(--u) * 8); background: rgba(255,255,255,.7); border: calc(var(--u) * 2) solid #fff; box-sizing: border-box; }
.lk-yt-info { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 76); bottom: calc(var(--u) * 64); }
.lk-yt-ch { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 32); margin-bottom: calc(var(--u) * 8); white-space: nowrap; }
.lk-yt-pf { flex: 0 0 auto; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); }
.lk-yt-ch b { font-size: calc(var(--u) * 15); }
.lk-yt-sub { display: inline-flex; align-items: center; height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 14); background: #fff; color: #0f0f0f; text-shadow: none; font-size: calc(var(--u) * 13); font-weight: 700; }
.lk-yt-desc { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--u) * 14); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lk-yt-snd { margin: 0; font-size: calc(var(--u) * 13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-yt-nav { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 52); display: flex; justify-content: space-around; align-items: center; background: rgba(15,15,15,.94); text-shadow: none; }
.lk-yt-nav span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 10); min-width: calc(var(--u) * 48); }
.lk-yt-nav span b { font-size: calc(var(--u) * 22); line-height: 1; font-weight: 400; }
.lk-yt-nav .lk-yt-plus b { display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 28); border: calc(var(--u) * 1.5) solid #fff; border-radius: calc(var(--u) * 10); font-size: calc(var(--u) * 20); }
/* 간편 모드 — 글자 17px */
html[data-mode="simple"] .lk-subtabs > button, html[data-mode="simple"] .lk .btn, html[data-mode="simple"] .lk-check, html[data-mode="simple"] .lk-inp, html[data-mode="simple"] .lk-h4, html[data-mode="simple"] .lk-fn, html[data-mode="simple"] .lk-rt, html[data-mode="simple"] .lk-pop, html[data-mode="simple"] .lk-pop .btn, html[data-mode="simple"] .lk-tag, html[data-mode="simple"] .lk-now { font-size: 17px; }
html[data-mode="simple"] .lk-subtabs > button { min-height: 52px; }
/* 1021 꺼 둔 것 켜기 — 자막 상자 색 · 투명도 · 움직이는 효과 · 쇼츠 템플릿(프레임) */
.lk-boxt { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lk-boxpick { position: relative; overflow: hidden; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important; border-radius: 50%; display: inline-block; }
.lk-boxpick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.lk-num { width: 88px; min-height: 44px; }
.lk-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-mchip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.lk-mchip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lk-mchip[disabled] { opacity: .5; cursor: not-allowed; }
.lk-mrows { display: flex; flex-direction: column; gap: 8px; }
.lk-mrow { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lk-mrow .lk-row b { font-size: 14px; }
.lk-mtime { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.lk-mtime label { display: inline-flex; align-items: center; gap: 4px; }
/* 미리보기 — 움직이는 효과(서버 render.js fxFc 의 근사 · 시각마다 edv2-look.js 가 자리를 계산 · 그레인만 재생 중 흔들림) */
.lk-mfxs-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lk-mfx { position: absolute; inset: 0; }
.lk-mfx[data-off] { display: none; }
.lk-mfx.lb { background: linear-gradient(#000 0 var(--h), transparent var(--h) calc(100% - var(--h)), #000 calc(100% - var(--h))); }
.lk-mfx.grain { inset: -4%; background: repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.16) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 63% 71%, rgba(0,0,0,.22) 0 1px, transparent 1px 4px); }
.lk-mfx.glitch { background: repeating-linear-gradient(90deg, rgba(255,0,60,.28) 0 var(--k, 3px), transparent var(--k, 3px) 16px), repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,120,255,.24) 9px calc(9px + var(--k, 3px))), repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.lk-mfx.snow { background: radial-gradient(circle, #fff 0 2px, transparent 2.5px) 0 0 / 37px 53px, radial-gradient(circle, #fff 0 1.5px, transparent 2px) 17px 23px / 29px 41px; background-repeat: repeat; }
.lk-mfx.rain { background: radial-gradient(0.6px 7px at 50% 50%, rgba(205,220,240,.75) 98%, transparent 100%) 0 0 / 13px 37px, radial-gradient(0.6px 5px at 50% 50%, rgba(205,220,240,.6) 98%, transparent 100%) 6px 17px / 17px 29px; }
@media (prefers-reduced-motion: no-preference) { .lk-mfxs-ov.play .lk-mfx.grain { animation: lkGrain .4s steps(4) infinite; } }
@keyframes lkGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(2%, 2%); } 100% { transform: translate(0, 0); } }
/* 쇼츠 템플릿 — 영상 창(그림 · 영상이 이 안) · 프레임 그림(캔버스 · 창 자리 투명) */
.ev2-frame.lk-fkon { background: #000; }
.lk-fkwin { position: absolute; overflow: hidden; z-index: 0; }
.lk-fk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html[data-mode="simple"] .lk-mchip { font-size: 17px; }
.lk-pgbar { position: absolute; left: 0; pointer-events: none; }
.lk-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.lk-tpl { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 44px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.lk-tpl.on { border-color: var(--ink); }
.lk-tpl:hover { border-color: var(--line-2); }
.lk-tplc { width: 100%; height: auto; border-radius: 6px; background: #000; display: block; }
/* 1024 자막 상자 여백(감사 #96) — 폰에서 손가락 44px */
@media (max-width: 640px) { .lk-range input[data-lkrange="sub:boxPad"], .lk-range input[data-lkrange="sub:boxRadius"] { min-height: 44px; } }   /* 1025 둥근 모서리 칸도(감사 #100) */
/* 1025 화면 가이드 — 1026 재생 줄(.ev2-tr) 끝 작은 켜기 두 개(미리보기 크기 그대로 · 대표 10/26 00:49 · 245 ②) */
.lk-gbar { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.lk-gbar .lk-check { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; cursor: pointer; color: inherit; font-size: 12px; white-space: nowrap; }   /* 1026 어두운 미리보기 칸 글자색(예전 --ink 라 거의 안 보였음) */
.lk-gbar .lk-check input { width: 16px; height: 16px; margin: 0; }
html[data-mode="simple"] .lk-gbar .lk-check { font-size: 14px; }
.lk-gbar.ov { position: absolute; right: 4px; bottom: 6px; z-index: 2; flex-direction: column; align-items: stretch; gap: 4px; color: #e7e5e4; }   /* 미리보기 틀 옆 빈 곳 */
.lk-gbar.ov .lk-check { padding: 0 6px; background: rgba(43,45,49,.92); border: 1px solid #57534e; border-radius: 8px; }
.lk-gbar .lk-gnone { font-size: 12px; }