/* ============================================================
   리앤장 위챗 스트림 — Theme CSS
   CSS Custom Properties 기반 다크/라이트 모드 시스템
   기본값: 다크 모드 (:root)
   ============================================================ */

/* ===== 다크 모드 (기본값) ===== */
:root {
  /* 배경 계층 */
  --bg-page:        #0f0f18;
  --bg-nav:         #16162a;
  --bg-card:        #1a1a26;
  --bg-card-header: #141422;
  --bg-input:       #1e1e2c;
  --bg-elevated:    #222238;
  --bg-hover:       #252542;
  --bg-row-hover:   #1c1c2a;
  --bg-sunken:      #0c0c15;

  /* 테두리 */
  --border-subtle:  #262636;
  --border-default: #32324a;
  --border-strong:  #44445e;

  /* 텍스트 계층 */
  --text-primary:     #f0f0f8;
  --text-secondary:   #c8c8e0;
  --text-dim:         #aaaabb;
  --text-muted:       #8888aa;
  --text-faint:       #666680;
  --text-placeholder: #484860;

  /* 그림자 */
  --shadow-card: 0 2px 16px rgba(0,0,0,0.4);

  /* 액센트 (테마 무관 공통) */
  --accent-green:        #07C160;
  --accent-green-dark:   #05a352;
  --accent-green-glow:   rgba(7,193,96,0.25);
  --accent-violet:       #7c3aed;
  --accent-violet-dark:  #5b21b6;
  --accent-red:          #f87171;
  --accent-blue:         #60a5fa;
  --accent-amber:        #f59e0b;
}

/* ===== 라이트 모드 ===== */
[data-theme="light"] {
  /* 배경 계층 */
  --bg-page:        #f4f4f8;
  --bg-nav:         #ffffff;
  --bg-card:        #ffffff;
  --bg-card-header: #f9f9fc;
  --bg-input:       #f8f8fc;
  --bg-elevated:    #f0f0f8;
  --bg-hover:       #ebebf5;
  --bg-row-hover:   #f5f5fa;
  --bg-sunken:      #eeeef4;

  /* 테두리 */
  --border-subtle:  #e8e8f2;
  --border-default: #d4d4e8;
  --border-strong:  #b8b8d0;

  /* 텍스트 계층 */
  --text-primary:     #1a1a2e;
  --text-secondary:   #3a3a55;
  --text-dim:         #5a5a80;
  --text-muted:       #7070a0;
  --text-faint:       #9090b8;
  --text-placeholder: #b0b0cc;

  /* 그림자 */
  --shadow-card: 0 2px 16px rgba(0,0,0,0.06);

  /* 액센트 그로우 — 라이트에서 약하게 */
  --accent-green-glow: rgba(7,193,96,0.15);
}

/* ============================================================
   전역 스타일 (테마 변수 사용)
   ============================================================ */
body {
  background: var(--bg-page);
  color: var(--text-primary);
  margin: 0;
}

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* 테이블 헤더 배경 */
thead tr { background: var(--bg-card-header) !important; }

/* 로그인 배경 오브 — 라이트 모드에서 더 약하게 */
[data-theme="light"] .bg-orb { opacity: 0.05 !important; }

/* 라이트 모드: select option 배경 */
[data-theme="light"] select option { background: var(--bg-input); color: var(--text-primary); }

/* ============================================================
   테마 토글 버튼 스타일
   ============================================================ */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: var(--text-faint);
}
.theme-toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}