/* =========================================================
   Tokens
   ========================================================= */
:root{
	--bg:#0b0f0d;				/* 단색 배경 */
	--panel:#0f1512;			/* 섹션 패널 */
	--fg:#eef6f0;
	--muted:rgba(238,246,240,.72);
	--border:rgba(238,246,240,.12);

	--green:#16a34a;			/* 퍼스널컬러(초록) */
	--green-2:#0f6a3d;

	--maxw:1120px;
	--radius:18px;

	--header-h:72px;
	--shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
	background:var(--bg);
	color:var(--fg);
	line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
.container{
	width:min(var(--maxw), calc(100% - 40px));
	margin:0 auto;
}

.skip-link{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.skip-link:focus{
	left:16px;
	top:16px;
	width:auto;
	height:auto;
	padding:10px 12px;
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:12px;
	z-index:1000;
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(11,15,13,.78);
	backdrop-filter: blur(10px);
	border-bottom:1px solid var(--border);
}
.header-inner{
	height:var(--header-h);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
}

.brand{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:160px;
}
.brand-mark{
	width:12px;
	height:12px;
	border-radius:999px;
	background:var(--green);
	box-shadow: 0 0 0 6px rgba(22,163,74,.16);
}
.brand-text{
	font-weight:800;
	letter-spacing:.2px;
}

.nav{
	display:flex;
	gap:18px;
	align-items:center;
}
.nav-link{
	color:var(--muted);
	padding:10px 10px;
	border-radius:10px;
	transition: background .2s ease, color .2s ease;
}
.nav-link:hover{
	color:var(--fg);
	background:rgba(238,246,240,.06);
}
.nav-link.is-active{
	color:var(--fg);
	background:rgba(22,163,74,.14);
	border:1px solid rgba(22,163,74,.28);
}

.nav-toggle{
	display:none;
	border:1px solid var(--border);
	background:transparent;
	color:var(--fg);
	border-radius:12px;
	padding:10px 10px;
}
.nav-toggle-bar{
	display:block;
	width:18px;
	height:2px;
	background:var(--fg);
	border-radius:2px;
}
.nav-toggle-bar + .nav-toggle-bar{margin-top:4px}

.mobile-menu{
	border-top:1px solid var(--border);
	background:rgba(11,15,13,.92);
}
.mobile-menu-inner{
	padding:10px 0 14px;
	display:grid;
	gap:8px;
}
.mobile-link{
	padding:12px 12px;
	border-radius:12px;
	color:var(--muted);
	border:1px solid rgba(238,246,240,.10);
	background:rgba(238,246,240,.04);
}
.mobile-link:hover{
	color:var(--fg);
	border-color:rgba(22,163,74,.35);
	background:rgba(22,163,74,.10);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
	position:relative;
	padding:22px 0 14px;
}
.hero-slider{
	position:relative;
	border-radius:24px;
	overflow:hidden;
	box-shadow: var(--shadow);
	border:1px solid rgba(238,246,240,.10);
}
.hero-track{
	position:relative;
	height: min(620px, calc(100vh - var(--header-h) - 40px));
	min-height:520px;
}
.hero-slide{
	position:absolute;
	inset:0;
	opacity:0;
	transform: scale(1.02);
	transition: opacity .55s ease, transform .75s ease;
}
.hero-slide.is-active{
	opacity:1;
	transform: scale(1);
	z-index:2;
}
.hero-img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.hero-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg, rgba(11,15,13,.82) 0%, rgba(11,15,13,.56) 45%, rgba(11,15,13,.36) 100%),
		linear-gradient(180deg, rgba(11,15,13,.22), rgba(11,15,13,.62));
}
.hero-content{
	position:relative;
	z-index:3;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding: clamp(18px, 4vw, 44px);
	max-width: 860px;
}
.hero-kicker{
	display:inline-flex;
	align-items:center;
	gap:10px;
	color:rgba(238,246,240,.80);
	margin:0 0 10px;
	font-weight:700;
}
.hero-kicker::before{
	content:"";
	width:10px;
	height:10px;
	border-radius:999px;
	background:var(--green);
	box-shadow: 0 0 0 6px rgba(22,163,74,.14);
}
.hero-title{
	margin:0 0 14px;
	font-size: clamp(30px, 4.2vw, 54px);
	line-height:1.12;
	letter-spacing:-.6px;
}
.hero-desc{
	margin:0 0 18px;
	color:var(--muted);
	font-size: clamp(14px, 1.5vw, 18px);
	max-width: 56ch;
}
.hero-cta{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.slider-btn{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	width:44px;
	height:44px;
	border-radius:999px;
	border:1px solid rgba(238,246,240,.18);
	background:rgba(11,15,13,.45);
	color:var(--fg);
	display:grid;
	place-items:center;
	cursor:pointer;
	z-index:5;
}
.slider-btn:hover{
	border-color:rgba(22,163,74,.38);
	background:rgba(11,15,13,.62);
}
.slider-btn.prev{left:14px}
.slider-btn.next{right:14px}
.slider-btn span{font-size:26px; line-height:1}

.slider-dots{
	position:absolute;
	left:50%;
	bottom:14px;
	transform: translateX(-50%);
	display:flex;
	gap:8px;
	z-index:6;
	padding:8px 10px;
	border-radius:999px;
	border:1px solid rgba(238,246,240,.12);
	background:rgba(11,15,13,.42);
	backdrop-filter: blur(10px);
}
.dot{
	width:10px;
	height:10px;
	border-radius:999px;
	border:0;
	cursor:pointer;
	background:rgba(238,246,240,.28);
}
.dot.is-active{
	background:var(--green);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:12px 14px;
	border-radius:14px;
	border:1px solid transparent;
	font-weight:800;
	letter-spacing:.2px;
}
.btn.primary{
	background:linear-gradient(180deg, var(--green), var(--green-2));
	border-color:rgba(255,255,255,.10);
	color:#07110b;
}
.btn.primary:hover{filter:brightness(1.03)}
.btn.ghost{
	background:rgba(238,246,240,.06);
	border-color:rgba(238,246,240,.16);
	color:var(--fg);
}
.btn.ghost:hover{
	border-color:rgba(22,163,74,.35);
	background:rgba(22,163,74,.10);
}

/* =========================================================
   Sections (equal height)
   ========================================================= */
.section{
	padding: 34px 0;
}
.section-grid{
	display:grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap:18px;
	align-items:stretch;
}
.section-media,
.section-body{
	min-height: 520px; /* 섹션 높이 동일 기준 */
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:24px;
	overflow:hidden;
}
.section-media img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.section-body{
	padding: 22px 22px;
	display:flex;
	flex-direction:column;
}
.section-title{
	margin:0 0 10px;
	font-size: 26px;
	letter-spacing:-.2px;
}
.section-lead{
	margin:0 0 16px;
	color:var(--muted);
	max-width: 70ch;
}

.cards{
	display:grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap:12px;
	margin-top:auto; /* 섹션 내부 하단 정렬을 일정하게 */
}
.card{
	border-radius:18px;
	border:1px solid rgba(238,246,240,.10);
	background:rgba(238,246,240,.04);
	padding:14px 14px;
}
.card-title{
	margin:0 0 6px;
	font-size: 16px;
}
.card-desc{
	margin:0;
	color:var(--muted);
	font-size: 14px;
}

.game-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap:12px;
	margin-top:auto;
}
.game-card{
	border-radius:18px;
	overflow:hidden;
	border:1px solid rgba(238,246,240,.10);
	background:rgba(238,246,240,.04);
}
.game-card img{
	width:100%;
	height: 170px;
	object-fit:cover;
}
.game-info{
	padding:12px 12px 14px;
}
.game-title{
	margin:0 0 4px;
	font-size:16px;
}
.game-meta{
	margin:0;
	color:var(--muted);
	font-size:13px;
}

.career-cta{
	margin-top:16px;
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}
.muted{color:var(--muted); margin:0}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
	margin-top: 14px;
	border-top:1px solid var(--border);
	background:rgba(11,15,13,.76);
}
.footer-inner{
	padding: 22px 0 18px;
}
.footer-meta{
	display:flex;
	gap:18px;
	align-items:flex-start;
	justify-content:space-between;
	flex-wrap:wrap;
}
.footer-brand{
	display:flex;
	align-items:center;
	gap:10px;
}
.footer-list{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	gap:6px;
	color:var(--muted);
}
.footer-list .label{
	color:rgba(238,246,240,.88);
	margin-right:8px;
}
.footer-bottom{
	margin-top: 16px;
	padding-top: 16px;
	border-top:1px solid rgba(238,246,240,.10);
}
.copyright{
	margin:0;
	text-align:center; /* 풋터 가장 아래 중앙정렬 */
	color:rgba(238,246,240,.70);
	font-size:13px;
}

/* =========================================================
   To Top
   ========================================================= */
.to-top{
	position:fixed;
	right:18px;
	bottom:18px;
	width:48px;
	height:48px;
	border-radius:999px;
	border:1px solid rgba(238,246,240,.18);
	background:rgba(11,15,13,.56);
	color:var(--fg);
	display:grid;
	place-items:center;
	cursor:pointer;
	z-index:100;
	opacity:0;
	transform: translateY(8px);
	pointer-events:none;
	transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}
.to-top.is-visible{
	opacity:1;
	transform: translateY(0);
	pointer-events:auto;
}
.to-top:hover{
	border-color:rgba(22,163,74,.38);
	background:rgba(11,15,13,.72);
}
.to-top span{font-size:18px}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
	.nav{display:none}
	.nav-toggle{display:inline-flex; flex-direction:column; gap:0; align-items:center; justify-content:center}
	.section-grid{
		grid-template-columns: 1fr;
	}
	.section-media,
	.section-body{
		min-height: 460px;
	}
	.cards, .game-grid{
		grid-template-columns: 1fr;
	}
	.hero-track{
		min-height: 520px;
	}
}
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto}
	.hero-slide{transition:none}
}