/* === sove-qa: F-platform-012 — 초점 표시 (측정해서 생성) ===

   Tab 으로 갈 수 있는데 초점 표시가 없던 것을 고친다 (WCAG 2.4.7).
   실패한 자리는 작성자가 tabindex 를 준 요소가 아니라, 브라우저가 스스로
   초점 가능하게 만든 overflow:auto 컨테이너였다. 그런 요소에는 기본
   스타일이 없어서 Tab 이 머물러도 화면이 그대로다.

   두 겹인 이유: 26개 사이트의 초점 가능 요소 뒤 배경을 브라우저로 재어
   13종을 얻었는데, 거의 전부 밝은 가운데 sphere 에 rgb(16,24,40) 하나가
   섞여 있다. 그 하나 때문에 어두운 단색 윤곽선은 전부 3:1 에 못 미친다.

     안쪽  #0f172a  밝은 배경에서 16.03 ~ 17.85:1
     바깥  #ffffff  어두운 배경에서 17.75:1

   어느 배경에서든 둘 중 하나가 보인다. 둘 사이도 17.85:1 이라 두 겹이
   뭉개지지 않는다. (WCAG 1.4.11 은 3:1 을 요구한다 — 최저가 16:1 이다.)

   :focus 가 아니라 :focus-visible 을 쓴다. 마우스로 눌렀을 때까지 테두리가
   뜨면 사람들이 그것을 고장으로 읽고, 그러다 outline:none 으로 지워 버린다.
   그러면 키보드 사용자가 다시 잃는다. */
:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 2px;
  /* 바깥 흰 띠. outline(2px 간격 + 3px 두께 = 5px) 바깥에 놓이도록 6px.

     !important 를 쓰는 이유: 이 파일은 <head> 맨 앞에 실리는데, 사이트의
     자기 CSS 는 그 뒤에 온다. outline 은 사이트에 :focus-visible 규칙이
     아예 없어서(그래서 이 결함이 났다) 그냥 이기지만, box-shadow 는
     .btn 에 걸린 box-shadow 같은 **같은 특이도의 나중 규칙**에 진다.
     실제로 그랬다 — 처음 넣었을 때 네 사이트 모두 흰 띠가 0개 요소에만
     적용됐다. 007 파일이 !important 를 쓰는 것과 같은 이유다.

     초점 중에만 기존 그림자를 덮는다. 보이는 초점 표시가 그림자보다 먼저다. */
  box-shadow: 0 0 0 6px #ffffff !important;
}

/* 스크롤 컨테이너는 **키보드로 움직일 수도 있어야** 한다 (axe 의
   scrollable-region-focusable). 표시만 주는 것과 접근 가능하게 하는 것은
   다른 일이라, 여기서는 표시까지만 한다. 접근 쪽은 그 요소에 tabindex 와
   이름이 필요하고 사이트마다 판단이 달라 일괄로 넣지 않는다. */
/* === F-platform-012 끝 === */