@charset "utf-8";

/* Variables */

:root {
	--purple: #8030a7;
	--purple-dark: #6a2789;
	--magenta: #dc2f9a;
	--ink: #242326;
	--muted: #6b6870;
	--line: #e2e0e4;
	--soft: #f8f5fa;

	--frame: 1680px;
	--frame-inner: 1200px;
	--header-h: 70px;
}

/* Base */

* { box-sizing: border-box; }

html { min-width: 1200px; scroll-behavior: smooth; }

body {
	margin: 0;
	min-width: 1200px;
	overflow-x: hidden;
	color: var(--ink);
	background: #fff;
	font-family: 'IBM Plex Sans', 'Pretendard', 'Helvetica Neue', Arial, sans-serif;
}

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

/* Layout */

.wrapper { min-width: 1200px; }
.frame { width: min(var(--frame), calc(100% - 120px)); min-width: 1200px; margin: 0 auto; position: relative; }
.frame_inner { width: var(--frame-inner); margin: 0 auto; position: relative; }

.container { width: var(--frame-inner); margin: 0 auto; }
.narrow { max-width: 930px; }

.section { padding: 72px 0; }
.tint { background: #f8f4fc; }
.tint_soft { background: #fbf9fd; }

.section h2,
.small_title { margin: 0 0 16px; text-align: center; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.small_title { text-align: left; font-size: 28px; }
.small_title.center { text-align: center; font-size: 36px; }
.small_title.below { margin-top: 60px; }

.section_intro { max-width: 936px; margin: 0 auto 36px; text-align: center; color: #222; font-size: 18px; line-height: 1.6; }
.section_intro.left { margin-left: 0; text-align: left; }

.pill_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--purple);
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	white-space: nowrap;
	transition: transform .2s ease, background .2s ease;
}

.lang_button {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #181818;
	color: #fff;
	font-size: 18px;
}

/* Footer */

.site_footer { padding: 70px 0 56px; background: var(--purple); color: rgba(255, 255, 255, .7); border-top: 1px solid rgba(255, 255, 255, .3); }

/* 20260909 수정 */
.footer_grid {
	display: grid;
	grid-template-columns: 372px max-content max-content max-content minmax(0, 1fr);
	column-gap: 42px;
	row-gap: 0;
}
.footer_brand { opacity: .5; }
.footer_brand img { display: block; width: 114px; height: 38px; }

.site_footer h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 68px; }
.site_footer a { display: block; margin: 0; font-size: 16px; line-height: 30px; color: rgba(255, 255, 255, .7); }

.site_footer h3 a {
	display: inline; font-size: 18px; font-weight: 700; line-height: 68px;
	letter-spacing: -.18px; color: rgba(255, 255, 255, .7);
}

.footer_services h3 + a { margin-top: 0; }
.footer_services a { line-height: 24px; letter-spacing: -.16px; margin-top: 14px; font-weight:300;}
.footer_services h3 { letter-spacing: -.18px; }
/* 20260909 수정 */
.footer_grid > div:nth-child(4) > h3 + a { margin-top: 0; }
.footer_grid > div:nth-child(4) > a { margin-top: 14px; font-weight: 300; line-height: 24px; letter-spacing: -.16px; }
/* Services → Experiences 간격 보정: 뒤의 두 열을 함께 이동해 내부 간격은 유지한다. */
.footer_grid > div:nth-child(4),
.footer_grid > div:nth-child(5) { transform: translateX(-24px); }
.footer_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, .3);
	font-size: 16px;
	color: rgba(255, 255, 255, .7);
}
.footer_bottom p { margin: 0; font-weight: 300; line-height: 26px; letter-spacing: -.16px; }
.footer_address .is_bold { font-weight: 700; }

/* Back to top */

.dft_btn.to_top {
	position: fixed; right: 40px; bottom: 40px; z-index: 500;
	width: 54px; height: 54px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #ddd; background: #fff; color: #111;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease, visibility 0s linear .25s;
}
.dft_btn.to_top.is_visible {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
}
.dft_btn.to_top:hover { background: #fff; color: #111; transform: translateY(-2px); }
.dft_btn.to_top svg { display: block; pointer-events: none; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .10)); }
