/* =========================================================
   COMMON.CSS
   - Base + Utility + Internal Layout + Footer + Common UI
   - Home 전용(topnav/hero/section)은 main.css에 유지
========================================================= */

/* ===== 1) Reset & Base ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
	color: #e9eef6;

	/* 홈/내부 공통 배경 (너가 쓰던 톤 유지) */
	background: radial-gradient(900px 600px at 100%, #0f1b2a 0%, #0b0f14 55%, #07090c 100%);
	/*background: radial-gradient(900px 600px at 75% 40%, #0f1b2a 0%, #0b0f14 55%, #07090c 100%);*/

	/*background: #0f0f0f;*/

}

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

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

button {
	font-family: inherit;
	cursor: pointer;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

select option {
	background: #0b0f14;
	color: #e9eef6;
}


/* ===== 2) Utility ===== */
.hidden {
	display: none !important;
}

.text-muted {
	color: rgba(233, 238, 246, 0.68);
}

.text-strong {
	font-weight: 700;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 공통 카드/패널 */
.panel {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
}

/* 공통 버튼 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.2px;
	border: 1px solid transparent;
	text-decoration: none;
}

.btn-primary {
	background: #ffffff;
	color: #0b0f14;
}

.btn-primary:hover {
	opacity: 0.92;
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.88);
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.06);
}

/* ===== 3) Internal Header (Default.head.php에서 사용) ===== */
/* 홈은 topnav를 쓰고, 내부는 site-header를 씀 (충돌 없음) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 15, 20, 0.72);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header-inner {
	/*max-width: 1200px;*/
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 22px;
}

.site-logo {
	width: 240px;
}

.site-logo img {
	height: 30px; /* 내부에서는 조금 작게 */
	width: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: 6px;
}

.site-nav-link {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	letter-spacing: -0.2px;
	padding: 6px 2px;
}

.site-nav-link:hover {
	color: rgba(255, 255, 255, 0.92);
}

.site-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.btn-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	background: #999;
	color: #0b0f14;
	font-weight: 800;
	font-size: 13px;
}

/* ===== 4) Internal Layout Shell ===== */
.site-shell {
	display: flex;
	min-height: calc(100vh - 64px);
}

/* Sidebar */
.site-sidebar {
	width: 240px;
	flex: 0 0 240px;
	background: rgba(0, 0, 0, 0.22);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	padding: 22px 14px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sidebar-group {
	padding: 10px 8px;
	border-radius: 12px;
}

.sidebar-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(233, 238, 246, 0.55);
	margin: 0 0 10px;
}

.sidebar-link {
	display: block;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 14px;
	color: rgba(233, 238, 246, 0.82);
}

.sidebar-link:hover {
	background: rgba(255, 255, 255, 0.06);
}

.sidebar-bottom {
	margin-top: auto;
}

/* Main */
.site-main {
	flex: 1;
	min-width: 0;
}

.site-content {
	/*max-width: 1200px;*/
	padding: 28px 28px 60px;
}

/* 페이지 공통 타이틀 영역 */
.page-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: rgba(255, 255, 255, 0.94);
}

.page-desc {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(233, 238, 246, 0.68);
}

/* ===== 5) Footer (홈/내부 공통) ===== */
.site-footer {
	background: rgba(0, 0, 0, 0.36);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 28px;
}

.footer-logo {
	height: 22px;
	width: auto;
}

.footer-meta {
	margin: 14px 0 14px;
	color: rgba(233, 238, 246, 0.68);
	line-height: 1.7;
	font-size: 13px;
}

.footer-info {
	color: rgba(233, 238, 246, 0.64);
	font-size: 13px;
}

.footer-info li {
	margin: 6px 0;
}

.footer-social {
	margin-top: 16px;
	display: flex;
	gap: 10px;
}

.footer-social-btn {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.78);
}

.footer-social-btn:hover {
	background: rgba(255, 255, 255, 0.09);
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.footer-col h4 {
	margin: 0 0 12px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.86);
}

.footer-link {
	display: block;
	padding: 7px 0;
	color: rgba(233, 238, 246, 0.68);
	font-size: 13px;
}

.footer-link:hover {
	color: rgba(255, 255, 255, 0.88);
}

.site-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer-bottom-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px 26px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	color: rgba(233, 238, 246, 0.55);
	font-size: 12px;
}

.footer-bottom-links a {
	margin-left: 14px;
	color: rgba(233, 238, 246, 0.55);
}

.footer-bottom-links a:hover {
	color: rgba(255, 255, 255, 0.80);
}


/* ===== Internal Mobile Menu ===== */

.site-burger{
	display:none;
	position:relative;
	width:40px;
	height:40px;
	padding:0;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.10);
	background:rgba(255,255,255,0.06);
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}

.site-burger span{
	position:absolute;
	left:50%;
	width:18px;
	height:2px;
	background:rgba(255,255,255,0.82);
	border-radius:2px;
	transform:translateX(-50%);
}

.site-burger span:nth-child(1){ top:13px; }
.site-burger span:nth-child(2){ top:19px; }
.site-burger span:nth-child(3){ top:25px; }

@media (max-width: 860px){
	.site-burger{ display:inline-block; }
	.site-logo{ width:auto; } /* 기존 240px 고정 때문에 모바일에서 공간 먹음 */
}

/* Overlay */
.snav{
	position:fixed;
	inset:0;
	z-index:9999;
}

.snav-dim{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.55);
	backdrop-filter: blur(6px);
}

.snav-panel{
	position:absolute;
	top:0;
	right:0;
	width:min(340px, 88vw);
	height:100%;
	background:rgba(10, 12, 16, 0.96);
	border-left:1px solid rgba(255,255,255,0.10);
	box-shadow:-12px 0 40px rgba(0,0,0,0.45);
	padding:16px;
	transform:translateX(100%);
	transition: transform 0.18s ease;
	overflow:auto;
}

.snav.is-open .snav-panel{
	transform:translateX(0);
}

.snav-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:6px 2px 14px;
	border-bottom:1px solid rgba(255,255,255,0.08);
}

.snav-title{
	color:rgba(255,255,255,0.88);
	font-size:14px;
	font-weight:800;
}

.snav-close{
	border:1px solid rgba(255,255,255,0.10);
	background:rgba(255,255,255,0.06);
	color:rgba(255,255,255,0.78);
	border-radius:10px;
	height:34px;
	padding:0 10px;
	cursor:pointer;
}

.snav-body{
	padding:12px 2px 14px;
}

.snav-group{
	margin-bottom:14px;
	padding-bottom:14px;
	border-bottom:1px solid rgba(255,255,255,0.06);
}

.snav-group-title{
	font-size:12px;
	letter-spacing:0.06em;
	color:rgba(233,238,246,0.55);
	margin:4px 6px 10px;
}

.snav-link{
	display:block;
	padding:12px 10px;
	border-radius:12px;
	color:rgba(233,238,246,0.80);
	background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.08);
	margin-bottom:8px;
	word-break:keep-all;
}

.snav-link:hover{
	background:rgba(255,255,255,0.07);
	color:rgba(255,255,255,0.92);
}

.snav-foot{
	padding-top:10px;
}

.snav-auth{
	display:flex;
	align-items:center;
	justify-content:center;
	height:40px;
	border-radius:12px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	color:rgba(255,255,255,0.88);
	font-weight:800;
}


/* ===== 6) Responsive (공통) ===== */
@media (max-width: 980px) {
	.site-content {
		padding: 24px 18px 50px;
	}

	/* 내부는 데모 기준: 사이드바 유지해도 되지만 화면 좁으면 살짝 줄임 */
	.site-sidebar {
		width: 210px;
		flex-basis: 210px;
		padding: 18px 12px;
	}
}

@media (max-width: 860px) {
	/* 내부 상단 메뉴는 좁으면 숨김 (홈 topnav 규칙과 동일한 감각) */
	.site-nav {
		display: none;
	}
}

@media (max-width: 767px) {

	.site-content {
		padding: 24px 8px 50px;
	}


	.btn-login {
		display: none;
	}

	.site-sidebar {
		display: none;
	}

	.site-shell {
		display: block;
	}

	.site-footer-inner {
		grid-template-columns: 1fr;
		padding: 32px 18px;
		gap: 22px;
	}

	.footer-left {
		text-align: left;
	}

	.footer-cols {
		grid-template-columns: repeat(1, 1fr);
		gap: 14px;
	}

	.footer-col h4 {
		margin: 0 0 10px;
	}

	.footer-link {
		padding: 8px 0;
		white-space: nowrap;        /* 단어 쪼개짐 방지 */
		word-break: keep-all;       /* 한글 줄바꿈 안정 */
	}

	.site-footer-bottom-inner {
		padding: 14px 18px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.footer-bottom-links a {
		margin-left: 0;
		margin-right: 14px;
	}
}