/* ==================================================================
   직원별 화면 스킨
   ==================================================================
   body[data-skin] 값으로 갈아입는다. 값이 없으면 기본(사이버) 그대로.

     (없음)  → 사이버 관제센터 (theme.css 기본)
     pink    → 라이트 · 부드러운 핑크
     yellow  → 라이트 · 자취생으로 살아남기 노랑

   원본 화면과 theme.css 가 CSS 변수로 색을 관리하므로,
   여기서 변수 세트를 재정의하면 대부분 자동으로 따라온다.
   그 아래는 theme.css/features.css 가 색을 직접 박아둔 곳만 되잡는다.
   ================================================================== */

/* ------------------------------------------------------------------
   1. 스킨별 변수 세트
   ------------------------------------------------------------------ */
body[data-skin="pink"] {
  --bg: #fdf2f7;
  --card-bg: #ffffff;
  --text: #54303f;
  --text-dim: #a87b90;
  --border: #f3d3e1;

  --accent: #d94f92;
  --accent-dim: #fbe4ef;

  --good: #1f9d62;
  --good-bg: #e3f5ec;
  --bad: #d9485c;
  --bad-bg: #fbe7ea;
  --warn: #c77b13;
  --warn-bg: #faf0dd;

  --shadow: 0 2px 10px rgba(217, 79, 146, .08), 0 8px 24px rgba(90, 40, 70, .08);
  --cyber-line: rgba(217, 79, 146, .40);
  --cyber-line-dim: rgba(217, 79, 146, .07);
  --cyber-glow: 0 0 8px rgba(217, 79, 146, .22);
}

body[data-skin="yellow"] {
  --bg: #fffbee;
  --card-bg: #ffffff;
  --text: #4d3a12;
  --text-dim: #a18a4e;
  --border: #eddfae;

  --accent: #b5850a;
  --accent-dim: #fbf0c9;

  --good: #1f9d62;
  --good-bg: #e3f5ec;
  --bad: #d9485c;
  --bad-bg: #fbe7ea;
  --warn: #c77b13;
  --warn-bg: #faf0dd;

  --shadow: 0 2px 10px rgba(197, 151, 26, .10), 0 8px 24px rgba(120, 90, 20, .08);
  --cyber-line: rgba(197, 151, 26, .45);
  --cyber-line-dim: rgba(197, 151, 26, .09);
  --cyber-glow: 0 0 8px rgba(197, 151, 26, .25);
}

/* ------------------------------------------------------------------
   2. 라이트 공통 — theme.css 가 어두운 색을 직접 박아둔 곳 되잡기
   ------------------------------------------------------------------ */
body[data-skin="pink"],
body[data-skin="yellow"] {
  background: var(--bg);
}

/* 배경 격자는 은은하게 유지 (선 색은 변수라 자동으로 스킨색) */
body[data-skin="pink"]::before,
body[data-skin="yellow"]::before { opacity: .55; }

/* 헤더 */
body[data-skin="pink"] header,
body[data-skin="yellow"] header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--cyber-line-dim), 0 4px 14px rgba(0, 0, 0, .05);
}
body[data-skin="pink"] header h1,
body[data-skin="yellow"] header h1 { text-shadow: none; }

/* 로그인 카드 제목 */
body[data-skin="pink"] .login-card h1,
body[data-skin="yellow"] .login-card h1 { text-shadow: none; }

/* 보조 버튼·이름 버튼·키패드: 흰 바탕 */
body[data-skin="pink"] .btn.secondary,
body[data-skin="yellow"] .btn.secondary,
body[data-skin="pink"] .name-btn,
body[data-skin="yellow"] .name-btn,
body[data-skin="pink"] .key,
body[data-skin="yellow"] .key { background: var(--card-bg); }

/* 구역·탭 활성 */
body[data-skin="pink"] .section-btn.active,
body[data-skin="yellow"] .section-btn.active,
body[data-skin="pink"] .tab-btn.active,
body[data-skin="yellow"] .tab-btn.active {
  background: var(--accent-dim);
  text-shadow: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* 월간 콘텐츠 캘린더 칸 */
body[data-skin="pink"] .cal-cell,
body[data-skin="yellow"] .cal-cell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* 입력 요소 */
body[data-skin="pink"] input, body[data-skin="pink"] textarea, body[data-skin="pink"] select,
body[data-skin="yellow"] input, body[data-skin="yellow"] textarea, body[data-skin="yellow"] select {
  background: var(--card-bg);
}

/* 관리자 표 */
body[data-skin="pink"] .admin-table th,
body[data-skin="yellow"] .admin-table th { background: var(--accent-dim); }
body[data-skin="pink"] .admin-table tr:hover td,
body[data-skin="yellow"] .admin-table tr:hover td { background: var(--accent-dim); }

/* 토스트 */
body[data-skin="pink"] #toast, body[data-skin="pink"] .toast,
body[data-skin="yellow"] #toast, body[data-skin="yellow"] .toast {
  background: var(--card-bg);
}

/* 로딩 바 */
body[data-skin="pink"] .loading-bar-fill,
body[data-skin="yellow"] .loading-bar-fill { background: var(--accent); box-shadow: var(--cyber-glow); }

/* features.css 가 어두운 색을 직접 쓴 곳 */
body[data-skin="pink"] .meet-body, body[data-skin="yellow"] .meet-body,
body[data-skin="pink"] .meet-comment, body[data-skin="yellow"] .meet-comment,
body[data-skin="pink"] .lottery-chip, body[data-skin="yellow"] .lottery-chip,
body[data-skin="pink"] .mf-att-chip, body[data-skin="yellow"] .mf-att-chip,
/* 흰 카드 배경에서는 직원 지정색이 밝으면(흰색 등) 그대로 묻힌다.
   테두리·숫자를 어두운 톤과 혼합해 어떤 색이든 보이게 한다. */
body[data-skin="pink"] .bday-chip, body[data-skin="yellow"] .bday-chip {
  background: var(--card-bg);
  border-color: color-mix(in srgb, var(--bc, #ff8fd0) 55%, #7a5a68 45%);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--bc, #ff8fd0) 22%, rgba(0, 0, 0, .10));
}
body[data-skin="pink"] .bday-chip b, body[data-skin="yellow"] .bday-chip b {
  color: color-mix(in srgb, var(--bc, #ff8fd0) 50%, var(--text) 50%);
}
/* 상황판 직원 색점도 같은 문제 — 흰 점이 흰 카드에 묻지 않게 얇은 윤곽 */
body[data-skin="pink"] .day-group-chip, body[data-skin="yellow"] .day-group-chip {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18);
}
body[data-skin="pink"] .meet-card:hover,
body[data-skin="yellow"] .meet-card:hover { box-shadow: var(--cyber-glow); }
body[data-skin="pink"] .lottery-chip.on, body[data-skin="yellow"] .lottery-chip.on,
body[data-skin="pink"] .mf-att-chip.on, body[data-skin="yellow"] .mf-att-chip.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--cyber-glow);
}
body[data-skin="pink"] .bday-banner,
body[data-skin="yellow"] .bday-banner { background: var(--card-bg); }
body[data-skin="pink"] .bday-banner-title,
body[data-skin="yellow"] .bday-banner-title { color: #d94f92; text-shadow: none; }

/* 노잉 캘린더 태그 — 어두운 배경용 파스텔 글자를 진한 색으로 */
body[data-skin="pink"] .noing-tag.holiday,   body[data-skin="yellow"] .noing-tag.holiday   { background: rgba(220, 60, 60, .12); color: #b03030; }
body[data-skin="pink"] .noing-tag.family,    body[data-skin="yellow"] .noing-tag.family    { background: rgba(230, 140, 40, .14); color: #a4610e; }
body[data-skin="pink"] .noing-tag.custom,    body[data-skin="yellow"] .noing-tag.custom,
body[data-skin="pink"] .noing-tag.event,     body[data-skin="yellow"] .noing-tag.event     { background: rgba(60, 110, 220, .12); color: #2f5fb8; }
body[data-skin="pink"] .noing-tag.anniversary, body[data-skin="yellow"] .noing-tag.anniversary { background: rgba(150, 80, 220, .12); color: #7a3fc0; }
body[data-skin="pink"] .noing-tag.leave,     body[data-skin="yellow"] .noing-tag.leave     { background: rgba(40, 160, 90, .14); color: #1f7a46; }
body[data-skin="pink"] .noing-tag.leave-urgent, body[data-skin="yellow"] .noing-tag.leave-urgent { background: rgba(220, 60, 60, .14); color: #b03030; }
body[data-skin="pink"] .noing-tag.birthday,  body[data-skin="yellow"] .noing-tag.birthday  { background: rgba(240, 110, 180, .14); color: #c2318f; }
body[data-skin="pink"] .noing-cell.birthday-cell .noing-day-num,
body[data-skin="yellow"] .noing-cell.birthday-cell .noing-day-num { color: #c2318f; }

/* 올해 잔여(초록 메인)는 라이트에서 발광만 줄인다 */
body[data-skin="pink"] .nl-stat.year-main .nl-stat-val,
body[data-skin="yellow"] .nl-stat.year-main .nl-stat-val { text-shadow: none; color: #1f9d62 !important; }
body[data-skin="pink"] .nl-stat.year-main .nl-stat-label,
body[data-skin="yellow"] .nl-stat.year-main .nl-stat-label { color: #1f9d62 !important; }
body[data-skin="pink"] .nl-stat.year-main,
body[data-skin="yellow"] .nl-stat.year-main {
  border-color: rgba(31, 157, 98, .5) !important;
  background: var(--good-bg) !important;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   3. 스킨별 포인트
   ------------------------------------------------------------------ */

/* ----- 핑크 ----- */
body[data-skin="pink"] {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(240, 150, 195, .28) 0%, rgba(240, 150, 195, 0) 60%) top center / 100% 100vh no-repeat,
    var(--bg);
}
body[data-skin="pink"] .btn {
  background: linear-gradient(180deg, #ef7fb4 0%, #d94f92 100%);
  border: 1px solid rgba(217, 79, 146, .55);
  color: #fff;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--cyber-glow);
}
body[data-skin="pink"] .btn:hover { box-shadow: 0 0 14px rgba(217, 79, 146, .4); }
body[data-skin="pink"] .btn.secondary { background: var(--card-bg); color: var(--accent); box-shadow: none; }
body[data-skin="pink"] header { background: linear-gradient(180deg, #ffffff 0%, #fdeaf3 100%); }

/* ----- 옐로우 (자취생으로 살아남기) ----- */
body[data-skin="yellow"] {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(245, 197, 24, .25) 0%, rgba(245, 197, 24, 0) 60%) top center / 100% 100vh no-repeat,
    var(--bg);
}
body[data-skin="yellow"] .btn {
  background: linear-gradient(180deg, #ffd23f 0%, #f0b90b 100%);
  border: 1px solid rgba(181, 133, 10, .55);
  color: #4d3a12;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--cyber-glow);
}
body[data-skin="yellow"] .btn:hover { box-shadow: 0 0 14px rgba(197, 151, 26, .45); }
body[data-skin="yellow"] .btn.secondary { background: var(--card-bg); color: var(--accent); box-shadow: none; }
body[data-skin="yellow"] header { background: linear-gradient(180deg, #ffffff 0%, #fdf4d5 100%); }

/* 위험 버튼은 어느 스킨이든 빨강 유지 */
body[data-skin="pink"] .btn.danger, body[data-skin="pink"] .btn.bad,
body[data-skin="yellow"] .btn.danger, body[data-skin="yellow"] .btn.bad {
  background: linear-gradient(180deg, #e05563 0%, #c23a48 100%);
  border-color: rgba(217, 72, 92, .55);
  color: #fff;
}

/* ------------------------------------------------------------------
   4. 계정관리의 스킨 선택 카드 (features.js 가 그린다)
   ------------------------------------------------------------------ */
.skin-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.skin-card {
  width: 96px;
  border-radius: 10px;
  border: 2px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  background: var(--card-bg);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.skin-card:hover { transform: translateY(-2px); }
.skin-card.on { border-color: var(--accent); box-shadow: var(--cyber-glow); }
.skin-swatch { height: 46px; display: block; }
.skin-swatch.cyber  { background: linear-gradient(135deg, #050e1c 0%, #0a1a30 55%, #2fd6f5 140%); }
.skin-swatch.pink   { background: linear-gradient(135deg, #fdf2f7 0%, #fbd8e8 55%, #d94f92 140%); }
.skin-swatch.yellow { background: linear-gradient(135deg, #fffbee 0%, #fdeeb0 55%, #f0b90b 140%); }
.skin-name { font-size: 12px; font-weight: 700; padding: 6px 0 7px; color: var(--text); }