/* 마추 모바일 v3 — 이용가이드 (racing/guide.php)
   ⚠ 전부 @media (max-width:900px) 안. PC(≥901px) 는 한 픽셀도 바뀌면 안 된다.
   색은 --m3-* 토큰만 (다크 body.jt-dark 에서 jtm-m3.css 가 바꿔 준다). */

@media (max-width: 900px) {

/* 새 히어로가 같은 제목·설명을 대신한다 → 기존 페이지 머리만 모바일에서 숨김 */
.m3-guide ~ .jt2-pagehead { display: none; }
#gd-faq, .m3-guide #m3-faq { scroll-margin-top: 76px; }

/* ── 1. 히어로 ── */
.m3.m3-guide .m3-guide-hero { min-height: 290px; padding-bottom: 26px; }
.m3.m3-guide .m3-guide-hero .m3-hero-tx { max-width: 60%; }
.m3.m3-guide .m3-guide-hero .m3-h1 em { display: inline-block; }
.m3.m3-guide .m3-guide-navy { color: var(--m3-navy); }
.m3.m3-guide .m3-guide-hero .m3-hero-art { top: 64px; width: 44%; }
.m3.m3-guide .m3-guide-hero .m3-script { top: 16px; right: 14px; font-size: 21px; }
.m3.m3-guide .m3-guide-hero .m3-script::after { background: var(--m3-green); }
.m3.m3-guide .m3-guide-artnote { position: absolute; right: 16px; bottom: 20px; z-index: 3; margin: 0;
  text-align: right; font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--m3-sub); }
.m3.m3-guide .m3-guide-artnote::after { content: ""; display: block; width: 30px; height: 3px; margin: 6px 0 0 auto;
  border-radius: 2px; background: var(--m3-green); }

/* 섹션 머리 — 우측 문구가 길면 제목 아래로 내려간다 */
.m3.m3-guide .m3-guide-sec { flex-wrap: wrap; row-gap: 4px; }
.m3.m3-guide .m3-guide-sec .m3-h2 { flex: 1 1 auto; }
.m3.m3-guide .m3-guide-aside { flex: none; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--m3-green-tx); }
.m3.m3-guide .m3-guide-more { display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; }
.m3.m3-guide .m3-guide-more small { font-size: 14px; font-weight: 600; color: var(--m3-sub); }
.m3.m3-guide .m3-guide-more span { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }

/* ── 2. 4단계 ── */
.m3.m3-guide .m3-guide-steps { list-style: none; margin: 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.m3.m3-guide .m3-guide-step { position: relative; min-width: 0; }
.m3.m3-guide .m3-guide-step + .m3-guide-step::before { content: "\203A"; position: absolute; left: -15px; top: 50%;
  width: 12px; margin-top: -12px; text-align: center; font-size: 24px; line-height: 1; font-weight: 900; color: var(--m3-green); }
.m3.m3-guide .m3-guide-stepcard { display: flex; flex-direction: column; align-items: flex-start; height: 100%;
  padding: 16px 14px 14px; background: var(--m3-card); border: 1px solid var(--m3-line); border-radius: 18px;
  box-shadow: var(--m3-sh); color: var(--m3-text); }
.m3.m3-guide a.m3-guide-stepcard:active { transform: scale(.985); }
.m3.m3-guide .m3-guide-no { width: 28px; height: 28px; border-radius: 50%; background: var(--m3-green-fill); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; }
body.jt-dark .m3.m3-guide .m3-guide-no { color: #0D1320; }
.m3.m3-guide .m3-guide-stepico { width: 54px; height: 54px; margin: 10px 0 10px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; background: var(--m3-green-tint); color: var(--m3-green); }
.m3.m3-guide .m3-guide-stept { display: block; font-size: 17px; line-height: 1.35; font-weight: 900; letter-spacing: -.035em; color: var(--m3-text); }
.m3.m3-guide .m3-guide-stepd { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--m3-sub); }
.m3.m3-guide .m3-guide-stepgo { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 12px;
  font-size: 14px; font-weight: 800; color: var(--m3-green-tx); }

@media (max-width: 600px) {
  .m3.m3-guide .m3-guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .m3.m3-guide .m3-guide-step:nth-child(3)::before { display: none; }
}

/* ── 3. 핵심 안내 ── */
.m3.m3-guide .m3-guide-points { margin: 0 16px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.m3.m3-guide .m3-guide-point { display: flex; align-items: flex-start; gap: 14px; }
.m3.m3-guide .m3-guide-point .m3-icobox { background: var(--m3-card); }
.m3.m3-guide .m3-guide-point-tx { flex: 1; min-width: 0; }
.m3.m3-guide .m3-guide-point-tx b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 18px; line-height: 1.35; font-weight: 900; color: var(--m3-text); }
.m3.m3-guide .m3-guide-point-tx .m3-badge { height: 24px; font-size: 14px; }
.m3.m3-guide .m3-guide-point-tx p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--m3-text); opacity: .82; }
@media (min-width: 640px) {
  .m3.m3-guide .m3-guide-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m3.m3-guide .m3-guide-point { flex-direction: column; }
}

/* ── 4. FAQ ── */
.m3.m3-guide .m3-faq summary { line-height: 1.4; padding: 8px 0; }
.m3.m3-guide .m3-faq summary .m3-q { color: var(--m3-green-tx); }
.m3.m3-guide .m3-faq-a b { color: var(--m3-text); font-weight: 800; }

/* ── 5. 시작 띠 ── */
.m3.m3-guide .m3-guide-band { margin: 26px 16px 0; padding: 22px 18px 18px; border-radius: 22px;
  background: var(--m3-green-tint); border: 1px solid var(--m3-green-line); }
.m3.m3-guide .m3-guide-band-a { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 800; color: var(--m3-text); }
.m3.m3-guide .m3-guide-band-b { margin: 2px 0 0; font-size: 24px; line-height: 1.3; font-weight: 900; letter-spacing: -.04em; color: var(--m3-green); }
.m3.m3-guide .m3-guide-band-c { margin: 8px 0 0; font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--m3-sub); }
.m3.m3-guide .m3-guide-pill { margin-top: 16px; min-height: 52px; max-width: 100%; padding: 0 22px; border-radius: 999px;
  font-size: 17px; white-space: normal; text-align: center; box-shadow: var(--m3-sh-hi); }
body.jt-dark .m3.m3-guide .m3-guide-pill { color: #0D1320; }
.m3.m3-guide .m3-guide-band-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.m3.m3-guide .m3-guide-band .m3-script { position: relative; right: auto; top: auto; transform: rotate(-5deg);
  font-size: 21px; color: var(--m3-navy); }
.m3.m3-guide .m3-guide-band .m3-script::after { background: var(--m3-green); }
.m3.m3-guide .m3-guide-band-ico { flex: none; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--m3-card); color: var(--m3-green); box-shadow: var(--m3-sh); }

@media (max-width: 360px) {
  .m3.m3-guide .m3-guide-hero .m3-hero-tx { max-width: 62%; }
  .m3.m3-guide .m3-guide-steps { column-gap: 16px; }
  .m3.m3-guide .m3-guide-stepcard { padding: 14px 11px 12px; }
  .m3.m3-guide .m3-guide-stept { font-size: 16px; }
  .m3.m3-guide .m3-guide-band-b { font-size: 22px; }
}

/* ── 6. 기존 이용권 카드(본문 <style>) 겹침 보정 — 2026-09-15 polish ──
   본문의 .gd-tile,.gd-bigcard{height:100%} 가 content-box 라 칸 높이 + 안쪽 여백·테두리(36px)만큼 넘쳐
   1열(≤640px)에서 PREMIUM 카드가 BEST 카드의 '30일 이용권 시작하기' 버튼을 덮는다.
   → 높이는 그리드 늘이기(stretch)에 맡기고 border-box. 버튼 width:100% + padding 도 오른쪽으로 22px 넘쳐 border-box.
   본문 <style> 이 이 파일보다 뒤에 나오므로 html body 로 명시도를 올린다. */
html body .gd-plans .gd-tile,
html body .gd-plans .gd-bigcard { height: auto; box-sizing: border-box; }
html body .gd-plans .gd-cta2 { box-sizing: border-box; }

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