/* ========================================
   다크 모드 테마 스타일시트
   html.dark 클래스 기반 전환
   ======================================== */

/* 다크 모드 전환 애니메이션 */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   기본 배경/텍스트
   ======================================== */
html.dark body {
    background-color: #1a1b2e !important;
    color: #e2e8f0 !important;
}

/* ========================================
   헤더
   ======================================== */
html.dark #main-header {
    background-color: #1e1f33 !important;
    border-color: #2d2e4a !important;
}

html.dark #main-header a,
html.dark #main-header span,
html.dark #main-header button {
    color: #cbd5e1;
}

html.dark #main-header a:hover,
html.dark #main-header button:hover {
    color: #8d76f6 !important;
}

html.dark #main-header .text-gray-800,
html.dark #main-header .text-seventh {
    color: #e2e8f0 !important;
}

/* 헤더 드롭다운 메뉴 */
html.dark #main-header [id^="menu-"],
html.dark #main-header [id^="topmenu-"],
html.dark #main-header #mypageDropdown,
html.dark #main-header #mypageSettingsDropdown,
html.dark #main-header #headerMypageDropdown {
    background-color: #252641 !important;
    border-color: #3d3e5c !important;
}

html.dark #main-header [id^="menu-"] a,
html.dark #main-header [id^="topmenu-"] a,
html.dark #main-header #mypageDropdown a,
html.dark #main-header #mypageSettingsDropdown a,
html.dark #main-header #headerMypageDropdown a {
    color: #cbd5e1 !important;
}

html.dark #main-header [id^="menu-"] a:hover,
html.dark #main-header [id^="topmenu-"] a:hover,
html.dark #main-header #mypageDropdown a:hover,
html.dark #main-header #mypageSettingsDropdown a:hover,
html.dark #main-header #headerMypageDropdown a:hover {
    color: #8d76f6 !important;
    background-color: rgba(141, 118, 246, 0.1) !important;
}

/* 헤더 검색 */
html.dark #desktop-search {
    background-color: #252641 !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

html.dark #desktop-search::placeholder {
    color: #64748b !important;
}

/* 배너보드 슬라이드 */
html.dark .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, #1e1f33, #252641) !important;
}

/* ========================================
   사이드바 (왼쪽)
   ======================================== */
html.dark #leftSidebar .bg-white,
html.dark #leftSidebar #loginCard {
    background-color: #1e1f33 !important;
    border-color: #2d2e4a !important;
}

html.dark #leftSidebar .text-gray-800,
html.dark #leftSidebar .text-gray-700,
html.dark #leftSidebar .text-seventh {
    color: #e2e8f0 !important;
}

html.dark #leftSidebar .text-gray-500,
html.dark #leftSidebar .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark #leftSidebar .border-gray-200,
html.dark #leftSidebar .border-gray-100 {
    border-color: #2d2e4a !important;
}

html.dark #leftSidebar .bg-gray-50,
html.dark #leftSidebar .bg-gray-100 {
    background-color: #252641 !important;
}

html.dark #leftSidebar input {
    background-color: #252641 !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

html.dark #leftSidebar input::placeholder {
    color: #64748b !important;
}

html.dark #leftSidebar a {
    color: #cbd5e1 !important;
}

html.dark #leftSidebar a:hover {
    color: #8d76f6 !important;
}

/* ========================================
   메인 콘텐츠 영역
   ======================================== */
html.dark .bg-white {
    background-color: #1e1f33 !important;
}

html.dark .bg-gray-50 {
    background-color: #252641 !important;
}

html.dark .bg-gray-100 {
    background-color: #2a2b47 !important;
}

html.dark .border,
html.dark .border-gray-200,
html.dark .border-gray-100,
html.dark .border-gray-300 {
    border-color: #2d2e4a !important;
}

html.dark .border-b {
    border-color: #2d2e4a !important;
}

/* 텍스트 색상 */
html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-700 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500 {
    color: #94a3b8 !important;
}

html.dark .text-gray-400 {
    color: #64748b !important;
}

html.dark .text-seventh {
    color: #e2e8f0 !important;
}

html.dark .text-dark {
    color: #e2e8f0 !important;
}

/* ========================================
   카드 / 섀도우
   ======================================== */
html.dark .shadow-md,
html.dark .shadow-sm,
html.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

html.dark .rounded-lg.shadow-md {
    background-color: #1e1f33 !important;
}

/* ========================================
   폼 요소
   ======================================== */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: #252641 !important;
    border-color: #3d3e5c !important;
    color: #e2e8f0 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #8d76f6 !important;
    box-shadow: 0 0 0 2px rgba(141, 118, 246, 0.2) !important;
}

/* ========================================
   모바일 메뉴
   ======================================== */
html.dark #mobile-menu {
    background-color: #1e1f33 !important;
}

html.dark #mobile-menu .bg-white {
    background-color: #1e1f33 !important;
}

html.dark #mobile-menu a,
html.dark #mobile-menu span,
html.dark #mobile-menu button {
    color: #cbd5e1 !important;
}

html.dark #mobile-menu a:hover {
    color: #8d76f6 !important;
}

html.dark #mobile-menu .bg-gray-50 {
    background-color: #252641 !important;
}

html.dark #mobile-menu .border-gray-200 {
    border-color: #2d2e4a !important;
}

/* ========================================
   푸터 (이미 어두운 배경이므로 미세 조정)
   ======================================== */
html.dark footer.bg-gray-900 {
    background-color: #111122 !important;
    border-color: #1e1f33 !important;
}

/* ========================================
   모달
   ======================================== */
html.dark .bg-white[class*="modal"],
html.dark [data-modal-target] + div .bg-white,
html.dark .fixed.inset-0 .bg-white {
    background-color: #1e1f33 !important;
}

html.dark [role="dialog"] .bg-white,
html.dark [role="dialog"] {
    background-color: #1e1f33 !important;
}

html.dark [role="dialog"] .border-gray-200 {
    border-color: #2d2e4a !important;
}

html.dark [role="dialog"] .text-gray-800,
html.dark [role="dialog"] .text-gray-900 {
    color: #e2e8f0 !important;
}

/* ========================================
   테이블
   ======================================== */
html.dark table {
    background-color: #1e1f33 !important;
}

html.dark thead {
    background-color: #252641 !important;
}

html.dark th {
    color: #cbd5e1 !important;
    border-color: #2d2e4a !important;
}

html.dark td {
    color: #e2e8f0 !important;
    border-color: #2d2e4a !important;
}

html.dark tr:hover td {
    background-color: rgba(141, 118, 246, 0.05) !important;
}

/* ========================================
   배지 / 태그
   ======================================== */
html.dark .bg-primary\/10 {
    background-color: rgba(141, 118, 246, 0.15) !important;
}

html.dark .bg-gray-200.rounded-full {
    background-color: #3d3e5c !important;
}

/* ========================================
   스크롤바
   ======================================== */
html.dark ::-webkit-scrollbar-track {
    background: #1a1b2e;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #3d3e5c;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #4d4e6c;
}

/* ========================================
   Speed Dial
   ======================================== */
html.dark .speed-dial-container .bg-gray-500 {
    background-color: #3d3e5c !important;
}

/* ========================================
   탭 / 네비게이션 바
   ======================================== */
html.dark .border-b-2.border-primary {
    border-color: #8d76f6 !important;
}

/* ========================================
   이미지 관련 - 다크모드에서 밝기 조절
   ======================================== */
html.dark img:not([src*="logo"]) {
    opacity: 0.92;
}

/* ========================================
   팝업 레이어
   ======================================== */
html.dark .popup-layer {
    background-color: #1e1f33 !important;
    border-color: #2d2e4a !important;
}

/* ========================================
   호버 효과
   ======================================== */
html.dark .hover\:bg-gray-50:hover {
    background-color: #252641 !important;
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #2a2b47 !important;
}

/* ========================================
   다크모드 토글 버튼
   ======================================== */
.dark-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    padding: 0;
}

.dark-mode-toggle:hover {
    background-color: rgba(141, 118, 246, 0.1);
}

.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 1.25rem;
}

/* 라이트 모드: 달 아이콘 표시 */
.dark-mode-toggle .icon-moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.dark-mode-toggle .icon-sun {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

/* 다크 모드: 해 아이콘 표시 */
html.dark .dark-mode-toggle .icon-moon {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

html.dark .dark-mode-toggle .icon-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    color: #fbbf24;
}

/* ========================================
   알림 / 배너 다크모드 대응
   ======================================== */
html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* ========================================
   오버레이
   ======================================== */
html.dark #sidebarOverlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ========================================
   게시판 인덱스 카드
   ======================================== */
html.dark .post-card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .post-card-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================
   Flowbite 컴포넌트 오버라이드
   ======================================== */
html.dark [data-tooltip-target] + [role="tooltip"] {
    background-color: #252641 !important;
    color: #e2e8f0 !important;
}

/* ========================================
   페이지네이션
   ======================================== */
html.dark .pagination a,
html.dark .pagination span {
    background-color: #252641 !important;
    border-color: #3d3e5c !important;
    color: #cbd5e1 !important;
}

html.dark .pagination .active span {
    background-color: #8d76f6 !important;
    color: #ffffff !important;
}

/* ========================================
   TinyMCE / 에디터 영역 
   ======================================== */
html.dark .tox .tox-edit-area__iframe {
    background-color: #252641 !important;
}

html.dark .tox .tox-toolbar,
html.dark .tox .tox-toolbar__primary {
    background-color: #1e1f33 !important;
}

/* ========================================
   반응형 조정 - 모바일
   ======================================== */
@media (max-width: 768px) {
    html.dark .dark-mode-toggle {
        width: 32px;
        height: 32px;
    }

    html.dark .dark-mode-toggle .icon-sun,
    html.dark .dark-mode-toggle .icon-moon {
        font-size: 1rem;
    }
}

/* ========================================
   User Tab Styles
   ======================================== */
.tab-item {
    border-bottom-color: transparent;
    color: #6B7280;
}

.tab-item:hover {
    color: #374151;
    border-bottom-color: #E5E7EB;
}

.tab-item.active {
    color: #8B5CF6;
    border-bottom-color: #8B5CF6;
}