@layer t2.module {
/* Path: T2Editor/js/utils/modal.css */
:root {
  /* 모달의 각은 표면 단계다. 예전에는 여기서 4px 을 다시 적어 토큰과 갈라져
     있었고, 사다리를 고쳐도 모달만 각진 채로 남았다. */
  --t2-modal-radius: var(--t2-radius-modal, 12px);
  --t2-modal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t2-modal-shadow:
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 8px 24px -8px rgba(15, 23, 42, 0.16),
    0 24px 64px -12px rgba(15, 35, 60, 0.22);
}

body.t2-modal-open {
  overscroll-behavior: contain;
}

.t2-plugin-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--t2-s4);
  /* 해설 708 F-2: 하단에 고정된 개인정보 고지 바가 떠 있는 동안, 작업 레이어는
     그 띠만큼 자리를 확보해 실행·취소가 계속 도달 가능하게 한다. 높이는 고지
     바가 소유하는 변수 하나에서만 온다(708 G-4). */
  padding-bottom: calc(var(--t2-s4) + var(--t2-privacy-notice-inset, 0px));
  overflow: auto;
  opacity: 1;
  transition: none;
}

.t2-plugin-modal-overlay *,
.t2-plugin-modal-overlay *::before,
.t2-plugin-modal-overlay *::after {
  box-sizing: border-box;
}

.t2-plugin-modal-overlay[data-t2-modal-suspended="true"] {
  display: none !important;
}

.t2-modal-surface {
  position: static;
  margin: auto;
  outline: 0;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: none;
}

/* 710 D-1·D-2: 최대 13u : 6u, 뷰포트와의 마진 1/2u, 프레임 인셋 1/2u.
   상한이 15u 에서 13u 로 내려간 것은 UI 스펙 03 의 6대 규격 중 최대가 13:6 이기
   때문이다. 15u 는 편집기 셸의 폭이지 그 안에 뜨는 표면의 폭이 아니었다 —
   같은 값을 쓰면 모달이 셸과 같은 크기로 서서 "떠 있는 것"으로 읽히지 않는다.
   가로 스크롤은 만들지 않고 세로만 컨테이너가 소유한다(710 E-7). */
.t2-modal-surface-default {
  --t2-modal-grid-cap: calc(var(--t2-u) * 6);
  width: fit-content;
  min-width: min(calc(var(--t2-u) * 5), calc(100vw - var(--t2-u)));
  max-width: min(calc(var(--t2-u) * 13), calc(100vw - var(--t2-u)));
  max-height: min(calc(var(--t2-u) * 6),
                  calc(100dvh - var(--t2-u) - var(--t2-privacy-notice-inset, 0px)));
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--t2-line);
  border-radius: var(--t2-modal-radius);
  padding: var(--t2-u2);
  color: var(--t2-ink);
  background: var(--t2-floating, #FFFFFF);
  box-shadow: var(--t2-shadow-modal, var(--t2-modal-shadow));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── 6대 공식 비례 (UI 스펙 03) — 규격표 ──────────────────────────────
   여기서는 규격마다 --t2-modal-w/h 만 심는다. 그 값을 실제 width/height 로
   읽는 규칙은 t2-visual-system.css(t2.product)에 있다 — 표준 작업면의 치수를
   그 규칙이 이미 소유하고 있어서, 모듈 레이어에 최종 기하를 적으면 레이어
   순서에 져서 닿지 않는다. 커스텀 속성은 레이어와 무관하게 상속되므로 표는
   모달 원형 곁에 남는다. */
.t2-modal-surface-default[data-t2-modal-ratio="13:6"] { --t2-modal-w: calc(var(--t2-u) * 13); --t2-modal-h: calc(var(--t2-u) * 6); --t2-modal-grid-cap: calc(var(--t2-u) * 6); }
.t2-modal-surface-default[data-t2-modal-ratio="7:6"]  { --t2-modal-w: calc(var(--t2-u) * 7);  --t2-modal-h: calc(var(--t2-u) * 6); --t2-modal-grid-cap: calc(var(--t2-u) * 6); }
.t2-modal-surface-default[data-t2-modal-ratio="5:6"]  { --t2-modal-w: calc(var(--t2-u) * 5);  --t2-modal-h: calc(var(--t2-u) * 6); --t2-modal-grid-cap: calc(var(--t2-u) * 6); }
.t2-modal-surface-default[data-t2-modal-ratio="13:4"] { --t2-modal-w: calc(var(--t2-u) * 13); --t2-modal-h: calc(var(--t2-u) * 4); --t2-modal-grid-cap: calc(var(--t2-u) * 4); }
.t2-modal-surface-default[data-t2-modal-ratio="7:4"]  { --t2-modal-w: calc(var(--t2-u) * 7);  --t2-modal-h: calc(var(--t2-u) * 4); --t2-modal-grid-cap: calc(var(--t2-u) * 4); }
.t2-modal-surface-default[data-t2-modal-ratio="5:4"]  { --t2-modal-w: calc(var(--t2-u) * 5);  --t2-modal-h: calc(var(--t2-u) * 4); --t2-modal-grid-cap: calc(var(--t2-u) * 4); }

/* 모달 컨테이너 밖 우측 상단 닫기 — 면도 테두리도 없는 ✕ 하나(UI 스펙 03·09).
   백드롭 클릭과 Esc 는 보이지 않는 출구다. 눈에 보이는 출구가 하나는 있어야
   한다.

   버튼은 표면이 아니라 오버레이의 자식이다. 표면 안에 두면 표면의 세로 스크롤이
   위로 나간 절반을 잘라낸다 — 하단 바의 언어 메뉴가 정확히 그 이유로 잘려
   있었다. 그래서 오버레이가 이 버튼을 가진 동안에만 격자로 바뀌어, 한 칸 위
   행에 버튼을 두고 오른쪽 끝에 맞춘다. 칸 너비는 표면이 정하므로 버튼은 언제나
   표면의 오른쪽 모서리에 선다. */
.t2-plugin-modal-overlay:has(> .t2-outside-modal-close) {
  display: grid;
  grid-template: auto / auto;
  align-content: center;
  justify-content: center;
}
/* 버튼과 표면은 같은 칸에 겹쳐 놓는다. 칸을 따로 주면 버튼의 높이만큼 표면이
   아래로 밀려, 격자가 정한 세로 위치가 어긋난다 — 재 보면 1/8u 위여야 할
   중심이 3/16u 아래로 갔다. 겹쳐 두면 칸의 크기는 표면이 정하고, 버튼은 자기
   높이만큼 위로 옮겨 표면 바깥에 선다. 칸 너비도 표면이 정하므로 오른쪽 끝이
   언제나 표면의 오른쪽 모서리다. */
.t2-plugin-modal-overlay:has(> .t2-outside-modal-close) > .t2-modal-surface { grid-area: 1 / 1; }
.t2-outside-modal-close {
  grid-area: 1 / 1;
  align-self: start;
  translate: 0 calc(-100% - var(--t2-u8));
  justify-self: end;
  min-width: var(--t2-hit);
  min-height: var(--t2-u2);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t2-motion-fast);
}
/* 708 H-3: 보이는 글리프는 그대로 두고 coarse 에서 상자만 44px 로 넓힌다.
   1/2u 는 좁은 화면에서 32.5px 까지 내려가 손가락 표적으로 모자란다. */
@media (pointer: coarse) {
  .t2-outside-modal-close { min-height: var(--t2-hit); }
}
.t2-outside-modal-close:focus-visible { outline: 1px solid var(--t2-focus-outline); outline-offset: 2px; }
/* 격자에서는 auto 마진이 칸 안에서 가운데로 밀어 버려 정렬 선언과 싸운다. */
.t2-plugin-modal-overlay:has(> .t2-outside-modal-close) > .t2-modal-surface { margin: 0; }

.t2-modal-surface-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

.t2-modal-surface-default > :first-child {
  margin-top: 0;
}

.t2-modal-surface-default > :last-child {
  margin-bottom: 0;
}

/* ── 실행 행 하단 고정 (issue #79) ─────────────────────────────────────
   내용이 규격보다 커서 안쪽 스크롤이 생겼을 때, 모달 원형이 선언된 마지막
   실행 행(.t2-btn-group · .t2-modal-actions · [data-modal-actions])에 붙이는
   표시다. 답을 요구하는 모달의 버튼이 스크롤 아래로 사라지면 여전히 결함이므로
   위치 소유권만 원형이 가져오고, 재질·배열은 기능이 그대로 갖는다(708 G-4).
   제품층의 푸터 밴드가 이 행을 이미 데리고 있다면 그쪽이 그대로 이긴다. */
.t2-modal-surface-default > .t2-modal-pinned-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.t2-modal-sheet-handle {
  display: none;
}
.t2-modal-sheet-handle > span { display: block; }

/* ── 다시 보지 않기 · 자동 타이머 닫기 ─────────────────────────────────
   선언한 모달만 이 두 표현을 갖는다. 억제 조작은 실행이 아니라 사용자의 결정
   이므로 실행 줄과 같은 무게를 갖지 않는다(해설 709 A). */
.t2-modal-dismiss-row {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--t2-u2);
}

.t2-modal-dismiss-btn {
  min-height: var(--t2-hit);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t2-ink-muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.t2-modal-dismiss-btn:hover { color: var(--t2-ink); }

/* 남은 시간은 정보다. 스스로 닫히는 표면은 그 사실을 말해야 한다(해설 706 제6항).
   상호작용이 타이머를 버리면 JS 가 속성을 지우고 레일도 함께 사라진다.
   position 은 이 속성이 붙은 표면에만 준다 — 모든 모달을 위치 기준으로 만들면
   플러그인이 오버레이 기준으로 앉혀 둔 요소들이 함께 움직인다. */
.t2-modal-surface[data-t2-modal-auto-close] { position: relative; }
.t2-modal-surface[data-t2-modal-auto-close]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  transform-origin: left center;
  background: var(--t2-ink-faint);
  animation: t2-modal-auto-close var(--t2-modal-auto-close-duration, 9000ms) linear forwards;
}

@keyframes t2-modal-auto-close { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  /* 남은 시간은 정보이므로 없애지 않는다. 연속 애니메이션만 단계로 바꾼다. */
  .t2-modal-surface[data-t2-modal-auto-close]::after { animation-timing-function: steps(6, end); }
}

.t2-modal-closing {
  pointer-events: none;
}

.t2-modal-closing.t2-modal-close-active {
  opacity: 0;
}

.t2-modal-close-active .t2-modal-surface-basic,
.t2-modal-close-active .t2-modal-surface-adaptive {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
}

.t2-modal-sheet-dragging {
  transition: none;
}

.t2-modal-sheet-snapback {
  transition: transform 0.2s var(--t2-modal-ease);
}

html[data-t2editor-theme="dark"] .t2-plugin-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

html[data-t2editor-theme="dark"] .t2-modal-surface-default {
  color: var(--t2-ink);
  background: var(--t2-floating);
  border-color: var(--t2-line);
  box-shadow: var(--t2-shadow-modal, 0 18px 46px rgba(0,0,0,.48));
}

@media (max-width: 760px) {
  .t2-modal-overlay-adaptive {
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
  }

  /* 710 E-2·E-3·E-4 + UI 스펙 04: 바텀시트는 화면 아래 끝에서 시작한다 — 아래에
     여백을 두면 아래에서 올라온 표면이 아니라 떠 있는 상자가 된다.

     세로는 가로에서 나온 u 를 쓰지 않는다. 스펙이 적은 "화면 높이의 80%, 세로
     8유닛" 은 세로 단위를 세로에서 역산하라는 뜻이고(1uv = 화면높이/10), 그래야
     6:10 이 아닌 실제 단말에서도 시트가 화면의 8/10 을 차지한다. 가로에서 뽑은
     u 로 8u 를 쓰면 390x780 단말에서 66.7% 가 되어 스펙과 13%p 어긋난다.
     드래그 확장 상한은 9uv = 90% 다.

     가로는 92% 로 잠근다(스펙의 클램프). 6u 가 곧 화면 폭이므로 "6~10u 유동
     확장" 의 결과는 어느 폭에서나 클램프 값이다 — 두 규칙이 만나는 지점을
     그대로 적는다. */
  .t2-modal-surface-adaptive {
    --t2-uv: calc(100dvh / 10);
    --t2-modal-grid-cap: calc(var(--t2-uv) * 9);
    position: relative;
    inset: auto;
    width: 92vw;
    min-width: 0;
    max-width: min(92vw, calc(var(--t2-u) * 10));
    height: calc(var(--t2-uv) * 8);
    max-height: calc(100dvh - var(--t2-uv) - var(--t2-privacy-notice-inset, 0px));
    margin: 0 auto;
    /* 아래 두 모서리는 화면 끝에 닿으므로 둥글리지 않는다. */
    border-radius: var(--t2-radius-sheet) var(--t2-radius-sheet) 0 0;
    border-bottom: 0;
    transform-origin: bottom center;
  }

  /* 베이직 — 폭 5u(좌우 마진 1/2u), 세로 중앙. UI 스펙 05 의 3단계 높이를 그대로
     쓴다: 헤더 1u + 본문 3.5/4.5/5.5u + 푸터 1u = 5.5 / 6.5 / 7.5u.
     헤더와 푸터는 이 원형이 그린다 — 타이틀 행과 실행 행은 어느 모달에나 있고,
     밴드로 그리지 않으면 본문이 스크롤될 때 함께 밀려 올라간다. 뷰포트가 그보다
     낮으면 max-height 가 잘라 주므로 화면 밖으로 나가지 않는다. */
  .t2-modal-surface-basic {
    --t2-modal-grid-cap: calc(var(--t2-u) * 7.5);
    width: calc(var(--t2-u) * 5);
    min-width: 0;
    max-width: calc(100vw - var(--t2-u));
    height: calc(var(--t2-u) * 5.5);
    max-height: min(calc(var(--t2-u) * 7.5),
                    calc(100dvh - var(--t2-u) - var(--t2-privacy-notice-inset, 0px)));
  }
  .t2-modal-surface-basic[data-t2-modal-level="1"] { height: calc(var(--t2-u) * 6.5); }
  .t2-modal-surface-basic[data-t2-modal-level="2"] { height: calc(var(--t2-u) * 7.5); }

  .t2-modal-surface-adaptive.t2-modal-surface-default,
  .t2-modal-surface-basic.t2-modal-surface-default {
    padding: var(--t2-u2);
  }
  .t2-modal-surface-adaptive.t2-modal-surface-default {
    padding-bottom: calc(var(--t2-u2) + env(safe-area-inset-bottom, 0px));
  }

  /* 시트의 크롬은 시트의 단위(세로 단위)에서 나온다. 가로에서 뽑은 u 로 적으면
     세로로 긴 화면에서 손잡이만 납작해진다 — 시트 자신이 세로 비례이므로 그 안의
     띠도 같은 단위여야 한다. 손잡이 영역 0.8uv, 손잡이 폭 1uv (스펙 04).
     프레임 인셋 밖으로 되돌려 시트 폭 전체를 끌 수 있게 한다. */
  .t2-modal-surface-adaptive .t2-modal-sheet-handle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: calc(var(--t2-uv) * 0.8);
    margin: calc(var(--t2-u2) * -1) calc(var(--t2-u2) * -1) 0;
    padding: 0;
    cursor: grab;
    touch-action: none;
  }

  .t2-modal-surface-adaptive .t2-modal-sheet-handle > span {
    width: var(--t2-uv);
    height: 4px;
    border-radius: 999px;
    background: var(--t2-line-strong);
  }

  /* 시트의 타이틀 행 기하는 t2-visual-system.css(t2.product)가 소유한다 —
     표준 작업면의 타이틀 밴드를 그 규칙이 이미 정하고 있어, 여기에 적으면
     레이어 순서에 져서 닿지 않는다(모듈에만 적었다가 실제로 그렇게 됐다). */

  .t2-modal-close-active .t2-modal-surface-adaptive {
    opacity: 1;
    transform: translateY(110%);
  }

  /* 바텀시트에는 바깥 닫기를 두지 않는다 — 손잡이가 이미 눈에 보이는 출구이고,
     화면 아래 끝에 붙는 표면 위에 ✕ 를 띄우면 시트가 "떠 있는 상자" 로 읽힌다.
     버튼이 없으므로 오버레이도 격자로 바뀌지 않아야 한다. */
  .t2-modal-overlay-adaptive > .t2-outside-modal-close { display: none; }
  .t2-modal-overlay-adaptive:has(> .t2-outside-modal-close) {
    display: flex;
    align-content: normal;
    row-gap: 0;
  }
}

/* 좁은 화면에서도 관계는 그대로다 — 격자가 폭에 비례하므로 별도의 축약 값을
   만들지 않는다(708 H-1, 710 A-4). */

@media (max-height: 480px) {
  .t2-modal-surface-default:not(.t2-modal-surface-fullscreen) {
    max-height: min(var(--t2-modal-grid-cap), calc(100dvh - var(--t2-u2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t2-plugin-modal-overlay,
  .t2-modal-surface,
  .t2-modal-sheet-snapback {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .t2-modal-surface-default {
    border: 1px solid currentColor;
  }
}

@media print {
  .t2-plugin-modal-overlay,
  [data-t2-modal-companion] {
    display: none !important;
  }
}

/* T2Editor visual law — common modal primitive is normalized at source above. */
@media(max-width:760px),(pointer:coarse){
  /* 710 E-3: 시트는 화면 아래 끝에서 시작한다. 안전 영역은 시트가 자기 인셋으로
     흡수하므로 오버레이가 아래를 밀지 않는다. 아래에 고정된 고지 바가 실제로
     자리를 차지할 때만 그만큼 비운다(708 F-2). */
  .t2-modal-overlay-adaptive{padding-top:max(8px,env(safe-area-inset-top));padding-right:env(safe-area-inset-right);padding-bottom:var(--t2-privacy-notice-inset, 0px);padding-left:env(safe-area-inset-left)}
  .t2-modal-surface-default:not(.t2-modal-surface-fullscreen){max-height:min(var(--t2-modal-grid-cap),calc(var(--t2-modal-vv-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--t2-privacy-notice-inset, 0px) - var(--t2-u2)))}
  .t2-modal-surface-adaptive .t2-modal-sheet-handle>span{width:var(--t2-uv, var(--t2-u));height:4px;background:var(--t2-line-strong)}
}

/* T2Editor /law 706 — modal scroll ownership */
.t2-plugin-modal-overlay {
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t2-modal-surface-default {
  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-plugin-modal-overlay::-webkit-scrollbar,
.t2-modal-surface-default::-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;
}

}