/* Pretendard 글꼴 (서버에 있는 파일, 화면에 나온 글자에 해당하는 조각만 내려받음) */
@import url('/fonts/pretendard/pretendardvariable-dynamic-subset.css');

/* ==========================================================
   1. 기본 변수 및 초기화 (Root Variables & Reset)
   ========================================================== */
:root {
  --bg-dark: #0b0912;
  --card-bg: #151320;
  --border-purple: #322d4c;
  --accent-gold: #fecb4c;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --on-accent: #0b0912;      /* 강조색(금색) 위 글자 */
  --text-soft: #d6d3e3;      /* 본문보다 조금 연한 글자 (기보 · 설명) */
  --text-comment: #a5d6a7;   /* 주석 글자 */
  --btn-bg: rgba(255, 255, 255, 0.05);   /* 버튼 바탕 */
  --sq-light: #f0d9b5;       /* 체스판 밝은 칸 (설정에서 바꿈) */
  --sq-dark: #b58863;        /* 체스판 어두운 칸 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 휴대폰: 버튼을 빠르게 연달아 눌러도 두 번 탭 확대가 되지 않게 (손가락 두 개로 확대는 그대로) */
button { touch-action: manipulation; }
/* 버튼 아이콘 (이모지로 바뀌는 ⏮ ⏭ ⚙ 대신 그림) */
.nav-ico { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.12em; pointer-events: none; }

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  padding-top: 60px; /* 상단바 높이만큼 여백 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================
   2. 상단바 (Top Header Bar & Navigation)
   ========================================================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-purple);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  box-sizing: border-box;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.topbar-left::-webkit-scrollbar {
  display: none;
}

.topbar-brand {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent-gold);
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 상단 메뉴 버튼 (링크 / 하위 메뉴 열기 버튼 공통) */
.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.2s;
}

.has-menu > .nav-parent::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.2s;
}

.nav-parent:hover,
.nav-item.open > .nav-parent {
  color: var(--text-main);
}

.nav-item.open > .nav-parent::after {
  transform: rotate(180deg);
}

/* 강조 메뉴 (상단 '퍼즐'): 늘 테마 강조색 */
.nav-parent.nav-hl,
.topbar-nav .nav-parent.nav-hl {
  color: var(--accent-gold);
  font-weight: 900;
}
.nav-parent.nav-hl:hover,
.nav-item.open > .nav-parent.nav-hl {
  color: var(--accent-gold);
}

/* 휴대폰 메뉴 버튼 (☰) - 넓은 화면에서는 숨김 */
.nav-toggle {
  display: none;
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-purple);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: top 0.2s, transform 0.2s, opacity 0.2s;
}
html[data-theme="light"] .nav-toggle span { background: #1f1b2d; }   /* 라이트 테마: 흰 줄이 안 보여서 진하게 */

.nav-toggle span:nth-child(1) { top: 11px; }
.nav-toggle span:nth-child(2) { top: 16px; }
.nav-toggle span:nth-child(3) { top: 21px; }

/* 열렸을 때 X 모양 */
.nav-open .nav-toggle span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

@media (max-width: 640px) {
  .topbar {
    padding: 0 12px;
  }

  .topbar-left {
    gap: 10px;
    overflow: visible;
  }

  .nav-toggle {
    display: block;
  }

  /* 메뉴는 ☰ 를 눌렀을 때 상단바 아래로 펼쳐짐 */
  .topbar-nav {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-purple);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6);
  }

  .nav-open .topbar-nav {
    display: flex;
  }

  .topbar-nav > .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .topbar-nav > .nav-item:last-child {
    border-bottom: none;
  }

  .topbar-nav .nav-parent {
    width: 100%;
    padding: 13px 4px;
    font-size: 1rem;
    color: var(--text-main);
  }

  /* 펼친 메뉴 안에서는 하위 메뉴를 항상 보여 주고, 상위 항목은 제목처럼 표시 */
  .topbar-nav .has-menu > .nav-parent {
    padding-bottom: 4px;
    font-size: 0.8rem;
    color: var(--accent-gold);
    cursor: default;
  }

  /* 상위 메뉴가 링크인 경우(슥슥이 방송, 분석)는 일반 메뉴처럼 눌러서 이동 */
  .topbar-nav .has-menu > a.nav-parent {
    padding-bottom: 6px;
    font-size: 1rem;
    color: var(--text-main);
    cursor: pointer;
  }

  /* 부가기능도 다른 상위 메뉴와 같은 모양 (금색 강조 없음) */
  .topbar-nav .has-menu > #nav-extra {
    padding-bottom: 6px;
    font-size: 1rem;
    color: var(--text-main);
  }
  .topbar-nav .has-menu > #nav-extra.active {
    color: var(--accent-gold);
  }

  .topbar-nav .has-menu > .nav-parent::after {
    display: none;
  }

  .topbar-nav .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 8px;
  }

  .topbar-nav .nav-menu-box {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .topbar-nav .nav-menu-box a {
    font-size: 1rem;
    color: var(--text-main);
    padding: 11px 4px;
  }

  /* 모바일 메뉴: 연구 강조 */
  .topbar-nav .nav-menu-box a#nav-research {
    color: var(--accent-gold);
    font-weight: 800;
  }

  body.nav-locked {
    overflow: hidden;
  }
}

/* 상단바 오른쪽 닉네임 (마우스를 올리면 정보수정 메뉴) */
.nav-parent.nav-user,
.nav-item.open > .nav-parent.nav-user {
  color: var(--accent-gold);
  font-weight: 800;
  margin-right: 6px;
}

.nav-parent.nav-user:hover {
  opacity: 0.85;
}

/* 하위 메뉴 (위치는 header.php 스크립트가 버튼 바로 아래로 지정) */
.nav-menu {
  position: fixed;
  top: 60px;
  left: 0;
  padding-top: 8px; /* 버튼과 메뉴 사이를 마우스로 지나갈 때 닫히지 않도록 */
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
}

.nav-item.open > .nav-menu {
  opacity: 1;
  visibility: visible;
}

.nav-menu-box {
  min-width: 170px;
  background: var(--card-bg);
  border: 1px solid var(--border-purple);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
}

.nav-menu-box a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav-menu-box a:hover {
  background: rgba(254, 203, 76, 0.12);
  color: var(--accent-gold);
}

/* 새 탭으로 열리는 외부 링크: 오른쪽에 바깥으로 나가는 아이콘 */
.nav-menu-box a[target="_blank"] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-menu-box a[target="_blank"]::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  margin-left: auto;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.75;
  /* 페이지 보안 헤더(CSP)가 data: 이미지를 막아서 같은 사이트의 SVG 파일을 씀 */
  -webkit-mask: url("/images/ext-link.svg") center / contain no-repeat;
  mask: url("/images/ext-link.svg") center / contain no-repeat;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 언어 선택 및 로그인 버튼 (노란색 포인트) */
.lang-select-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-purple);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-select-btn:hover {
  background: var(--accent-gold);
  color: var(--on-accent);
  border-color: var(--accent-gold);
}

.btn-login-open {
  background: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-login-open:hover {
  opacity: 0.9;
}

/* ==========================================================
   3. 메인 대시보드 및 카드 그리드 (세로 정중앙 정렬 적용)
   ========================================================== */
.main-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px;
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 🌟 세로 기준 정중앙 배치 */
  align-items: center;     /* 🌟 가로 기준 정중앙 배치 */
}

.dashboard-header {
  text-align: center;
  margin-bottom: 36px;
  width: 100%;
}

.dashboard-header h1 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 8px;
}

.dashboard-header h1 span {
  color: var(--accent-gold);
}

.dashboard-header p {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.dash-card {
  background: var(--card-bg);
  border: 1px solid var(--border-purple);
  border-radius: 20px;
  padding: 28px 20px;
  text-decoration: none;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dash-card:hover {
  border-color: var(--accent-gold);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.dash-card h3 {
  word-break: keep-all;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-main);
}

.dash-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
}

/* ==========================================================
   4. 로그인 모달 (화면 정중앙 강제 정렬)
   ========================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 9, 18, 0.85);
  backdrop-filter: blur(6px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  padding: 16px;
  box-sizing: border-box;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.login-modal {
  background: var(--card-bg);
  border: 1px solid var(--border-purple);
  border-radius: 20px;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  margin: auto;
}

.login-modal h2 {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 20px;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--text-main);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid var(--border-purple);
  border-radius: 10px;
  padding: 12px;
  color: var(--text-main);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: var(--accent-gold);
}

.btn-submit {
  width: 100%;
  background: var(--accent-gold);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s;
}

.btn-submit:hover {
  opacity: 0.9;
}

/* ==========================================================
   5. 푸터 (Footer)
   ========================================================== */
footer {
  width: 100%;
  padding: 20px 24px;
  border-top: 1px solid var(--border-purple);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-sizing: border-box;
}

.footer-stats {
  font-weight: 700;
}

.footer-stats strong {
  color: var(--accent-gold);
}

/* 현재 접속자 수 (초록 점) */
.footer-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.6);
  animation: online-pulse 2s infinite;
}

@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

.footer-divider {
  margin: 0 8px;
  color: var(--border-purple);
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text-main);
}

/* 하단바 맨 오른쪽 언어 전환 (English / 한국어) */
.footer-links .footer-lang {
  color: var(--accent-gold);
  font-weight: 800;
}

@media (max-width: 576px) {
  footer {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  /* 링크가 줄바꿈될 때 구분선(|)만 남지 않도록, 구분선 대신 간격으로 나눔 */
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  .footer-links .footer-divider {
    display: none;
  }
}
/* ==========================================================
   라이트 모드 (닉네임 → 설정 → 일반): 밝은 바탕 + 다크 모드의 금색 자리에 보라색 #4b367b
   ========================================================== */
html[data-theme="light"] {
  --bg-dark: #ffffff;   /* 바탕: 흰색 (예전 연보라와 서로 바꿈) */
  --card-bg: #eeeff2;   /* 상자 · 상단바 · 하단바: 연한 회색 (어중간한 연보라 대신) */
  --border-purple: #d9dbe1;
  --accent-gold: #4b367b;
  --text-main: #1f1b2d;
  --text-muted: #5f5a75;
  --text-soft: #3b3650;
  --text-comment: #2e7d32;
  --btn-bg: #ffffff;    /* 버튼: 연보라 상자 위에서 구분되게 흰색 */
  --on-accent: #ffffff;
  color-scheme: light;
}
html[data-theme="light"] .modal-overlay { background: rgba(60, 50, 90, 0.35); }
html[data-theme="light"] .nav-menu-box,
html[data-theme="light"] .login-modal { box-shadow: 0 12px 28px rgba(60, 50, 90, 0.18); }
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color: var(--text-main); }
/* 다크용 검정 그림자 대신 보라 그림자, 메뉴 hover 는 금색 대신 보라 */
html[data-theme="light"] .dash-card { box-shadow: 0 3px 10px rgba(20, 22, 30, 0.08); }
html[data-theme="light"] .dash-card:hover { box-shadow: 0 10px 22px rgba(20, 22, 30, 0.14); }
html[data-theme="light"] .nav-menu-box a:hover { background: rgba(20, 22, 30, 0.06); }
/* 첫 화면 강조 카드: 빨강 대신 보라 테두리 */
html[data-theme="light"] .dash-card.dash-hl { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(75, 54, 123, 0.12); }

/* 글자를 또렷하게 (윈도우에서 가변 글꼴이 흐릿하게 보이는 것 완화) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; }
/* 라이트 모드: 버튼 · 칩이 바탕과 구분되게 */
html[data-theme="light"] .tool-btn:not(.primary), html[data-theme="light"] .an-btn:not(.primary), html[data-theme="light"] .an-nav button,
html[data-theme="light"] .mb-nav button, html[data-theme="light"] .vid-chip:not(.on), html[data-theme="light"] .st-cat:not(.on),
html[data-theme="light"] .vid-act, html[data-theme="light"] .st-sym, html[data-theme="light"] .st-icon-btn, html[data-theme="light"] .set-opt {
  background: var(--btn-bg);
  border-color: var(--border-purple);
}
html[data-theme="light"] .tool-input, html[data-theme="light"] .tool-textarea, html[data-theme="light"] .st-tree,
html[data-theme="light"] .mb-moves, html[data-theme="light"] .an-moves { background: #faf9fd; }
/* 오프닝 탐색기: 자료 형태 색을 진하게, 흰 '백 관점' 배지에 테두리 */
html[data-theme="light"] .vid-list, html[data-theme="light"] .vid-filters {
  --c-lecture: #1971c2; --c-live_review: #6741a8; --c-self: #087f5b; --c-master: #a8740a; --c-etc: #5c677d;
}
html[data-theme="light"] .vid-aud.white { border-color: #8c84a8; }
html[data-theme="light"] .vid-meta, html[data-theme="light"] .vid-opening, html[data-theme="light"] .op-sub { color: var(--text-soft); }
/* 라이트모드: 평가 막대가 배경과 섞이지 않게 얇은 테두리 */
html[data-theme="light"] .an-gauge { box-shadow: 0 0 0 1px #8f87a8; }

/* 라이트모드 대비 보정 (어두운 배경 전제로 만든 페이지별 색) */
html[data-theme="light"] .footer-divider { color: #a39bb8; }
html[data-theme="light"] .img-caption { background: var(--card-bg); }
html[data-theme="light"] .result-btn { background: var(--btn-bg); border-color: var(--border-purple); color: var(--text-main); }
html[data-theme="light"] .result-btn.disabled { color: rgba(31, 27, 45, 0.4); }
html[data-theme="light"] .closed-status { color: #b26b00; background: rgba(255, 165, 0, 0.15); }
html[data-theme="light"] .t-u1000 { background: rgba(0, 0, 0, 0.06); }
html[data-theme="light"] .t-u1300 { color: #8a7400; }
html[data-theme="light"] .t-u1600 { color: #23843a; }
html[data-theme="light"] .t-u1900 { color: #3d6a93; }
html[data-theme="light"] .t-u2200 { color: #4b4cad; }
html[data-theme="light"] .t-inf { color: #b8408e; }
html[data-theme="light"] .rv-tabs .count { background: #d63c3c; }

/* 선택 상자 목록: 다크모드에서 흰 바탕에 흰 글씨가 되지 않게 (브라우저 기본 목록 색을 테마에 맞춤) */
:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
select option { background-color: var(--card-bg); color: var(--text-main); }

/* 로그인 창 자동 로그인 체크 */
.remember-check { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; user-select: none; }
.remember-check input { width: auto; margin: 0; accent-color: var(--accent-gold); }

/* ==========================================================
   그레이 모드 (설정 → 테마 → 화면 모드): 다크 모드와 같은 구성에 보라 기운 없는 무채색 회색 바탕
   ========================================================== */
html[data-theme="gray"] {
  --bg-dark: #3b3d42;
  --card-bg: #4a4c52;
  --border-purple: #63666e;
  --accent-gold: #fecb4c;
  --text-main: #f3f3f4;
  --text-muted: #c0c4cc;
  --text-soft: #dcdde1;
  --text-comment: #a5d6a7;
  --btn-bg: rgba(255, 255, 255, 0.07);
  --on-accent: #1f2023;
  color-scheme: dark;
}
html[data-theme="gray"] .modal-overlay { background: rgba(20, 20, 22, 0.6); }
html[data-theme="gray"] .tool-input, html[data-theme="gray"] .tool-textarea, html[data-theme="gray"] .st-tree,
html[data-theme="gray"] .mb-moves, html[data-theme="gray"] .an-moves { background: #414349; }

/* ==========================================================
   색 테마 (설정 → 화면 모드): data-tone 으로 색 변수만 바꿈
   블루 = 다크 바탕 (data-theme 없음), 핑크 · 옐로우 = 라이트 바탕 (data-theme="light" 의 보정을 그대로 씀)
   ========================================================== */
html[data-tone="blue"] {
  --bg-dark: #0b1220;
  --card-bg: #142036;
  --border-purple: #2a3c5e;
  --accent-gold: #7cc4ff;
  --text-main: #ffffff;
  --text-muted: #9aaecb;
  --text-soft: #d3dcec;
  --btn-bg: rgba(255, 255, 255, 0.06);
  --on-accent: #0b1220;
}
html[data-tone="blue"] .tool-input, html[data-tone="blue"] .tool-textarea, html[data-tone="blue"] .st-tree,
html[data-tone="blue"] .mb-moves, html[data-tone="blue"] .an-moves { background: #101a2c; }
html[data-theme="light"][data-tone="pink"] {
  --card-bg: #fbe6ee;
  --border-purple: #f2c9d8;
  --accent-gold: #b0306a;
  --text-main: #2a1820;
  --text-muted: #7a5a68;
  --text-soft: #4a2e3a;
}
/* 라이트 보정에 박힌 보라색을 핑크로 */
html[data-theme="light"][data-tone="pink"] .dash-card { box-shadow: 0 3px 10px rgba(176, 48, 106, 0.1); }
html[data-theme="light"][data-tone="pink"] .dash-card:hover { box-shadow: 0 10px 22px rgba(176, 48, 106, 0.18); }
html[data-theme="light"][data-tone="pink"] .nav-menu-box a:hover { background: rgba(176, 48, 106, 0.08); }
html[data-theme="light"][data-tone="pink"] .dash-card.dash-hl { box-shadow: 0 0 0 3px rgba(176, 48, 106, 0.12); }
html[data-theme="light"][data-tone="pink"] .modal-overlay { background: rgba(90, 40, 60, 0.35); }
/* 옐로우: 베이지 상자 + 호박색 포인트 (노란 글자는 밝은 바탕에서 안 읽혀서 포인트는 진한 호박색) */
html[data-theme="light"][data-tone="yellow"] {
  --card-bg: #f6ecd2;
  --border-purple: #e6d6ab;
  --accent-gold: #8a5a00;
  --text-main: #2a2214;
  --text-muted: #6e6250;
  --text-soft: #4a3f2c;
}
html[data-theme="light"][data-tone="yellow"] .dash-card { box-shadow: 0 3px 10px rgba(138, 90, 0, 0.1); }
html[data-theme="light"][data-tone="yellow"] .dash-card:hover { box-shadow: 0 10px 22px rgba(138, 90, 0, 0.18); }
html[data-theme="light"][data-tone="yellow"] .nav-menu-box a:hover { background: rgba(138, 90, 0, 0.08); }
html[data-theme="light"][data-tone="yellow"] .dash-card.dash-hl { box-shadow: 0 0 0 3px rgba(138, 90, 0, 0.12); }
html[data-theme="light"][data-tone="yellow"] .modal-overlay { background: rgba(70, 55, 20, 0.35); }

/* 상단바 10% 얇게 (60 → 54px), 하단바 절반 가까이 얇게 */
body { padding-top: 54px; }
.topbar { height: 54px; }
.nav-menu { top: 54px; }
@media (max-width: 900px) { .topbar-nav { top: 54px; } }
footer { padding: 7px 24px; font-size: 0.78rem; }

/* ---------- 닉네임 배지 (설정 → 개인 → 기본 닉네임) ---------- */
.nk { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-purple); font-size: 0.75rem; font-weight: 700; line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text-soft); }
.nk img { width: 14px; height: 14px; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }
.nk-chess { border-color: #81b64c; box-shadow: inset 0 0 0 1px rgba(129, 182, 76, 0.35); }
.nk-chzzk { background: #000 !important; color: #00ffa3 !important; border-color: #00ffa3 !important; }
.nk-lichess { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.nk-fide { border-color: #e5484d; }
.nk-fide.nk-titled { background: #c62a2f !important; color: #fff !important; border-color: #fff !important; }
.nk-fide b { font-weight: 900; }
.nk-dia { color: #c4b5fd !important; border-color: #a78bfa !important; background: linear-gradient(135deg, rgba(237, 233, 254, 0.14), rgba(139, 92, 246, 0.16)) !important; box-shadow: inset 0 0 0 1px rgba(221, 214, 254, 0.25); }   /* 다이아몬드 회원 닉네임: 다이아 아이콘 색 (nk-diamond.svg) */
.nk-dia img { border-radius: 0; }
.nk.nk-link { cursor: pointer; }
.nk.nk-link:hover { text-decoration: underline; }
/* 관리자 닉네임: 보라 배경 · 흰 글씨 (어떤 닉네임 종류든 이게 우선) */
.nk.nk-admin { background: #7c3aed !important; color: #fff !important; border-color: #7c3aed !important; box-shadow: none !important; }
.nk.nk-admin img { display: none; }   /* 관리자 닉네임은 아이콘 없이 */
/* 하단 접속 수에 마우스를 올리면 뜨는 접속 중 회원 목록 */
.footer-online { position: relative; cursor: default; }
.online-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2000; display: flex; flex-wrap: wrap; gap: 4px; width: max-content; max-width: min(420px, 90vw); max-height: 260px; overflow-y: auto; padding: 8px; background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); font-weight: 600; color: var(--text-muted); }
.online-pop[hidden] { display: none; }
/* 접속 중 목록: 나라 구분선(|) · 나라 이름표 (관리자는 국기 + 나라, 일반 회원은 '해외') */
.online-sep { align-self: center; padding: 0 4px; color: var(--border-purple); font-weight: 700; }
.online-ctry { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.online-ctry::after { content: ':'; }
.online-ctry img { border-radius: 2px; }
.online-hidden { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--border-purple); font-size: 0.75rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* 처음 온 외국어 사용자에게: 영어로 볼지 묻는 창 */
.lang-ask { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 9, 18, 0.6); }
.lang-ask-box { width: min(380px, 100%); background: var(--card-bg); border: 1px solid var(--border-purple); border-radius: 14px; padding: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); text-align: center; }
.lang-ask-title { font-size: 1.05rem; font-weight: 900; color: var(--accent-gold); margin-bottom: 8px; }
.lang-ask-box p { margin: 0 0 14px; color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; }
.lang-ask-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lang-ask-btns button { flex: 1 1 140px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-purple); background: var(--btn-bg); color: var(--text-main); font: inherit; font-weight: 800; cursor: pointer; }
.lang-ask-btns button.primary { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--on-accent); }
.lang-ask-note { margin-top: 10px; font-size: 0.75rem; color: var(--text-muted); }
.nav-user.nav-dia { color: #c4b5fd !important; }   /* 다이아몬드 회원: 상단바 닉네임 다이아 색 */
/* 라이트 테마: 하늘색이 흰 바탕에 묻혀서 진하게 */
html[data-theme="light"] .nk-dia { color: #6d28d9 !important; border-color: #7c3aed !important; box-shadow: none; }
html[data-theme="light"] .nav-user.nav-dia { color: #6d28d9 !important; text-shadow: none; }
.nav-user .nk-dia-ico { width: 14px; height: 14px; margin-right: -2px; }
/* 코스 > 코스 출시 (다이아몬드 회원 메뉴): 닉네임과 같은 다이아 색 · 아이콘 */
.nav-menu-box a.nav-dia-link { display: flex; align-items: center; gap: 6px; color: #c4b5fd; }
.nav-menu-box a.nav-dia-link .nk-dia-ico { width: 14px; height: 14px; flex: none; }
html[data-theme="light"] .nav-menu-box a.nav-dia-link { color: #6d28d9; text-shadow: none; }
/* 상단 '크리에이터' 메뉴: 다이아몬드 색 + 아이콘 */
/*   !important: 메뉴가 열렸을 때(.nav-item.open) · 휴대폰 메뉴의 글자색 규칙이 더 강해서 덮어쓰이던 것 */
.nav-parent.nav-dia-parent { display: inline-flex; align-items: center; gap: 5px; color: #c4b5fd !important; }
.nav-parent.nav-dia-parent .nk-dia-ico { width: 14px; height: 14px; flex: none; }
html[data-theme="light"] .nav-parent.nav-dia-parent { color: #6d28d9 !important; text-shadow: none; }
.nk.nk-hidden { opacity: 0.5; border-style: dashed !important; }   /* 관리자 화면: 닉네임 표시를 끈 회원 */

/* 사업자 정보 (하단바 아래, 스크롤 맨 끝) */
.biz-info { width: 100%; padding: 16px 24px 22px; background: var(--card-bg); color: var(--text-muted); font-size: 0.74rem; line-height: 1.7; text-align: right; }
.biz-info .biz-name { font-weight: 800; color: var(--text-main); margin-bottom: 2px; }
.biz-info .biz-sep { margin: 0 6px; opacity: 0.6; }
.biz-info .biz-copy { margin-top: 4px; }
@media (max-width: 576px) { .biz-info .biz-sep { display: block; height: 0; overflow: hidden; } }   /* 휴대폰: | 자리에서 줄바꿈 */body.has-biz { min-height: calc(100vh + var(--biz-h, 0px)); }

/* 모든 체스판 아래: 이전 수 · 다음 수 버튼은 테마색 배경 (연구 · 분석 · 코스 · 작은 체스판) */
html .an-nav #btn-prev, html .an-nav #btn-next, html .mb-nav > button:nth-child(2), html .mb-nav > button:nth-child(3) {
  background: var(--accent-gold); border-color: var(--accent-gold); color: var(--on-accent);
}
html .an-nav #btn-prev:hover, html .an-nav #btn-next:hover, html .mb-nav > button:nth-child(2):hover, html .mb-nav > button:nth-child(3):hover {
  color: var(--on-accent); filter: brightness(1.08);
}

/* 휴대폰: 입력칸 글자 16px 미만이면 iOS 가 탭할 때 화면을 확대함 → 16px 고정 */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 휴대폰: 작은 링크 · 버튼 터치 영역 넓히기 */
  .footer-links a { display: inline-block; padding: 8px 2px; }
  .modal-close { min-width: 40px; min-height: 40px; }
  #link-register { display: inline-block; padding: 10px 4px; }
}

/* 휴대폰 · 태블릿: 단축키 안내(?) · 설정(톱니) 버튼은 빼고 (설정은 상단 메뉴에 있음) ◀ ▶ 수 넘기기 버튼을 가로로 넓게 */
@media (max-width: 1000px) {
  .an-nav #btn-help, .an-nav #btn-settings { display: none !important; }
  .an-nav #btn-prev, .an-nav #btn-next, .mb-nav > button:nth-child(2), .mb-nav > button:nth-child(3) {
    flex: 3 1 0 !important;
  }
}

/* 휴대폰 메뉴(☰): 라이트 테마의 하위 메뉴 그림자가 펼친 목록에 박스처럼 보이지 않게 */
@media (max-width: 640px) {
  html[data-theme="light"] .topbar-nav .nav-menu-box { box-shadow: none; background: transparent; border: none; }
}

/* 사이트 모양 드롭다운 (js/nice_select.js, <select data-nice>) */
.nsel { position: relative; display: block; min-width: 0; }
.nsel-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-purple); background: var(--bg-dark); color: var(--text-main); font: inherit; font-size: 0.88rem; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .15s; }
.nsel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsel-btn svg { flex: none; color: var(--text-muted); transition: transform .15s; }
.nsel-btn:hover, .nsel.open .nsel-btn { border-color: #a78bfa; }
.nsel.open .nsel-btn svg { transform: rotate(180deg); }
.nsel-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; display: none; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; padding: 5px; border-radius: 10px; border: 1px solid var(--border-purple); background: var(--card-bg); }
.nsel.open .nsel-list { display: flex; }
.nsel-opt { padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.86rem; font-weight: 700; text-align: left; cursor: pointer; }
.nsel-opt:hover { background: rgba(167, 139, 250, 0.12); color: var(--text-main); }
.nsel-opt.on { color: #a78bfa; }
.nsel-opt:disabled { opacity: .45; cursor: default; }
/* 아직 일반 회원에게 안 열린 기능 (header.php 의 nav-priv): 청록빛 글씨 + 작은 자물쇠 */
.topbar-nav .nav-parent.nav-priv, .nav-menu-box a.nav-priv { color: color-mix(in srgb, var(--text-muted) 45%, #2dd4bf); }
.topbar-nav .nav-parent.nav-priv:hover, .nav-item.open > .nav-parent.nav-priv, .nav-menu-box a.nav-priv:hover { color: color-mix(in srgb, var(--text-main) 35%, #2dd4bf); }
.nav-menu-box a.nav-priv:hover { background: rgba(45, 212, 191, 0.1); }
.nav-priv .nav-lock { flex: none; margin-left: 5px; vertical-align: -1px; opacity: 0.85; }
.nav-menu-box a.nav-priv:not(.nav-dia-link) { display: flex; align-items: center; }
/* 다이아 색 메뉴도 비공개면 같은 잠금 색 (라이트 테마 포함) */
html .nav-parent.nav-dia-parent.nav-priv, html[data-theme="light"] .nav-parent.nav-dia-parent.nav-priv { color: color-mix(in srgb, var(--text-muted) 45%, #2dd4bf) !important; }
html .nav-parent.nav-dia-parent.nav-priv:hover, html .nav-item.open > .nav-parent.nav-dia-parent.nav-priv, html[data-theme="light"] .nav-parent.nav-dia-parent.nav-priv:hover, html[data-theme="light"] .nav-item.open > .nav-parent.nav-dia-parent.nav-priv { color: color-mix(in srgb, var(--text-main) 35%, #2dd4bf) !important; }
html .nav-menu-box a.nav-dia-link.nav-priv, html[data-theme="light"] .nav-menu-box a.nav-dia-link.nav-priv { color: color-mix(in srgb, var(--text-muted) 45%, #2dd4bf); }
html .nav-menu-box a.nav-dia-link.nav-priv:hover, html[data-theme="light"] .nav-menu-box a.nav-dia-link.nav-priv:hover { color: color-mix(in srgb, var(--text-main) 35%, #2dd4bf); }
/* 잠긴 메뉴 (nav-locked): 링크 없음, 눌러도 반응 없음 */
.topbar-nav .nav-parent.nav-locked, .nav-menu-box a.nav-locked { cursor: default; pointer-events: none; opacity: 0.75; }

/* 코스 · 크리에이터 메뉴 접기 (header.php nav-fold): 기본 접힘 */
.nav-fold { display: none; }
.nav-fold.open { display: contents; }
.nav-fold-btn .nav-fold-ico { transition: transform 0.2s; }
.nav-fold-btn[aria-expanded="true"] .nav-fold-ico { transform: rotate(180deg); }
.nav-fold-btn[aria-expanded="true"] .nav-fold-txt, .nav-fold-btn[aria-expanded="true"] .nav-fold-badge { display: none; }
/* 더보기 안의 메뉴는 빨간 글씨 */
html .nav-fold .nav-parent, html .nav-fold .nav-parent:hover, html .nav-fold .nav-parent.nav-priv, html .nav-fold .nav-parent.nav-dia-parent, html .nav-fold .nav-parent.nav-dia-parent.nav-priv, html .nav-fold .nav-menu-box a, html .nav-fold .nav-menu-box a:hover, html .nav-fold .nav-menu-box a.nav-priv, html .nav-fold .nav-menu-box a.nav-dia-link, html .nav-fold .nav-menu-box a.nav-dia-link.nav-priv { color: #ef5a5a !important; }
html[data-theme="light"] .nav-fold .nav-parent, html[data-theme="light"] .nav-fold .nav-parent:hover, html[data-theme="light"] .nav-fold .nav-parent.nav-priv, html[data-theme="light"] .nav-fold .nav-parent.nav-dia-parent, html[data-theme="light"] .nav-fold .nav-parent.nav-dia-parent.nav-priv, html[data-theme="light"] .nav-fold .nav-menu-box a, html[data-theme="light"] .nav-fold .nav-menu-box a:hover, html[data-theme="light"] .nav-fold .nav-menu-box a.nav-priv, html[data-theme="light"] .nav-fold .nav-menu-box a.nav-dia-link, html[data-theme="light"] .nav-fold .nav-menu-box a.nav-dia-link.nav-priv { color: #c9302c !important; }