/* ==========================================================================
   1. 초기화 및 브랜드 변수 (Variables & Reset)
   ========================================================================== */
:root {
    --main-color: #A61A30;    /* Seed Red */
    --sub-color: #58595B;     /* Seed Gray */
    --dark-color: #222222;    /* Seed Dark */
    --text-color: #333333;
    --gray-color: #777777;
    --border-color: #E1E1E1;
    --bg-light: #F8F9FA;
    
    --header-height: 90px;
    --transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* [핵심 수정] 모바일 우측 공백 방지 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { 
    margin: 0; padding: 0; 
    font-family: 'Pretendard', sans-serif; 
    color: var(--text-color); 
    line-height: 1.6; 
    background-color: #fff; 
    word-break: keep-all; 
    /* 모바일 가로 스크롤(우측 공백) 방지 */
    max-width: 100%;
    overflow-x: hidden; 
    position: relative;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* 공통 컨테이너 */
.head_width, .container, .ft_cnt, .board-container { 
    width: 100%;
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* ==========================================================================
   2. 헤더 & 네비게이션 (Full-down 메뉴 로직 유지)
   ========================================================================== */
#hd { 
    background: #fff; 
    border-bottom: 1px solid var(--border-color); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    transition: var(--transition);
}

#hd.scrolled { box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

#hd .head_menu { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: var(--header-height); 
    position: relative;
    z-index: 1002;
}

.logo img { height: 45px; }

#gnb { flex: 1; display: flex; justify-content: center; height: 100%; }
.main_menu { display: flex; gap: 50px; height: 100%; position: relative; }

.main_menu .dept1 { position: relative; height: 100%; } 
.main_menu .dept1 > a { 
    display: flex; align-items: center; height: 100%;
    font-weight: 700; font-size: 18px; color: var(--dark-color);
    padding: 0 10px;
}
.main_menu .dept1:hover > a { color: var(--main-color); }

.menu_bg {
    position: absolute; 
    top: var(--header-height); 
    left: 0;
    width: 100%; 
    height: 0; 
    background: #fff;
    z-index: 1001;
    overflow: hidden; 
    transition: height 0.3s ease-in-out;
}

/* 헤더 호버/오픈 시 배경 하강 */
#hd.open .menu_bg, #hd:hover .menu_bg { 
    height: 220px; 
    border-top: 1px solid #eee; 
    box-shadow: 0 15px 20px rgba(0,0,0,0.05); 
}

.sub_menu { 
    display: none; 
    position: absolute; 
    top: var(--header-height); 
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    min-width: 140px;
    z-index: 1002;
    text-align: center;
}

#hd.open .sub_menu, #hd:hover .sub_menu { display: block; }

.sub_menu li a { 
    display: block; 
    padding: 10px 0; 
    font-size: 15px; 
    color: var(--gray-color); 
    font-weight: 500;
    white-space: nowrap;
}
.sub_menu li a:hover { color: var(--main-color); font-weight: 700; }

.head_login_wrap { display: flex; align-items: center; z-index: 1002; }
.head_login { display: flex; align-items: center; gap: 15px; font-size: 13px; color: var(--gray-color); }
.head_login li { position: relative; }
.head_login li + li::before { 
    content: ""; display: inline-block; width: 1px; height: 10px; background: #ddd; 
    position: absolute; left: -8px; top: 50%; transform: translateY(-50%); 
}

/* ==========================================================================
   3. 메인 비주얼 & 섹션
   ========================================================================== */
#main_visual { height: 750px; overflow: hidden; position: relative; background: #000; }
#video_area, .bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.ban_group { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    text-align: center; color: #fff; width: 100%; z-index: 10; 
}
.ban_group .txt { font-size: 55px; font-weight: 800; margin-bottom: 20px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); line-height: 1.2; }
.ban_group .desc { font-size: 20px; opacity: 0.9; font-weight: 300; letter-spacing: -0.5px; }

.sk-title-area { text-align: center; margin-bottom: 50px; }
.sk-title-area h2 { font-size: 36px; font-weight: 800; color: #222; }
.sk-title-area .line { width: 50px; height: 3px; background: var(--main-color); margin: 20px auto; }

/* ==========================================================================
   4. 게시판 & 레퍼런스/ABOUT 헤더 통합
   ========================================================================== */
.sub_visual { padding: 80px 0; text-align: center; color: #fff; background: var(--dark-color); }
.sub_visual h2 { font-size: 36px; font-weight: 800; margin-bottom: 10px; }

.board-container { max-width: 1100px; margin: 60px auto; }
.board-container table { width: 100% !important; border-collapse: collapse; }
.board-container th, .board-container td { padding: 15px; border-bottom: 1px solid var(--border-color); text-align: center; }

/* [공통] 서브 헤더 배경 (레퍼런스 & ABOUT 통일) */
.ref-header-bg, .about-header-bg { 
    background-color: #f8f9fa; 
    padding: 120px 0 90px; 
    text-align: center; 
    border-bottom: 1px solid var(--border-color);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 패럴랙스 효과 */
}

.ref-header-bg { 
    background-image: linear-gradient(rgba(248, 249, 250, 0.85), rgba(248, 249, 250, 0.85)),
                      url('/uploads/banners/reference.jpg'); 
}


.ref-header-bg h2, .about-header-bg h2 { 
    font-size: 46px; 
    font-weight: 800; 
    color: #111; 
    margin-bottom: 20px; 
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.ref-header-bg h2::after, .about-header-bg h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 4px;
    background: var(--main-color);
}

.ref-header-bg p, .about-header-bg p { 
    font-size: 20px; 
    color: #555; 
    font-weight: 400; 
    margin-top: 25px;
}

/* 레퍼런스 그리드 설정 유지 */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 40px; padding: 80px 0; }
.ref-card { background: #fff; border: 1px solid #eee; transition: var(--transition); display: flex; flex-direction: column; overflow: hidden; }
.ref-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--main-color); }
.ref-thumb { width: 100%; height: 280px; overflow: hidden; position: relative; }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }

/* ==========================================================================
   5. 푸터 (Footer) - [수정] 상단 여백 제거 및 로고 간격 개선
   ========================================================================== */
#ft { 
    background: #1a1a1a; 
    color: #aaa; 
    /* 상단 패딩을 80px -> 50px로 줄여 로고 위 붕 뜨는 공백 제거 */
    padding: 50px 0 40px; 
    font-size: 15px; 
    text-align: center; 
}
.ft_cnt { display: flex; flex-direction: column; align-items: center; }

/* [수정] 로고 하단에 확실한 여백을 주어 정보와 떨어뜨림 */
.ft_logo { margin-bottom: 30px; }
.ft_logo img { opacity: 0.8; height: 40px; margin: 0 auto; }

.ft_info { display: flex; justify-content: center; gap: 25px; margin-bottom: 25px; color: #888; flex-wrap: wrap; }
.ft_info li { line-height: 1.6; }
.ft_info li b { color: #fff; font-weight: 500; }

.ft_copy { width: 100%; color: #444; font-size: 13px; margin-top: 20px; border-top: 1px solid #2a2a2a; padding-top: 25px; }

#top_btn { 
    position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; 
    background: var(--main-color); color: #fff; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; z-index: 99;
}

/* ==========================================================================
   6. 반응형 (Mobile 최적화)
   ========================================================================== */
@media (max-width: 768px) {
    :root { --header-height: 70px; }
    
    /* 가로 스크롤 방지를 위한 컨테이너 패딩 유지 */
    .container { padding: 0 15px; }

    #gnb, .menu_bg, .head_login_wrap { display: none; }
    .logo img { height: 35px; }

    /* 메인 비주얼 반응형 */
    #main_visual { height: 500px; }
    .ban_group .txt { font-size: 32px; word-break: break-all; }
    .ban_group .desc { font-size: 16px; }

    /* 헤더 폰트 축소 */
    .ref-header-bg, .about-header-bg { 
        padding: 80px 0 50px; 
        background-attachment: scroll; 
    }
    .ref-header-bg h2, .about-header-bg h2 { font-size: 28px; }
    .ref-header-bg p, .about-header-bg p { font-size: 15px; margin-top: 15px; }

    .ref-grid { grid-template-columns: 1fr; gap: 20px; }
    .ref-thumb { height: 220px; }

    /* 푸터 모바일 대응 */
    #ft { padding: 40px 0 30px; }
    .ft_logo { margin-bottom: 20px; }
    .ft_info { gap: 10px; font-size: 13px; }
}