/**
 * design-system.css — 우주 테마 디자인 시스템
 * 2026 무주·진안·장수 진로·진학 박람회
 * ==============================================
 * global.css 이후에 로드하여 CSS 변수와
 * 공통 컴포넌트를 우주 테마로 오버라이드합니다.
 * ==============================================
 */

/* ══════════════════════════════════════════
   CSS 변수 — Space Theme Override
   ══════════════════════════════════════════ */
:root {
  /* 배경 팔레트 */
  --bg-deep: #080820;
  --bg-mid:  #2d1b69;
  --bg-warm: rgba(196,75,107,0.22);

  /* 강조색 */
  --accent-cyan:  #00d4ff;
  --accent-gold:  #ffd54f;
  --accent-coral: #ff6b6b;

  /* ZONE 4색 */
  --zone-1: #1565c0;
  --zone-2: #d84315;
  --zone-3: #37474f;
  --zone-4: #6a1b9a;
  --zone-1-glow: rgba(21,101,192,0.4);
  --zone-2-glow: rgba(216,67,21,0.4);
  --zone-3-glow: rgba(55,71,79,0.4);
  --zone-4-glow: rgba(106,27,154,0.4);

  /* 텍스트 */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255,255,255,0.75);
  --text-muted:     rgba(255,255,255,0.44);

  /* 기존 global.css 변수 오버라이드 */
  --color-primary:       #00d4ff;
  --color-primary-dark:  #00b8d9;
  --color-primary-light: rgba(0,212,255,0.10);
  --color-accent:        #ffd54f;
  --color-accent-dark:   #ffca28;
  --color-accent-light:  rgba(255,213,79,0.10);
  --color-background:    #080820;
  --color-surface:       rgba(255,255,255,0.055);
  --color-text-dark:     #ffffff;
  --color-text-mid:      rgba(255,255,255,0.72);
  --color-text-light:    rgba(255,255,255,0.42);
  --color-border:        rgba(255,255,255,0.10);
  --color-border-strong: rgba(255,255,255,0.22);

  /* 그림자 (어두운 배경용) */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.65);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.75);
}

/* ══════════════════════════════════════════
   바디 & 전역 배경
   ══════════════════════════════════════════ */
body {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse at top, rgba(45,27,105,0.60) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(196,75,107,0.14) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--text-primary);
}

/* 스크롤바 */
::-webkit-scrollbar-track { background: #0a0a20; }
::-webkit-scrollbar-thumb {
  background: rgba(0,212,255,0.32);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

/* 텍스트 선택 */
::selection { background: rgba(0,212,255,0.26); color: #fff; }

/* 포커스 링 */
:focus-visible { outline-color: var(--accent-cyan); }

/* ══════════════════════════════════════════
   카드 — Glassmorphism
   ══════════════════════════════════════════ */
.card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
}
.card:hover {
  border-color: rgba(0,212,255,0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,212,255,0.08);
}
.card-title { color: #fff; }
.card-text  { color: var(--text-secondary); }

/* ══════════════════════════════════════════
   버튼 — Space Theme
   ══════════════════════════════════════════ */
/* Primary / Accent (둘 다 시안으로 통일) */
.btn-primary,
.btn-accent {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-cyan);
  font-weight: 800;
  box-shadow: 0 0 16px rgba(0,212,255,0.26);
}
.btn-primary:hover,
.btn-accent:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 28px rgba(0,212,255,0.55);
  color: #000;
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--accent-cyan);
  border-color: rgba(0,212,255,0.48);
}
.btn-outline:hover {
  background: rgba(0,212,255,0.08);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.14);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

/* ══════════════════════════════════════════
   섹션 헤더 공통
   ══════════════════════════════════════════ */
.section-eyebrow {
  background: rgba(0,212,255,0.10);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,0.18);
}
.section-title { color: #fff; }
.section-title em {
  color: var(--accent-cyan);
  text-shadow: 0 0 22px rgba(0,212,255,0.38);
}
.section-desc { color: var(--text-secondary); }

/* ══════════════════════════════════════════
   페이지 히어로 (서브 페이지)
   ══════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(145deg, rgba(45,27,105,0.88) 0%, rgba(8,8,32,0.96) 100%);
  border-bottom: 1px solid rgba(0,212,255,0.10);
}
.page-hero::before {
  background:
    radial-gradient(circle at 80% 20%, rgba(0,212,255,0.07) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(196,75,107,0.05) 0%, transparent 50%);
}
.page-hero-eyebrow {
  background: rgba(0,212,255,0.10);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,0.18);
}
.page-hero-title { color: #fff; }
.page-hero-desc  { color: var(--text-secondary); }

/* ── 브레드크럼 ── */
.breadcrumb,
.breadcrumb a           { color: rgba(255,255,255,0.42); }
.breadcrumb a:hover     { color: var(--accent-cyan); }
.breadcrumb-current     { color: rgba(255,255,255,0.82); }

/* ══════════════════════════════════════════
   폼 컨트롤
   ══════════════════════════════════════════ */
.form-label { color: rgba(255,255,255,0.82); }
.form-control {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1rem; /* 모바일 자동 줌 방지 */
}
.form-control::placeholder { color: rgba(255,255,255,0.30); }
.form-control:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.12);
  background: rgba(255,255,255,0.09);
}
.form-control.error {
  border-color: #ef5350;
  box-shadow: 0 0 0 3px rgba(239,83,80,0.12);
}
.form-hint  { color: var(--text-muted); }
.form-label .required { color: #ff6b6b; }
.form-error-msg { color: #ff6b6b; }

/* select 화살표 — 시안 */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300d4ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
select.form-control option {
  background: #140c3c;
  color: #fff;
}

input[type="checkbox"] { accent-color: var(--accent-cyan); }

/* ══════════════════════════════════════════
   테이블
   ══════════════════════════════════════════ */
.table-wrapper { border-color: rgba(255,255,255,0.08); }
.table th { background: rgba(0,212,255,0.10); color: var(--accent-cyan); }
.table td {
  color: var(--text-secondary);
  border-bottom-color: rgba(255,255,255,0.06);
}
.table tbody tr:hover td { background: rgba(0,212,255,0.04); }

/* ══════════════════════════════════════════
   배지
   ══════════════════════════════════════════ */
.badge-primary { background: rgba(0,212,255,0.12); color: var(--accent-cyan); }
.badge-accent  { background: rgba(255,213,79,0.12); color: var(--accent-gold); }

/* ══════════════════════════════════════════
   알림 박스
   ══════════════════════════════════════════ */
.alert-success { background: rgba(46,125,50,0.12); }
.alert-error   { background: rgba(198,40,40,0.12); }
.alert-warning { background: rgba(245,124,0,0.12); }
.alert-info    { background: rgba(2,119,189,0.12); }

/* ══════════════════════════════════════════
   토스트
   ══════════════════════════════════════════ */
.toast {
  background: rgba(28,16,72,0.97);
  border: 1px solid rgba(0,212,255,0.22);
  backdrop-filter: blur(8px);
  color: #fff;
}
.toast.success {
  background: rgba(25,65,30,0.97);
  border-color: rgba(76,175,80,0.38);
}
.toast.error {
  background: rgba(70,18,18,0.97);
  border-color: rgba(239,83,80,0.38);
}

/* ══════════════════════════════════════════
   스켈레톤
   ══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
}

/* ══════════════════════════════════════════
   모달
   ══════════════════════════════════════════ */
.modal-overlay { background: rgba(0,0,0,0.82); backdrop-filter: blur(4px); }
.modal {
  background: rgba(14,8,42,0.97);
  border: 1px solid rgba(0,212,255,0.14);
  backdrop-filter: blur(18px);
}
.modal-title { color: #fff; }
.modal-close {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.62);
}
.modal-close:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ══════════════════════════════════════════
   타임라인
   ══════════════════════════════════════════ */
.timeline::before {
  background: linear-gradient(
    to bottom,
    var(--accent-cyan) 0%,
    rgba(0,212,255,0.06) 100%
  );
}
.timeline-item {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.08);
}
.timeline-item:hover {
  background: rgba(0,212,255,0.04);
  border-color: rgba(0,212,255,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.timeline-time  { color: var(--accent-cyan); }
.timeline-dot   { background: var(--bg-deep); border-color: var(--accent-cyan); }
.timeline-title { color: #fff; }
.timeline-type-badge {
  background: rgba(0,212,255,0.10);
  color: var(--accent-cyan);
}
.timeline-item.type-break    { opacity: 0.55; }
.timeline-item.type-special  { border-left: 3px solid var(--accent-gold); }
.timeline-item.type-ceremony { border-left: 3px solid var(--accent-gold); }
.timeline-item.type-consult  { border-left: 3px solid #4caf50; }
.timeline-item.type-event    { border-left: 3px solid var(--accent-cyan); }

/* ── 스케줄 탭 ── */
.schedule-tab {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--text-secondary);
}
.schedule-tab:hover {
  border-color: rgba(0,212,255,0.32);
  background: rgba(0,212,255,0.06);
  color: #fff;
}
.schedule-tab.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 16px rgba(0,212,255,0.36);
}
.schedule-tab.active .tab-day {
  color: rgba(0,0,0,0.60);
  opacity: 1;
}

/* ══════════════════════════════════════════
   스크롤 TOP 버튼
   ══════════════════════════════════════════ */
.scroll-top {
  background: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 14px rgba(0,212,255,0.36);
}
.scroll-top:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 0 26px rgba(0,212,255,0.60);
}

/* ══════════════════════════════════════════
   ZONE 뱃지 기본
   ══════════════════════════════════════════ */
.zone-badge {
  background: rgba(0,212,255,0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════
   섹션 배경 미세 조정
   ══════════════════════════════════════════ */
.stats-section {
  background: rgba(255,255,255,0.018);
  border-top-color: rgba(255,255,255,0.05);
  border-bottom-color: rgba(255,255,255,0.05);
}
.schedule-section { background: rgba(255,255,255,0.012); }
.venue-section    { background: rgba(255,255,255,0.018); }

/* ══════════════════════════════════════════
   키프레임 애니메이션
   ══════════════════════════════════════════ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes planetFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-18px) rotate(4deg); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0,212,255,0.28); }
  50%       { box-shadow: 0 0 36px rgba(0,212,255,0.65); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%       { opacity: 1;    transform: scale(1.1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ══════════════════════════════════════════
   터치 최적화 (모바일)
   ══════════════════════════════════════════ */
a, button {
  -webkit-tap-highlight-color: transparent;
}
.btn { min-height: 48px; }
.btn-sm { min-height: 36px; }