@layer t2.legacy {
/* Path: T2Editor/css/core.css */
/* Rationale: 색상·간격은 CSS 변수에서 조정하고 전역 CMS 요소로 선택자 범위를 넓히지 않는다. */

/* T2Editor Core Styles */
.t2-editor-container { position: relative; }
/* 배치 모드·크기·간격·면·radius 는 t2-visual-system.css §toolbar 가 소유한다.
   여기는 폭 제약과 sticky 소유권만 남긴다. */
.t2-toolbar { width:100%; max-width:100%; box-sizing:border-box; position:-webkit-sticky; position:sticky; top:0; z-index:100; }
.t2-toolbar[hidden] { display:none !important; }

/* Buttons */
.t2-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; align-items: center; gap: var(--t2-s1); transition: all 0.15s ease; }

.t2-btn { position: relative; }
.t2-btn-loading { overflow: hidden; }
.t2-btn-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  pointer-events: none;
}
.t2-btn-loading-spinner {
  box-sizing: border-box;
  border-top-color: transparent;
  animation: t2-btn-loading-spin .7s linear infinite;
}
@keyframes t2-btn-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .t2-btn-loading-spinner { animation-duration: 1.6s; }
}

.t2-btn.active { font-weight: 600; }
.t2-btn:disabled { cursor: not-allowed; }
.t2-btn:disabled:hover { box-shadow: none; }

/* Contract: data-plugin-state / data-plugin-readiness 는 js/runtime/plugin-runtime.js 가 관리한다.
   Rationale: 플러그인은 지연 로딩되지만 준비 전 버튼도 클릭 가능하다(클릭이 즉시 로딩을 유발).
   따라서 disabled 처럼 보이게 하지 말고 "준비 중"으로만 약하게 표시한다. */
.t2-btn[data-plugin-state="pending"]:not(:disabled),
.t2-btn[data-plugin-state="loading"]:not(:disabled) { opacity: .72; }
.t2-btn[data-plugin-state="loading"]:not(:disabled) { cursor: progress; }
.t2-btn[data-plugin-state="failed"]:not(:disabled) { color: var(--t2-danger, var(--t2-danger)); }
.t2-toolbar[data-plugin-readiness] .t2-btn[data-plugin] { transition: opacity .12s linear; }
@media (prefers-reduced-motion: reduce) {
  .t2-toolbar[data-plugin-readiness] .t2-btn[data-plugin] { transition: none; }
}

/* Editor Content Area */
.t2-editor { outline: none; overflow-y: auto; position: relative; height: var(--t2-editor-content-height, 350px); min-height: var(--t2-editor-content-height, 350px); max-height: none; resize: none; box-sizing: border-box; -webkit-user-select: text; user-select: text; overflow-wrap: anywhere; caret-color: auto; -webkit-text-size-adjust: 100%; touch-action: pan-y; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { .t2-editor { resize: vertical; } }
.t2-editor-fallback { width: 100%; height: var(--t2-editor-content-height, 350px); min-height: var(--t2-editor-content-height, 350px); resize: none; box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { .t2-editor-fallback { resize: vertical; } }
.t2-editor p { margin: 0; padding: 0; min-height: 1.5em; }
/* contenteditable 안의 BR을 block+margin으로 바꾸면 WebKit이 캐럿 위치와 실제
   줄 상자를 다르게 계산해 블록 전후 입력/Enter가 불안정해질 수 있다. */
.t2-editor br { display: inline; content: normal; margin: 0; }
.t2-editor > p[data-t2-boundary] { cursor: text; }
.t2-editor .t2-media-controls, .t2-editor .t2-move-controls { -webkit-user-select: none; user-select: none; }
.t2-editor ::selection { text-shadow: none; }

/* Font Size */
.t2-font-size-list { position: absolute; z-index: 1000; min-width: 120px; -webkit-user-select: none; user-select: none; }
.t2-font-size-option { cursor: pointer; transition: background-color 0.1s ease; }

/* Color Picker */
/* Container is position:fixed; only left/top/z-index come from JS. */
.t2-color-picker-container {
    position: fixed;
    z-index: 10000;
    animation: t2cpIn 0.14s ease;
    box-sizing: border-box;
}
@keyframes t2cpIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Hue quick-select row */
.t2-cp-hue-row {
    display: flex;
    gap: var(--t2-s1);
    flex-wrap: wrap;
    margin-bottom: var(--t2-s2);
}
.t2-cp-hue-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s;
}
.t2-cp-hue-circle:hover { transform: scale(1.15); }

/* Canvas + lightness-slider row */
.t2-cp-main {
    display: flex;
    gap: var(--t2-s2);
    height: 140px;
    margin-bottom: var(--t2-s2);
}
.t2-cp-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
}
.t2-cp-indicator {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Vertical lightness slider */
.t2-cp-l-slider {
    width: 20px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    touch-action: none;
}

/* Horizontal saturation slider */
.t2-cp-s-slider {
    width: 100%;
    height: 20px;
    position: relative;
    cursor: pointer;
    margin-bottom: var(--t2-s2);
    touch-action: none;
}

/* Shared slider handle */
.t2-cp-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--t2-line);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Preview row: swatch + hex input */
.t2-cp-preview {
    display: flex;
    align-items: center;
    gap: var(--t2-s2);
    margin-bottom: var(--t2-s2);
}
.t2-cp-swatch {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.t2-cp-hex-input {
    flex: 1;
    min-width: 0;
    padding: var(--t2-s1) var(--t2-s1);
    border: 1px solid var(--t2-line);
    font-family: monospace;
    font-size: 12px;
    outline: none;
    transition: border-color 0.12s;
}

/* Apply button */
/* 면·잉크·테두리·굵기·높이는 t2-visual-system.css §오버레이가 소유한다.
   여기는 구조와 거동만 남긴다. */
.t2-cp-apply {
    width: 100%;
    padding: var(--t2-s2);
    font-size: 13px;
    cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .t2-color-picker-container {
        width: min(260px, calc(100vw - 20px));
    }
    .t2-cp-hue-circle  { width: 26px; height: 26px; }
    .t2-cp-main        { height: 150px; }
    .t2-cp-handle      { width: 20px; height: 20px; }
    .t2-cp-apply       { padding: var(--t2-s3) var(--t2-s2); font-size: 14px; }
}

/* Common Media Wrappers & Controls */
.t2-media-block { position: relative; margin: var(--t2-s2) 0; padding: var(--t2-s2); border: 1px solid var(--t2-line); }
.t2-media-block img, .t2-media-block iframe, .t2-media-block video { border-radius: var(--t2-radius-control); }
.t2-media-controls { position: absolute; top: 0; right: 0; display: none; -webkit-user-select: none; user-select: none; pointer-events: all; z-index: 10; max-width: calc(100% - 8px); box-sizing: border-box; align-items: center; }
.t2-media-block:hover .t2-media-controls,
.t2-media-block:focus-within .t2-media-controls { display: flex; gap: var(--t2-s1); }
.t2-media-controls .t2-btn[aria-disabled="true"],
.t2-media-controls input[aria-disabled="true"] { opacity: .55; cursor: progress; }
.t2-media-controls .t2-btn[aria-disabled="true"] { pointer-events: auto; }
@media (hover: none), (pointer: coarse) {
    .t2-media-block > .t2-media-controls { display: flex; gap: var(--t2-s1); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .t2-media-controls .size-slider { min-width: 88px; flex: 0 0 auto; }
    .t2-media-controls .t2-btn { flex: 0 0 auto; }
}

.t2-btn-group { display: flex; justify-content: flex-end; align-items: center; }

/* Status Bar & Footer */
.t2-editor-status { display: flex; justify-content: space-between; align-items: center; }
.t2-status-left { display: flex; align-items: center; }

/* Logo Styles Modified */
.t2-logo { display: flex; align-items: center; }
.t2-logo a { text-decoration-line: none; color: inherit; }
.t2-logo a:hover { text-decoration-line: none; color: inherit; }

/* Auto Save Toggle */
.t2-autosave-toggle { display: flex; align-items: center; -webkit-user-select: none; user-select: none; cursor: pointer; }
.t2-switch { position: relative; display: inline-block; }
.t2-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: .4s; }
.t2-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: #fff; transition: .4s; border-radius: 50%; }
.t2-autosave-toggle input:checked + .t2-slider:before { transform: translateX(20px); }
.t2-autosave-toggle:hover .t2-slider { opacity: .8; }

/* Dark Mode Toggle */
.t2-dark-mode-toggle { display: flex; align-items: center; }
.t2-dark-mode-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.t2-dark-mode-btn:hover { transform: translateY(-1px); }
.t2-dark-mode-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.t2-dark-mode-btn .material-icons { font-size: 18px; }

/* ════════════════════════════════════════════════════════════════════════
   [I18N] Translate Toggle — T2Editor 10.2.1-beta2+
   ───────────────────────────────────────────────────────────────────────
   다크모드 토글과 텍스트 수 표시 사이에 위치한 번역 버튼
   - 클릭 시 언어 선택 드롭다운 메뉴 토글
   - 기존 다크모드 토글 디자인 패턴 그대로 복제 (25x25px 원형 버튼)
   ─────────────────────────────────────────────────────────────────────── */
.t2-translate-toggle { position: relative; display: flex; align-items: center; }
.t2-translate-btn {
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.t2-translate-btn:hover { transform: translateY(-1px); }
.t2-translate-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.t2-translate-btn .material-icons { font-size: 16px; }

/* 언어 선택 드롭다운 메뉴 */
.t2-translate-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: var(--t2-s1);
    z-index: 10000;
    overflow: hidden;
}
.t2-translate-menu[hidden] { display: none; }
.t2-translate-menu-list { list-style: none; }
.t2-translate-menu-item {
    cursor: pointer;
    transition: background 0.15s;
}
.t2-translate-menu-item.t2-active::before {
    content: "✓ ";
}
/* [I18N] 자동 감지 옵션 — UI에서 숨김 (기능은 유지).
   사유: 자동 감지는 초기 로드 시 이미 적용되므로 메뉴에 노출할 필요 없음.
   display:none 으로 렌더링 자체를 생략하되, JS 리스너는 그대로 동작. */
.t2-translate-menu-item-auto { display: none !important; }

/* Common Utils */
.t2-bullet-block { margin-left: var(--t2-s5); padding-left: var(--t2-s2); border-left: 1px solid var(--t2-line); }
/* 코어 파일 드래그앤드롭 업로드 */
.t2-editor-container {
    position: relative;
}

.t2-core-drop-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.985);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.t2-core-drop-active .t2-core-drop-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.t2-core-drop-active .t2-editor {
    opacity: 0.24;
    transition: opacity 0.16s ease;
}

.t2-core-drop-icon {
    font-size: 52px;
}

.t2-core-drop-title {
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.25;
}

.t2-core-drop-hint,
.t2-core-drop-size {
    display: block;
    max-width: 92%;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.t2-core-drop-uploading .t2-editor {
    cursor: progress;
}

[data-t2editor-theme="dark"] .t2-core-drop-overlay {
    background: rgba(23, 27, 34, 0.97);
    color: var(--t2-line);
    border-color: rgba(138, 180, 248, 0.9);
}

[data-t2editor-theme="dark"] .t2-core-drop-icon {
    color: var(--t2-product);
}

[data-t2editor-theme="dark"] .t2-core-drop-hint,
[data-t2editor-theme="dark"] .t2-core-drop-size {
    color: var(--t2-line-strong);
}

/* T2Editor first-run hard lock: the guide JS removes this class only after acknowledgement. */
html.t2-first-run-pending .t2-editor-container {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 흐름 안에 둔다 — 자기 자리를 차지해야 아래 콘텐츠를 덮지 않는다 (해설 708 F).
   컨테이너에 position 이 없어 컨테이닝 블록이 페이지였고, overflow:clip 도
   잘라내지 못해 버전 줄이 에디터 아래 콘텐츠 위에 떠 있었다.
   위치·여백·정렬은 t2-visual-system.css 가 소유한다. */
.t2-editor-meta-links {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.t2-admin-link {
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}


[data-t2editor-theme="dark"] .t2-admin-link {
    color: var(--t2-danger);
}

.t2-ui-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: var(--t2-s5);
}
@keyframes t2-plugin-loading-spin {
    to { transform: rotate(360deg); }
}
.t2-block-controls {
    position: absolute;
    right: 8px;
    top: auto;
    bottom: 8px;
    z-index: 10;
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--t2-radius-control);
    background: var(--t2-inset);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.t2-block-controls .t2-move-btn { padding: var(--t2-s1) var(--t2-s3); border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; }
.t2-block-controls .t2-move-btn:first-child { border-right: 1px solid var(--t2-line); }
.t2-block-controls .t2-move-btn:hover { background: rgba(255, 255, 255, .15); }
.t2-block-controls .material-icons { font-size: 20px; }

.t2-editor .t2-drawing-block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.t2-editor .t2-drawing-block > .t2-drawing-container,
.t2-editor .t2-drawing-block > div[data-t2-block="drawing"] {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.t2-editor .t2-drawing-block .t2-drawing-image,
.t2-editor .t2-drawing-block img {
  display: block !important;
  max-width: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

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

/* Common interaction states */
.t2-btn:focus-visible,
.t2-dark-mode-btn:focus-visible,
.t2-translate-btn:focus-visible,
.t2-subtoolbar-close:focus-visible,
.t2-block-controls button:focus-visible,
.t2-cp-apply:focus-visible,
.t2-cp-hex-input:focus-visible {
    outline:1px solid rgba(53, 111, 192, .55);
    outline-offset: 2px;
}

.t2-notification-region {
    position: fixed;
    z-index: 100100;
    display: grid;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.t2-notification-region[data-position="top-left"] {
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
}
.t2-notification-region[data-position="top-center"] {
    top: max(16px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
}
.t2-notification-region[data-position="top-right"] {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
}
.t2-notification-region[data-position="bottom-left"] {
    bottom: max(16px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    align-content: end;
}
.t2-notification-region[data-position="bottom-center"] {
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    align-content: end;
}
.t2-notification-region[data-position="bottom-right"] {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    align-content: end;
}

/* 구조와 거동만. 면·잉크·테두리·그림자는 t2-visual-system.css §7 이 소유한다
   (.t2-notification-<type> 의 의미 rail 포함). */
.t2-notification {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--t2-s2);
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
    transition: transform .22s ease, opacity .22s ease;
}
.t2-notification-dismissible {
    grid-template-columns: minmax(0, 1fr) 32px;
    padding-right: var(--t2-s2);
}
.t2-notification-message { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.t2-notification-close {
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}
.t2-notification-close:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
.t2-notification-close .material-icons { font-size: 20px; }
.t2-notification-enter { animation: t2NotificationIn .22s ease both; }
.t2-notification-leave { transform: translateY(-12px); opacity: 0; }
.t2-notification-region[data-position^="bottom-"] .t2-notification-leave { transform: translateY(12px); }
@keyframes t2NotificationIn {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.t2-notification-region[data-position^="bottom-"] .t2-notification-enter { animation-name: t2NotificationInBottom; }
@keyframes t2NotificationInBottom {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 520px) {
    .t2-notification-region {
        width: min(380px, calc(100vw - 24px));
    }
    .t2-notification-region[data-position$="-left"] { left: max(12px, env(safe-area-inset-left)); }
    .t2-notification-region[data-position$="-right"] { right: max(12px, env(safe-area-inset-right)); }
    .t2-notification-region[data-position^="top-"] { top: max(12px, env(safe-area-inset-top)); }
    .t2-notification-region[data-position^="bottom-"] { bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .t2-btn,
    .t2-dark-mode-btn,
    .t2-translate-btn,
    .t2-color-picker-container,
    .t2-core-drop-overlay,
    .t2-editor,
    .t2-notification {
        animation: none;
        transition-duration: .01ms;
    }
}

.t2-migration-dialog .t2-mig-icon { margin-bottom: var(--t2-s3); }
.t2-migration-dialog .t2-mig-title { margin: 0 0 var(--t2-s2); font-size: 18px; }
.t2-migration-dialog .t2-mig-desc { margin-bottom: var(--t2-s5); font-size: 14px; line-height: 1.6; opacity: .78; }
.t2-migration-dialog .t2-mig-actions { display: flex; justify-content: flex-end; gap: var(--t2-s2); }
.t2-migration-dialog .t2-mig-btn {
    padding: var(--t2-s2) var(--t2-s5);
    border: 0;
    font-size: 14px;
    cursor: pointer;
}
.t2-migration-dialog .t2-mig-btn:hover { filter: brightness(.96); }
.t2-migration-dialog .t2-mig-btn:focus-visible { outline:1px solid rgba(92, 99, 216, .45); outline-offset: 2px; }
[data-t2editor-theme="dark"] .t2-migration-dialog .t2-mig-btn-cancel { background: var(--t2-inset); color: var(--t2-ink); }
@media (max-width: 480px) {
    .t2-migration-dialog { padding: var(--t2-s6) var(--t2-s5) var(--t2-s5); }
    .t2-migration-dialog .t2-mig-actions { flex-direction: column-reverse; }
    .t2-migration-dialog .t2-mig-btn { width: 100%; }
}

/* 자동 저장 상태 표시 · 복원 선택 대화상자 */
.t2-autosave-state {
    margin-left: var(--t2-s2);
    font-size: 11px;
    line-height: 1.4;
    color: var(--t2-ink-muted);
}
.t2-autosave-state[data-state="retrying"] { color: var(--t2-warning); font-weight: 600; }
.t2-autosave-state[data-state="failed"] { color: var(--t2-danger); font-weight: 650; }
.t2-autosave-dialog { padding: var(--t2-s6) var(--t2-s6) var(--t2-s5); width: min(92vw, 440px); text-align: left; }
.t2-autosave-dialog .t2-autosave-dialog-title { margin: 0 0 var(--t2-s2); font-size: 18px; font-weight: 700; }
.t2-autosave-dialog .t2-autosave-dialog-body { margin: 0 0 var(--t2-s5); font-size: 14px; line-height: 1.6; color: var(--t2-ink-muted); }
.t2-autosave-dialog .t2-autosave-dialog-actions { display: flex; justify-content: flex-end; gap: var(--t2-s2); }
.t2-autosave-dialog .t2-autosave-dialog-btn {
    min-height: 42px;
    padding: var(--t2-s2) var(--t2-s4);
    border: 0;
    border-radius: var(--t2-radius-control);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}
.t2-autosave-dialog .t2-autosave-dialog-delete {
    margin-right: auto;
    background: transparent;
    color: var(--t2-danger);
    border: 1px solid var(--t2-line);
}
.t2-autosave-dialog .t2-autosave-dialog-later { background: var(--t2-inset); color: var(--t2-ink); }
.t2-autosave-dialog .t2-autosave-dialog-now { background: var(--t2-product); color: #fff; }
.t2-autosave-dialog .t2-autosave-dialog-btn:hover { filter: brightness(.96); }
.t2-autosave-dialog .t2-autosave-dialog-btn:focus-visible { outline: 1px solid var(--t2-product); outline-offset: 2px; }
@media (max-width: 480px) {
    .t2-autosave-dialog { padding: var(--t2-s6) var(--t2-s5) var(--t2-s5); }
    .t2-autosave-dialog .t2-autosave-dialog-actions { flex-direction: column; }
    .t2-autosave-dialog .t2-autosave-dialog-btn { width: 100%; }
    .t2-autosave-dialog .t2-autosave-dialog-delete { margin-right: 0; order: 3; }
}

.t2-dropdown-layer {
    position: fixed;
    z-index: 100050;
}
.t2-font-size-list {
    max-height: min(320px, calc(100vh - 24px));
    max-height: min(320px, calc(100dvh - 24px));
    overflow-y: auto;
}
.t2-font-size-option {
    width: 100%;

    border: 0;
    text-align: left;
}
.t2-font-size-option:focus-visible {
    outline: 1px solid var(--t2-product);
    outline-offset: -2px;
}

.t2-cp-hue-circle {
    padding: 0;

    -webkit-appearance: none;
    appearance: none;
}
.t2-cp-hue-circle:focus-visible,
.t2-cp-s-slider:focus-visible,
.t2-cp-l-slider:focus-visible {
    outline:1px solid rgba(53, 111, 192, .55);
    outline-offset: 2px;
}

.t2-plugin-surface-dialog{width:min(100%,960px);max-width:100%;box-sizing:border-box}
.t2-plugin-surface-title{line-height:1.35}
.t2-plugin-surface-shell{width:100%;max-width:100%;height:min(72vh,760px);height:min(72dvh,760px);box-sizing:border-box;overflow:hidden;}
.t2-plugin-surface-frame{display:block;width:100%;height:100%;border:0;background:transparent}
@media(max-width:720px){.t2-plugin-surface-shell{height:min(78vh,680px);height:min(78dvh,680px);}}

/* ================================================================
   Shared upload container (T2EUploadContainerUI) base styles
   ----------------------------------------------------------------
   [FIX] js/utils/upload-container.js 가 만드는 공통 dropzone 은
   .t2-upload-container / .t2-upload-container__input 클래스를 사용하는데,
   지금까지 어느 CSS 파일에도 베이스 스타일이 없어 hidden file input이
   컨테이너 밖에 노출되고 클릭 히트박스가 0 이 되어
   image/file/video/meme 4개 플러그인 업로드가 모두 죽어 있었다.
   plugin/*/*.css 는 .t2-*-upload-area .t2-upload-container__text 만 다루므로
   실제 dropzone 구조는 여기서 담당한다. 플러그인별 스타일 격리
   (t2-*-upload-area variantClass) 는 그대로 유지된다.
   ================================================================ */
.t2-upload-container {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.t2-upload-container .material-icons {
    display: block;
    pointer-events: none;
}
.t2-upload-container__text,
.t2-upload-container__hint {
    pointer-events: none;
}
/* [FIX] hidden file input 은 컨테이너 전체를 덮어 클릭·드래그를 모두 받는다.
   opacity:0 + absolute inset:0 이 없으면 브라우저 기본 위치(맨 아래 좌측)에
   실물 인풋이 노출되어 실제 클릭 영역이 라벨 텍스트 몇 px 로 줄어든다. */
.t2-upload-container__input {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    z-index: 2;
    /* 파일 다이얼로그가 뜨는 동안에도 커서 이동으로 인한 label click race 방지 */
    font-size: 0;
    color: transparent;
    background: transparent;
}
.t2-upload-container__input::-webkit-file-upload-button {
    cursor: pointer;
}
.t2-upload-container--busy,
.t2-upload-container--busy .t2-upload-container__input {
    cursor: wait;
    pointer-events: none;
}

/* 공통 progress 셸 (T2EupProgressCreate) 도 기본 형태만 잡아둔다.
   플러그인이 자체 CSS 로 덮어쓰지 않아도 최소한 화면에 보이도록. */
.t2-upload-progress {
    box-sizing: border-box;
    width: 100%;
}
.t2-upload-progress[hidden] { display: none !important; }
.t2-upload-progress .t2-progress-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.t2-upload-progress .t2-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    transition: width .18s ease;
}
.t2-upload-progress .t2-progress-text {
    margin-top: var(--t2-s1);
    text-align: right;
}
html[data-t2editor-theme="dark"] .t2-upload-progress .t2-progress-text { color: var(--t2-ink-muted); }

/* 2세대 :root 토큰 블록 제거 — css/t2-foundation.css 로 통합.
   구 값: radius 8/12/16px, --t2-editor-rgb:77,94,168(구 보라 accent),
   --t2-space-1..5(사용처 0회), --t2-control:44px(색과 이름 충돌). */

.t2-editor-container {
  overflow: clip;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
}

.t2-btn {
  width: var(--t2-hit);
  min-width: var(--t2-hit);
  height: var(--t2-hit);
  min-height: var(--t2-hit);
  padding: 0;
  color: var(--t2-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--t2-radius-s);
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.t2-btn:hover { color: var(--t2-ink); background: rgba(28,28,26,.07); }
.t2-btn:active { color: var(--t2-ink); background: rgba(28,28,26,.12); transform: translateY(1px); }
.t2-btn.active {
  color: #fff;
  background: var(--t2-editor);
  border-color: var(--t2-editor);
  box-shadow: none;
}
.t2-btn:disabled { color: var(--t2-ink-soft); opacity: .38; }
.t2-btn:disabled:hover { color: var(--t2-ink-soft); background: transparent; }
.t2-btn:focus-visible,
.t2-dark-mode-btn:focus-visible,
.t2-translate-btn:focus-visible,
.t2-subtoolbar-close:focus-visible,
.t2-block-controls button:focus-visible,
.t2-cp-apply:focus-visible,
.t2-cp-hex-input:focus-visible {
  outline:1px solid color-mix(in srgb, var(--t2-focus) 55%, transparent);
  outline-offset: 2px;
}

.t2-editor {
  scrollbar-color: var(--t2-line-strong) transparent;
}
.t2-editor ::selection { color: inherit; }

.t2-logo { white-space: nowrap; }
.t2-logo-prefix,
.t2-logo-suffix {
  line-height: 1;
}

.t2-slider { transition: background-color .16s ease; }
.t2-slider::before { left: 2px; bottom: 2px; }
.t2-autosave-toggle input:checked + .t2-slider::before { transform: translateX(16px); }
.t2-autosave-toggle input:focus-visible + .t2-slider { outline:1px solid rgba(53,111,192,.42); outline-offset: 2px; }

.t2-dark-mode-btn,
.t2-translate-btn {
  width: 36px;
  height: 36px;
  margin: 0 0 0 var(--t2-s1);
  padding: 0;
  color: var(--t2-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--t2-radius-s);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.t2-dark-mode-btn:hover,
.t2-translate-btn:hover { color: var(--t2-ink); background: rgba(28,28,26,.07); transform: none; box-shadow: none; }
.t2-translate-btn.t2-active { color: #fff; background: var(--t2-editor); border-color: var(--t2-editor); box-shadow: none; }

.t2-translate-menu,
.t2-font-size-list,
.t2-color-picker-container {
  color: var(--t2-ink);
}
.t2-translate-menu-item,
.t2-font-size-option { min-height: 40px; border-radius: var(--t2-radius-control); }
.t2-translate-menu-item.t2-active { box-shadow: inset 0 -2px 0 var(--t2-editor); }
.t2-translate-menu-item.t2-active::before { color: var(--t2-editor); }

.t2-color-picker-container { width: 238px; }
.t2-cp-hue-circle { border: 1px solid var(--t2-paper); box-shadow: 0 0 0 1px var(--t2-line); }
.t2-cp-canvas,
.t2-cp-l-slider,
.t2-cp-s-slider { border-radius: var(--t2-radius-s); }
.t2-cp-swatch { border-radius: var(--t2-radius-s); box-shadow: 0 0 0 1px var(--t2-line); }
.t2-cp-hex-input { min-height: 40px; color: var(--t2-ink); background: var(--t2-paper-soft); border-color: var(--t2-line); border-radius: var(--t2-radius-s); }
.t2-cp-hex-input:focus { border-color: var(--t2-ink); box-shadow: none; }
/* 색 적용 버튼의 면·잉크·굵기는 t2-visual-system.css §오버레이가 소유한다. */

.t2-media-block { border-color: var(--t2-line); border-radius: var(--t2-radius-m); background: var(--t2-paper); }
.t2-media-controls {
  padding: var(--t2-s1);
  color: var(--t2-ink-soft);
  background: var(--t2-paper);
  border: 1px solid var(--t2-line);
  border-radius: var(--t2-radius-m);
  box-shadow: 0 8px 24px rgba(18,18,16,.12);
}

.t2-core-drop-overlay {
  gap: var(--t2-s2);
  padding: var(--t2-s6);
  color: var(--t2-ink);
  background: rgba(255,255,255,.97);
  border: 1px dashed var(--t2-editor);
  border-radius: var(--t2-radius-l);
}
.t2-core-drop-icon { color: var(--t2-editor); }
.t2-core-drop-hint,
.t2-core-drop-size { color: var(--t2-ink-soft); }

.t2-admin-link { text-decoration: none; border-bottom: 1px solid var(--t2-line-strong); }
.t2-admin-link:hover,
.t2-admin-link:focus-visible { color: var(--t2-editor); border-bottom-color: var(--t2-editor); }

.t2-ui-overlay { background: rgba(18,18,16,.66); }
.t2-migration-dialog {
  color: var(--t2-ink);
  background: var(--t2-paper);
  border: 1px solid var(--t2-line);
  border-radius: var(--t2-radius-l);
  box-shadow: var(--t2-shadow-float);
}
.t2-migration-dialog .t2-mig-title { font-weight: 800; letter-spacing: -.025em; }
.t2-migration-dialog .t2-mig-btn { min-height: 44px; border-radius: var(--t2-radius-s); font-weight: 750; }
.t2-migration-dialog .t2-mig-btn-cancel { color: var(--t2-ink); background: var(--t2-paper-soft); border: 1px solid var(--t2-line); }
.t2-migration-dialog .t2-mig-btn-confirm { color: #fff; background: var(--t2-editor); box-shadow: none; }
.t2-migration-dialog .t2-mig-btn:focus-visible { outline-color: rgba(53,111,192,.48); }

.t2-plugin-surface-title { color: var(--t2-ink); }

.t2-notification-region { gap: var(--t2-s2); }
.t2-notification {
  min-height: 52px;
  padding: var(--t2-s3) 14px;
  font-weight: 650;
}

/* 최초 실행 안내는 설명과 상태를 우선하고 브랜드는 상단 식별선에 한정한다. */
.t2fr-dialog { border-radius: var(--t2-radius-control); border-color: var(--t2-line); background: var(--t2-paper); color: var(--t2-ink); box-shadow: var(--t2-shadow-float); }
.t2fr-head { background: var(--t2-paper); border-top: 1px solid var(--t2-editor); border-bottom-color: var(--t2-line); }
.t2fr-head h2,
.t2fr-section-title,
.t2fr-section h3 { font-weight: 800; letter-spacing: -.02em; }
.t2fr-section { border-color: var(--t2-line); border-radius: var(--t2-radius-control); background: var(--t2-paper-soft); }
.t2fr-btn { min-height: 44px; border-radius: var(--t2-radius-control); }
.t2fr-btn.primary { color:#fff; border-color: var(--t2-editor); background: var(--t2-editor); box-shadow:none; }
.t2fr-permission-note { border-left-color: var(--t2-editor); background: rgba(53,111,192,.07); }
.t2fr-copy { color: var(--t2-ink); background: var(--t2-paper-soft); border: 1px solid var(--t2-line); }
.t2fr-final-marker { color: var(--t2-ink); border-color: var(--t2-editor); background: rgba(53,111,192,.06); }
.t2fr-progress > span { background: var(--t2-editor); }
.t2fr-btn:focus-visible,
.t2fr-copy:focus-visible,
.t2fr-consent input:focus-visible { outline-color: rgba(53,111,192,.46); }

@media (max-width: 767px), (pointer: coarse) {
  .t2-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .t2-autosave-text { display: none; }
  .t2-dark-mode-btn,
  .t2-translate-btn { width: 44px; height: 44px; }
  .t2-translate-menu-item,
  .t2-font-size-option { min-height: 44px; }
  .t2-plugin-surface-shell { height: min(78vh,680px); height: min(78dvh,680px); }
  .t2fr-dialog { max-height: 98vh; max-height: 98dvh; }
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
  .t2-btn:focus-visible,
  .t2-dark-mode-btn:focus-visible,
  .t2-translate-btn:focus-visible { outline-color: rgba(53,111,192,.55); }
}

/* T2Editor Law-Aligned Design System — 2026-08 / compatibility corrections */
.t2-editor-container{overflow:hidden;overflow:clip}
@supports not (gap:1rem){
  .t2-toolbar>*+*{margin-left:var(--t2-s2)}
  .t2-status-left>*+*{margin-left:var(--t2-s2)}
  .t2-notification-region>*+*{margin-top:var(--t2-s2)}
}

/* =========================================================================
   T2Editor /law 706 — scroll ownership and native-control normalization
   ========================================================================= */
:root {
  --t2-focus-outline: var(--t2-editor, var(--t2-product));
  --t2-focus-halo: rgba(53, 111, 192, .22);
}
html[data-t2editor-theme="dark"] {
  --t2-focus-outline: var(--t2-editor, var(--t2-product));
  --t2-focus-halo: rgba(127, 168, 255, .28);
}

.t2-editor-container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

:where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay,
  [data-t2-modal-companion], [data-t2-plugin-surface], [data-t2-plugin-block],
  .t2-color-picker-container, .t2-dropdown-layer, .t2-plugin-surface-modal)
  :where(button, input, textarea, select),
:where(button, input, textarea, select)[class^="t2-"],
:where(button, input, textarea, select)[class*=" t2-"] {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
:where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay,
  [data-t2-modal-companion], [data-t2-plugin-surface], [data-t2-plugin-block],
  .t2-color-picker-container, .t2-dropdown-layer, .t2-plugin-surface-modal)
  button,
button[class^="t2-"], button[class*=" t2-"] {
  -webkit-appearance: none;
  appearance: none;
}
:where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay,
  [data-t2-modal-companion], [data-t2-plugin-surface], [data-t2-plugin-block],
  .t2-color-picker-container, .t2-dropdown-layer, .t2-plugin-surface-modal)
  :where(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
    input[type="url"], input[type="tel"], input[type="number"], input[type="password"],
    input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select),
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
  input[type="url"], input[type="tel"], input[type="number"], input[type="password"],
  input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select)[class^="t2-"],
:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
  input[type="url"], input[type="tel"], input[type="number"], input[type="password"],
  input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select)[class*=" t2-"] {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
:where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay,
  [data-t2-modal-companion], [data-t2-plugin-surface], [data-t2-plugin-block],
  .t2-color-picker-container, .t2-dropdown-layer, .t2-plugin-surface-modal)
  select:not([multiple]):not([size]),
select[class^="t2-"]:not([multiple]):not([size]),
select[class*=" t2-"]:not([multiple]):not([size]) {
  padding-inline-end: max(32px, 2.25em);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 1px),
    calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay,
  [data-t2-modal-companion], [data-t2-plugin-surface], [data-t2-plugin-block],
  .t2-color-picker-container, .t2-dropdown-layer, .t2-plugin-surface-modal)
  :where(button, input, textarea, select):focus,
:where(button, input, textarea, select)[class^="t2-"]:focus,
:where(button, input, textarea, select)[class*=" t2-"]:focus {
  outline: none;
}
:where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay,
  [data-t2-modal-companion], [data-t2-plugin-surface], [data-t2-plugin-block],
  .t2-color-picker-container, .t2-dropdown-layer, .t2-plugin-surface-modal)
  :where(button, input, textarea, select, [role="button"], [role="option"], [tabindex]):focus-visible,
:where(button, input, textarea, select, [role="button"], [role="option"], [tabindex])[class^="t2-"]:focus-visible,
:where(button, input, textarea, select, [role="button"], [role="option"], [tabindex])[class*=" t2-"]:focus-visible {
  outline: 1px solid var(--t2-focus-outline);
  outline-offset: 2px;
  box-shadow: none;
}

.t2-editor, .t2-font-size-list {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t2-editor::-webkit-scrollbar, .t2-font-size-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.t2-media-controls, .t2-toolbar-scroll{
  max-width: 100%;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  touch-action: pan-x pinch-zoom;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t2-media-controls::-webkit-scrollbar, .t2-toolbar-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
/* 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;
}

}