/* =============================================================================
 * 돋보기 공용 모양(`ui_template_loupe.ts` · 계획서 218-1) — 화면에 하나 · fixed · 원 ·
 * 테두리 · 그림자 = 테마 토큰(밝음 · 어두움 같이) · 마우스를 안 막음 · 크기 · 배율은 TS 상수(220-1 지름 360)
 * ========================================================================== */

.ui-loupe {
  --loupe-border: var(--color-accent);
  --loupe-shadow: var(--shadow-lg);
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--z-toast) + 10);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow:
    0 0 0 2px var(--loupe-border),
    var(--loupe-shadow);
  pointer-events: none;
  will-change: transform;
}

.ui-loupe[hidden] {
  display: none;
}

/* 복제를 놓는 판 — 화면(뷰포트) 크기 · fixed 자식의 기준 상자 */
.ui-loupe__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  transform-origin: 0 0;
}

.ui-loupe__stage *,
.ui-loupe__stage *::before,
.ui-loupe__stage *::after {
  animation: none !important;
  transition: none !important;
}

.ui-loupe__page {
  position: absolute;
}

/* 배율 글(220-1) — 원 아래 가운데 · 작게 · 자리는 TS 가 transform 으로 */
.ui-loupe__zoom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--z-toast) + 10);
  padding: 0 6px;
  border-radius: 9px;
  background: var(--color-bg);
  color: var(--color-accent);
  font-size: 11px;
  line-height: 18px;
  box-shadow: 0 0 0 1px var(--color-accent);
  pointer-events: none;
  white-space: nowrap;
}

.ui-loupe__zoom[hidden] {
  display: none;
}

/* 가운데 십자 — 작게 */
.ui-loupe__cross::before,
.ui-loupe__cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--loupe-border);
}

.ui-loupe__cross::before {
  width: 12px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.ui-loupe__cross::after {
  width: 1px;
  height: 12px;
  transform: translate(-50%, -50%);
}