/* 슈퍼코어에서 옮겨 온 부품 — 원본: my-projects/슈퍼코어/packages/ui/src/touch-44/touch-44.css (판 1.3 · 커밋 d7b2a92fb · 11-03 받음 · 쪽지 49n9ov). 고칠 때는 원본을 먼저 고친다(두 벌이 되면 하나가 낡는다) */
/* touch-44 — 손가락으로 누르는 화면에서 누를 수 있는 것은 전부 44×44 이상 (지시서 ④ S5 · WCAG 2.5.5 · §2-ACC)
 * 출처: 1등 원본(전 화면 44px 미만 0개) — 앱·경로·커밋은 README 출처 표
 *
 * · 터치 화면(pointer: coarse)에서만 — 마우스 화면의 빽빽한 표·도구줄은 그대로 둔다
 * · 링크는 **세로만** 넓힌다 — 가로로 늘리면 옆 링크와 눌리는 범위가 겹친다
 * · 문장 안 낱말 링크는 뺀다 — 문단 속 링크를 44px 로 키우면 줄 간격이 깨진다
 * · 일부러 작게 둘 것은 data-allow-small (다른 원본에서 가져온 탈출구 — 쓰면 검사기가 그 자리를 알린다)
 * · :where() 로 감싸 **힘(특이도)을 0** 으로 — 앱이 따로 준 크기가 늘 이긴다(이 파일이 앱을 덮지 않는다)
 *
 * 1.2 (2026-10-23) — `:not([data-allow-small])` 이 :where **밖**에 있어 힘이 0 이 아니라 (0,1,0) 이었다.
 *   그래서 힘 0 인 「문장 안 링크는 뺀다」 예외가 한 번도 못 이겼고(진열장 비밀번호 화면 안내문 줄이 44칸으로 벌어짐 · 폰 실기계),
 *   앱의 class 하나짜리 크기도 이 파일보다 앞에 오면 덮였다. → :not 을 :where 안으로 옮겨 세 규칙 모두 힘 0.
 */
@media (pointer: coarse) {
  :where(button:not([disabled]), [role="button"], [role="tab"], [role="radio"], [role="checkbox"],
         input[type="submit"], input[type="button"], input[type="reset"], select, label[for]):where(:not([data-allow-small])) {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }
  :where(a[href]:not([data-allow-small])) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  /* 문장 안 링크·숨긴 링크는 원래대로 — 위 규칙과 힘이 같으므로(0) **뒤에 있어서** 이긴다. 이 순서를 바꾸지 않는다 */
  :where(p, li, td, dd, blockquote, figcaption, label, small, strong, em) :where(a[href]),
  :where(a[href][aria-hidden="true"]) {
    min-height: 0;
    display: inline;
  }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([data-allow-small]), textarea:not([data-allow-small])) {
    min-height: 44px;
  }

  /* 1.3 — 영역만 넓히기: 그 단추·링크나 바깥 상자에 data-touch="area" 면 **보이는 크기는 그대로**, 손가락이 닿는 자리만 44×44.
   *   반응 단추가 촘촘한 줄을 키우면 글 카드가 세로로 벌어져 목록 리듬이 깨졌다(받는 앱이 가상 요소 방식으로 정함 · 쪽지 4u0txj).
   *   위 규칙들과 힘이 같으므로(0) **뒤에 있어서** 이긴다 — 이 순서를 바꾸지 않는다.
   *   ⚠️ 그 요소의 ::after 를 쓴다 — 앱이 같은 요소에 ::after 를 이미 쓰면 앱 것이 이긴다(그 자리는 data-touch 를 쓰지 않는다). */
  :where([data-touch="area"], [data-touch="area"] *):where(button, [role="button"], [role="tab"], [role="radio"], [role="checkbox"], a[href], label[for]) {
    min-height: 0;
    min-width: 0;
    display: revert;
    position: relative;
  }
  :where([data-touch="area"], [data-touch="area"] *):where(button, [role="button"], [role="tab"], [role="radio"], [role="checkbox"], a[href], label[for])::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}