/* muzig.ai — 접근성·모바일 보정 (2026-09-23)
 *
 * QA 로 실측한 것만 고친다. 컴포넌트는 건드리지 않고 전역 한 장으로 덮는다.
 * 지우려면 index.html 에서 이 파일 한 줄만 빼면 원래대로 돌아간다.
 *
 * 주의: 여기 있는 값은 "재서 나온 수치"에 대응한다. 눈으로 보고 넣은 값은 없다.
 */

/* ── 1. 모바일 뷰포트 높이 ──────────────────────────────────────
   100vh 는 모바일 주소창이 접히기 전 높이다. 주소창이 보이는 동안에는
   화면보다 커서 아래가 잘린다. dvh 는 지금 실제로 보이는 높이다.
   측정: 화면마다 6~10곳에서 100vh 를 쓰고 있었다.
   개별 규칙을 못 고치므로, 흔히 쓰이는 컨테이너에만 안전하게 덮는다. */
@supports (height: 100dvh) {
  @media (max-width: 860px) {
    html, body { min-height: 100dvh; }
    .layout, main.content, #root > div { min-height: auto; }
  }
}

/* ── 2. 터치 영역 ──────────────────────────────────────────────
   기준은 WCAG 2.5.8(AA) 의 24×24 다. 44px 은 애플 권고지 표준이 아니고,
   조밀한 목록에 44px 을 강요하면 화면이 통째로 달라진다 — 그건 수정이 아니라 재설계다.
   그래서 실측해서 24px 에 못 미치는 것만 24px 로 올린다.

   측정값(모바일 390px, 2026-09-23):
     · 효과음 이름 링크   221×18  (한 화면에 20개)
     · "더보기" 링크       33×15 · 37×17
     · 푸터 약관 링크      44×15
     · 효과음 검색 입력   277×20
   하트(30×30)·필터(34×26)·페이지 번호(27×27)는 이미 기준을 넘어 건드리지 않는다.

   선택자는 CSS 모듈 해시(_nameLink_1ybau_391)를 피해 가운데 이름만 본다 —
   빌드할 때마다 앞뒤 해시가 바뀌기 때문이다. */
@media (pointer: coarse), (max-width: 860px) {
  [class*="_nameLink_"],
  [class*="_link_"],
  [class*="_nav_"] > a {
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
    box-sizing: content-box;
  }
  [class*="_searchBox_"] input {
    min-height: 24px;
  }
}

/* ── 3. 키보드 초점 ────────────────────────────────────────────
   초점 표시가 없으면 키보드만 쓰는 사람은 지금 어디인지 알 수 없다.
   마우스 사용자에게는 보이지 않는 :focus-visible 만 쓴다. */
:where(a, button, input, select, textarea, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 3px solid #ff6b81;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 4. 건너뛰기 링크 ──────────────────────────────────────────
   내비게이션이 길어서 키보드로 본문에 닿으려면 20번 넘게 탭해야 한다.
   평소에는 화면 밖에 있다가 탭하면 나타난다. */
.mz-skip {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 100000;
  transform: translateY(-120%);
  transition: transform .18s cubic-bezier(.32, .72, 0, 1);
  background: #14141a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.mz-skip:focus { transform: translateY(0); }

/* ── 5. 움직임 최소화 요청 존중 ────────────────────────────────
   전정기관이 예민한 사람에게 큰 움직임은 멀미를 일으킨다.
   운영체제에서 꺼둔 사람에게는 애니메이션을 사실상 없앤다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 6. 인쇄 ───────────────────────────────────────────────────
   약관·개인정보처리방침을 인쇄하는 사람이 있다.
   내비게이션과 재생기는 종이에 필요 없다. */
@media print {
  nav, header, footer,
  [class*="_player"], [class*="_sidebar"], .mz-skip { display: none !important; }
  main, .content, .layout { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
}

/* ── 7. 너무 작은 글씨 ─────────────────────────────────────────
   실측: /pricing 의 요금제 설명·구매 버튼·배지가 10px, 정책 버전 11px,
   /info 탭 버튼 11.2px, /sfx 라이선스 표기 11.2px.
   10px 은 한글에서 특히 읽기 어렵고, 그중 하나는 "구매하기" 버튼이다.
   본문 최소 12px 을 바닥으로 잡는다 — 레이아웃이 밀리지 않도록 해당 자리만 짚는다. */
/* 특이도가 같으면(둘 다 0,1,0) 나중에 실리는 컴포넌트 CSS 가 이긴다.
   실제로 처음 규칙이 통째로 밀렸다 — 덮어쓰기용 팩이므로 !important 를 쓴다. */
[class*="_purchaseButton_"],
[class*="_tabButton_"],
[class*="_catalogVersion_"],
[class*="_badge_"],
[class*="_description_"],
[class*="_subtitle_"],
[class*="_tag_"],
[class*="_category_"],
[class*="_pageNumber_"] {
  font-size: max(12px, 1em) !important;
}

/* /weather 의 라디오 다이얼 라벨(ON AIR · TUNE · FM 대역)은 일부러 뺐다.
   의도적으로 양식화한 계기판 눈금이고, 키우면 다이얼 배치가 깨진다. */

/* ── 8. 힌트 문구 대비 ──────────────────────────────────────────
   /create 의 "처음이라면 빠른 생성으로 시작해 보세요."
   측정 4.02:1 (12.5px, 기준 4.5) — 코랄 계열을 유지한 채 명도만 낮춘다.
   #c2545e → #b04552 : 같은 배경(#fff0f1)에서 5.02:1 */
[class*="_example_"] {
  color: #b04552;
}