/* ==================================================================
   노잉 통합 관리 시스템 — 사이버 관제센터 테마
   ==================================================================
   원본 화면의 CSS는 그대로 두고, 이 파일이 나중에 읽히며 덮어쓴다.
   원본이 CSS 변수(--bg, --accent 등)로 색을 관리하므로
   변수만 갈아끼워도 화면 전체의 색이 함께 바뀐다.
   그 위에 관제센터 느낌(그리드 배경, 모서리 브래킷, 발광)을 얹는다.

   테마를 빼고 싶으면 index.html 에서 이 파일 한 줄만 지우면 된다.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

:root {
  /* 관제센터 팔레트 — 짙은 네이비 바탕에 시안 발광 */
  --bg: #050e1c;
  --card-bg: #0a1a30;
  --text: #d7e9f5;
  --text-dim: #6e93ae;
  --border: #14395c;

  --accent: #2fd6f5;
  --accent-dim: #0b2c44;

  --good: #35e08c;
  --good-bg: #0a3123;
  --bad: #ff5f66;
  --bad-bg: #3a1420;
  --warn: #ffb020;
  --warn-bg: #38290e;

  --radius: 6px;                       /* 둥근 모서리 → 각진 패널 */
  --shadow: 0 0 12px rgba(47, 214, 245, .10), 0 8px 24px rgba(0, 0, 0, .55);

  /* 테마 전용 */
  --cyber-line: rgba(47, 214, 245, .55);
  --cyber-line-dim: rgba(47, 214, 245, .18);
  --cyber-glow: 0 0 8px rgba(47, 214, 245, .35);
}

/* ------------------------------------------------------------------
   바탕 — 은은한 그리드와 위쪽 광원
   ------------------------------------------------------------------ */
body {
  /* 위쪽 광원은 한 번만 그린다 — 반복되면 줄무늬처럼 보인다 */
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #0d2a49 0%, rgba(13, 42, 73, 0) 60%) top center / 100% 100vh no-repeat,
    var(--bg);
  color: var(--text);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg,  var(--cyber-line-dim) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--cyber-line-dim) 0 1px, transparent 1px 48px);
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
}

/* 그리드 위에 내용이 오도록 */
body > * { position: relative; z-index: 1; }

/* 숫자와 라틴 글자만 관제판 서체로. 한글은 원래 서체를 그대로 쓴다 */
h1, h2, .day-board-title, .stat-num, .pin-name,
.hof-rank, .day-board-badge, .cal-date {
  font-family: 'Rajdhani', -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------
   헤더 — 관제센터 상단 바
   ------------------------------------------------------------------ */
header {
  background: linear-gradient(180deg, #0c2038 0%, #081527 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(47, 214, 245, .25), 0 6px 18px rgba(0, 0, 0, .45);
}

header h1 {
  text-transform: none;
  letter-spacing: .06em;
  text-shadow: 0 0 12px rgba(47, 214, 245, .45);
}

/* ------------------------------------------------------------------
   패널류 — 모서리 브래킷과 발광 테두리
   배경 그라디언트 8개로 네 모서리에 'ㄱ'자 장식을 그린다.
   가상요소를 쓰지 않아 원본 CSS와 충돌하지 않는다.
   ------------------------------------------------------------------ */
.login-card,
.modal,
.day-board-panel,
.cleaning-card,
.cleaning-history-box,
.cal-expand-panel,
.hof-card,
.account-section {
  background:
    linear-gradient(var(--cyber-line), var(--cyber-line)) 0 0 / 16px 2px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 0 0 / 2px 16px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 100% 0 / 16px 2px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 100% 0 / 2px 16px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 0 100% / 16px 2px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 0 100% / 2px 16px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 100% 100% / 16px 2px,
    linear-gradient(var(--cyber-line), var(--cyber-line)) 100% 100% / 2px 16px,
    linear-gradient(180deg, rgba(47, 214, 245, .06) 0%, rgba(47, 214, 245, 0) 40%),
    var(--card-bg);
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------------
   버튼 — 시안 발광
   ------------------------------------------------------------------ */
.btn {
  background: linear-gradient(180deg, #14a8cc 0%, #0d7fa3 100%);
  color: #eafcff;
  border: 1px solid rgba(47, 214, 245, .5);
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--cyber-glow);
}

.btn:hover { opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 14px rgba(47, 214, 245, .55); }

.btn.secondary {
  background: rgba(11, 44, 68, .6);
  color: var(--accent);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn.secondary:hover { border-color: var(--accent); box-shadow: var(--cyber-glow); }

.btn.danger,
.btn.bad {
  background: linear-gradient(180deg, #c2404a 0%, #8f2a33 100%);
  border-color: rgba(255, 95, 102, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 8px rgba(255, 95, 102, .3);
}

/* ------------------------------------------------------------------
   구역 이동 · 탭
   ------------------------------------------------------------------ */
.section-btn,
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  letter-spacing: .02em;
}

.section-btn.active,
.tab-btn.active {
  color: var(--accent);
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(47, 214, 245, .12) 0%, rgba(47, 214, 245, .03) 100%);
  box-shadow: inset 0 -2px 0 var(--accent), var(--cyber-glow);
  text-shadow: 0 0 10px rgba(47, 214, 245, .5);
}

.section-btn:hover,
.tab-btn:hover { color: var(--accent); }

/* ------------------------------------------------------------------
   로그인 화면
   ------------------------------------------------------------------ */
.login-card h1 { text-shadow: 0 0 14px rgba(47, 214, 245, .5); }

.name-btn {
  background: rgba(10, 26, 48, .85);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.name-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--cyber-glow);
  transform: translateY(-2px);
}

.pin-dot { border-color: var(--border); }
.pin-dot.filled { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(47, 214, 245, .7); }

.key {
  background: rgba(10, 26, 48, .85);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.key:hover { border-color: var(--accent); background: var(--accent-dim); box-shadow: var(--cyber-glow); }

/* 로딩 화면 */
.loading-bar { background: var(--accent-dim); box-shadow: inset 0 0 6px rgba(0, 0, 0, .6); }
.loading-bar-fill { background: linear-gradient(90deg, #0d7fa3, var(--accent)); box-shadow: 0 0 10px rgba(47, 214, 245, .6); }

/* ------------------------------------------------------------------
   캘린더
   ------------------------------------------------------------------ */
.cal-cell {
  background: linear-gradient(180deg, rgba(18, 42, 72, .55) 0%, rgba(10, 26, 48, .85) 100%);
  border: 1px solid #1c4a75;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(47, 214, 245, .08);
}

.cal-cell:hover { border-color: var(--accent); box-shadow: var(--cyber-glow); }

.cal-cell.today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(47, 214, 245, .35), var(--cyber-glow);
}

.cal-head-cell { color: var(--text-dim); letter-spacing: .1em; }

/* ------------------------------------------------------------------
   표 (관리자 화면)
   ------------------------------------------------------------------ */
.admin-table th {
  background: rgba(12, 32, 56, .9);
  color: var(--accent);
  letter-spacing: .06em;
  border-bottom: 1px solid var(--cyber-line);
}

.admin-table td { border-color: var(--border); }
.admin-table tr:hover td { background: rgba(47, 214, 245, .05); }

/* ------------------------------------------------------------------
   입력 요소
   ------------------------------------------------------------------ */
.field input, .field textarea, .field select,
input[type=text], input[type=password], input[type=date],
input[type=time], input[type=number], textarea, select {
  background: rgba(5, 14, 28, .8);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

.field input:focus, .field textarea:focus, .field select:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--cyber-glow);
}

/* ------------------------------------------------------------------
   평가 게이지(읽기 전용) · 점수 배지
   ------------------------------------------------------------------ */
.rating-seg { background: var(--accent-dim); border-radius: 2px; }

/* 토스트 알림 */
#toast, .toast {
  background: rgba(10, 26, 48, .95);
  border: 1px solid var(--accent);
  color: var(--text);
  box-shadow: var(--cyber-glow);
  border-radius: 4px;
}

/* 스크롤바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* 움직임을 줄여둔 사용자는 발광 전환을 끈다 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}