@charset "UTF-8";

/* 모든 요소의 명시도를 0으로 만들어, 나중에 적는 코드가 무조건 이기게 설정 */
:where(*, *::before, *::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 문서 전체 설정 */
:where(html) {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    /* 스크롤 제거시 흔들림 방진 */
    color-scheme: light dark;
}

:where(body) {
    min-height: 100dvh;
    /* 모바일 브라우저 툴바를 고려한 동적 높이 */
    line-height: 1.5;
    font-size: 1.6rem;
    font-family: "Pretendard Variable", "Pretendard", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    background-color: var(--background-default);
    color: var(--text-primary);
}

/* 미디어 요소 최적화 */
:where(img, svg, video, canvas, picture) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 텍스트 가독성 (제목 텍스트 밸런스 등) */
:where(h1, h2) {
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;

}

:where(p) {
    text-wrap: pretty;
    /* 본문 끝 단어가 혼자 떨어지는 것 방지 */
}

/* 폼 요소 스타일 통일 (상속 강조) */
:where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    border-radius: 0;
}

:where(button, [role="button"]) {
    cursor: pointer;
}

:where(ol, ul) {
    list-style: none;
}

:where(a) {
    text-decoration: none;
    color: inherit;
}

/* 접근성: 키보드 포커스 스타일 */
/* 마우스 클릭 시엔 안 보이고, 키보드 탭 이동 시에만 보이게 설정 */
:focus-visible {
    outline: 2px solid var(--focus-color, #2563eb);
    outline-offset: 2px;
}

/* 마우스 유저를 위해 기본 outline 제거 */
:focus:not(:focus-visible) {
    outline: none;
}

/* 유틸리티 */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1024px) {
    :where(html) {
        font-size: 56.25%;

    }
}

@media (max-width: 768px) {
    :where(html) {
        font-size: 62.5%;

    }
}