@layer t2.module {
/* Path: T2Editor/js/utils/toggle.css */
/* T2Editor 토글 모듈 — 켜짐/꺼짐 하나를 말하는 조작부의 유일한 그림.
 *
 * 브라우저의 체크박스 위에 칠하지 않는다. 조작부는 button[role="switch"] 이고,
 * 값을 폼으로 보내야 하는 자리에서만 숨은 input 이 값을 나른다(js/utils/toggle.js).
 * 그래서 OS·브라우저마다 다른 기본 컨트롤의 크기·accent·포커스링이 이 그림에
 * 끼어들지 않는다.
 *
 * 기하는 트랙 높이 하나에서 전부 나온다 — 704 §3 의 원형 컨트롤 예외이며
 * 여기가 그 예외를 쓰는 몇 안 되는 자리다(708 G-4: 한 수치를 고치면 나머지가
 * 따라와야 한다).
 *   패딩 = 높이/9 · 썸 = 높이×7/9 · 이동 거리 = 너비 - 높이
 * 관리자(34×18)와 편집기 하단 바(1u × 1/2u)의 지금 수치가 이 식에서 그대로 나온다.
 */

.t2-toggle {
  --t2-toggle-h: 18px;
  --t2-toggle-w: 34px;
  --t2-toggle-pad: calc(var(--t2-toggle-h) / 9);
  --t2-toggle-thumb-size: calc(var(--t2-toggle-h) * 7 / 9);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
}

/* 조작 상자는 접근성 바닥인 44px 을 지키고, 보이는 트랙은 그 안에 선다
   (708 H-3 — 최소 히트 영역은 밀도 조정 대상이 아니다). */
.t2-toggle-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--t2-toggle-w);
  height: var(--t2-toggle-h);
  min-width: var(--t2-toggle-w);
  min-height: var(--t2-toggle-h);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  flex: 0 0 auto;
}
.t2-toggle-control::before {
  /* 흐름 밖으로 넓힌 히트 영역. 트랙을 키우지 않고 손가락만 받는다. */
  content: "";
  position: absolute;
  inset: calc((var(--t2-toggle-h) - var(--t2-hit)) / 2) calc((var(--t2-toggle-w) - var(--t2-hit)) / 2);
  min-width: var(--t2-hit);
  min-height: var(--t2-hit);
}
.t2-toggle-control:disabled { cursor: not-allowed; }

.t2-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: var(--t2-radius-pill);
  background: var(--t2-toggle-off);
  border: 0;
  box-shadow: none;
  transition: background-color var(--t2-motion);
  pointer-events: none;
}
.t2-toggle-thumb {
  position: absolute;
  top: var(--t2-toggle-pad);
  left: var(--t2-toggle-pad);
  width: var(--t2-toggle-thumb-size);
  height: var(--t2-toggle-thumb-size);
  border-radius: 50%;
  background: var(--t2-toggle-thumb);
  border: 0;
  box-shadow: 0 1px 2px rgba(16, 20, 26, .28);
  transition: transform var(--t2-motion-spring);
  pointer-events: none;
}
/* 켜짐을 읽는 곳은 aria-checked 하나다. 값을 나르는 input 의 :checked 를
   :has() 로 함께 볼 수도 있지만(브라우저는 그것도 제대로 무효화한다) 그러면
   같은 상태를 두 곳에서 읽게 된다. 보조기술이 읽는 aria-checked 는 어차피
   정확해야 하므로, 그 하나를 그림의 근거로도 삼는다.
   input 과 aria 가 어긋나지 않는 일은 js/utils/toggle.js 가 맡는다 —
   .checked 세터를 감싸 두 값을 항상 함께 옮긴다. */
.t2-toggle-control[aria-checked="true"] .t2-toggle-track { background: var(--t2-toggle-on); }
.t2-toggle-control[aria-checked="true"] .t2-toggle-thumb {
  transform: translateX(calc(var(--t2-toggle-w) - var(--t2-toggle-h)));
}
.t2-toggle-control:focus-visible {
  outline: 1px solid var(--t2-product);
  outline-offset: 2px;
}
.t2-toggle-control:disabled .t2-toggle-track,
.t2-toggle:has(> .t2-toggle-input:disabled) .t2-toggle-track { opacity: .5; }
.t2-toggle-control:disabled .t2-toggle-thumb,
.t2-toggle:has(> .t2-toggle-input:disabled) .t2-toggle-thumb { box-shadow: none; }
.t2-toggle:has(> .t2-toggle-input:disabled) .t2-toggle-control { pointer-events: none; }

/* 값을 나르는 input 은 화면에서 빠지되 접근성 트리에서도 빠진다 — 이름과 상태는
   조작부인 button 이 혼자 말한다. 둘 다 읽히면 보조기술이 컨트롤을 두 개로 센다.
   appearance:none 이 없으면 네이티브 체크박스 위젯의 자체 최소 크기(엔진마다
   13~16px) 가 이 width/height:1px 선언을 이기고 살아남는다 — coarse 포인터
   상자로 잡혀 44px 미만 히트 타깃으로 실측됐다. 이미 pointer-events:none +
   clip-path 로 화면·조작 양쪽에서 빠진 요소이므로 네이티브 그림을 끌 이유만
   있고 잃을 것은 없다(.t2-toggle-control 도 같은 이유로 이미 껐다). */
.t2-toggle-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

/* 아직 올라오지 않은(스크립트 실패) 상태에서도 조작은 가능해야 한다. 그때는
   브라우저의 체크박스가 그대로 보인다 — 폴백이지 기본이 아니다. */
.t2-toggle:not([data-t2-toggle-ready="true"]) > .t2-toggle-input {
  position: static;
  width: auto; height: auto;
  margin: 0;
  clip-path: none;
  pointer-events: auto;
}
}