@layer t2.module {
/* Path: T2Editor/js/utils/content-block-group.css */
/* ═══════════════════════════════════════════════════════════════════════════
 * 묶음 조작부 — 구조와 거동만 담당한다.
 *
 * content-block.css 와 같은 경계다: 이 파일은 t2.module 레이어이고 외형
 * (면·테두리·radius·그림자·색)은 t2.product(css/t2-visual-system.css §6.5)가
 * 단독으로 소유한다. 여기서 외형을 선언하면 무조건 덮이고, 어느 값이 실제로
 * 적용되는지 코드만 보고 알 수 없게 된다.
 *
 * 이 파일이 소유하는 것:
 *     · 겹쳐 뜨는 조작부의 좌표계 (fixed, 묶음 위)
 *     · 보임/숨김 상태 기계
 *     · 미리보기 무대의 축소 기준점
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 조작부는 캔버스 밖(body)에 살고 좌표는 뷰포트 기준이다. 캔버스 안에 넣으면
   편집기가 문서의 새 직계 자식으로 읽고 블록 경계 문단을 덧붙인다. */
.t2-block-group-chrome {
  position: fixed;
  z-index: 28;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t2-motion-fast);
}
.t2-block-group-chrome[data-t2-visible="true"] { opacity: 1; }
/* 숨어 있는 동안에는 단추가 탭 순서에도 없어야 한다 — 보이지 않는 도구 막대에
   포커스가 걸리면 사용자는 어디에 있는지 알 수 없다. */
.t2-block-group-chrome[data-t2-visible="false"] { visibility: hidden; }

.t2-block-group-chrome__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 묶음 이름은 화면에서는 테두리가 대신 말한다. 보조기술에는 남긴다. */
.t2-block-group-chrome__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 도구 막대는 묶음 위쪽 밖에 뜬다. 안에 겹치면 첫 블록의 콘텐츠를 가린다 —
   블록 자신의 컨트롤 섬이 이미 그 자리를 쓰고 있다.

   위에 자리가 없으면 아래로 뒤집는다. 실측에서 캔버스 맨 위의 묶음은 막대가
   뷰포트 밖으로 나가 아예 닿을 수 없었다. 어느 쪽인지는 JS 가 실제 높이를 재서
   정한다(data-t2-bar) — CSS 로는 뷰포트 여백을 알 수 없다. */
.t2-block-group-chrome__bar {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: var(--t2-s1);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: auto;
  white-space: nowrap;
}
.t2-block-group-chrome[data-t2-bar="below"] .t2-block-group-chrome__bar {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: var(--t2-s1);
}

.t2-block-group-chrome__size { flex: 0 0 auto; }
/* 끌 수 없는 슬라이더는 손이 닿아도 아무 일이 없어야 한다 — 닿기만 하고
   움직이지 않으면 사용자는 고장으로 읽는다. */
.t2-block-group-chrome__size:disabled { pointer-events: none; }

/* 미리보기 무대는 왼쪽 위를 기준으로 줄인다. 가운데를 기준으로 줄이면 줄인
   내용이 틀 밖으로 반쯤 나간다 — transform 은 자리를 바꾸지 않기 때문이다. */
.t2-block-group-preview { position: relative; overflow: hidden; }
.t2-block-group-preview__stage {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.t2-block-group-preview__stage > * { flex: 0 0 auto; }

/* 묶음에 속한 블록은 자기 바깥 여백으로 줄을 끊지 않는다 — 세로 여백이 남으면
   나란히 선 블록의 밑선이 서로 어긋난다. */
.t2-editor > .t2-content-block[data-t2-block-group] { margin-block: 0; }
}

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