/* ===== 기본: 리셋·본문·링크·제목·접근성 공통 =====
   tokens.css 다음에 읽는다. 선택자는 요소·클래스만 쓰고 ID·문서 구조에 묶지 않는다. */

*,*::before,*::after{box-sizing:border-box}
/* 숨김 가드: [hidden] 은 어떤 display 규칙보다도 이긴다. 컴포넌트 규칙마다 가드를 따로 쓰지 않는다. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--ui-sp-5);background:var(--ui-page)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip;background:var(--ui-page);color:var(--ui-ink);font-family:var(--ui-font);font-size:var(--ui-fs-3);line-height:var(--ui-lh-body);-webkit-font-smoothing:antialiased}
:root:lang(ko){word-break:keep-all}
:root:lang(ja){word-break:normal;line-break:strict}
:root:lang(ja) :is(h1,h2,h3){word-break:auto-phrase}

img,svg{max-width:100%}
img{display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}

h1,h2,h3{margin:0;color:var(--ui-ink);font-weight:var(--ui-fw-heavy);line-height:var(--ui-lh-title);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--ui-fs-5)}
h2{font-size:var(--ui-fs-4)}
h3{font-size:var(--ui-fs-3)}

a{color:var(--ui-brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ui-ink)}

/* 화면 밖 글자: 보조기술만 읽는다 */
.ui-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* 건너뛰기 링크: 첫 Tab 에 나타난다 */
.ui-skip{position:absolute;z-index:100;left:var(--ui-sp-3);top:var(--ui-sp-3);padding:var(--ui-sp-3) var(--ui-sp-4);border-radius:var(--ui-r-control);background:var(--ui-page);color:var(--ui-ink);font-size:var(--ui-fs-2);font-weight:var(--ui-fw-bold);text-decoration:none;transform:translateY(-200%)}
.ui-skip:focus{transform:none}

/* 초점: 3px + 간격. 프로그램이 옮긴 초점(제목·본문 tabindex=-1)은 링을 그리지 않는다 */
:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}

/* 움직임 줄이기: 전역 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 고대비(forced-colors): 색이 사라져도 초점·선택 상태가 구분돼야 한다 */
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight}
  .ui-skip{border:1px solid CanvasText}
}