/* 포커스 표시 — 전 표면 단일 규약 (8/6 신설).

   왜 이 파일이 따로 있나: 8/6 헤드리스 실측에서 관리 콘솔의 포커스 가능 요소가
   **11개 중 11개 전부** `outline:none` + `box-shadow:none` 이었다. 키보드(Tab)로 이동하면
   지금 어디에 있는지 화면이 아무 말도 하지 않는다 — 마우스를 못 쓰는 사람에게는 화면이
   통째로 닫힌 것과 같다. 구멍은 벤더 템플릿(assets/template/css/style.css)과 방문객
   shared.css **양쪽**에 있었다. 표면마다 각자 고치면 또 갈라지므로(8/5 `.desk` vs
   `.deskwrap` 오타가 CSS 는 오류를 내지 않아 반응형이 조용히 죽었던 것과 같은 계열)
   한 파일로 모아 모든 표면이 이것만 링크한다. 역할 디렉터리 밖에 두는 이유도 같다.

   :focus-visible 이므로 **마우스 클릭에는 링이 뜨지 않는다** — 키보드·보조기기로 이동할
   때만 보인다. 디자인을 해치지 않으면서 경로를 되돌려준다. */

:focus-visible {
  outline: 2px solid var(--rec-primary, #0096FF);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 체크박스·스위치는 실제 input 이 시각적으로 숨겨져 있고 옆의 span 이 그려진다 —
   input 에 링을 그리면 보이지 않으므로 그리는 쪽으로 옮긴다. */
label.checkbox input:focus-visible + span,
label.switch input:focus-visible + .slider,
.input-switch input:focus-visible + .slider {
  outline: 2px solid var(--rec-primary, #0096FF);
  outline-offset: 2px;
}

/* 링이 이웃 요소에 가려지지 않게(버튼이 겹쳐 배치된 곳이 있다). */
.btn:focus-visible,
.button-tab-item:focus-visible,
.navlink:focus-visible {
  position: relative;
  z-index: 1;
}

/* 건너뛰기 링크가 있는 표면에서 포커스를 받으면 화면 안으로 들어온다. */
.skip-to-main:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9999;
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
}

/* ==========================================================================================
   글자를 끌어 고르면 **보여야** 한다 (8/7)

   공유 템플릿(assets/template/css/style.css)에 `html ::selection{background-color:transparent}`
   가 있었다. 그래서 글자는 실제로 선택되는데 **선택된 표시가 보이지 않았다** — 사용자에게는
   "드래그가 안 된다"로 보인다.

   내 첫 측정이 이것을 놓친 이유: `Range` API 로 골라 보고 "선택 가능"이라 보고했다.
   그 경로는 하이라이트와 무관하다. 진짜 마우스로 끌어 보니 글자는 잡히는데 화면이 조용했다.

   템플릿 파일은 고치지 않는다 — 다시 내려받으면 되돌아간다. 여기서 덮는다(a11y.css 는 10개
   표면 전부가 읽는다). `html` 접두 선택자를 이기려면 같은 구체성이 필요하다.
   ========================================================================================== */
html ::selection      { background-color: #b3d4fc; color: #101820; text-shadow: none; }
html ::-moz-selection { background-color: #b3d4fc; color: #101820; text-shadow: none; }
/* 어두운 방문객 화면(키오스크·통역)은 밝은 파랑이 눈에 튄다 — 그쪽 강조색으로 맞춘다. */
@media (prefers-color-scheme: dark) {
  html ::selection      { background-color: #1f6feb; color: #fff; }
  html ::-moz-selection { background-color: #1f6feb; color: #fff; }
}