@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; /* 작성자, 날짜 정보 확대 (요청하신 12pt보다 시원하게) */
}
#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; }

/* ============================================================
   최종 통합 보정 섹션 (버튼 위치 복구 및 간격 최적화)
   ============================================================ */

/* 1. 게시글 읽기(View): 초기 화면(8be85e.png) 버튼 위치 복구 */
/* 제목 영역 바로 아래, 우측 정렬로 자연스럽게 배치 */
.btn_bo_user_goj {
    position: static !important;      /* 공중에 떠다니는 absolute 해제 */
    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;
}

/* 2. 게시글 본문 이미지: 1200px 폭에 꽉 차게 & 고화질 */
#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;
}

/* 3. 댓글 등록 버튼: 입력창('댓글을 입력해주세요')과 간격 띄우기 */
#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;      /* 입력창과의 확실한 여백 */
}

/* 4. 글쓰기/수정(Write) 페이지: 항목 간 여백 및 버튼 정렬 */
.goj_write_wrap .w_row {
    margin-bottom: 30px !important;   /* 이름, 제목 등 항목 간 간격 확대 */
}
.goj_write_wrap .btn_confirm {
    text-align: right !important;     /* 버튼 우측 정렬 */
    display: block !important;
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 1px solid #222 !important;
}
.btn_confirm .btn_grey,
.btn_confirm .btn_submit {
    display: inline-block !important;
    width: 180px !important;          /* 버튼 크기 적정화 */
    height: 55px !important;
    line-height: 55px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
}

/* [글쓰기 페이지 전용] 항목 간격 및 버튼 정렬 */
.goj_write_wrap .w_row {
    margin-bottom: 35px !important; /* 이름, 제목, 에디터 사이의 간격을 시원하게 확대 */
}

.goj_write_wrap .file_box label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: #fff;
}

.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;
}

/* [댓글 영역] 입력창과 등록 버튼 간격 */
#bo_vc_w textarea {
    margin-bottom: 20px !important; /* '댓글을 입력해주세요'와 '등록' 버튼 사이 간격 */
}

/* 1. 모든 버튼 텍스트 수직 중앙 정렬 보정 */
.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;          /* 줄간격 초기화로 쏠림 방지 */
}

/* 2. 상단 버튼(목록으로, 수정, 삭제) 크기 축소 */
#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;
}

/* 3. 하단 큰 버튼(작성완료, 댓글등록) 전용 높이 유지 */
.goj_write_wrap .btn_confirm .btn_grey,
.goj_write_wrap .btn_confirm .btn_submit,
#bo_vc_w .btn_submit {
    width: 180px !important;            /* 버튼 너비 살짝 조절 */
    height: 55px !important;            /* 하단 버튼은 큼직하게 유지 */
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   강사 소개 페이지 (teacher.php) 전용 디자인 - 기존 게시판 레이아웃 간섭 방지
   ========================================================================== */

/* 1. 강사 상단 탭 (원형 프로필) 영역 */
.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 { cursor: pointer; }
.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%); }

/* 2. 구분선 */
.divider_line {
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: #222;
    margin: 0 auto 60px auto;
}

/* 3. 강사 상세 프로필 영역 (이미지 2367b8.jpg 스타일) */
.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 { margin-bottom: 30px; }
.name_box .name {
    font-size: 42px !important;
    font-weight: 800;
    color: #fff;
    border: none !important; /* 기존 게시판 border 간섭 제거 */
}
.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);
}

/* 모바일 대응 */
@media (max-width: 991px) {
    .flex_container { flex-direction: column; text-align: center; }
    .info_area { text-align: center; }
    .career_list li { display: inline-block; width: 100%; text-align: left; }
    .name_box .short_line { margin: 10px auto; }
}