@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* [0] 공통 초기화 */
body, h1, h2, h3, h4, h5, h6, p, span, a, div, input, button, textarea {
    font-family: 'Noto Sans KR', sans-serif !important;
    letter-spacing: -0.5px;
}
body { background-color: #000 !important; }
#hd, #wrapper { min-width:1200px; }
.inner_1200 { max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

/* [1] 헤더 디자인 - 화이트 배경 */
#hd { position: relative; width: 100%; z-index: 1000; background: #fff !important; border-bottom: 1px solid #eee; }
.hd_top_bar { background: #f8f8f8 !important; height: 50px; border-bottom: 1px solid #eee; }
.top_flex { display: flex; justify-content: flex-end; align-items: center; height: 50px; }
.sns_icons { display: flex; gap: 12px; }
.sns_link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff !important; text-decoration: none !important; }
.sns_link.naver { background: #03cf5d !important; font-weight: 900; font-size: 16px; }
.sns_link.youtube { background: #ff0000 !important; font-size: 18px; }

#hd_wrapper { height: 110px; background: #fff !important; }
.header_flex { display: flex; justify-content: space-between; align-items: center; height: 110px; }
#logo img { height: 180px; width: auto; }
.gnb_menu { display: flex; gap: 45px; }
.gnb_menu li a { color: #333 !important; font-weight: 800; font-size: 18px; text-shadow: none !important; }
.gnb_menu li a:hover { color: #ff3061 !important; }

/* [2] 메인 슬라이더 */
#wrapper.main_wrapper { width: 100% !important; padding: 0 !important; }
.m_visual.slick_slider { width: 100%; height: 600px; background: #000; overflow: hidden; }
.slick_item {
    width: 100%; height: 600px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.slick_item::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }
.ani_text { z-index: 5; text-align: center; color: #fff; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ani_text h2 { font-size: 3em; font-weight: 900; line-height: 1.4; margin-bottom: 20px; animation: fadeInUp 1.2s ease-out forwards; opacity: 0; }
.ani_text p { font-size: 1.3em; line-height: 1.8; opacity: 0; animation: fadeInUp 1.2s ease-out forwards; animation-delay: 0.3s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

/* [3] 공통 섹션 타이틀 */
.sec_title_sub { font-size: 32px; font-weight: 900; color: #fff; text-align: center; margin-bottom: 50px; }
.p_color { color: #ff3061; display: block; font-size: 16px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; }
.sec_desc_sub { color: #888; text-align: center; margin-top: -40px; margin-bottom: 50px; font-size: 16px; }

/* [4] 시설 안내 / [5] 유튜브 / [6] 구분선 / [7] 오시는 길 */
.facility_sec { background: #1a1a1a !important; padding: 100px 0; }
.gallery_grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.gallery_item { width: calc(25% - 15px); }
.gallery_item .img_box { position: relative; padding-bottom: 70%; overflow: hidden; border-radius: 10px; border: 1px solid #333; }
.gallery_item img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }

.main_yt_sec { background: #000 !important; padding: 100px 0; overflow: hidden; }
.main_yt_sec .sec_title { color: #fff !important; text-align: center; font-size: 32px; font-weight: 900; margin-bottom: 60px; }
.yt_slider_container { width: 100%; overflow: hidden; }
.yt_track { display: flex; width: max-content; animation: scroll 50s linear infinite; }
.yt_track:hover { animation-play-state: paused; }
.yt_item { width: 350px; margin: 0 20px; background: #1a1a1a; border-top: 25px solid #111; border-bottom: 25px solid #111; position: relative; overflow: visible; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.yt_item::before, .yt_item::after { content: ''; position: absolute; width: 100%; height: 12px; background-image: radial-gradient(circle, #444 4px, transparent 5px); background-size: 20px 12px; z-index: 2; }
.yt_item::before { top: -18px; left: 0; }
.yt_item::after { bottom: -18px; left: 0; }
.yt_item img { width: 100%; display: block; transition: 0.3s; }
.yt_item:hover { transform: scale(1.05); z-index: 10; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.section_divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent); background-color: #000; }
.map_sec { background: #000 !important; padding: 100px 0; }
.map_marker_label { padding: 8px 20px; background: #ff3061; color: #fff; border-radius: 30px; font-weight: 700; }

/* [8] 푸터 스타일 */
#ft { background: #1a1a1a; padding: 60px 0; color: #999; border-top: 1px solid #222; }
.ft_top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 30px; border-bottom: 1px solid #2a2a2a; margin-bottom: 30px; }
.ft_logo { display: flex; align-items: center; gap: 15px; }
.ft_logo img { height: 35px; filter: grayscale(1) brightness(1.5); opacity: 0.8; }
.ft_logo_text { color: #eee; font-size: 20px; font-weight: 800; letter-spacing: -1px; }
.ft_policy { display: flex; gap: 20px; list-style: none; }
.ft_policy li a { color: #888; font-size: 14px; text-decoration: none; }
.ft_policy li a:hover { color: #fff; }
.ft_bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.ft_info { line-height: 1.8; font-size: 14px; text-align: left; }
.ft_info p { margin: 0; }
.ft_info .copy { margin-top: 15px; color: #555; font-size: 13px; }
.ft_rel select { background: #333; color: #aaa; border: none; padding: 10px 15px; width: 200px; font-size: 13px; border-radius: 3px; outline: none; cursor: pointer; }

/* [9] 서브 페이지 보정 */
#wrapper:not(.main_wrapper) { width: 1200px !important; margin: 0 auto; padding: 50px 0 !important; min-height: 600px; }
#wrapper:not(.main_wrapper) ~ #hd .gnb_menu li a { color: #333 !important; text-shadow: none; }
body:not(.main-body) #hd { background: #fff; border-bottom: 1px solid #eee; position: relative; }

/* [10] 게시판 리스트 디자인 */
.board_visual { background:#000; padding:100px 0 60px; border-bottom:1px solid #222; }
.board_visual h2 { font-size:65px; font-weight:900; color:#fff; margin:0; letter-spacing:-3px; text-transform:uppercase; }
.board_visual .sub_txt { color: #fff !important; font-size: 16px; margin-top: 5px; }

.board_list_container { background:#000; padding-bottom:80px; }
.goj_board_list { border-top: 2px solid #222; }
.goj_item { border-bottom:1px solid #1a1a1a; padding:25px 0; transition: 0.3s; }
.goj_item:hover { background: #080808; }
.item_link { display: flex; align-items: center; text-decoration: none !important; }

.goj_item .num_box {
    width: 60px; color: #444; font-size: 22px; font-weight: 700;
    margin-right: 40px; text-align: center; flex-shrink: 0;
}
.goj_item .txt_box { display: flex; align-items: center; width: 100%; }
.goj_item h3 { color: #fff; font-size: 18px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.goj_item h3 .category { color: #ff3061; font-size: 14px; margin-right: 5px; white-space: nowrap; }
.goj_item h3 .meta_inline { font-size: 14px; color: #555; font-weight: 400; margin-left: 10px; white-space: nowrap; }

/* 하단 버튼 및 페이징 정렬 */
.board_ft { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #222; }

/* 버튼 공통 디자인 */
.btn_pink { background: #ff3061; color: #fff !important; padding: 12px 35px; border-radius: 5px; font-weight: 700; text-decoration: none; font-size: 16px; transition: 0.3s; display: inline-block; border:none; cursor:pointer; }
.btn_grey { background: #444; color: #fff; padding: 12px 35px; border-radius: 5px; font-weight: 700; text-decoration: none; font-size: 16px; transition: 0.3s; display: inline-block; border:none; }

/* --- [최종 수정] 글보기 페이지 레이아웃 및 폰트 확대 --- */
.goj_view_wrap, .goj_write_wrap { background:#000; color:#fff; padding:60px 0; min-height:600px; width:100%; }

/* 상단 정보 영역 (ID 매칭: bo_v_info_goj) */
#bo_v_info_goj {
    border-bottom: 1px solid #222;
    padding-bottom: 30px;
    margin-bottom: 40px;
}
#bo_v_info_goj .view_cate {
    color: #ff3061;
    font-size: 22px;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}
#bo_v_info_goj h2#bo_v_title {
    font-size: 48px !important;
    font-weight: 900;
    color: #fff;
    margin: 20px 0;
    line-height: 1.2;
}
#bo_v_info_goj .v_meta {
    color: #bbb;
    font-size: 18px;
}
#bo_v_info_goj .v_meta span, #bo_v_info_goj .v_meta strong { font-size: 18px; }

/* 게시글 본문 및 이미지 영역 */
#bo_v_atc { width: 100%; margin: 0 auto; }

/* 1600px 이미지 대응: 1200px 폭 안에서 꽉 차게 출력 */
#bo_v_img img, .view_content img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 30px;
}

#bo_v_con {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 20px !important;
    line-height: 1.8;
    color: #eee;
    padding: 40px 0;
}

/* 버튼 위치 및 정렬 (ID 매칭: btn_bo_user_goj) */
.btn_bo_user_goj {
    margin: 60px 0 40px;
    padding: 25px 0;
    border-top: 1px solid #222;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100%;
}
.bo_v_left { display: flex; gap: 15px; }

/* 댓글창 설정 */
#bo_vc_w {
    width: 100% !important;
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background: #111;
    border-radius: 8px;
    border: 1px solid #222;
    box-sizing: border-box;
}
#bo_vc_w textarea {
    width: 100% !important;
    height: 160px !important;
    background: #000 !important;
    color: #ccc !important;
    border: 1px solid #333 !important;
    padding: 20px !important;
    font-size: 18px;
    line-height: 1.6;
    display: block;
}

/* 공통 버튼 스타일 보강 */
.btn_v_common { background:#222 !important; color:#ccc !important; padding:12px 30px; border-radius:3px; font-size:16px; text-decoration:none; border: 1px solid #333; transition: 0.3s; }
.btn_v_common:hover { background:#ff3061 !important; color:#fff !important; border-color:#ff3061; }
.btn_submit { background: #ff3061 !important; color: #fff !important; border: none; padding: 15px 40px; border-radius: 5px; font-weight: 700; cursor: pointer; font-size: 16px; }

/* 글쓰기 입력창 스타일 */
.frm_input { background:#111 !important; border:1px solid #333 !important; color:#fff !important; padding:10px !important; border-radius: 5px; width: 100%; box-sizing: border-box; }

/* ============================================================
   최종 통합 보정 섹션 (버튼 위치 복구 및 간격 최적화)
   ============================================================ */
.btn_bo_user_goj {
    position: static !important;
    display: block !important;
    text-align: right !important;
    margin: 20px 0 40px 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid #222 !important;
    clear: both;
}
.btn_bo_user_goj a,
.btn_bo_user_goj button {
    display: inline-block !important;
    margin-left: 6px !important;
    float: none !important;
}

#bo_v_atc img,
#bo_v_img img,
.view_content img {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: auto !important;
    margin: 30px auto !important;
    image-rendering: -webkit-optimize-contrast;
}

#bo_vc_w { margin-top: 60px !important; padding: 30px !important; }
#bo_vc_w textarea { margin-bottom: 20px !important; }
#bo_vc_w .btn_submit { display: block !important; margin-left: auto !important; margin-top: 15px !important; }

.goj_write_wrap .w_row { margin-bottom: 35px !important; }
.goj_write_wrap .btn_confirm {
    text-align: right !important;
    display: block !important;
    margin-top: 60px !important;
    padding-top: 30px !important;
    border-top: 1px solid #222;
}
.goj_write_wrap .btn_confirm .btn_grey,
.goj_write_wrap .btn_confirm .btn_submit {
    display: inline-block !important;
    width: 200px !important;
    height: 60px !important;
    line-height: 60px !important;
    font-size: 18px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
    text-align: center;
    border-radius: 5px;
}

.goj_write_wrap .btn_confirm .btn_grey,
.goj_write_wrap .btn_confirm .btn_submit,
.btn_b01, .btn_b02, .btn_admin, #bo_v_at .btn_b01,
#bo_vc_w .btn_submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    line-height: 1 !important;
}

#bo_v_top .btn_b01,
#bo_v_top .btn_b02,
#bo_v_top .btn_admin,
.view_btn_wrap a {
    width: auto !important;
    min-width: 80px !important;
    height: 40px !important;
    font-size: 14px !important;
    margin-left: 5px !important;
}

/* ==========================================================================
   강사 소개 페이지 (teacher.php) 전용 디자인
   ========================================================================== */
.teacher_tab_wrap { text-align: center; margin: 40px 0 50px 0; }
.teacher_tab_wrap ul { display: inline-flex; justify-content: center; gap: 30px; list-style: none; padding: 0; }
.tab_btn .img_box { width: 140px; height: 140px; border-radius: 50%; border: 3px solid #333; overflow: hidden; transition: 0.3s; }
.tab_btn .img_box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.tab_btn.active .img_box { border-color: #ff3061; box-shadow: 0 0 20px rgba(255, 48, 97, 0.6); }
.tab_btn.active .img_box img { filter: grayscale(0%); }

.profile_content { display: none; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.profile_content.active { display: block; }
.flex_container { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; }
.info_area { flex: 1; text-align: left; }
.name_box .name { font-size: 42px !important; font-weight: 800; color: #fff; border: none !important; }
.name_box .name span.point_gold { color: #d4af37 !important; margin-left: 10px; }
.name_box .short_line { width: 40px; height: 4px; background: #ff3061; margin-top: 10px; }
.career_tt { font-size: 20px !important; font-weight: 700; color: #ff3061; margin: 40px 0 20px 0 !important; display: flex; align-items: center; gap: 8px; }
.career_list { list-style: none; padding: 0; }
.career_list li { font-size: 17px; color: #ccc; margin-bottom: 12px; padding-left: 15px; position: relative; }
.career_list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background: #ff3061; border-radius: 50%; }
.photo_area { flex: 1; max-width: 550px; }
.photo_area img { width: 100%; border-radius: 15px; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* 시설 안내 호버 효과 */
.gallery_item .img_box { position: relative; overflow: hidden; border-radius: 10px; background: #000; }
.gallery_item .img_box img { transition: transform 0.5s ease, opacity 0.5s ease; display: block; width: 100%; }
.gallery_item:hover .img_box img { transform: scale(1.1); opacity: 0.8; }

/* ============================================================
   📱 [모바일 최종] 메뉴 실종 현상 해결 및 헤더/푸터 보정
   ============================================================ */
@media screen and (max-width: 1024px) {
    /* 1. 전체 가로폭 고정 및 넘침 방지 */
    #hd, #wrapper, .inner_1200, #hd_wrapper, #ft {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* 2. 헤더 높이 자동 조절 및 메뉴 강제 노출 */
    #hd_wrapper {
        height: auto !important; /* 고정 높이 110px 해제 */
        padding-bottom: 15px !important;
    }

    .header_flex {
        flex-direction: column !important; /* 세로 배치 */
        height: auto !important;
        display: flex !important; /* 강제 노출 */
    }

    /* 3. 로고 영역 */
    #logo {
        margin: 10px 0 15px 0 !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    #logo img {
        height: 50px !important; /* 로고 크기 적정화 */
        width: auto !important;
    }

    /* 4. [핵심] 사라진 메뉴(GNB) 다시 살리기 */
    .gnb_menu {
        display: flex !important; /* 숨김 방지 */
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        justify-content: space-between !important; /* 메뉴 간격 균등 */
        padding: 10px 5px !important;
        margin: 0 !important;
        border-top: 1px solid #f0f0f0 !important; /* 구분선 추가 */
        list-style: none !important;
    }

    .gnb_menu li {
        flex: 1 !important;
        text-align: center !important;
        display: block !important;
    }

    .gnb_menu li a {
        color: #333 !important; /* 흰색 배경에서 잘 보이도록 검정 계열 */
        font-size: 13px !important;
        font-weight: 800 !important;
        padding: 8px 0 !important;
        display: block !important;
        white-space: nowrap !important; /* 줄바꿈 방지 */
    }

    /* 5. 푸터 텍스트 중앙 정렬 및 여백 조정 */
    #ft { text-align: center !important; padding: 40px 15px !important; }
    .ft_top, .ft_bottom { flex-direction: column !important; gap: 15px !important; }
    .ft_info { font-size: 13px !important; line-height: 1.6 !important; }
    .ft_rel select { width: 100% !important; margin-top: 20px; }
}