/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1757664877
Updated: 2025-09-12 17:14:37

*/

/* 폰트 등록 Pretendard */
@font-face {
	font-family: 'Pretendard';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/PretendardVariable.woff2') format('woff2-variations');
}


/* 24-49행 교체 */
#wrapper 
{position:relative; width:100%; min-height:100vh; background:#f4f4f4;}

/* ========================================
   기본 스타일 (모바일 및 초기 로드용)
   ======================================== */
/* 좌측 메뉴 (헤더) - 모바일에서는 상단, PC에서는 상단 가로로 변경됨 */
#site-header
{position:absolute; width:20%; height:100%; padding:18rem 5rem; left:0; top:0; background:#000; z-index:100;}
#site-header .header-inner ul.menu 
{width:100%;}
#site-header .header-inner ul.menu li
{width:100%;}
#site-header .header-inner ul.menu li a 
{color:#ffffff96; display:block; font-size:2rem; width:100%; padding:2rem 2rem; transition:all 0.3s ease;}
#site-header .header-inner ul.menu li a:hover 
{color:#fff;}
#site-header .header-inner ul.menu li.current-menu-item a 
{color:#fff;}

/* 컨텐츠 영역 - 모바일에서는 전체 너비, PC에서는 상단 가로 레이아웃으로 변경됨 */
#content 
{position:relative; width:80%; margin-left:20%;}

#subContent 
{
    padding-top: 8rem;
    padding-right: 2rem;
    padding-bottom: 2rem;  /* ← 추가! */
    padding-left: 2rem;
    background: #f4f4f4;
    width: 100%;
    min-height: calc(100vh - 20rem);
}

#subContent .board-con
{position:relative;}

#subContent .sub-content 
{height:auto; overflow-y:visible; padding-bottom:2rem;}

.sub-title-con 
{text-align:center; margin-bottom:5rem}
.sub-title-con h2 
{font-size:4.2rem; color:#3E3E3E; font-weight:800; padding-top:10px;}

/* 72-89행 수정 */
.login-con 
{background:#fff; padding:3rem 0; backdrop-filter:blur(20px); border-radius:25px;}
/* padding: 10rem 0 → 3rem 0 */

.login-con .login_status 
{font-size:2rem; text-align:center; color:#000; font-weight:500;}
.login-con .login_status a 
{background:var(--main-color); padding:2rem 7rem; display:inline-block; border-radius:50px; font-size:1.8rem; color:var(--color-white);; margin-top:2rem; font-weight:300;}
.login-con .cosmosfarm-members-form label
{font-size:18px; color:#000}
.login-con .cosmosfarm-members-form .div_text input 
{border-radius:10px; border:none; background:#eee; height:50px; line-height:50px}
.login-con .cosmosfarm-members-form .button_div label 
{font-size:1.6rem;}
.login-con .cosmosfarm-members-form .button_div input[type='submit']
{background:var(--main-color) !important; height:50px; line-height:50px; font-size:1.6rem;}
.login-con .cosmosfarm-members-form .link-text
{display:inline-block; margin-right:2rem;}
.login-con .cosmosfarm-members-form .link-text a 
{font-size:1.6rem; color:#666;}

/* 프로필 */
.profile-con {padding:3rem 0;}  /* 이 줄 추가 */
.profile-con .cosmosfarm-members-form .profile-header .avatar-img .change-avatar-message {
    display: none !important;
}


.profile-con .cosmosfarm-members-form .profile-header .display-name
{font-size:3rem; color:#000;}
.profile-con .cosmosfarm-members-form .members-link 
{background:var(--main-color); border-color:#ddd;}
.profile-con .cosmosfarm-members-form .members-link li a 
{font-size:1.7rem; color:var(--color-white);}
.profile-con .cosmosfarm-members-form .members-link li:last-child 
{width:100%;}
.profile-con .link-text .link-text-username a
{font-size:1.6rem; display:inline-block; text-decoration: underline;}

/* 회원가입 / 회원수정 */
.profile-con .cosmosfarm-members-form label
{font-size:1.6rem; }
.profile-con .cosmosfarm-members-form button, 
.profile-con .cosmosfarm-members-form input[type=submit],
.profile-con .cosmosfarm-members-form input[type=button].buttons
{background:var(--main-color) !important; height:60px; line-height:60px; font-size:1.7rem; border-radius:5px;}

/* 성명 등 필수 필드 라벨 (비밀번호 변경 링크는 버튼 아래로 분리됨) */
.profile-con .req-text 
{
    font-size: 1.7rem;
}

/* 비밀번호 변경 링크 (로그인 페이지 아이디 찾기와 동일한 스타일, 버튼 아래 배치) */
.profile-con .link-text.pwdchange {
    display: inline-block !important;
    margin-right: 2rem !important;
    text-align: right !important;
}
.profile-con .link-text.pwdchange a {
    font-size: 1.6rem !important;
    color: #666 !important;
}

/* profile-con 미존재 시 fallback (Elementor 등 다른 템플릿) */
.cosmosfarm-members-form:not(.signin-form) .button_div + .link-text.pwdchange,
.cosmosfarm-members-form:not(.signin-form) .link-text.pwdchange {
    display: block !important;
    text-align: right !important;
    margin-top: 0.5rem !important;
}
.cosmosfarm-members-form:not(.signin-form) .link-text.pwdchange a {
    font-size: 1.6rem !important;
    color: #666 !important;
}

/* 비밀번호 변경 페이지의 '회원정보 변경' 링크 스타일 */
.profile-con .link-text.profile-edit {
    text-align: center !important;  /* 중앙 정렬 */
    /* margin-top: 15px !important;  버튼과의 간격 */
}
.profile-con .link-text.profile-edit a {
    font-size: 1.7rem !important;  /* '비밀번호 변경' 링크와 동일한 폰트 크기 */
    color: inherit !important;  /* 부모 요소의 색상 상속 (기본 검정) */
    margin: 0 !important;  /* 기본 마진 제거 */
    line-height: 1.7rem !important;  /* 폰트 크기와 동일한 line-height */
    text-decoration: none !important;  /* 밑줄 제거 */
}
.profile-con .link-text.profile-edit a:hover {
    text-decoration: underline !important;  /* 호버 시 밑줄 표시 */
}

/* 회원정보 편집 페이지: 실시간 유효성 검증 메시지 스타일 */
.profile-con .div_text .validation-message {
    display: block;
    margin-top: 5px;
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 0;
}
.profile-con .div_text .validation-message.valid {
    color: #28a745;  /* 초록색: 유효한 값 */
}
.profile-con .div_text .validation-message.invalid {
    color: #dc3545;  /* 빨간색: 유효하지 않은 값 */
}
.profile-con .div_text input.valid {
    border-color: #28a745 !important;  /* 유효한 값일 때 초록색 테두리 */
}
.profile-con .div_text input.invalid {
    border-color: #dc3545 !important;  /* 유효하지 않은 값일 때 빨간색 테두리 */
}

/* 회원 가입 (로그인 시 보이는 페이지) */
.profile-con .register_status 
{text-align:center; font-size:2.1rem; color:#000; font-weight:600}
.profile-con .register_links 
{display:flex; flex-wrap:wrap; justify-content:center; max-width:800px; margin:3rem auto 0; background:var(--main-color); border-radius:5px; overflow:hidden}
.profile-con .register_links li
{width:50%; text-align:center;}
.profile-con .register_links li a  
{font-size:1.8rem; color:#fff; padding:3rem 2rem; display:block;}
.profile-con .link-text 
{display:inline-block; }
.profile-con .link-text a 
{font-size:16px; color:#575757; margin:0 10px 5px 0; display:inline-block;}

/* 로그인 / 프로필 공통 */
.profile-con .cosmosfarm-members-form .message,
.login-con .cosmosfarm-members-form .message
{font-size:1.6rem; width:100%;; word-break:keep-all}
.profile-con .cosmosfarm-members-form .message .loginfailed,
.login-con .cosmosfarm-members-form .message .loginfailed
{width:100%}

/* 회원가입 성공 */
.cosmosfarm-members-form.register_success 
{position:absolute; width:100%; height:100%; left:0; top:0; background:#00000050; display:flex; align-items:center; z-index:99}
.cosmosfarm-members-form.register_success .message
{background:#fff; max-width:800px; margin:0 auto; width:100%; text-align:center; padding:50px 0;}
.cosmosfarm-members-form.register_success .message p 
{font-size:20px; color:#222;}


/* 푸터 */
#site-footer 
{display:none;}
#footer
{background:#1a1a1a; padding:5rem 0;}
#footer .f-bottom-con 
{margin-top:2rem;}
#footer .f-bottom-con .f-detail-con p span 
{color:#ffffffbd; display:inline-block; margin-right:3rem; font-size:1.7rem; line-height:1.8; font-weight:300;}
#footer .f-bottom-con .f-copy
{margin-top:1rem;}
#footer .f-bottom-con .f-copy p 
{font-size:1.6rem; color:#ffffff50}

/* ========================================
   PC 화면: 푸터 레이아웃 개선
   ======================================== */
@media screen and (min-width: 768px) {
    /* PC 화면: .container 스타일 개선 (레이아웃 및 정렬) */
    #footer .container {
        max-width: 1400px !important;  /* 최대 너비 제한 (헤더와 일관성) */
        margin: 0 auto !important;  /* 중앙 정렬 */
        padding: 0 5rem !important;  /* 좌우 패딩 (헤더와 일관성) */
        box-sizing: border-box !important;
        display: flex !important;  /* Flex 레이아웃 */
        flex-direction: row !important;  /* 가로 배치 */
        align-items: flex-start !important;  /* 상단 정렬 */
        gap: 4rem !important;  /* 로고와 내용 간 간격 */
    }
    
    /* PC 화면: 로고 영역 스타일 */
    #footer .f-logo {
        flex-shrink: 0 !important;  /* 로고 영역 축소 방지 */
        display: flex !important;
        align-items: flex-start !important;
    }
    
    #footer .f-logo img {
        max-height: 50px !important;  /* 헤더 로고와 동일한 크기 (max-height: 50px) */
        width: auto !important;
        height: auto !important;
        display: block !important;
    }
    
    /* PC 화면: 하단 컨텐츠 영역 스타일 */
    #footer .f-bottom-con {
        flex: 1 !important;  /* 남은 공간 차지 */
        margin-top: 0 !important;  /* Flex 레이아웃에서는 margin-top 불필요 */
        display: flex !important;
        flex-direction: column !important;  /* 세로 배치 */
        gap: 1.5rem !important;  /* .f-detail-con과 .f-copy 간 간격 */
    }
    
    /* PC 화면: 상세 정보 영역 스타일 */
    #footer .f-bottom-con .f-detail-con {
        display: flex !important;
        flex-direction: column !important;  /* p 태그들을 세로로 배치 */
        gap: 1rem !important;  /* p 태그 간 간격 */
    }
    
    #footer .f-bottom-con .f-detail-con p {
        margin: 0 !important;  /* 기본 margin 제거 */
        line-height: 1.8 !important;
    }
    
    #footer .f-bottom-con .f-detail-con p span {
        color: #ffffffbd !important;  /* 색상 유지 */
        display: inline-block !important;
        margin-right: 2.5rem !important;  /* 3rem → 2.5rem (PC에 적합) */
        font-size: 1.6rem !important;  /* 1.7rem → 1.6rem (가독성 향상) */
        line-height: 1.8 !important;
        font-weight: 300 !important;
    }
    
    /* PC 화면: 저작권 영역 스타일 */
    #footer .f-bottom-con .f-copy {
        margin-top: 0 !important;  /* Flex gap으로 대체 */
        text-align: left !important;  /* 좌측 정렬 */
    }
    
    #footer .f-bottom-con .f-copy p {
        margin: 0 !important;  /* 기본 margin 제거 */
        font-size: 1.5rem !important;  /* 1.6rem → 1.5rem */
        color: #ffffff50 !important;  /* 색상 유지 */
        line-height: 1.6 !important;
    }
    
    /* 큰 화면 (1200px 이상): 최대 너비 제한 */
    @media screen and (min-width: 1200px) {
        #footer .container {
            max-width: 1400px !important;  /* 큰 화면에서도 최대 너비 유지 */
        }
    }
    
    /* 태블릿 크기 (768px-991px): 패딩 및 간격 조정 */
    @media screen and (min-width: 768px) and (max-width: 991px) {
        #footer .container {
            padding: 0 3rem !important;  /* 태블릿에서 패딩 조정 */
            gap: 3rem !important;  /* 로고와 내용 간 간격 조정 */
        }
        
        #footer .f-logo img {
            max-height: 50px !important;  /* 헤더 로고와 동일한 크기 유지 */
        }
        
        #footer .f-bottom-con .f-detail-con p span {
            margin-right: 2rem !important;  /* 태블릿에서 간격 조정 */
            font-size: 1.5rem !important;  /* 태블릿에서 폰트 크기 조정 */
        }
    }
}

/* 로그인 안내 */
.info-con 
{text-align:center; margin-top:30rem;}
.info-con .info-txt p 
{font-size:2rem; color:#000; font-weight:400;}
.info-con .link-btn-con
{margin-top:2rem;}
.info-con .link-btn-con a 
{background:var(--main-color); color:#fff; font-size:1.7rem; text-align:center; display:inline-block; padding:2rem 3rem; min-width:20rem; border-radius:5px; margin:0 1rem; transition:all 0.3s ease;}
.info-con .link-btn-con a:hover
{background:#2c8689;}





/* ========================================
   PC 화면: 상단 가로 레이아웃으로 변경
   ======================================== */
@media screen and (min-width: 768px) {
    /* Phase 1-1: 헤더 위치 및 크기 변경 (absolute → relative, 20% → 100%) */
    #site-header {
        position: relative !important;  /* absolute → relative */
        width: 100% !important;  /* 20% → 100% */
        height: auto !important;  /* 100% → auto */
        left: auto !important;  /* 0 → auto */
        top: auto !important;  /* 0 → auto */
        padding: 1.5rem 5rem !important;  /* 18rem 5rem → 1.5rem 5rem (상단 가로 레이아웃에 적합) */
        background: #000 !important;  /* 검은 배경 유지 */
        z-index: 1000 !important;  /* z-index 유지 */
        min-height: 70px !important;  /* 최소 높이 설정 (로고와 메뉴가 들어갈 높이) */
        box-sizing: border-box !important;  /* 패딩 포함 크기 계산 */
    }
    
    /* Phase 1-2: header-inner를 flex로 복원 (가로 배치) */
    .site-header .header-inner,
    #site-header .header-inner,
    header#site-header.site-header .header-inner,
    header#site-header.site-header.dynamic-header .header-inner {
        display: flex !important;  /* block → flex */
        flex-wrap: wrap !important;
        justify-content: space-between !important;  /* 로고 좌측, 메뉴 우측 */
        align-items: center !important;  /* 수직 중앙 정렬 */
    }
    
    /* Phase 1-3: 로고 영역 스타일 조정 */
    .site-branding.show-logo,
    .site-header .header-inner .site-branding.show-logo,
    #site-header .header-inner .site-branding.show-logo {
        padding-bottom: 0 !important;  /* 5rem → 0 (가로 레이아웃에서는 불필요) */
        margin-right: 4rem !important;  /* 메뉴와의 간격 추가 (3rem → 4rem) */
        display: flex !important;
        align-items: center !important;
    }
    
    /* Phase 1-4: 로고 이미지 크기 조정 */
    /* 로고 영역: 로고와 텍스트를 세로로 배치 */
    #site-header .header-inner .site-branding .site-logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    #site-header .header-inner .site-branding .site-logo img {
        max-height: 50px !important;  /* 가로 레이아웃에 적합한 크기 (60px → 50px) */
        width: auto !important;
        height: auto !important;
        display: block !important;
    }
    
    /* TECHNICAL SUPPORT SYSTEM 텍스트 스타일 (모든 화면 크기에서 표시) */
    #site-header .header-inner .site-branding .site-logo .site-tagline-text {
        color: #fff !important;
        font-weight: bold !important;
        font-size: 1.2rem !important;
        letter-spacing: 0.1em !important;
        margin-top: 0.5rem !important;
        line-height: 1.2 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        display: block !important;
    }
    
    /* Phase 1-5: 컨텐츠 영역 전체 너비로 변경 */
    #content {
        width: 100% !important;  /* 80% → 100% */
        margin-left: 0 !important;  /* 20% → 0 */
    }
    
    /* Phase 1-6: subContent 패딩 조정 (헤더 높이 고려) */
    #subContent {
        padding-top: 3rem !important;  /* 8rem → 3rem (상단 헤더 높이 고려) */
    }
    
    /* KBoard 게시판 페이지들(공지사항, qa, 장애접수 등)의 컨테이너 넓이 제한 */
    /* 사이트 관리 페이지와 동일한 넓이 설정 적용 */
    #subContent .sub-title-con .container,
    #subContent .sub-content .container {
        max-width: 1400px !important;  /* 사이트 관리 페이지와 동일한 최대 너비 */
        margin: 0 auto !important;  /* 중앙 정렬 */
        padding: 0 20px !important;  /* 사이트 관리 페이지와 동일한 좌우 패딩 */
        box-sizing: border-box !important;
    }
    
    /* .board-con과 내부 KBoard 요소들도 넓이 제한 적용 */
    #subContent .sub-content .container .board-con,
    #subContent .sub-content .container .board-con #kboard-default-list,
    #subContent .sub-content .container .board-con .kboard-header-container,
    #subContent .sub-content .container .board-con .kboard-list,
    #subContent .sub-content .container .board-con .kboard-pagination,
    #subContent .sub-content .container .board-con .kboard-control {
        max-width: 100% !important;  /* 부모 .container의 넓이를 넘지 않도록 */
        width: 100% !important;  /* 전체 너비 사용 */
        box-sizing: border-box !important;
    }
    
    /* Phase 4-1: 헤더 내부 요소 간격 조정 */
    #site-header .header-inner {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Phase 4-2: 로고와 메뉴 간 적절한 간격 유지 */
    #site-header .header-inner .site-branding {
        flex-shrink: 0 !important;  /* 로고 영역 축소 방지 */
    }
    
    #site-header .header-inner .site-navigation {
        flex: 1 !important;  /* 메뉴 영역이 남은 공간 차지 */
        display: flex !important;
        justify-content: flex-end !important;  /* 메뉴를 우측 정렬 */
        align-items: center !important;
    }
    
    /* Phase 4-3: 모바일 토글 버튼 숨기기 (PC에서는 불필요) */
    #site-header .site-navigation-toggle-holder {
        display: none !important;
    }
    
    /* Phase 4-4: 모바일 드롭다운 메뉴 숨기기 (PC에서는 불필요) */
    #site-header .site-navigation-dropdown {
        display: none !important;
    }
    
    /* ========================================
       Phase 2: 메뉴 스타일 변경 (세로 → 가로)
       ======================================== */
    /* Phase 2-1: 메뉴 컨테이너를 가로 배치로 변경 */
    #site-header .header-inner ul.menu {
        width: auto !important;  /* 100% → auto */
        display: flex !important;  /* 가로 배치 */
        flex-wrap: wrap !important;
        align-items: center !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Phase 2-2: 메뉴 항목을 가로 배치로 변경 */
    #site-header .header-inner ul.menu li {
        width: auto !important;  /* 100% → auto */
        display: flex !important;  /* block → flex */
        position: relative !important;  /* 하위 메뉴를 위한 relative */
    }
    
    /* Phase 2-3: 메뉴 링크 스타일 조정 (가로 메뉴에 적합하게) */
    #site-header .header-inner ul.menu li a {
        display: block !important;  /* 유지 */
        font-size: 1.6rem !important;  /* 2rem → 1.6rem (가로 메뉴에 적합한 크기) */
        width: auto !important;  /* 100% → auto */
        padding: 0.8rem 1.5rem !important;  /* 2rem 2rem → 0.8rem 1.5rem (가로 메뉴에 적합) */
        color: #ffffff96 !important;  /* 색상 유지 */
        transition: all 0.3s ease !important;  /* 트랜지션 유지 */
        text-decoration: none !important;
        white-space: nowrap !important;  /* 텍스트 줄바꿈 방지 */
        line-height: 1.5 !important;  /* 줄 간격 설정 */
    }
    
    /* Phase 2-4: 메뉴 링크 호버 효과 유지 */
    #site-header .header-inner ul.menu li a:hover {
        color: #fff !important;  /* 호버 색상 유지 */
    }
    
    /* Phase 2-5: 현재 메뉴 항목 스타일 유지 */
    #site-header .header-inner ul.menu li.current-menu-item a {
        color: #fff !important;  /* 현재 페이지 색상 유지 */
    }
    
    /* Phase 2-6: 하위 메뉴가 PC 화면에서도 정상 작동하도록 보강 */
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu {
        display: none !important;
        position: absolute !important;
        right: 0 !important;  /* 우측 정렬 유지 */
        top: 100% !important;
        background: #333 !important;  /* 배경색 유지 */
        min-width: 200px !important;
        z-index: 999 !important;
        border-radius: 5px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0.5rem !important;  /* 상단 여백 추가 */
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children:hover ul.sub-menu {
        display: block !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu li {
        width: 100% !important;
        display: block !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu li a {
        color: #ffffff96 !important;  /* 색상 유지 */
        padding: 12px 20px !important;
        font-size: 1.4rem !important;  /* 1.0rem → 1.4rem (메인 메뉴와 비슷한 크기) */
        display: block !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu li a:hover {
        color: #fff !important;  /* 호버 색상 유지 */
        background: rgba(255,255,255,0.1) !important;
    }
    
    /* Phase 5-1: 큰 화면에서 헤더 최대 너비 제한 (푸터와 정렬 일치) */
    @media screen and (min-width: 1200px) {
        #site-header {
            padding-left: 0 !important;  /* 패딩 제거, .header-inner에서 처리 */
            padding-right: 0 !important;  /* 패딩 제거, .header-inner에서 처리 */
        }
        
        #site-header .header-inner {
            max-width: 1400px !important;  /* 큰 화면에서 최대 너비 제한 (푸터와 동일) */
            margin: 0 auto !important;  /* 중앙 정렬 */
            padding-left: 5rem !important;  /* 푸터 .container와 동일한 패딩 */
            padding-right: 5rem !important;  /* 푸터 .container와 동일한 패딩 */
            box-sizing: border-box !important;
        }
    }
    
    /* Phase 5-2: 태블릿 크기 (768px-991px) 추가 조정 */
    @media screen and (min-width: 768px) and (max-width: 991px) {
        #site-header {
            padding: 1.2rem 3rem !important;  /* 태블릿에서 패딩 조정 */
        }
        
        /* 태블릿: TECHNICAL SUPPORT SYSTEM 텍스트 스타일 */
        #site-header .header-inner .site-branding .site-logo .site-tagline-text {
            font-size: 1.1rem !important;  /* 태블릿에서 폰트 크기 조정 */
        }
        
        #site-header .header-inner ul.menu li a {
            font-size: 1.4rem !important;  /* 태블릿에서 폰트 크기 조정 */
            padding: 0.7rem 1.2rem !important;  /* 태블릿에서 패딩 조정 */
        }
        
        /* 태블릿: Cosmosfarm Members 폼 반응형 스타일 (플러그인 CSS 오버라이드) */
        .cosmosfarm-members-form {
            display: block !important;
            margin: 0 auto !important;
            width: 70% !important;  /* 태블릿: 70% 너비 */
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
    }
    
    /* PC 화면: Cosmosfarm Members 폼 반응형 스타일 (플러그인 CSS 오버라이드) */
    .cosmosfarm-members-form {
        display: block !important;
        margin: 0 auto !important;
        width: 50% !important;  /* PC: 50% 너비 (플러그인 기본값 유지) */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 큰 화면 (1200px 이상): Cosmosfarm Members 폼 최대 너비 제한 */
    @media screen and (min-width: 1200px) {
        .cosmosfarm-members-form {
            width: 50% !important;  /* 큰 화면에서도 50% 유지 */
            max-width: 600px !important;  /* 최대 너비 제한 */
        }
    }
}

@media screen and (max-width:767px) {
  #wrapper
  {height:auto;}
  #site-header 
  {width:100%; position:relative; padding:2rem; height:auto;}
  /* 모바일: TECHNICAL SUPPORT SYSTEM 텍스트 스타일 조정 */
  #site-header .header-inner .site-branding .site-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #site-header .header-inner .site-branding .site-logo .site-tagline-text {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    letter-spacing: 0.1em !important;
    margin-top: 0.5rem !important;
    line-height: 1.2 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    display: block !important;
  }
  #site-header .header-inner .site-branding .site-logo img
  {width:50%;}
  #site-header .site-navigation-toggle-holder button span:before,
  #site-header .site-navigation-toggle-holder button span:after
  {background-color:#fff !important;}
  #site-header .site-navigation-toggle-holder button span:before 
  {box-shadow:0 .35rem 0 #fff !important;}
  #site-header .site-navigation-toggle-holder button[aria-expanded=true] span:before
  {box-shadow:none !important;}
  #content 
  {position:relative; width:100%; margin-left:0;}
  .site-navigation-toggle-holder
  {padding:0;}
  
  
  #subContent
  {padding:6rem 2rem; height:auto;}
  #subContent .sub-content
  {height:auto; overflow:hidden;}
  .sub-title-con h2
  {font-size:30px;}

  #site-header .header-inner ul.menu li a
  {background:#000;}
  
  /* 모바일: 푸터 컨테이너 패딩 */
  #footer .container 
  {padding:0 20px;}
  
  /* 모바일: 로고 크기 조정 (헤더와 동일하게) */
  #footer .f-logo img 
  {max-height:50px; width:auto; height:auto;}  /* 헤더 로고와 동일한 크기 */
  
  /* 모바일: 상세 정보 텍스트 크기 및 간격 조정 */
  #footer .f-bottom-con .f-detail-con p span
  {font-size:15px; margin-right:1.5rem !important;}  /* 모바일에서 간격 조정 */
  
  /* 모바일: 하단 컨텐츠 영역 간격 조정 */
  #footer .f-bottom-con {
    margin-top:1.5rem !important;  /* 모바일에서 간격 조정 */
  }
  
  /* 모바일: 저작권 영역 간격 조정 */
  #footer .f-bottom-con .f-copy {
    margin-top:1rem !important;
  }
  /* 프로필 */
  /* 모바일: Cosmosfarm Members 폼 반응형 스타일 (플러그인 CSS 오버라이드) */
  .cosmosfarm-members-form {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;  /* 모바일: 전체 너비 */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 모바일: 프로필 버튼 스타일 (비밀번호 변경 버튼 포함) */
  .profile-con .cosmosfarm-members-form button, 
  .profile-con .cosmosfarm-members-form input[type=submit],
  .profile-con .cosmosfarm-members-form input[type=button].buttons
  {background:var(--main-color) !important; height:60px; line-height:60px; font-size:1.7rem; border-radius:5px;}
  /* 회원전용 */
  .info-con
  {margin-top:0;}
  .info-con .link-btn-con a 
  {margin:10px 0;}
  /* 로그인 */
  .login-con
  {padding:2rem 0;}
  .login-con .cosmosfarm-members-form,
  .profile-con .cosmosfarm-members-form
  {margin:0;}

    /* 모바일 드롭다운 배경색 수정 */
  .site-navigation-dropdown {
    background: transparent !important;
  }
  
  .site-navigation-dropdown ul.menu {
    background: #000 !important; /* 검은색 배경 */
  }
  
  .site-navigation-dropdown ul.menu li {
    background: #000 !important;
  }
  
  .site-navigation-dropdown ul.menu li a {
    background: #000 !important;
    color: #ffffff96 !important;
  }
  
  .site-navigation-dropdown ul.menu li a:hover {
    background: #333 !important;
    color: #fff !important;
  }


  /* 모바일 드롭다운 기본 스타일 */
.site-navigation-dropdown ul.menu li.menu-item-has-children ul.sub-menu {
  display: none;
  position: relative;
  left: 0;
  top: 0;
  width: 100% !important;
  background: #222 !important;
  box-shadow: none;
  border-radius: 0;
  margin: 8px 0;
  padding: 4px 0;
}

.site-navigation-dropdown ul.menu li.menu-item-has-children ul.sub-menu li {
  border-bottom: 1px solid #333;
}

.site-navigation-dropdown ul.menu li.menu-item-has-children ul.sub-menu li:last-child {
  border-bottom: none;
}

.site-navigation-dropdown ul.menu li.menu-item-has-children ul.sub-menu li a {
  padding: 14px 20px;
  font-size: 1.6rem;
  color: #ffffff80 !important;
  background: #222 !important;
}

.site-navigation-dropdown ul.menu li.menu-item-has-children ul.sub-menu li a:hover {
  color: #fff !important;
  background: #333 !important;
}


/* 하위 메뉴 항목에서는 화살표 완전 제거 */
.site-navigation-dropdown ul.menu li ul.sub-menu li:after,
.site-navigation-dropdown ul.menu li ul.sub-menu li.menu-item-has-children:after,
.site-navigation-dropdown ul.menu li ul.sub-menu li a:after {
  display: none !important;
  content: none !important;
}

/* 모바일 드롭다운 - 열린 상태에서 화살표 숨기기 */
.site-navigation-dropdown ul.menu > li.menu-item-has-children.active:after,
.site-navigation-dropdown ul.menu > li.menu-item-has-children.elementor-active:after {
  display: none !important;
}

    /* 모바일 드롭다운 화살표 - 최상위 메뉴에만 적용 */
  .site-navigation-dropdown ul.menu > li.menu-item-has-children:after {
    align-items: center;
    color: #ffffff96 !important;
    content: "▼"; /* 기본 상태: 아래쪽 화살표 */
    display: flex;
    font-size: 1.2em;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .site-navigation-dropdown ul.menu > li.menu-item-has-children:hover:after {
    color: #fff !important;
  }

  .site-navigation-dropdown ul.menu > li.menu-item-has-children.active ul.sub-menu {
    display: block !important;
  }

  .site-navigation-dropdown ul.menu > li.menu-item-has-children.active:after {
    content: "▲"; /* 열린 상태: 위쪽 화살표 */
    color: #fff !important;
  }

  /* 하위 메뉴 항목에서는 화살표 제거 */
  .site-navigation-dropdown ul.menu li ul.sub-menu li:after {
    display: none !important;
  }

  /* 추가: 모든 하위 메뉴 항목에서 화살표 완전 제거 */
  .site-navigation-dropdown ul.menu li ul.sub-menu li.menu-item-has-children:after {
    display: none !important;
  }

  .site-navigation-dropdown ul.menu li ul.sub-menu li a:after {
    display: none !important;
  }

  /* 모바일 드롭다운 - elementor-active 클래스 처리 */
  .site-navigation-dropdown ul.menu li.menu-item-has-children.elementor-active ul.sub-menu {
    display: block !important;
  }

  .site-navigation-dropdown ul.menu li.menu-item-has-children.elementor-active:after {
    content: "▲" !important;
    color: #fff !important;
  }

}

.profile-con .link-text .link-text-pwdreset a {
  font-size: 1.6rem; 
  display: inline-block; 
  text-decoration: underline;
}

/* 웹 드롭다운 메뉴 - 화살표 기준 우측 정렬 */
.site-navigation ul.menu li.menu-item-has-children {
  position: relative;
}

.site-navigation ul.menu li.menu-item-has-children:after {
  align-items: center;
  color: #ffffff96 !important;
  content: "▼";
  display: flex;
  font-size: 1.0em;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.site-navigation ul.menu li.menu-item-has-children:hover:after {
  color: #fff !important;
  transform: translateY(2px);
}

/* 드롭다운 메뉴 - 화살표 기준 우측 정렬 */
.site-navigation ul.menu li.menu-item-has-children ul.sub-menu {
  display: none;
  position: absolute;
  right: 0; /* 우측 정렬 */
  top: 100%;
  background: #333 !important;
  min-width: 200px;
  z-index: 999;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  /* padding: 8px 0; */
}

.site-navigation ul.menu li.menu-item-has-children ul.sub-menu li {
  width: 100%;
}

.site-navigation ul.menu li.menu-item-has-children ul.sub-menu li a {
  color: #ffffff96 !important;
  padding: 12px 20px;
  font-size: 1.4rem !important;  /* 1.0rem → 1.4rem (메인 메뉴와 비슷한 크기) */
  display: block;
  transition: all 0.3s ease;
  text-decoration: none;
}

.site-navigation ul.menu li.menu-item-has-children ul.sub-menu li a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.1);
}

.site-navigation ul.menu li.menu-item-has-children:hover ul.sub-menu {
  display: block;
}

/* PC 화면: 하위 메뉴 스타일 보강 */
@media screen and (min-width: 768px) {
    /* Phase 2-6: 하위 메뉴가 PC 화면에서도 정상 작동하도록 보강 */
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu {
        display: none !important;
        position: absolute !important;
        right: 0 !important;  /* 우측 정렬 유지 */
        top: 100% !important;
        background: #333 !important;  /* 배경색 유지 */
        min-width: 200px !important;
        z-index: 999 !important;
        border-radius: 5px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children:hover ul.sub-menu {
        display: block !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu li {
        width: 100% !important;
        display: block !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu li a {
        color: #ffffff96 !important;  /* 색상 유지 */
        padding: 12px 20px !important;
        font-size: 1.4rem !important;  /* 1.0rem → 1.4rem (메인 메뉴와 비슷한 크기) */
        display: block !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
    
    #site-header .site-navigation ul.menu li.menu-item-has-children ul.sub-menu li a:hover {
        color: #fff !important;  /* 호버 색상 유지 */
        background: rgba(255,255,255,0.1) !important;
    }
}

/* Cosmosfarm Members 폼 하단 공간 제거 */
.cosmosfarm-members-form {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Content Control 플러그인 공지 숨기기 */
.content-control-notice {
    display: none !important;
}

/* 관리 색상 구성표 섹션 숨기기 */
.user-admin-color-wrap {
    display: none !important;
}

/* ========================================
   OTP 로딩 팝업 스타일
   ======================================== */
/* OTP 로딩 오버레이 - 전체 화면 덮기 */
#otp-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(5px) !important;
    animation: fadeIn 0.3s ease !important;
}

/* OTP 로딩 팝업 박스 */
#otp-loading-overlay .otp-loading-box {
    background: #fff !important;
    padding: 4rem 3rem !important;
    border-radius: 25px !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    max-width: 400px !important;
    width: 90% !important;
    box-sizing: border-box !important;
    animation: slideUp 0.4s ease !important;
}

/* OTP 로딩 스피너 */
#otp-loading-overlay .otp-loading-spinner {
    width: 60px !important;
    height: 60px !important;
    border: 4px solid #f3f3f3 !important;
    border-top: 4px solid #1a979b !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin: 0 auto 2rem !important;
    display: block !important;
}

/* OTP 로딩 텍스트 */
#otp-loading-overlay .otp-loading-title {
    margin: 1rem 0 !important;
    color: #333 !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#otp-loading-overlay .otp-loading-message {
    margin: 1rem 0 !important;
    color: #666 !important;
    font-size: 1.6rem !important;
    line-height: 1.5 !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 애니메이션 정의 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 모바일 반응형 스타일 */
@media screen and (max-width: 767px) {
    #otp-loading-overlay .otp-loading-box {
        padding: 3rem 2rem !important;
        max-width: 90% !important;
        border-radius: 20px !important;
    }
    
    #otp-loading-overlay .otp-loading-spinner {
        width: 50px !important;
        height: 50px !important;
        border-width: 3px !important;
        margin-bottom: 1.5rem !important;
    }
    
    #otp-loading-overlay .otp-loading-title {
        font-size: 1.6rem !important;
    }
    
    #otp-loading-overlay .otp-loading-message {
        font-size: 1.4rem !important;
    }
}

/* 태블릿 반응형 스타일 */
@media screen and (min-width: 768px) and (max-width: 991px) {
    #otp-loading-overlay .otp-loading-box {
        padding: 3.5rem 2.5rem !important;
        max-width: 450px !important;
    }
}

/* Cosmosfarm Members - 회원관리 페이지 페이징 (page-inventory 양식 통일) */
#cosmosfarm-members-users .pagination-container {
    margin-top: 20px;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#cosmosfarm-members-users .pagination-info {
    font-size: 14px;
    color: #666;
}

#cosmosfarm-members-users .pagination-links {
    display: flex;
    gap: 5px;
    align-items: center;
}

#cosmosfarm-members-users .pagination-link {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
}

#cosmosfarm-members-users .pagination-link:hover {
    background: var(--main-color, #1a979b);
    color: white;
    border-color: var(--main-color, #1a979b);
}

#cosmosfarm-members-users .pagination-current {
    background: var(--main-color, #1a979b) !important;
    color: white !important;
    border-color: var(--main-color, #1a979b) !important;
    font-weight: bold;
}

#cosmosfarm-members-users .pagination-first,
#cosmosfarm-members-users .pagination-last {
    font-weight: bold;
}

#cosmosfarm-members-users .pagination-prev,
#cosmosfarm-members-users .pagination-next {
    font-weight: bold;
}

@media (max-width: 768px) {
    #cosmosfarm-members-users .pagination-container {
        flex-direction: column;
        text-align: center;
    }

    #cosmosfarm-members-users .pagination-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    #cosmosfarm-members-users .pagination-link {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 35px;
    }
}