/* 테마 스타일 정의 */
:root {
    /* 라이트 모드 기본 색상 */
    --bg-color: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(43, 53, 61, 0.1) 100%);
    --text-color: #222;
    --header-bg: #2b353d;
    --box-bg: #FFFFFF;
    --box-shadow: rgba(0,0,0,.1);
    --border-color: #FAFAFA;
    --accent-color: #0176f9;
    --accent-hover: #78F8EC;
    --side-bg: #2b353d;
    --side-color: #000000;
    --center-bg: #2b2a2f;
    --center-text: #FFFFFF;
    --icon-bg:#ffffff;
}

[data-theme="dark"] {
    /* 다크 모드 색상 */
    --bg-color: #1e1e1e;
    --text-color: #fff;
    --header-bg: #2b2a2f;
    --box-bg: #2b2a2f;
    --box-shadow: rgba(0,0,0,.2);
    --border-color: #3b3b3b;
    --accent-color: #24c1ed;
    --accent-hover: #78F8EC;
    --side-bg: #2b2a2f;
    --side-color: #fefefe;
    --center-bg: #2b2a2f;
    --center-text: #FFFFFF;
    --icon-bg:#343e43;
}

/* 사이드바 안의 테마 토글 버튼 스타일 */
.side ul li.theme-toggle {
    cursor: pointer;
    margin: 10px 0;
    /* 다른 아이콘과 동일하게 설정 */
}

/* 아이콘 기본 스타일 */
.theme-toggle .theme-icon {
    /* position 제거 */
    transition: opacity 0.3s ease;
    color: var(--text-color);
}