/* 1) 공통 변수 */
:root{
	--header-h: 56px;     /* 헤더 실제 높이에 맞춰 조절 */
	--footer-h: 64px;     /* 푸터 실제 높이에 맞춰 조절 */
	--sidenav-w: 220px;   /* PC 좌측메뉴 폭 */
	--content-gap: 10px;   /* ← 여기 숫자만 바꾸면 전체 여백 조절 */
	--nav-h:56px;
	--bg:#0f172a;
	--fg:#e2e8f0;
	--muted:#94a3b8;
	--card:#fff;
	--line:#e5e7eb;
}

/* 2) reset */
*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; padding:0; min-width:320px}

/* 3) 폰트 정의 */
@font-face {
	font-family: 'InfinitySans-RegularA1';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'MangoBoardByeolbyeol';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2405-3@1.1/MangoByeolbyeol.woff2') format('woff2');
	font-weight: normal;
	font-display: swap;
}

/* 4) 바디 기본 스타일 */
body{
	font-family: 'InfinitySans-RegularA1', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
	color:#0f172a;
	background:#f8fafc;
	padding-top:0; /* 상단 공백 제거 */
	overflow:hidden;
}

main {
	min-height: 0 !important;
	padding:
    var(--content-gap)
    var(--content-gap)
    var(--content-gap)
    var(--content-gap) !important;
}

/* 4) 본문 스크롤은 page-main이 전담 */
.page-main{
	position: relative;
	height: calc(100vh - var(--header-h));
	margin-top: var(--header-h);
	padding: 10px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


/* 5) 헤더: 완전 중앙 + 무지개 라인 항상 보이게 */
.site-header{
	display:flex;
	position: fixed;          /* ✅ 기준점 확정 (중요) */
	top: 0; left: 0; right: 0;
	height: var(--header-h);
	align-items:center;
	justify-content:center;
	background:#fff;
	z-index:910;
}

.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		#8f00ff,
		#4b0082,
		#0000ff,
		#00ff00,
		#ffff00,
		#ff7f00,
		#ff0000,
		#ff7f00,
		#ffff00,
		#00ff00,
		#0000ff,
		#4b0082,
		#8f00ff
	);
}

.site-header .logo-text {
	font-family: 'MangoBoardByeolbyeol', InfinitySans-RegularA1, sans-serif;
	font-size: 25px;
	letter-spacing: 1px;
	margin: 0;
	padding: 0;
	text-decoration: none;   /* 밑줄 제거 */
	border: none;            /* 혹시 모르는 잔여 border 제거 */
	color:darksalmon;
}

/* 7) 공통 레이아웃 */
.container{margin: 0 auto !important; padding: 0 !important; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; }

/* ===== PC 좌측 사이드바 ===== */
.side-nav {
	display: none;       /* 기본은 숨김 → PC에서만 보이게 */
	position: fixed;
	top: 50px;           /* .site-header 높이만큼 아래 */
	left: 0;
	bottom: 0;
	width: 200px;
	padding: 16px 12px;
	background: #0f172a;
	color: #e2e8f0;
	flex-direction: column;
	z-index: 900;
}

.side-nav__logo {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 16px;
	color: #94a3b8;
}

.side-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.side-nav__item + .side-nav__item {
	margin-top: 8px;
}

.side-nav__item a {
	position: relative;
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	color: #e2e8f0;
	text-decoration: none;
	font-size: 14px;
}

.side-nav__item a:hover {
	background: #111827;
}

.side-nav__item--logout a {
	color: #f97373;
}

/* PC 좌측 메뉴: 현재 페이지 고정 강조 */
.side-nav__item.is-active a{
  background: rgba(255, 122, 77, 0.14); /* hover와 톤 맞춤 */
  color: #ff7a4d;
  font-weight: 800;
}
.side-nav__item.is-active a::before{
  content:'';
  position:absolute;
  left:0; top:10px; bottom:10px;
  width:3px;
  background:#ff7a4d;
  border-radius: 3px;
}

.side-admin{
	margin-top: auto; /* ✅ 핵심: 남는 공간을 위로 밀고 하단 고정 */
	padding: 12px 10px;
	border-top: 1px solid rgba(148,163,184,.18);
	display: flex;
	gap: 10px;
}

.side-admin__btn{
	flex: 1;
	border: 1px solid rgba(148,163,184,.25);
	background: transparent;
	color: #e2e8f0;
	font-weight: 900;
	padding: 10px 12px;
	border-radius: 12px;
	cursor: pointer;
}

.side-admin__btn--primary{
	border-color: rgba(255,107,80,.45);
	box-shadow: 0 0 0 1px rgba(255,107,80,.25), 0 10px 22px rgba(255,107,80,.10);
}




/* ===== 모바일 하단 바 ===== */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  min-width: 320px;
  height: 64px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12px;
  z-index: 950;
}

.bottom-nav__btn{
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
}

.bottom-nav__icon{ font-size: 0; margin-bottom: 2px; }

.bottom-nav__img{
  width: 28px; height: 28px;
  display: block;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.bottom-nav__label{
  font-size: 11px;
  color: #9ca3af;
  transition: color .25s ease, font-weight .25s ease;
}

/* ✅ hover: 컬러 + 살짝 위로 */
.bottom-nav__btn:hover .bottom-nav__img,
.bottom-nav__btn:focus-visible .bottom-nav__img{
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
}

.bottom-nav__btn:hover .bottom-nav__label,
.bottom-nav__btn:focus-visible .bottom-nav__label{
  color: #f97316;
}

/* ✅ active(현재 페이지): 항상 컬러 유지 */
.bottom-nav__btn.is-active .bottom-nav__img{
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

.bottom-nav__btn.is-active .bottom-nav__label{
  font-weight: 800;
  color: #f97316;
}

/* 센터 버튼은 그대로 */
.bottom-nav__center {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #ff9f7b, #ff6b50);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-16px);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: box-shadow .25s ease, transform .25s ease;
  cursor: pointer;
}
.bottom-nav__center:hover {
  transform: translateY(-18px);
  box-shadow: 0 10px 18px rgba(0,0,0,.25), 0 0 14px rgba(255,140,0,.7);
}


.hamburger {
	width: 22px;
	height: 16px;
	position: relative;
}

.hamburger span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #ffffff;
	border-radius: 999px;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* ===== 모바일 전체 메뉴 레이어 ===== */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.65);   /* 항상 진한 반투명 검정 (값은 취향대로) */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* 🔥 배경은 전환 효과 제거 */
	transition: none;
	z-index: 9999;
}
.nav-overlay--open {
	opacity: 1;              /* 바로 1로 변경 → 깜빡임 없이 검게 */
	visibility: visible;
	pointer-events: auto;    /* 열린 동안 클릭 가능 */
}
.nav-overlay__panel {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-radius: 0;
	padding: 20px;
	box-shadow: 2px 0 12px rgba(0,0,0,0.15);
	overflow-y: auto;
	z-index: 10000;

	/* 처음엔 화면 왼쪽 밖 */
	transform: translateX(-100%);
	/* ← 패널만 애니메이션 적용 */
	transition: transform 0.25s ease;
}
/* 오버레이가 열릴 때 패널 안으로 */
.nav-overlay--open .nav-overlay__panel {
	transform: translateX(0);
}

.nav-overlay__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.nav-overlay__title {
	font-size: 16px;
	font-weight: 600;
}

.nav-overlay__close {
	background: none;
	border: none;
	font-size: 28px;
	color: #333;
	cursor: pointer;
	transition: transform 0.25s ease, color 0.25s ease;
	transform-origin: center center;
}
.nav-overlay__close:hover {
	transform: rotate(180deg);
	color: #ff6b6b;   /* 원하는 색으로 변경 가능 */
}

.nav-overlay__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 16px;          /* ← 위에서 살짝 내려오게 */
}

.nav-overlay__item {
	border: none;
	background: #f8fafc;
	border-radius: 14px;
	padding: 14px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;   /* ← 세로 방향 가운데 정렬 */
	font-size: 11px;
	row-gap: 8px;              /* 아이콘 ↔ 글자 간격 일정하게 */
	cursor: pointer;          /* ← 추가 */
}

/* 아이콘 박스 */
.nav-overlay__icon {
	width: 32px;
	height: 32px;
	border-radius: 12px;
	background: #e5e7eb;
	display: flex;             /* ← 내부 이모지/이미지도 가운데 정렬 */
	align-items: center;
	justify-content: center;
	font-size: 18px;           /* 이모지일 때 크기 */
}
.nav-overlay__icon img {
	width: 20px;
	height: 20px;
	display: block;
}

/* 오버레이 열릴 때 스크롤 락 */
body.nav-overlay-open {
	overflow: hidden;           /* 페이지 전체 스크롤 잠금 */
	overscroll-behavior: none;  /* 모바일에서 튕김 방지 정도 */
}

/* ====== FOOTER 스타일 ====== */
.site-footer {
	padding: 16px;
	border-top: 1px solid #eee;
	color: #666;
	text-align: center;     /* ← 가운데 정렬 */
	font-size: 14px;
	background: #fafafa;    /* 필요하면 삭제 가능 */
}


/* ===== 반응형: PC vs 모바일 ===== */

/* =========================
   PC (>=900px): side-nav 고정 + bottom-nav 숨김
   ========================= */
@media (min-width: 900px){
	.side-nav{
		display: flex !important;
		position: fixed;
		top: var(--header-h) !important;
		left: 0;
		width: var(--sidenav-w) !important;
		height: calc(100vh - var(--header-h));
		overflow: hidden !important;
		z-index: 900;
	}

	.bottom-nav{ display: none !important; }

	.page-main{
		margin-left: calc(var(--sidenav-w)) !important;
		margin-right: 0px !important;
	}

	.container{
		margin: 0 !important;
	}
}

/* =========================
   Mobile (<900px): bottom-nav 공간 확보
   ========================= */
@media (max-width: 899px){
	:root{
		--header-h: 36px;
		--footer-h: 64px;
		--content-gap: 0px;
	}
	.page-main{
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding:
		var(--content-gap)
		var(--content-gap)
		calc(var(--content-gap) + 64px)
		var(--content-gap) !important;
	}
}

/* (선택) 헤더가 fixed일 때, 앵커 이동/포커스가 헤더에 가리지 않게 */
.page-main :target{
	scroll-margin-top: 12px;
}