@import url('cdn.jsdelivr.net');

:root {
/* Base Unit: 40px */
    --gap-base: 40px;

    /* 배수 (Multiples) */
    --gap:  var(--gap-base);       /* 40px */
    --gap2: calc(var(--gap-base) * 2); /* 80px */
    --gap3: calc(var(--gap-base) * 3); /* 120px */

    /* 약수 (Divisors) */
    --gaph: calc(var(--gap-base) / 2); /* 20px (Half) */
    --gapq: calc(var(--gap-base) / 4); /* 10px (Quarter) */
}

/* 1. 전체 초기화 (기본 여백 제거) */
* { margin: 0; padding: 0; -webkit-box-sizing:border-box !important; -moz-box-sizing:border-box !important; box-sizing:border-box !important; text-decoration: none; }
html, body { width: 100%; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; color: #333; line-height: 1.6; font-size:1em;}

/*그누보드 그대로*/
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
#gnb_all {display:none;position:fixed;top:0;width:100%;padding-top:80px;height:100%;background:rgba(0,0,0,0.9);z-index:999999;color:#fff;}
#gnb_all h2 {}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px 0;}
#gnb_all .gnb_al_li .gnb_al_a {z-index:999999;display:block;position:relative;margin-bottom:10px;color:#eee}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999999}

#hd_sch #sch_stx{float:left;width:90%;height:40px;border-radius:20px 0 0 20px;border:none; padding-left:40px; font-size:18px; }
#hd_sch #sch_submit{float:left;width:10%;height:40px;border-radius:0 20px 20px 0;border:none}

#search_all {display:none;position:fixed;top:0;width:100%;padding-top:40px;height:100%;background:rgba(0,0,0,0.9);z-index:1000;color:#fff;}
#search_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
.search_close_btn {float:right;width:40px;height:40px;background:none;color:#fff; border-radius:20px; border:2px solid #fff;vertical-align:top;font-size:18px}

/* 2. 헤더 스타일 (고정) */

a {
    text-decoration: none;
    color: inherit;
    display: inline-block; /* 클릭 영역 확보를 위해 필수 */
    transition: all 0.3s ease; /* 모든 변화를 부드럽게 */
}

ul, ol, li {
    list-style: none;
}
/* 1. Flexbox 레이아웃 유틸리티 */
.d-flex { display: flex; }
.justify-between { justify-content: space-between; } /* 양 끝으로 밀기 */
.justify-end { 
    justify-content: flex-end; 
}
.items-center { align-items: center; } /* 수직 중앙 정렬 */

/* 2. 텍스트 정렬 유틸리티 */
.text-right { text-align: right; }



.lh-gap2 { line-height: 80px !important; }

#header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 120px; /* 헤더 높이 120px */
    background: rgba(0,0,0,0.8); /* 반투명 검정 */
    color: white;
    z-index: 1000;
}


.header-row-1 {height: var(--gap2);}
.header-row-2 {height: var(--gap);}




#gnb_1dul { height: 40px; } /* header-row-2 높이에 맞춤 */

.gnb_1dli { height: 100%; display: flex; align-items: center; }

.gnb_1da {
    color: #fff;
    opacity: 0.8;
    transition: all 0.3s ease;
    padding: 5px 0;
    position: relative;
}

/* 호버 시 텍스트 강조 및 언더라인 효과 */
.gnb_1dli:hover .gnb_1da {
    opacity: 1;
    color: var(--lion-gold, #D4AF37);
}

/* 2단계 메뉴 (드롭다운) 박스 */
.gnb_2dul {
    display: none; /* 기본 숨김 */
    position: absolute;
    top: 40px; /* 헤더 높이만큼 아래로 */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 160px;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    border: 1px solid #eee;
}

.gnb_1dli:hover .gnb_2dul {
    display: block; /* 마우스 올리면 노출 */
}

/* 2단계 메뉴 리스트 */
.gnb_2dli a {
    display: block;
    padding: 10px 20px;
    color: #333;
    transition: background 0.2s;
    white-space: nowrap;
}

.gnb_2dli a:hover {
    background: #f8f8f8;
    color: var(--lion-gold, #D4AF37);
}

/* 그누보드 기본 span.bg(하위분류 화살표 등) 숨김 처리 (심플 디자인용) */
.gnb_1dli .bg { display: none; }


/* 3. 중앙 정렬 컨테이너 (1360px로 가두기) */
.uc-container {
    width: 1360px; /* 폭을 딱 정함 */
    margin: 0 auto; /* 화면 가운데로 보냄 */
}

/* 4. 메인 배너 (화면 가득) */
.hero-banner {
    width: 100%;
    height: 100vh; /* 화면 높이 100% */
    background: #777; /* 회색 배경 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. 본문 영역 (헤더에 안 가려지게 여백 주기) */
#main-content {
	min-height: 100vh;
    padding-top: 140px; /* 헤더 120px + 여유 20px */
    padding-bottom: 80px;
}

/* 6. 왼쪽 본문(75%)과 오른쪽 사이드바(25%) 배치 */
.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 스티키 작동 필수 */
}

article { width: 75%; min-height: 1000px; background: #f5f5f5; }
aside { 
    width: 20%; 
    position: sticky; 
    top: 140px; /* 스크롤 내려도 여기에 딱 멈춤 */
    background: #ddd;
}

/* 4. 푸터 (100vh) */
footer {
    width: 100%;
    height: 100vh;
    background: linear-gradient(35deg, #000022 0%, #111 100%);
	color:#999;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 윗줄 메뉴 스타일 */
.footer-top {
    gap: var(--gap);           /* 메뉴 간격 40px */
    padding-bottom: var(--gap); /* 아래쪽과 간격 40px */
    border-bottom: 1px solid #333;
    margin-bottom: var(--gap);
	text-align:right;
}

.footer-top a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #666;
}

.footer-top a:hover {
    color: var(--lion-gold);
}

/* 아랫줄 레이아웃 */
.footer-bottom {
    gap: var(--gap);
}

.footer-bottom .card {
    flex: 1; /* 동일한 비율로 나눔 */
}

/* 유틸리티 클래스 보정 */
.op-07 { opacity: 0.7; }
.items-start { align-items: flex-start; }
.pt-gapq { padding-top: var(--gapq); } /* 10px */
.pt-gaph { padding-top: var(--gaph); } /* 20px */

/******************** 텍스트 ********************/

/* [XS] 12px : 아주 작은 캡션, 메타 정보 */
.text-xs { 
    font-size: 0.75rem; 
    letter-spacing: 0.02em; 
    line-height: 1.4; 
}

/* [SM] 14px : 보조 텍스트, 날짜 */
.text-sm { 
    font-size: 0.875rem; 
    letter-spacing: 0.01em; 
    line-height: 1.5; 
}

/* [MD] 16px : 기본 본문 (Base) */
.text-md { 
    font-size: 1rem; 
    letter-spacing: 0em; 
    line-height: 1.7; 
}

/* [LG] 18px : 강조 본문 */
.text-lg { 
    font-size: 1.125rem; 
    letter-spacing: -0.01em; 
    line-height: 1.5; 
}

/* [XL] 20px : 소제목 */
.text-xl { 
    font-size: 1.25rem; 
    letter-spacing: -0.02em; 
    line-height: 1.4; 
}

/* [2XL] 24px : 중제목 */
.text-2xl { 
    font-size: 1.5rem; 
    letter-spacing: -0.03em; 
    line-height: 1.3; 
}

/* [3XL] 36px : 대제목 */
.text-3xl { 
    font-size: 2.25rem; 
    letter-spacing: -0.04em; 
    line-height: 1.2; 
}

/* [Hero] 64px : 메인 배너용 초대형 문구 */
.text-hero { 
    font-size: 4rem; 
    letter-spacing: -0.06em; 
    line-height: 1.1; 
}