/* 상단바·하단 탭바·햄버거 메뉴·푸터·광고 영역 — 원래 _shared.php cctv_nav_css()
 * 로고 라이트/다크 전환은 assets_cctv.css의 다크 조건과 같게 맞출 것
 */
.topbar { background: var(--cctv-surface); border-bottom: 1px solid var(--cctv-border); }
/* PC에서만 상단바 고정 (모바일은 하단 탭바가 고정이라 상단은 스크롤과 함께 사라지게 둠) */
@media (min-width: 769px) {
    .topbar { position: sticky; top: 0; z-index: 1000; }
}
.topbar-inner { max-width: 1140px; margin: 0 auto; padding: .7rem .7rem; display: flex; align-items: center; justify-content: space-between; }
.topbar .logo img { height: 28px; width: auto; display: block; }
/* 로고: 라이트/다크 전환 — cctv_theme_css()의 다크 조건(OS 다크 또는 스위치 강제 다크)과 동일하게 맞출 것 */
.topbar .logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topbar .logo .logo-light { display: none; }
    :root:not([data-theme="light"]) .topbar .logo .logo-dark { display: block; }
}
:root[data-theme="dark"] .topbar .logo .logo-light { display: none; }
:root[data-theme="dark"] .topbar .logo .logo-dark { display: block; }
.topbar-nav { display: flex; align-items: center; gap: .6rem; }
.nav-btn {
    display: flex; align-items: center; gap: .4rem; padding: .45rem .95rem;
    border-radius: 20px; background: var(--cctv-chip); color: var(--cctv-text-sub);
    font-size: 13px; font-weight: 600;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.13), inset 0 -1px 0 rgba(255,255,255,.7);
}
.nav-btn:hover { background: var(--cctv-chip-hover); color: var(--cctv-text); }
.nav-btn.active { background: var(--cctv-strong-bg); color: #fff; box-shadow: none; }
.nav-btn .icon { width: 16px; height: 16px; display: flex; flex-shrink: 0; }
.nav-btn .icon svg { width: 100%; height: 100%; }
.nav-btn .icon img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* 모바일 상단 검색 아이콘 (PC에서는 숨김, PC는 nav의 '돋보기+검색' 버튼 사용) */
.topbar-search-m {
    display: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--cctv-chip); color: var(--cctv-text-sub);
}
.topbar-search-m svg { width: 19px; height: 19px; }
.topbar-search-m.active { background: var(--cctv-strong-bg); color: #fff; }
/* 상단바 오른쪽 부가 버튼 묶음 [관리자(관리자 로그인 시)] [다크모드] — 메뉴 버튼 위치는 그대로 두고 본문 폭(1140px) 바깥 오른쪽에 띄움.
   바깥 공간이 모자라는 폭(769~1379px)에서는 메뉴 오른쪽에 아이콘형으로 작게 붙임. 모바일은 숨김 */
.topbar-extra { display: none; }
@media (min-width: 769px) {
    .topbar-inner { position: relative; }
    .topbar-inner > .topbar-nav { margin-left: auto; }   /* 묶음이 메뉴 오른쪽에 붙을 때도 메뉴가 가운데로 밀리지 않게 */
    .topbar-extra { display: inline-flex; align-items: center; gap: .7rem; margin-left: .6rem; flex-shrink: 0; }
    .topbar-admin { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
                    border: 1px solid var(--cctv-accent); color: var(--cctv-accent); font-size: 12px; font-weight: 600; line-height: 1.4; }
    .topbar-admin:hover { background: var(--cctv-accent-soft); color: var(--cctv-accent); }
    .topbar-admin svg { width: 13px; height: 13px; flex-shrink: 0; }
    .topbar-admin-label { display: none; }
    .topbar-dark { display: inline-flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; user-select: none; }
    .topbar-dark-label { display: none; font-size: 12px; color: var(--cctv-muted); white-space: nowrap; }
    .topbar-dark-icon { display: inline-flex; width: 15px; height: 15px; color: var(--cctv-muted); }
    .topbar-dark-icon svg { width: 100%; height: 100%; }
    .topbar-dark-switch { position: relative; display: inline-block; width: 30px; height: 14px; flex-shrink: 0; }
    .topbar-dark-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
    .topbar-dark-track { position: absolute; inset: 0; background: var(--cctv-chip-hover); border-radius: 14px; transition: background .15s; }
    .topbar-dark-track::before { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 11px; height: 11px; background: #fff;
                                 border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .topbar-dark-switch input:checked + .topbar-dark-track { background: var(--cctv-accent); }
    .topbar-dark-switch input:checked + .topbar-dark-track::before { transform: translateX(16px); }
}
@media (min-width: 1380px) {
    .topbar-extra { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); margin: 0; }
    .topbar-admin-label, .topbar-dark-label { display: inline; }
    .topbar-dark-icon { display: none; }
}

/* 광고 영역 — 광고 코드가 들어가는 모든 위치(레이어뷰어/상세페이지 등)에서 공통으로 사용.
   현재 광고가 400x90 고정 크기라 폭을 그에 맞춤. 화면이 400px보다 좁으면 박스 안에서만 가로 스크롤되고,
   페이지 전체가 옆으로 밀리진 않음(overflow-x: auto). */
.ad-box { width: 100%; max-width: 400px; margin: 1rem auto; padding: .25rem; overflow: hidden; text-align: center; box-sizing: border-box; }
@media (min-width: 769px) {
    .ad-box { max-width: 728px; }
}
/* 반응형 광고가 컨테이너 폭을 잘못 측정해 과대 크기로 삽입되는 경우 대비 (구글 자체 iframe/div에 실린 인라인 폭을 강제로 눌러줌) */
/* 본문 하단 가로형 광고 — data-ad-format 없이 CSS로 크기 지정(애드센스 공식 방식). 레이아웃 고정, 잘림 없음 */
.ad-box .cctv-ad-banner { display: block; width: 100%; height: 250px; }
@media (min-width: 769px) { .ad-box .cctv-ad-banner { height: 90px; } }
.ad-box-placeholder {
    border: 2px dashed var(--cctv-border); border-radius: 8px; min-height: 90px; width: 100%;
    display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box;
}
.ad-box-placeholder p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cctv-muted); }

.cctv-footer {
    text-align: center; padding: 1.6rem 1rem 1.8rem; margin-top: 1rem; border-top: 1px solid var(--cctv-line);
}
.footer-brand { font-size: 13px; font-weight: 700; color: var(--cctv-text-sub); }
.footer-sources {
    margin-top: .5rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    row-gap: .3rem; font-size: 11.5px; color: var(--cctv-faint);
}
.footer-source-item { display: inline-flex; align-items: center; gap: .3rem; }
/* 구분자는 "|"를 직접 넣는 대신, 다음 항목 앞에 점을 붙여 항목째로 줄바꿈되게 함 (줄 끝에 구분자만 덩그러니 남는 것 방지) */
.footer-source-item:not(:first-child)::before { content: ' '; margin: 0 .5rem; color: var(--cctv-faint); }
.footer-source-icon { height: 13px; width: auto; max-width: 90px; display: block; flex-shrink: 0; }
/* 상단 헤더 아래 '지금 N명 시청 중' 띠 (모든 페이지, 5명 미만이면 숨김) */
.cctv-live-total { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .45rem 1rem;
                   background: var(--cctv-surface); border-bottom: 1px solid var(--cctv-border);
                   font-size: 13px; font-weight: 600; color: var(--cctv-text-sub); text-align: center; }
.cctv-live-total[hidden] { display: none; }
.cctv-live-total-num { color: #e03131; font-weight: 800; font-variant-numeric: tabular-nums; }
.cctv-live-total-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #e03131; flex-shrink: 0; }
.cctv-live-total-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #e03131;
                              animation: cctv-live-total-ping 1.6s ease-out infinite; }
@keyframes cctv-live-total-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
/* 푸터 등록 CCTV 현황 (메인 상단에서 옮겨옴, 모든 페이지) */
.footer-stats { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap;
                margin-top: .35rem; font-size: 12px; color: var(--cctv-muted); }
.footer-stats b { color: var(--cctv-text-sub); }
.footer-stats .icon { width: 14px; height: 14px; display: inline-flex; }
.footer-stats .icon svg { width: 100%; height: 100%; }
.bottom-nav {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--cctv-surface); border-top: 1px solid var(--cctv-border);
    box-shadow: 0 -2px 10px rgba(16,24,40,.06);
}
.bottom-nav-inner { display: flex; }
.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: .5rem 0 .4rem; font-size: 10.5px; color: var(--cctv-muted); background: none; border: none;
}
.bottom-nav-item .icon { width: 20px; height: 20px; margin: 0 auto; }
.bottom-nav-item .icon svg { width: 100%; height: 100%; }
.bottom-nav-item .icon img { display: block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.bottom-nav-item.active { color: var(--cctv-text); font-weight: 700; }

/* 모바일 상단 오른쪽 아이콘 묶음 (검색 + 햄버거 메뉴). PC에서는 숨김 */
.topbar-m-actions { display: none; align-items: center; gap: .45rem; }
.topbar-menu-m {
    display: flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--cctv-chip); color: var(--cctv-text-sub); border: 0; padding: 0;
}
.topbar-menu-m svg { width: 19px; height: 19px; }
.topbar-menu-m.active { background: var(--cctv-strong-bg); color: #fff; }

/* 햄버거 슬라이드 메뉴 (오른쪽에서 열림) */
.side-menu-backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(0,0,0,.4); }
.side-menu {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200; width: 78vw; max-width: 300px;
    background: var(--cctv-surface); color: var(--cctv-text); box-shadow: -4px 0 18px rgba(0,0,0,.18);
    transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    display: flex; flex-direction: column;
}
.side-menu.open { transform: translateX(0); visibility: visible; }
.side-menu-head {
    display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem;
    border-bottom: 1px solid var(--cctv-border); font-size: 15px; font-weight: 700;
}
.side-menu-close { border: 0; background: none; color: var(--cctv-muted); font-size: 18px; line-height: 1; padding: .2rem .4rem; }
.side-menu-list { display: flex; flex-direction: column; padding: .5rem; }
.side-menu-item {
    display: flex; align-items: center; gap: .7rem; padding: .8rem .8rem; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: var(--cctv-text-sub);
}
.side-menu-item:hover { background: var(--cctv-hover); color: var(--cctv-text); }
.side-menu-item.active { background: var(--cctv-strong-bg); color: #fff; }
.side-menu-item .icon { width: 20px; height: 20px; display: flex; flex-shrink: 0; }
.side-menu-item .icon svg { width: 100%; height: 100%; }
/* 햄버거 메뉴 하단 다크모드 스위치 (모바일 전용 — PC는 상단바 스위치) */
.side-menu-dark { display: flex; align-items: center; justify-content: space-between; margin: .25rem .5rem 0; padding: .8rem;
                  border-top: 1px solid var(--cctv-border); font-size: 15px; font-weight: 600; color: var(--cctv-text-sub); cursor: pointer; user-select: none; }
.side-menu-dark-label { display: flex; align-items: center; gap: .7rem; }
.side-menu-dark-label .icon { width: 20px; height: 20px; display: flex; flex-shrink: 0; }
.side-menu-dark-label .icon svg { width: 100%; height: 100%; }
.side-dark-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.side-dark-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.side-dark-track { position: absolute; inset: 0; border-radius: 24px; background: var(--cctv-chip-hover); transition: background .15s; }
.side-dark-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
                           background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.side-dark-switch input:checked + .side-dark-track { background: var(--cctv-accent); }
.side-dark-switch input:checked + .side-dark-track::before { transform: translateX(20px); }
@media (max-width: 768px) {
    .topbar-nav { display: none; }
    .topbar-search-m { display: flex; }
    .topbar-m-actions { display: flex; }
    .bottom-nav { display: block; }
}