/* ══════════════════════════════════════════════════════════════════════
   마추 모바일 '전부 초록' (2026-09-15 대표 요청) — 이용권(racing/membership.php) · 이용가이드(racing/guide.php)
   기존 콘텐츠 색 덮어쓰기 (plansguide 담당)
   ⚠ 파일 전체가 @media (max-width: 900px) 한 덩어리 안. PC(≥901px)는 한 줄도 바뀌지 않는다.
   ⚠ 범위: 이용권 = .jt2-cols--mem 안(membership.php 에만 있음) · 가이드 = gd-* 클래스(guide.php 에만 있음).
     공용 부품(.jt2-warn · .jt2-note 테두리 · 티커 · 푸터 · 버튼 hover · jt2 토큰)은 shell(green.css) 담당이라 두지 않는다.
   ⚠ guide.php 본문 <style> 이 이 파일보다 뒤에 나오므로 선택자 앞에 html body 를 붙여 명시도를 올렸다.
   이 파일을 지우면 원래 색으로 돌아간다.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

/* ═══ A. 이용권 (racing/membership.php) — 기존 카드들 ═══ */

/* A1. 결제 안내 '이용가이드 보기 →' · 이용 방법 안내 '포인트 충전' 링크
       브라우저 기본 링크 파랑(#0000EE, 방문 뒤 보라 #551A8B) → 초록 글자 */
html body .jt2-cols--mem .ms-lead a,
html body .jt2-cols--mem .jt2-note a { color: #17794A; }
html body.jt-dark .jt2-cols--mem .ms-lead a,
html body.jt-dark .jt2-cols--mem .jt2-note a { color: #7FD9A8; }

/* A2. 공개 원칙 '잠금' 칩 — '무료'(초록 칩)와 같은 초록이라 열린 것처럼 보인다 → 회색 칩 */
html body .jt2-cols--mem .jt2-poly-row .jt2-chip--blue { background: #F1F4F9; color: #5A6A82; }
html body.jt-dark .jt2-cols--mem .jt2-poly-row .jt2-chip--blue { background: #202A3C; color: #A7B4C9; }

/* A3. (로그인) 월렛 멤버십 '만료' 칩 — 빨강(shell 토큰으로 초록이 되면 '유효'와 구분이 사라짐)
       → 회색 윤곽 + 잉크 굵은 글자. '유효'(초록 칩)·'미가입'(회색 채움 칩)과 계속 구분 */
html body .jt2-cols--mem .jt2-wallet .jt2-chip--red { background: transparent; color: #0F2E20; box-shadow: inset 0 0 0 1px #A7B4C9; }
html body.jt-dark .jt2-cols--mem .jt2-wallet .jt2-chip--red { background: transparent; color: #E8F2EC; box-shadow: inset 0 0 0 1px #5A6A82; }

/* A4. (로그인) 내 충전 내역 상태 '대기'(.st.w) — 주황 칩 → 회색 윤곽 칩.
       '승인'(.st.o 초록 칩)·'반려'(.st.c 회색 채움 칩)와 구분 유지 */
html body .jt2-cols--mem .jt2-chgrow .st.w { background: #FFFFFF; color: #5A6A82; box-shadow: inset 0 0 0 1px #A7B4C9; }
html body.jt-dark .jt2-cols--mem .jt2-chgrow .st.w { background: transparent; color: #A7B4C9; box-shadow: inset 0 0 0 1px #5A6A82; }

/* A5. (로그인) 충전 신청 결과 문구 — PHP style="color:#D62B2B"(실패) → 잉크 굵은 글자,
       성공(#0E8A46)은 초록 그대로 두되 다크에서만 읽히는 초록 글자로 */
html body .jt2-cols--mem .jt2-note[style*="#D62B2B" i] { color: #0F2E20 !important; }
html body.jt-dark .jt2-cols--mem .jt2-note[style*="#D62B2B" i] { color: #E8F2EC !important; }
html body.jt-dark .jt2-cols--mem .jt2-note[style*="#0E8A46" i] { color: #7FD9A8 !important; }

/* A6. 기존 5개 상품 목록(.ms-plans) — 모바일에선 plans.css 가 숨기지만, 숨김이 풀려도(m3 블록 미출력 등)
       남색 PREMIUM 카드·금색 배지/버튼이 나오지 않게 짙은 초록으로 */
html body .jt2-cols--mem .ms-plans .ms-bigcard--prem { background: linear-gradient(135deg, #0F2E20 0%, #0B5E3A 100%); }
html body .jt2-cols--mem .ms-plans .ms-bigcard--prem .ms-pr { color: #9BE3BC; }
html body .jt2-cols--mem .ms-plans .ms-bigcard--prem .ms-pr small,
html body .jt2-cols--mem .ms-plans .ms-bigcard--prem .ms-ds,
html body .jt2-cols--mem .ms-plans .ms-bigcard--prem .ms-feats li { color: #D7EEE1; }
html body .jt2-cols--mem .ms-plans .ms-bdg--prem { background: #DDF1E5; border-color: #DDF1E5; color: #0B5E3A; }
html body.jt-dark .jt2-cols--mem .ms-plans .ms-bdg--prem { background: #9BE3BC; border-color: #9BE3BC; color: #0D1320; }
html body .jt2-cols--mem .ms-plans .ms-cta--prem { background: #FFFFFF; border-color: #FFFFFF; color: #0B5E3A; }
html body .jt2-cols--mem .ms-plans .ms-cta--prem:hover { background: #E8F6EF; border-color: #E8F6EF; color: #0B5E3A; }
html body.jt-dark .jt2-cols--mem .ms-plans .ms-cta--prem { background: #2FAE6E; border-color: #2FAE6E; color: #0D1320; }
html body.jt-dark .jt2-cols--mem .ms-plans .ms-cta--prem:hover { background: #52D190; border-color: #52D190; color: #0D1320; }
/* (다크) BEST 버튼 — .jt-dark .ms-plans .ms-cta{color:#5FCB8C} 때문에 초록 위 초록 글자 → 다크 채움 + 짙은 글자 */
html body.jt-dark .jt2-cols--mem .ms-plans .ms-cta--best { background: #3FC482; border-color: #3FC482; color: #0D1320; }
html body.jt-dark .jt2-cols--mem .ms-plans .ms-cta--best:hover { background: #52D190; border-color: #52D190; color: #0D1320; }


/* ═══ B. 이용가이드 (racing/guide.php) — 기존 콘텐츠(본문 <style>) ═══ */

/* B1. 머리 띠 '마추 하나면 분석 끝.' — 남색 그라데이션(#12213F→#1D3A6E) → 잉크→짙은 초록.
       설명 연파랑(#A8BEE4) → 연한 초록 · '무료' 금색(#F5C860) → 밝은 초록(굵게) */
html body .gd-hero { background: linear-gradient(135deg, #0F2E20 0%, #0B5E3A 100%); }
html body .gd-hero span { color: #D7EEE1; }
html body .gd-hero i { color: #9BE3BC; }

/* B2. 5단계 번호 칸 — 연파랑 바탕(#EEF3FD) → 연초록 바탕. 다크는 밝은 네모가 떠 보여 다크 연바탕 + 초록 글자 */
html body .gd-steps .n { background: #E8F6EF; }
html body.jt-dark .gd-steps .n { background: #143325; color: #7FD9A8; }

/* B3. 고신뢰 30일(PREMIUM) 큰 카드 — 남색 카드 → 짙은 초록 카드, 금색 가격·배지·버튼 → 초록 계열 */
html body .gd-bigcard--prem { background: linear-gradient(135deg, #0F2E20 0%, #0B5E3A 100%); }
html body .gd-bigcard--prem .gd-pr { color: #9BE3BC; }
html body .gd-bigcard--prem .gd-pr small,
html body .gd-bigcard--prem .gd-ds,
html body .gd-bigcard--prem .gd-feats li { color: #D7EEE1; }
html body .gd-bigcard--prem .gd-bdg--prem { background: #DDF1E5; border-color: #DDF1E5; color: #0B5E3A; }
html body.jt-dark .gd-bigcard--prem .gd-bdg--prem { background: #9BE3BC; border-color: #9BE3BC; color: #0D1320; }
html body .gd-bigcard--prem .gd-cta2--prem { background: #FFFFFF; border-color: #FFFFFF; color: #0B5E3A; }
html body .gd-bigcard--prem .gd-cta2--prem:hover { background: #E8F6EF; border-color: #E8F6EF; color: #0B5E3A; }
html body.jt-dark .gd-bigcard--prem .gd-cta2--prem { background: #2FAE6E; border-color: #2FAE6E; color: #0D1320; }
html body.jt-dark .gd-bigcard--prem .gd-cta2--prem:hover { background: #52D190; border-color: #52D190; color: #0D1320; }

/* B3-1. (다크) 마추 30일(BEST) 버튼 — 본문 <style> 의 .jt-dark .gd-cta2{color:#5FCB8C} 가 흰 글자를 이겨
         초록 채움 위 초록 글자가 된다 → 다크 채움 + 짙은 글자 */
html body.jt-dark .gd-bigcard--best .gd-cta2--best { background: #3FC482; border-color: #3FC482; color: #0D1320; }
html body.jt-dark .gd-bigcard--best .gd-cta2--best:hover { background: #52D190; border-color: #52D190; color: #0D1320; }

/* B3-2. 마추 30일(BEST) 배지·버튼 — #22A45D 위 흰 글자(3.2:1) → 진초록 채움(5.2:1). 다크 배지는 다크 채움 + 짙은 글자 */
html body .gd-bigcard--best .gd-bdg--best { background: #0E7C4C; border-color: #0E7C4C; color: #FFFFFF; }
html body.jt-dark .gd-bigcard--best .gd-bdg--best { background: #3FC482; border-color: #3FC482; color: #0D1320; }
html body .gd-bigcard--best .gd-cta2--best { background: #0E7C4C; border-color: #0E7C4C; color: #FFFFFF; }
html body .gd-bigcard--best .gd-cta2--best:hover { background: #0B6B41; border-color: #0B6B41; color: #FFFFFF; }

/* B2-1. 5단계 '무료' 딱지 — #1F9E6E 위 흰 10px 글자(3.3:1) → 진초록 채움 / 다크 채움 + 짙은 글자 */
html body .gd-steps .tx b .free { background: #0E7C4C; color: #FFFFFF; }
html body.jt-dark .gd-steps .tx b .free { background: #3FC482; color: #0D1320; }
/* B2-2. (다크) 5단계 버튼 글자 #17794A · '완료' 밝은 칩 — 어두운 카드 위에서 3:1 안팎 → 다크 초록 글자 / 다크 연바탕 */
html body.jt-dark .gd-steps .go { color: #7FD9A8; }
html body.jt-dark .gd-steps .done { background: #143325; color: #7FD9A8; }

/* B5. 맨 아래 두 버튼 — '오늘 출전마 분석하기' #22A45D 위 흰 글자(3.2:1) → 진초록 채움.
       다크: 채움은 다크 채움 + 짙은 글자, '이용권 보기' 테두리형은 #17794A 글자가 어두운 바탕에 묻혀 다크 초록 글자 */
html body .gd-cta .a { background: #0E7C4C; color: #FFFFFF; }
html body.jt-dark .gd-cta .a { background: #3FC482; color: #0D1320; }
html body.jt-dark .gd-cta .b { color: #7FD9A8; border-color: #3FC482; }

/* B4. 자주 묻는 것 '초보 가이드' 링크 — 브라우저 기본 파랑 → 초록 글자 */
html body .gd-faq dd a { color: #17794A; }
html body.jt-dark .gd-faq dd a { color: #7FD9A8; }

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

/* ══ 이용권 카드 보강 (2026-10-12 한민석 "박스 안에 박스가 영역 밖으로 나가고 문구도 나가고") — 모든 폭 ══
   버튼(.ms-cta)이 width:100% 에 안쪽 여백을 더해 카드 오른쪽으로 삐져나갔고, 카드(height:100%)가 격자 줄보다 커져
   아래 '결제 전에 확인하세요' 줄을 덮었다. 이 테마엔 전역 border-box 리셋이 없어 다른 CSS 가 섞이면 다시 깨진다 → 여기서 못 박는다.
   · 버튼: 폭 계산을 border-box 로 고정, 카드보다 넓어지지 않게
   · 카드: 높이는 내용대로(격자가 같은 줄 카드를 같은 높이로 늘린다) — % 높이를 쓰지 않는다 */
html body .ms-plans .ms-tiles,
html body .ms-plans .ms-big{ align-items: stretch; }
html body .ms-plans .ms-tile,
html body .ms-plans .ms-bigcard{ box-sizing: border-box !important; height: auto !important; min-width: 0; max-width: 100%; }
html body .ms-plans .ms-cta{ box-sizing: border-box !important; width: 100% !important; max-width: 100%; margin-left: 0; margin-right: 0; }
html body .ms-plans .ms-big{ margin-bottom: 0; }
html body .ms-rules{ position: relative; clear: both; }