/* ==========================================================================
   위앤아이티 블로그/뉴스룸 프레임리스 오픈형 그리드 스타일
   ========================================================================== */

/* 기존 그누보드 구조적 간섭 제거 */
#bo_gall .gall_row_custom {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 30px -15px 0 !important;
    list-style: none !important;
    clear: both !important;
}

/* [PC] 한 줄에 3개 배치 보장 */
#bo_gall .gall_li_custom {
    display: block !important;
    width: 33.3333% !important;
    padding: 0 15px !important;
    margin-bottom: 50px !important;
    box-sizing: border-box !important;
}

/* 오픈형 레이아웃 - 외곽 프레임, 테두리, 배경 제거 */
#bo_gall .gall_li_custom .gall_box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* 호버 시 박스가 뜨는 효과 대신 전체적인 투명도나 텍스트 컬러로 포인트 */
#bo_gall .gall_li_custom .gall_box:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 이미지 컨테이너 (16:9 / 800x450 비율) */
#bo_gall .gall_li_custom .gall_img_box {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* 800x450 = 16:9 */
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 16px !important;
}
#bo_gall .gall_li_custom .gall_img_box a {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

#bo_gall .gall_li_custom .gall_img_box img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: cover !important;

    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.4s ease-in-out !important;
}

/* 마우스 호버 시 부드러운 확대 효과 */
#bo_gall .gall_li_custom .gall_box:hover .gall_img_box img {
    transform: scale(1.03) !important;
}

/* 텍스트 컨텐츠 영역 여백 조절 (설명글이 빠지므로 위아래 여백 최적화) */
#bo_gall .gall_li_custom .gall_info_box {
    padding: 24px 4px 10px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
}

/* 게시물 제목 스타일 (크기 확대 및 트랜지션 추가) */
#bo_gall .gall_li_custom .bo_tit {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 21px !important; /* 예시 이미지처럼 폰트 크기 대폭 확대 */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #111 !important;
    text-decoration: none !important;
    margin-bottom: 20px !important; /* 날짜와의 간격 */
    word-break: keep-all !important; /* 단어 단위로 줄바꿈되어 텍스트가 더 깔끔하게 떨어짐 */
    transition: color 0.3s ease !important; /* 마우스 오버/아웃 시 서서히 색이 변하는 효과 */
}

/* 마우스 호버 시 제목 색상 변경 (밑줄 제거) */
#bo_gall .gall_li_custom .gall_box:hover .bo_tit {
    color: #0e96e7 !important; /* 요청하신 파란색 컬러 */
    text-decoration: none !important; /* 밑줄 삭제 */
}

/* 본문 요약문(설명) 완벽히 숨김 */
#bo_gall .gall_li_custom .bo_cnt_desc {
    display: none !important; 
}

/* 날짜 스타일 (하단 배치 및 회색조) */
#bo_gall .gall_li_custom .gall_date_info {
    margin-top: auto !important; /* Flexbox 구조에서 항상 맨 아래로 밀어냄 */
    font-size: 15px !important;
    color: #8a8a8a !important; /* 깔끔한 회색 */
    font-weight: 500 !important;
}

/* 카테고리 태그가 있을 경우 */
#bo_gall .gall_li_custom .bo_cate_link {
    align-self: flex-start !important;
    background: #f1f3f5 !important;
    color: #495057 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
}

/* 관리자 체크박스 디자인 위치 보정 */
#bo_gall .gall_chk.chk_box {
    position: absolute !important;
    top: 15px !important;
    left: 25px !important;
    z-index: 10 !important;
}
/* ==========================================================================
   위앤아이티 블로그/뉴스룸 상단 버튼 및 통계 영역 모던 스타일링
   ========================================================================== */

/* 상단 영역 Flexbox 배치 (좌측: 통계 / 우측: 버튼 그룹) */
#bo_gall #bo_btn_top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 15px !important;
}
/* 게시판 검색 팝업창이 다른 디자인(헤더 등)에 가려지지 않도록 최상단으로 끌어올림 */
.bo_sch_wrap {
    z-index: 999999 !important;
}
/* 좌측 Total 카운트 및 페이지 텍스트 스타일 */
#bo_gall #bo_list_total {
    float: none !important;
    font-size: 15px !important;
    color: #6c757d !important;
    line-height: 1 !important;
}
#bo_gall #bo_list_total span {
    font-weight: 700 !important;
    color: #111 !important;
    margin-right: 5px !important;
}


#bo_gall #gall_allchk {
    display: block !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    color: #495057 !important;
    position: relative !important;
}

/* 진짜(HTML 기본) 체크박스는 화면에서 완벽하게 숨김 */
#bo_gall #gall_allchk input[type="checkbox"].selec_chk {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    z-index: -1 !important;
    overflow: hidden !important;
}

#bo_gall #gall_allchk label {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    padding-left: 26px !important; /* 디자인 체크박스가 들어갈 자리 확보 */
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* 그누보드 디자인 체크박스(span) 수직 중앙 정렬 */
#bo_gall #gall_allchk label span {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border: 1px solid #d0d4df !important;
    border-radius: 3px !important;
    margin: 0 !important;
}

#bo_gall #gall_allchk input[type="checkbox"]:checked + label span {
    background: url(./img/chk.png) no-repeat 50% 50% #3a8afd !important;
    border-color: #1471f6 !important;
}
/* 검색창 전체 화면 덮개 (Fixed) */
#bo_gall .bo_sch_wrap {
    display: none;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 999999 !important;
}

/* 반투명 딤(Dim) 처리 배경 */
#bo_gall .bo_sch_bg {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important; /* 배경을 어둡게 눌러줌 */
    backdrop-filter: blur(3px) !important;
}

/* 검색창 흰색 박스 (화면 정중앙 배치) */
#bo_gall .bo_sch {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 완벽한 중앙 정렬 */
    background: #fff !important;
    padding: 60px 40px !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 480px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 불필요한 기존 제목 숨김 */
#bo_gall .bo_sch h3 { display: none !important; }
#bo_gall .bo_sch form { padding: 0 !important; }

/* 심플한 밑줄 형태의 검색 입력부 */
#bo_gall .sch_bar_custom {
    display: flex !important;
    align-items: center !important;
    border-bottom: 3px solid #111 !important; /* 진한 밑줄 */
    padding: 5px 0 10px 0 !important;
}

#bo_gall .sch_input_custom {
    flex-grow: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 20px !important; /* 큼지막한 글씨 */
    font-weight: 500 !important;
    color: #111 !important;
    outline: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#bo_gall .sch_input_custom::placeholder {
    color: #adb5bd !important;
    font-weight: 400 !important;
}

/* 돋보기 아이콘 버튼 */
#bo_gall .sch_btn_custom {
    background: transparent !important;
    border: none !important;
    font-size: 24px !important;
    color: #111 !important;
    cursor: pointer !important;
    padding: 0 5px !important;
    transition: transform 0.2s !important;
}

#bo_gall .sch_btn_custom:hover {
    transform: scale(1.1) !important; /* 호버 시 살짝 커지는 효과 */
    color: #3a8afd !important;
}

/* 닫기 (X) 버튼 */
#bo_gall .bo_sch_cls_custom {
    position: absolute !important;
    top: 15px !important; right: 20px !important;
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    color: #ced4da !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
    padding: 0 !important;
}

#bo_gall .bo_sch_cls_custom:hover {
    color: #ff4d4d !important;
}
#bo_gall .sch_result_box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f4f7f9 !important; /* 은은한 푸른빛/회색 배경 */
    padding: 16px 20px !important;
    border-radius: 10px !important;
    margin-bottom: 25px !important;
    border: 1px solid #e1e7ec !important;
}

#bo_gall .sch_result_box .sch_kwd {
    font-size: 15px !important;
    color: #495057 !important;
}

#bo_gall .sch_result_box .sch_kwd i {
    color: #3a8afd !important;
    margin-right: 6px !important;
}

#bo_gall .sch_result_box .sch_kwd strong {
    color: #111 !important;
    font-size: 17px !important;
}

/* 검색 초기화(전체목록) 버튼 */
#bo_gall .btn_sch_reset {
    display: inline-flex !important;
    align-items: center !important;
    background: #fff !important;
    color: #495057 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#bo_gall .btn_sch_reset i {
    margin-left: 6px !important;
    font-size: 14px !important;
    color: #868e96 !important;
    transition: color 0.2s !important;
}

#bo_gall .btn_sch_reset:hover {
    background: #fff0f0 !important;
    border-color: #ffc9c9 !important;
    color: #fa5252 !important; /* 호버 시 빨간색으로 경고/취소 느낌 부여 */
}

#bo_gall .btn_sch_reset:hover i {
    color: #fa5252 !important;
}

/* ==========================================================================
   위앤아이티 뉴스룸 - 게시글 읽기(View)
   ========================================================================== */

/* 전체 */
#bo_v {
    padding: 30px 0 130px 0 !important;
}

/* 제목 영역 */
#bo_v_title_wrap {
    margin-bottom: 20px !important;
}

#bo_v_title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
}

#bo_v_title_wrap .bo_v_cate {
    display: inline-block !important;
    margin-bottom: 12px !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    background: #eff5ff !important;
    color: #3a8afd !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#bo_v_title_wrap .bo_v_tit {
    display: block !important;
    color: #111 !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0;
    word-break: keep-all !important;
}

/* 작성일 + 버튼 영역 */
#bo_v_info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

#bo_v_info .profile_info_ct {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #888 !important;
    font-size: 15px !important;
}

#bo_v_info .if_date {
    color: #888 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

#bo_v_top {
    margin: 0 !important;
    padding: 0 !important;
}
#bo_gall .gall_chk.chk_box {
    display: none !important;
}
/* 본문 */
#bo_v_atc {
    min-height: 350px !important;
}

#bo_v_img {
    margin-bottom: 32px !important;
}

#bo_v_img img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

#bo_v_con {
    margin-bottom: 50px !important;
    color: #222 !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
    word-break: keep-all !important;
}

#bo_v_con img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* 첨부파일 / 링크 */
.bo_v_file_link_wrap {
    margin-top: 40px !important;
}

.bo_v_file_link_wrap ul {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bo_v_file_link_wrap li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    padding: 15px 18px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
}

.bo_v_file_link_wrap li i {
    flex: 0 0 auto !important;
    color: #3a8afd !important;
    font-size: 18px !important;
}

.bo_v_file_link_wrap li a {
    flex: 1 1 auto !important;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    word-break: break-all !important;
}

.bo_v_file_link_wrap li a:hover {
    text-decoration: underline !important;
}

.bo_v_file_link_wrap li span {
    flex: 0 0 auto !important;
    color: #aaa !important;
    font-size: 13px !important;
}

/* 이전글 / 다음글 */
.bo_v_nb {
    margin: 50px 0 0 !important;
    padding: 0 !important;
    border-top: 1px solid #111 !important;
    list-style: none !important;
}

.bo_v_nb li {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.bo_v_nb li .nb_tit {
    flex: 0 0 90px !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.bo_v_nb li .nb_tit i {
    margin-right: 5px !important;
    color: #aaa !important;
}

.bo_v_nb li a {
    flex: 1 1 auto !important;
    color: #444 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    word-break: keep-all !important;
}

.bo_v_nb li a:hover {
    color: #1d9bf0 !important;
}

.bo_v_nb li .nb_date {
    flex: 0 0 auto !important;
    color: #aaa !important;
    font-size: 14px !important;
}
/* ==========================================================================
   게시판 공통 버튼 스타일 - List / View 공용
   ========================================================================== */

.btn_bo_user {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
}

.btn_bo_user li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.btn_bo_user .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    background: #f5f5f5 !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.btn_bo_user .btn:hover {
    background: #e9ecef !important;
    border-color: #d8d8d8 !important;
    color: #222 !important;
    text-decoration: none !important;
}

.btn_bo_user .btn i {
    margin-right: 6px !important;
    color: inherit !important;
    font-size: 14px !important;
}

/* 글쓰기 버튼 공통 강조 */
.btn_bo_user a[title="글쓰기"],
.btn_bo_user .btn_write {
    background: #3a8afd !important;
    border-color: #3a8afd !important;
    color: #fff !important;
}

.btn_bo_user a[title="글쓰기"]:hover,
.btn_bo_user .btn_write:hover {
    background: #2871dc !important;
    border-color: #2871dc !important;
    color: #fff !important;
}

/* 더보기 버튼 */
.btn_bo_user .btn_more_opt {
    min-width: 36px !important;
    padding: 0 10px !important;
}
/* ==========================================================================
   게시판 공통 옵션 드롭다운 - List / View 공용
   ========================================================================== */

.btn_bo_user .more_opt {
    display: none;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-width: 130px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    list-style: none !important;
}

.btn_bo_user .more_opt li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    list-style: none !important;
}

.btn_bo_user .more_opt li button {
    display: block !important;
    width: 100% !important;
    padding: 10px 15px !important;
    border: 0 !important;
    background: transparent !important;
    color: #495057 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.btn_bo_user .more_opt li button:hover {
    background: #f1f3f5 !important;
    color: #000 !important;
}
#bo_v_con p {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
	font-size:19px;
}
/* ==========================================================================
   테크룸 상세 페이지 - 좌측 목차형 콘텐츠
   ========================================================================== */

.techroom_view_layout {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 80px !important;
    align-items: flex-start !important;
}

.techroom_toc_wrap {
    position: sticky !important;
    top: 20px !important;
    align-self: start !important;
}

.techroom_toc_title {
    display: block !important;
    margin-bottom: 18px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   테크룸 목차 디자인 보강
   ========================================================================== */

.techroom_toc {
    padding: 4px 0 4px 0px;
}

.techroom_toc_title {
    display: block !important;
    margin-bottom: 20px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.techroom_toc ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.techroom_toc li {
    position: relative !important;
    margin: 0 0 13px 0 !important;
    padding: 0 !important;
}

.techroom_toc li a {
    position: relative !important;
    display: inline-block !important;
    max-width: 100% !important;
    color: #777 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    word-break: keep-all !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.techroom_toc li a:hover {
    color: #111 !important;
}

/* h4 하위 목차 */
.techroom_toc li.is-depth-2 {
    padding-left: 14px !important;
}

.techroom_toc li.is-depth-2 a {
    color: #888 !important;
    font-size: 14px !important;
}

/* 현재 활성 목차 */
.techroom_toc li.is-active > a {
    color: #111 !important;
    font-weight: 700 !important;
    padding-left: 22px !important;
}

/* 활성 목차 앞 > 표시 */
.techroom_toc li.is-active > a::before {
    content: "›" !important;
    position: absolute !important;
    left: 4px !important;
    top: 0 !important;
    color: #1d74ff !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

/* 활성 목차 밑줄 */
.techroom_toc li.is-active > a::after {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    right: 0 !important;
    bottom: -5px !important;
    height: 2px !important;
    background: #1d74ff !important;
    border-radius: 999px !important;
}

/* 하위 목차가 active일 때 밑줄 위치 보정 */
.techroom_toc li.is-depth-2.is-active > a::after {
    left: 14px !important;
}

.techroom_toc li.is-depth-2 {
    padding-left: 14px !important;
}

.techroom_toc li.is-depth-2 a {
    color: #777 !important;
    font-size: 14px !important;
}

.techroom_content_wrap {
    min-width: 0 !important;
}

.techroom_content h2 {
    margin: 72px 0 24px 0 !important;
    color: #111 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.03em !important;
    scroll-margin-top: 120px !important;
}

.techroom_content h2:first-child {
    margin-top: 0 !important;
}

.techroom_content h3 {
    margin: 48px 0 18px 0 !important;
    color: #111 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    scroll-margin-top: 120px !important;
}

.techroom_content p {
    margin: 0 0 12px 0 !important;
}
/* ==========================================================================
   테크룸 목차 레이아웃 최종 보정
   ========================================================================== */

/* PC: 좌측 목차 + 우측 본문 */
@media (min-width: 1101px) {
    .techroom_view_layout {
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        gap: 56px !important;
        align-items: flex-start !important;
    }

    .techroom_toc_wrap {
        display: block !important;
        position: sticky !important;
        top: 40px !important;
        align-self: start !important;
        max-height: calc(100vh - 50px) !important;
        overflow-y: auto !important;
        padding-right: 10px !important;
    }

    .techroom_content_wrap {
        min-width: 0 !important;
    }
}

/* 태블릿 이하: 목차 숨김 */
@media (max-width: 1100px) {
    .techroom_view_layout {
        display: block !important;
    }

    .techroom_toc_wrap {
        display: none !important;
    }
}

/* 목차 박스 */
.techroom_toc {
    padding: 4px 0 !important;
}

.techroom_toc_title {
    display: block !important;
    margin-bottom: 16px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* 목차 리스트 초기화 */
.techroom_toc ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.techroom_toc li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 목차 링크 공통 */
.techroom_toc li a {
    position: relative !important;
    display: inline-block !important;
    max-width: 100% !important;
    color: #777 !important;
    text-decoration: none !important;
    word-break: keep-all !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.techroom_toc li a:hover {
    color: #111 !important;
    text-decoration: none !important;
}

/* h2 목차 */
.techroom_toc li.is-depth-1 {
    margin-bottom: 8px !important;
}

.techroom_toc li.is-depth-1 > a {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #555 !important;
}

/* h3 목차 */
.techroom_toc li.is-depth-2 {
    padding-left: 12px !important;
    margin-bottom: 5px !important;
}

.techroom_toc li.is-depth-2 > a {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.32 !important;
    color: #888 !important;
}

/* active */
.techroom_toc li.is-active > a {
    color: #111 !important;
    font-weight: 700 !important;
    padding-left: 18px !important;
}

/* active 앞 화살표 */
.techroom_toc li.is-active > a::before {
    content: "›" !important;
    position: absolute !important;
    left: 3px !important;
    top: 0 !important;
    color: #1d74ff !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

/* active 밑줄 */
.techroom_toc li.is-active > a::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 0 !important;
    bottom: -3px !important;
    height: 2px !important;
    background: #1d74ff !important;
    border-radius: 999px !important;
}

/* 목차 스크롤바 */
.techroom_toc_wrap::-webkit-scrollbar {
    width: 4px !important;
}

.techroom_toc_wrap::-webkit-scrollbar-thumb {
    background: #d0d7de !important;
    border-radius: 999px !important;
}
/* 모바일에서는 일반 본문형으로 */
@media (max-width: 1024px) {
    .techroom_view_layout {
        display: block !important;
    }

    .techroom_toc_wrap {
        display: none !important;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    #bo_v {
        padding: 20px 0 50px 0 !important;
    }

    #bo_v_title_wrap .bo_v_tit {
        font-size: 28px !important;
        line-height: 1.4 !important;
    }

    #bo_v_info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 32px !important;
        padding-bottom: 20px !important;
    }

    #bo_v_top .btn_bo_user {
        gap: 4px !important;
    }

    #bo_v_con {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .bo_v_file_link_wrap li {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .bo_v_file_link_wrap li span {
        margin-left: 0 !important;
    }

    .bo_v_nb li {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .bo_v_nb li .nb_tit {
        flex: 0 0 70px !important;
    }

    .bo_v_nb li .nb_date {
        width: 100% !important;
        padding-left: 78px !important;
    }
}

/* 모바일 대응 */
@media (max-width: 640px) {
    #bo_gall .sch_result_box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    #bo_gall .btn_sch_reset {
        width: 100% !important;
        justify-content: center !important;
    }
	
    #bo_v_title_wrap .bo_v_tit { font-size: 24px !important; }
    #bo_v_info { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }
    .bo_v_nb li { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .bo_v_nb li .nb_date { margin-left: 0 !important; }
}
/* --------------------------------------------------------------------------
   [상단 버튼 영역 반응형 (모바일)]
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    #bo_gall #bo_btn_top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
}
/* --------------------------------------------------------------------------
   [반응형 분기 처리]
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #bo_gall .gall_li_custom {
        width: 50% !important;
        margin-bottom: 40px !important;
    }
    #bo_gall .gall_li_custom .bo_tit {
        font-size: 16px !important;
    }
}

@media (max-width: 640px) {
    #bo_gall .gall_row_custom {
        margin: 20px 0 0 0 !important;
    }
    #bo_gall .gall_li_custom {
        width: 100% !important;
        padding: 0 !important; /* 모바일 전면 채우기 */
        margin-bottom: 35px !important;
    }
}