/*
  Baseline reset — aligned with Josh Comeau’s “A Modern CSS Reset” (updated Mar 2026).
  https://www.joshwcomeau.com/css/custom-css-reset
*/

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
	margin: 0;
}

/* 3. Enable keyword animations (height: 0 → auto transitions, etc.) */
@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

body {
	/* 4. Increase line-height */
	line-height: 1.5;
	/* 5. Improve text rendering */
	-webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 7. Form controls — 폰트 상속 + 브라우저 기본 스타일 제거 */
button,
input,
optgroup,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

button {
	cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
	cursor: not-allowed;
	opacity: 1;
}

textarea {
	resize: vertical;
	min-height: 0;
}

select::-ms-expand {
	display: none;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

:is(button, input, select, textarea):focus {
	outline: none;
}

:is(button, input, select, textarea):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/*
  10. Create a root stacking context (React / Next 등 SPA 루트가 있을 때)
*/
#root,
#__next {
	isolation: isolate;
}