/* 접근성 공통 — 모든 페이지가 같은 것을 쓴다.
 *
 * 왜 공유 파일인가 (2026-08-27). skip-link 가 홈에만 있었고(6개 중 1개), 나머지 페이지는
 * 키보드 사용자가 헤더를 매번 통과해야 했다. 각 페이지 인라인 CSS 로 복사하면 8벌이 되고,
 * 8벌은 반드시 갈라진다. `theme.css` 는 **순수 토큰 파일**이라(그 파일 머리말이 그렇게
 * 못 박고 있다) 컴포넌트 규칙을 넣지 않는다. 그래서 여기.
 *
 * 색은 전부 토큰이다 — 라이트·다크가 함께 뒤집힌다.
 */

.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--on-primary);
    padding: 12px 24px;
    border-radius: 0 0 var(--radius-xl, 14px) var(--radius-xl, 14px);
    font-weight: 700;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 0;
    /* 포커스 링은 '보이는 것'이 전부다 — 배경(--primary)과 3:1 이상 갈라지는 색으로.
       종전 홈은 #fbbf24(Tailwind 잔여)를 썼다. 토큰으로 바꿔 다크에서도 갈라지게 한다. */
    outline: 3px solid var(--accent-gold-surface);
    outline-offset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .skip-to-content { transition: none; }
}

/* 화면에는 없고 스크린리더에만 읽히는 텍스트. */
.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;
}