*{box-sizing:border-box}body{margin:0;background:#101116;color:#f4f5f8;font-family:Arial,"Noto Sans KR",sans-serif}.editor{max-width:1800px;margin:24px auto;padding:0 16px 48px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}h1{margin:7px 0;font-size:28px}header small{color:#e65b91;letter-spacing:2px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px}.center{display:grid;gap:12px;min-width:0}.panel{background:#1a1c24;border:1px solid #30333e;border-radius:10px;padding:13px;min-width:0}.panel h2{font-size:15px;margin:0 0 12px}.panel h3{font-size:13px}
.btn,button{display:inline-block;background:#292c37;color:#fff;border:1px solid #414552;border-radius:6px;padding:8px 10px;font-size:12px;cursor:pointer}
.btn{background:#e65b91;border-color:#e65b91}

/* 파일 가져오기 버튼 호버 효과 */
.media-strip-head label.btn {
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.media-strip-head label.btn:hover {
    background-color: #e83e8c;
    color: #ffffff;
    border-color: #e83e8c;
}

.media-strip-head label.btn:active {
    background-color: #c92d73;
    color: #ffffff;
    border-color: #c92d73;
}



.drop {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: center;
    color: var(--muted, #aebbd0);
    font-size: 12px;
}
.drop.over{border-color:#e65b91;background:#322332}.media-strip-panel{min-width:0}.media-strip-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.media-strip-head h2{margin:0}.drop{margin:10px 0;padding:10px 12px;min-height:38px}.media-strip{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;padding:2px 1px 7px;min-width:0;scrollbar-color:#555b6a #171920;scrollbar-width:thin}.mediaItem{flex:0 0 210px;max-width:210px;min-width:0;min-height:100px;border:1px solid #343845;padding:12px 10px;border-radius:7px;margin:0;font-size:12px;overflow-wrap:anywhere;background:#20232d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}

.mediaItem strong{display:block;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mediaItem button{display:block;margin:0 auto;max-width:100%}.media-strip:empty{display:none}.stage{position:relative;aspect-ratio:16/9;background:#08090d;display:grid;place-items:center;overflow:hidden;border-radius:7px}.stage video,.stage img{width:100%;height:100%;object-fit:contain}.stage video:not([src]),.stage video[src=""]{display:none}.stage img[hidden],.stage video[hidden]{display:none}#placeholder{position:absolute;color:#a6a9b6;font-size:12px;text-align:center;padding:16px}#overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:bold;text-shadow:0 2px 5px #000;white-space:pre-wrap;text-align:center;pointer-events:none}.controls,.timelineHead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:9px}.controls span{font-size:12px;color:#a6a9b6}.timelineHead{margin:0 0 12px}.timelineHead h2{margin:0}.ruler{height:25px;margin-left:85px;position:relative;background:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--tick,70px) - 1px),#454957 var(--tick,70px),#454957 calc(var(--tick,70px) + 1px));font-size:10px;color:#a6a9b6}.ruler span{position:absolute;top:5px}
.track{display:flex;min-height:60px;border-bottom:1px solid #2c303a}
.track>b{width:85px;flex-shrink:0;background:#20232d;padding:9px 5px;font-size:11px;color:#c5c8d2;position:sticky;left:0;z-index:2}
.lane{position:relative;flex:1;min-width:500px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--tick,70px) - 1px),#252936 var(--tick,70px),#252936 calc(var(--tick,70px) + 1px))}
.track .lane{overflow:visible}

.timelineClip{
    position:absolute;
    top:7px;
    height:44px;
    border-radius:5px;
    padding:7px 9px;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:grab;
    color:white;
    border:1px solid #ffffff20;
    user-select:none;
    touch-action:none;
    -webkit-user-select: none;
}
.timelineClip.sel{outline:2px solid white}
.timelineClip .edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 5;
    touch-action: none;
}

.timelineClip .edge.l {
    left: 0;
    cursor: ew-resize;
}

.timelineClip .edge.r {
    right: 0;
    cursor: ew-resize;
}


.video{background:#32658b}
.overlay{background:#347b70}.text{background:#8454a1}
.voice{background:#387e73}
.music{background:#98702f}.edge{position:absolute;top:0;bottom:0;width:6px;background:#ffffff45;cursor:ew-resize}
.edge.l{left:0}.edge.r{right:0}
.zoom{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:11px;color:#aaa}
.properties label{display:grid;gap:5px;margin:12px 0;color:#b4b8c5;font-size:11px}
.properties input,.properties select,.properties textarea{width:100%;min-width:0;background:#101116;color:white;border:1px solid #383c49;border-radius:5px;padding:8px}
.properties input[type=range]{padding:0}
.properties input[type=color]{height:32px;padding:2px}
.properties hr{border:0;border-top:1px solid #343845;margin:18px 0}
.note{font-size:11px;line-height:1.5;color:#9ca1af}

.video-subnav a,.video-subnav button{white-space:nowrap}@media(max-width:1250px){.layout{grid-template-columns:minmax(0,1fr)}.properties{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}.properties h2,.properties #none,.properties #props{grid-column:1/-1}}@media(max-width:800px){.layout{grid-template-columns:1fr}.editor header{align-items:flex-start;flex-direction:column}.properties{display:block}.timelineHead{align-items:flex-start;flex-direction:column}}
/* Timeline playhead */
.playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff3030;z-index:20;pointer-events:none;box-shadow:0 0 2px #ff3030}.ruler .playhead{top:0;bottom:-1px}.lane{position:relative}.ruler{cursor:crosshair}

#tracks{overflow-x:auto;overflow-y:hidden;position:relative}.track{width:max-content;min-width:100%}.track .lane{min-width:0;overflow:visible}
/* Playhead and timeline refinements */
#tracks{overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-color:#4b5262 #171920;scrollbar-width:thin}
#tracks .track{width:max-content;min-width:100%}
#tracks .track .lane{flex:none;overflow:visible}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff3030;z-index:30;pointer-events:none;box-shadow:0 0 3px #ff3030}
.ruler{user-select:none;touch-action:pan-y}
.timelineClip{touch-action:none}
/* Playhead scrub handle: visible and draggable from the ruler */
.ruler{position:relative;overflow:visible;cursor:crosshair;user-select:none;touch-action:none}
.ruler .playhead{pointer-events:none;z-index:29}
.playhead-handle{position:absolute;top:-2px;transform:translateX(-50%);width:0;height:0;padding:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #ff3030;border-radius:0;background:transparent;z-index:40;cursor:ew-resize;touch-action:none}
.timelineClip{cursor:grab;pointer-events:auto;touch-action:none;user-select:none}
.timelineClip:active{cursor:grabbing}
.timelineClip.sel{outline:2px solid #fff;outline-offset:1px;z-index:10}

/* Timeline is capped at 20 minutes and scrolls inside its own viewport */
#timelineViewport{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-color:#4b5262 #171920;scrollbar-width:thin}
#timelineViewport .ruler{flex:none}
#timelineViewport #tracks{overflow:visible;width:max-content;min-width:100%}
#timelineViewport .track{width:max-content;min-width:0}
#timelineViewport .track>b{flex:0 0 85px}
#timelineViewport .track .lane{flex:0 0 auto;min-width:0;overflow:visible}
.stage{display:flex;align-items:center;justify-content:center}
.stage video,.stage img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center center}
.stage video[hidden],.stage img[hidden]{display:none}
#previewTimelineProgress{height:5px;background:#30333e;border-radius:99px;overflow:hidden;margin-top:3px;position:relative}
#previewTimelineProgressFill{height:100%;width:0;background:#f0202b;border-radius:99px;transition:width .04s linear}


/* Compact transition library between media and timeline */
.transition-library-panel{padding:9px 12px}
.transition-library-head{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.transition-library-head h2{margin:0;font-size:13px}
.transition-library-head>span,.transition-hint{font-size:10px;color:#9ca1af;margin:0}
.transition-library{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.transition-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;padding:5px 9px;border-radius:6px;white-space:nowrap;background:#242733;border-color:#414654;font-size:11px}
.transition-item:hover,.transition-item:focus-visible{border-color:#e65b91;background:#302431}
.transition-item.dragging{opacity:.55}
.transition-icon{font-size:15px;line-height:1;color:#e889b0}
.transition-hint{margin-top:6px}
.transition-marker{position:absolute;top:3px;height:49px;min-width:22px;width:22px;padding:0;border:2px solid #f3c56b;border-radius:5px;background:#6e5424;z-index:12;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 1px #15171d}
.transition-marker span{font-size:13px;color:#fff;pointer-events:none}
.transition-marker.selected{outline:2px solid #fff;outline-offset:1px}
#transitionPreview{position:absolute;inset:0;pointer-events:none;z-index:5;background:#000;opacity:0;clip-path:inset(0);transform:scale(1);}
#transitionPreview.wipeleft{background:#000;clip-path:inset(0 0 0 100%)}
#transitionPreview.wiperight{background:#000;clip-path:inset(0 100% 0 0)}
#transitionPreview.zoom{background:transparent;border:8px solid rgba(255,255,255,.6);transform:scale(.8)}
@media(max-width:700px){.transition-library-head{align-items:flex-start;flex-direction:column;gap:4px}.transition-library{gap:5px}.transition-item{padding:5px 7px}}





/* 전환 효과 패널: 제목·설명·버튼을 모두 중앙 정렬 */
.transition-library-panel {
    text-align: center;
}

.transition-library-head {
    justify-content: center;
    text-align: center;
}

.transition-library-head h2,
.transition-library-head > span {
    text-align: center;
}

.transition-library {
    justify-content: center;
}

.transition-hint {
    text-align: center;
}

@media (max-width: 700px) {
    .transition-library-head {
        align-items: center;
        justify-content: center;
    }
}







/* 미디어 카드 내부 전체 중앙 정렬 */
/*
.mediaItem {

    position: relative;
    
    box-sizing: border-box;
    width: 190px;
    min-width: 190px;
    min-height: 110px;
    padding: 12px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
*/

.mediaItem {
    position: relative;
    min-height: 55px;
    height: 55px;
    box-sizing: border-box;
    padding: 10px 32px 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 파일명 */
.mediaItem strong {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    line-height: 1.4;
    overflow-wrap: anywhere;

    position: relative;
    top: 5px;
}

/* 기존 br로 생기는 간격 제거 */
.mediaItem br {
    display: none;
}

/* 타임라인에 추가 버튼 */
.mediaItem button {
    display: block;
    margin: 0;
    align-self: center;
}



/* 타임라인 편집 버튼 간격 */
#addText,
#split,
#copy,
#paste,
#delete {
    margin-left: 3px;
    margin-right: 3px;
}

/* 버튼 그룹 내부 간격이 flex/grid로 관리되는 경우 */
.timeline-toolbar {
    gap: 6px;
}






/* ============================================================
   스튜디오 2차 메뉴
   영상 제작 / 더빙 / 내 영상 / 영상 업로드
   ============================================================ */

.video-subnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.video-subnav a,
.video-subnav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 0 24px;

  border: 1px solid transparent;
  border-radius: 999px;

  background: transparent;
  color: #aeb7c4;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* 마우스를 올렸을 때 */
.video-subnav a:hover,
.video-subnav button:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

/* 현재 선택된 메뉴 */
.video-subnav a.active,
.video-subnav button.active {
  background: rgba(60, 105, 180, 0.28);
  border-color: rgba(90, 145, 235, 0.55);
  color: #ffffff;

  box-shadow:
    0 0 0 1px rgba(90, 145, 235, 0.08),
    0 4px 16px rgba(40, 90, 180, 0.18);
}

/* 클릭 */
.video-subnav a:active,
.video-subnav button:active {
  transform: translateY(1px);
}



.video-subnav[hidden] {
    display: none !important;
}







/* 전환 효과 패널: 제목·설명·버튼을 모두 중앙 정렬 */
.transition-library-panel {
    text-align: center;
}

.transition-library-head {
    justify-content: center;
    text-align: center;
}

.transition-library-head h2,
.transition-library-head > span {
    text-align: center;
}

.transition-library {
    justify-content: center;
}

.transition-hint {
    text-align: center;
}

@media (max-width: 700px) {
    .transition-library-head {
        align-items: center;
        justify-content: center;
    }
}




/* 전환 클립: 시간 길이에 맞춰 표시 */
.timelineClip.transition-clip {
    box-sizing: border-box;
    min-width: 24px;
    position: absolute;
    cursor: grab;
    overflow: visible;
    touch-action: none;
    user-select: none;
}

.timelineClip.transition-clip:active {
    cursor: grabbing;
}

/* 전환 클립 양끝의 길이 조절 손잡이 */
.timelineClip.transition-clip .edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background: #ffffff55;
    cursor: ew-resize;
    z-index: 2;
}

.timelineClip.transition-clip .edge.l {
    left: 0;
}

.timelineClip.transition-clip .edge.r {
    right: 0;
}



/* 마우스를 올렸을 때 */
.timelineClip.transition-clip:hover {
    filter: brightness(1.15);
}

/* 선택된 전환 클립 */
.timelineClip.transition-clip.sel {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    z-index: 15;
}





/* 파일 삭제 버튼을 우측 상단으로 이동 */
.mediaItem-actions {
    position: static;
}

.mediaItem-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    margin: 0;
    z-index: 5;
}


.mediaItem-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    margin: 0;
    z-index: 5;

    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* 전환 효과와 영상 전환 설정을 가로 배치 */
.transition-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 12px;
    align-items: stretch;
}

/* 전환 효과 영역 */
.transition-workspace .transition-library-panel {
    min-width: 0;
    margin: 0;
}

/* 영상 전환 설정 */
.transition-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-width: 0;
}

.transition-settings h3 {
    margin: 0 0 4px;
}

.transition-settings select,
.transition-settings input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .transition-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}




#overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: move;
    pointer-events: auto;
    user-select: none;
}



.editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#renderMp4 {
    background: #e91e63;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
}

#renderMp4:hover {
    background: #c2185b;
}

#renderMp4:disabled {
    opacity: 0.6;
    cursor: wait;
}





/* =====================================================
   MP4 다운로드 링크 버튼
===================================================== */

#renderDownloadLink {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 16px;
    margin-left: 10px !important;

    background: #272a35;
    color: #ffffff !important;

    border: 1px solid #454958;
    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;

    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

#renderDownloadLink:hover {
    background: #383c4b;
    border-color: #f01865;
    color: #ffffff !important;
}

#renderDownloadLink:active {
    transform: scale(0.97);
}




#addText,
#split,
#copy,
#paste,
#delete {
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#addText:hover,
#split:hover,
#copy:hover,
#paste:hover,
#delete:hover {
    background-color: #454b5b;
    border-color: #858fa5;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

#addText:active,
#split:active,
#copy:active,
#paste:active,
#delete:active {
    transform: translateY(0);
}



/* 숫자 입력 필드의 위아래 증감 버튼 숨기기 */
#transitionDur::-webkit-inner-spin-button,
#transitionDur::-webkit-outer-spin-button,
#dur::-webkit-inner-spin-button,
#dur::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#transitionDur,
#dur {
    -moz-appearance: textfield;
    appearance: textfield;
}



/* 숫자 입력칸의 증감 버튼 숨기기 */
#dur::-webkit-inner-spin-button,
#dur::-webkit-outer-spin-button,
#fontSize::-webkit-inner-spin-button,
#fontSize::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#dur,
#fontSize {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* 숫자 입력칸의 증감 버튼 숨기기 */
#start::-webkit-inner-spin-button,
#start::-webkit-outer-spin-button,
#dur::-webkit-inner-spin-button,
#dur::-webkit-outer-spin-button,
#fontSize::-webkit-inner-spin-button,
#fontSize::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox 및 공통 설정 */
#start,
#dur,
#fontSize {
    -moz-appearance: textfield;
    appearance: textfield;
}



/* 다국어 자막 관리 패널 */
.subtitle-panel {
    margin-top: 12px;
    padding: 16px;
    min-width: 0;
}

.subtitle-panel-header,
.subtitle-actions,
.subtitle-toolbar,
.subtitle-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.subtitle-panel-header {
    justify-content: space-between;
    margin-bottom: 14px;
}

.subtitle-panel-header h2 {
    margin: 0 0 5px;
}

.subtitle-panel-header p,
.subtitle-footer span {
    margin: 0;
    color: #9ca1af;
    font-size: 12px;

    transform: translateY(5px);
}

.subtitle-toolbar {
    margin-bottom: 10px;
}

.subtitle-toolbar label {
    display: grid;
    gap: 5px;
    color: #b4b8c5;
    font-size: 11px;
}

.subtitle-toolbar select,
.subtitle-table input,
.subtitle-table textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid #383c49;
    border-radius: 5px;
    background: #101116;
    color: white;
}

.subtitle-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.subtitle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.subtitle-table th,
.subtitle-table td {
    padding: 7px;
    border-bottom: 1px solid #343845;
    text-align: left;
    vertical-align: top;
}

.subtitle-table th {
    color: #b4b8c5;
    white-space: nowrap;
}

.subtitle-table td:nth-child(1),
.subtitle-table td:nth-child(2) {
    width: 95px;
}

.subtitle-table td:nth-child(4) {
    width: 65px;
}

.subtitle-table textarea {
    min-width: 180px;
    resize: vertical;
}

.subtitle-status {
    min-height: 18px;
    color: #b4b8c5;
    font-size: 12px;
}

.subtitle-footer {
    justify-content: space-between;
    margin-top: 12px;
}

.subtitle-row-delete {
    color: #ffaaaa;
}

@media (max-width: 700px) {
    .subtitle-panel {
        padding: 10px;
    }

    .subtitle-panel-header {
        align-items: flex-start;
    }

    .subtitle-toolbar label {
        flex: 1 1 130px;
    }
}





.subtitle-language-add {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #b4b8c5;
    font-size: 11px;
}

.subtitle-language-add button {
    padding: 8px 12px;
    border: 1px solid #555b6d;
    border-radius: 5px;
    background: #242734;
    color: #fff;
    cursor: pointer;
}

.subtitle-language-add button:hover {
    background: #34394a;
}

.subtitle-empty {
    padding: 20px !important;
    color: #9ca1af;
    text-align: center !important;
}





/* 다국어 자막 관리 버튼 기본 스타일 */
.subtitle-panel button {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    cursor: pointer;
}

/* 자막 추가 / 자막 내보내기 / 자막 불러오기 / 번역 버튼 */
.subtitle-actions button,
.subtitle-toolbar button,
.subtitle-footer button {
    background-color: #292d3a;
    color: #ffffff;
    border: 1px solid #484e60;
    border-radius: 6px;
    padding: 9px 14px;
}

/* 마우스를 올렸을 때 */
.subtitle-actions button:hover,
.subtitle-toolbar button:hover,
.subtitle-footer button:hover {
    background-color: #454b5b;
    border-color: #858fa5;
    color: #ffffff;
}

/* 버튼을 누르는 순간 */
.subtitle-actions button:active,
.subtitle-toolbar button:active,
.subtitle-footer button:active {
    background-color: #454b5b;
    border-color: #858fa5;
}

/* 키보드 포커스 */
.subtitle-panel button:focus-visible {
    outline: 2px solid #a6a6a6;
    outline-offset: 2px;
}

/* 개별 자막 삭제 버튼 */
.subtitle-row-delete {
    background: transparent;
    border: 1px solid #70404a;
    border-radius: 5px;
    padding: 6px 10px;
    color: #ffaaaa;
}

.subtitle-row-delete:hover {
    background-color: #454b5b;
    border-color: #858fa5;
    color: #ffffff;
}





/* ========================================
   영상 편집기 주요 버튼 호버 효과
   ======================================== */

#apply,
#applyTransition,
#exportProject,
#importProject,
#play,
#pause,
#stop {
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* 마우스를 올렸을 때 */
#apply:hover,
#applyTransition:hover,
#exportProject:hover,
#importProject:hover,
#play:hover,
#pause:hover,
#stop:hover {
    background-color: #454b5b;
    border-color: #858fa5;
    color: #ffffff;
}

/* 마우스로 누르는 순간 */
#apply:active,
#applyTransition:active,
#exportProject:active,
#importProject:active,
#play:active,
#pause:active,
#stop:active {
    background-color: #454b5b;
    border-color: #858fa5;
    color: #ffffff;
}

/* 키보드 포커스 */
#apply:focus-visible,
#applyTransition:focus-visible,
#exportProject:focus-visible,
#importProject:focus-visible,
#play:focus-visible,
#pause:focus-visible,
#stop:focus-visible {
    outline: 2px solid #525151;
    outline-offset: 2px;
}



/* 자막 번역 및 언어 추가 버튼 높이 통일 */
#translateSubtitles,
#addSubtitleLanguage {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    align-self: end;
    margin-top: 0;
}





/* 패널 접기·펼치기 버튼 */
.panel-toggle {
    padding: 5px 10px;
    border: 1px solid #484e60;
    border-radius: 6px;
    background: #292d3a;
    color: #ffffff;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.panel-toggle:hover {
    background: #292d3a;
    border-color: #919090;
}

/* 접힌 패널의 높이와 여백 최소화 */
.media-strip-panel:has(#media[hidden]) {
    padding-bottom: 10px;
}

.transition-library-panel:has(#transitionLibrary[hidden]) {
    padding-bottom: 10px;
}

.subtitle-panel:has(> .subtitle-panel-header + [hidden]) {
    padding-bottom: 10px;
}

[hidden] {
    display: none !important;
}




/* 패널 제목과 접기·펼치기 버튼을 같은 줄에 배치 */
.media-strip-head h2,
.transition-library-head h2,
.subtitle-panel-header h2 {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    font-size: 15px;
}

.panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 10px;
}

/* 다국어 자막 제목 영역 */
.subtitle-panel-header > div:first-child {
    display: block;
}

.transition-library-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
}


.transition-library-head > span {
    font-size: 12px;
}




/* 패널 제목과 접기·펼치기 버튼을 바로 옆에 배치 */
.panel-title-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    vertical-align: middle;
}

.panel-title-group h2 {
    display: inline-block;
    margin: 0;
    white-space: nowrap;
}

.panel-title-group .panel-toggle {
    flex: 0 0 auto;
    margin: 0;
}


/* 다국어 자막 시작/종료 시간 숫자 버튼 다크 테마 */
.subtitle-panel input[type="number"] {
    color-scheme: dark;
    background-color: #111318;
    color: #f1f3f5;
    border: 1px solid #343945;
}




/* 다국어 자막 도구 모음 */
.subtitle-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* 언어 선택 영역 */
.subtitle-toolbar > label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
}

/* 새 언어 추가 영역 */
.subtitle-toolbar .subtitle-language-add {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
}

/* 언어 선택 상자와 버튼 높이 통일 */
.subtitle-toolbar select,
.subtitle-toolbar button {
    box-sizing: border-box;
    height: 40px;
}

/* 번역 버튼과 언어 추가 버튼을 하단 기준으로 정렬 */
.subtitle-toolbar button {
    align-self: flex-end;
    white-space: nowrap;
}

/* 새 언어 선택 상자 너비 */
#newSubtitleLanguage {
    min-width: 190px;
}




/* 새 언어 추가 영역 전체를 가로로 배치 */
.subtitle-toolbar .subtitle-language-add {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* 제목과 선택 상자를 세로로 묶음 */
.subtitle-toolbar .subtitle-language-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* 제목은 선택 상자 바로 위에 표시 */
.subtitle-toolbar .subtitle-language-group > span {
    position: static;
    transform: none;
    display: block;
}

/* 언어 선택 상자 */
.subtitle-toolbar .subtitle-language-group select {
    width: 240px;
    min-width: 240px;
    height: 44px;
    box-sizing: border-box;
}

/* 추가 버튼 */
.subtitle-toolbar .subtitle-language-add button {
    height: 44px;
    box-sizing: border-box;
    white-space: nowrap;
}



/* 번역 버튼과 새 언어 추가 영역 사이 간격 */
#translateSubtitles {
    margin-right: 20px;
}




/* 미리보기 자막 언어 선택 */
.preview-subtitle-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.preview-subtitle-controls label {
    color: #c5c8d2;
    font-size: 13px;
}

#previewSubtitleLanguage {
    min-width: 180px;
    height: 38px;
    padding: 0 10px;
    color: #fff;
    background: #101116;
    border: 1px solid #454957;
    border-radius: 6px;
}

#previewSubtitleLanguage {
    font-size: 13px;
}

/* 영상 하단 자막 */
#subtitlePreviewOverlay {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    color: #fff;

    /* 반투명 검정 배경
    background: rgb(0 0 0 / 68%);
    border-radius: 4px;
    */

    background: transparent;
    border-radius: 0;

    font-size: clamp(14px, 2.2vw, 26px);
    line-height: 1.5;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
}

#subtitlePreviewOverlay[hidden] {
    display: none;
}


.mediaItem {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.media-touch-ghost,
.transition-touch-ghost {
    pointer-events: none;
}



/* 편집기 전용 전환 합성 미리보기 */
#transitionComposite {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    background: #000;
}

#transitionComposite[hidden] {
    display: none !important;
}

#transitionComposite .transition-composite-side {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#transitionComposite .transition-composite-side video,
#transitionComposite .transition-composite-side img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

#transitionComposite .transition-composite-side video[hidden],
#transitionComposite .transition-composite-side img[hidden] {
    display: none !important;
}

#transitionComposite .transition-composite-black {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    opacity: 0;
    pointer-events: none;
}