/* 2026 고도화 접근성(ACC) — 협의된 대상 화면에서만 로드 (로그인, 홈, 운동습관, 설문·추천, 강좌)
   기존 디자인 유지 원칙: 마우스 사용에는 영향 없음, 키보드 탐색 시에만 포커스 표시 강화 (ACC-03) */

:focus-visible {
  outline: 3px solid #1a56c4;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 부트스트랩 기본 box-shadow 포커스와 중복 방지 — 키보드 외 포커스는 기존 그대로 */
:focus:not(:focus-visible) {
  outline: none;
}

/* 어두운 배경 위 요소(네이비 버튼 등)에서도 보이도록 흰 외곽 이중선 */
.btn-primary:focus-visible,
.badge-primary:focus-visible {
  outline: 3px solid #1a56c4;
  box-shadow: 0 0 0 2px #fff;
}

/* 기존 화면별 outline:none보다 우선해 모든 실제 버튼의 키보드 포커스를 표시 */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #1a56c4 !important;
  outline-offset: 2px !important;
}

/* 일반 모드에서도 WCAG AA 텍스트 대비 확보.
   아래 일반 모드 규칙은 전부 html:not(.a11yHighContrast)로 한정 — !important + 높은 특이성이라 그대로 두면
   고대비의 흰 글자 규칙을 이겨 검정 배경에 진회색 글자가 남음(09-07 강좌 목록 강사명 안 보임 건) */
html:not(.a11yHighContrast) .gnb .groupHeading,
html:not(.a11yHighContrast) footer a,
html:not(.a11yHighContrast) footer p,
html:not(.a11yHighContrast) .resultCard .eyebrow,
html:not(.a11yHighContrast) .resultCard .doneAt,
html:not(.a11yHighContrast) .classSection .sectionHead > span,
html:not(.a11yHighContrast) .classCard .info .coach {
  color: #595959 !important;
}

/* 짙은 네이비 배경의 상단 유틸 링크는 밝은 글자로 별도 대비 확보 */
html:not(.a11yHighContrast) .topUtilLink a { color: #f2f5fb !important; }
html:not(.a11yHighContrast) a.goAdmin { color: #0056b3 !important; }

/* 스포츠강좌 목록 카드·이용안내의 작은 글자도 일반 모드 AA 대비 확보 */
html:not(.a11yHighContrast) .kProgram .info .coach .author,
html:not(.a11yHighContrast) .kProgram .info .price del,
html:not(.a11yHighContrast) .kProgram .info .meta,
html:not(.a11yHighContrast) .sportsVoucherList .sportsVoucherAnc li,
html:not(.a11yHighContrast) .seriesArea .desc {
  color: #595959 !important;
}
html:not(.a11yHighContrast) .kProgram .info .price b { color: #b00020 !important; }
html:not(.a11yHighContrast) .kProgram .info .meta span.remaining { color: #5747b7 !important; }

/* 강좌 상세 일반 모드 — 기존 톤을 유지하며 작은 회색 텍스트를 AA 대비로 보정 */
html:not(.a11yHighContrast) #wrap-class-detail .programHeader .discoutedPrice .orgPrice,
html:not(.a11yHighContrast) #wrap-class-detail .fixedBottomBar del.originPrice,
html:not(.a11yHighContrast) #wrap-class-detail .programSpec dt,
html:not(.a11yHighContrast) #wrap-class-detail .programSpec dd,
html:not(.a11yHighContrast) #wrap-class-detail .programSpec dt .spBox,
html:not(.a11yHighContrast) #wrap-class-detail .programSpec dt .spBox p,
html:not(.a11yHighContrast) #wrap-class-detail h4.evade,
html:not(.a11yHighContrast) #wrap-class-detail h4.faceAlt,
html:not(.a11yHighContrast) #wrap-class-detail .provideItem small,
html:not(.a11yHighContrast) #wrap-class-detail .importantAnc h6 {
  color: #555 !important;
}

html:not(.a11yHighContrast) #wrap-class-detail .programHeader .remaining .remain {
  color: #5949ad !important;
}

html:not(.a11yHighContrast) #wrap-class-detail .fixedBottomBar .remaining,
html:not(.a11yHighContrast) #wrap-class-detail .fixedBottomBar .remaining span,
html:not(.a11yHighContrast) #wrap-class-detail .notYetCurri .desc,
html:not(.a11yHighContrast) #wrap-class-detail .aboutCoach > span {
  color: #555 !important;
}

/* 제공 카드는 옅은 유색 배경을 사용하므로 본문보다 한 단계 더 짙게 표시한다. */
html:not(.a11yHighContrast) #wrap-class-detail .provideItem small,
html:not(.a11yHighContrast) #wrap-class-detail .provideItem small span {
  color: #4f4f4f !important;
}

html:not(.a11yHighContrast) #wrap-class-detail .programHeader .btnNotReady,
html:not(.a11yHighContrast) #wrap-class-detail .fixedBottomBar .btnNotReady {
  color: #555 !important;
}

.badge-success {
  background-color: #176b35 !important;
  color: #fff !important;
}

/* 절대 배치된 로고 이미지 때문에 0x0이 되던 링크의 포커스 영역 확보 */
.gnb h1 > a {
  display: inline-block;
  width: 120px;
  height: 70px;
}

/* 링크에서 실제 버튼으로 교체한 강좌 목록 플로팅 CTA의 기존 시각 형태 유지 */
.btnFloating {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ── 고대비 모드 (ACC-08~09) — WCAG 명도 대비 기준(확정: 별도 시안 없이 표준 기준), 레이아웃 변경 없음 ── */

/* 토글 버튼 (a11y.js가 삽입) — 플로팅 채팅 버튼과 겹치지 않게 좌하단 */
.a11yContrastToggle {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 1050;
  background: #fff;
  color: #222;
  border: 2px solid #444;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.a11yContrastToggle[aria-pressed="true"] {
  background: #000;
  color: #ffff00;
  border-color: #000;
}

/* 반전형 고대비: 검정 배경 + 흰 글자 + 노랑 포인트 (전환이 즉시 식별되는 표준 고대비 방식).
   이미지·사진은 원본 유지, 레이아웃 변경 없음 */
/* .a11yKeep(매월 교체되는 마케팅 팝업 등)은 반전에서 제외 — 원 디자인 유지 */
/* 클래스는 <html>에 먼저 붙고(a11y_head.njk 인라인) a11y.js가 body에도 미러링. 선택자는 html 기준 */
html.a11yHighContrast, html.a11yHighContrast body { background: #000 !important; color: #fff !important; }
html.a11yHighContrast :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, span, div, th, td, b, strong, em, i, sup):not(.a11yKeep, .a11yKeep *) { color: #fff !important; }
html.a11yHighContrast :where(.text-muted, small, .small):not(.a11yKeep *) { color: #e0e0e0 !important; }
html.a11yHighContrast .text-danger:not(.a11yKeep *) { color: #ff8f8f !important; }
html.a11yHighContrast .text-primary:not(.a11yKeep *) { color: #9dc1ff !important; }

/* 링크 — 노랑 + 밑줄 (버튼형 링크 포함, 배경이 검정으로 반전되므로 안전) */
html.a11yHighContrast :where(a, a span, a b):not(.a11yKeep, .a11yKeep *) { color: #ffd400 !important; }
html.a11yHighContrast a:not(.btn):not([role="button"]):not(.badge):not(.a11yKeep):not(.a11yKeep *) { text-decoration: underline !important; }

/* 밝은 배경 컨테이너 전체 반전 — 클래스를 하나씩 열거하면 누락이 생겨(09-04 디자이너 피드백: 강좌 상세의
   프로그램 제공 타일·남은자리 배지·무료체험 배너가 흰 배경+흰 글자로 깨짐) 블록·인라인 컨테이너의 배경색을 검정으로 통일.
   배경 이미지(썸네일 등)는 유지되고, 버튼 내부·배지·진행 바처럼 색이 의미를 갖는 요소는 제외 후 아래 개별 규칙으로 처리 */
html.a11yHighContrast :where(div, section, article, aside, header, nav, main, footer, form, fieldset, ul, ol, li, dl, dt, dd,
  table, thead, tbody, tr, th, td, label, p, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, del)
  :not(.a11yKeep, .a11yKeep *, .btn *, button *, [role="button"] *, a *, .btnKakao, .btnKakao *, .kakaoConcierge, .kakaoConcierge *,
    [class*="badge"], .progress, .progress-bar, .a11ySkipNav) {
  background-color: #000 !important;
  border-color: #fff !important;
}
html.a11yHighContrast del:not(.a11yKeep *) { color: #cfcfcf !important; }

/* 로고 이미지(네이비 SVG)는 검정 배경에서 사라지므로 필터로 흰색 처리 (09-04 디자이너 제안) */
html.a11yHighContrast .gnb img[src*="logo"],
html.a11yHighContrast img.logo,
html.a11yHighContrast img.logoSm { filter: invert(1) brightness(200%); background: none !important; }

/* 강좌 상세 — 프로그램 제공 타일: 연회색 배경이 검정이 되며 윤곽이 사라져 흰 테두리로 복구, 짙은 색 아이콘은 필터로 흰색 처리 */
html.a11yHighContrast .provideItem { border: 1px solid #fff !important; }
html.a11yHighContrast .provideItem > img:not(.profilePic) { filter: invert(1) brightness(200%); background: none !important; }

/* 강좌 목록(/svoucher·/dvoucher) — 스포츠/장애인 탭 전환: 선택 표시가 흰 알약 배경(span i)뿐인데 반전 시 사라지고,
   그 위를 덮는 링크(z-index 100)도 검정이라 알약에 테두리를 줘도 안 보임 → 선택된 링크 자체에 노랑 테두리 */
html.a11yHighContrast .segControlBtns { border: 1px solid #fff !important; }
html.a11yHighContrast .segControlBtns a.selected { border: 2px solid #ffd400 !important; border-radius: 4px; }

/* 강좌 상세 — 남은자리·마감 표시는 색으로만 구분되던 요소라 노랑 테두리로 강조 유지 */
html.a11yHighContrast .remaining .remain { color: #ffd400 !important; border: 1px solid #ffd400 !important; }
html.a11yHighContrast .remaining .alert { color: #ff8f8f !important; border: 1px solid #ff8f8f !important; }

/* 흰 배경 컨테이너 반전 — 부트스트랩 + 이번 고도화 커스텀 클래스 */
html.a11yHighContrast .card,
html.a11yHighContrast .card-body,
html.a11yHighContrast .list-group-item,
html.a11yHighContrast .modal-content,
html.a11yHighContrast .alert,
html.a11yHighContrast .gnb,
html.a11yHighContrast footer,
html.a11yHighContrast .loginBox,
html.a11yHighContrast .resultCard,
html.a11yHighContrast .resultCard .summaryBox,
html.a11yHighContrast .classSection .fallbackNote,
html.a11yHighContrast .classCard,
html.a11yHighContrast .habitTile,
html.a11yHighContrast .sportsVoucherHead,
html.a11yHighContrast .seriesArea,
html.a11yHighContrast .sportsVoucherAnc,
html.a11yHighContrast .segControlBtns,
html.a11yHighContrast .kProgram .info,
html.a11yHighContrast section {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.a11yHighContrast .card,
html.a11yHighContrast .list-group-item,
html.a11yHighContrast .modal-content,
html.a11yHighContrast .resultCard,
html.a11yHighContrast .classCard { border: 1px solid #fff !important; }
html.a11yHighContrast .kProgram.box { background: #000 !important; border: 1px solid #fff !important; }
html.a11yHighContrast .segControlBtns > span > i { background: #000 !important; border: 1px solid #fff; }
html.a11yHighContrast .resultCard .axisChips span { background: #000 !important; color: #ffd400 !important; border: 1px solid #ffd400; }
html.a11yHighContrast .classCard .info .cta { background: #ffd400 !important; color: #000 !important; }

/* 노랑 배경 버튼(카카오 로그인·상담)은 어두운 글자 유지 — 링크 노랑 규칙과 충돌 방지 */
html.a11yHighContrast .btnKakao,
html.a11yHighContrast .btnKakao span,
html.a11yHighContrast .kakaoConcierge,
html.a11yHighContrast .kakaoConcierge span { color: #3c1e1e !important; }
html.a11yHighContrast .btnKakao,
html.a11yHighContrast .kakaoConcierge { background: #fee500 !important; }

/* 버튼 — 주요 동작은 노랑, 보조 동작은 흰 아웃라인 */
html.a11yHighContrast .btn { border-width: 2px !important; }
html.a11yHighContrast .btn-primary,
html.a11yHighContrast .btn-warning {
  background: #ffd400 !important;
  border-color: #ffd400 !important;
  color: #000 !important;
}
html.a11yHighContrast .btn-primary span { color: #000 !important; }
html.a11yHighContrast [class*="btn-outline-"],
html.a11yHighContrast .btn-light,
html.a11yHighContrast .btn-secondary,
html.a11yHighContrast .close {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  opacity: 1 !important;
}
html.a11yHighContrast .btn.active,
html.a11yHighContrast .btn[aria-pressed="true"] {
  background: #ffd400 !important;
  color: #000 !important;
  border-color: #ffd400 !important;
}
html.a11yHighContrast .btn.active span,
html.a11yHighContrast .btn[aria-pressed="true"] span { color: #000 !important; }

/* 입력 요소 */
html.a11yHighContrast .form-control,
html.a11yHighContrast select,
html.a11yHighContrast input,
html.a11yHighContrast textarea {
  border: 2px solid #fff !important;
  color: #fff !important;
  background: #000 !important;
}
html.a11yHighContrast .form-control::placeholder { color: #cfcfcf !important; }

/* 상태 표시(배지)·진행 바 — 검정 배경 위에서 구분 유지 */
/* 강좌 카드 썸네일 위 태그(스포츠강좌이용권·단계별 수강 등) — 링크 내부라 배경 반전 제외 대상. 단계별 수강 태그는 흰 배경+노랑 글자가 되어
   검정 배경·흰 글자·흰 테두리로 통일 (09-08) */
/* 썸네일 위 태그는 강좌 목록·시리즈(.kProgram), 강좌 상세 갤러리(.previewImgsHead), 관련 강좌, 코칭룸 수강 카드(.myProgram)에 같은 .tags > .tag 구조로
   반복되고 전부 링크 내부라 배경 반전 제외 → .tags .tag 전체를 한 규칙으로 통일 (무료체험 보라·장애인 청록 배경에 노랑 글자도 2.9~3.5:1로 미달이었음) */
html.a11yHighContrast .tags .tag,
html.a11yHighContrast .tags .tag *,
html.a11yHighContrast .kProgram .thumbHolder .tag,
html.a11yHighContrast .kProgram .thumbHolder .tag * { background: #000 !important; color: #fff !important; }
html.a11yHighContrast .tags .tag,
html.a11yHighContrast .kProgram .thumbHolder .tag { border: 1px solid #fff !important; }

/* 코칭룸 진입 타일 아이콘 — 연녹·연파랑 배경이 검정 카드 위에 밝은 덩어리로 남아 검정+흰 테두리로 */
html.a11yHighContrast .habitTile .ico { background: #000 !important; border: 1px solid #fff !important; }

/* 강좌 목록 카드의 유형 배지 — 링크 내부라 배경 반전 제외 대상이어서 흰 배경+연회색 글자로 깨짐 */
html.a11yHighContrast .kProgram .info .category { background: #000 !important; color: #fff !important; border-color: #fff !important; }

html.a11yHighContrast .badge-success { background: #1e9e4a !important; color: #000 !important; }
html.a11yHighContrast .badge-warning { background: #ffd400 !important; color: #000 !important; }
html.a11yHighContrast .badge-secondary { background: #fff !important; color: #000 !important; }
html.a11yHighContrast .badge-light,
html.a11yHighContrast .badge-primary { background: #000 !important; color: #fff !important; border: 1px solid #fff; }
html.a11yHighContrast .progress { background: #333 !important; }
html.a11yHighContrast .progress-bar { background: #1e9e4a !important; }

/* 랜딩 소개 타일 — 연한 색 배경 + 흰 글자 구조라 배경을 함께 반전해야 대비 유지 */
html.a11yHighContrast #page01_01,
html.a11yHighContrast #page01_02,
html.a11yHighContrast #page01_03,
html.a11yHighContrast #page02_01,
html.a11yHighContrast #page02_02 {
  background-color: #000 !important;
  border: 1px solid #fff !important;
}

/* 표·구분선 */
html.a11yHighContrast .table td,
html.a11yHighContrast .table th,
html.a11yHighContrast hr { border-color: #fff !important; }
html.a11yHighContrast .cal-day.cal-selected { box-shadow: inset 0 0 0 2px #ffd400 !important; }
html.a11yHighContrast td[style*="background"] { background: #1a2f55 !important; }

/* 포커스 표시도 반전 배경에서 보이도록 노랑으로 */
html.a11yHighContrast :focus-visible { outline: 3px solid #ffd400 !important; }

/* ── 본문 바로가기 (스킵 내비게이션) — 평소 화면 밖, 키보드 포커스 시 상단 바로 노출 ── */
.a11ySkipNav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
}
.a11ySkipNav:focus {
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}