/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */
/* ==========================================================================
   1. 폰트 & 기본 골격 (Reset - White Version)
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 모든 요소에 Pretendard 적용 */
body, h1, h2, h3, h4, h5, h6, input, textarea, select, button, .btn-e, span, a, div, li, th, td {
    font-family: 'Pretendard', sans-serif !important;
}

body {
    background-color: #f4f6f9 !important; /* 배경: 아주 연한 회색 (눈이 편안함) */
    color: #333333 !important; /* 글자: 진한 회색 (완전 검정보다 부드러움) */
}

/* 주요 컨테이너 배경 투명화 (Body 색상 따라감) */
.wrapper, .container, .basic-body, .main-wrap, .sub-wrap, #hd, .header-wrap {
    background-color: transparent !important;
    border: none !important;
}

/* ==========================================================================
   2. 상단 헤더 & 탑바 (White Theme)
   ========================================================================== */
/* 헤더 전체 박스 */
.header-wrap, .top-header, .page-header-wrap {
    background-color: #ffffff !important; /* 배경 흰색 */
    border-bottom: 1px solid #e5e5e5 !important; /* 연한 회색 구분선 */
}

/* 탑바 메뉴 */
.top-header-nav li > a, 
.top-header-nav li > a > span {
    color: #666666 !important; /* 글씨 회색 */
    font-weight: 500 !important;
}
.top-header-nav li > a:hover, 
.top-header-nav li > a:hover > span {
    color: #007bff !important; /* 호버 시 파란색 */
}
.top-header-nav li > a i {
    color: #b0b0b0 !important; /* 아이콘 연한 회색 */
}

/* 메인 로고 영역 */
.header-title .container {
    border-bottom: none !important;
}
.header-title {
    background-color: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* 네비게이션바 (메뉴) */
.navbar {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}
.navbar-nav > li > .nav-link {
    color: #333 !important; /* 메뉴 글씨 진하게 */
    font-weight: 700 !important;
}
.navbar-nav > li > .nav-link:hover {
    color: #007bff !important; /* 포인트 컬러 */
}

/* 드롭다운 메뉴 (서브메뉴) */
.navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* 부드러운 그림자 */
}
.navbar-nav .dropdown-item {
    color: #555 !important;
}
.navbar-nav .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #007bff !important;
}

/* ==========================================================================
   3. 사이드바 (White Theme)
   ========================================================================== */
/* 사이드바 전체 배경 */
.basic-body-side, .sidebar-left {
    background-color: transparent !important;
}

/* [중요] 마이홈/로그인 박스 */
.op-member-box, .sidebar-member-box, .sidebar-member-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 박스 헤더 (마이홈 글씨 부분) */
.op-member-box .mb-title, 
.sidebar-member-box .mb-title,
.sidebar-left .sidebar-member-menu {
    background-color: #f8f9fa !important; /* 헤더는 아주 연한 회색 */
    color: #333 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* 박스 내부 텍스트 및 링크 */
.op-member-box a, .sidebar-member-box a, 
.sidebar-member-menu a {
    color: #555 !important;
}
.op-member-box li, .sidebar-member-box li {
    border-color: #f1f1f1 !important; /* 구분선 연하게 */
}

/* 모바일 사이드바 (offcanvas) */
.sidebar-left.offcanvas {
    background-color: #ffffff !important;
}
.sidebar-left .navbar-nav > li > a {
    color: #333 !important;
    border-color: #f1f1f1 !important;
}
.sidebar-left .navbar-nav > li.navbar-nav-home > a {
    background-color: #007bff !important; /* 포인트 컬러 */
    color: #fff !important;
}

/* ==========================================================================
   4. 게시판 & 컨텐츠 박스 (카드 UI 화 - White)
   ========================================================================== */
/* 모든 박스형 요소 스타일 통일 */
.eb-tplt, .board-list, .board-view, .bo-w-write, .eyoom-form, .sub-page,
.main-box, .latest-wrap {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* 그림자 아주 연하게 */
    padding: 20px !important;
    margin-bottom: 20px !important;
    color: #333 !important;
}

/* 게시판 테이블 헤더 */
.tbl_head01 thead th {
    background-color: #f9f9f9 !important;
    color: #333 !important;
    border-bottom: 1px solid #ddd !important;
    border-top: none !important;
    font-weight: 700 !important;
}

/* 게시판 테이블 바디 */
.tbl_head01 tbody td, .board-list tbody td {
    background-color: transparent !important;
    color: #555 !important;
    border-bottom: 1px solid #f1f1f1 !important;
}
.board-list tbody tr:hover td {
    background-color: #f8faff !important; /* 호버 시 아주 연한 블루틴트 */
}

/* 제목 글씨 */
.board-list .td-subject a {
    color: #333 !important;
}
.board-list .td-subject a:hover {
    color: #007bff !important;
}

/* ==========================================================================
   5. 입력창 & 버튼 (UI 요소 - White)
   ========================================================================== */
/* 입력창 (Input, Textarea, Select) */
input.frm_input, input[type="text"], input[type="password"], 
textarea, select, .eyoom-form .input input {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    border-radius: 6px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2) !important;
    background-color: #fff !important;
}

/* 버튼 (세련되게) */
.btn-e {
    border-radius: 6px !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
}

/* 주요 버튼 (글쓰기 등) - 깔끔한 블루 그라데이션 */
.btn-e-red, .btn-e-dark, .btn-submit {
    background: linear-gradient(135deg, #007bff 0%, #0062cc 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3) !important;
}

/* 일반 버튼 (취소, 목록 등) */
.btn-e-gray, .btn-e-white {
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
}
.btn-e-gray:hover, .btn-e-white:hover {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* ==========================================================================
   6. 푸터 & 기타 (White)
   ========================================================================== */
.footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    color: #777 !important;
}
.footer a {
    color: #555 !important;
}

/* 검색창 (헤더) */
.header-title-search .eyoom-form .input input {
    border-bottom: 2px solid #ddd !important;
    color: #333 !important;
}
.header-title-search .eyoom-form .input-button .button {
    color: #007bff !important;
}

/* 스크롤바 (크롬/사파리) - 깔끔한 회색 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* [New Design] 뉴스 티커 (White) */
.news-ticker-wrap {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.news-ticker .ticker-title {
    /* 블루 그라데이션 유지 (포인트) */
    background: linear-gradient(135deg, #007bff 0%, #00d2ff 100%);
    color: #fff; 
    box-shadow: 4px 0 15px rgba(0, 123, 255, 0.2);
}

.news-ticker .ticker-news ul li a {
    color: #333333 !important; 
}
.news-ticker .ticker-news ul li a:hover {
    color: #007bff !important;
}

.news-ticker .ticker-news ul li a span.text-gray {
    color: #888 !important; 
}

.news-ticker .ticker-buttons button {
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #888;
}
.news-ticker .ticker-buttons button:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* ==========================================================================
   [게시글 상세(View) 페이지] White 패치
   ========================================================================== */

/* 1. 작성자 정보 박스 */
.board-view .board-view-info {
    background-color: #f8f9fa !important; /* 연한 회색 배경 */
    border-top: 2px solid #333 !important; 
    border-bottom: 1px solid #e5e5e5 !important;
    color: #333 !important;
}

/* 2. 첨부파일, 링크 등 */
.board-view .board-view-file li, 
.board-view .board-view-link li, 
.board-view .board-view-star {
    border-bottom: 1px solid #f1f1f1 !important;
    color: #555 !important;
}
.board-view .board-view-file a,
.board-view .board-view-link a {
    color: #333 !important;
}

/* 4. 개별 버튼 */
.board-view .board-view-btn {
    background-color: #fff !important;
    color: #555 !important;
    border-left: 1px solid #e5e5e5 !important;
}
.board-view .board-view-btn:last-child {
    border-right: 1px solid #e5e5e5 !important;
}
.board-view .board-view-btn:hover {
    color: #007bff !important;
    background-color: #f8f9fa !important;
}

/* 5. 추천/비추천 버튼 */
.board-view .board-view-good-btn .act-gng-btn {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
}
.board-view .board-view-good-btn .act-gng-btn strong {
    color: #333 !important;
}
.board-view .board-view-good-btn .act-gng-btn:hover {
    border-color: #007bff !important;
    color: #007bff !important;
}

/* ==========================================================================
   [게시판 목록(List) 페이지] White 패치
   ========================================================================== */

/* 1. 게시판 전체 박스 */
.board-list {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
}

/* 2. 테이블 헤더 */
.board-list thead th {
    background-color: #f8f9fa !important;
    color: #333 !important;
    border-bottom: 1px solid #ddd !important;
}

/* 3. 테이블 리스트 */
.board-list tbody td {
    background-color: transparent !important;
    color: #555 !important;
    border-bottom: 1px solid #f1f1f1 !important;
}
.board-list tbody tr:hover td {
    background-color: #f8faff !important;
}

/* 4. 제목 텍스트 */
.board-list .td-subject a {
    color: #333 !important;
}
.board-list .td-subject a:hover {
    color: #007bff !important;
}

/* 카테고리 뱃지 */
.board-list .td-subject .cate-link {
    color: #007bff !important;
}

/* 6. 페이지네이션 */
.pg_wrap .pg_page, .pg_wrap .pg_current {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
}
.pg_wrap .pg_current {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
}
.pg_wrap .pg_page:hover {
    background-color: #f1f1f1 !important;
    color: #000 !important;
}

/* 7. 하단 검색창 */
fieldset#bo_sch {
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
}

/* ========================================================
   [사이드바 메뉴] White 적용
   ======================================================== */

.sidebar-nav-e1 {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
}

.sidebar-nav-e1 > li {
    border-color: #f1f1f1 !important;
    border-bottom: 1px solid #f1f1f1 !important;
}

.sidebar-nav-e1 > li > a {
    color: #444 !important;
}

.sidebar-nav-e1 > li:hover > a,
.sidebar-nav-e1 > li.active > a {
    background-color: #f8faff !important;
    color: #007bff !important;
}

/* 2차/3차 서브메뉴 */
.sidebar-nav-e1 ul, 
.sidebar-nav-e1 li ul {
    background-color: #f9f9f9 !important; /* 서브메뉴는 약간 회색 */
    border-top: 1px solid #f1f1f1 !important;
}

.sidebar-nav-e1 li ul a {
    color: #666 !important;
    border-top: 1px solid #f1f1f1 !important;
}

.sidebar-nav-e1 li ul a:hover,
.sidebar-nav-e1 li ul li.active > a {
    background-color: #fff !important;
    color: #007bff !important;
}

.sidebar-nav-e1 .sidebar-nav-item.active:after {
    color: #007bff !important;
}

/* ========================================================
   [아웃로그인 (.ol-after)] White 리모델링
   ======================================================== */

/* 1. 프로필 커버 */
.ol-after .profile .cover {
    background-color: #f8f9fa !important;
    border: 1px solid #e5e5e5 !important;
    border-bottom: none !important;
}

/* 2. 회원 정보 박스 */
.ol-after .member-info-wrap .member-info {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
}

.ol-after .profile .info .name { color: #333 !important; }
.ol-after .profile .info .position { color: #007bff !important; }

/* 4. 버튼들 */
.ol-after .member-info-btn .info-btn {
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
}
.ol-after .member-info-btn .info-btn:hover {
    background-color: #f8f9fa !important;
    color: #007bff !important;
    border-color: #007bff !important;
}

/* 포인트/팔로우 */
.ol-after .member-point p,
.ol-after .member-follow p,
.ol-after .member-statistics {
    color: #666 !important;
}
.ol-after .member-point .text-indigo { color: #e67e22 !important; } /* 오렌지색 포인트 */
.ol-after .member-follow span.badge {
    background-color: #f1f1f1 !important;
    color: #555 !important;
}

/* 탭 메뉴 */
.ol-after .scroll-tabs .scroll_tabs_container {
    border: 1px solid #e5e5e5 !important;
    background-color: #f8f9fa !important;
}
.ol-after .scroll-tabs .scroll_tabs_container div.scroll_tab_inner span {
    background-color: #f8f9fa !important;
    color: #666 !important;
    border-right: 1px solid #e5e5e5 !important;
}
.ol-after .scroll-tabs .scroll_tabs_container div.scroll_tab_inner span.scroll_tab_over {
    background-color: #fff !important;
    color: #007bff !important;
    font-weight: 700 !important;
}

/* 로그아웃 버튼 */
.ol-after .info-btn.others-btn {
    border: 1px solid #ddd !important;
    color: #888 !important;
}
.ol-after .info-btn.others-btn:hover {
    border-color: #ff4d4d !important;
    color: #ff4d4d !important;
    background-color: #fff5f5 !important;
}

/* ========================================================
   [퀵 메뉴 (Quick Menu)] White 모드
   ======================================================== */

.quick-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.quick-menu .quick-menu-box {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f1f1 !important;
    color: #555 !important;
}
.quick-menu .quick-menu-box:hover {
    background-color: #f8faff !important;
}

/* 첫 번째 박스 */
.quick-menu.quick-menu-left .quick-menu-box.first-box,
.quick-menu.quick-menu-right .quick-menu-box.first-box {
    background-color: #007bff !important; /* 첫 박스는 파란색 */
    border-bottom: 1px solid #0062cc !important;
}
.quick-menu .quick-menu-box.first-box i,
.quick-menu .quick-menu-box.first-box span {
    color: #fff !important;
}

/* 아이콘 */
.quick-menu .quick-menu-box > i { color: #999 !important; }
.quick-menu .quick-menu-box > span { color: #666 !important; }

.quick-menu .quick-menu-box:hover > i,
.quick-menu .quick-menu-box:hover > span {
    color: #007bff !important;
}

/* 스크롤 버튼 */
.quick-menu .quick-scroll-btn {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e5e5e5 !important;
    color: #888 !important;
}
.quick-menu .quick-scroll-btn:hover {
    background-color: #007bff !important;
    color: #fff !important;
}

/* ========================================================
   [메가 메뉴 (Mega Menu)] White 모드
   ======================================================== */

.navbar-nav .dropdown-mega-menu .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: 2px solid #007bff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}

.navbar-nav .mega-menu-col {
    border-right: 1px solid #f1f1f1 !important;
}

.navbar-nav .mega-menu-col h5 {
    border-top: 1px solid #f1f1f1 !important;
}
.navbar-nav .mega-menu-col h5 a {
    color: #333 !important;
}
.navbar-nav .mega-menu-col h5 a:hover {
    color: #007bff !important;
}

.navbar-nav .mega-menu-col .mega-menu-item {
    color: #666 !important;
}
.navbar-nav .mega-menu-col .mega-menu-item:hover {
    color: #007bff !important;
    background-color: #f8f9fa !important;
}

/* ========================================================
   [로그인 페이지 (eb-login)] White 모드
   ======================================================== */

.eb-login-wrap .login-box {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}

.eb-login-wrap .login-heading h3 {
    color: #333 !important;
}
.eb-login-wrap .login-heading .headline-btn {
    color: #888 !important;
}
.eb-login-wrap .login-heading .headline-btn a {
    color: #007bff !important;
}

.eb-login-wrap .eyoom-form .input input {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}
.eb-login-wrap .eyoom-form .input input:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2) !important;
}

.eb-login-wrap .eyoom-form .input .icon-append,
.eb-login-wrap .eyoom-form .input .icon-prepend {
    color: #999 !important;
}

/* 로그인 버튼 */
.eb-login-wrap .btn-login {
    background: linear-gradient(135deg, #007bff 0%, #0062cc 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
}

.eb-login-wrap .social-login {
    border-top: 1px solid #e5e5e5 !important;
}
.eb-login-wrap .social-login h5 {
    background-color: #fff !important;
    color: #888 !important;
}

/* ========================================================
   [회원가입 박스 (.register-box)] White 모드
   ======================================================== */

.register-box {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    color: #333 !important;
}

.register-box h3 {
    color: #333 !important;
    border-bottom: 2px solid #e5e5e5 !important;
}

.register-box .note {
    color: #666 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e5e5e5 !important;
}

.register-box .register-term {
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
}

.register-box .eyoom-form .input input,
.register-box .eyoom-form .select select,
.register-box .eyoom-form .textarea textarea {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

.register-box .eyoom-form label {
    color: #555 !important;
}

.eyoom-form .checkbox, .eyoom-form .radio {
    color: #333 !important;
}

/* [배너 시스템] 최종 수정 (Main 1열 / Side Split Floating) */

/* 1. 메인 배너 그리드 */
.banner-main-grid {
    display: grid;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    /* [모바일] 무조건 한 줄에 하나 (1열) */
    grid-template-columns: repeat(1, 1fr);
}

/* [PC] 992px 이상 -> 3열 */
@media (min-width: 992px) {
    .banner-main-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2. 배너 공통 박스 */
.custom-banner-box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    height: auto;
    transform: none !important; /* 움직임 방지 */
    transition: border-color 0.2s;
}

/* 이미지 꽉 채우기 */
.custom-banner-box img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

/* 3. 사이드 배너 (PC) */
.custom-banner-box.bn-type-side {
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.custom-banner-box.bn-type-side:hover {
    border-color: #1e88e5; /* 호버 시 파란 테두리 */
}

/* ==============================================
   [모바일 전용] 사이드 배너 플로팅 (스크롤 따라다님)
   ============================================== */
   
/* 기본적으로 플로팅 영역은 숨김 (PC에서 안 보이게) */
.mobile-side-float { display: none; }

@media (max-width: 991px) {
    /* 원래 사이드바에 있는 배너는 모바일에서 숨김 (중복 방지) */
    #side-banner-origin { display: none; }

    /* 플로팅 컨테이너 공통 스타일 */
    .mobile-side-float {
        display: block;
        position: fixed;
        right: 15px; /* 화면 오른쪽에서 15px 떨어짐 */
        width: 90px; /* 배너 크기 (작게 조절) */
        z-index: 9999;
        pointer-events: none; /* 빈 공간 터치 통과 */
    }

    /* 플로팅 내부의 배너 스타일 */
    .mobile-side-float .custom-banner-box {
        margin-bottom: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        border: 2px solid #fff; /* 흰색 테두리로 구분감 줌 */
        pointer-events: auto; /* 배너 클릭 가능하게 복구 */
    }

    /* 상단 그룹 위치 (헤더 가리지 않게 120px 띄움) */
    .float-top-group {
        top: 120px;
    }

    /* 하단 그룹 위치 (하단 메뉴 가리지 않게 100px 띄움) */
    .float-btm-group {
        bottom: 100px;
    }
}

/* PC 상단 배너 롤링 존 스타일 */
.pc-head-rolling-zone {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.pc-head-rolling-zone .custom-banner-box {
    flex: 1;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}
.pc-head-rolling-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}