/*
 * 전역 베이스. 색·간격 토큰은 Tailwind 설정(src/view/ui.php)에 있고,
 * 여기에는 유틸리티로 표현하기 번거로운 것만 둔다.
 */

:root {
    --color-brand: #001b55;
    --color-accent: #f04452;
    --font-sans: "NanumSquare", "나눔스퀘어", "Pretendard", -apple-system, BlinkMacSystemFont,
        system-ui, "Malgun Gothic", sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 나눔스퀘어는 숫자 자간이 넓어, 가격·날짜처럼 숫자가 몰리는 자리는 살짝 좁혀 준다 */
.tabular-nums {
    font-feature-settings: "tnum";
}

/* 가로 스크롤 영역(비교표 등) — 스크롤바 숨김 */
.scroll-x {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-x::-webkit-scrollbar {
    display: none;
}

/* FAQ 아코디언 — <details> 기본 마커 제거 */
summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

/* 본문 링크·포커스는 키보드 사용자에게만 보이게 */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* 상품 이미지는 흰 배경 정사각으로 통일해 올리므로, 잘라내지 말고 그대로 담는다 */
.thumb {
    background-color: #fff;
    object-fit: contain;
}

/* 헤더 카테고리 메뉴: 가로 스크롤은 되게 두고 스크롤바만 숨긴다 */
.cat-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cat-scroll::-webkit-scrollbar {
    display: none;
}