/* 🌙 다크모드 배경 & 텍스트 */
html.dark body {
  background: linear-gradient(
    to bottom,
    #141433 20%,
    #0b0b1a 50%,         /* 깊은 밤 검정 */
    #141433 80%,        /* 아주 짙은 남보라 */
    #1e3a5f 85%,        /* 어두운 파랑 */
    #5a74a0 95%,        /* 새벽빛 남색 */
    #dce6f2 99%,        /* 희미한 눈빛 */
    #ffffff 100%  
  );
  color: #f0f0f0;
}

/* 제목/부제목 */
html.dark body .site-title {
  color: #f5f5f5;
}
html.dark body .site-subtitle {
  color: #bbb;
}

/* 메인 레이아웃 세로 정렬 강제 */
html.dark body .main-layout {
  align-items: flex-start !important;
}

/* 왼쪽 패널 */
html.dark body .main-panel {
  background: linear-gradient(to bottom, #1e1e2f 0%, #2a2a4d 70%, #3d3d6b 100%);
  box-shadow: inset -5px 0 5px -5px rgba(0,0,0,0.5);
  height: auto !important;
}


/* 검색창 form */
html.dark body .search-form {
  background-color: #454545;
  border: 1px solid #555;
  box-shadow: none;
}

/* 검색창 input */
html.dark body .search-box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
}
html.dark body .search-box::placeholder {
  color: #bbb;
  opacity: 1;
}

/* 검색 아이콘 */
html.dark body .search-form i {
  color: #ccc;
}

/* 푸터 */
html.dark body .site-footer {
  color: #ccc;
  background: #121212;
  border-top: 1px solid #444;
}

/* 이미지 모드 전환 */
html.dark body .dark-img {
  display: block;
}
html.dark body .light-img {
  display: none;
}

/* 다크모드 스위치 */
html.dark body .switch-label {
  background-color: #666;
}
html.dark body .switch-handle {
  background: linear-gradient(to bottom, #eeeeee, #bbbbbb);
}

/* 기본 스위치 스타일 */

.light-switch {
  z-index: 999;
  width: 60px;
  height: 34px;
}
.switch-label {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #b9fbc0;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}
.switch-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #ffffff, #cccccc);
  border-radius: 50%;
  transition: left 0.3s ease, background 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.light-switch[aria-checked="true"] .switch-label {
  background-color: #666;
}
.light-switch[aria-checked="true"] .switch-handle {
  left: 29px;
  background: linear-gradient(to bottom, #eeeeee, #bbbbbb);
}

/* 캐릭터 SVG glow */
html.dark body object#character-svg {
  filter: brightness(1.0) contrast(1.0) drop-shadow(0 0 1px #a26eff);
  transition: filter 0.1s ease;
}
#character-svg {
  filter: saturate(0.95);
}




/* 로그인 버튼 (기본) */
html.dark body .auth-btn.login {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  font-weight: 600;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  transition: all 0.1s ease;
  z-index: 9999;
}

/* 로그인 버튼 (hover - 노란빛 glow) */
html.dark body .auth-btn.login:hover {
  background-color: rgba(255, 255, 200, 0.05);
  color: white;
  border-color: rgba(255, 255, 180, 0.8);
  box-shadow: 0 0 12px rgba(255, 230, 100, 0.8);
}

/* 로그아웃 버튼 (기본) */
html.dark body .auth-btn.logout {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  font-weight: 600;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  transition: all 0.1s ease;
}

html.dark body .auth-btn.logout:hover {
  background-color: rgba(255, 255, 200, 0.05);
  color: white;
  border-color: rgba(255, 255, 180, 0.8);
  box-shadow: 0 0 12px rgba(255, 230, 100, 0.8);
}

/* 회원가입 텍스트 (기본) */
html.dark body .auth-btn.signup {
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.35);
  transition: all 0.1s ease;
}

/* 회원가입 텍스트 (hover - 노란빛 glow) */
html.dark body .auth-btn.signup:hover {
  color: lightblue;
  text-shadow: 0 0 10px rgba(255, 230, 120, 0.8);
}

/* 글쓰기 (기본) */
html.dark body .auth-btn.write-post {
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.35);
  transition: all 0.1s ease;
  background-color: black;
}

/* 글쓰기 (hover - 노란빛 glow) */
html.dark body .auth-btn.write-post:hover {
  color: lightblue;
  text-shadow: 0 0 10px rgba(255, 230, 120, 0.8);
}

/* 다크모드일 때 햄버거 아이콘 색상 흰색으로 */
html.dark body .hamburger span {
  background-color: #fff;
}


/* 다크모드에서 전체 배경 뚫기 */
html.dark body .main-column,
html.dark body .main-panel {
  background: transparent !important;
  box-shadow: none !important;
}

html.dark body .header-top {
  z-index: 9000;
  background-color: #141433 !important;
  border-bottom: none !important;
  box-shadow:
    0 3px 4px rgba(255, 215, 0, 0.1),
    0 6px 6px rgba(255, 215, 0, 0.15),
    0 10px 10px rgba(255, 200, 0, 0.2) !important;
}

html.dark body .login-box {
  background: linear-gradient(135deg, #202020, #2a2a2a);
  color: #eeeeee;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

html.dark body .pop-up-form {
  color: #fff;
  border-radius: 12px;
}
html.dark body .pop-up-form input {
  background: #222;
  color: #eee;
  border: 1px solid #555;
}


html.dark body .welcome-text {
  color: #ffffff;
}

html.dark body .side-panel{
  background: transparent!important;
}




html.dark body .board-table td a {
  color: #ffffff;               /* 자연스러운 검회색 계열 */
  text-decoration: none;     /* 밑줄 제거 */
  font-weight: 500;          /* 적당한 굵기 */
}

html.dark body .board-table td a:hover {
  color: #ff6666;            /* 마우스 올리면 살짝 포인트 색상 */
  text-decoration: underline;/* 원하면 다시 밑줄 살짝 */
}


html.dark body .board-table th {
  background-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

html.dark body .tab {
  margin-top: 2rem;
  border: 1px solid #d0cce6;
  background: #000000;
  font-weight: 500;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease-in-out;
}

html.dark body .tab:hover {
  color: white;
  background-color: rgba(247, 243, 255, 0.3);
  border-color: #c4b2ff;
}

html.dark body .tab.active {
  background: #f6f6f6;
  color: black;
  border-color: #ff9999;
  font-weight: bold;
}


html.dark body .mobile-post-item .post-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  display: block;
  margin-bottom: 0rem;
}


html.dark #preloader {
  background: #000000 !important; /* 필요하면 배경색 지정 */
  display: flex;
  transition: opacity 0.6s ease; /* 부드럽게 사라짐 */
}