/* ═══════════════════════════════════════════════════════════════════════════
 * 터치·포인터 타겟 크기 — 모바일 진단 2026-07-30, A-1(푸터) · A-3(모바일 헤더)
 * ───────────────────────────────────────────────────────────────────────────
 * 기준: WCAG 2.2 SC 2.5.8 Target Size (Minimum) = 24×24 CSS px (AA). 이 기준은
 *   "포인터 입력" 전반이라 데스크톱 마우스에도 적용된다 = 전 폭 대상.
 *   Apple HIG · WCAG 2.5.5 (AAA) = 44×44 = 터치 권장선.
 *
 * 실측 근거 (2026-07-30, prod와 dev가 같은 값을 낸다):
 *   푸터 약관 «한샘글로벌 이용약관» 117.5×19 · «개인정보처리방침» 102×19
 *     — @390에서 세로로 쌓이며 **간격 5px** / @1920은 나란히, 높이는 19px 그대로.
 *   푸터 소셜 32×21 ×3.
 *   모바일 헤더 햄버거 20×24 · 언어 24×21 · 검색 24×25.7 (헤더 60px, 중심 y≈30).
 *
 * ⚠️ 정렬은 결함이 아니다. index.css:2833 `footer … .footer-term-menu ul
 *   {text-align:center}` 이고 두 링크 중심이 81.25로 **정확히 일치**한다. 진단 초안에
 *   "좌측 정렬 7px 어긋남"이라 적었던 것은 오독이었다(길이가 다른 두 줄을 가운데
 *   정렬하면 들여쓰기가 달라 보인다). **크기만** 고친다.
 *
 * 기법을 둘로 나눈 이유 = 겹침 위험. 히트 영역을 키우면 서로 덮어 오히려 못 누르게 된다.
 *   ① 푸터 = **실제 박스를 키운다.** 세로로 쌓인 항목이라 커지면 서로 밀어내
 *      5px 간격 문제까지 같이 풀린다. (오버레이로 하면 5px 간격에서 44px 영역이
 *      서로 덮어 위에 그려진 쪽만 눌린다.)
 *   ② 헤더 = **::after 오버레이로 히트 영역만 깐다.** 박스를 키우면 flex 행에서
 *      로고가 밀린다(로고 left=52 · 폭 283이 움직인다 = 시각 변화). 오버레이는
 *      레이아웃 영향이 0이고 헤더 높이·로고 위치가 그대로다.
 *
 * 헤더 폭은 매직값이 아니라 **인접 중심 간격에서 유도**한다:
 *   언어 중심 327 · 검색 중심 366 → pitch 39 → 각 38px(=39−1)이 미겹침 상한.
 *   햄버거는 오른쪽 이웃(로고 left=52)까지 여유가 있어 44px 가능(0~44).
 * 세로는 셋 다 44px — 헤더 60px에 중심 y≈30이라 8~52로 들어간다(넘치지 않음).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── A-1 푸터 약관 · 소셜 링크 ─────────────────────────────────────────────────
 * `a`를 직접 겨냥하는 기존 규칙은 없다(index.css는 ul·li·li a i·li img만 잡는다)
 * → 명시도 경쟁 없음. inline → inline-flex로 바꿔야 min-height가 먹는다(인라인
 *   요소는 높이를 받지 않는다). 글자 크기·색·정렬은 무접촉. */
footer .footer-term-menu ul li a,
footer .footer-social ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;              /* SC 2.5.8 (AA) — 전 폭 */
}

@media (max-width: 992px) {
  footer .footer-term-menu ul li a,
  footer .footer-social ul li a {
    min-height: 44px;            /* 터치 권장. 세로로 쌓이므로 서로 밀어낸다 */
  }
}

/* ── A-3 모바일 헤더 아이콘 (햄버거 · 언어 · 검색) ──────────────────────────────
 * 시각 아이콘(.hamburger-box 20×12 · svg 24 · img 24)은 **불변**이다.
 * 이 세 요소에 기존 ::before/::after는 없다(전수 확인) → 덮어쓸 위험 없음. */
.header-mobile .mobile-menu-toggle,
.header-mobile .btn-lang,
.header-mobile .mobile-header-icons .btn-icon {
  position: relative;
}

.header-mobile .mobile-menu-toggle::after,
.header-mobile .btn-lang::after,
.header-mobile .mobile-header-icons .btn-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 44px;
  width: 38px;                   /* 언어↔검색 pitch 39 − 1 = 두 영역 미겹침 상한 */
  z-index: 101;                  /* = `.site-branding`의 z-index 100 + 1. 아래 주석 참조 */
}

.header-mobile .mobile-menu-toggle::after {
  width: 44px;                   /* 왼쪽이 화면 끝(0)이라 0~44로 들어간다 */
}

/* ⚠️ z-index 101이 왜 필요한가 — `elementFromPoint` 히트 테스트가 찾아낸 실제 제약.
 * 처음 계획("햄버거는 로고까지 여유가 있다")은 **틀렸다.** 실측 좌표:
 *   햄버거 12~32 / **`.site-branding` 32~315** = 오른쪽 여유 **0px**
 *   언어 315~339 / `a.logo` 52~**315** = 왼쪽 여유 **0px**
 * ⇒ 대칭 확장으로는 44px를 만들 수 없다. 실제로 히트 테스트가 햄버거 오른쪽 끝(x=43)에서
 *   `div.site-branding`, 언어 왼쪽 끝(x=309)에서 `a.logo`를 잡아 FAIL을 냈다.
 * 🔑 그 다음 z-index:1로 올렸는데 **여전히 실패**했다. 이유 = **`.site-branding`이
 *   `position:relative; z-index:100`** 이다(실측). 오버레이의 부모(`.mobile-menu-toggle`,
 *   z-index auto)는 쌓임 문맥을 만들지 않아 오버레이가 `header.site-header`(z=500) 문맥
 *   안에서 site-branding의 100과 직접 경쟁한다 → 1은 진다. **100 + 1 = 101**이 최소값.
 *   (추측으로 1을 넣었다가 한 번 헛돌았다 — 이웃의 z-index를 먼저 재라.)
 * 빼앗는 영역과 그 대가:
 *   ① 햄버거 32~44 = `.site-branding` div 안이지만 **`a.logo`(52~315) 밖** = 링크 손실 **0**
 *      (그 구간은 지금도 아무 동작이 없는 div 패딩이다 — 스캔으로 확인)
 *   ② 언어 308~315 = 로고 링크 263px 중 **7px**(맨 오른쪽 끝)
 *   둘 다 무해하고, 그 대가로 세 컨트롤이 44px 높이 히트 영역을 얻는다.
 * 오버레이는 배경이 없어 z-index를 올려도 **화면은 한 픽셀도 변하지 않는다** — 검증기가
 *   로고 위치·폭(32/283), 헤더 높이(60), 아이콘 실크기(20×12·24·24)를 대조군으로 단언한다. */