/* v0.0.53 | 5-in-1 Dashboard SPA — style.css */

/* ── 기본 리셋 & 페이드인 애니메이션 ── */
* { box-sizing: border-box; }

/* Tailwind CDN 로드 실패 대비: .hidden은 반드시 숨겨야 함 */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════
   🌗 다크/라이트 테마 변수
   - Tailwind의 slate 팔레트를 아래 CSS 변수로 remap (index.html의 tailwind.config 참고)
   - 값은 "R G B" 공백구분 트리플릿 (Tailwind opacity modifier인 bg-slate-800/60 등이 동작하려면 필수 포맷)
   - 기본(html, 다크)은 기존 Tailwind slate 값과 동일 → 다크 모드 외관은 기존과 100% 동일
   - html.light는 라이트 팔레트로 override (순백 대신 은은한 블루그레이 톤 사용)
══════════════════════════════════════════════════ */
html {
  --slate-50:  248 250 252;
  --slate-100: 241 245 249;
  --slate-200: 226 232 240;
  --slate-300: 203 213 225;
  --slate-400: 148 163 184;
  --slate-500: 100 116 139;
  --slate-600: 71 85 105;
  --slate-700: 51 65 85;
  --slate-800: 30 41 59;
  --slate-900: 15 23 42;
  --slate-950: 2 6 23;

  --nav-hover-bg: rgba(255,255,255,0.1);
  --overlay-scrim: rgba(15, 23, 42, 0.92);

  /* 강조 색상(부드러운 박스용 900/800/700 + 텍스트용 400/300/200) — 기본값은 Tailwind 표준값과 동일 */
  --blue-900: 30 58 138;    --blue-700: 29 78 216;    --blue-400: 96 165 250;   --blue-300: 147 197 253;
  --indigo-900: 49 46 129;  --indigo-300: 165 180 252; --indigo-200: 199 210 254;
  --violet-900: 76 29 149;  --violet-400: 167 139 250; --violet-300: 196 181 253; --violet-200: 221 214 254;
  --emerald-900: 6 78 59;   --emerald-800: 6 95 70;   --emerald-700: 4 120 87;  --emerald-400: 52 211 153; --emerald-300: 110 231 183;
  --rose-900: 136 19 55;    --rose-800: 159 18 57;    --rose-700: 190 18 60;    --rose-400: 251 113 133;   --rose-300: 253 164 175;
  --amber-900: 120 53 15;   --amber-400: 251 191 36;  --amber-300: 252 211 77;
  --yellow-900: 113 63 18;  --yellow-300: 253 224 71; --yellow-200: 254 240 138;
}

html.light {
  --slate-50:  26 34 51;
  --slate-100: 32 42 61;
  --slate-200: 43 54 80;
  --slate-300: 59 71 97;
  --slate-400: 91 103 128;
  --slate-500: 120 132 156;
  --slate-600: 154 165 186;
  --slate-700: 195 203 219;
  --slate-800: 221 226 236;
  --slate-900: 238 241 247;
  --slate-950: 227 232 241;

  --nav-hover-bg: rgba(15, 23, 42, 0.06);
  --overlay-scrim: rgba(238, 241, 247, 0.92);

  /* 라이트 모드: 박스 배경(900/800/700)은 중간 채도 톤으로 바꿔 옅은 opacity에서도 은은하게 보이도록 하고,
     텍스트(400/300/200)는 짙은 톤으로 바꿔 옅은 박스 위에서도 대비를 확보 */
  --blue-900: 96 165 250;    --blue-700: 59 130 246;   --blue-400: 29 78 216;    --blue-300: 30 64 175;
  --indigo-900: 129 140 248; --indigo-300: 67 56 202;  --indigo-200: 55 48 163;
  --violet-900: 167 139 250; --violet-400: 109 40 217; --violet-300: 109 40 217; --violet-200: 91 33 182;
  --emerald-900: 52 211 153; --emerald-800: 16 185 129; --emerald-700: 16 185 129; --emerald-400: 4 120 87; --emerald-300: 6 95 70;
  --rose-900: 251 113 133;   --rose-800: 244 63 94;    --rose-700: 244 63 94;    --rose-400: 190 18 60;    --rose-300: 159 18 57;
  --amber-900: 251 191 36;   --amber-400: 180 83 9;    --amber-300: 146 64 14;
  --yellow-900: 250 204 21;  --yellow-300: 161 98 7;   --yellow-200: 133 77 14;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.fade-in {
  animation: fadeIn 0.35s ease forwards;
}

/* ── 사이드바 ── */
#sidebar {
  transition: transform 0.3s ease;
}

#sidebar.mobile-open {
  transform: translateX(0) !important;
}

.nav-item {
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: rgb(var(--slate-300));
}

.nav-item:hover {
  background: var(--nav-hover-bg);
  color: rgb(var(--slate-50));
}

.nav-item.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

/* Phase 4 로드맵 신규 메뉴 "준비중" 배지 (v0.2.3~) */
.badge-soon-nav {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 800;
  color: rgb(var(--amber-400));
  background: rgb(var(--amber-900) / 0.25);
  border: 1px solid rgb(var(--amber-400) / 0.4);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* 심리테스트존 카테고리 탭 (v0.2.4~) */
.cat-tab-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgb(var(--slate-700) / 0.5);
  color: rgb(var(--slate-400));
  cursor: pointer;
  transition: all 0.15s ease;
}
.cat-tab-btn.active {
  background: #7c3aed;
  color: #fff;
}

/* ── 사이드바 "테스트" 그룹 (접기/펼치기) ── */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: rgb(var(--slate-300));
  transition: all 0.2s ease;
}

.nav-group-header:hover {
  background: var(--nav-hover-bg);
  color: rgb(var(--slate-50));
}

.nav-group-chevron {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.nav-group.open .nav-group-chevron {
  transform: rotate(180deg);
}

.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.nav-group.open .nav-group-items {
  /* 실제 콘텐츠 높이보다 넉넉히 큰 값 — 테스트 목록이 계속 늘어나도(Stage B) 잘리지 않도록 함.
     사이드바 자체(nav)에 overflow-y-auto가 있어 화면보다 길어지면 그쪽에서 스크롤됨 */
  max-height: 2000px;
}

.nav-subitem {
  padding-left: 2.4rem;
  font-size: 0.9rem;
}

/* ── 타임 게이지 바 (스트룹 테스트) ── */
@keyframes gaugeReduce {
  from { width: 100%; }
  to   { width: 0%; }
}

#time-gauge-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
  transition: background 0.3s;
}

#time-gauge-bar.running {
  animation: gaugeReduce linear forwards;
}

/* ── 타임 게이지 바 (색각 테스트) — id 충돌 방지를 위해 별도 정의 ── */
#colorvision-gauge-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
}

/* ── 타임 게이지 바 (논리력 테스트) ── */
#logic-gauge-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
}

/* ── 프리로더 광고 오버레이 ── */
#preloader-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(99,102,241,0.3);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── 꿈 해몽 팝업 ── */
#dream-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

#dream-modal.hidden {
  display: none;
}

.modal-content {
  animation: fadeInScale 0.3s ease forwards;
  max-height: 90vh;
  overflow-y: auto;
}

/* ── 카드 호버 ── */
.service-card {
  transition: all 0.25s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

/* ── 옵션 버튼 (MBTI / ADHD) ── */
.option-btn {
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: left;
  border: 2px solid rgb(var(--slate-700));
  border-radius: 0.75rem;
  padding: 0.85rem 1.2rem;
  background: rgb(var(--slate-800));
  color: rgb(var(--slate-300));
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.5;
}

.option-btn:hover {
  border-color: #6366f1;
  background: rgba(99,102,241,0.1);
  color: #e2e8f0;
}

.option-btn.selected {
  border-color: #6366f1;
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
  font-weight: 600;
}

/* ── 프로그레스 바 ── */
.progress-bar-track {
  background: rgb(var(--slate-700));
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.4s ease;
}

/* ── 결과 티어 배지 ── */
.tier-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ── 모바일 오버레이 ── */
#sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
  display: none;
}

#sidebar-overlay.active {
  display: block;
}

/* ── 스크롤바 스타일 ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgb(var(--slate-900)); }
::-webkit-scrollbar-thumb { background: rgb(var(--slate-700)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--slate-600)); }

/* ── 더미 그래프 바 ── */
.dummy-bar {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #6366f1, #4338ca);
  animation: fadeIn 0.5s ease forwards;
}

/* ── 스트룹 텍스트 (색상 강제 적용) ── */
.stroop-red    { color: #ef4444 !important; }
.stroop-blue   { color: #3b82f6 !important; }
.stroop-green  { color: #22c55e !important; }
.stroop-yellow { color: #eab308 !important; }
.stroop-purple { color: #a855f7 !important; }
.stroop-orange { color: #f97316 !important; }
.stroop-pink   { color: #ec4899 !important; }
.stroop-sky    { color: #0ea5e9 !important; }

/* ── 반응형 그리드 보조 ── */
@media (max-width: 640px) {
  .service-card {
    font-size: 0.9rem;
  }
}

/* ── 정답/오답 마이크로 애니메이션 (v0.0.33~) ── */
@keyframes popScale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}
.anim-pop   { animation: popScale 0.3s ease; }
.anim-shake { animation: shakeX 0.35s ease; }

/* ── 🎰 로또 직접 뽑기 게임 (v0.1.2~) ── */
.lottodraw-sphere {
  position: relative;
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 42%, rgba(2,6,23,0.28) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(148,163,184,0.4);
  box-shadow:
    inset 0 -20px 42px rgba(2,6,23,0.45),
    inset 0 14px 30px rgba(255,255,255,0.08),
    0 18px 45px rgba(2,6,23,0.5);
  overflow: hidden;
}
.lottodraw-glare {
  position: absolute; left: 15%; top: 7%;
  width: 36%; height: 20%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,0.38), rgba(255,255,255,0));
  filter: blur(2px);
  pointer-events: none;
  z-index: 5;
}
/* ── 기계 외형 (v0.1.4~, 실제 추첨기 정면 사진 참고) ── */
.lottodraw-machine {
  position: relative;
  margin: 0 auto;
}
.lottodraw-ring {
  /* 구체를 감싸는 원형 프레임 */
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(148,163,184,0.35);
  box-shadow: 0 0 14px rgba(148,163,184,0.12);
  pointer-events: none;
  z-index: 1;
}
.lottodraw-hole {
  /* 구체 하단 배출구 */
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center top, rgba(2,6,23,0.55), rgba(2,6,23,0.15) 75%, transparent);
  border-top: 1px solid rgba(148,163,184,0.35);
  pointer-events: none;
  z-index: 1;
}
.lottodraw-neck {
  /* 구체 아래 배출 튜브(유리) */
  position: absolute; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(148,163,184,0.10), rgba(148,163,184,0.22));
  border: 1px solid rgba(148,163,184,0.45);
  border-top: none;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.lottodraw-ramp {
  /* 공이 굴러 내려가는 경사 레일 */
  position: absolute; height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(148,163,184,0.6), rgba(148,163,184,0.28));
  box-shadow: 0 3px 0 rgba(148,163,184,0.3), 0 6px 10px rgba(2,6,23,0.35);
  transform-origin: left center;
  z-index: 2;
}
.lottodraw-stand {
  /* 받침대(페데스탈) — 유리 구체 뒤로 비쳐 보임 */
  position: absolute; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(71,85,105,0.85), rgba(30,41,59,0.95));
  clip-path: polygon(32% 0, 68% 0, 100% 88%, 100% 100%, 0 100%, 0 88%);
  border-radius: 4px;
  z-index: 0;
}
.lottodraw-rolling {
  /* 배출 통로를 굴러가는 공 — 기계 컨테이너 좌표계로 옮겨 심어짐 */
  z-index: 30;
}
.lottodraw-ball {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  will-change: transform;
  z-index: 3;
  user-select: none;
}
.lottodraw-fadeout {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
  transform: scale(0.96);
}
@keyframes lottodrawPop {
  0%   { transform: scale(0.25); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.lottodraw-pop { animation: lottodrawPop 0.3s ease-out; }