/* WEB-VULN-SIM — 공통 플랫폼 토큰 (G05)
 *
 * 왜 필요한가:
 * 고정·스티키 UI 가 모듈마다 따로 자라면서 z-index 가 제각각이 됐다.
 *   탑바 9000 · 검색 팔레트 99999 · 언어바 100000 · 설치 배너 9999
 *   진도 칩 2147483000  ← 모달보다 위라서 검색창을 열어도 칩이 그 위에 떠 클릭까지 됐다.
 * 숫자를 키우는 경쟁 대신 "층"을 정의하고 모든 모듈이 같은 층을 쓰게 한다.
 *
 * 로드 방식: js/soc-chrome.js 가 부팅 시 <link> 로 주입한다(페이지 515개를 고치지 않기 위해).
 * 각 모듈은 var(--wvs-z-*, 폴백) 형태로 써서 이 파일이 없어도 동작하게 한다.
 */
:root {
  /* ── 레이어 ──
     아래로 갈수록 위에 그려진다. 모달이 열리면 떠 있는 보조 컨트롤은 반드시 그 아래여야 한다. */
  --wvs-z-sticky: 100;   /* 상단 탑바 (스크롤 시 고정) */
  --wvs-z-float:  300;   /* 언어바, 진도 칩 — 본문 위에 떠 있는 보조 컨트롤 */
  --wvs-z-banner: 500;   /* 설치·업데이트 알림 */
  --wvs-z-modal:  900;   /* 검색 팔레트 등 화면을 덮는 대화상자 */
  --wvs-z-toast: 1000;   /* 모달 위에도 보여야 하는 짧은 안내 */

  /* ── 간격 (4px 단위) ── */
  --wvs-sp-1: 4px;
  --wvs-sp-2: 8px;
  --wvs-sp-3: 12px;
  --wvs-sp-4: 16px;
  --wvs-sp-6: 24px;

  /* ── 화면 가장자리에 붙는 고정 UI 의 기준 여백 ──
     좁은 화면에서 서로 겹치지 않도록 같은 값을 공유한다. */
  --wvs-edge: 14px;

  /* ── 포커스 링 ── 키보드 사용자가 어디 있는지 항상 보이게 한다. */
  --wvs-focus: #38bdf8;
}

/* 키보드 포커스가 고정 UI 뒤로 숨지 않도록 스크롤 여유를 준다.
   (탑바 높이 42px + 여유) */
html {
  scroll-padding-top: 56px;
  scroll-padding-bottom: 72px;
}

/* 마우스 클릭에는 링을 띄우지 않고 키보드 탐색에만 표시한다. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wvs-focus);
  outline-offset: 2px;
}

/* 화면에는 안 보이지만 스크린리더는 읽는 텍스트 */
.wvs-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 모달이 열려 있는 동안 떠 있는 보조 컨트롤을 숨긴다.
   z-index 만으로는 좁은 화면에서 모달 밖 영역에 계속 보이기 때문에 아예 감춘다. */
/* 두 요소 모두 JS 가 inline cssText 로 스타일을 통째로 넣기 때문에
   일반 선언으로는 확실히 이기지 못한다. 감추는 것은 접근성·오조작 방지에 직결되므로
   여기서는 !important 로 못박는다. */
body.wvs-modal-open .wvs-langbar,
body.wvs-modal-open #wvs-progress-chip {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wvs-langbar { transition: none !important; }
}

/* ── 좁은 화면 가로 넘침 방지 ──
   허브 본문(main.soc-main)은 flex 아이템인데, flex 아이템의 기본값 min-width:auto 는
   "콘텐츠 내재 폭보다 작아지지 않기"라서 320px 화면에서 본문이 925px 로 버티며 넘쳤다.
   min-width:0 을 주면 컨테이너 폭에 맞춰 줄어든다. */
.soc-main, main.soc-main {
  min-width: 0;
  max-width: 100%;
}

/* 긴 URL·코드 토큰이 줄바꿈되지 않아 넘치는 경우도 함께 막는다. */
.soc-main :where(p, li, td, h1, h2, h3) {
  overflow-wrap: anywhere;
}

/* ── 모바일 스마트폰 특화 최적화 (Thumb Zone, iOS 16px 줌 방지, Safe Area) ── */
:root {
  --wvs-safe-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  --wvs-bottom-nav-h: 56px;
}

@media (max-width: 640px) {
  /* iOS Safari 16px 미만 input 터치 시 화면 강제 자동확대(Auto-zoom) 방지 */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 더블탭 줌 딜레이 제거 및 터치 반응성 향상 */
  button, a, input, select, textarea {
    touch-action: manipulation;
  }

  /* 하단 고정 탭바 고려 스크롤 여유 */
  html {
    scroll-padding-bottom: calc(var(--wvs-bottom-nav-h) + var(--wvs-safe-bottom) + 16px);
  }

  /* 플로팅 요소(완료 칩, 설치 배너, 언어바)를 하단 탭바 위로 안전하게 이동 */
  #wvs-progress-chip {
    bottom: calc(var(--wvs-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  #wvs-install {
    bottom: calc(var(--wvs-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  /* 우상단 고정 언어 바는 폰에서 본문 제목을 덮는다. 숨기는 대신 전환 수단은
     하단 탭바의 🌐 버튼으로 옮겼다(soc-chrome.js). 수단 자체를 없애면 안 된다. */
  .wvs-langbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 하단 탭바가 본문 마지막 줄·마지막 버튼을 덮지 않도록 여백을 준다.
     탭바를 실제로 그린 페이지에만 적용되도록 soc-chrome.js 가 붙이는
     html.wvs-has-bnav 로 한정한다(탭바 없는 페이지에 빈 여백이 생기면 안 된다). */
  html.wvs-has-bnav body {
    padding-bottom: calc(var(--wvs-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
  }
}