/**
 * 기본 스타일 (재사용 기반).
 *
 * 토큰(assets/css/base/tokens.css와 사이트별 값)을 문서 전체에 적용하는 최소한의 기본값만 둡니다.
 * 화면 레이아웃과 컴포넌트 모양은 여기에 두지 않습니다.
 *
 * @package udongsari
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	color: var(--color-text);
	background-color: var(--color-bg);
}

img {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/*
 * 키보드로 이동할 때만 포커스 표시를 보여줍니다.
 * 색만 바꾸지 않고 요소 바깥에 떨어진 외곽선(모양 변화)으로 표시합니다.
 */
:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* 주 색 배경 영역 안에서는 포커스 외곽선을 주 색 배경 위용 색으로 바꿉니다. 영역의 바깥 요소에 붙입니다. */
.uds-base-on-primary {
	--color-focus: var(--color-focus-on-primary);
}

/* 화면에는 보이지 않고 화면 낭독기에만 읽히는 글자(예: 같은 이름 버튼에 붙이는 상품명). */
.uds-base-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 대화상자가 열려 있는 동안 배경 문서 스크롤을 막습니다(assets/js/base/focus.js). */
.uds-base-scroll-lock {
	overflow: hidden;
}

/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 거의 없앱니다. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}