/* ══════════════════════════════════════════════════════════════
   어두운 바탕에서 글자와 아이콘이 반드시 보이게 한다.
   ══════════════════════════════════════════════════════════════

   왜 이렇게 강하게 거는가:

   처음에는 안 보이는 곳을 찾아 그 셀렉터만 고쳤다. 219곳을 고쳤는데도
   계속 새로운 곳이 나왔다. 이유가 세 가지였다.

     - 로그인해야 열리는 화면(만들기·내 도전·프로필)은 검사하려 하면
       로그인 화면으로 넘어가 버려서, 빈 문서를 검사하고 "이상 없음"이라
       판정하고 있었다. 정작 문제가 제일 많은 곳이 그 세 곳이었다.
     - 접혀 있거나(필터) 나중에 나타나는 것(빈 상태)은 검사 시점에
       화면에 없어서 그대로 지나갔다.
     - CSS 가 ::before 로 넣은 아이콘은 검사 대상에 잡히지도 않았다.

   즉 "찾아서 고치는" 방식은 못 본 곳을 반드시 남긴다. 그래서 뒤집는다.
   기본을 밝게 못 박고, 어두워야 하는 곳만 예외로 되돌린다.
   앞선 규칙들이 셀렉터 우선순위로 이겨 버리는 일이 반복됐으므로
   !important 로 못 박는다. 예외 규칙은 이 파일 아래쪽에 두어
   같은 조건에서 나중 것이 이기게 한다.

   이 파일은 모든 페이지에서 맨 마지막에 읽힌다. */

/* ── 1. 글자: 기본을 밝게 못 박는다 ───────────────────────────── */
body, body p, body span, body div, body li, body ul, body ol,
body td, body th, body dd, body dt, body a, body b, body i,
body h1, body h2, body h3, body h4, body h5, body h6,
body label, body legend, body strong, body em, body small,
body figcaption, body blockquote, body article, body section,
body aside, body summary, body time, body address, body pre, body code {
  color: var(--ar-text, #e9eef7) !important;
}

/* 설명·힌트처럼 덜 중요한 글은 한 단계 흐리게. 다만 어두운 바탕에서
   4.5:1 을 넘는 밝기(#a9b3c4)를 쓴다. 원래 쓰던 #6c757d 는 3:1 도
   안 되어서 "이메일 주소", "평균 평점" 같은 항목이 읽히지 않았다. */
body .muted, body .subtitle, body .hint, body .help-text,
body .description, body .desc, body .text-muted,
body .card-meta, body .meta, body .timestamp, body .form-hint,
body .stat-label, body .field-label, body .empty-state p,
body .page-subtitle, body .section-subtitle, body .hero-subtitle {
  color: #a9b3c4 !important;
}

/* ── 2. 아이콘 ────────────────────────────────────────────────

   두 종류가 각각 다른 이유로 보이지 않았다.

   (a) <svg>, <ion-icon>
       fill 을 정하지 않으면 SVG 기본값인 검정으로 그려진다.
       fill="none" 으로 선만 쓰는 아이콘은 건드리면 안 되므로
       fill 을 지정하지 않은 것만 글자색을 따르게 한다.

   (b) CSS 가 background-image 로 넣은 그림
       그림 파일의 색은 CSS 로 바꿀 수 없다. 밖에서 받아 온 검정
       아이콘이 그대로 어두운 바탕에 얹힌다. brightness(0) 으로
       완전히 검게 만든 뒤 invert(1) 로 뒤집으면 무엇이든 흰색이
       된다. 모양은 그대로 남는다. */
ion-icon, ion-icon * { color: inherit !important; }
svg:not([fill]):not(.keep-fill),
svg:not([fill]) path:not([fill]):not([stroke]) {
  fill: currentColor;
}

/* 흰색으로 뒤집는 대상은 icon-visible.js 가 표시해 준다.
   CSS 로는 "배경이 그림인 ::before" 만 골라낼 수 없어서, 한꺼번에 걸었더니
   같은 자리에 오는 이모지까지 흰 실루엣이 됐다. 그래서 실제로 그려진 값을
   읽어 그림인 것만 표시하고, 여기서는 표시된 것만 뒤집는다.
   (그라데이션과 로고는 표시에서 빠진다.) */
.cm-icon-before::before,
.cm-icon-after::after,
.header nav a::before, .header nav a::after,
.nav-icon, .icon-img {
  filter: brightness(0) invert(1);
}

/* ── 3. 입력칸 ────────────────────────────────────────────────
   바탕이 밝게 남아 있으면 밝은 글자가 묻힌다. 짝을 맞춰 어둡게 둔다. */
body input, body select, body textarea {
  background-color: var(--ar-bg-2, #131a2a) !important;
  color: var(--ar-text, #e9eef7) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
body input::placeholder, body textarea::placeholder {
  color: #a9b3c4 !important;
  opacity: 1;
}
/* 목록 항목은 운영체제가 그린다. 못 박지 않으면 흰 바탕이 나온다. */
body option { background-color: #1a2233 !important; color: #e9eef7 !important; }

/* ══════════════════════════════════════════════════════════════
   예외: 여기부터는 위의 "전부 밝게"를 되돌린다.
   같은 힘(!important)이면 나중에 적은 것이 이기므로 아래에 둔다.
   ══════════════════════════════════════════════════════════════ */

/* ── 4. 색이 채워진 버튼·배지는 흰 글자 ────────────────────────
   바탕이 진한 빨강(#d92b3a)이라 흰 글자가 4.8:1 로 읽힌다. */
.btn-primary, .btn-primary *,
button.primary, button.primary *,
.cta-button, .cta-button *,
.submit-btn, .submit-btn *,
.badge, .badge *, .notice-badge, .notice-badge *,
.chip.active, .chip.active *,
.filter-toggle, .filter-toggle *,
#mobileFilterToggle, #mobileFilterToggle *,
#mobileLoginBtn, #mobileLoginBtn *,
.login-btn, .login-btn *,
.fab, .fab *, .sns-item .sns-label {
  color: #ffffff !important;
}

/* ── 5. 바탕이 밝은 곳은 글자를 어둡게 ─────────────────────────
   구글 로그인 버튼처럼 흰 바탕을 쓰는 곳은 흰 글자면 안 보인다. */
.google-login-btn, .google-login-btn *,
.btn-white, .btn-white *,
.btn-light, .btn-light *,
.on-light, .on-light * {
  color: #16203a !important;
}

/* ── 6. 브랜드 색은 지킨다 ─────────────────────────────────────
   전부 흰색이면 서비스의 얼굴색이 사라진다. 큰 글자와 아이콘은
   기준이 3:1 이고 #ff4655 는 3.36:1 이라 통과한다. */
body .brand, body .brand *, body .logo-text,
body .accent, body .highlight-text, body .me, body h1 .me,
body .active > .nav-label, body .bottom-nav a.active,
body .bottom-nav a.active * {
  color: var(--ar-red, #ff4655) !important;
}
body .reward, body .reward-text, body .gold,
body .reward-badge, body .reward-badge * {
  color: var(--ar-gold, #ffc24b) !important;
}

/* 본문 속 링크는 밝은 빨강으로 구분한다.
   원래 쓰던 #e63946 은 어두운 바탕에서 3.8:1 이라 본문 기준(4.5)에
   못 미쳤다. #ff7b85 는 5.6:1 이다. */
body p > a, body li > a, body .text-link,
body .contact-card a {
  color: #ff7b85 !important;
}

/* 푸터는 링크가 촘촘히 모여 있다. 전부 빨강이면 눈이 쉴 곳이 없다.
   차분한 회색으로 두되 어두운 바탕에서 읽히는 밝기를 지킨다. */
body .footer-links a, body .site-footer a {
  color: #a9b3c4 !important;
}
body .footer-links a:hover, body .site-footer a:hover {
  color: #e9eef7 !important;
}
body p > a:hover, body li > a:hover, body .text-link:hover {
  color: #ff9aa2 !important;
}