/* ============================================================
   Milestone X 스타일 스킨 — 다크 네이비 + 보라 액센트
   ------------------------------------------------------------
   style.css 뒤에 로드되어 디자인 토큰과 핵심 컴포넌트만 재정의한다.
   기본 테마는 다크(formula-theme.js), 설정에서 라이트 전환 가능.
   되돌리기: index.html 에서 이 파일 <link> 한 줄만 제거.
   기준 화면: Milestone X 계약서 도구 (짙은 남색 배경, 보라 포인트,
             1px 보더 다크 카드, rounded-xl 입력, 흰색 보조 CTA)
   ============================================================ */

/* ── 공통(라이트 포함): 액센트를 보라로 통일 ── */
:root {
  --primary: #7c3aed;        /* violet-600 */
  --primary-dark: #6d28d9;   /* violet-700 */
  --primary-light: #a78bfa;  /* violet-400 */
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  /* 라이트 모드용 중립 팔레트 */
  --bg: #f9fafb;
  --text: #111827;
  --text-sub: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e7eb;
}

/* ── 다크(기본): 짙은 남색 + 보라 ── */
:root[data-formula-theme="dark"] {
  --primary: #8b5cf6;        /* violet-500 — 다크 위에서 선명하게 */
  --primary-dark: #a78bfa;
  --primary-light: #c4b5fd;
  --bg: #0a0e17;             /* 화면 배경: 거의 검은 남색 */
  --bg-sub: #0f1524;
  --card: #0f1524;           /* 카드: 배경보다 반 톤 밝은 남색 */
  --text: #f3f4f6;
  --text-sub: #9aa4b2;
  --text-muted: #667085;
  --border: #232b3d;         /* 은은한 남색 보더 */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 카드: 1px 보더 + 얕은 그림자, 크게 둥근 모서리 */
.card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* 버튼: rounded-xl + 볼드. primary 는 보라 + 부드러운 그림자 */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.35); }
:root[data-formula-theme="dark"] .btn-primary {
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 8px 20px -8px rgba(139, 92, 246, 0.45);
}

/* 입력 요소: 라운드 8px 로 통일 — 모듈별 완전 라운드(알약) 입력도 함께 정리.
   낮은 높이 필드에서 큰 라운드가 () 모양으로 보여 어지러운 문제 방지. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  border-radius: 8px !important;
}
:root[data-formula-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-formula-theme="dark"] select,
:root[data-formula-theme="dark"] textarea {
  background: #0b101d;
  border-color: #232b3d;
  color: var(--text);
}
:root[data-formula-theme="dark"] input:focus,
:root[data-formula-theme="dark"] select:focus,
:root[data-formula-theme="dark"] textarea:focus {
  border-color: var(--primary);
}

/* 내비: 플랫 — 그림자 없이 하단 보더만 */
.main-nav { box-shadow: none; }

/* ── 그리드 입력(활동 실적·수익률 등 표 안 셀): 엑셀처럼 각지고 평평하게 ──
   전역 라운드(12px)가 셀 높이에서 알약처럼 보여 어지러운 문제.
   평소엔 보더 없이 셀에 녹아 있다가, 호버에 옅은 보더 · 포커스에 보라 보더. */
input.profit-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
input.activity-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.profit-table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.profit-table select {
  border-radius: 2px !important;
}
.profit-input, .activity-input {
  border-color: transparent !important;
  background: transparent !important;
}
.profit-input:hover, .activity-input:hover {
  border-color: var(--border) !important;
}
.profit-input:focus, .activity-input:focus {
  border-color: var(--primary) !important;
  background: var(--card) !important;
  outline: none;
}

/* 선택/활성 요소: 보라 보더 + 보라 틴트 (Milestone 선택 카드 느낌) */
:root[data-formula-theme="dark"] .tab.active,
:root[data-formula-theme="dark"] .nav-tab.active {
  background: var(--primary);
  color: #fff;
}
:root[data-formula-theme="dark"] .stat.alert { background: rgba(239, 68, 68, 0.12); }
:root[data-formula-theme="dark"] .stat.ok { background: rgba(34, 197, 94, 0.1); }

/* 모서리 통일 */
.stat, .guide-box { border-radius: 16px; }

/* ── 채용 탭(fxr-*) 다크 보정 — 어드민 스킨을 다크 팔레트로 재매핑 ── */
:root[data-formula-theme="dark"] .fxr-panel {
  background: #0f1524;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid #232b3d;
}
:root[data-formula-theme="dark"] .fxr-panel h3 { color: #f3f4f6; }
:root[data-formula-theme="dark"] .fxr-label { color: #cbd2dc; }
:root[data-formula-theme="dark"] .fx-recruit input:not([type=checkbox]),
:root[data-formula-theme="dark"] .fx-recruit select,
:root[data-formula-theme="dark"] .fx-recruit textarea,
:root[data-formula-theme="dark"] .fxr-panel input:not([type=checkbox]),
:root[data-formula-theme="dark"] .fxr-panel select,
:root[data-formula-theme="dark"] .fxr-panel textarea {
  background: #0b101d;
  border-color: #232b3d;
  color: #f3f4f6;
}
:root[data-formula-theme="dark"] .fx-recruit textarea[readonly],
:root[data-formula-theme="dark"] .fxr-panel textarea[readonly] { background: #0d1220; }
:root[data-formula-theme="dark"] .fxr-btn { background: #1b2333; color: #d1d5db; }
:root[data-formula-theme="dark"] .fxr-btn-primary { background: #8b5cf6; color: #fff; }
:root[data-formula-theme="dark"] .fxr-btn-primary:hover { background: #7c3aed; }
:root[data-formula-theme="dark"] .fxr-btn-dark { background: #313c52; color: #fff; }
:root[data-formula-theme="dark"] .fxr-btn-ghost { background: transparent; border-color: #3a445a; color: #9aa4b2; }

/* ── 수익률 표 막대 셀: 다크에서 글자 대비 확보 ──
   막대 색이 라이트용 파스텔이라 다크에선 막대를 반투명으로 낮추고,
   글자를 밝게 + 옅은 그림자로 막대 위/밖 어디서든 읽히게 한다. */
:root[data-formula-theme="dark"] .profit-table .profit-td-bar .profit-bar-bg {
  opacity: 0.34;
}
:root[data-formula-theme="dark"] .profit-table .profit-td-bar .profit-bar-txt {
  color: #e7ecf3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
:root[data-formula-theme="dark"] .profit-table .profit-td-bar.profit-cell-positive .profit-bar-txt {
  color: #4ade80;
}
:root[data-formula-theme="dark"] .profit-table .profit-td-bar.profit-cell-negative .profit-bar-txt {
  color: #f87171;
}