/* ============================================================================
   브랜드 색상. ⚠️ 색을 바꿀 때는 여기만 고친다.
   
   값의 근거:
     --brand      #0C8A85  앱 아이콘(#1EE0DB)에서 파생한 어두운 변형.
                           아이콘 원본을 그대로 쓰면 흰 글씨 대비가 1.65 밖에 안 나와
                           버튼 글씨가 읽히지 않는다(WCAG AA 기준 4.5). 이 값은 4.21 로,
                           버튼처럼 굵은 글씨(대형 텍스트 기준 3.0)에는 충분하다.
     --brand-dark #0A807C  hover/press 등 더 진한 상태용(대비 4.78, AA 통과).
     --brand-soft #e8f5f4  선택된 행/카드 배경. 기존 var(--brand-soft) 의 터콰이즈 버전.

   ⚠️ 지도 마커·범례 색은 여기서 관리하지 않는다 -- 그건 브랜드가 아니라
      "이벤트 종류"(주기보고/SOS/안심존 등)를 구분하는 의미색이라
      location-markers.js 가 따로 갖고 있다(사용자 확정).
   ============================================================================ */
:root {
    --brand: #0C8A85;
    --brand-dark: #0A807C;
    --brand-soft: #e8f5f4;
}

/* 체크박스·라디오·프로그레스 등 폼 컨트롤의 강조색.
   ⚠️ 이 요소들은 브라우저가 자체 렌더링해서 background/color 로는 색이 안 바뀐다.
   accent-color 를 지정해야 체크 표시와 채움색이 브랜드 색으로 나온다.
   (지정하지 않으면 브라우저 기본 파란색이 그대로 보인다 -- 실제로 그 상태였다.) */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--brand);
}

/* 텍스트를 드래그로 선택했을 때의 배경. 지정하지 않으면 브라우저 기본 파란색이 나온다. */
::selection {
    background: var(--brand-soft);
    color: #111827;
}

/* 입력칸에 포커스가 갔을 때. 브라우저 기본 파란 링 대신 브랜드 색 테두리를 쓴다.
   ⚠️ outline 을 없애기만 하면 키보드 사용자가 "지금 어디에 입력하는지" 알 수 없다.
   반드시 대체 표시(여기서는 border-color + box-shadow)를 함께 줘야 한다. */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-soft);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; background: #f4f6f8; color: #222; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #1f2937; color: #e5e7eb; flex-shrink: 0; padding: 16px 0; }
.sidebar-title { display: flex; align-items: center; font-size: 18px; font-weight: bold; padding: 0 16px 16px; border-bottom: 1px solid #374151; margin-bottom: 8px; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li.group { padding: 8px 16px; font-size: 12px; color: #9ca3af; text-transform: uppercase; }
.sidebar li.group ul { margin-top: 4px; }
.sidebar a { display: block; padding: 8px 16px; color: #e5e7eb; text-decoration: none; font-size: 14px; }
.sidebar a:hover { background: #374151; }
.content { flex: 1; padding: 24px; }
.page-title { font-size: 22px; font-weight: bold; margin-bottom: 16px; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 16px; margin-bottom: 16px; }
.stat-row { display: flex; gap: 16px; margin-bottom: 16px; }
.stat-card { flex: 1; }
.stat-value { font-size: 28px; font-weight: bold; }
.stat-label { font-size: 13px; color: #6b7280; }
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
table.data-table th { background: #f9fafb; font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge-online { background: #d1fae5; color: #065f46; }
.badge-offline { background: #fee2e2; color: #991b1b; }
.badge-status { background: #e0e7ff; color: #3730a3; }
#map { width: 100%; height: 480px; border-radius: 8px; }
.btn { display: inline-block; padding: 6px 14px; border-radius: 4px; border: none; background: var(--brand); color: #fff; cursor: pointer; font-size: 13px; text-decoration: none; }
.btn.btn-danger { background: #dc2626; }
.btn.btn-secondary { background: #6b7280; }

/* 필터 버튼(전체/OO/OO 식으로 여러 화면에서 반복되는 패턴)의 공통 스타일. 예전엔 화면마다 인라인
   style 로 활성 상태를 표현해서(background:var(--brand) 직접 지정 등) 화면끼리 미묘하게 달라 보였다 --
   .filter-btn(기본)/.filter-btn.active(선택됨)로 통일한다. */
/*
 * 목록 위 도구 줄. 왼쪽에 버튼·필터, 오른쪽에 표시 개수를 둔다.
 *
 * ⚠️ space-between 으로 양끝에 붙인다. 왼쪽에 몰아두면 표시 개수 선택칸이 필터 버튼과
 *    붙어 보여서, 둘 다 "거르는 기능"으로 읽힌다 -- 성격이 다르니 떼어 놓는다.
 *
 * ⚠️ flex-wrap 을 둔다. 창을 좁히면 오른쪽 요소가 아래로 내려가야 한다. nowrap 이면
 *    버튼이 찌그러져 글자가 잘린다.
 */
.toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filter-btn { display: inline-block; padding: 6px 14px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; font-size: 13px; }
.filter-btn:hover { background: #f3f4f6; }
.filter-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 검색+페이지네이션이 있는 목록 화면 공통 스타일 (사용자/보호자 관리 등). */
.search-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.search-bar input[type="text"] { padding: 6px; border: 1px solid #d1d5db; border-radius: 4px; box-sizing: border-box; }
.search-bar select { padding: 6px; border: 1px solid #d1d5db; border-radius: 4px; box-sizing: border-box; }
/* 목록 하단 페이지네이션 (pagination.js 의 renderPagination 이 그린다).
   3칸 그리드: [전체 N건 | 페이지 버튼 | 빈 칸]. 좌우 칸 폭을 같게(1fr) 둬야 가운데 버튼 묶음이
   건수 글자 길이와 상관없이 정확히 화면 중앙에 온다(flex space-between 은 중앙이 밀린다). */
.pagination-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: #6b7280; }
.pagination-bar .pager-total { justify-self: start; white-space: nowrap; }
.pagination-bar .pager-total strong { color: #111827; font-weight: 600; }
.pagination-bar .pager { display: flex; align-items: center; gap: 4px; }
.pagination-bar .pager-btn { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #374151; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.pagination-bar .pager-btn:hover:not(:disabled):not(.active) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.pagination-bar .pager-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pagination-bar .pager-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; cursor: default; }
.pagination-bar .pager-btn:disabled { color: #d1d5db; background: #f9fafb; border-color: #f3f4f6; cursor: not-allowed; }
.pagination-bar .pager-nav { color: #6b7280; }
/* 좁은 화면: 건수를 윗줄에, 버튼을 아랫줄 가운데에. 한 줄에 두면 버튼이 잘린다. */
@media (max-width: 640px) {
    .pagination-bar { grid-template-columns: 1fr; justify-items: center; }
    .pagination-bar .pager-total { justify-self: start; }
    .pagination-bar .pager-spacer { display: none; }
    .pagination-bar .pager-btn { min-width: 30px; height: 30px; padding: 0 6px; }
}

/* 라벨 옆 물음표(?) 아이콘 -- 배경색 있는 원으로 감싸고, 마우스를 올리면(:hover) 설명 팝업을 띄운다.
   네이티브 title 속성 툴팁은 브라우저마다 표시 지연/스타일이 달라 신뢰할 수 없어서(실제로 안 뜨는
   사례가 보고됨), CSS ::after 로 직접 그리는 방식을 쓴다 -- 항상 확실하게 뜬다. */
.info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; background: #9ca3af; color: #fff;
    font-size: 11px; font-weight: bold; cursor: help; position: relative; margin-left: 4px;
    vertical-align: middle;
}
.info-icon .info-tooltip {
    visibility: hidden; opacity: 0; position: absolute; z-index: 20;
    bottom: 130%; left: 50%; transform: translateX(-50%);
    background: #1f2937; color: #fff; padding: 8px 10px; border-radius: 6px;
    font-size: 12px; font-weight: normal; line-height: 1.5; white-space: normal;
    width: 240px; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: opacity .15s ease;
}
.info-icon .info-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: #1f2937 transparent transparent transparent;
}
.info-icon:hover .info-tooltip { visibility: visible; opacity: 1; }
.sidebar-user { margin-top: 24px; padding: 16px; border-top: 1px solid #374151; display: flex; align-items: center; justify-content: space-between; }
.sidebar-user-name { font-size: 13px; color: #e5e7eb; text-decoration: none; }
.sidebar-user-name:hover { text-decoration: underline; }
.sidebar-logout-btn { background: transparent; border: 1px solid #4b5563; color: #e5e7eb; border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.sidebar-logout-btn:hover { background: #374151; }

/* 오류가 아닌, 가볍게 알려주면 되는 안내(Toast). 오류는 이걸 쓰지 않고 alert()(팝업)로 막아서 보여준다 --
   "이 작업을 계속하려면 반드시 읽어야 하는 메시지인가"가 둘을 가르는 기준. */
.gt-toast-wrap {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none;
}
.gt-toast {
    background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 8px;
    font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
    max-width: 320px; text-align: center;
}
.gt-toast.show { opacity: 1; transform: translateY(0); }

/* ============================================================================
 * 인증 페이지(로그인/회원가입) 공용 레이아웃. App(모바일, 상단바+카드+하단탭) 과는 확실히 다르게
 * -- 데스크톱 웹 콘솔답게 상단에 어두운 헤더 바를 두고, 그 아래 넓은 카드를 중앙 배치한다.
 * 관리자 사이드바(.sidebar)와 같은 톤(#1f2937 계열 어두운 헤더)으로 맞춰서, "이 서비스의 데스크톱
 * 웹 화면이구나"가 한눈에 느껴지게 한다.
 * ============================================================================ */
.auth-page { min-height: 100vh; background: #f4f6f8; margin: 0; display: flex; flex-direction: column; }
/* 회원가입 화면(signup, signup-account)에서 쓰는 상단 바. 로그인 화면은 아래 auth-login-* 로
   따로 처리한다(사용자 요청: 로그인만 App 과 같은 로고 이미지를 카드 위에 배치). */
.auth-topbar {
    background: #1f2937; color: #fff; padding: 16px 32px; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
}
.auth-topbar .auth-logo { width: 24px; height: 24px; display: inline-block; background: url('../images/icon.png') no-repeat center / contain; }

/* 로그인 화면 전용. 상단 바를 없애고 App 로그인 화면(app-web/login.html)과 같은 로고 이미지를
   로그인 카드 "위"에 배치해서, 앱과 웹의 첫인상을 통일한다(사용자 요청).
   panel 로 한 번 감싸는 이유: 로고와 카드를 하나의 세로 묶음으로 만들어야 auth-wrap 의
   가운데 정렬이 "로고+카드 전체" 기준으로 잡히기 때문이다(로고만 따로 두면 카드가 아래로 밀린다). */
.auth-login-panel { display: flex; flex-direction: column; align-items: center; width: 480px; max-width: 100%; }
/* 로고와 부제는 하나의 묶음이라, 아래 여백(로그인 박스와의 간격)은 부제 쪽에서 준다 --
   로고에 margin-bottom 을 그대로 두면 로고와 부제 사이가 벌어져 따로 노는 것처럼 보인다. */
.auth-login-logo { width: 240px; margin-bottom: 12px; display: block; }
.auth-login-subtitle { margin-bottom: 52px; font-size: 17px; color: #6b7280; letter-spacing: 0.02em; }
/* 로그인 버튼 아래 "아이디 저장" 체크박스. auth-box 안의 input[type=text] 규칙이 width:100% 라
   체크박스까지 늘어나지 않도록, 위 .auth-box input[type="checkbox"] 규칙(16px 고정)이 이미
   적용되어 있다 -- 여기서는 배치만 잡는다. */
.auth-remember {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; font-size: 14px; color: #4b5563; cursor: pointer;
}

/* 지도 아래 이벤트 타입 범례(위치 아이콘 설명). 지도 카드 안쪽, 지도 바로 아래에 둔다 --
   예전엔 지도와 떨어진 별도 줄에 있어서 무엇에 대한 설명인지 연결이 잘 안 됐다(사용자 요청).
   폰트도 12px -> 14px 로 두 포인트 올렸다. */
.event-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    margin-top: 10px; padding: 10px 12px;
    font-size: 14px; color: #4b5563;
    background: #f9fafb; border-radius: 8px;
}
.event-legend .legend-item { display: inline-flex; align-items: center; white-space: nowrap; }

/* 위치 이력 목록: 카드(레이아웃 박스) 안에서만 스크롤되게 한다 -- 페이지 전체가 스크롤되면
   목록을 내리는 동안 지도가 화면 밖으로 사라진다(사용자 요청). */
.history-scroll-box { max-height: 460px; overflow-y: auto; }
/* 스크롤해도 열 제목은 보이게 고정한다 -- 목록이 길면 어느 열이 무슨 값인지 잊게 된다. */
.history-scroll-box .data-table thead th { position: sticky; top: 0; z-index: 1; background: #f9fafb; }

/* ---- 주소/장소 검색 (안심존 추가) ---- */
.geo-search { display: flex; gap: 8px; margin-bottom: 10px; }
.geo-search input {
    flex: 1; min-width: 0; padding: 8px 10px;
    border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
}
.geo-search input:focus { outline: none; border-color: var(--brand); }
.geo-search .btn { flex-shrink: 0; }

.geo-search-results {
    margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 6px;
    background: #fff; max-height: 240px; overflow-y: auto;
}
.geo-search-item { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.geo-search-item:last-child { border-bottom: none; }
.geo-search-item:hover { background: var(--brand-soft); }
.geo-search-name { font-size: 14px; color: #111827; }
.geo-search-detail { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.geo-search-empty { padding: 14px; font-size: 13px; color: #9ca3af; text-align: center; }
/* flex:1 로 상단바를 뺀 나머지 화면 공간을 전부 차지한 뒤, 그 안에서 세로/가로 모두 가운데 정렬한다
   -- 예전엔 위쪽 패딩(56px)만 줘서 화면이 크면 카드가 위쪽에 붙어 보였다. */
.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-box { background: #fff; padding: 44px; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 480px; max-width: 100%; box-sizing: border-box; }
.auth-box h1 { font-size: 21px; margin: 0 0 26px; }
.auth-box .auth-step { font-size: 12px; color: #9ca3af; margin-bottom: 6px; letter-spacing: 0.02em; }
.auth-box input[type="text"], .auth-box input[type="password"], .auth-box input[type="email"], .auth-box select {
    width: 100%; padding: 11px; margin-bottom: 14px; border: 1px solid #d1d5db; border-radius: 4px; box-sizing: border-box; font-size: 14px;
}
.auth-box input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; }

/* ⚠️ 입력칸 아래에 안내 문구(#password-hint 등)가 붙는 경우.
   .auth-box input 에 margin-bottom:14px 가 걸려 있어서, 그 여백 안으로 문구가 들어가
   다음 라벨과 겹쳐 보였다(사용자 지적). 문구가 있는 칸은 입력칸 여백을 없애고
   문구 쪽에 여백을 준다. */
/* ⚠️ :has() 는 구형 브라우저에서 동작하지 않아 쓰지 않는다.
   비밀번호 칸은 JS(attachPasswordToggles)가 input 의 margin-bottom 을 wrap 으로 옮기므로
   여기서는 input 쪽만 지정하면 된다. */
.auth-box input.has-hint { margin-bottom: 4px; }
.auth-box .auth-field-hint {
    font-size: 12px; color: #9ca3af; margin: 0 0 14px; line-height: 1.4;
}
/* 약관 동의처럼 필드 몇 개가 아니라 문서 전문을 담아야 하는 1단계 화면은 카드 폭을 훨씬 넓게 쓴다. */
.auth-box.auth-box-wide { width: 640px; }
.auth-box label.auth-field-label { display: block; font-size: 13px; color: #6b7280; margin: -8px 0 4px; }
.auth-box button[type="submit"], .auth-box .auth-btn {
    width: 100%; padding: 12px; background: var(--brand); color: #fff; border: none; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: 600;
}
/* 보조 버튼("연락처 다시 입력" 등). 주 버튼과 같은 크기이되 색으로 우선순위를 구분한다.
   ⚠️ 같은 색으로 두면 무엇을 눌러야 하는지 한눈에 안 들어온다. */
.auth-box .auth-btn-secondary {
    width: 100%; padding: 12px; margin-top: 8px;
    background: #fff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: 600;
}
.auth-box .auth-btn-secondary:hover { border-color: #9ca3af; }

/* 화면 아래 "돌아가기" 한 줄. 칩 여러 개를 늘어놓는 것보다 조용하고, 흐름을 방해하지 않는다. */
.auth-back-link {
    display: block; text-align: center; margin-top: 18px;
    font-size: 13px; color: #9ca3af; text-decoration: none;
}
.auth-back-link:hover { color: #6b7280; }

.auth-error { color: #dc2626; font-size: 13px; margin-bottom: 16px; padding: 10px 12px; background: #fef2f2; border-radius: 4px; }
.auth-notice { color: #374151; font-size: 13px; margin-bottom: 16px; padding: 10px 12px; background: var(--brand-soft); border-radius: 4px; }
.auth-footer { text-align: center; margin-top: 18px; font-size: 13px; color: #6b7280; }
.auth-footer a { color: var(--brand); text-decoration: none; }
.auth-footer-sub { text-align: center; margin-top: 8px; font-size: 12px; }
.auth-footer-sub a { color: #9ca3af; text-decoration: none; }

/* 로그인 화면 아래 보조 링크(아이디 찾기 / 비밀번호 찾기 / 약관).
   ⚠️ 예전에는 글자 링크를 <span>·</span> 와 &nbsp;·&nbsp; 로 이어 붙여서, 구분자 모양이
   제각각이고 눌러야 할 곳이 어디까지인지 알기 어려웠다(사용자 지적).
   칩 형태로 만들면 각 항목의 경계가 분명해지고 터치 영역도 넓어진다. */
.auth-chip-row {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
}
.auth-chip {
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    font-size: 12px; color: #6b7280; text-decoration: none;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    transition: border-color .15s, color .15s;
}
.auth-chip:hover { border-color: var(--brand); color: var(--brand); }

/* 이상값(튐) 배지. 기지국 측위가 수십 km 떨어진 좌표를 줄 때 표시한다.
   ⚠️ 경고색(빨강)을 쓰지 않는다 -- 사고가 난 게 아니라 "이 좌표는 믿지 말라"는 안내다.
   빨강을 쓰면 SOS 같은 진짜 위급 표시와 섞여 둘 다 무뎌진다. */
.outlier-badge {
    /* ⚠️ 출처 배지와 짝을 맞춰 여백/글자를 줄였다(사용자 지적: 좁은 화면에서 좌표 한 줄에
       출처+이상값 배지가 함께 안 들어가 다음 줄로 밀려났다). */
    display: inline-block; margin-left: 3px; padding: 1px 5px;
    border: 1px solid #d1d5db; border-radius: 9px;
    background: #f3f4f6; color: #6b7280;
    font-size: 10px; font-weight: 500; vertical-align: middle;
}

/* 비밀번호 "보기" 토글. JS(attachPasswordToggles)가 input 을 이 wrap 으로 감싼다.
   ⚠️ 화면마다 버튼을 넣지 않고 JS 로 일괄 처리한다 -- 입력칸이 22곳이라 하나씩 넣으면
   빠뜨리는 곳이 생기고, 화면을 새로 만들 때도 또 잊는다. */
.pw-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
/* ⚠️ input 의 width/padding 은 여기서 건드리지 않는다. 관리자 화면은 input 에
   style="width:200px" 같은 인라인 스타일이 붙어 있는데, 인라인이 CSS 보다 우선이라
   여기서 100% 를 줘도 먹지 않고 버튼 위치만 어긋난다.
   대신 JS(attachPasswordToggles)가 기존 너비를 읽어 wrap 에 옮기고 input 을 100% 로 만든다. */
.pw-toggle-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    opacity: 0.5;
    /* ⚠️ SVG 아이콘이 들어간다. currentColor 를 쓰므로 여기 color 가 아이콘 색이 된다.
       이모지를 쓰던 시절에는 font-size 로 크기를 맞췄는데, 기기마다 모양이 달라
       SVG 로 바꿨다(사용자 지적: Android 에서 "눈 가린 원숭이"로 보임). */
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw-toggle-btn:hover { opacity: 1; }
.pw-toggle-btn svg { display: block; }

/* 토글형 버튼이 켜진 상태. "기지국 제외"처럼 현재 적용 중인 필터를 눈에 띄게 한다. */
.btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }