/* ==========================================================================
   ARENA - 다크 대전 테마 (미리보기)

   짙은 남색 바탕 위에 네온 레드와 골드. 도전 카드가 e스포츠 대전 매치 카드처럼
   보이게 한다. 기존 CSS 를 지우지 않고 "마지막에" 얹어 덮는다 - 승인 전까지는
   /arena 미리보기에서만 쓰고, 확산할 때도 같은 파일을 각 페이지에 얹으면 된다.

   JS 가 만드는 마크업(.card 등)의 클래스는 그대로 두고 색·모양만 다시 입힌다.
   ========================================================================== */

:root {
  --ar-bg: #0f1420;
  --ar-bg-2: #131a2a;
  --ar-surface: #1a2233;
  --ar-surface-2: #212c42;
  --ar-line: rgba(255, 255, 255, 0.08);
  --ar-text: #e9eef7;
  --ar-muted: #8c97ac;
  --ar-red: #ff4655;
  --ar-red-deep: #d92b3a;
  --ar-gold: #ffc24b;
}

/* ── 바탕 ── */
body {
  background: var(--ar-bg);
  /* 경기장 조명 - 위에서 붉게 한 줄기, 오른쪽에 금빛 잔광 */
  background-image:
    radial-gradient(90% 55% at 50% -10%, rgba(255, 70, 85, 0.16) 0%, transparent 60%),
    radial-gradient(50% 40% at 95% 12%, rgba(255, 194, 75, 0.07) 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--ar-text);
}

::selection { background: rgba(255, 70, 85, 0.35); }

* { scrollbar-color: #2a3550 transparent; }
*::-webkit-scrollbar-thumb { background: #2a3550; background-clip: content-box; }

/* ── 머리 ── */
.header {
  background: rgba(15, 20, 32, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ar-line);
  box-shadow: none;
}

.logo .challenge { color: var(--ar-text); }
.logo .me { color: var(--ar-red); }

.header nav a {
  color: var(--ar-muted);
}

.header nav a:hover,
.header nav a.active {
  color: var(--ar-text);
}

.lang-toggle,
#loginBtn,
#logoutBtn {
  background: var(--ar-surface);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}

.notice-bell { color: var(--ar-text); }
.notice-bell:hover { background: rgba(255, 255, 255, 0.08); }
.notice-bell-badge { box-shadow: 0 0 0 2px var(--ar-bg); }

.hamburger-menu span { background: var(--ar-text); }

/* ── 모바일 서랍 ── */
.mobile-nav {
  background: var(--ar-bg-2);
  color: var(--ar-text);
}

.mobile-nav-menu a { color: var(--ar-text); border-color: var(--ar-line); }
.mobile-nav-menu a.active { color: var(--ar-red); }
.mobile-nav-title { color: var(--ar-muted); }

/* ── 고정 공지 ── */
.pinned-notice {
  background: var(--ar-surface);
  border-color: rgba(255, 70, 85, 0.35);
  color: var(--ar-text);
}

.pinned-notice-text span { color: var(--ar-muted); }
.pinned-notice-more { color: var(--ar-red); }

/* ── 히어로: 광고판이 아니라 전광판. 낮고 넓게 ── */
.hero {
  padding: 2.2rem 1.2rem 1.6rem;
  background: none;
}

.hero-title {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  color: var(--ar-text);
  text-shadow: 0 0 34px rgba(255, 70, 85, 0.35);
}

.hero-title-accent {
  background: linear-gradient(120deg, var(--ar-gold), #ff9e3d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ar-gold);
}

.hero-subtitle { color: var(--ar-muted); }

.hero-badge {
  background: rgba(255, 70, 85, 0.12);
  border: 1px solid rgba(255, 70, 85, 0.4);
  color: #ff8b94;
}

.hero-btn-primary {
  background: linear-gradient(135deg, var(--ar-red), var(--ar-red-deep));
  box-shadow: 0 6px 20px rgba(255, 70, 85, 0.35);
  border: none;
  color: #fff;
}

.hero-btn-secondary {
  background: var(--ar-surface);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}

/* 통계 칩: 전광판 숫자 */
.hero-stat {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.hero-stat strong,
.hero-stat b { color: var(--ar-gold); }

/* ── 필터 ── */
.filter-bar,
.main-filters,
.filter-options {
  background: transparent;
}

.search-box input,
.city-filter-input,
select,
#statusFilter,
#sortOrder,
#pageCountrySelect {
  background: var(--ar-surface);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}

select option { background: var(--ar-surface); color: var(--ar-text); }

.category-filter-btn,
.subcategory-filter-btn,
.chip-toggle-btn {
  background: var(--ar-surface);
  color: var(--ar-muted);
  border: 1px solid var(--ar-line);
}

.category-filter-btn.active,
.subcategory-filter-btn.active,
.chip-toggle-btn.active {
  background: linear-gradient(135deg, var(--ar-red), var(--ar-red-deep));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 70, 85, 0.35);
}

.refresh-btn,
#searchBtn,
.clear-filters-btn {
  background: var(--ar-surface);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}

/* ── 도전 카드 = 대전 매치 카드 ── */
.card {
  background: linear-gradient(160deg, var(--ar-surface) 0%, var(--ar-bg-2) 100%);
  border: 1px solid var(--ar-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--ar-text);
}

/* 위쪽 붉은 라인 - 원래 ::before 장식이 있던 자리를 네온으로 */
.card::before {
  background: linear-gradient(90deg, var(--ar-red), var(--ar-gold)) !important;
  opacity: 0.9;
}

.card:hover {
  border-color: rgba(255, 70, 85, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 70, 85, 0.18);
}

.card h3 { color: var(--ar-text); }
.card p { color: var(--ar-muted); }

.card .status-badge {
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-weight: 700;
}

.status-waiting { background: rgba(255, 194, 75, 0.15); color: var(--ar-gold); }
.status-playing { background: rgba(255, 70, 85, 0.18); color: #ff8b94; }
.status-expired { background: rgba(140, 151, 172, 0.15); color: var(--ar-muted); }

/* "도전 보기" - 카드의 대전 신청 버튼 */
.card a {
  background: linear-gradient(135deg, var(--ar-red), var(--ar-red-deep));
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 70, 85, 0.3);
}

.card a:hover { filter: brightness(1.1); }

.card-badges span,
.city-badge {
  background: var(--ar-surface-2);
  color: var(--ar-muted);
  border: 1px solid var(--ar-line);
}

/* ── 빈 화면·뼈대 ── */
.empty-state { color: var(--ar-muted); }
.empty-state-icon { background-color: rgba(255, 70, 85, 0.12); }

/* 검색어나 필터 때문에 결과가 0건일 때 나오는 "필터 초기화".
   만들기 버튼(주 동작)보다 한 단계 낮은 무게로 둔다. */
.empty-state-secondary {
  margin-top: 12px;
  padding: 10px 22px;
  border: 1px solid var(--ar-red);
  border-radius: 999px;
  background: transparent;
  color: var(--ar-red);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.empty-state-secondary:hover,
.empty-state-secondary:focus-visible {
  background: var(--ar-red);
  color: #fff;
}

.skeleton-card,
.skeleton {
  background: linear-gradient(100deg, #1a2233 40%, #222c42 50%, #1a2233 60%) !important;
  background-size: 200% 100% !important;
}

/* ── 발 ── */
.site-footer {
  background: var(--ar-bg-2);
  border-top: 1px solid var(--ar-line);
  color: var(--ar-muted);
}

.site-footer h3 { color: var(--ar-text); }
.site-footer a { color: var(--ar-muted); }
.site-footer a:hover { color: var(--ar-red); }
.footer-bottom { color: var(--ar-muted); }

/* ── 하단 탭바 - 앱과 같은 동선 (모바일 전용) ── */
.arena-tabbar {
  display: none;
}

@media (max-width: 768px) {
  .arena-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(19, 26, 42, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--ar-line);
    padding: 0.35rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }

  body { padding-bottom: 68px; }

  .arena-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.3rem 0;
    color: var(--ar-muted);
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 600;
  }

  .arena-tab svg { width: 22px; height: 22px; }

  .arena-tab.active { color: var(--ar-red); }

  /* 만들기 탭은 가운데 떠 있는 붉은 원 - 핵심 행동이라 제일 크게 */
  .arena-tab--create {
    margin-top: -18px;
  }

  .arena-tab--create .arena-tab-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ar-red), var(--ar-red-deep));
    box-shadow: 0 6px 18px rgba(255, 70, 85, 0.45);
    color: #fff;
  }

  /* 탭바가 있으니 큰 발은 모바일에서 줄인다 */
  .site-footer { padding-bottom: 1rem; }
}

/* ── 미리보기 리본 ── */
.arena-preview-ribbon {
  position: fixed;
  top: 72px;
  right: -34px;
  z-index: 950;
  transform: rotate(38deg);
  background: var(--ar-gold);
  color: #201500;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.25rem 2.6rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ==========================================================================
   전 페이지 확산 - 각 페이지 CSS 의 밝은 배경을 전수 조사해 덮는다.
   (index/my/detail/profile/create/login/notice + 하단 문서 페이지)
   ========================================================================== */

/* ── 공통 컨테이너·글자 ── */
.container,
.main-filters {
  background: transparent;
  box-shadow: none;
}

/* 지적받은 곳: 국가·도시 선택 언저리가 흰 판으로 남아 있었다 */
.country-select,
.country-selector,
.city-selector,
.city-filter-container,
.city-input-group,
.city-input,
.location-row {
  background: var(--ar-surface);
  color: var(--ar-text);
  border-color: var(--ar-line);
}

label,
.form-label,
.section-title,
.form-group label {
  color: var(--ar-text);
}

.form-help,
.form-hint,
small {
  color: var(--ar-muted);
}

input,
textarea {
  background: var(--ar-surface);
  color: var(--ar-text);
  border-color: var(--ar-line);
}

input::placeholder,
textarea::placeholder { color: #5d6880; }

/* ── 내 도전 ── */
.challenge-section {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
}

.challenge-section h2 { color: var(--ar-text); }

.challenge-item {
  background: linear-gradient(160deg, var(--ar-surface) 0%, var(--ar-bg-2) 100%);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.challenge-item h3 { color: var(--ar-text); }
.challenge-item p { color: var(--ar-muted); }

/* ── 도전 상세 ── */
.back-btn {
  background: var(--ar-surface);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}

.challenge-card,
.proof-section,
.chat-section {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.challenge-card h1,
.challenge-card h2,
.chat-section h3,
.proof-section h3 { color: var(--ar-text); }

.challenge-desc,
.meta-item,
.players-count {
  background: var(--ar-surface-2);
  color: var(--ar-text);
  border-color: var(--ar-line);
}

.meta-item .label,
.challenge-desc p { color: var(--ar-muted); }

.file-input-wrapper,
.file-input-wrapper:hover {
  background: var(--ar-surface-2);
  border-color: var(--ar-line);
  color: var(--ar-muted);
}

/* 채팅 - 어두운 경기장 대기실 */
.chat-box {
  background-color: var(--ar-bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}

.chat-bubble .text {
  background-color: var(--ar-surface-2);
  border-color: var(--ar-line);
  color: var(--ar-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat-bubble.me .text {
  background: linear-gradient(135deg, var(--ar-red), var(--ar-red-deep));
  color: #fff;
}

.chat-bubble .name { color: var(--ar-muted); }
.chat-bubble.me .name { color: #ff8b94; }
.chat-bubble .time { color: #5d6880; }

.chat-bubble.system .text {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ar-muted);
}

.chat-input input { background: var(--ar-surface); }

/* ── 프로필 ── */
.profile-card,
.settings-card,
.ratings-card {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.profile-card h2,
.profile-card h3,
.settings-card h3,
.ratings-card h3 { color: var(--ar-text); }

.stat-item,
.setting-item,
.rating-item,
.profile-bio {
  background: var(--ar-surface-2);
  border-color: var(--ar-line);
  color: var(--ar-text);
}

.rating-item p,
.profile-bio p,
.setting-item span { color: var(--ar-muted); }

.logout-btn {
  background: var(--ar-surface-2);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}

/* ── 도전 만들기 ── */
.preview-section,
.preview-card {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.preview-card h3 { color: var(--ar-text); }
.preview-card p { color: var(--ar-muted); }

/* ── 로그인 ── */
.login-modal-content {
  background: var(--ar-bg-2);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.login-modal-content h2 { color: var(--ar-text); }

/* 구글 버튼은 구글 브랜드 규정색(흰 바탕)을 지킨다 - 여기만 예외 */
.divider::before,
.divider::after { background: var(--ar-line); }
.divider span {
  background: var(--ar-bg-2);
  color: var(--ar-muted);
}

.email-form label { color: var(--ar-text); }

/* ── 알림 ── */
.notice-item {
  background: linear-gradient(160deg, var(--ar-surface) 0%, var(--ar-bg-2) 100%);
  border: 1px solid var(--ar-line);
}

.notice-item-title { color: var(--ar-text); }
.notice-item-body { color: var(--ar-muted); }
.notice-subtitle, .notice-empty { color: var(--ar-muted); }
.notice-tab { color: var(--ar-muted); }
.notice-tab.active { color: var(--ar-red); border-bottom-color: var(--ar-red); }
.notice-tabs { border-bottom-color: var(--ar-line); }

.notice-readall {
  background: var(--ar-surface);
  color: var(--ar-muted);
  border-color: var(--ar-line);
}
.notice-readall:hover { background: var(--ar-surface-2); }

/* 메달: 파스텔 바탕을 어두운 틴트로 */
.notice-medal--info        { background: rgba(37, 99, 235, 0.18); }
.notice-medal--update      { background: rgba(22, 163, 74, 0.18); }
.notice-medal--event       { background: rgba(219, 39, 119, 0.18); }
.notice-medal--warning     { background: rgba(217, 119, 6, 0.2); }
.notice-medal--maintenance { background: rgba(148, 163, 184, 0.15); color: #aab6cc; }
.notice-medal--winner      { background: rgba(255, 194, 75, 0.16); }
.notice-medal--expired     { background: rgba(255, 70, 85, 0.16); }
.notice-medal--reminder    { background: rgba(124, 58, 237, 0.2); }
.notice-medal--deleted     { background: rgba(148, 163, 184, 0.14); }

.notice-skel {
  background: linear-gradient(100deg, #1a2233 40%, #222c42 50%, #1a2233 60%);
  background-size: 200% 100%;
}

/* ── 문서 페이지(약관·개인정보·FAQ·소개·문의) ── */
.terms-container,
.faq-container,
.about-container,
.contact-container,
.content-container {
  color: var(--ar-text);
}

.terms-container h1, .terms-container h2, .terms-container h3,
.faq-container h1, .faq-container h2,
.about-container h1, .about-container h2, .about-container h3,
.contact-container h1, .contact-container h2 {
  color: var(--ar-text);
}

.terms-container p, .terms-container li,
.about-container p, .contact-container p {
  color: var(--ar-muted);
}

.faq-item,
.info-card,
.feature-card,
.contact-card {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

.faq-question { color: var(--ar-text); }
.faq-answer { color: var(--ar-muted); }

/* ── 발: 앱 다운로드 링크·사업자 정보 ── */
.footer-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ar-red), var(--ar-red-deep));
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 70, 85, 0.3);
}

.footer-app-link:hover { filter: brightness(1.1); color: #fff; }

.footer-contact-info { color: var(--ar-muted); font-size: 0.8rem; line-height: 1.8; }
.footer-contact-info a { color: inherit; }

/* ── 도전자 모으기 유도 ─────────────────────────────────────────
   이 서비스는 방장이 보상을 주는 구조라, 도전자가 오지 않으면 도전
   자체가 성립하지 않는다. 그래서 공유는 부탁이 아니라 방장이 원하는
   결과다. 그 결과를 버튼에 적어 두면 누를 이유가 생긴다. */

/* 만든 직후 한 번 뜨는 권유 */
.created-prompt {
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid var(--ar-red);
  border-radius: 14px;
  background: rgba(255, 70, 85, 0.08);
  text-align: center;
}
.created-prompt .cp-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ar-text);
}
.created-prompt .cp-body {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--ar-muted);
}
.created-prompt .cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.created-prompt .cp-primary,
.created-prompt .cp-later {
  padding: 10px 22px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
}
.created-prompt .cp-primary {
  border: none;
  background: var(--ar-red);
  color: #fff;
}
.created-prompt .cp-primary:hover { filter: brightness(1.1); }
.created-prompt .cp-later {
  border: 1px solid var(--ar-line, rgba(255, 255, 255, 0.2));
  background: transparent;
  color: var(--ar-muted);
}
.created-prompt .cp-later:hover { background: rgba(255, 255, 255, 0.06); }

/* 참가자 목록이 방장 혼자일 때 그 자리에 뜨는 안내 */
.no-challengers {
  margin: 8px 0 4px;
  padding: 18px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.no-challengers .nc-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ar-text);
}
.no-challengers .nc-body {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--ar-muted);
}
.no-challengers .nc-button {
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: var(--ar-red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.no-challengers .nc-button:hover { filter: brightness(1.1); }
.no-challengers .nc-views {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ar-muted);
}

/* ── SNS 공유 시트 ──────────────────────────────────────────────
   플랫폼마다 되는 정도가 다르지만(글까지 채워지는 곳, 주소만 넘어가는 곳,
   아무것도 미리 못 채우는 곳), 사용자에게는 그 차이를 설명하지 않는다.
   누르면 알아서 되는 것처럼 보이는 게 목적이다. */
.sns-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.sns-sheet.on { opacity: 1; }
.sns-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.sns-panel {
  position: relative;
  width: min(560px, 100%);
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--ar-card, #171c2a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(16px);
  transition: transform 0.22s ease;
}
.sns-sheet.on .sns-panel { transform: translateY(0); }
@media (min-width: 640px) {
  .sns-sheet { align-items: center; }
  .sns-panel { border-radius: 20px; }
}
.sns-panel h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--ar-text, #fff);
  text-align: center;
}
.sns-sub {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: var(--ar-muted, #9aa3b2);
  text-align: center;
}
.sns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 480px) {
  .sns-grid { grid-template-columns: repeat(6, 1fr); }
}
.sns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ar-text, #fff);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.sns-item:hover { background: rgba(255, 255, 255, 0.08); }
.sns-item:active { transform: scale(0.96); }
.sns-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sns-color) center / 22px 22px no-repeat;
  flex: none;
}
.sns-label { font-size: 0.74rem; line-height: 1.2; text-align: center; }

/* 아이콘은 각 서비스의 실제 로고 모양을 단색으로 그린 것이다.
   외부에서 불러오지 않으므로 네트워크가 느려도 바로 뜬다. */
.sns-x .sns-ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.9 2H22l-7.1 8.1L23 22h-6.6l-5.2-6.8L5.3 22H2.2l7.6-8.7L1.5 2h6.7l4.7 6.2zm-1.1 18h1.7L7.3 3.7H5.4z'/%3E%3C/svg%3E");
}
.sns-threads .sns-ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.5 11.3c-.1 0-.2-.1-.3-.1-.2-3.2-1.9-5-4.8-5-2.2 0-3.9 1-4.7 2.7l1.7 1.1c.6-1.2 1.6-1.8 3-1.8 1.6 0 2.7.9 3 2.5-.7-.1-1.4-.2-2.1-.2-2.9 0-4.8 1.5-4.8 3.7 0 2 1.6 3.4 3.7 3.4 1.9 0 3.2-1 3.9-2.5.5 1 .8 2 .9 3.1-1.3 1.1-3 1.7-5 1.7-4.3 0-7.2-2.9-7.2-7.9S5.7 4 10 4c3.6 0 6.1 2 7 5.3l1.9-.5C17.7 4.6 14.6 2 10 2 4.6 2 1 5.9 1 12s3.6 10 9 10c2.6 0 4.8-.8 6.4-2.3 1.5-1.4 2.3-3.3 2.3-5.5 0-1.4-.4-2.2-1.2-2.9zm-4.8 4.4c-1 0-1.8-.6-1.8-1.5 0-1 1-1.8 2.7-1.8.6 0 1.2.1 1.8.2-.2 2-1.3 3.1-2.7 3.1z'/%3E%3C/svg%3E");
}
.sns-facebook .sns-ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.13-2.45-.13-2.4 0-4.05 1.47-4.05 4.18V9.9H7.5V13h2.7v8z'/%3E%3C/svg%3E");
}
.sns-instagram .sns-ico {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E"),
    linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  background-position: center, center;
  background-size: 22px 22px, cover;
  background-repeat: no-repeat, no-repeat;
}
.sns-tiktok .sns-ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.6 5.8c-1-.7-1.6-1.8-1.8-3H12v11.4c0 1.3-1.1 2.4-2.4 2.4s-2.4-1.1-2.4-2.4 1.1-2.4 2.4-2.4c.3 0 .5 0 .7.1V9.1c-.2 0-.5-.1-.7-.1C6.5 9 4.3 11.2 4.3 14s2.2 5 5.3 5 5.3-2.2 5.3-5V8.9c1 .7 2.3 1.1 3.6 1.1V7.2c-.7 0-1.4-.2-1.9-.5z'/%3E%3C/svg%3E");
}
.sns-link .sns-ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5'/%3E%3C/svg%3E");
}
.sns-close {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: var(--ar-muted, #9aa3b2);
  font: inherit;
  cursor: pointer;
}
.sns-close:hover { background: rgba(255, 255, 255, 0.06); }

.sns-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 10000;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(20, 24, 34, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.sns-toast.on { opacity: 1; transform: translate(-50%, 0); }


/* ══════════════════════════════════════════════════════════════
   보이지 않던 것들을 고친다.
   페이지마다 색을 실측해 명암비를 계산한 결과 219건이 기준(WCAG AA:
   보통 글자 4.5:1, 큰 글자·아이콘 3:1) 아래였다. 원인별로 정리한다.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 헤더 메뉴 아이콘 ─────────────────────────────────────────
   외부 CDN 의 SVG 를 background-image 로 넣고 있었다. 그렇게 넣은
   그림은 색을 바꿀 수 없어서, ionicons 원본의 검정이 그대로 어두운
   배경 위에 얹혔다. 거의 보이지 않는다.

   mask 로 바꾸면 그림은 모양만 쓰고 색은 background-color 가 정한다.
   currentColor 를 주면 글자색을 따라가므로, 평소엔 흐린 회색이고
   마우스를 올리거나 현재 페이지일 때는 빨강으로 같이 바뀐다.
   외부 요청도 사라져서 CDN 이 막혀도 아이콘이 뜬다. */
.header nav a::before {
  background-image: none !important;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.header nav a[href="index.html"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.header nav a[href="create.html"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}
.header nav a[href="my.html"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.header nav a[href="profile.html"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6h.09A1.65 1.65 0 0 0 10 3.09V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6h.09A1.65 1.65 0 0 0 10 3.09V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
/* 알림에는 아이콘이 없었다. 나머지와 나란히 보이도록 종을 준다. */
.header nav a[href="notice.html"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}

/* ── 2. 흰 배경으로 남아 있던 컨테이너들 ───────────────────────
   여기가 219건 중 211건의 원인이다. 다크 테마가 글자색만 바꾸고
   배경은 원래 CSS 의 흰색을 그대로 두어서, 흰 바탕에 흰 글자가 됐다
   (1.16:1 - 사실상 보이지 않는다). */
.value-card,
.feature-item,
.how-it-works,
.step-item,
.categories-section,
.contact-form-section,
.terms-content,
.privacy-container,
.mobile-auth-section,
.info-card,
.faq-item,
.about-section,
.service-section {
  background: var(--ar-surface) !important;
  border: 1px solid var(--ar-line);
  color: var(--ar-text);
}

/* 강조 상자는 노란 바탕이었다. 어두운 금색으로 바꾸고 글자를 밝게. */
.highlight-box,
.notice-box,
.warning-box {
  background: rgba(255, 194, 75, 0.12) !important;
  border-left: 4px solid var(--ar-gold);
  color: var(--ar-text);
}

/* 그 안의 글자들도 같이 밝게. 컨테이너만 어둡게 하면 이번엔
   어두운 글자가 어두운 배경에 묻힌다. */
.value-card *, .feature-item *, .how-it-works *, .step-item *,
.categories-section *, .contact-form-section *, .terms-content *,
.privacy-container *, .mobile-auth-section *, .info-card *,
.faq-item *, .about-section *, .service-section *,
.highlight-box *, .notice-box *, .warning-box * {
  color: inherit;
}
.value-card h3, .feature-item h3, .step-item h3, .terms-content h2,
.terms-content h3, .privacy-container h2, .privacy-container h3,
.contact-form-section h2, .contact-form-section h3,
.about-section h2, .service-section h2, .categories-section h2 {
  color: var(--ar-text) !important;
}
.terms-content p, .terms-content li, .privacy-container p,
.privacy-container li, .value-card p, .feature-item p, .step-item p {
  color: var(--ar-muted) !important;
}

/* ── 3. 다크 배경 위에 남은 밝은 테마 시절의 어두운 글자색 ──────
   #1d3557 은 밝은 테마의 제목색이다. 어두운 배경 위에서는 1.29:1 로
   거의 읽히지 않는다. 메인 화면의 "국가 / 도시 / 카테고리" 라벨이
   이 색이라, 필터를 펼쳐도 무슨 항목인지 알아볼 수 없었다. */
label,
.filter-label,
.form-label,
.section-title,
.filter-group > label,
.advanced-filter label {
  color: var(--ar-text);
}
.filter-group label,
#advancedFilterPanel label,
.filter-panel label {
  color: var(--ar-text) !important;
}

/* ── 4. 입력칸: 흰 바탕에 테두리도 거의 안 보였다 ──────────────── */
.contact-form-section input,
.contact-form-section select,
.contact-form-section textarea,
input[type="text"], input[type="email"], input[type="date"],
input[type="number"], input[type="password"], select, textarea {
  background: var(--ar-bg-2);
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
}
input::placeholder, textarea::placeholder { color: var(--ar-muted); }
/* 목록 항목은 브라우저가 운영체제 색으로 그린다. 밝게 두면 흰 글자가
   흰 바탕에 찍히므로 어둡게 못 박는다. */
select option { background: var(--ar-surface); color: var(--ar-text); }

/* ── 5. 언어 선택이 파란 알약이라 테마와 겉돌았다 ──────────────── */
.lang-select,
#desktopLangSelect,
#mobileLangSelect {
  background: var(--ar-surface-2) !important;
  color: var(--ar-text) !important;
  border: 1px solid var(--ar-line);
}

/* ── 6. 모바일 메뉴 아래쪽 로그인 영역이 흰 띠로 남아 있었다 ──── */
.mobile-nav-footer,
.mobile-nav-bottom,
.mobile-nav .auth-box {
  background: var(--ar-bg-2) !important;
  border-top: 1px solid var(--ar-line);
}

/* ── 7. 1차 수정에서 놓친 컨테이너들 ────────────────────────────
   실측을 다시 돌려 남은 것들의 부모를 찾아 낸 목록이다.
   제목은 #1d3557, 본문은 #6c757d / #495057 로 밝은 테마 시절 색이
   그대로 남아 있어 어두운 배경에서 1.29:1 까지 떨어졌다. */
.feature-card,
.benefit-item,
.feature-content,
.contact-card,
.final-cta,
.stat-card,
.team-card {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
}
.feature-card h2, .feature-card h3, .feature-card h4,
.benefit-item h2, .benefit-item h3, .benefit-item h4,
.feature-content h2, .feature-content h3, .feature-content h4,
.contact-card h2, .contact-card h3, .contact-card h4,
.final-cta h2, .final-cta h3,
.stat-card h3, .team-card h3 {
  color: var(--ar-text) !important;
}
.feature-card p, .benefit-item p, .feature-content p,
.contact-card p, .final-cta p, .categories-section p,
.stat-card p, .team-card p, .empty-state p {
  color: var(--ar-muted) !important;
}

/* ── 8. 입력칸 테두리가 너무 흐렸다 ─────────────────────────────
   rgba(255,255,255,0.08) 은 1.25:1 이라 칸의 경계가 사실상 안 보인다.
   어디를 눌러야 입력이 되는지 알 수 없다. 진하게 올린다. */
input[type="text"], input[type="email"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"],
select, textarea, .lang-select {
  border-color: rgba(255, 255, 255, 0.22);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ar-red);
  outline: none;
}

/* ── 9. 빨간 바탕 위의 흰 글자가 4.17:1 로 기준(4.5)에 못 미쳤다 ──
   빨강을 한 단계 낮춰 글자가 또렷해지게 한다. 버튼은 크게 쓰이므로
   색이 조금 진해져도 브랜드 느낌은 유지된다. */
.btn-primary,
button.primary,
.cta-button,
.submit-btn {
  background-color: var(--ar-red-deep);
}

/* 어두운 바탕 위의 빨간 링크가 3.82:1 이었다. 링크는 본문 글자라
   4.5:1 을 넘겨야 한다. 조금 밝은 빨강을 쓴다. */
a.text-link,
.contact-card a,
.social-links a,
.footer-links a[href^="mailto"] {
  color: #ff7b85;
}

/* ── 10. 마지막 정리 ────────────────────────────────────────────
   실측을 세 번 돌려 남은 것들이다. */

/* 테두리 규칙이 더 구체적인 규칙에 밀려 적용되지 않았다.
   경계가 1.28:1 이면 어디를 눌러야 하는지 알 수 없다. */
input[type="text"], input[type="email"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"],
select, textarea, .lang-select,
#statusFilter, #sortOrder, #subject, #message,
#desktopLangSelect, #mobileLangSelect {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ar-red) !important;
}

/* 빨간 바탕 위의 글자.
   #e63946 위의 흰 글자는 4.17:1 로 기준(4.5)에 못 미친다. 게다가 글자에
   순백이 아닌 #e9eef7 을 쓰던 곳은 3.58:1 까지 떨어졌다.
   바탕을 #d92b3a 로 한 단계 낮추고 글자를 순백으로 하면 4.82:1 이 된다.

   큰 제목이나 아이콘에 쓰는 #ff4655 는 그대로 둔다. 큰 글자 기준은
   3:1 이고 3.36:1 이라 통과하며, 그게 이 서비스의 얼굴색이다. */
.filter-toggle, .filter-options-toggle,
.login-btn, .auth-box button, .submit-btn,
.btn-primary, button.primary, .cta-button,
.notice-badge, .badge {
  background-color: #d92b3a !important;
  color: #ffffff !important;
}

/* 부제로 쓰이던 흐린 색들이 4.5:1 을 넘지 못했다.
   본문 글자는 크지 않으므로 기준을 채워야 읽힌다. */
.page-subtitle, .section-subtitle, .hero-subtitle,
.about-hero p, .faq-hero p, .service-hero p {
  color: #aab4c5 !important;
}

/* 강조 상자 안의 글자.
   상자 바탕이 반투명 금색이라 실제로는 회색(53,53,54) 위에 얹힌다.
   흐린 색을 그대로 두면 4.15:1 이라 조금 모자란다. */
.highlight-box, .highlight-box *,
.notice-box, .notice-box * {
  color: #e9eef7 !important;
}

/* ── 11. 마지막 5건 ─────────────────────────────────────────────
   셋 다 앞선 규칙의 셀렉터에 걸리지 않은 요소들이다.
   실제 클래스명을 찾아 못 박는다. */

/* 모바일 메뉴의 로그인 버튼: #e63946 위에 #e9eef7 이라 3.58:1 이었다. */
#mobileLoginBtn,
.mobile-login-btn {
  background-color: #d92b3a !important;
  color: #ffffff !important;
}

/* "필터 옵션" 접기 버튼: 부모가 빨강이라 흰 글자가 4.17:1 이었다. */
#mobileFilterToggle,
.mobile-filter-toggle-btn,
.mobile-filter-toggle {
  background-color: #d92b3a !important;
}
#mobileFilterToggle, #mobileFilterToggle *,
.mobile-filter-toggle-btn, .mobile-filter-toggle-btn * {
  color: #ffffff !important;
}

/* FAQ 머리말: 흐린 회색이 3.92:1. */
.faq-header p,
.faq-container > .faq-header p {
  color: #aab4c5 !important;
}

/* 약관의 강조 상자 안 본문: 반투명 금색 위라 4.15:1 이었다. */
.terms-content .highlight-box p,
.terms-content .highlight-box li,
.highlight-box p, .highlight-box li {
  color: #e9eef7 !important;
}

/* ── 12. 접혀 있던 필터 안의 라벨 ───────────────────────────────
   "국가 / 도시 / 카테고리" 가 #1d3557(밝은 테마의 제목색)이라
   어두운 배경 위에서 1.29:1 이었다. 무슨 항목인지 읽히지 않는다.

   앞에서 label 을 통째로 밝게 했는데도 안 바뀐 이유는, index.css 의
   `.country-selector label` 쪽이 셀렉터가 더 구체적이라 이겼기 때문이다.
   같은 셀렉터를 그대로 적어 덮는다. */
.country-selector label,
.city-selector label,
.category-row label,
.main-filters label,
#mainFilters label {
  color: var(--ar-text) !important;
}