/* 메인(지도) index.php 전용 스타일 — 원래 index.php <style>
 * assets_cctv.css → assets_nav.css 다음, 행사·도로 CSS(cctv_event_css/cctv_road_css 인라인) 앞에 로드
 */
body {
    font-size: 14px;
    background: var(--cctv-bg);
    color: var(--cctv-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", Roboto, "Noto Sans KR", sans-serif;
    padding-bottom: 58px;
}
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }

.main-wrap { max-width: 1140px; margin: 0 auto; padding: .9rem 1rem 2.5rem; }

#map { width: 100%; height: 690px; border-radius: 10px; border: 1px solid var(--cctv-border); } /* PC 460px의 150%. 모바일은 아래 max-width:768px에서 58vh로 덮어씀 */
#map-loading-msg { font-size: 12px; color: var(--cctv-muted); text-align: center; padding: .4rem; min-height: .4em; }
	#map-pane { margin-top: 0; }

.cctv-card {
    background: var(--cctv-surface);
    border: 1px solid var(--cctv-border);
    border-radius: 8px;
    overflow: hidden;
}
.cctv-card .card-body { padding: 0; }
.cctv-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--cctv-strong-bg);
    padding: .7rem 1.1rem;
    margin-bottom: 0;
}
.widget-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.widget-more { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.7); flex-shrink: 0; }
.widget-more:hover { color: #fff; }
.cctv-card-body-inner { padding: 1rem 1.1rem; }

.main-notice-card .cctv-card-body-inner { padding: .4rem 1.1rem; }
.main-notice-item { display: block; padding: .35rem 0; font-size: 13px; }
.main-notice-item:hover .main-notice-title { color: var(--cctv-accent); }
.main-notice-head { display: flex; align-items: center; gap: .5rem; }
.main-notice-badge {
    flex-shrink: 0; background: var(--cctv-strong-bg); color: #fff; font-size: 11px; font-weight: 700;
    padding: .1rem .5rem; border-radius: 4px; white-space: nowrap;
}
.main-notice-title { font-weight: 600; }
.main-notice-excerpt { color: var(--cctv-muted); margin: .3rem 0 0; line-height: 1.5; }
/* 관리자 '메인 공지 노출' 체크된 공지 — 날짜 뱃지·제목을 빨강 계열로 구분 */
.main-notice-item.is-pinned .main-notice-badge { background: var(--cctv-accent); }
.main-notice-item.is-pinned .main-notice-title,
.main-notice-item.is-pinned:hover .main-notice-title { color: var(--cctv-accent); }
.map-wrap { position: relative; }
/* 내 위치 버튼: 지도 우하단 — 맨 아래는 멀티뷰 버튼, 그 위 (36px + 간격 8px) */
.btn-my-location {
    position: absolute; bottom: 56px; right: 12px; z-index: 10;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--cctv-surface); border: 1px solid var(--cctv-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--cctv-text-sub); transition: background .15s, color .15s;
}
.btn-my-location:hover { background: var(--cctv-hover); color: var(--cctv-accent); }
.btn-my-location.locating { color: var(--cctv-accent); animation: pulse-loc .8s infinite alternate; }
@keyframes pulse-loc { from { opacity: 1; } to { opacity: .4; } }
.btn-my-location svg { width: 18px; height: 18px; display: block; }
/* 위성/일반 지도 전환 버튼: 내 위치 버튼 바로 위 (같은 모양, 36px + 간격 8px) */
.btn-map-type {
    position: absolute; bottom: 100px; right: 12px; z-index: 10;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--cctv-surface); border: 1px solid var(--cctv-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--cctv-text-sub); transition: background .15s, color .15s;
}
.btn-map-type:hover { background: var(--cctv-hover); color: var(--cctv-accent); }
.btn-map-type.is-sat { background: var(--cctv-accent); border-color: var(--cctv-accent); color: #fff; }
.btn-map-type svg { width: 18px; height: 18px; display: block; }
/* 멀티뷰 버튼: 지도 우하단 맨 아래 (같은 모양). 켜짐·번호 색은 멀티뷰 고유색 --mv-c (assets_multiview.css) */
.btn-multiview {
    position: absolute; bottom: 12px; right: 12px; z-index: 10;
    width: 36px; height: 36px; border-radius: 50%; padding: 0;
    background: var(--cctv-surface); border: 1px solid var(--cctv-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--cctv-text-sub); transition: background .15s, color .15s;
}
.btn-multiview:hover { background: var(--cctv-hover); color: var(--mv-c, #e8590c); }
.btn-multiview.is-on { background: var(--mv-c, #e8590c); border-color: var(--mv-c, #e8590c); color: #fff; }
.btn-multiview svg { width: 18px; height: 18px; display: block; }
.btn-multiview .mv-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; box-sizing: border-box;
                           background: var(--mv-c, #e8590c); color: #fff; border: 1.5px solid #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }
.btn-multiview.is-on .mv-badge { background: #fff; color: var(--mv-c, #e8590c); border-color: var(--mv-c, #e8590c); }
.btn-multiview .mv-badge[hidden] { display: none; }
/* 멀티뷰에 담긴 CCTV 핀: 핀 머리 위 주황 번호 (핀 끝 기준 위로 29px = 핀 머리 가운데) */
.mv-pin-num { width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; transform: translateY(-29px);
              display: flex; align-items: center; justify-content: center; cursor: pointer;
              background: var(--mv-c, #e8590c); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
              font-size: 12px; font-weight: 800; line-height: 1; }
.theme-filter-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 5;
    background: var(--cctv-glass);
    border: 1px solid var(--cctv-border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(16,24,40,.12);
    padding: .55rem .6rem;
}
.theme-filter-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.theme-filter-scroll::-webkit-scrollbar { display: none; }
.theme-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--cctv-border);
    background: var(--cctv-surface);
    color: var(--cctv-text-sub);
    border-radius: 20px;
    padding: .35rem .9rem;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.theme-pill-icon { height: 13px; width: auto; margin-right: 5px; flex-shrink: 0; } /* 핀 라벨 아이콘(.marker-label-icon)과 같은 방식, 13px 폰트에 맞춰 1px 키움 */
.theme-pill.active { background: var(--cctv-marker); border-color: var(--cctv-marker); color: #fff; }

	.tf-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 34px;
		border: 0;
		padding: 0;
		font-size: 20px;
		line-height: 1;
		color: var(--cctv-text-sub);
		cursor: pointer;
		display: flex;
		align-items: center;
		z-index: 2;
	}
	.tf-arrow[hidden] { display: none; }
	.tf-prev {
		left: 0;
		justify-content: flex-start;
		padding-left: .5rem;
		border-radius: 10px 0 0 10px;
		background: linear-gradient(to right, var(--cctv-surface) 55%, var(--cctv-surface-0));
	}
	.tf-next {
		right: 0;
		justify-content: flex-end;
		padding-right: .5rem;
		border-radius: 0 10px 10px 0;
		background: linear-gradient(to left, var(--cctv-surface) 55%, var(--cctv-surface-0));
	}
	.tf-arrow:hover { color: var(--cctv-marker); }

.ranking-list { list-style: none; padding: 0; margin: 0; }
.ranking-list li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .55rem 1.1rem;
    border-bottom: 1px solid var(--cctv-line);
    font-size: 15px;
}
.ranking-list li:last-child { border-bottom: none; }
.ranking-list .rank-num { color: var(--cctv-muted); font-weight: 700; font-size: 12px; width: 1.2em; flex-shrink: 0; }
.ranking-list a:hover { color: var(--cctv-accent); }
.ranking-item-icon { height: 16px; width: auto; flex-shrink: 0; align-self: center; margin-left: -.2rem; } /* 뷰어 제목 옆 소스 아이콘과 동일 (16px, 제목과 .4rem 간격) */
	.ranking-empty { padding: 1.4rem 1rem; text-align: center; color: var(--cctv-muted); font-size: 13px; }

/* 메인 하단 — PC: 왼쪽(랭킹·광고) 1/3 + 오른쪽(공지 등) 2/3 (원래 배치)
   모바일: 랭킹 3종을 탭 카드 하나로 → 광고 → 공지 → 최근 등록 순.
   모바일에선 두 컬럼을 display:contents로 풀어서 order로만 순서 재배치 (DOM 중복 없음, 광고도 1개) */
.main-bottom { display: flex; flex-direction: column; margin-top: .2rem; }
.main-left, .main-right { display: contents; }
.main-right > *                   { order: 9; } /* 오른쪽에 나중에 추가하는 것들 → 모바일에선 맨 아래 */
.main-left > .rk-tabs             { order: 1; }
.main-left > .rk-panel            { order: 2; }
.main-left > .ad-box              { order: 3; }
.main-right > .event-today-card   { order: 4; }
.main-right > .main-board-row     { order: 5; } /* CCTV 게시판 → 건의·요청 (안에서 위아래로 쌓임) */
.main-right > .main-notice-card   { order: 6; }
.main-left > .rk-recent           { order: 7; }
.main-right > .main-pair-row      { order: 4; } /* 행사 | 사고 카드 묶음 (모바일: 광고 다음) */

/* 행사 | 사고 카드 — PC: 좌우 반반, 두 카드 높이를 같게(stretch) / 모바일: 위아래 */
.main-pair-row { display: flex; flex-direction: column; }
@media (min-width: 769px) {
    .main-pair-row { flex-direction: row; gap: .5rem; align-items: stretch; }
    .main-pair-row > .cctv-card { flex: 1 1 0; min-width: 0; }
}
/* 행사 카드: 반반 폭에서도 한 줄 유지 (제목만 … 처리) */
.event-today-link { min-width: 0; }
.event-today-link .event-badge, .event-today-time { flex-shrink: 0; white-space: nowrap; }

/* 최근 사고 카드 — 줄 높이는 행사 카드(.event-today-link)와 똑같이. 한쪽을 바꾸면 같이 바꿀 것 */
.acc-main-list { list-style: none; margin: 0; padding: 0; }
.acc-main-list li { border-bottom: 1px solid var(--cctv-line); }
.acc-main-list li:last-child { border-bottom: none; }
.acc-main-link { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; font-size: 15px; min-width: 0; }
.event-badge.acc-main-badge { color: #fff; }   /* 행사 CSS(.event-badge 회색 글자)가 뒤에 붙어도 이기도록 클래스 2개로 지정 */
.acc-main-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-main-link:hover .acc-main-title { color: var(--cctv-accent); }
.acc-main-video { flex-shrink: 0; display: inline-flex; color: #7048e8; }
.acc-main-video svg { width: 10px; height: 10px; }
:root[data-theme="dark"] .acc-main-video { color: #9775fa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .acc-main-video { color: #9775fa; } }
.acc-main-time { flex-shrink: 0; font-size: 12px; color: var(--cctv-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 메인 게시판 카드 2종 — PC: 행사 카드와 공지 사이 좌우 반반 / 모바일: 위아래로 쌓임. 줄 높이·폰트는 .ranking-list와 동일 */
.main-board-row { display: flex; flex-direction: column; }
.main-board-list { list-style: none; padding: 0; margin: 0; }
.main-board-list li { border-bottom: 1px solid var(--cctv-line); }
.main-board-list li:last-child { border-bottom: none; }
.main-board-link { display: flex; align-items: baseline; gap: .4rem; padding: .55rem 1.1rem; font-size: 15px; }
.main-board-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-board-reply { flex-shrink: 0; color: var(--cctv-accent); font-size: 12px; font-weight: 700; }
.main-board-ago { flex-shrink: 0; margin-left: auto; padding-left: .4rem; color: var(--cctv-muted); font-size: 11px; }
.main-board-link:hover .main-board-text { color: var(--cctv-accent); }
@media (min-width: 769px) {
    .main-board-row { flex-direction: row; gap: .5rem; }
    .main-board-row > .main-board-card { flex: 1 1 0; min-width: 0; }
}

/* 모바일 탭 헤더 — board.php 게시판 탭(.board-tab)과 동일한 디자인 */
.rk-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.rk-tab {
    flex: 1 1 0; min-width: 0; border: 0; text-align: center;
    padding: .6rem .2rem; border-radius: 8px;
    font-size: 16px; font-weight: 600; letter-spacing: -.03em;
    background: var(--cctv-chip); color: var(--cctv-text-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-tab.is-active { background: var(--cctv-strong-bg); color: #fff; }

@media (max-width: 768px) {
    .rk-panel > .cctv-card-title { display: none; }
    .rk-panel:not(.is-active) { display: none; }
}
@media (min-width: 769px) {
    .main-bottom { flex-direction: row; align-items: flex-start; gap: .5rem; margin-top: 0; }
    .main-left  { display: block; flex: 0 0 calc((100% - .5rem) / 3); min-width: 0; }
    .main-right { display: block; flex: 1 1 0; min-width: 0; }
    .rk-tabs { display: none; }
}

	.cctv-popup { padding: .8rem; width: 100%; box-sizing: border-box; }
	#popup-sheet { max-width: 400px; }
@media (min-width: 769px) {
    #popup-sheet {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);
        width: 960px !important;
        max-width: 90vw !important;
        max-height: 85vh;
        border-radius: 12px !important;
    }
    .cctv-popup-title { font-size: 18px; }
    .cctv-popup-actions button, .cctv-popup-actions a { font-size: 13px; padding: .55rem; }
    .btn-notice-external { font-size: 13px; padding: .6rem 1.3rem; }
}
.cctv-popup-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: 15px; margin-bottom: .5rem; }
.cctv-popup-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-popup-updated { text-align: center; font-size: 11px; color: var(--cctv-muted); margin: -.2rem 0 .5rem; }
.cctv-popup-source-icon { height: 16px; width: auto; flex-shrink: 0; }
.cctv-popup-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1a1a1a; border-radius: 8px; overflow: hidden; margin-bottom: .6rem; }
.cctv-popup-player iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }
.cctv-popup-player video.cctv-video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: contain; background: #000; }
.cctv-popup-player img.cctv-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cctv-still-badge { position: absolute; left: 8px; bottom: 23px; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 4px; pointer-events: none; }
.cctv-still-badge.is-error { background: rgba(201,42,42,.85); }
.cctv-popup-notice {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; text-align: center; padding: 0 1.3rem; gap: .7rem;
}
.cctv-popup-notice p { margin: 0; line-height: 1.5; }
.btn-notice-external {
    display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1.1rem;
    border: 1px solid #fff; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; background: transparent;
}
.btn-notice-external:hover { background: rgba(255,255,255,.15); }
.cctv-popup-notice-backup { font-size: 11px; color: rgba(255,255,255,.7); }
.cctv-popup-backup-hint { text-align: center; font-size: 11px; color: var(--cctv-muted); margin: -.3rem 0 .5rem; }
/* 레이어뷰어 버튼: PC 한 줄(5개) / 모바일 2줄(좋아요·즐겨찾기·지도 위치 확인 / 전체 페이지·영상 불량 신고) */
.cctv-popup-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-bottom: .4rem; }
.cctv-popup-actions > * { grid-column: span 2; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; text-decoration: none; box-sizing: border-box; }
/* 모바일 2행: 댓글보기+공유하기+불량신고 3개 균등(각 span2 = 2+2+2=6) */
@media (min-width: 769px) {
    .cctv-popup-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .cctv-popup-actions > *, .cctv-popup-actions > .btn-detail, .cctv-popup-actions > .btn-report { grid-column: auto; }
}

	.cctv-popup-actions button, .cctv-popup-actions a {
		font-size: 12px; padding: .45rem .3rem; border-radius: 6px; text-align: center; font-weight: 500; transition: background .15s, border-color .15s;
	}
	.btn-report { background: var(--cctv-surface); border: 1px solid var(--cctv-border); color: var(--cctv-text-sub); }
	.btn-report:hover { background: var(--cctv-hover); }
	.btn-like, .btn-favorite {
		background: var(--cctv-btn-dark); border: 1px solid var(--cctv-btn-dark); color: #fff;
		display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
	}
	.btn-like:hover, .btn-favorite:hover { background: var(--cctv-btn-dark-hover); }
	.icon-heart, .icon-star { font-size: 14px; line-height: 1; color: #fff; }
	.btn-like.liked .icon-heart { color: #ff3040; }
	.btn-favorite.active .icon-star { color: #fee500; }
	.btn-detail { background: var(--cctv-accent); border: 1px solid var(--cctv-accent); color: #fff; }
	.btn-detail:hover { background: var(--cctv-accent-hover); }
	.btn-locate { background: var(--cctv-surface); border: 1px solid var(--cctv-accent); color: var(--cctv-accent); }
	.btn-locate:hover { background: var(--cctv-accent-soft); }
	.icon-pin svg { width: 12px; height: 12px; display: block; }
	/* ---- 날씨·일출일몰·테마 정보 바 ---- */
	.cctv-info-bar {
		display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
		gap: .6rem; padding: .45rem .8rem; margin-bottom: .4rem;
		background: var(--cctv-surface); border: 1px solid var(--cctv-border);
		border-radius: 10px; font-size: 12.5px; color: var(--cctv-text-sub);
		min-height: 2.1rem; line-height: 1.2;
	}
	.info-bar-divider { width: 1px; height: 14px; background: var(--cctv-border); flex-shrink: 0; }
	.info-bar-weather { display: inline-flex; align-items: center; gap: .3rem; }
	.info-weather-icon { font-size: 16px; line-height: 1; }
	.info-weather-temp { font-size: 13px; font-weight: 600; color: var(--cctv-text); }
	.info-bar-sun { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; }
	.info-sun-rise, .info-sun-set { display: inline-flex; align-items: center; gap: .18rem; }
	.info-bar-themes { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
	.info-theme-chip { display: inline-flex; align-items: center; gap: .2rem; background: var(--cctv-chip); border-radius: 6px; padding: .15rem .5rem; font-size: 12px; }
	.theme-emoji { font-size: 14px; line-height: 1; }
	.theme-text { color: var(--cctv-text-sub); }
	/* 4개 이상이면 PC도 텍스트 숨김 (icon-only 클래스) */
	.info-theme-chip.icon-only .theme-text { display: none; }
	/* 공유하기 PC: 제목 옆 완전 라운딩 필 버튼. 소스 아이콘 바로 뒤에 자연 흐름으로 붙음(margin-left:auto 안 씀) */
	.btn-share-pill { display: none; align-items: center; gap: .3rem; border-radius: 999px; padding: .25rem .7rem; font-size: 11px; font-weight: 600; cursor: pointer; background: var(--cctv-surface); border: 1px solid var(--cctv-border); color: var(--cctv-text-sub); transition: background .15s; flex-shrink: 0; }
	.btn-share-pill:hover { background: var(--cctv-hover); border-color: var(--cctv-accent); color: var(--cctv-accent); }
	.btn-share-pill.copied { border-color: var(--cctv-accent); color: var(--cctv-accent); }
	.btn-share-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
	.btn-share-pill .icon-check { font-size: 11px; }
	/* 공유하기 모바일: 다른 버튼과 완전히 동일한 모양. icon-share로 SVG 크기 고정 */
	.btn-share-inline { background: var(--cctv-surface); border: 1px solid var(--cctv-border); color: var(--cctv-text-sub); }
	.btn-share-inline:hover { background: var(--cctv-hover); }
	.btn-share-inline.copied { border-color: var(--cctv-accent); color: var(--cctv-accent); }
	.icon-share { display: inline-flex; align-items: center; }
	.icon-share svg { width: 12px; height: 12px; display: block; flex-shrink: 0; }
	.btn-share-inline .icon-check { font-size: 12px; }
	@media (min-width: 769px) {
		.btn-share-pill { display: inline-flex; }
	}
	/* "지도 위치 확인" 이동 후 해당 핀 위치를 잠깐 표시하는 펄스 링 */
	.focus-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--cctv-marker); background: rgba(44,110,213,.18); pointer-events: none; animation: focus-pulse 1.4s ease-out infinite; }
	@keyframes focus-pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
	.btn-report { color: red; cursor: pointer; }
	.cctv-popup-content {
		margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--cctv-border);
		font-size: 13px; line-height: 1.6; color: var(--cctv-text-body); white-space: pre-line; word-break: break-word;
	}

	/* 장소 검색에서 넘어온 위치 핀 (이름 라벨 + 점) */
	.place-pin { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
	.place-pin-label { background: #e03131; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
	.place-pin-dot { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: #e03131; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }

.badge-dollar { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 10px; border-radius: 3px; background: #ffc107; color: #212529; }

.region-bubble {
    background: var(--cctv-marker);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}
.region-bubble-name { font-size: 13px; font-weight: 700; }
.region-bubble-count { font-size: 11px; color: #d0e2ff; }

.marker-label {
    background: #fff;
    border: 1px solid var(--cctv-border);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    cursor: pointer;           /* 라벨을 눌러도 핀과 똑같이 뷰어가 열림 */
    display: inline-flex;
    align-items: center;
    transition: border-color .12s, box-shadow .12s;
}
.marker-label:hover { border-color: var(--cctv-marker); box-shadow: 0 1px 4px rgba(44,110,213,.35); }
.marker-label-icon { height: 12px; width: auto; margin-right: 4px; flex-shrink: 0; }

@media (max-width: 768px) {
    #map { height: 58vh; }
}

	.footer-item-icon { height: 14px; width: auto; flex-shrink: 0; }