@charset "utf-8";

@layer reset, base, tokens, vendor, components, sections, utilities, overrides;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	:where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd, input) {
		margin: 0;
		padding: 0;
	}
	:where(ul, ol) {
		list-style: none;
	}
	:where(address, em) {
		font-style: normal;
	}
	:where(input, textarea, select, button) {
		min-width: 0;
		font: inherit;
	}
	button {
		padding: 0;
		background: none;
		border: 0;
	}
}

@layer base {
	/* * { letter-spacing: var(--letter-spacing-negative-10); } */
	@supports (interpolate-size: allow-keywords) {
		:root {
			interpolate-size: allow-keywords;
		}
	}
	html {
		font-size: 6.25%;
		/* * [CRITICAL] 시스템 텍스트 렌더링 최적화 및 크로스 브라우징 방어
		 * --------------------------------------------------------------------------
		 * 1. 목적: iOS Safari의 'Minimum Font Size(최소 9~10px)' 강제 업스케일링 알고리즘 방어.
		 * 2. 배경: html font-size가 10px 미만(예: 6.25%)일 때, 사파리가 rem 단위를 10배로 오계산하여 
		 * 레이아웃이 파괴되는 현상을 원천 차단함.
		 * 3. 주의: 'none' 대신 '100%'를 사용하여 브라우저의 임의 부풀리기는 억제하되, 
		 * 사용자의 수동 확대(Pinch-to-zoom) 권한을 보존하여 웹 접근성(WCAG)을 준수함.
		 * 4. 경고: 애플 기기에서의 레이아웃 일관성을 위해 절대 삭제하거나 수정하지 말 것.
		 * --------------------------------------------------------------------------
		 */
		-webkit-text-size-adjust: 100%;
		&::selection {
			color: var(--color-white, #fff);
			background: var(--color-primary, #3367d1);
		}
		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
		@media (width >= 1280px) {
			scroll-padding-top: 104rem;
		}
		@media (width < 1280px) {
			scroll-padding-top: 130rem;
		}
	}
	body {
		position: relative;
		font: var(--font-body-3);
		overflow-wrap: break-word;
		word-break: keep-all;
		color: var(--color-black);
		accent-color: var(--color-primary);
	}
	:where(input, textarea, select, button) {
		color: inherit;
		caret-color: var(--color-primary);
	}
	:where(button, summary) {
		cursor: pointer;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	textarea {
		resize: vertical;
	}
	.material-symbols-outlined {
		@media (prefers-reduced-motion: no-preference) {
			transition: font-variation-settings var(--duration-base);
		}
	}
}