@layer t2.module {
/* Path: T2Editor/js/utils/content-block.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * content-block 모듈 — 구조와 거동만 담당한다.
 *
 * ── 소유권 경계 (2026-08-10 정리) ─────────────────────────────────────────
 * 이 파일은 t2.module 레이어다. t2.product(t2-visual-system.css)가 뒤에 오므로
 * 여기서 외형(면·테두리·radius·그림자·여백 수치)을 선언하면 무조건 덮인다.
 * 그래서 외형 선언을 이 파일에서 걷어냈다. 이 파일이 소유하는 것은:
 *     · 슬롯 배치 좌표 (top/bottom × start/end, outside/inside)
 *     · 자동 숨김 상태 기계 (visibility=auto/persistent)
 *     · 밖 배치 오프셋(--t2-block-slot-offset). 자리 예약 규칙 자체는 product 소유
 *     · 스크롤 축 잠금 · 드래그 표면 하드닝
 *     · 다크 테마용 지역 변수 매핑
 * 외형은 t2-visual-system.css §6 이 단독으로 소유한다.
 *
 * 이전 판에는 같은 선택자가 이 파일 안에서 두 번(초판 + "Law-Aligned 2026-08"
 * 추가분) 선언되어 있었고, 그 위에서 product 레이어가 세 번째 값으로 덮었다.
 * 블록 padding 이 10px → 12px → 0 으로, group padding 이 4px → 3px → 2px 로
 * 세 번 바뀌는 구조여서 어떤 값이 실제로 적용되는지 코드만 보고 알 수 없었다.
 * 부모-자식 인셋 리듬이 어긋난 원인이 이것이다. 값 하나에 소유자 하나.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 지역 변수 — 외형이 아니라 "이 모듈이 참조할 이름" ─────────────── */
.t2-editor .t2-content-block {
    --t2-block-focus: var(--t2-product);
    position: relative;
    box-sizing: border-box;
    isolation: isolate;
}

/* ── 2. 슬롯 — 위치 레일. 절대 칠하지 않는다 ──────────────────────────
 * 시각적 묶음은 각 기능 그룹(__group)이 담당한다. 슬롯을 칠하면 서로 무관한
 * 컨트롤이 하나의 섬으로 잘못 읽히고, 더 심각하게는 자동 숨김이 깨진다:
 * 숨김은 __group 의 opacity/visibility 로 동작하므로 슬롯에 면이 있으면
 * 아이콘만 사라지고 배경 상자가 남는다. */
.t2-editor .t2-content-block__slot {
    position: absolute;
    z-index: 20;
    display: flex;
    max-width: calc(100% - 16px);
    gap: var(--t2-s1);
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    pointer-events: none;
}

/* ── 3. 슬롯 배치: outside(기본) / inside ─────────────────────────────────
   outside  컨트롤 섬이 블록 컨테이너 밖에 떠 있다. 콘텐츠 픽셀을 가리지
            않으므로 발행 결과를 그대로 볼 수 있다. 기존 동작이자 기본값.
   inside   컨테이너 안쪽 모서리에 겹친다. 블록이 화면 폭을 꽉 채워
            바깥에 여유가 없을 때, 또는 컨트롤이 문서 흐름을 밀지 않아야
            할 때 쓴다.
   관리자 설정 또는 플러그인 선언으로 결정되며, JS 가 슬롯 요소에
   data-t2-content-block-placement 를 부여한다. */
/* 블록 경계에서 섬까지의 거리. 밖 배치 자리 예약값이 이 변수에서 파생되므로
   숫자의 소유자는 이 선언 하나다. */
.t2-editor { --t2-block-slot-offset: 6px; }

.t2-editor .t2-content-block__slot--top-start    { top: auto; left: 8px;  bottom: 100%; margin-bottom: var(--t2-block-slot-offset); }
.t2-editor .t2-content-block__slot--top-end      { top: auto; right: 8px; bottom: 100%; margin-bottom: var(--t2-block-slot-offset); }
.t2-editor .t2-content-block__slot--bottom-start { top: 100%; bottom: auto; left: 8px;  margin-top: var(--t2-block-slot-offset); }
.t2-editor .t2-content-block__slot--bottom-end   { top: 100%; bottom: auto; right: 8px; margin-top: var(--t2-block-slot-offset); }

.t2-editor .t2-content-block__slot[data-t2-content-block-placement="inside"] {
    margin-top: 0;
    margin-bottom: 0;
}
.t2-editor .t2-content-block__slot--top-start[data-t2-content-block-placement="inside"]    { top: 8px; bottom: auto; left: 8px; }
.t2-editor .t2-content-block__slot--top-end[data-t2-content-block-placement="inside"]      { top: 8px; bottom: auto; right: 8px; }
.t2-editor .t2-content-block__slot--bottom-start[data-t2-content-block-placement="inside"] { top: auto; bottom: 8px; left: 8px; }
.t2-editor .t2-content-block__slot--bottom-end[data-t2-content-block-placement="inside"]   { top: auto; bottom: 8px; right: 8px; }

/* ── 4. 밖 배치 자리 예약은 product 레이어가 소유한다 ─────────────────────
   밖(outside) 슬롯은 블록 경계 밖에 뜨므로 이웃 콘텐츠 위를 덮는다. 그 자리를
   블록 여백으로 확보해야 하는데, 여백 수치의 소유자는 t2.product 다
   (t2-visual-system.css §6 이 .t2-content-block 의 margin-block 을 선언한다).

   여기서 margin 을 선언하면 안 된다. 레이어 순서 비교가 특이성보다 먼저이므로
   t2.module 의 margin 은 특이성과 무관하게 t2.product 의 margin-block 에 진다.
   이전 판은 이 파일에서 :first-child/:last-child 에 margin 예약을 선언했고,
   그 선언은 한 번도 적용된 적이 없다 — 사문이었다. 실제 증상은 삭제·이동
   컨트롤 섬이 이웃 문단 글자 위에 겹쳐 뜨는 것이었다.

   모듈이 소유하는 것은 위 --t2-block-slot-offset 과, JS 가 부여하는
   data-t2-content-block-outside 신호뿐이다. 예약 규칙은
   t2-visual-system.css §6 "밖 배치 자리 예약" 을 본다. */

/* ── 5. 기능 그룹 — 배치와 거동만. 면·테두리·그림자는 product 소유 ────── */
.t2-editor .t2-content-block__group {
    display: inline-flex;
    flex: 0 0 auto;
    max-width: 100%;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    transition: opacity var(--t2-motion), visibility var(--t2-motion), transform var(--t2-motion);
}

/* ── 6. 자동 숨김 상태 기계 ──────────────────────────────────────────── */
.t2-editor .t2-content-block__group[data-t2-content-block-visibility="auto"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.t2-editor .t2-content-block__slot--top-start .t2-content-block__group[data-t2-content-block-visibility="auto"],
.t2-editor .t2-content-block__slot--top-end .t2-content-block__group[data-t2-content-block-visibility="auto"] {
    transform: translateY(-4px);
}
.t2-editor .t2-content-block__slot--bottom-start .t2-content-block__group[data-t2-content-block-visibility="auto"],
.t2-editor .t2-content-block__slot--bottom-end .t2-content-block__group[data-t2-content-block-visibility="auto"] {
    transform: translateY(4px);
}
.t2-editor .t2-content-block__slot[data-t2-content-block-visible="true"] > .t2-content-block__group[data-t2-content-block-visibility="auto"],
.t2-editor .t2-content-block__group[data-t2-content-block-visibility="auto"]:focus-within,
.t2-editor .t2-content-block__group[data-t2-content-block-visibility="persistent"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── 7. 컨트롤 — 히트 박스와 정렬만 ──────────────────────────────────── */
.t2-editor .t2-content-block__control {
    flex: 0 0 auto;
    box-sizing: border-box;
}
.t2-editor .t2-content-block__control--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.t2-editor .t2-content-block__control--button:disabled { opacity: .4; cursor: not-allowed; }
.t2-editor .t2-content-block__control--range {
    width: 104px;
    min-width: 88px;
    accent-color: var(--t2-block-focus);
}

/* ── 8. 다크 테마 지역 변수 매핑 ─────────────────────────────────────── */
html[data-t2editor-theme="dark"] .t2-editor .t2-content-block {
    --t2-block-focus: var(--t2-product);
}

/* ── 9. 터치 · 모바일 배치 ───────────────────────────────────────────── */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
    /* [iOS⚠️] Keep touch controls at or above the 44×44px target size.
       치수는 product 레이어가 정하고, 여기서는 배치만 다룬다. */
    .t2-editor .t2-content-block__slot--top-start:not([data-t2-content-block-placement="inside"]),
    .t2-editor .t2-content-block__slot--top-end:not([data-t2-content-block-placement="inside"]) { top: auto; bottom: 100%; margin-bottom: var(--t2-block-slot-offset); }
    .t2-editor .t2-content-block__slot--bottom-start:not([data-t2-content-block-placement="inside"]),
    .t2-editor .t2-content-block__slot--bottom-end:not([data-t2-content-block-placement="inside"]) { top: 100%; bottom: auto; margin-top: var(--t2-block-slot-offset); }
    .t2-editor .t2-content-block__slot--top-start[data-t2-content-block-placement="inside"],
    .t2-editor .t2-content-block__slot--top-end[data-t2-content-block-placement="inside"] { top: 8px; bottom: auto; }
    .t2-editor .t2-content-block__slot--bottom-start[data-t2-content-block-placement="inside"],
    .t2-editor .t2-content-block__slot--bottom-end[data-t2-content-block-placement="inside"] { top: auto; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .t2-editor .t2-content-block__group { transition: none; }
}

/* ── 10. law 706 — 레일 축 잠금 ──────────────────────────────────────── */
.t2-editor .t2-content-block__slot,
.t2-editor .t2-content-block__group {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x pinch-zoom;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.t2-editor .t2-content-block__slot::-webkit-scrollbar,
.t2-editor .t2-content-block__group::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ── 11. 드래그 표면 하드닝 ──────────────────────────────────────────
   Custom drag surfaces own pointer movement and must not trigger native
   text/image selection. 전역 규칙이지만 t2-foundation 으로 옮기기 전까지
   여기 둔다 (다른 파일에도 중복 존재 — CSS 계약 검사가 추적한다). */
: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;
}

}