/* Culture Shock 2.0 — 접근성 토글 (Phase 1-2 WP-C, 2026-09-02)
   글자 크기(가-/가+) + 고대비 토글 UI와 상태 클래스.
   어느 페이지에서든 안전하게 포함 가능하도록 설계(호스트 페이지에 특정 셀렉터가
   없어도 에러 없음). 포커스 링 색상은 tokens.css의 --amber를 사용하되, tokens.css가
   없는 페이지에서도 깨지지 않도록 폴백 값을 함께 지정한다. */

/* ── 컨트롤 클러스터 ── */
.a11y-ctrl{
  position:fixed;
  top:70px;
  right:10px;
  z-index:9999;
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:14px;
  background:rgba(8,11,30,.85);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.a11y-ctrl button{
  min-width:44px;
  min-height:44px;
  padding:4px 8px;
  border-radius:9px;
  border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  font-size:13px;
  line-height:1.1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.18s;
}
.a11y-ctrl button:hover{background:rgba(255,255,255,.2)}
.a11y-ctrl button[aria-pressed="true"]{
  background:var(--amber,#F59F00);
  border-color:var(--amber,#F59F00);
  color:#1B2233;
}
.a11y-ctrl button:focus-visible{
  outline:3px solid var(--amber,#F59F00);
  outline-offset:2px;
}

/* 헤더에 붙지 못해 body 하단으로 폴백된 경우(헤더 없는 페이지) */
.a11y-ctrl.a11y-fallback{
  top:auto;
  bottom:14px;
  right:14px;
}

@media (max-width:760px){
  .a11y-ctrl{ top:auto; bottom:14px; right:10px; }
}

/* 고대비 모드일 때 컨트롤 자체도 대비를 유지 */
html.a11y-hc .a11y-ctrl{ background:#000 !important; }
html.a11y-hc .a11y-ctrl button{ background:#222 !important; color:#fff !important; border-color:#fff !important; }
html.a11y-hc .a11y-ctrl button[aria-pressed="true"]{ background:#F59F00 !important; color:#000 !important; border-color:#F59F00 !important; }

/* ── 글자 크기 단계: 100 / 112 / 125% ──
   사이트 대부분의 텍스트가 px 단위로 고정돼 있어 html{font-size} 방식은 효과가
   없다. 대신 zoom(크로미움·최신 파이어폭스 지원)으로 텍스트+레이아웃을 함께
   비례 확대해 실제로 커 보이도록 한다. 미지원 브라우저에서는 최소한 html
   font-size 배수를 함께 걸어 rem/em 기반 요소는 반응하게 해 둔다(점진적 향상). */
html.a11y-fs-2{ font-size:112%; }
html.a11y-fs-3{ font-size:125%; }
html.a11y-fs-2 body{ zoom:1.12; }
html.a11y-fs-3 body{ zoom:1.25; }

/* ── 고대비 모드 ── */
html.a11y-hc{ color-scheme:light; }
html.a11y-hc body{ background:#fff !important; }
html.a11y-hc *{ color:#000 !important; text-shadow:none !important; }
html.a11y-hc a{ color:#0b3d91 !important; text-decoration:underline !important; }
html.a11y-hc a:visited{ color:#54278f !important; }

/* 색이 있는 배경 위의 버튼류는 배경/글자를 흑백 고대비 조합으로 강제 */
html.a11y-hc .cta,
html.a11y-hc .buy,
html.a11y-hc .navcta{
  background:#000 !important;
  color:#fff !important;
  border:2px solid #000 !important;
  box-shadow:none !important;
}
html.a11y-hc .cta.ghost,
html.a11y-hc .buy.ghost{
  background:#fff !important;
  color:#000 !important;
  border:2px solid #000 !important;
}
html.a11y-hc .badge,
html.a11y-hc .chip{
  background:#fff !important;
  border:2px solid #000 !important;
}
html.a11y-hc input,
html.a11y-hc textarea,
html.a11y-hc select,
html.a11y-hc .plan,
html.a11y-hc details{
  border-color:#000 !important;
}

/* 포커스 가시성: 사이트 전역에 키보드 포커스 링이 약한 요소를 보강 */
html.a11y-hc :focus-visible,
body :focus-visible{
  outline:3px solid var(--amber,#F59F00);
  outline-offset:2px;
}