:root {
	/* color variables */
	--text-secondary: #626a77;
	--text-primary: #0f172a;
	--brand-alpha-up: #031884;
	--surface-ice-blue: #f4f7fa;
	--surface-slate-tint: #f0f4f8;
	--surface-indigo-glow: #f3f4f9;

	/* line / chip colors */
	--hairline: rgba(98, 106, 119, 0.26);
	--chip-bg: #eff2f9;
	--chip-bg-hover: #e3eaf7;

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
	--page-gutter: 120px;

	/* type stacks */
	--font-kr: 'Pretendard', system-ui, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
	--font-en: 'Plus Jakarta Sans', 'Pretendard', system-ui, sans-serif;
}

html {
	height: 100%;
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	color: var(--text-primary);
	font-family: var(--font-kr);
	background-color: #fff;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* keep korean words from breaking mid-word */
	word-break: keep-all;
	overflow-wrap: break-word;
}



/* text utility classes */

.sub-text {
	font-family: var(--font-kr);
}

.sub-text-brand-alpha-up {
	color: var(--brand-alpha-up);
}



/* ui objects utility classes */

.card-white {
	box-shadow: 0px 0px 24px -2px rgba(60, 74, 129, 0.06),0px 4px 8px 0px rgba(60, 74, 129, 0.06);
	position: relative;
	isolation: isolate;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.9);
	padding: clamp(28px, 3vw, 40px);
	border: 1px solid rgba(60, 74, 129, 0.07);
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-white:hover {
	transform: translateY(-4px);
	box-shadow: 0px 24px 48px -22px rgba(60, 74, 129, 0.3),0px 4px 8px 0px rgba(60, 74, 129, 0.06);
}



/* interaction utility classes */

.hover-dark {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.hover-dark:hover {
	filter: brightness(0.97);
}

:where(a, button):focus-visible {
	outline: 2px solid var(--brand-alpha-up);
	outline-offset: 3px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, ::before, ::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}