/* ==========================================================================
   fig.css — 그림 확대 따라가기 .tx-fig (B2 · DESIGN 4-10 · H10 · H27)
   - 기본 = 확대 틀(≥1024 380 · md 320 · sm 260) · 「전체 보기」 = crop 안 전체
   - 강조 상자 2.5px --accent · 모서리 6 · 채움 0 · 번호 배지 · 사실 줄 · 캡션 0
   - 토글은 틀 왼쪽 아래(런처 쪽 아님) · 다크 = 이미지 밝기 .86 · 틀 바탕 --surface-2
   ========================================================================== */
.tx-fig{ position:relative; display:block; margin:28px 0; padding:0; max-width:100%; }
.tx-fig__frame{
  position:relative; overflow:hidden; border-radius:14px;
  background:var(--surface-2); box-shadow:0 0 0 1px var(--line), var(--sh-1);
}
/* JS 전(첫 그림): crop 이 아직 안 걸린 원본이 보이지 않게 자리만 잡음(크레딧 띠 · 요금 숫자 노출 0 · CLS 최소) */
.tx-fig:not(.is-ready) .tx-fig__frame img{ display:block; width:100%; height:auto; visibility:hidden; }
.tx-fig:not(.is-ready)[data-rects]:not([data-rects="[]"]) .tx-fig__frame{ height:380px; }
.tx-fig:not(.is-ready) .tx-fig__rect,
.tx-fig:not(.is-ready) .tx-fig__toggle{ display:none; }
@media (max-width:1023.98px){ .tx-fig:not(.is-ready)[data-rects]:not([data-rects="[]"]) .tx-fig__frame{ height:320px; } }
@media (max-width:600.98px){ .tx-fig:not(.is-ready)[data-rects]:not([data-rects="[]"]) .tx-fig__frame{ height:260px; } }
.tx-fig.is-compact:not(.is-ready)[data-rects]:not([data-rects="[]"]) .tx-fig__frame{ height:300px; }

/* 카메라 무대 = crop 영역(배율 s) — 그림 · 강조 상자가 함께 움직임 */
.tx-fig__stage{ position:absolute; left:0; top:0; transform-origin:0 0; }
.tx-fig__stage img{ position:absolute; display:block; max-width:none; height:auto; visibility:visible; user-select:none; -webkit-user-drag:none; }
html[data-theme="dark"] .tx-fig img{ filter:brightness(.86); }

.tx-fig__rect{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  box-sizing:border-box; border:2.5px solid var(--accent); border-radius:var(--r-figrect, 6px);
  background:transparent; pointer-events:none;
}

.tx-fig__toggle{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; min-height:34px; margin:0; padding:0 13px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-1); font:inherit; font-size:13px; font-weight:650; line-height:1; cursor:pointer;
}
.tx-fig__toggle:hover{ box-shadow:var(--sh-2); }
.tx-fig__toggle:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tx-fig__toggle[hidden]{ display:none; }

/* 답 카드 안 작은 그림 — ≤600 숨김(4-7) */
.tx-fig.is-compact{ margin:4px 0 16px; }
@media (max-width:600.98px){ .tx-fig.is-compact{ display:none; } }

/* 한국 밖 나라 거름 — data-kr="false"(「한국 전용 아님」)는 B0 core.css 가 10/18 부터 숨기지 않음(`[data-kr]:not([data-kr="false"])`)
   → 그림 부품 쪽 되돌림 규칙은 걷음(display:block !important 가 다른 숨김까지 덮지 않게) */