@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Figtree', sans-serif;
	--letter-spacing: -0.02em;
	
	--color-primary: #FFFFFF;
	--color-primary-dark: #0D0D0D;
	--color-primary-light: rgba(255, 255, 255, 0.1);
	--color-secondary: #0D0D0D;
	
	--color-text-primary: #FFFFFF;
	--color-text-secondary: rgba(255, 255, 255, 0.8);
	--color-text-tertiary: rgba(255, 255, 255, 0.6);
	--color-text-muted: rgba(255, 255, 255, 0.3);
	--color-text-white: #FFFFFF;
	
	--color-bg-white: #FFFFFF;
	--color-bg-light: rgba(255, 255, 255, 0.1);
	--color-bg-dark: #0D0D0D;
	--color-bg-overlay: rgba(0, 0, 0, 0.8);
	
	--color-border-light: rgba(255, 255, 255, 0.2);
	--color-border-dark: #000000;
	
	--shadow-card: 0px 0px 20px rgba(0, 0, 0, 0.3);
	--shadow-dropdown: 0px 10px 30px rgba(0, 0, 0, 0.5);
	--shadow-hover: 0px 20px 40px rgba(0, 0, 0, 0.4);
	--blur-backdrop: blur(15px);
	
	--container-max: 1920px;
	--container-content: 1600px;
	--container-padding: 50px;
	
	--space-2xs: 5px;
	--space-xs: 10px;
	--space-sm: 15px;
	--space-md: 20px;
	--space-lg: 30px;
	--space-xl: 40px;
	--space-2xl: 45px;
	--space-3xl: 60px;
	--space-4xl: 80px;
	--space-5xl: 100px;
	
	--radius-sm: 5px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--radius-xl: 30px;
	--radius-full: 100px;
	
	--header-height: 70px;
	--sub-visual-height: 450px;
	--footer-height: 300px;
	
	--z-base: 1;
	--z-dropdown: 10;
	--z-sticky: 50;
	--z-page-nav: 80;
	--z-quick: 90;
	--z-header: 100;
	--z-allmenu: 150;
	--z-modal: 200;
}

html {
	font-size: 16px;
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-primary);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.is-main {
	background-color: var(--color-bg-dark);
	color: var(--color-text-primary);
}

/* 전역: 스크롤바 숨김 (모바일/태블릿에서 동작 보장) */
/* overflow: auto/scroll 쓰는 요소 전부 (메인 .main-wrapper, 서브 html/body, 전체메뉴 #allmenuBox, 문의폼 .inquiry-form__privacy-content) */
html,
body,
.main-wrapper,
#allmenuBox,
.inquiry-form__privacy-content {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-wrapper::-webkit-scrollbar,
#allmenuBox::-webkit-scrollbar,
.inquiry-form__privacy-content::-webkit-scrollbar,
*::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* PC: 스크롤바 다시 보이게 */
@media (min-width: 1025px) {
	html,
	body,
	.main-wrapper,
	#allmenuBox,
	.inquiry-form__privacy-content {
		-ms-overflow-style: auto;
		scrollbar-width: auto;
	}
	html::-webkit-scrollbar,
	body::-webkit-scrollbar,
	.main-wrapper::-webkit-scrollbar,
	#allmenuBox::-webkit-scrollbar,
	.inquiry-form__privacy-content::-webkit-scrollbar {
		display: block;
		width: auto;
		height: auto;
	}
}

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

a {
	text-decoration: none;
	color: inherit;
}

ul, ol {
	list-style: none;
}

button {
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
}

@media screen and (max-width: 1440px) {
	:root {
		--container-padding: 40px;
	}
}

@media screen and (max-width: 1280px) {
	:root {
		--container-padding: 30px;
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--container-padding: 20px;
		--header-height: 60px;
	}
}

@media screen and (max-width: 640px) {
	:root {
		--container-padding: 15px;
		--sub-visual-height: 350px;
	}
	/* 모바일: 스크롤바 공간 항상 확보 → 좌우 여백 대칭 (scrollbar-gutter 미적용/미지원 시 대체) */
	html {
		overflow-y: scroll;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--container-padding: 10px;
		--sub-visual-height: 300px;
	}
}