/* 모두의 CCTV 공통 색상 변수(라이트/다크) + 뷰어 공용 스타일 — 원래 _shared.php cctv_theme_css()
 * 다크 적용 조건 2가지 (같은 색상 세트 — 한쪽만 고치지 말 것)
 *   1) 기기 다크: @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
 *   2) 다크모드 스위치 강제: :root[data-theme="dark"] (쿠키 cctv_dark=1, 서버가 <html>에 찍음)
 * '라이트 고정'(쿠키 cctv_dark=0)은 cctv_light_lock_script()가 <html data-theme="light">를 붙여서 1)을 끔
 * 고친 뒤 이 파일만 올리면 됨 (주소 ?v= 해시가 바뀌어 브라우저가 새로 받음)
 */
:root {
    color-scheme: light;
    --cctv-bg: #f7f8fa;
    --cctv-surface: #fff;
    --cctv-surface-0: rgba(255,255,255,0);
    --cctv-glass: rgba(255,255,255,.96);
    --cctv-text: #212529;
    --cctv-text-sub: #495057;
    --cctv-text-body: #333;
    --cctv-muted: #868e96;
    --cctv-faint: #adb5bd;
    --cctv-border: #e5e7eb;
    --cctv-line: #f1f3f5;
    --cctv-hover: #f5f6f8;
    --cctv-chip: #eef0f2;
    --cctv-chip-hover: #e5e7ea;
    --cctv-accent: #2c6ed5;
    --cctv-accent-hover: #255bb3;
    --cctv-accent-soft: #eaf1ff;
    --cctv-marker: #2c6ed5;
    --cctv-strong-bg: #212529;
    --cctv-strong-hover: #000;
    --cctv-btn-dark: #111;
    --cctv-btn-dark-hover: #2b2b2b;
    --cctv-danger: #c92a2a;
    --cctv-danger-bg: #fff5f5;
    --cctv-danger-border: #ffc9c9;
}
/* 댓글/게시글 작성자 아바타 (프로필 사진 없음·로딩 실패 시 기본 아이콘) */
.cctv-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
               overflow: hidden; border-radius: 50%; background: var(--cctv-chip); color: var(--cctv-muted); }
.cctv-avatar svg { width: 62%; height: 62%; }
.cctv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 관리자 전용 '수정' 버튼 — 뷰어 제목줄(공유 버튼 오른쪽). 공유 알약과 같은 모양, 강조색 테두리로 관리자 기능임을 구분 */
.btn-admin-edit-pill { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; border-radius: 999px;
                       padding: .25rem .7rem; font-size: 11px; font-weight: 600; line-height: 1.4; text-decoration: none;
                       background: var(--cctv-surface); border: 1px solid var(--cctv-accent); color: var(--cctv-accent); }
.btn-admin-edit-pill:hover { background: var(--cctv-accent-soft); color: var(--cctv-accent); }
.btn-admin-edit-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
button.btn-admin-edit-pill { cursor: pointer; font-family: inherit; } /* '복사'는 <button>이라 기본 버튼 글꼴·커서 보정 */
/* '복사' 버튼 — 뷰어 제목줄(공유 오른쪽), 모든 방문자에게 노출. URL·이름·주소·출처 텍스트를 클립보드로. 공유 알약과 같은 모양 */
.btn-copy-pill { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; border-radius: 999px; padding: .25rem .7rem;
                 font-size: 11px; font-weight: 600; line-height: 1.4; cursor: pointer; font-family: inherit;
                 background: var(--cctv-surface); border: 1px solid var(--cctv-border); color: var(--cctv-text-sub); transition: background .15s; }
.btn-copy-pill:hover { background: var(--cctv-hover); border-color: var(--cctv-accent); color: var(--cctv-accent); }
.btn-copy-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.btn-copy-pill.is-icon { padding: .3rem; }                                   /* 뷰어 이름 옆: 아이콘만 */
.btn-copy-pill.is-copied { border-color: var(--cctv-accent); color: var(--cctv-accent); background: var(--cctv-accent-soft); }
/* 뷰어 제목 아래 정보줄 — 왼쪽: 주소 / 일출·일몰·현재시각, 오른쪽(모바일은 아래 줄): 날씨칩 */
.cctv-meta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem .8rem; margin: -.25rem 0 .5rem; }
.cctv-meta-text { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--cctv-muted); }
.cctv-meta-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cctv-meta-sep { margin: 0 .35rem; color: var(--cctv-faint); }
.cctv-wx { display: flex; gap: .3rem; flex-shrink: 0; }
.wx-chip { display: inline-flex; align-items: center; gap: .25rem; height: 28px; padding: 0 .5rem; border: 1px solid var(--cctv-text);
           border-radius: 6px; background: var(--cctv-surface); color: var(--cctv-text-sub); font-size: 12px; white-space: nowrap; }
.wx-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.wx-chip b { font-weight: 600; color: var(--cctv-text); }
.wx-chip-icon { padding: 0 .4rem; }
.wx-chip-icon svg { width: 18px; height: 18px; }
.wx-chip-temp b { font-size: 15px; font-weight: 700; }
.wx-chip-temp small { font-size: 11px; align-self: flex-start; margin: 4px 0 0 -1px; }
@media (max-width: 768px) {
    .cctv-meta-row { display: block; }
    .cctv-wx { margin-top: .4rem; }
    .cctv-wx .wx-chip { flex: 1 1 auto; justify-content: center; padding: 0 .3rem; font-size: 11.5px; }
    .cctv-wx .wx-chip-icon, .cctv-wx .wx-chip-temp { flex: 0 0 auto; }
}
@media (max-width: 380px) { .wx-label { display: none; } } /* 아주 좁은 화면은 '강수량/습도/풍' 글자 빼고 아이콘+수치만 */

/* 영상 우상단 LIVE 표시 (모두의 CCTV 로고 + LIVE) — 누르면 사라짐 */
.cctv-live-badge { position: absolute; top: 10px; right: 10px; z-index: 4; display: inline-flex; align-items: center; gap: .45em;
                   padding: 1px 8px; border: 0; border-radius: 4px;
                   background: rgba(0,0,0,.9); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.6;
                   cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.cctv-live-badge .cctv-live-logo { display: block; height: 1.1em; width: auto; }
/* LIVE 뱃지 맨 앞 깜빡이는 빨간 점 (시청 중 표시) — 글자 크기에 비례해 전체화면에서도 같이 커짐 */
.cctv-live-badge .cctv-live-dot { width: .6em; height: .6em; border-radius: 50%; background: #ff2b2b; flex-shrink: 0;
                                  animation: cctv-watch-blink 1.2s ease-in-out infinite; }
.cctv-live-badge { font-family: inherit; font-weight: 900; -webkit-text-stroke: .35px #fff; }
.cctv-live-badge.is-pending { display: none; }   /* 영상 재생이 시작되면 스크립트가 is-pending을 빼서 표시 */
.cctv-live-badge { animation: cctv-live-in .25s ease-out; }
@keyframes cctv-live-in { from { opacity: 0; } to { opacity: 1; } }
/* 뷰어 좋아요 수·즐겨찾기 상태 (index.php 팝업 / view.php 공용 — 페이지별 CSS보다 우선하도록 .cctv-popup을 붙임) */
/* 좋아요 수: '♥ 좋아요 - 7' — 구분자 '+'는 CSS로 붙여서 숫자 span만 넣으면 됨 (0건이면 span 자체가 없음) */
.cctv-popup .btn-like .like-count { font-variant-numeric: tabular-nums; opacity: .75; }
.cctv-popup .btn-like .like-count::before { content: '+'; margin: 0 .3em 0 .1em; }
.cctv-popup .icon-star { display: inline-flex; width: 14px; height: 14px; }
.cctv-popup .icon-star svg { width: 100%; height: 100%; display: block; }
.cctv-popup .icon-star .star-on, .cctv-popup .btn-favorite.active .icon-star .star-off { display: none; }
.cctv-popup .btn-favorite.active .icon-star .star-on { display: block; }
.cctv-popup .btn-favorite.active { background: #2a2108; border-color: #fab005; color: #ffd43b; }
.cctv-popup .btn-favorite.active:hover { background: #3a2e0c; }
.cctv-popup .btn-favorite.active .icon-star { color: #fab005; }
@media (max-width: 768px) { .cctv-live-badge { top: 8px; right: 8px; font-size: 11px; padding: 0 6px; } }
/* 전체화면 버튼 — 기본 전체화면 대신 플레이어 박스째로 띄움 (안드로이드·PC 크롬 계열. 아이폰은 기본 전체화면 그대로) */
.cctv-fs-btn { position: absolute; top: 36px; right: 10px; z-index: 4; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px;
               display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.cctv-fs-btn svg { width: 16px; height: 16px; }
@media (max-width: 768px) { .cctv-fs-btn { top: 32px; right: 8px; } }
/* 전체화면 중: 박스를 화면에 꽉 채우고, 뱃지·버튼은 검은 여백이 아닌 '실제 영상' 모서리에 붙임
   (--fs-x / --fs-y = 좌우·위아래 검은 여백 크기, 전체화면 스크립트가 계산해서 넣음) */
.cctv-popup-player.is-fs { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
                           aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; background: #000 !important; }
.cctv-popup-player.is-fs > video.cctv-video { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; }
.cctv-popup-player.is-fs .cctv-live-badge { top: calc(var(--fs-y, 0px) + 16px); right: calc(var(--fs-x, 0px) + 16px); font-size: 15px; padding: 2px 10px; }
.cctv-popup-player.is-fs .cctv-watch-slot.is-onvideo { top: calc(var(--fs-y, 0px) + 16px); left: calc(var(--fs-x, 0px) + 16px); }
.cctv-popup-player.is-fs .cctv-watch-slot.is-onvideo .cctv-watch { font-size: 15px; padding: 2px 10px; }
.cctv-popup-player.is-fs .cctv-fs-btn { top: calc(var(--fs-y, 0px) + 56px); right: calc(var(--fs-x, 0px) + 16px); width: 36px; height: 36px; }
.cctv-popup-player.is-fs .cctv-fs-btn svg { width: 20px; height: 20px; }
/* 전체화면 2초 뒤 해제 버튼 숨김, 화면을 터치(또는 마우스 이동)하면 다시 표시 */
.cctv-popup-player.is-fs .cctv-fs-btn { transition: opacity .25s; }
.cctv-popup-player.is-fs.fs-idle .cctv-fs-btn { opacity: 0; pointer-events: none; }
.cctv-popup-player.is-fs .cctv-hls-msg { left: calc(var(--fs-x, 0px) + 8px); right: calc(var(--fs-x, 0px) + 8px); }
/* 소스 유형 공지 오버레이 — 플레이어 위 다른 안내(.cctv-popup-notice·.cctv-hls-msg)와 같은 검은 반투명 + 흰 글씨 + 흰 테두리 버튼.
   플레이어는 테마와 무관하게 항상 검은 바탕이라 색은 고정 (다크모드 분기 불필요) */
.cctv-src-notice { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
                   gap: .55rem; padding: 0 1.3rem; background: rgba(0, 0, 0, .72); color: #fff; text-align: center;
                   animation: cctv-src-notice-in .2s ease-out; }
.cctv-src-notice-card { display: contents; }
.cctv-src-notice-label { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 600;
                         color: rgba(255, 255, 255, .75); letter-spacing: .02em; }
.cctv-src-notice-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; flex-shrink: 0; }
.cctv-src-notice-title { max-width: 420px; font-size: 14px; font-weight: 600; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere;
                         display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cctv-src-notice-btns { display: flex; gap: .4rem; margin-top: .15rem; }
.cctv-src-notice-btns > a, .cctv-src-notice-btns > button { display: inline-flex; align-items: center; justify-content: center; padding: .45rem 1rem;
                         border: 1px solid #fff; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.2;
                         text-decoration: none; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.cctv-src-notice-more { background: #fff; color: #1a1a1a !important; }
.cctv-src-notice-more:hover { background: rgba(255, 255, 255, .85); }
.cctv-src-notice-close { background: transparent; color: #fff; }
.cctv-src-notice-close:hover { background: rgba(255, 255, 255, .15); }
@keyframes cctv-src-notice-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 769px) {
    .cctv-src-notice-title { font-size: 16px; }
    .cctv-src-notice-btns > a, .cctv-src-notice-btns > button { font-size: 13px; padding: .55rem 1.2rem; }
}
@media (max-width: 480px) {
    .cctv-src-notice { gap: .4rem; padding: 0 1rem; }
    .cctv-src-notice-title { font-size: 13px; -webkit-line-clamp: 2; }
}
/* 관리자 전용 전체화면 핀치 줌 — 영상만 확대(뱃지·버튼은 형제 요소라 그대로). 브라우저 기본 확대·스크롤은 막음 */
.cctv-popup-player.is-fs[data-zoom="1"] { overflow: hidden !important; touch-action: none; }
.cctv-popup-player[data-zoom="1"] > video.cctv-video { transform-origin: 0 0; }
/* 'N명 시청 중' — 행사 '진행 중' 배지와 같은 빨강 + 흰 점 깜빡임 */
.cctv-watch { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; vertical-align: middle; margin-left: .35rem;
              padding: .2rem .45rem; border-radius: 4px; background: #e03131; color: #fff;
              font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cctv-watch-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: cctv-watch-blink 1.2s ease-in-out infinite; }
@keyframes cctv-watch-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.cctv-watch-slot { display: inline-flex; flex-shrink: 0; }
.cctv-watch-slot:empty { display: none; }   /* 비어 있을 땐 제목줄 간격도 차지하지 않게 */
.cctv-watch-slot .cctv-watch { margin-left: 0; }
.marker-label .cctv-watch { margin: 0 4px 0 0; padding: 2px 5px; font-size: 10px; }
/* 뷰어: 영상 왼쪽 위 — LIVE 뱃지(오른쪽 위)와 같은 높이·크기 */
.cctv-watch-slot.is-onvideo { position: absolute; top: 10px; left: 10px; z-index: 4; pointer-events: none; }
.cctv-watch-slot.is-onvideo .cctv-watch { padding: 1px 8px; font-size: 11px; font-weight: 800; line-height: 1.6;
                                          box-shadow: 0 1px 3px rgba(0,0,0,.35); }
@media (max-width: 768px) {
    .cctv-watch-slot.is-onvideo { top: 8px; left: 8px; }
    .cctv-watch-slot.is-onvideo .cctv-watch { padding: 0 6px; font-size: 10px; }
}
/* 영상 재생 안내(HLS·경기도) — 컨트롤바(하단)를 가리지 않게 살짝 위.
   클릭은 통과시킴: 인앱 브라우저처럼 자동재생이 막혀 ▶를 직접 눌러야 할 때 안내가 버튼을 막지 않게 */
.cctv-hls-msg { position: absolute; left: 8px; right: 8px; bottom: 48px; z-index: 3; padding: 6px 10px; border-radius: 6px;
                background: rgba(0,0,0,.68); color: #e9ecef; font-size: 12px; line-height: 1.55; text-align: center;
                white-space: pre-line; word-break: keep-all; pointer-events: none; }
@media (max-width: 768px) { .cctv-hls-msg { font-size: 11px; padding: 5px 8px; } }
/* 슬림창·새창 안내 아래 재생 안내 */
.cctv-popup-notice .cctv-play-guide { margin: .2rem 0 0; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.7); word-break: keep-all; }
.cctv-hls-msg[hidden] { display: none; }
/* 영상 준비 중 로딩 표시 (제주처럼 재생 전에 영상 주소를 먼저 받아야 하는 소스) — 첫 화면이 나오거나 하단 안내가 뜨면 사라짐 */
.cctv-load-spin { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
                  gap: .7rem; padding: 0 1rem; color: #e9ecef; font-size: 12.5px; line-height: 1.5; text-align: center; pointer-events: none; }
.cctv-load-spin[hidden] { display: none; }
.cctv-load-spin-ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
                       animation: cctv-load-spin .9s linear infinite; }
@keyframes cctv-load-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) { .cctv-load-spin { font-size: 11.5px; } .cctv-load-spin-ring { width: 28px; height: 28px; } }
/* 최종 실패 시 안내 박스 안 [새로고침] 버튼 — 박스는 클릭 통과(pointer-events:none)라 버튼만 다시 켬 */
.cctv-hls-msg .cctv-hls-reload { pointer-events: auto; display: block; margin: .45rem auto 0; padding: .35rem 1.1rem;
                                 border: 1px solid #fff; border-radius: 6px; background: transparent; color: #fff;
                                 font-size: 12px; font-weight: 600; cursor: pointer; }
.cctv-hls-msg .cctv-hls-reload:hover { background: rgba(255,255,255,.15); }

/* 영상 아래 테마 칩 줄 */
.cctv-theme-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-bottom: .5rem; }
/* 뷰어 머리줄 — 20% 이전 CCTV | 60% 현재 CCTV 이름 + 복사 | 20% 다음 CCTV (같은 도로 위 인접 CCTV, _road.php cctv_road_neighbors) */
.cctv-nav-bar { display: grid; grid-template-columns: 20% 60% 20%; grid-template-areas: "prev mid next";
                align-items: center; min-height: 34px; margin: 0 0 .5rem; }
.cctv-nav-side.is-prev { grid-area: prev; }
.cctv-nav-side.is-next { grid-area: next; }
.cctv-nav-mid { grid-area: mid; }
#popup-content .cctv-viewer-head { padding-right: 1.6rem; }   /* 레이어 팝업 오른쪽 위 ✕ 버튼 자리 */
/* 모바일: 1행 = 제목(전체 폭) / 2행 = ‹ 이전 50% · 다음 › 50%. 두 행 사이 간격 없이 붙임 */
@media (max-width: 768px) {
    .cctv-nav-bar { grid-template-columns: 50% 50%; grid-template-areas: "mid mid" "prev next"; row-gap: 0; min-height: 0; margin-bottom: .3rem; }
    #popup-content .cctv-viewer-head { padding-right: 0; }
    #popup-content .cctv-viewer-head .cctv-nav-mid { padding-right: 1.6rem; }   /* ✕ 자리는 제목 행에만 */
    .cctv-nav-mid .cctv-popup-title { justify-content: flex-start; }
    .cctv-nav-btn { height: 24px; padding: 0; }
}
.cctv-nav-mid { min-width: 0; }
.cctv-nav-mid .cctv-popup-title { justify-content: center; min-width: 0; margin: 0; }
.cctv-nav-side { display: flex; min-width: 0; }
.cctv-nav-side.is-next { justify-content: flex-end; }
.cctv-nav-btn { display: inline-flex; align-items: center; gap: .1rem; max-width: 100%; min-width: 0; height: 32px; padding: 0 .2rem;
                border-radius: 6px; color: var(--cctv-text-sub); font-size: 11px; font-weight: 600; line-height: 1; text-decoration: none; }
a.cctv-nav-btn:hover { background: var(--cctv-hover); color: var(--cctv-accent); }
.cctv-nav-btn.is-disabled { color: var(--cctv-faint); opacity: .45; cursor: default; }
.cctv-nav-arrow { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; }
.cctv-nav-arrow svg { width: 100%; height: 100%; }
.cctv-nav-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 길면 … (줄바꿈 없음) */
.cctv-nav-dir { flex-shrink: 0; font-weight: 500; color: var(--cctv-muted); }   /* ‹ 이름(서) · (동)이름 › — 이름이 잘려도 방향은 유지 */
@media (min-width: 769px) {
    .cctv-nav-btn { gap: .15rem; padding: 0 .3rem; font-size: 12.5px; }
    .cctv-nav-arrow { width: 22px; height: 22px; }
}
/* 플레이어 바로 아래 — 왼쪽: 출처 / 오른쪽: 테마 */
.cctv-src-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 24px; margin: -.2rem 0 .5rem; }
.cctv-src-credit { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; font-size: 12px; color: var(--cctv-muted); white-space: nowrap; }
.cctv-src-credit-icon { height: 14px; width: auto; flex-shrink: 0; }
.cctv-src-credit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--cctv-text-sub); font-weight: 500; }
.cctv-src-row .cctv-theme-row { margin: 0; justify-content: flex-end; flex: 0 1 auto; }

/* CCTV 게시물 본문(저작툴 HTML) — 줄바꿈은 <br>로 처리하므로 pre-line 해제, 불릿 목록 여백 */
.cctv-popup .cctv-popup-content { white-space: normal; }
.cctv-popup .cctv-popup-content ul, .cctv-popup .cctv-popup-content ol { margin: .3rem 0; padding-left: 1.4rem; }

/* 1) 기기 설정이 다크 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --cctv-bg: #101317;
        --cctv-surface: #1a1e23;
        --cctv-surface-0: rgba(26,30,35,0);
        --cctv-glass: rgba(26,30,35,.94);
        --cctv-text: #e7eaee;
        --cctv-text-sub: #b4bbc3;
        --cctv-text-body: #d5dade;
        --cctv-muted: #8d959e;
        --cctv-faint: #68717a;
        --cctv-border: #2c323a;
        --cctv-line: #242a31;
        --cctv-hover: #222830;
        --cctv-chip: #262c34;
        --cctv-chip-hover: #303741;
        --cctv-accent: #4a86e6;
        --cctv-accent-hover: #3a76d6;
        --cctv-accent-soft: #1d2a44;
        --cctv-strong-bg: #343a42;
        --cctv-strong-hover: #454c55;
        --cctv-btn-dark: #343a42;
        --cctv-btn-dark-hover: #454c55;
        --cctv-danger: #ff8b8b;
        --cctv-danger-bg: #3a1f22;
        --cctv-danger-border: #6b2b31;
    }
    /* 댓글/게시글 본문은 다크모드에서 글자색을 단일 색상으로 통일 (저장된 색상 서식 무시) */
    :root:not([data-theme="light"]) .cctv-comment-content, :root:not([data-theme="light"]) .cctv-comment-content *,
    :root:not([data-theme="light"]) .board-post-content, :root:not([data-theme="light"]) .board-post-content *,
    :root:not([data-theme="light"]) .cctv-popup-content, :root:not([data-theme="light"]) .cctv-popup-content *,
    :root:not([data-theme="light"]) .cctv-editor-area, :root:not([data-theme="light"]) .cctv-editor-area * { color: var(--cctv-text-body) !important; }
    /* 색상 버튼은 다크모드에서 숨김 (색상이 표시되지 않으므로) */
    :root:not([data-theme="light"]) .cctv-editor-toolbar [data-cmd="forecolor"] { display: none; }
    :root:not([data-theme="light"]) .nav-btn:not(.active) { box-shadow: none; }
}

/* 2) PC 다크모드 스위치로 강제 다크 (OS가 라이트여도 적용) */
:root[data-theme="dark"] {
        color-scheme: dark;
        --cctv-bg: #101317;
        --cctv-surface: #1a1e23;
        --cctv-surface-0: rgba(26,30,35,0);
        --cctv-glass: rgba(26,30,35,.94);
        --cctv-text: #e7eaee;
        --cctv-text-sub: #b4bbc3;
        --cctv-text-body: #d5dade;
        --cctv-muted: #8d959e;
        --cctv-faint: #68717a;
        --cctv-border: #2c323a;
        --cctv-line: #242a31;
        --cctv-hover: #222830;
        --cctv-chip: #262c34;
        --cctv-chip-hover: #303741;
        --cctv-accent: #4a86e6;
        --cctv-accent-hover: #3a76d6;
        --cctv-accent-soft: #1d2a44;
        --cctv-strong-bg: #343a42;
        --cctv-strong-hover: #454c55;
        --cctv-btn-dark: #343a42;
        --cctv-btn-dark-hover: #454c55;
        --cctv-danger: #ff8b8b;
        --cctv-danger-bg: #3a1f22;
        --cctv-danger-border: #6b2b31;
}
    /* 댓글/게시글 본문은 다크모드에서 글자색을 단일 색상으로 통일 (저장된 색상 서식 무시) */
    :root[data-theme="dark"] .cctv-comment-content, :root[data-theme="dark"] .cctv-comment-content *,
    :root[data-theme="dark"] .board-post-content, :root[data-theme="dark"] .board-post-content *,
    :root[data-theme="dark"] .cctv-popup-content, :root[data-theme="dark"] .cctv-popup-content *,
    :root[data-theme="dark"] .cctv-editor-area, :root[data-theme="dark"] .cctv-editor-area * { color: var(--cctv-text-body) !important; }
    /* 색상 버튼은 다크모드에서 숨김 (색상이 표시되지 않으므로) */
    :root[data-theme="dark"] .cctv-editor-toolbar [data-cmd="forecolor"] { display: none; }
    :root[data-theme="dark"] .nav-btn:not(.active) { box-shadow: none; }

/* 장애 아이콘 — 지도 장애 핀의 배지와 같은 SVG(빨강 #e03131 + 흰 테두리), 색은 SVG에 고정 */
.cctv-fault-badge { display: inline-flex; flex-shrink: 0; width: 15px; height: 15px; margin-left: 4px; vertical-align: -3px; }
.cctv-fault-badge svg { width: 100%; height: 100%; display: block; }
.marker-label .cctv-fault-badge { width: 12px; height: 12px; margin-left: 3px; }
.cctv-popup-title .cctv-fault-badge { width: 17px; height: 17px; margin-left: 2px; vertical-align: -3px; }
.cctv-fault-box { margin: .6rem 0 0; padding: .7rem .85rem; border-radius: 8px; font-size: 13.5px; line-height: 1.6;
    background: var(--cctv-danger-bg); border: 1px solid var(--cctv-danger-border); color: var(--cctv-text); word-break: break-word; }
.cctv-fault-box-head { font-weight: 700; color: var(--cctv-danger); margin-bottom: .2rem; }

/* 같은 교차로 방향 탭 (render_cctv_viewer — cctv_group_siblings) */
.cctv-dir-tabs { display:flex; gap:6px; overflow-x:auto; margin:.4rem 0 .5rem; padding-bottom:2px; scrollbar-width:none; }
.cctv-dir-tabs::-webkit-scrollbar { display:none; }
.cctv-dir-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1px solid var(--cctv-border); border-radius:999px; background:var(--cctv-surface); color:var(--cctv-text); font-size:12.5px; line-height:1.3; text-decoration:none; white-space:nowrap; }
.cctv-dir-tab:hover { border-color:#7c3aed; color:var(--cctv-text); }
.cctv-dir-tab.is-current { background:#7c3aed; border-color:#7c3aed; color:#fff; font-weight:600; cursor:default; }
.cctv-dir-arrow { width:14px; height:14px; flex:none; color:#7c3aed; }
.cctv-dir-tab.is-current .cctv-dir-arrow { color:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cctv-dir-arrow { color:#a78bfa; } }
:root[data-theme="dark"] .cctv-dir-arrow { color:#a78bfa; }
:root[data-theme="dark"] .cctv-dir-tab.is-current .cctv-dir-arrow { color:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cctv-dir-tab.is-current .cctv-dir-arrow { color:#fff; } }
/* 다크모드 본문 색상 — 위의 '단일 색상 통일' 규칙 중 에디터 팔레트의 빨강·파랑만 다크 배경용 밝은 톤으로 살림
   (검정 #212529·붙여넣기로 딸려온 다른 색은 계속 본문색으로 통일). 저장값은 #e03131 / rgb(224, 49, 49)·#2c6ed5 / rgb(44, 110, 213) 두 형태가 있음 */
:root[data-theme="dark"] :is(.cctv-comment-content, .board-post-content, .cctv-popup-content, .cctv-editor-area) :is([style*="#e03131"], [style*="rgb(224, 49, 49)"], font[color="#e03131"]) { color: #ff8787 !important; }
:root[data-theme="dark"] :is(.cctv-comment-content, .board-post-content, .cctv-popup-content, .cctv-editor-area) :is([style*="#2c6ed5"], [style*="rgb(44, 110, 213)"], font[color="#2c6ed5"]) { color: #74a9ff !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.cctv-comment-content, .board-post-content, .cctv-popup-content, .cctv-editor-area) :is([style*="#e03131"], [style*="rgb(224, 49, 49)"], font[color="#e03131"]) { color: #ff8787 !important; }
    :root:not([data-theme="light"]) :is(.cctv-comment-content, .board-post-content, .cctv-popup-content, .cctv-editor-area) :is([style*="#2c6ed5"], [style*="rgb(44, 110, 213)"], font[color="#2c6ed5"]) { color: #74a9ff !important; }
}