/* =========================================================================
   안전캠 SafetyCam — "정제(refined)" 다크 테마 (앱 공용)
   활성: mainLayout 의 <html class="sc-refined"> (인증 화면 전체).
   로그인/랜딩(별도 레이아웃)·모바일은 클래스가 없어 무영향. 모든 규칙 .sc-refined 스코프.
   시안 colors_and_type.css + mon_refined.css 팔레트 = 평면 어두운 중성 + 단일 블루 강조.
   토큰은 이름만 같고 값을 재정의(sc-tokens / design.css 양쪽).
   ========================================================================= */

/* ---------- 1. 토큰 재정의 (sc-tokens 이름) — .sc/settings 화면 + appbar ---------- */
.sc-refined{
  --accent:#3285ff;
  --bg-app:#16191d; --bg-app-top:#16191d; --bg-app-btm:#16191d;
  --surface-header:#16191d; --surface-card:#1e2228; --surface-panel:#1e2228;
  --surface-raised:#2a2f37; --surface-sunken:#121417; --surface-row:#1e2228;
  --surface-tint:rgba(255,255,255,.025);
  --scrim:rgba(0,0,0,.55); --scrim-glass:rgba(22,25,29,.94);
  --line:rgba(255,255,255,.06); --line-strong:#2f343c; --line-input:#2a2f37; --line-btn:#3a4049;
  --gray900:rgba(0,0,0,.22);
  --brand-gradient:linear-gradient(#3285ff,#3285ff);
  --danger:#e2574f; --success:#3fae6a; --warning:#d6a23a; --orange:#d6a23a; --cyan-bright:#5aa6cf;
  --accident-01:#5b7fb0; --accident-02:#4fa1c4; --accident-03:#e2574f; --accident-04:#5aa97f; --accident-05:#c178a0; --accident-06:#d6a23a;
  --shadow-header:0 1px 0 rgba(0,0,0,.45); --shadow-card:none; --shadow-glow:none; --shadow-pop:0 18px 44px rgba(0,0,0,.5); --shadow-focus:0 0 0 3px rgba(50,133,255,.22);
  --section-bar:#1e2228; --header-border:#2f343c;
  --radius-sm:4px; --radius-md:6px;

  /* ---------- design.css 자체 토큰 (구 화면: 감지이력/리포트/일부 설정) ---------- */
  --red:#e2574f; --orange:#d6a23a; --green:#3fae6a;
  --gray100:rgba(255,255,255,.06);
  --accidentColor01:#5b7fb0; --accidentColor02:#4fa1c4; --accidentColor03:#e2574f;
  --accidentColor04:#5aa97f; --accidentColor05:#c178a0; --accidentColor06:#d6a23a; --accidentColor07:#a98ad6;
}

/* ---------- 2. 본문 배경 (design.css 하드코딩 그라데이션 → 평면) ---------- */
.sc-refined body, body.sc-refined{background:#16191d}

/* ---------- 3. 공통 장식 제거 + 상단바 평탄화 ---------- */
.sc-refined .accent-dot{display:none!important}
.sc-refined .panel{box-shadow:none}
.sc-refined .appbar{background:var(--surface-header);border:0;border-bottom:1px solid var(--line-strong);box-shadow:var(--shadow-header)}
.sc-refined .panel-hd h3,.sc-refined .cs-hd h3,.sc-refined .noti-hd h3{font-weight:600}
.sc-refined .panel-hd .hd-meta .count strong,.sc-refined .mon-viewbar .vb-meta strong,.sc-refined .stat-simple .ss-total strong{color:var(--fg-strong)}
/* 중성 호버 */
.sc-refined .btn:hover,.sc-refined .mon-tool:hover,.sc-refined .cs-nav:hover,.sc-refined .cs-toggle:hover,
.sc-refined .ptz-controls .ptz-act button:not(:disabled):hover{background:#343a43}
.sc-refined .ptz-controls .ptz-pad button:not(:disabled):hover{background:rgba(255,255,255,.06)}
.sc-refined .pm-x:hover{background:#343a43;color:#fff}

/* ---------- 4. 모니터링 화면 정제 디테일 ---------- */
.sc-refined .mon-tab,.sc-refined .mon-tab.on{font-weight:600}
.sc-refined .mcell .m-hd .nm,.sc-refined .cs-meta .nm,.sc-refined .evt .ty{font-weight:600}
.sc-refined .tree .leaf.live .st{background:var(--success)}
.sc-refined .tree .leaf.alert .st{box-shadow:0 0 0 3px rgba(226,87,79,.22)}
.sc-refined .mcell .m-ft .live{color:#6cc28d}
.sc-refined .mcell .m-ft .live i,.sc-refined .cs-live i,.sc-refined .pm-live i{background:var(--success)}
.sc-refined .pm-live{color:#6cc28d}
.sc-refined .map-area .map-legend{background:var(--scrim-glass);backdrop-filter:none}
.sc-refined .map-area .map-legend .d.live{background:var(--success)}
.sc-refined .map-area .map-legend .d.alert{box-shadow:0 0 0 3px rgba(226,87,79,.22)}

/* ---------- 5. 구 design.css 화면(.sub-layout/.sub-contents: 감지이력·리포트·일부 설정) 서피스 리맵 ---------- */
.sc-refined .sub-left{background:#1e2228;box-shadow:none;border-right:1px solid #2f343c}
.sc-refined .sub-contents-header{border-bottom:2px solid #2f343c}
.sc-refined .sub-left .player-list ul .player-area{border-color:#2a2f37}
.sc-refined .sub-left .player-list:not(:first-of-type){border-top-color:#2f343c}

/* 버튼 (.ibtn) */
.sc-refined .ibtn{background-color:#2a2f37;border-color:rgba(0,0,0,.22)}
.sc-refined .ibtn:hover{background-color:#343a43}
.sc-refined .ibtn.primary{background-color:var(--blue)}
.sc-refined .ibtn.primary:hover{background-color:#4ea1ff}

/* 입력/셀렉트 */
.sc-refined input:not([type=checkbox],[type=radio],[type=submit]):focus,
.sc-refined textarea:focus{background-color:#121417;border-color:var(--blue)}
.sc-refined select option{background:#1e2228}

/* 데이터 테이블 (.table-h01 / .table-v01 / .table-scroll) */
.sc-refined thead th,
.sc-refined .table-h01 th,.sc-refined .table-h01 thead th,
.sc-refined .table-v01 th{background-color:#1e2228}
.sc-refined .table-h01 th,.sc-refined .table-h01 td,
.sc-refined .table-v01 th,.sc-refined .table-v01 td,
.sc-refined .table-scroll th,.sc-refined .table-scroll td{border-color:#2f343c}
.sc-refined tbody tr:not(.active):hover td{background-color:rgba(255,255,255,.03)}
.sc-refined tbody tr.active td{background-color:var(--blueD,#2158a8);border-top-color:#5aa6cf!important;border-bottom-color:#5aa6cf!important}
.sc-refined tbody tr.active td:first-child{border-left-color:#5aa6cf}
.sc-refined tbody tr.active td:last-child{border-right-color:#5aa6cf}