@charset "utf-8";
/**
 * [File] /assets/css/style.css
 * [Role] 1440px 중앙 좌표계 및 10px 밀도 최적화 (Zero-Jitter)
 */

:root {
    --max-w: 1440px;
    --half-w: 720px;
    --lnb-w: 50px;
    --lnb-expand-w: 220px;
    --header-h: 60px;
    --gap: 10px; /* 사용자 지침: 일률적 10px 갭 적용 */

	/* --- [높이 설정 변경: 50/40 -> 40/30] --- */
    --m-h: 40px;		/* 대메뉴 높이 (수정) */
    --s-h: 20px;			/* 소메뉴 높이 (수정) */
    --f-size: 14px;
    --indent: 14px;

    --z-lnb: 100;
    --z-header: 80;
    --z-modal: 60;
/*
    --bg-body: #23272a;
    --bg-surface: #2c2f33;
    --text-dim: #b9bbbe;
    --text-hover: #ffffff;
    --primary-color: #03C75A;
    --border-color: #40444b;
*/
/* --- [지니의 정석: 색상 변수 보강] --- */
    --bg-body: #18191c;       /* 전체 배경: 더 짙은 회색 */
    --bg-surface: #2f3136;    /* 카드/상자 배경: 약간 밝은 회색 */
    --bg-input: #40444b;      /* 입력창 배경 */
    
    --text-main: #ffffff;     /* [중요] 메인 글자색: 순백색 (ⓐ, ⓑ 영역용) */
    --text-sub: #dcddde;      /* 서브 글자색: 연회색 (ⓒ 영역용) */
    --text-dim: #b9bbbe;      /* 흐린 글자색: 회색 */
    --text-hover: #ffffff;
    
    --primary-color: #03C75A;
    --border-color: #40444b;
    --shadow-color: rgba(0,0,0,0.3);

}

html { overflow-y: scroll; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Pretendard', sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    line-height: 1.5;
    overflow-x: hidden;
}

/* [LNB Container] */
.lnb-container {
    position: fixed; top: 0; left: 50%;
    margin-left: -720px;
    width: var(--lnb-w); height: 100vh; z-index: var(--z-lnb);
}
@media (max-width: 1440px) {
    .lnb-container { left: 0; margin-left: 0; }
}

.lnb-wrapper {
    position: absolute; top: 0; left: 0; width: var(--lnb-w); height: 100vh;
    background-color: var(--bg-surface); border-right: 1px solid var(--border-color);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; flex-direction: column;
}
.lnb-wrapper:hover { width: var(--lnb-expand-w); box-shadow: 10px 0 30px rgba(0,0,0,0.5); }

.lnb-menu-list { 
    list-style: none; margin-top: 10px; 
    flex: 1; overflow-y: auto; overflow-x: hidden;
}
.lnb-menu-list::-webkit-scrollbar { width: 0; }

.lnb-item {
    display: flex; 
	align-items: center; 
	height: var(--m-h); 
	cursor: pointer;
    transition: background-color 0.2s; 
	position: relative; 
	user-select: none;
}
.lnb-item:hover { background: rgba(255,255,255,0.05); }

.lnb-icon {
    width: var(--lnb-w); 
	min-width: var(--lnb-w);
	height: var(--m-h);
    display: flex; 
	justify-content: center; 
	align-items: center;
    font-size: 18px; 
	color: var(--text-dim); 
	transition: color 0.2s;
}
.lnb-item:hover .lnb-icon { color: var(--text-hover); }

.lnb-text {
    opacity: 0; white-space: nowrap; padding-left: 5px;
    font-size: var(--f-size); color: var(--text-dim); 
    transition: opacity 0.2s, color 0.2s, text-shadow 0.2s;
}
.lnb-wrapper:hover .lnb-text { opacity: 1; }
.lnb-item:hover .lnb-text { 
    color: var(--text-hover);
    text-shadow: 0 0 0.5px rgba(255,255,255,0.8);
}

.lnb-item.active .lnb-icon { color: var(--primary-color); }
.lnb-item.active .lnb-text { 
    color: var(--primary-color); 
    text-shadow: 0 0 0.5px rgba(3, 199, 90, 0.5);
}
.lnb-item.active:not(.sub-item)::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; background: var(--primary-color); border-radius: 0 4px 4px 0;
}

.arrow-icon {
    margin-left: auto; margin-right: 15px; font-size: 10px;
    color: var(--text-dim);
    opacity: 0; transition: transform 0.3s, opacity 0.2s;
}
.lnb-wrapper:hover .arrow-icon { opacity: 0.8; }

.lnb-sub-container {
    display: grid; grid-template-rows: 0fr; 
    transition: grid-template-rows 0.3s ease-out; background: rgba(0,0,0,0.1);
}
.lnb-sub-container.show { grid-template-rows: 1fr; }
.lnb-sub-list { list-style: none; overflow: hidden; }

.sub-item {
    display: flex; 
	align-items: center; 
	height: var(--s-h);
    padding-left: calc(var(--lnb-w) + var(--indent));
}
.sub-item:hover .lnb-text { color: var(--text-hover); }
.sub-item.active .lnb-text { color: var(--primary-color); }
.sub-item.active::before { display: none !important; }

/* [Header] 중앙 고착 */
.header-area {
    position: fixed; top: 0; left: 50%;
    margin-left: calc(-720px + var(--lnb-w));
    z-index: var(--z-header); width: calc(var(--max-w) - var(--lnb-w));
    height: var(--header-h); background-color: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
@media (max-width: 1440px) {
    .header-area { left: var(--lnb-w); margin-left: 0; width: calc(100% - var(--lnb-w)); }
}

/* [Main Body] 10px 갭 적용 */
.page-wrapper {
    margin: 0 auto; width: var(--max-w);
    padding-top: calc(var(--header-h) + var(--gap));
    padding-left: calc(var(--lnb-w) + var(--gap));
    padding-right: var(--gap);
}