@layer t2.plugin {
/* Path: T2Editor/plugin/video/video.css */
/* Rationale: video 선택자는 플러그인 루트 아래로 제한하고 공개 본문 표현이 필요하면 css/content.css도 함께 수정한다. */

/* 표면의 안쪽 여백과 폭은 공통 모달 규격이 소유한다 — table.css 와 같은 이유다.
   여백을 24px 로 덮은 동안 발치 밴드가 왼쪽으로 17.7px 삐져나가고 오른쪽은
   67.7px 모자란 채로 서 있었다. */
.t2-video-editor-modal { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui; }
/* margin 은 적지 않는다 — 타이틀 행은 공식 격자가 밴드로 그리고, 그 밴드가
   표면의 인셋을 음수 마진으로 되돌려 좌우 끝까지 닿는다. 여기서 다시 적으면
   t2.plugin 이 t2.product 를 이겨 번짐이 죽고, 헤어라인만 본문 폭으로 줄어든
 채 제목이 본문보다 1/2u 더 들여쓰인다(푸터는 번지고 있어 비대칭이 눈에 띈다). */
.t2-video-editor-modal h3 { font-size: 20px; }

/* Modal-local reset: 외부 테마/공통 버튼 CSS가 비디오 모달 레이아웃을 밀어내지 않도록 격리 */
.t2-video-editor-modal button {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    box-shadow: none;
}
.t2-video-editor-modal .t2-tab-content { width: 100%; }
.t2-video-editor-modal .t2-tab-pane { display: none; }
.t2-video-editor-modal .t2-tab-pane.active { display: block; }
.t2-video-editor-modal .t2-tab {
    border: 0;
    border-bottom: 1px solid transparent;

    background: transparent;

    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 130px;
    height: 44px;
    padding: 0 var(--t2-s3);
    margin: 0 0 -11px 0;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}
.t2-video-editor-modal .t2-tab.active {

    border-bottom-color: var(--t2-plugin-product, var(--t2-product));
}
.t2-video-editor-modal .t2-tab:hover {
    color: var(--t2-plugin-product, var(--t2-product));
}

.t2-video-editor-modal .t2-tab:focus-visible {
    outline: 1px solid var(--t2-plugin-product, var(--t2-product));
    outline-offset: -2px;
    border-radius: var(--t2-radius-control);
}

.t2-video-editor-modal .t2-youtube-url { box-sizing: border-box; width: 100%; padding: var(--t2-s3) var(--t2-s4); font-size: 15px; transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s; margin-bottom: var(--t2-s2); }
.t2-video-editor-modal .t2-youtube-url:focus { outline: none; }
.t2-video-editor-modal .t2-video-type-info { font-size: 13px; color: var(--t2-ink-muted); margin-bottom: var(--t2-s5); }
/* 발치 밴드의 배치(sticky·좌우 번짐·높이·간격)는 공통 모달 규격이 소유한다.
   여기서 width:100% 를 주면 밴드가 표면 여백만큼 번져 나가지 못해 오른쪽이
   86.3px 모자란 채로 선다 — 재서 확인했다. */
.t2-video-editor-modal .t2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;

    height: 40px;
    padding: 0 var(--t2-s4);
    border: 0;

    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    gap: 0;
}
.t2-video-editor-modal .t2-btn[data-action="cancel"]:hover { background: var(--t2-inset); color: var(--t2-product-ink); }
.t2-video-editor-modal .t2-btn[data-action="insert"] { min-width: 80px; }
.t2-video-editor-modal .t2-btn[data-action="insert"]:hover:not(:disabled) { background: var(--t2-plugin-product-soft, var(--t2-product-wash)); color: var(--t2-plugin-on-action); }
/* 해상도 분석 중 버튼 상태 */
.t2-video-editor-modal .t2-btn[data-action="insert"]:disabled, .t2-video-editor-modal .t2-btn[data-action="insert"]:disabled:hover { background: transparent; color: var(--t2-ink-faint); border-bottom:2px solid var(--t2-line-strong); cursor: wait; opacity: 1; }

.t2-video-tabs { display: flex; align-items: flex-end; margin-bottom: var(--t2-s5); border-bottom: 1px solid var(--t2-inset); padding-bottom: var(--t2-s2); }
/* 드롭존의 기하는 공통 어휘(.t2-upload-container)가 소유한다 — file.css 와 같은
   이유로, 여기서 다시 적으면 표적 원 안에서 글리프가 클립된다. */
.t2-video-upload-area { text-align: center; cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s; margin-bottom: var(--t2-s5); position: relative; }
.t2-video-upload-area .t2-upload-container__text { font-size: 15px; color: var(--t2-ink-muted); margin-bottom: var(--t2-s1); }
.t2-video-upload-area .t2-upload-container__hint { font-size: 13px; color: var(--t2-ink-muted); }
.t2-video-upload-area input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.t2-video-preview-container { margin-bottom: var(--t2-s5); }
.t2-video-preview { border-radius: var(--t2-radius-control); padding: var(--t2-s2); }
.t2-video-preview video { border-radius: var(--t2-radius-control); margin-bottom: var(--t2-s2); }
.t2-video-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--t2-ink-muted); gap: var(--t2-s2); }
.t2-video-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.t2-video-file-size { flex-shrink: 0; }
.t2-upload-progress { margin-top: var(--t2-s3); padding: var(--t2-s2); }
.t2-progress-bar { width: 100%; height: 20px; background: var(--t2-workspace); border-radius: var(--t2-radius-island); overflow: hidden; }
.t2-progress-fill { height: 100%; width: 0; transition: width 0.3s ease; }
.t2-progress-text { text-align: center; margin-top: var(--t2-s1); font-size: 14px; }

/* fallback anchor (저장 HTML 내 URL 보존용, 화면에서 완전히 숨김) */
.t2-video-source {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: block !important; /* display:none 은 일부 CMS 가 삭제하므로 block 유지 */
}

/* Dark Mode */
html[data-t2editor-theme="dark"] .t2-video-editor-modal { background-color: var(--t2-floating); color: var(--t2-ink); box-shadow: var(--t2-shadow-modal); border-color: var(--t2-line); }
html[data-t2editor-theme="dark"] .t2-video-editor-modal h3 { color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-tab { color: var(--t2-ink-muted); }
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-tab.active,
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-tab:hover { color: var(--t2-product); border-bottom-color: var(--t2-product); }
html[data-t2editor-theme="dark"] .t2-youtube-url { background-color: var(--t2-inset); border-color: var(--t2-line); color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-youtube-url:focus { border-color: var(--t2-plugin-product, var(--t2-product)); box-shadow: none; }
html[data-t2editor-theme="dark"] .t2-upload-progress { background-color: var(--t2-inset); }
html[data-t2editor-theme="dark"] .t2-progress-bar { background-color: var(--t2-line); }
html[data-t2editor-theme="dark"] .t2-progress-text { color: var(--t2-ink-muted); }
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-btn[data-action="cancel"] { background: var(--t2-inset); color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-btn[data-action="cancel"]:hover { background: var(--t2-line); color: var(--t2-ink); }
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-btn[data-action="insert"]:disabled,
html[data-t2editor-theme="dark"] .t2-video-editor-modal .t2-btn[data-action="insert"]:disabled:hover { background: var(--t2-inset); color: var(--t2-ink-faint); }

@media (max-width: 480px) {
    .t2-video-editor-modal {
        padding: var(--t2-s5);
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
    }

    .t2-video-editor-modal .t2-video-tabs {
        gap: var(--t2-s1);
    }

    .t2-video-editor-modal .t2-tab {
        min-width: 0;
        flex: 1 1 0;
        padding: 0 var(--t2-s2);
        font-size: 14px;
    }

    .t2-video-editor-modal .t2-btn-group {
        gap: var(--t2-s2);
    }

    .t2-video-editor-modal .t2-btn {
        height: 42px;
        min-width: 64px;
        padding: 0 var(--t2-s3);
    }

    .t2-video-editor-modal .t2-btn[data-action="insert"] {
        min-width: 76px;
    }
}
/* [VIDEO-CONTAINER-CAP] 에디터의 옅은 테두리 비디오 블록 내부에서
   실제 비디오 래퍼는 최대 95%까지만 차지한다. */
.t2-video-block > div[data-t2-block="video"],
.t2-video-block > div[data-video-type] {
    max-width: 95%;
    box-sizing: border-box;
}
.t2-video-block > div[data-t2-block="video"] > iframe,
.t2-video-block > div[data-video-type] > iframe,
.t2-video-block > div[data-t2-block="video"] > video,
.t2-video-block > div[data-video-type] > video {
    max-width: 100%;
    display: block;
}

/* 임베드가 뜨지 않을 때의 자리. 회사망이 유튜브를 막았거나, 영상이 지워졌거나,
   비공개로 바뀌었거나, 호스트의 CSP 가 프레임을 막으면 iframe 은 아무것도 그리지
   않는다 — 교차 출처라 load 실패를 알 수도 없다. 그때 문서에는 흰 구멍만 남고
   사용자는 무엇이 있어야 하는지조차 알 수 없다.
   그림을 iframe *뒤에* 둔다. 임베드가 뜨면 그대로 덮이므로 정상 경로에서는
   보이지 않고, 실패했을 때만 영상 모양의 자리로 읽힌다. 바깥 요청을 새로
   만들지 않는다(섬네일을 받아 오면 개인정보 고지 대상이 늘어난다). */
.t2-video-block > div[data-video-type="youtube"] {
    position: relative;
    background: var(--t2-plugin-surface-inset, var(--t2-inset));
}
.t2-video-block > div[data-video-type="youtube"]::before {
    content: "play_circle";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Material Icons";
    font-size: 44px;
    line-height: 1;
    color: var(--t2-plugin-text-muted, var(--t2-ink-muted));
    opacity: .55;
    pointer-events: none;
}
.t2-video-block > div[data-video-type="youtube"] > iframe {
    position: relative;
    z-index: 1;
}

/* T2Editor Coding-Agent Rule: Write only concise, high-value comments. Preserve "Path: T2Editor/..." comments; update them when files move—never delete them. */

/* T2Editor /law official plugin design alignment */
/* Shared --t2-plugin-* tokens are owned by css/t2-foundation.css. */
.t2-dsc-service-brand {
  letter-spacing: -0.01em;
}
.t2-product-brand { white-space: nowrap; }

.t2-video-editor-modal { color: var(--t2-plugin-text); background: var(--t2-plugin-surface); border: 1px solid var(--t2-plugin-border); border-radius: var(--t2-plugin-radius-surface); box-shadow: var(--t2-plugin-shadow); }
.t2-video-editor-modal h3 { color: var(--t2-plugin-text); font-weight: 800; }
.t2-video-tabs { gap: var(--t2-s1); padding: var(--t2-s1); background: var(--t2-plugin-surface-muted); border: 1px solid var(--t2-plugin-border); border-radius: var(--t2-plugin-radius-island); }
.t2-video-editor-modal .t2-tab { min-height: 44px; color: var(--t2-plugin-text-muted); border-radius: var(--t2-radius-control); font-weight: 700; }
.t2-video-editor-modal .t2-tab.active { color: var(--t2-plugin-product); background: var(--t2-plugin-surface); border-color: transparent; box-shadow: 0 1px 4px rgba(20,24,36,.08); }
.t2-video-editor-modal .t2-youtube-url { min-height: 44px; color: var(--t2-plugin-text); background: var(--t2-plugin-surface-raised); border: 1px solid var(--t2-plugin-border); border-radius: var(--t2-plugin-radius-control); }
.t2-video-editor-modal .t2-youtube-url:focus { border-color: var(--t2-plugin-product); box-shadow: none; }
.t2-video-upload-area { background: var(--t2-plugin-surface-raised); border: 1px dashed var(--t2-plugin-border-strong); border-radius: var(--t2-plugin-radius-island); }
.t2-video-upload-area:hover, .t2-video-upload-area.drag-over { border-color: var(--t2-plugin-product); background: var(--t2-plugin-product-soft); }
.t2-video-upload-area .material-icons { color: var(--t2-plugin-product); }
.t2-video-preview { background: var(--t2-plugin-surface-muted); border: 1px solid var(--t2-plugin-border); box-shadow: none; }
.t2-video-editor-modal .t2-btn { min-width: 44px; min-height: 44px; border-radius: var(--t2-plugin-radius-control); }
.t2-video-editor-modal .t2-btn[data-action="insert"] { color: var(--t2-plugin-on-action); background: var(--t2-plugin-action); font-weight: 750; }
.t2-video-editor-modal .t2-btn[data-action="cancel"] { color: var(--t2-plugin-text); background: var(--t2-plugin-surface-muted); border: 1px solid var(--t2-plugin-border); }
.t2-progress-fill { background: var(--t2-plugin-product); }
@media (max-width: 640px) {
  .t2-video-editor-modal { max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .t2-video-editor-modal input, .t2-video-editor-modal select, .t2-video-editor-modal .t2-youtube-url { font-size: 16px; } /* [iOS⚠️] */
}

/* =========================================================================
   T2Editor /law 706 — plugin scroll and native-control hardening
   ========================================================================= */
:is([class^="t2-video-"], [class*=" t2-video-"]):not([data-t2-modal-surface]) {
  max-width: 100%;
}
:is(:is([class^="t2-video-"], [class*=" t2-video-"]) :is(button, input, textarea, select), button[class^="t2-video-"], button[class*=" t2-video-"], input[class^="t2-video-"], input[class*=" t2-video-"], textarea[class^="t2-video-"], textarea[class*=" t2-video-"], select[class^="t2-video-"], select[class*=" t2-video-"]) {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
:is(:is([class^="t2-video-"], [class*=" t2-video-"]) button, button[class^="t2-video-"], button[class*=" t2-video-"]) {
  -webkit-appearance: none;
  appearance: none;
}
:is(:is([class^="t2-video-"], [class*=" t2-video-"]) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, select), input:not([type])[class^="t2-video-"], input:not([type])[class*=" t2-video-"], input[type="text"][class^="t2-video-"], input[type="text"][class*=" t2-video-"], input[type="search"][class^="t2-video-"], input[type="search"][class*=" t2-video-"], input[type="email"][class^="t2-video-"], input[type="email"][class*=" t2-video-"], input[type="url"][class^="t2-video-"], input[type="url"][class*=" t2-video-"], input[type="tel"][class^="t2-video-"], input[type="tel"][class*=" t2-video-"], input[type="number"][class^="t2-video-"], input[type="number"][class*=" t2-video-"], input[type="password"][class^="t2-video-"], input[type="password"][class*=" t2-video-"], textarea[class^="t2-video-"], textarea[class*=" t2-video-"], select[class^="t2-video-"], select[class*=" t2-video-"]) {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
:is(:is([class^="t2-video-"], [class*=" t2-video-"]) :is(button, input, textarea, select), button[class^="t2-video-"], button[class*=" t2-video-"], input[class^="t2-video-"], input[class*=" t2-video-"], textarea[class^="t2-video-"], textarea[class*=" t2-video-"], select[class^="t2-video-"], select[class*=" t2-video-"]):focus {
  outline: none;
}
:is(:is([class^="t2-video-"], [class*=" t2-video-"]) :is(button, input, textarea, select), button[class^="t2-video-"], button[class*=" t2-video-"], input[class^="t2-video-"], input[class*=" t2-video-"], textarea[class^="t2-video-"], textarea[class*=" t2-video-"], select[class^="t2-video-"], select[class*=" t2-video-"]):focus-visible {
  outline: 1px solid var(--t2-plugin-product, var(--t2-product));
  outline-offset: 2px;

}


/* T2Editor /law 706 — plugin select indicator after native appearance reset */
:is(:is([class^="t2-video-"], [class*=" t2-video-"]) select, select[class^="t2-video-"], select[class*=" t2-video-"]):not([multiple]):not([size]) {
  padding-inline-end: max(32px, 2.25em);
  background: var(--t2-surface);
  background-position:
    calc(100% - 14px) calc(50% - 1px),
    calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Custom drag surfaces own pointer movement and must not trigger native text/image selection. */
:where([data-t2-drag-surface], [draggable="true"], input[type="range"], [role="slider"],
  [class*="drag-handle"], [class*="resize-handle"], [class*="resizer"],
  [class*="crop-handle"], [class*="trim-handle"], [class*="seek-bar"],
  [class*="slider-thumb"], [class*="range-thumb"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:where([data-t2-drag-surface], [draggable="true"], input[type="range"], [role="slider"],
  [class*="drag-handle"], [class*="resize-handle"], [class*="resizer"],
  [class*="crop-handle"], [class*="trim-handle"], [class*="seek-bar"],
  [class*="slider-thumb"], [class*="range-thumb"]) img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
html.t2-drag-selection-active, html.t2-drag-selection-active body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

}