/* ══════════════════════════════════════════════════════════════════════
   마추 모바일 '전부 초록' 2단계 — info 담당 (2026-09-15 대표 요청)
   rb.css/m3/green-info.css

   · 범위: 속보(news) · 커뮤니티(community) · 랭킹(rank) · 초보가이드(academy) · 배당 계산기(calc)
   · 파일 전체가 @media (max-width: 900px) 한 덩어리 → PC(≥901px) 무변경.
   · jt2-acad-* / jt2-vmodal 은 academy.php 에만, jt2-calcrow / jt2-calcsum 은 calc.php 에만 있다
     (서버 grep 확인) → 클래스 자체가 페이지 조상 역할.
   · 속보·커뮤니티·랭킹의 색은 전부 jt2 토큰(green.css 가 초록/회색으로 옮김)이라 여기서 따로 고칠 것이 없다.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

/* ── A1. 초보가이드 히어로 — 남색+파랑 광원 → 잉크 초록 바탕+초록 광원 (라이트/다크 같은 어두운 판) ──
   흰 제목 6.8:1 이상 · 설명 #B4D3C3 5.0:1 이상 · 칩 글자 #D7EEE1 7.8:1 */
html body .jt2-acad-hero {
  color: #E8F2EC;
  background:
    radial-gradient(760px 420px at 88% -20%, rgba(34, 164, 93, .42), transparent 62%),
    radial-gradient(620px 400px at -10% 120%, rgba(18, 148, 91, .24), transparent 58%),
    linear-gradient(152deg, #0A1F16 0%, #0F2E20 55%, #0E3D29 100%);
}
html body .jt2-acad-hero .kicker { color: #9BE3BC; background: rgba(63, 196, 130, .18); }
html body .jt2-acad-hero p { color: #B4D3C3; }
html body .jt2-acad-hero .chips a { color: #D7EEE1; }
html body .jt2-acad-hero .chips a:hover { background: #0E7C4C; color: #FFFFFF; border-color: transparent; }
html body.jt-dark .jt2-acad-hero .chips a:hover { background: #3FC482; color: #0D1320; }

/* ── A2. 승식 카드 — hover 파란 그림자 → 초록 그림자 · 최고 난이도(삼쌍승) 빨강 테두리/분홍 바탕 → 초록 ──
   다크에서는 원래 #FFF9F9 밝은 바탕이 깔려 글자가 안 보였다 → 다크 연바탕으로. 난이도 구분은 테두리+채운 번호로 유지 */
html body .jt2-acad-bets .bet:hover { box-shadow: 0 8px 20px rgba(18, 148, 91, .10); }
html body .jt2-acad-bets .bet--hard { border-color: #9FD4B6; background: linear-gradient(180deg, #F2FAF5, var(--jt2-card)); }
html body .jt2-acad-bets .bet--hard .no { background: #0E7C4C; color: #FFFFFF; }
html body.jt-dark .jt2-acad-bets .bet--hard { border-color: #2E6B4A; background: linear-gradient(180deg, #10281C, var(--jt2-card)); }
html body.jt-dark .jt2-acad-bets .bet--hard .no { background: #3FC482; color: #0D1320; }
/* '적중' 딱지 — 다크 채움 #3FC482 위 흰 글자(2.2:1) → 짙은 글자 */
html body.jt-dark .jt2-acad-bets .ex .ok { color: #0D1320; }
/* '오늘의 경주에서 확인' · '배당 계산기로 직접 계산하기' — #22A45D 위 흰 글자(3.2:1) → 진초록 채움(5.2:1) */
html body .jt2-acad-bets .bet--cta .jt2-btn,
html body .jt2-acad-pay .jt2-btn { background: #0E7C4C; border-color: #0E7C4C; color: #FFFFFF; }
html body .jt2-acad-bets .bet--cta .jt2-btn:hover,
html body .jt2-acad-pay .jt2-btn:hover { background: #0B6B41; border-color: #0B6B41; color: #FFFFFF; }
html body.jt-dark .jt2-acad-bets .bet--cta .jt2-btn,
html body.jt-dark .jt2-acad-pay .jt2-btn { background: #3FC482; border-color: #3FC482; color: #0D1320; }
html body.jt-dark .jt2-acad-bets .bet--cta .jt2-btn:hover,
html body.jt-dark .jt2-acad-pay .jt2-btn:hover { background: #52D190; border-color: #52D190; color: #0D1320; }

/* ── A3. 구매 채널 '온라인·모바일'(선택 카드) — 연파랑 #F5F8FF 바탕 → 더 연한 초록 (다크는 원래 밝은 바탕이 깔려 글자가 안 보였다) ── */
html body .jt2-acad-chan .ch--on { background: linear-gradient(180deg, #F2FAF5, var(--jt2-card)); }
html body.jt-dark .jt2-acad-chan .ch--on { background: linear-gradient(180deg, #10281C, var(--jt2-card)); }

/* ── A4. 흰 글자가 얹힌 작은 초록 채움(#22A45D 3.2:1) → 진초록 채움 / 다크 채움+짙은 글자 ──
   '더비온' 배지 · 모바일 구매 단계 번호 · 폰 목업 마번 공 · 목업 '구매하기' · 활용법 단계 번호 */
html body .jt2-acad-chan .bd, html body .jt2-acad-h3 .bd,
html body .jt2-acad-mob .s i, html body .jt2-acad-mob .row b.bl, html body .jt2-acad-mob .btn,
html body .jt2-acad-steps:not(.jt2-acad-steps--num) .st i { background: #0E7C4C; color: #FFFFFF; }
html body.jt-dark .jt2-acad-chan .bd, html body.jt-dark .jt2-acad-h3 .bd,
html body.jt-dark .jt2-acad-mob .s i, html body.jt-dark .jt2-acad-mob .row b.bl, html body.jt-dark .jt2-acad-mob .btn,
html body.jt-dark .jt2-acad-steps:not(.jt2-acad-steps--num) .st i { background: #3FC482; color: #0D1320; }

/* ── A5. 영상 카드 — '배리어프리' 파랑 배지 → 진초록 채움 · 재생 버튼 빨간 그림자 → 초록 그림자 · hover 파란 그림자 → 초록 ── */
html body .jt2-acad-vids .bf { background: #0E7C4C; color: #FFFFFF; }
html body.jt-dark .jt2-acad-vids .bf { background: #3FC482; color: #0D1320; }
html body .jt2-acad-vids .vd:not(.on):hover { box-shadow: 0 8px 20px rgba(18, 148, 91, .10); }
html body .jt2-acad-feat:hover { box-shadow: 0 8px 22px rgba(18, 148, 91, .10); }
/* (3단계) 썸네일이 초록 톤(A8)이 되면서 초록 원이 바탕에 묻힘(밝은 1.2~2.5:1) → 2px 테두리 링으로 원 윤곽 3:1 이상
   밝은: 흰 링(짙은 초록 바탕 10:1 · 밝은 부분 #538069 4.3:1) / 다크: #0D1320 링(밝은 부분 3.9:1, 어두운 부분은 채움 #3FC482 가 5.8:1) */
html body .jt2-acad-vids .pl i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 8px 20px rgba(18, 148, 91, .40); }
html body .jt2-acad-feat .pl i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 8px 22px rgba(18, 148, 91, .42); }
html body.jt-dark .jt2-acad-vids .pl i { box-shadow: 0 0 0 2px #0D1320, 0 8px 20px rgba(18, 148, 91, .40); }
html body.jt-dark .jt2-acad-feat .pl i { box-shadow: 0 0 0 2px #0D1320, 0 8px 22px rgba(18, 148, 91, .42); }
/* 재생 ▶ — 다크 채움 #3FC482 위 흰 삼각형(2.2:1) → 짙은 삼각형 */
html body.jt-dark .jt2-acad-vids .pl i, html body.jt-dark .jt2-acad-feat .pl i { color: #0D1320; }

/* ── A6. FAQ — 펼친 질문 글자 #22A45D(흰 바탕 3.2:1) → 초록 글자 ── */
html body .jt2-acad-faq details[open] summary { color: #17794A; }
html body.jt-dark .jt2-acad-faq details[open] summary { color: #7FD9A8; }

/* ── A7. 영상 팝업 — 남색 막 → 잉크 초록 막(공용 모달 .jt-ov 와 같은 기운) · 캡션 연파랑 흰색 → 초록 흰색 ── */
html body .jt2-vmodal { background: rgba(8, 24, 16, .72); }
html body .jt2-vmodal .cap { color: #E8F2EC; }

/* ── A8. (3단계) 영상 썸네일 — 유튜브 hqdefault 그림의 진한 파랑 → 초록 단색 톤 ──
   .th 는 인라인 style 로 background-image 만 준다 → 바탕색(초록)을 깔고 background-blend-mode: luminosity
   = 그림의 밝기 + 초록의 색상·채도. 요소 filter 가 아니라 배경 합성이라 ▶ 버튼·회차·배리어프리·재생목록 배지는 영향 없음.
   재생 중(iframe)은 바탕 위에 덮이므로 영상 자체는 그대로. 이미지 로드 전에는 이 초록 바탕이 보인다. */
html body .jt2-acad-vids .th,
html body .jt2-acad-feat .th { background-color: #2C6B4C; background-blend-mode: luminosity; }
/* 썸네일 위 막 · 회차 번호 · 재생목록 배지 바탕 — 남색 기운 rgba(11,21,38) → 잉크 초록 rgba(8,24,16) (투명도 그대로) */
html body .jt2-acad-vids .pl,
html body .jt2-acad-feat .pl { background: linear-gradient(180deg, rgba(8, 24, 16, .18), rgba(8, 24, 16, .52)); }
html body .jt2-acad-vids .ep { background: rgba(8, 24, 16, .78); }
html body .jt2-acad-feat .badge { background: rgba(8, 24, 16, .72); }

/* ── C1. 배당 계산기 — 경주별 손익 '+' 작은 글자 #12A150(흰 바탕 3.4:1) → 초록 글자 · 합계 큰 숫자는 기본 초록 ──
   (음수 .neg 는 green.css 가 잉크로 — 양수 초록 / 음수 잉크 구분 유지) */
html body .jt2-calcrow .pos, html body .jt2-calcrow .kv b.pos { color: #17794A; }
html body .jt2-calcsum .v.pos { color: #12945B; }
html body.jt-dark .jt2-calcrow .pos, html body.jt-dark .jt2-calcrow .kv b.pos { color: #7FD9A8; }
html body.jt-dark .jt2-calcsum .v.pos { color: #52D190; }

/* ── C2. (3단계) 경주별 내역 머리 경마장 이름 — 다크에서 '기타'(meet=4 → .jt2-meet--ycheon)만 #9BE3BC 초록 글자 ──
   밝은 모드(잉크 계열)·'서울'(잉크)과 같게 다크 잉크로. 이름 글자는 그대로, 색만 */
html body.jt-dark .jt2-calcrow .jt2-meet--ycheon { color: #E8F2EC; }

/* ── N1. (3단계 2차) 속보 목록 분류 배지 — 초록 전환으로 빨강(적중)·파랑(출발임박·마추예측)이 같은 연초록,
   앰버(출전변경)가 회색(결과·일정)과 같아져 분류 구분이 사라졌다 → 원래 4톤을 초록/회색 4단으로 되살린다.
   톤 배정은 news.php $type_tag 그대로(출발임박·마추예측은 원래도 같은 톤). .jt2-newstag 는 news.php 에만 있다(서버 grep).
   ① 적중(--red)      : 진초록 채움 + 흰 글자 5.2:1 / 다크 #3FC482 채움 + #0D1320 8.4:1
   ② 출발임박·마추예측(--blue): 연초록 바탕 + 초록 글자(지금 모습 그대로, 팔레트 값으로 고정)
   ③ 출전변경(--amber) : 바탕 없음 + 회색 1px 안쪽 테두리 + 잉크 글자(크기 변화 없게 inset 그림자)
   ④ 결과·일정(--grey) : 회색 바탕 + 회색 글자(그대로)
   글자·순서 무변경, 픽 공개 상태와 무관(분류 배지). */
html body .jt2-newstag--red   { background: #0E7C4C; color: #FFFFFF; }
html body .jt2-newstag--blue  { background: #E8F6EF; color: #17794A; }
html body .jt2-newstag--amber { background: transparent; color: #0F2E20; box-shadow: inset 0 0 0 1px #A7B4C9; }
html body.jt-dark .jt2-newstag--red   { background: #3FC482; color: #0D1320; }
html body.jt-dark .jt2-newstag--blue  { background: #143325; color: #7FD9A8; }
html body.jt-dark .jt2-newstag--amber { background: transparent; color: #E8F2EC; box-shadow: inset 0 0 0 1px #5A6A82; }

} /* @media (max-width: 900px) */
