/* ══════════════════════════════════════════════════════════════════════
   마추 v4 — 공용 디자인 시스템 (2026-09-17)

   틀(배치)은 대표 시안 11장 그대로. **색과 마감은 우리 초록**으로 다시 잡았다
   (2026-09-17 대표: "이 틀 기반으로 우리 디자인 새롭게, 깔끔하게 초록색으로").
   · 시안의 남색·파랑·오렌지는 쓰지 않는다 — 모바일 강조색은 초록 하나 (무채색 회색은 허용).
   · 토큰 이름(--v4-blue · --v4-orange)은 여러 화면이 쓰므로 **이름은 그대로 두고 값만 초록**으로 바꿨다.
     새 색이 필요하면 아래 초록 토큰만 쓴다.

   깔끔하게 — 투박함을 만들던 것들을 걷어냈다:
   · 그림자를 얕게(0 1px 2px + 0 6px 16px 대신 한 겹), 테두리는 1px 실선 하나로
   · 히어로의 과한 글로우·별빛 제거 → 단정한 그라데이션 + 얇은 라인
   · 본문 굵기 500 · 라벨 600 · 제목 800~900 (전부 굵으면 벽처럼 보인다 — 9/17 교훈)
   · 자간은 제목만 좁히고 본문은 거의 0

   ⚠ 이름이 green'z'- 인 이유 — jtm_ui_assets() 가 glob('m3/green*.css') 를 sort() 해서 싣는다.
     green-*.css → green.css → greenx-balance.css → greenz-v4.css 순. 맨 뒤여야 해서 'greenz-'.
   ⚠ 전부 @media (max-width:900px) 안 → PC(≥901px)는 .v4 가 display:none 이라 무관.
   되돌리기: 이 파일을 지우고 각 화면의 v4 블록을 빼면 원래대로.
   ══════════════════════════════════════════════════════════════════════ */

.v4{display:none}
.v4-old{display:block}

@media (max-width:900px){

.v4{display:block}
/* ⚠ 2026-09-17 대표: "지금 작업 전의 모든 데이터·구조물을 무시하면 안 된다. 싹 들어가야 된다."
   전에는 여기서 .v4-old{display:none} 으로 기존 본문을 통째로 숨겼다 → 말 클릭 상세·프로필 모달·
   예상지·배당·구간기록 같은 **기존 기능이 모바일에서 통째로 사라졌다**. 다시 보이게 한다.
   v4 블록은 화면 위쪽 '요약'이고, 그 아래로 기존 본문이 그대로 이어진다(기존 통합 원칙). */
.v4-old{display:block;margin-top:10px;padding-top:16px;border-top:1px solid #E6EBE8}
/* 다만 v4 가 **똑같이 다시 그린** 옛 모바일 v3 블록(.m3)만은 숨긴다 — 그 부분만 중복이다.
   그 밖의 기존 본문(말 클릭 상세·기수/조교사 프로필·예상지·배당·구간기록·오픈톡)은 전부 남는다. */
.v4-old .m3{display:none!important}

.v4{
  /* 초록 팔레트 */
  --v4-ink-900:#062A1C;   /* 히어로 최상단 */
  --v4-ink-800:#0B3D2A;
  --v4-ink-700:#12694A;
  --v4-blue:#0E7C4C;      /* 이름만 blue — 실제는 기본 초록(흰 글자 5.2:1) */
  --v4-blue-600:#12945B;
  --v4-blue-300:#22A45D;
  --v4-cyan:#8FD9B6;
  --v4-orange:#0B5E3A;    /* 이름만 orange — 실제는 짙은 초록(강조·BEST) */
  --v4-orange-600:#0E7C4C;
  --v4-green-tx:#17794A;  /* 연한 바탕 위 작은 초록 글자 */

  --v4-bg:#F6F9F7; --v4-card:#FFFFFF;
  --v4-line:#E6EBE8; --v4-line-2:#EFF3F1; --v4-tint:#EDF7F1; --v4-tint-2:#F4FBF7;
  --v4-text:#0F2E20; --v4-sub:#5F6F68; --v4-faint:#93A29B;
  --v4-sh:0 1px 2px rgba(15,46,32,.05);
  --v4-sh-lift:0 6px 18px rgba(15,46,32,.09);

  background:var(--v4-bg); color:var(--v4-text);
  letter-spacing:-.015em; word-break:keep-all; -webkit-font-smoothing:antialiased;
  /* 화면 끝까지 붙인다 — 래퍼(.jt-wrap · 홈 DIV)의 좌우 패딩(18~20px)과 위 패딩(22px)을 상쇄.
     좌우는 부모 패딩 값을 몰라도 되게 뷰포트 기준으로 뺀다(2026-09-17 대표 "좌우 위에 여백 붙여줘"). */
  /* 화면 끝까지 붙이기 — 래퍼의 좌우 패딩만큼만 뺀다.
     ⚠ `width:100vw` + `calc(50% - 50vw)` 로 하면 모바일 레이아웃 뷰포트가 넓어지며
       가로 스크롤이 생긴다(측정: 체크북 문서 폭 393 → 423, 고쳐도 되돌아옴). vw 를 쓰지 않는다.
     래퍼 패딩: racing/* = .jt-wrap 18px · 홈 = 20px(아래 .v4-home 에서 따로) */
  margin-left:-18px; margin-right:-18px; margin-top:-22px; padding-bottom:8px;
  overflow-x:clip;   /* 안쪽 요소가 삐져나와도 가로 스크롤을 만들지 않게 */
}
/* ── 폰트 — 헤더·푸터와 똑같이 ────────────────────────────────
   그누보드 reset.css·default.css 가 h1~h3 와 **한 단어 클래스**(.t .d .l .v …)에
   리빌더 웹폰트(font-B · font-R)를 물려, 헤더·푸터는 Pretendard 인데 v4 본문만 다른 폰트로 그려졌다.
   (2026-09-17 측정: .v4-h1 = font-B · .v4-item .t = font-R · 헤더/푸터/body = Pretendard)
   body 와 같은 스택을 v4 전체에 다시 씌운다 — `html body .v4 *` 는 요소 규칙(h1)과
   한 클래스 규칙(.t)을 모두 이기므로 !important 없이 해결된다. */
html body .v4,
html body .v4 *{
  font-family: var(--jt2-font, Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif);
}
/* 홈 래퍼만 좌우 패딩이 20px 이다 */
.v4-home{margin-left:-20px;margin-right:-20px}
.v4,.v4 *,.v4 *::before,.v4 *::after{box-sizing:border-box}
.v4 p,.v4 span,.v4 li,.v4 h1,.v4 h2,.v4 h3{word-break:keep-all}
.v4 p{margin:0}
.v4 a{text-decoration:none;color:inherit}
.v4 button{font-family:inherit;cursor:pointer}

/* ── 히어로 ─────────────────────────────────────────────────── */
/* 비네트 — 가장자리를 눌러 사진 주인공을 띄운다(평평한 어두운 막보다 깊이가 산다) */
.v4-hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(116% 86% at 52% 36%, rgba(3,16,11,0) 44%, rgba(3,16,11,.52) 100%)}
.v4-hero{position:relative;overflow:hidden;padding:26px 18px 28px;
  background:linear-gradient(168deg,#062A1C 0%,#0B3D2A 52%,#12694A 100%)}
.v4-hero--tall{min-height:470px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:96px}
.v4-hero::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,rgba(143,217,182,0),rgba(143,217,182,.35),rgba(143,217,182,0))}
/* ── 히어로 사진 ────────────────────────────────────────────
   파일이 올라오면 자동으로 나타나고, 없으면 404 가 무시돼 그라데이션만 보인다(깨지지 않는다).
     /img/v4/hero-cut.webp  — 배경 없는 말+기수 컷아웃 (일반 화면 히어로 오른쪽 · 원본 PNG 1.2MB → WebP 133KB)
     /img/v4/hero-wide.jpg  — 경주 장면 와이드 (메인·인트로 큰 히어로 배경 · 130KB)
   사진이 들어오면 아래 .v4-art 실루엣은 그 뒤로 가려진다(opacity 0.1대라 안 보인다). */
.v4-lights{position:absolute;inset:0;pointer-events:none;
  background:
    url('/img/v4/hero-cut.webp') right -12px bottom -2px / auto 98% no-repeat,
    radial-gradient(circle at 86% 12%, rgba(34,164,93,.26) 0%, rgba(34,164,93,0) 50%)}
/* 사진이 들어오면 자리 지킴이 실루엣은 뺀다 */
.v4-art{display:none}
/* 큰 히어로 — 사진 색(갈색 말·초록 저지)이 죽지 않게 **어둡게만** 덮는다.
   초록을 짙게 얹으면 말까지 초록으로 물든다(2026-09-17 확인). */
.v4-hero--tall,
.v4-hero--mid{
  background-image:
    linear-gradient(180deg, rgba(5,22,15,.56) 0%, rgba(5,22,15,.26) 26%,
                            rgba(5,22,15,.60) 46%, rgba(5,22,15,.86) 68%, rgba(5,22,15,.96) 100%),
    url('/img/v4/hero-wide.jpg');
  background-size: cover, cover; background-position: center, 68% 32%}
.v4-hero--tall .v4-lights,
.v4-hero--mid .v4-lights{background-image:none}
/* 중간 높이 히어로 — 사진을 크게 쓰고 싶은 화면용(현재는 메인만 큰 히어로를 쓴다) */
.v4-hero--mid{min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:30px}

/* 히어로 글자 — 차례로 살짝 떠오르게 (움직임을 줄이는 설정이면 끈다) */
@keyframes v4rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.v4-htx > *{animation:v4rise .52s cubic-bezier(.22,.8,.3,1) both}
.v4-htx > *:nth-child(2){animation-delay:.06s}
.v4-htx > *:nth-child(3){animation-delay:.12s}
.v4-htx > *:nth-child(4){animation-delay:.18s}
.v4-htx > *:nth-child(5){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){ .v4-htx > *{animation:none} }
/* 시안의 실사 경주 사진 자리 — 사진 받으면 <img class="v4-photo"> 로 교체 */
.v4-art{position:absolute;right:-2%;top:16px;width:44%;max-width:180px;z-index:1;opacity:.16}
.v4-art--center{left:auto;right:-4%;transform:none;top:auto;bottom:74px;width:56%;max-width:230px;opacity:.13}
.v4-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.9}
.v4-htx{position:relative;z-index:3}
.v4-htx--c{text-align:center}
.v4-kicker{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.02em;color:#C6EBD8;background:rgba(143,217,182,.12);
  border:1px solid rgba(143,217,182,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.v4-h1{margin:13px 0 0;font-size:32px;line-height:1.14;font-weight:800;letter-spacing:-.048em;color:#fff;
  text-shadow:0 1px 14px rgba(3,16,11,.5)}
/* 제목 아래 짧은 강조 바 */
.v4-accent{display:block;width:46px;height:3px;margin:14px 0 2px;border-radius:2px;
  background:linear-gradient(90deg,#8FD9B6,rgba(143,217,182,.18));
  box-shadow:0 1px 8px rgba(143,217,182,.45)}
.v4-htx--c .v4-accent{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,rgba(143,217,182,.15),#8FD9B6,rgba(143,217,182,.15))}
.v4-h1 em{font-style:normal;color:#8FD9B6}
.v4-h1--xl{font-size:38px;letter-spacing:-.05em;font-weight:900}
.v4-hsub{display:block;margin-top:9px;font-size:14.5px;line-height:1.6;font-weight:500;color:#A9C9B9}

/* 히어로 장식 — 인트로와 같은 부품 (TODAY'S RACE 라인 · 강점 줄) */
.v4-rule{display:flex;align-items:center;justify-content:center;gap:10px;color:#CFEADD;
  text-shadow:0 1px 10px rgba(3,16,11,.9)}
.v4-rule::before,.v4-rule::after{content:'';height:1px;width:32px;
  background:linear-gradient(90deg,transparent,rgba(159,201,180,.75))}
.v4-rule::after{background:linear-gradient(90deg,rgba(159,201,180,.75),transparent)}
.v4-rule span{font-size:12px;font-weight:800;letter-spacing:.09em;white-space:nowrap}
.v4-rule + .v4-h1{margin-top:24px}
.v4-kicker + .v4-h1{margin-top:16px}
.v4-pills{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.v4-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#DCEFE5;
  text-shadow:0 1px 8px rgba(5,22,15,.85)}
.v4-pill svg{flex:none;color:#8FD9B6}
.v4-hero .v4-cta{max-width:340px;margin-left:auto;margin-right:auto}

/* ── 본문 래퍼 · 섹션 ───────────────────────────────────────── */
.v4-wrap{padding:0 16px 20px}
.v4-wrap--lift{margin-top:-58px;position:relative;z-index:4}
.v4-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:24px 0 11px}
.v4-sec h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.035em}
.v4-sec a,.v4-sec > span{flex:none;font-size:13.5px;font-weight:600;color:var(--v4-sub)}
.v4-lead{margin-top:6px;font-size:14px;line-height:1.65;font-weight:500;color:var(--v4-sub)}

/* ── 카드 ───────────────────────────────────────────────────── */
.v4-card{background:var(--v4-card);border:1px solid var(--v4-line);border-radius:14px;box-shadow:var(--v4-sh);padding:16px}
.v4-card + .v4-card{margin-top:10px}
.v4-card--pad0{padding:0;overflow:hidden}
.v4-card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.v4-card-hd b{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:800;letter-spacing:-.03em}
.v4-card-hd b svg{color:var(--v4-blue);flex:none}
.v4-card-hd a,.v4-card-hd span.m{flex:none;font-size:13px;font-weight:600;color:var(--v4-sub)}

/* ── KPI 3연 ─────────────────────────────────────────────────── */
/* 히어로 위로 얹히는 카드 — 흰 테두리 한 겹 + 깊은 그림자로 떠 보이게 */
.v4-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--v4-card);border:1px solid rgba(255,255,255,.85);border-radius:16px;
  box-shadow:0 12px 30px rgba(6,42,28,.18), 0 2px 6px rgba(6,42,28,.06);padding:17px 8px}
.v4-kpi{text-align:center;padding:0 6px;position:relative;min-width:0}
.v4-kpi + .v4-kpi::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,rgba(230,235,232,0),var(--v4-line) 30%,var(--v4-line) 70%,rgba(230,235,232,0))}
.v4-kpi .l{display:block;font-size:13px;font-weight:600;color:var(--v4-sub)}
.v4-kpi .v{display:block;margin-top:7px;font-size:26px;font-weight:900;color:var(--v4-blue-600);
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-kpi .v small{font-size:14.5px;font-weight:700;color:var(--v4-sub);letter-spacing:-.02em}
.v4-kpi .v.na{font-size:18px;font-weight:700;color:var(--v4-faint)}
.v4-kpi .s{display:block;margin-top:5px;font-size:12.5px;font-weight:500;color:var(--v4-faint)}

.v4-stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.v4-stat{background:var(--v4-card);border:1px solid var(--v4-line);border-radius:13px;box-shadow:var(--v4-sh);
  padding:14px 10px;text-align:center;min-width:0}
.v4-stat .l{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--v4-sub)}
.v4-stat .l svg{color:var(--v4-blue);flex:none}
.v4-stat .v{display:block;margin-top:7px;font-size:23px;font-weight:900;letter-spacing:-.045em;
  color:var(--v4-blue-600);font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-stat .v.or{color:var(--v4-orange)}
.v4-stat .v small{font-size:13px;font-weight:700;color:var(--v4-sub)}
.v4-stat .s{display:block;margin-top:5px;font-size:12px;font-weight:500;color:var(--v4-faint);line-height:1.5}

/* ── 리스트 행 ───────────────────────────────────────────────── */
.v4-list{display:flex;flex-direction:column;gap:9px}
.v4-item{display:flex;align-items:center;gap:13px;min-height:62px;padding:14px;
  background:var(--v4-card);border:1px solid var(--v4-line);border-radius:13px;box-shadow:var(--v4-sh)}
.v4-item .ico{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--v4-tint);color:var(--v4-blue)}
.v4-item .tx{flex:1;min-width:0}
.v4-item .t{display:block;font-size:16px;font-weight:700;letter-spacing:-.03em}
.v4-item .d{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;font-weight:500;color:var(--v4-sub)}
.v4-item .go{flex:none;color:#BBC7C1;font-size:19px;font-weight:600;line-height:1}

/* ── 버튼 ───────────────────────────────────────────────────── */
.v4-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;border-radius:13px;font-size:17px;font-weight:800;color:#fff;border:0;
  background:linear-gradient(180deg,#17A462 0%,#0E7C4C 100%);
  box-shadow:0 6px 16px rgba(14,124,76,.28)}
/* 짙은 초록 히어로 위에서는 초록 버튼이 묻힌다 → 흰 버튼 + 초록 글자 */
.v4-hero .v4-cta{background:#fff;color:#0E7C4C;box-shadow:0 8px 20px rgba(4,26,17,.3)}
.v4-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;
  border-radius:11px;border:1px solid transparent;font-size:15px;font-weight:700;white-space:nowrap;
  background:var(--v4-blue);color:#fff}
.v4-btn--line{background:var(--v4-tint);color:var(--v4-green-tx);border-color:#CFE7DB}
.v4-btn--ghost{background:var(--v4-card);color:var(--v4-text);border-color:var(--v4-line)}
.v4-btn--sm{min-height:34px;padding:0 12px;font-size:13.5px;border-radius:9px}
.v4-btn--block{display:flex;width:100%}

/* ── 배지 · 칩 ───────────────────────────────────────────────── */
.v4-bdg{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;border-radius:999px;
  font-size:12.5px;font-weight:700;white-space:nowrap;line-height:1;background:var(--v4-line-2);color:var(--v4-sub)}
.v4-bdg--blue{background:var(--v4-tint);color:var(--v4-green-tx)}
.v4-bdg--fill{background:var(--v4-blue);color:#fff}
.v4-bdg--or{background:#DDF1E5;color:#0B5E3A}
.v4-bdg--orfill{background:var(--v4-blue);color:#fff}
.v4-bdg--live{background:#DDF1E5;color:#0B5E3A}
.v4-bdg--live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.v4-bdg--lock{background:#EFF1F0;color:#8C9993}
.v4-rg{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:29px;padding:0 10px;
  border-radius:999px;font-size:13.5px;font-weight:700;background:var(--v4-tint);color:var(--v4-green-tx)}

/* ── 세그먼트 · 필터 ─────────────────────────────────────────── */
.v4-seg{display:flex;gap:5px;padding:4px;border-radius:12px;background:var(--v4-line-2)}
.v4-seg a,.v4-seg button{flex:1;min-height:38px;border:0;border-radius:9px;background:transparent;
  font-size:14px;font-weight:700;color:var(--v4-sub);display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;padding:0 8px}
.v4-seg [aria-current],.v4-seg [aria-selected="true"]{background:var(--v4-blue);color:#fff}

.v4-filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 16px;margin:0 -16px}
.v4-filters::-webkit-scrollbar{display:none}
.v4-chip{flex:none;min-height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--v4-line);
  background:var(--v4-card);font-size:14px;font-weight:600;color:var(--v4-text);
  display:inline-flex;align-items:center;gap:6px}
.v4-chip[aria-current]{background:var(--v4-blue);border-color:var(--v4-blue);color:#fff;font-weight:700}
.v4-chip .n{font-weight:800}

/* ── 표 형태 행 ─────────────────────────────────────────────── */
.v4-rows{display:flex;flex-direction:column}
.v4-row{display:flex;align-items:center;gap:11px;padding:13px 14px;border-top:1px solid var(--v4-line-2)}
.v4-row:first-child{border-top:0}
.v4-row .no{flex:none;font-size:18px;font-weight:800;color:var(--v4-blue-600);letter-spacing:-.04em;min-width:34px}
.v4-row .mid{flex:1;min-width:0}
.v4-row .t{display:block;font-size:15px;font-weight:700;letter-spacing:-.03em}
.v4-row .d{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;font-weight:500;color:var(--v4-sub)}
.v4-row .rt{flex:none;text-align:right}

/* ── 안내 상자 ───────────────────────────────────────────────── */
.v4-note{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:12px;
  background:var(--v4-tint);border:1px solid #D7EEE1;font-size:13.5px;line-height:1.65;font-weight:500;color:#2A5544}
.v4-note svg{flex:none;color:var(--v4-blue);margin-top:1px}
.v4-note b{font-weight:800;color:#14543A}
.v4-note--warn{background:#F7F8F7;border-color:var(--v4-line);color:#54605A}
.v4-note--warn svg{color:#7C8B84}
.v4-note--warn b{color:#33403A}

/* ── 단계 ───────────────────────────────────────────────────── */
.v4-steps{display:flex;flex-direction:column;gap:10px}
.v4-step{display:flex;align-items:flex-start;gap:11px}
.v4-step i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--v4-tint);color:var(--v4-green-tx);
  font-style:normal;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.v4-step .tx{flex:1;min-width:0}
.v4-step .t{display:block;font-size:15px;font-weight:700;letter-spacing:-.03em}
.v4-step .d{display:block;margin-top:2px;font-size:13.5px;line-height:1.6;font-weight:500;color:var(--v4-sub)}

.v4-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;text-align:center}
.v4-flow > div{min-width:0;position:relative;padding:0 2px}
.v4-flow .c{width:44px;height:44px;margin:0 auto;border-radius:13px;background:var(--v4-tint);color:var(--v4-blue);
  display:flex;align-items:center;justify-content:center;position:relative}
.v4-flow .c i{position:absolute;top:-5px;left:-3px;width:19px;height:19px;border-radius:50%;
  background:var(--v4-blue);color:#fff;font-style:normal;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.v4-flow .t{display:block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:-.03em}
.v4-flow .d{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;font-weight:500;color:var(--v4-sub)}

/* ── 승식 저지 — 난이도 순 초록 농도 (무지개 색 대신) ──────── */
.v4-silk{flex:none;width:38px;height:34px;border-radius:9px 9px 11px 11px;display:flex;align-items:center;
  justify-content:center;font-size:11.5px;font-weight:800;color:#fff;letter-spacing:-.05em;white-space:nowrap}
.v4-silk--win {background:#8FD9B6;color:#0B3D2A}
.v4-silk--plc {background:#6ECBA0;color:#0B3D2A}
.v4-silk--qnl {background:#43B77F}
.v4-silk--exa {background:#22A45D}
.v4-silk--qpl {background:#12945B}
.v4-silk--trio{background:#0E7C4C}
.v4-silk--tri {background:#0B5E3A}

/* ── 2열 그리드 · 타일 · 혜택 목록 (MY 페이지) ───────────────── */
.v4-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.v4-tile{background:var(--v4-card);border:1px solid var(--v4-line);border-radius:13px;box-shadow:var(--v4-sh);
  padding:14px 12px;min-width:0;display:flex;align-items:center;gap:10px}
.v4-tile .ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--v4-tint);color:var(--v4-blue)}
.v4-tile .tx{min-width:0}
.v4-tile .l{display:block;font-size:12.5px;font-weight:600;color:var(--v4-sub)}
.v4-tile .v{display:block;margin-top:2px;font-size:17px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-tile .v small{font-size:12.5px;font-weight:700;color:var(--v4-sub);margin-left:1px}
.v4-tile .v.na{font-size:13.5px;font-weight:600;color:var(--v4-faint)}

.v4-feats{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.v4-feat{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;font-weight:500;color:var(--v4-sub)}
.v4-feat::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;margin-top:1px;
  background:var(--v4-tint) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C4C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/10px 10px no-repeat}
.v4-plan{background:var(--v4-card);border:1px solid var(--v4-line);border-radius:14px;box-shadow:var(--v4-sh);padding:16px}
.v4-plan--best{border:1.6px solid var(--v4-blue)}
.v4-plan--prem{border:1.6px solid var(--v4-orange);background:linear-gradient(180deg,#F4FBF7 0%,#FFFFFF 46%)}
.v4-plan .bd{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:800;background:var(--v4-blue);color:#fff}
.v4-plan--prem .bd{background:var(--v4-orange)}
.v4-plan .nm{display:block;margin-top:9px;font-size:19px;font-weight:800;letter-spacing:-.035em}
.v4-plan .pr{display:block;margin-top:4px;font-size:22px;font-weight:900;color:var(--v4-blue-600);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.v4-plan .ld{display:block;margin-top:5px;font-size:13px;font-weight:500;color:var(--v4-sub)}

/* ── 체크북 — 날짜 바 · 표 · 체크박스 ──────────────────────── */
.v4-datebar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,#0B3D2A 0%,#12694A 100%);border-radius:14px;padding:13px 10px;color:#fff}
.v4-datebar a,.v4-datebar span.nav{flex:none;width:34px;height:34px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;background:rgba(255,255,255,.14)}
.v4-datebar span.nav{opacity:.35}
.v4-datebar b{flex:1;text-align:center;font-size:17px;font-weight:800;letter-spacing:-.03em;
  display:flex;align-items:center;justify-content:center;gap:8px}

.v4-thead{display:grid;grid-template-columns:44px 40px 1fr;gap:8px;padding:9px 14px;
  background:var(--v4-line-2);font-size:12px;font-weight:700;color:var(--v4-sub)}
.v4-thead span:last-child{padding-left:2px}
.v4-nrow{display:grid;grid-template-columns:44px 40px minmax(0,1fr);gap:8px;align-items:center;
  padding:11px 14px;border-top:1px solid var(--v4-line-2)}
.v4-nrow > *{min-width:0}   /* grid 칸 기본 min-width:auto 가 입력칸 때문에 벌어지는 걸 막는다 */
.v4-thead{grid-template-columns:44px 40px minmax(0,1fr)}
.v4-nrow .no{font-size:14.5px;font-weight:800;color:var(--v4-blue-600);text-align:center;
  background:var(--v4-tint);border-radius:8px;padding:4px 0}
.v4-nrow .nm{font-size:15px;font-weight:700;letter-spacing:-.03em;display:block}
.v4-nrow .memo{margin-top:6px}
.v4-chk{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0 auto;display:block;
  border:2px solid #CBD6D0;border-radius:8px;background:#fff;cursor:pointer;position:relative}
.v4-chk:checked{background:var(--v4-blue);border-color:var(--v4-blue)}
.v4-chk:checked::after{content:"";position:absolute;left:7px;top:3px;width:7px;height:12px;
  border:solid #fff;border-width:0 2.6px 2.6px 0;transform:rotate(45deg)}
.v4-more-sum{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;cursor:pointer;
  border-top:1px dashed var(--v4-line);font-size:14px;font-weight:700;color:var(--v4-blue);list-style:none}
.v4-more-sum::-webkit-details-marker{display:none}
.v4-saved{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--v4-blue);
  opacity:0;transition:opacity .2s}
.v4-saved.on{opacity:1}

/* ── 드롭다운 (경주 선택) ───────────────────────────────────── */
.v4-sel{flex:1;min-width:0;min-height:40px;padding:0 34px 0 12px;border-radius:11px;
  border:1px solid var(--v4-line);background:var(--v4-card);color:var(--v4-text);
  font-size:16px;font-weight:800;letter-spacing:-.03em;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C4C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.v4-sel:focus{outline:none;border-color:var(--v4-blue)}

/* ── 마필 사진 타일 (추천마 카드) ───────────────────────────── */
.v4-hphoto{flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#0B3D2A 0%,#12694A 100%);display:flex;align-items:center;justify-content:center}
.v4-hphoto img{width:100%;height:100%;object-fit:cover;display:block}
.v4-hphoto .no{position:absolute;left:0;top:0;min-width:22px;height:20px;padding:0 5px;border-radius:0 0 8px 0;
  background:var(--v4-blue);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.v4-hphoto svg{color:rgba(255,255,255,.45)}
/* 사진이 없는 말 — 말 머리 그림(jtm_ui_horse_head). 목이 타일 아래로 잘려 나가는 초상 구도다.
   번호표(왼쪽 위)와 귀가 겹치지 않게 오른쪽 아래로 민다. */
.v4-hphoto .jt-hhead{position:absolute;left:9px;top:11px;width:56px;height:56px;color:rgba(255,255,255,.92)}

/* 말 → 마필 프로필. 줄 전체가 링크라 기본 밑줄·색을 지우고 누른 느낌만 남긴다 */
a.v4-row{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
a.v4-row:active{background:#EFF6F2}
.v4-row--go .mid .t::after{content:'›';margin-left:5px;color:#AFC3B7;font-weight:700}
.v4-hlink{display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.v4-hlink:active{opacity:.72}

/* ── 빈 상태 ────────────────────────────────────────────────── */
.v4-empty{padding:28px 16px;text-align:center;border-radius:13px;background:var(--v4-card);
  border:1px solid var(--v4-line);box-shadow:var(--v4-sh)}
.v4-empty b{display:block;font-size:15.5px;font-weight:700}
.v4-empty span{display:block;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--v4-sub)}

@media (max-width:360px){
  .v4-h1{font-size:28px} .v4-h1--xl{font-size:32px}
  .v4-kpi .v{font-size:22px} .v4-stat .v{font-size:20px}
}

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

/* ── 마필 프로필 모달 — 좁은 화면 숫자 잘림 ──
   '수득상금 2,100,000원' 같은 긴 값이 타일 밖으로 잘렸다.
   값 크기는 horse.php 가 인라인(style="font-size:26px")으로 박아서 !important 로만 이긴다. */
@media (max-width:430px){
  .jt-modal .jt-kpi{min-width:0}
  .jt-modal .jt-kpi .v{font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ══════════ 출전마 줄 — 마필 프로필 + 체크북 ══════════
   전 줄이 같은 무게라 밋밋했다. 값이 같은 항목(부담중량 55kg)은 낮추고,
   말마다 다른 값(마번·최근 착순)을 키워 훑을 때 차이가 보이게 한다. */
.v4-hrow{display:flex;align-items:center;gap:8px;padding:11px 12px 11px 14px;
  border-top:1px solid var(--v4-line-2)}
.v4-hrow:first-child{border-top:0}
.v4-hlink{display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.v4-hlink:active{opacity:.62}

/* 게이트(마번) — 레거시 출마표와 같은 팔레트라 같은 말이 늘 같은 색이다 */
.v4-gate{flex:none;width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--g,#0E7C4C);color:#fff;
  font-size:15px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(10,40,26,.18)}
.v4-gate--sm{width:27px;height:27px;border-radius:9px;font-size:13px;box-shadow:none}

.v4-hlink .mid{flex:1;min-width:0}
.v4-hlink .t{display:flex;align-items:center;gap:6px;min-width:0;
  font-size:15.5px;font-weight:800;letter-spacing:-.03em;color:var(--v4-text)}
.v4-hlink .t .kg{flex:none;font-size:11px;font-weight:700;color:var(--v4-sub);
  background:#F1F5F2;border-radius:5px;padding:2px 5px;letter-spacing:0}
/* 꺾쇠는 이름 옆이 아니라 '눌리는 영역'의 끝(체크북 버튼 왼쪽)에 하나만 둔다 */
.v4-hlink::after{content:'›';flex:none;margin-left:6px;
  color:#C2D3C9;font-weight:700;font-size:17px;line-height:1}
.v4-hlink .d{display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--v4-sub)}
/* 한 줄 고정은 출전마 목록에서만 — 추천마 카드에서 조교사 이름이 잘리면 안 된다 */
.v4-hrow .v4-hlink .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-list .v4-hlink::after{content:none}

/* 최근 착순 — 1착은 진하게, 3착 이내는 채움. 폼이 한눈에 잡힌다 */
.v4-ords{display:flex;align-items:center;gap:4px;margin-top:7px}
.v4-ords em{font-style:normal;font-size:11px;font-weight:600;color:var(--v4-faint);margin-right:2px}
.v4-ords i{font-style:normal;min-width:19px;height:19px;padding:0 4px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#EEF2F0;color:#84948B;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.v4-ords i.in{background:#CDEADB;color:#0B5E3A}
.v4-ords i.in.w{background:var(--v4-blue);color:#fff}

/* 체크북 담기 */
.v4-bk{flex:none;width:38px;height:38px;padding:0;border-radius:12px;
  border:1px solid var(--v4-line);background:#fff;color:#A6BAAE;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s}
.v4-bk svg{width:19px;height:19px}
.v4-bk.on{background:var(--v4-blue);border-color:var(--v4-blue);color:#fff}
.v4-bk.on svg{fill:currentColor}
.v4-bk:active{transform:scale(.94)}
.v4-bk:disabled{opacity:.45}

/* ── 주목마 TOP 3 — 순위 메달 + 점수 막대 ── */
.v4-medal{flex:none;width:23px;height:23px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:900;background:#EEF2F0;color:#7C8B84}
.v4-medal.m1{background:linear-gradient(135deg,#F7D072,#D9A02E);color:#463206}
.v4-medal.m2{background:#DCE4E0;color:#57685F}
.v4-medal.m3{background:#EFDFCC;color:#77572F}
.v4-sc{display:block;font-size:17px;font-weight:900;color:var(--v4-blue-600);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-align:right}
.v4-scbar{display:block;width:50px;height:4px;margin:5px 0 0 auto;border-radius:99px;
  background:#E7EDEA;overflow:hidden}
.v4-scbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#12945B,#0E7C4C)}

/* 2칸 타일이 한 칸씩 어긋나 보이던 것 —
   `.v4 .v4-card{margin-top:10px}` 가 첫 칸만 비껴가서 첫 타일이 10px 위로 떠 있었다.
   격자 안에서는 줄 간격을 gap 이 맡으므로 카드 margin 을 끈다(선택자를 한 단계 더 세게). */
.v4-grid2{align-items:stretch}
.v4 .v4-grid2 > .v4-card, .v4 .v4-grid2 > *{margin-top:0}

/* ══════════ MY 페이지 (시안 2종: 로그인 · 비로그인) ══════════
   ⚠ 시안은 파랑/주황이지만 색은 우리 초록을 쓴다.
     포인트·추천처럼 '보상'을 가리키는 자리만 따뜻한 앰버로 — 로그인 화면 추천 배너와 같은 색. */

/* 공통 버튼 변형 */
.v4-btn--warm{background:linear-gradient(135deg,#E8A33A,#D2831B);border-color:transparent;color:#fff;
  box-shadow:0 7px 16px rgba(190,120,20,.24)}
.v4-btn--ghostw{background:rgba(255,255,255,.10);border:1.4px solid rgba(255,255,255,.42);color:#fff}
.v4-btn svg{flex:none}

/* ── 비로그인: 로그인 카드 ── */
.v4-authcard{margin-top:14px;text-align:center}
.v4-authcard .av{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:2px auto 0;
  border-radius:50%;background:var(--v4-tint);color:#7FA893}
.v4-authcard .tx b{display:block;margin-top:11px;font-size:19px;font-weight:900;letter-spacing:-.035em}
.v4-authcard .tx span{display:block;margin-top:5px;font-size:13.5px;line-height:1.6;font-weight:500;color:var(--v4-sub)}
.v4-authbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}

/* ── 비로그인: 친구 추천 혜택 / 체크북 잠금 (2칸) ── */
.v4-refcard,.v4-lockcard{display:flex;flex-direction:column;padding:15px 13px 14px;margin-top:0}
.v4-refcard .hd,.v4-lockcard .hd{display:block;font-size:17px;font-weight:900;letter-spacing:-.04em}
.v4-refcard .sb,.v4-lockcard .sb{display:block;margin-top:5px;font-size:12px;line-height:1.55;
  font-weight:600;color:var(--v4-sub)}
.v4-refcard .illu,.v4-lockcard .illu{display:flex;align-items:center;justify-content:center;
  height:74px;margin:10px 0 4px;color:#D9A02E}
.v4-refcard .pts{display:flex;align-items:stretch;text-align:center;margin:6px 0 11px}
.v4-refcard .pts span{flex:1;min-width:0}
.v4-refcard .pts span + span{border-left:1px solid var(--v4-line-2)}
.v4-refcard .pts em{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--v4-sub)}
.v4-refcard .pts b{display:block;margin-top:2px;font-size:20px;font-weight:900;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-refcard .pts b.a{color:#B45309}
.v4-refcard .pts b.b{color:var(--v4-blue)}
.v4-refcard .v4-btn{margin-top:auto}

.v4-lockcard{background:linear-gradient(160deg,#0B3D2A 0%,#12694A 100%);border-color:#12694A;color:#fff}
.v4-lockcard .sb{color:#A9C9B9}
.v4-lockcard .illu{color:#8FE0B6}
.v4-lockcard .cta{display:block;margin-top:auto;padding:11px 10px;border-radius:12px;
  background:rgba(255,255,255,.14);color:#EAF6F0;text-align:center;text-decoration:none;
  font-size:12.5px;line-height:1.5;font-weight:700}

/* ── 로그인: 프로필 ── */
.v4-prof{margin-top:14px;padding:16px 15px 14px;color:#fff;border-color:#12694A;
  background:linear-gradient(140deg,#072E20 0%,#0B3D2A 48%,#12694A 100%)}
.v4-prof .top{display:flex;align-items:flex-start;gap:12px}
.v4-prof .av{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;color:#fff}
.v4-prof .nm{flex:1;min-width:0}
.v4-prof .nm a{display:inline-block;font-size:19px;font-weight:900;letter-spacing:-.04em;
  color:#fff;text-decoration:none}
.v4-prof .nm em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;font-weight:500;color:#A9C9B9}
.v4-prof .chg{flex:none;display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 13px;
  border-radius:11px;background:linear-gradient(135deg,#17A867,#0E7C4C);color:#fff;
  font-size:13.5px;font-weight:800;text-decoration:none;box-shadow:0 5px 14px rgba(0,0,0,.22)}
.v4-prof .stats{display:flex;align-items:center;gap:0;margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.16)}
.v4-prof .s{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 9px;
  color:#fff;text-decoration:none}
.v4-prof .s + .s{border-left:1px solid rgba(255,255,255,.16)}
.v4-prof .s:first-child{padding-left:0}
.v4-prof .s i{flex:none;color:#7FD3A8}
.v4-prof .s b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.v4-prof .s em{display:block;margin-top:1px;font-style:normal;font-size:11px;font-weight:600;color:#9BC0AE}
.v4-prof .s--pt{flex:1.25;padding-right:0}
.v4-prof .s--pt .pw{min-width:0;flex:1}
.v4-prof .s--pt em{margin:0 0 1px}
.v4-prof .s--pt b{font-size:18px;font-weight:900;color:#FFD98A;font-variant-numeric:tabular-nums}
.v4-prof .s--pt .go{flex:none;color:rgba(255,255,255,.7);font-size:17px;font-weight:700}

/* ── 로그인: 내 체크북 ── */
.v4-nt .hd{display:flex;align-items:center;gap:8px}
.v4-nt .hd b{font-size:18px;font-weight:900;letter-spacing:-.04em}
.v4-nt .bd{display:flex;align-items:center;gap:12px;margin-top:12px}
.v4-nt .illu{flex:none;width:112px}
.v4-nt .illu svg{width:100%;height:auto;display:block}
.v4-nt .rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.v4-nt .r{display:flex;align-items:center;gap:9px;min-height:50px;padding:9px 11px;border-radius:12px;
  background:var(--v4-tint);border:1px solid #D7EEE1;text-decoration:none;color:inherit}
.v4-nt .r .rg{flex:none;padding:4px 9px;border-radius:8px;background:#fff;border:1px solid #CBE4D6;
  font-size:12.5px;font-weight:800;color:var(--v4-green-tx,#14543A);white-space:nowrap}
.v4-nt .r .tx{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--v4-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-nt .r .tx b{color:var(--v4-text);font-weight:800}
.v4-nt .r .go{flex:none;color:#9CB6A7;font-size:17px;font-weight:700}
.v4-nt .none{padding:10px 2px;font-size:12.5px;line-height:1.6;color:var(--v4-sub)}
.v4-nt .none b{display:block;margin-bottom:3px;font-size:13.5px;font-weight:800;color:var(--v4-text)}

/* ── 로그인: 친구 추천 포인트 (다크) ── */
.v4-refdark{position:relative;overflow:hidden;padding:17px 15px 15px;color:#fff;border-color:#12694A;
  background:linear-gradient(140deg,#072E20 0%,#0B3D2A 52%,#12694A 100%)}
.v4-refdark .illu{position:absolute;right:12px;top:16px;color:#E8B65C;opacity:.9}
.v4-refdark .kick{display:block;font-size:12.5px;font-weight:700;color:#8FBFA8}
.v4-refdark .hd{display:block;margin-top:4px;font-size:22px;font-weight:900;letter-spacing:-.045em}
.v4-refdark .sb{display:block;margin-top:5px;font-size:12.5px;font-weight:500;color:#A9C9B9}
.v4-refdark .pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}
.v4-refdark .pts span{padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.12);text-align:center}
.v4-refdark .pts em{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:#A9C9B9}
.v4-refdark .pts b{display:block;margin-top:2px;font-size:20px;font-weight:900;color:#FFD98A;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.v4-refdark .btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.v4-refdark .btns .v4-btn{font-size:13px;padding:0 8px}
.v4-refdark .fine{margin:10px 0 0;font-size:11.5px;line-height:1.6;font-weight:500;color:#9BC0AE}
.v4-refdark .fine b{color:#DCEFE5;font-weight:800}

/* ── 3칸 미니 타일 ── */
.v4-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v4-mini{display:flex;align-items:center;gap:7px;min-width:0;padding:11px 9px;border-radius:12px;
  background:var(--v4-bg2,#F5F8F6);border:1px solid var(--v4-line-2);text-decoration:none;color:inherit}
.v4-mini .ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--v4-tint);color:var(--v4-blue);
  display:flex;align-items:center;justify-content:center}
.v4-mini .tx{flex:1;min-width:0}
.v4-mini .l{display:block;font-size:11.5px;font-weight:600;color:var(--v4-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-mini .v{display:block;margin-top:1px;font-size:15.5px;font-weight:900;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-mini .v small{font-size:11.5px;font-weight:700;color:var(--v4-sub);margin-left:1px}
.v4-mini .v.na{font-size:13px;font-weight:700;color:var(--v4-faint)}
.v4-mini .go{flex:none;color:#B6C6BD;font-size:15px;font-weight:700}
.v4-mini--lnk .l{font-size:12.5px;font-weight:800;color:var(--v4-text)}

.v4-minirow{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--v4-line-2)}
.v4-minirow a{font-size:12.5px;font-weight:600;color:var(--v4-sub);text-decoration:none}

@media (max-width:360px){
  .v4-nt .illu{width:88px}
  .v4-refdark .hd{font-size:19px}
  .v4-mini{flex-direction:column;align-items:flex-start;gap:5px}
  .v4-mini .go{display:none}
}

/* ══════════ 체크북 — 비로그인 안내 ══════════
   ⚠ 섹션 이름은 v4-notebook 이다. v4-note 는 '안내 상자' 컴포넌트라 겹치면
     페이지 전체가 그 규칙(display:flex · 연초록 배경)을 뒤집어쓴다. */
.v4-nbklock{margin-top:14px;text-align:center;padding:18px 16px 16px}
.v4-nbklock .illu{display:block;width:150px;margin:0 auto 4px}
.v4-nbklock .illu svg{width:100%;height:auto;display:block}
.v4-nbklock > b{display:block;margin-top:8px;font-size:18px;font-weight:900;letter-spacing:-.04em}
.v4-nbklock .d{display:block;margin-top:7px;font-size:13px;line-height:1.7;font-weight:500;color:var(--v4-sub)}
.v4-nbklock .btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}

/* 3단계 흐름 (기본 .v4-flow 는 4칸) */
.v4-flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── MY 프로필 3칸이 393px 에서 겹치던 것 ──
   아이콘을 옆에 두니 '가입일'·'보유 포인트' 라벨이 값과 부딪혔다. 세로로 세운다. */
.v4-prof .stats{align-items:stretch}
.v4-prof .s{flex-direction:column;align-items:flex-start;gap:5px;padding:0 8px;text-align:left}
.v4-prof .s i{display:flex}
.v4-prof .s b{font-size:13px;letter-spacing:-.04em}
.v4-prof .s em{margin-top:0;font-size:10.5px}
.v4-prof .s--pt{flex:1.15}
.v4-prof .s--pt .pw{display:block;width:100%}
.v4-prof .s--pt b{font-size:17px}
.v4-prof .s--pt .go{position:absolute;right:0;bottom:2px}
.v4-prof .s--pt{position:relative;padding-right:14px}

/* 체크북 카드 안 '아직 담은 말이 없습니다' 가 일러스트에 눌려 3줄로 꺾였다 */
.v4-nt .none{padding:4px 2px}
.v4-nt .none span{display:block;margin-top:2px}
@media (max-width:400px){
  .v4-nt .bd{flex-direction:column;align-items:stretch;gap:10px}
  .v4-nt .illu{width:132px;margin:0 auto}
}

/* 체크북 카드 빈 상태 — 일러스트가 커서 문구가 4줄로 꺾였다 */
.v4-nt .bd:has(.none){flex-direction:column;align-items:center;text-align:center}
.v4-nt .bd:has(.none) .illu{width:104px}
.v4-nt .none{padding:2px 4px 0;text-align:center}
.v4-nt .none em{font-style:normal;font-weight:800;color:var(--v4-text)}

/* ── 좁은 기기(갤럭시 Z플립 360px 등) — 비로그인 MY 2칸 ──
   360px 에서 '3,000P' 가 칸을 3px 넘겨 구분선을 침범하고,
   '친구 추천하고 가입하기' 글자가 버튼 밖으로 나갔다.
   ⚠ 등분 칸은 minmax(0,1fr) + min-width:0 이라야 내용이 칸을 밀지 않는다. */
.v4-refcard .pts span{min-width:0}
.v4-refcard .pts b{font-size:clamp(15px,5.2vw,20px);letter-spacing:-.05em}
.v4-refdark .pts b{font-size:clamp(16px,5.4vw,20px);letter-spacing:-.05em}
.v4-refcard .v4-btn,.v4-lockcard .v4-btn,.v4-refdark .btns .v4-btn{
  height:auto;min-height:46px;padding:9px 10px;line-height:1.3;white-space:normal;text-align:center}
.v4-authbtns .v4-btn{padding:0 8px}

@media (max-width:380px){
  .v4-duo{grid-template-columns:minmax(0,1fr)}      /* 두 칸을 세로로 세운다 */
  .v4-refcard .illu,.v4-lockcard .illu{height:58px;margin:8px 0 2px}
  .v4-lockcard .cta{margin-top:10px}
  .v4-refdark .btns{grid-template-columns:minmax(0,1fr)}
  .v4-prof .s b{font-size:12px}
  .v4-prof .s em{font-size:10px}
  .v4-grid3{gap:6px}
  .v4-mini{padding:10px 7px}
}


/* ── 초록 채움 버튼은 언제나 흰 글자 ──
   ⚠ 원인: 위쪽 `.v4 a{color:inherit}` 는 (0,1,1) 이라 `.v4-btn`/`.v4-cta` (0,1,0) 를 이긴다.
     같은 블록의 background 는 경쟁자가 없어 그대로 먹히니 **앵커 버튼만** 초록 배경에
     어두운 글자가 됐다(대비 2.8:1). <button> 은 앵커가 아니라 멀쩡했다 — 그래서 눈에 덜 띄었다.
     버튼류만 한 단계 위(0,2,0)에서 다시 못 박는다. 변형은 반드시 기본 뒤에 온다. */
.v4 .v4-btn,.v4 .v4-cta{color:#fff}
.v4 .v4-btn--warm,.v4 .v4-btn--ghostw{color:#fff}
.v4 .v4-btn--line{color:var(--v4-green-tx)}
.v4 .v4-btn--ghost{color:var(--v4-text)}
.v4 .v4-hero .v4-cta{color:#0E7C4C}   /* 짙은 히어로 위에서는 흰 버튼 + 초록 글자 */

/* ══════════ 메인 — 오늘의 마추 성적 카드 (시안) ══════════
   히어로를 물고 올라오는 짙은 초록 카드. 숫자는 오늘 정산된 실제 값만 들어간다. */
.v4-today{
  position:relative;overflow:hidden;padding:16px 15px 15px;border-radius:20px;color:#fff;
  border:1px solid #17825A;
  background:linear-gradient(150deg,#07321F 0%,#0B4A31 46%,#116A48 100%);
  box-shadow:0 16px 34px rgba(5,30,19,.30)}
.v4-today .hd{display:flex;align-items:center;gap:8px;position:relative}
.v4-today .tro{flex:none;color:#F2C86A}
.v4-today .bdg{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 11px;
  border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:11.5px;font-weight:800;letter-spacing:.06em}
.v4-today .hd b{font-size:16px;font-weight:800;letter-spacing:-.035em}
/* 손글씨 한 줄 — 폰트가 없으면 그냥 기울임으로 떨어진다 */
.v4-today .hand{position:absolute;right:0;top:-4px;text-align:right;
  font-family:'Nanum Pen Script','Gaegu',cursive;font-size:19px;line-height:1.15;
  color:#8FE0B6;transform:rotate(-6deg);pointer-events:none}

.v4-today .main{display:flex;align-items:center;gap:12px;margin-top:12px}
.v4-today .rate{position:relative;flex:1.15;min-width:0;text-align:center;padding:2px 0}
.v4-today .rate .laurel{position:absolute;inset:0;width:100%;height:100%;
  color:rgba(143,224,182,.34);pointer-events:none}
.v4-today .rate .l{display:block;font-size:13px;font-weight:700;color:#A9C9B9}
.v4-today .rate .v{display:block;margin-top:1px;font-size:40px;font-weight:900;letter-spacing:-.05em;
  color:#8FE0B6;font-variant-numeric:tabular-nums;line-height:1.05}
.v4-today .rate .v small{font-size:20px;font-weight:800;margin-left:1px}
.v4-today .sum{flex:1;min-width:0;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.v4-today .sum .l{display:block;font-size:12.5px;font-weight:600;color:#A9C9B9}
.v4-today .sum b{display:block;margin-top:3px;font-size:15px;font-weight:800;letter-spacing:-.035em;line-height:1.45}
.v4-today .sum em{font-style:normal;color:#8FE0B6}

.v4-today .cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:7px;margin-top:13px}
.v4-today .c{min-width:0;padding:9px 8px;border-radius:12px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);text-align:center}
.v4-today .c .k{display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:11.5px;font-weight:600;color:#A9C9B9;white-space:nowrap}
.v4-today .c b{display:block;margin-top:3px;font-size:15px;font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v4-today .c b small{font-size:12px;font-weight:700;color:#BFE0CF}
.v4-today .fine{margin:9px 0 0;text-align:center;font-size:11px;font-weight:500;color:#8FB7A3}

/* 짙은 카드 위의 흰 버튼 */
.v4-cta--w{background:#fff;color:#0E7C4C;box-shadow:0 8px 18px rgba(4,26,17,.28)}
.v4 .v4-cta--w{color:#0E7C4C}
.v4-today .v4-cta{margin-top:13px}

@media (max-width:380px){
  .v4-today .rate .v{font-size:34px}
  .v4-today .rate .v small{font-size:17px}
  .v4-today .hand{font-size:16px}
  .v4-today .sum b{font-size:13.5px}
  /* ⚠ 2칸으로 접으면 세 번째 칸이 혼자 다음 줄로 떨어져 카드가 깨져 보인다.
     칸 수는 그대로 두고 글자만 줄인다(Z플립 360px 기준으로 맞췄다). */
  .v4-today .cells{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .v4-today .c{padding:8px 4px}
  .v4-today .c .k{font-size:10.5px;gap:3px}
  .v4-today .c .k svg{width:12px;height:12px}
  .v4-today .c b{font-size:13.5px}
  .v4-today .c b small{font-size:11px}
}


/* ── 메인 히어로를 시안 비율로 ──
   CTA 를 '오늘의 마추 성적' 카드 아래로 옮겨서 히어로 아래 여백(96px)이 남아 돌았다.
   제목이 화면 한가운데로 내려가 사진만 커 보이던 것을 시안처럼 위로 올린다. */
/* ⚠ .v4-hero--tall 은 `justify-content:flex-end` 라 글자를 히어로 '바닥'으로 민다.
   높이만 줄이면 위쪽에 사진만 있는 빈 공간이 그대로 남는다(시안보다 300px 넘게 아래였다).
   메인은 글자를 **위에서부터** 쌓고, 아래 여백은 성적 카드가 물고 올라올 자리만 남긴다. */
.v4-home .v4-hero--tall{
  min-height:0;justify-content:flex-start;
  padding-top:22px;padding-bottom:92px}
/* 성적 카드가 있을 때는 히어로를 더 깊게 물고 올라온다 */
.v4-home .v4-wrap--lift{margin-top:-74px}

/* 시안대로 왼쪽 정렬 — 가운데 정렬용 장식(양쪽 선·가운데 배치)을 끈다 */
.v4-home .v4-htx:not(.v4-htx--c) .v4-pills{justify-content:flex-start}
.v4-home .v4-htx:not(.v4-htx--c) .v4-rule{justify-content:flex-start}
.v4-home .v4-htx:not(.v4-htx--c) .v4-rule::before{display:none}

/* 월계수는 숫자 뒤가 아니라 양옆에 — 가운데를 비워 숫자가 또렷하게 */
.v4-today .rate .laurel{width:142%;height:126%;left:-21%;top:-13%;
  color:rgba(143,224,182,.34);
  -webkit-mask-image:linear-gradient(90deg,#000 0 20%,transparent 30% 70%,#000 80% 100%);
          mask-image:linear-gradient(90deg,#000 0 20%,transparent 30% 70%,#000 80% 100%)}


/* ── Z플립 360px — 히어로 3특징과 '오늘 종료 경기' 줄바꿈 ──
   · 3특징(더 빠른 분석·더 깊은 데이터·더 높은 적중률)이 2줄로 꺾여 히어로가 들쭉날쭉했다.
   · '15경기 중 10경기 적중' 이 '…10경기 / 적중' 으로 잘려 읽혔다 —
     끊을 거면 뜻 단위로 끊는다: '15경기 중' / '10경기 적중'. */
@media (max-width:380px){
  .v4-home .v4-pills{gap:9px;margin-top:12px}
  .v4-home .v4-pill{font-size:11.5px;gap:4px}
  .v4-home .v4-pill svg{width:13px;height:13px}
  .v4-today .sum b em{display:block}
  .v4-today .sum b{font-size:14px;line-height:1.35}
  .v4-today .main{gap:10px}
  .v4-today .sum{padding-left:10px}
}
@media (max-width:340px){
  .v4-home .v4-pill{font-size:10.5px}
  .v4-today .c .k{font-size:10px}
  .v4-today .c b{font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════════
   색 정리 — 초록은 '브랜드와 강조'로 돌려보낸다 (2026-09-18)

   문제: 배경·선·글자·아이콘 타일까지 전부 민트 톤이라 화면 전체가 초록으로 물들었다.
        그러니 정작 중요한 초록(적중·주 버튼)이 묻힌다.
   처방: **바탕은 중립(슬레이트)** 으로 빼고, 색은 뜻이 있을 때만 쓴다.
        초록 = 브랜드·확정·적중 / 인디고 = 데이터·정보 / 앰버 = 보상·프리미엄 / 코랄 = 진행·임박
   ⚠ 토큰 이름은 그대로 둔다(여러 화면이 쓴다). 값만 바꾼다.
   ══════════════════════════════════════════════════════════════ */
.v4{
  /* 바탕·선·글자에서 초록기를 뺀다 */
  --v4-bg:#F4F6F7;
  --v4-line:#E4E8EA; --v4-line-2:#EFF1F3;
  --v4-text:#16212B; --v4-sub:#5C6873; --v4-faint:#98A2AC;
  --v4-sh:0 1px 2px rgba(22,33,43,.05);
  --v4-sh-lift:0 6px 18px rgba(22,33,43,.09);

  /* 액센트 — 뜻이 있는 색만 */
  --v4-info:#2F5FD0;  --v4-info-tint:#EDF2FD; --v4-info-tx:#23499F;
  --v4-warm:#C9821C;  --v4-warm-tint:#FFF5E4; --v4-warm-tx:#8A5A10;
  --v4-hot:#C2553F;   --v4-hot-tint:#FCEEEB;  --v4-hot-tx:#9B3E2B;
  --v4-slate:#4A5560; --v4-slate-tint:#EFF1F3;
}
.v4{background:var(--v4-bg);color:var(--v4-text)}

/* 기본 아이콘 타일은 중립으로 — 전부 민트였다 */
.v4-item .ico,.v4-tile .ic,.v4-mini .ic{
  background:var(--v4-slate-tint);color:var(--v4-slate)}

/* 뜻에 따라 칠한다 */
.v4-item .ico--info,.v4-tile .ic--info,.v4-mini .ic--info{
  background:var(--v4-info-tint);color:var(--v4-info)}
.v4-item .ico--warm,.v4-tile .ic--warm,.v4-mini .ic--warm{
  background:var(--v4-warm-tint);color:var(--v4-warm)}
.v4-item .ico--go,.v4-tile .ic--go,.v4-mini .ic--go{
  background:var(--v4-tint);color:var(--v4-blue)}
.v4-item .ico--hot,.v4-mini .ic--hot{
  background:var(--v4-hot-tint);color:var(--v4-hot)}

/* 배지 — 상태마다 다른 색이라야 훑을 때 구분된다 */
.v4-bdg--info{background:var(--v4-info-tint);color:var(--v4-info-tx)}
.v4-bdg--warm{background:var(--v4-warm-tint);color:var(--v4-warm-tx)}
.v4-bdg--live{background:var(--v4-hot-tint);color:var(--v4-hot-tx)}
.v4-bdg--muted{background:var(--v4-slate-tint);color:var(--v4-sub)}

/* KPI 세 칸 — 셋 다 초록이라 눈이 멈출 곳이 없었다 */
.v4-kpi:nth-child(2) .v{color:var(--v4-info)}
.v4-kpi:nth-child(3) .v{color:var(--v4-slate)}

/* 링크 화살표·구분선도 중립으로 */
.v4-item .go,.v4-mini .go,.v4-hlink::after{color:#B4BCC4}

/* 입력칸·표 바탕에서도 민트기를 뺀다 */
.v4-sel,.v4-memo,.v4-seg{background:#F2F4F6;border-color:var(--v4-line)}
.v4-ords i{background:#EDF0F2;color:#6E7983}

/* 짙은 카드(히어로·프로필·성적)는 초록 유지 — 브랜드가 사는 자리다 */


/* 분석 = 데이터(인디고) · 픽 = 브랜드(초록). 둘 다 초록이면 어느 쪽이 '픽'인지 안 보인다 */
.v4-btn--info{background:var(--v4-info-tint);color:var(--v4-info-tx);border-color:#D4E0F8}
.v4 .v4-btn--info{color:var(--v4-info-tx)}

/* 경마장 칩 줄은 '선택'이 아니라 경주 수 표시 — 채우지 않고 숫자만 초록 */
.v4-filters--count .v4-chip[aria-current]{background:var(--v4-card);border-color:var(--v4-line);color:var(--v4-text)}
.v4-filters--count .v4-chip[aria-current] .n{color:var(--v4-blue-600)}
.v4-filters--count .v4-chip{color:var(--v4-faint)}

/* 픽 마명은 본문색으로 — 마번만 초록이면 충분하다 */
.v4-row .mid .t .nm{color:var(--v4-text)}


/* ── 상태와 액션을 색의 '농도'로 가른다 ──
   한 줄에 '적중'(상태)과 '픽'(버튼)이 둘 다 진한 초록이라 무엇이 눌리는지 헷갈렸다.
   → 상태 배지는 전부 연한 톤, **채워진 초록은 픽 버튼 하나만** 남긴다. */
.v4-bdg--hit{background:#DCF0E5;color:#0B5E3A;font-weight:800}
.v4-bdg--hit::before{content:"✓";margin-right:1px;font-weight:900}


/* ── 반복되는 버튼은 채우지 않는다 ──
   경기 일정은 행마다 [분석][픽] 이 붙는다. 진초록 채움이 16개 늘어서면 화면이 초록으로 덮이고
   정작 '적중' 같은 상태 표시가 묻힌다. 반복 버튼은 아웃라인, 채움은 화면당 한두 개만. */
.v4-btn--pick{background:var(--v4-card);color:var(--v4-blue);border-color:#BFDACB}
.v4 .v4-btn--pick{color:var(--v4-blue)}

/* 말 사진 타일 — 사진이 없으면 마번(게이트) 색으로. 세 장이 같은 초록이면 한 덩어리로 보인다 */
.v4-hphoto{background:var(--g,var(--v4-blue))}


/* ── 승식 저지: 초록 농도 7단계 → 승식마다 다른 색 ──
   같은 색의 명암만으로 7종을 가르려니 옆에 두고도 구분이 안 됐다.
   경마 저지(기수복)처럼 승식마다 고유색을 준다 — 난이도 순서는 왼→오른쪽 배치가 이미 말해 준다. */
.v4-silk--win {background:#2F5FD0;color:#fff}   /* 단승   — 인디고 */
.v4-silk--plc {background:#0E7C4C;color:#fff}   /* 연승   — 초록 */
.v4-silk--qnl {background:#96600E;color:#fff}   /* 복승   — 앰버(흰 글자 5.3:1) */
.v4-silk--exa {background:#7A49B8;color:#fff}   /* 쌍승   — 보라 */
.v4-silk--qpl {background:#256F87;color:#fff}   /* 복연승 — 청록 */
.v4-silk--trio{background:#C2553F;color:#fff}   /* 삼복승 — 코랄 */
.v4-silk--tri {background:#4A5560;color:#fff}   /* 삼쌍승 — 슬레이트 */


/* '오늘은 경기가 없습니다' 안내 — 정보(인디고)로, 맨 위에서 먼저 읽히게 */
.v4-note--day{margin-top:14px;background:var(--v4-info-tint);border-color:#D4E0F8;color:#1F3E7A}
.v4-note--day svg{color:var(--v4-info)}
.v4-note--day b{color:#16306B;font-weight:800}


/* ══════════ 메인 맨 아래 — 경기 예정일 ══════════
   '다음은 언제 열리나' 를 마지막에 한 번 더 알려 준다. 없는 일정은 적지 않는다. */
.v4-sched{margin-top:14px;padding:15px 14px 13px;border-radius:16px;
  background:var(--v4-card);border:1px solid var(--v4-line);box-shadow:var(--v4-sh)}
.v4-sched .hd{display:flex;align-items:center;gap:8px}
.v4-sched .hd .ic{flex:none;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--v4-info-tint);color:var(--v4-info)}
.v4-sched .hd b{flex:1;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.035em}
.v4-sched .hd a{flex:none;font-size:12.5px;font-weight:700;color:var(--v4-sub);text-decoration:none}

.v4-sched .r{display:flex;align-items:center;gap:9px;padding:11px 2px;
  border-top:1px solid var(--v4-line-2);text-decoration:none;color:inherit}
.v4-sched .r:first-of-type{margin-top:8px}
.v4-sched .r .d{flex:none;min-width:74px;font-size:14px;font-weight:800;letter-spacing:-.03em}
.v4-sched .r .d em{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;
  background:var(--v4-tint);color:var(--v4-green-tx);font-style:normal;font-size:10.5px;font-weight:800}
.v4-sched .r .m{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--v4-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-sched .r .n{flex:none;font-size:14.5px;font-weight:900;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.v4-sched .r .n small{font-size:11.5px;font-weight:700;color:var(--v4-sub);margin-left:1px}
.v4-sched .r .go{flex:none;color:#B4BCC4;font-size:16px;font-weight:700}
.v4-sched .r--last .d{color:var(--v4-sub)}

.v4-sched .none{margin:10px 0 0;padding:12px 12px;border-radius:12px;
  background:var(--v4-info-tint);border:1px solid #D4E0F8;
  font-size:13px;line-height:1.65;font-weight:600;color:#1F3E7A}
.v4-sched .fine{margin:10px 0 0;font-size:11.5px;line-height:1.6;font-weight:500;color:var(--v4-faint)}

@media (max-width:380px){
  .v4-sched .r .d{min-width:66px;font-size:13px}
  .v4-sched .r .m{font-size:11.5px}
}

/* 배지 + 제목 줄 나누기 — 한 줄에 두면 긴 제목이 배지 아래로 파고들어 잘린 것처럼 보인다.
   (대표 지적: 초록색 옆으로 해버리니까 짤리는것같아) */
.v4-row .t.v4-t--stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.v4-row .t.v4-t--stack .v4-bdg{flex:none}
.v4-row .t.v4-t--stack .tt{display:block;font-size:15px;font-weight:700;letter-spacing:-.03em;
  line-height:1.4;color:var(--v4-text);word-break:keep-all}

/* ══ 홈 바로가기 (v4-hub) — 2026-10-02 ═══════════════════════════════════════════════
   같은 모양 카드 9장이 한 줄로 서 있어 눈이 멈출 곳이 없었다(대표 "영 모양이 안 선다").
   순서는 그대로 두고, 뜻이 같은 것끼리 다섯 덩어리로 묶었다.
     ① 핵심 도구 둘(분석 · 적중률)  ② 이용권  ③ 안내 둘  ④ 오늘 경주 — 다음 발주 시각을 크게  ⑤ 그 밖 둘
   덩어리 안은 선 하나로 붙이고, 덩어리 사이는 띄운다. 색은 뜻이 있을 때만 쓴다 —
   이용권 = 따뜻한 바탕(보상·프리미엄) · 다음 발주 시각 = 코랄(임박). 초록 채움은 위의 '마추픽 보기' 하나뿐이다. */
.v4-hub{display:flex;flex-direction:column;gap:12px;margin-top:16px;--hub-warm-line:#F1DFBD}
.v4-hub a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.v4-hub a:focus-visible{outline:2px solid var(--v4-blue);outline-offset:-2px}
.v4-hub .ic{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--v4-slate-tint);color:var(--v4-slate)}
.v4-hub .ic--info{background:var(--v4-info-tint);color:var(--v4-info)}
.v4-hub .ic--warm{background:var(--v4-warm-tint);color:var(--v4-warm)}
.v4-hub .ic--go{background:var(--v4-tint);color:var(--v4-blue)}
.v4-hub .ic--hot{background:var(--v4-hot-tint);color:var(--v4-hot)}
.v4-hub .go{flex:none;color:#B4BCC4;font-size:18px;font-weight:600;line-height:1}
.v4-hub .tx{flex:1;min-width:0}

/* ① 핵심 도구 둘 — 한 판을 세로선으로 나눈다(카드 두 장이 아니다) */
.v4-hub-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;
  background:var(--v4-card);border:1px solid var(--v4-line);border-radius:16px;box-shadow:var(--v4-sh)}
.v4-hub-duo .c{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:120px;padding:14px 14px 15px}
.v4-hub-duo .c + .c{border-left:1px solid var(--v4-line-2)}
.v4-hub-duo .hd{display:flex;align-items:center;gap:8px}
.v4-hub-duo .hd .go{margin-left:auto}
.v4-hub-duo .t{display:block;font-size:16.5px;font-weight:800;line-height:1.3;letter-spacing:-.035em}
.v4-hub-free{font-style:normal;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.5;
  background:var(--v4-info-tint);color:var(--v4-info-tx)}

/* ② 이용권 — 흰 카드가 아니라 따뜻한 바탕. 아이콘 타일은 흰색으로 뒤집는다(같은 색 위에서는 안 보인다) */
.v4-hub-plan{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px;border-radius:16px;
  background:var(--v4-warm-tint);border:1px solid var(--hub-warm-line);box-shadow:var(--v4-sh)}
.v4-hub-plan .ic{background:#fff}
.v4-hub-plan .t{display:block;font-size:16px;font-weight:800;letter-spacing:-.035em}
.v4-hub-plan .d{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--v4-warm-tx)}
.v4-hub-plan .go{color:#C9A565}

/* ③④⑤ 묶음 — 줄 사이 선은 아이콘 오른쪽부터 긋는다 */
.v4-hub-grp{overflow:hidden;background:var(--v4-card);border:1px solid var(--v4-line);border-radius:16px;box-shadow:var(--v4-sh)}
.v4-hub-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 14px 3px}
.v4-hub-hd b{font-size:15px;font-weight:800;letter-spacing:-.035em}
.v4-hub-hd span{font-size:12.5px;font-weight:600;color:var(--v4-sub);font-variant-numeric:tabular-nums}
.v4-hub-row{display:flex;align-items:center;gap:12px;min-height:62px;padding:11px 14px;position:relative}
.v4-hub-row + .v4-hub-row::before{content:'';position:absolute;left:62px;right:0;top:0;height:1px;background:var(--v4-line-2)}
.v4-hub-row .t{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.03em}
.v4-hub-row .d{display:block;margin-top:2px;font-size:13px;line-height:1.45;font-weight:500;color:var(--v4-sub)}
/* 다음 발주 시각 — 이 구역에서 가장 큰 숫자. 자릿수가 흔들리지 않게 고정폭 숫자 */
.v4-hub-row .tm{flex:none;text-align:right}
.v4-hub-row .tm b{display:block;font-size:21px;font-weight:900;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--v4-hot-tx)}
.v4-hub-row .tm small{display:block;margin-top:4px;font-size:11.5px;font-weight:600;line-height:1;color:var(--v4-sub)}

/* 누름 — 손가락에 바로 답한다 */
.v4-hub-duo .c:active,.v4-hub-row:active{background:#F5F7F8}
.v4-hub-plan:active{background:#FDEFD6}

/* ══ 이용 가이드 — 앱 알림 안내 (v4-app) · 2026-10-02 ══════════════════════════════
   대표: "이용 가이드에 이런 안내가 없어" — 앱을 설치하면 속보·결과·픽 공개가 푸시로 온다는 것.
   버튼은 채운 초록이 아니라 연한 톤(v4-btn--line)이다. 이 화면의 채운 초록은 맨 아래 '마추픽 보기' 하나로 둔다. */
.v4-app-lead{margin:0;font-size:14.5px;line-height:1.65;font-weight:500;color:var(--v4-text);word-break:keep-all}
.v4-app-lead b{font-weight:800}
.v4-app-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.v4-app-note{margin:10px 0 0;font-size:12.5px;line-height:1.6;font-weight:500;color:var(--v4-sub);word-break:keep-all}
.v4-app-note a{font-weight:700;color:var(--v4-green-tx)}

/* ══ 적중 줄 (v4-hr) · 날짜 묶음 (v4-hday) — 2026-10-02 ═══════════════════════════════
   대표: "적중된 거 찾아보기 너무 힘들다 — 메인이든 들어가서 보든 가독성 있게."
   무엇이 문제였나 — 적중·미적중이 같은 무게의 줄이었고, 줄에는 마명 하나와 승식 하나뿐이라
   '무엇을 어떻게 맞혔는지'가 없었다. 날짜는 줄마다 반복됐다.
   고친 방향 — 한 줄에 [경주 | 1픽 마명 · 적중 배지 / 추천 3두와 착순 / 맞힌 승식 전부].
   미적중 줄은 글자 무게를 낮춰 적중이 먼저 읽히게 한다(색 띠·채움은 쓰지 않는다).
   마크업은 lib/jtm.v4hits.lib.php 의 jtm_v4_hit_row() 한 벌 — 홈 · 최근 적중이 같이 쓴다. */
.v4-hr{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-top:1px solid var(--v4-line-2);
  color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.v4-hr:first-child{border-top:0}
.v4-hr:active{background:#F5F7F8}
.v4-hr .rc{flex:none;min-width:46px;display:flex;flex-direction:column;line-height:1.25}
.v4-hr .rc .m{font-size:12.5px;font-weight:600;color:var(--v4-sub)}
.v4-hr .rc b{font-size:17px;font-weight:800;letter-spacing:-.04em;color:var(--v4-blue-600);font-variant-numeric:tabular-nums}
.v4-hr .rc .dt{margin-top:4px;font-size:11.5px;font-weight:600;color:var(--v4-sub);font-variant-numeric:tabular-nums}
.v4-hr .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.v4-hr .top{display:flex;align-items:center;gap:8px;min-width:0}
.v4-hr .nm{flex:1;min-width:0;font-size:15.5px;font-weight:800;letter-spacing:-.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-hr .top .v4-bdg{flex:none}
/* 추천 3두 — 3착 안에 든 말은 칠하고, 1착을 맞힌 말은 진하게(출전마 분석의 '최근 착순'과 같은 문법) */
.v4-hr .pk{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.v4-hr .pk em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--v4-sub);margin-right:2px}
.v4-hr .pk i{font-style:normal;min-width:21px;height:21px;padding:0 4px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#EEF1F3;color:#6B7780;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.v4-hr .pk i.in{background:#CDEADB;color:#0B5E3A}
.v4-hr .pk i.in.w{background:var(--v4-blue);color:#fff}
.v4-hr .pk .od{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--v4-sub);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 맞힌 승식 — 테두리만. 채운 연초록은 오른쪽 '적중' 배지 하나로 둔다 */
.v4-hr .ks{display:flex;flex-wrap:wrap;gap:5px}
.v4-hr .ks i{font-style:normal;padding:3px 8px;border-radius:7px;border:1px solid #BFE5D1;background:#fff;
  color:var(--v4-green-tx);font-size:12px;font-weight:700;line-height:1.35}
.v4-hr .ks i.on{background:#DCF0E5;border-color:#DCF0E5;color:#0B5E3A}
.v4-hr.is-miss .rc b{color:var(--v4-sub)}
.v4-hr.is-miss .nm{font-weight:600;color:var(--v4-sub)}
.v4-hr.is-miss .ks i{border-color:var(--v4-line);color:var(--v4-sub)}

/* 날짜 묶음 — 머리줄에 그날 합계(분모는 언제나 그날 전체) */
.v4-hday{display:block;overflow:hidden;background:var(--v4-card);border:1px solid var(--v4-line);border-radius:14px;box-shadow:var(--v4-sh)}
.v4-hday + .v4-hday{margin-top:10px}
.v4-hday .hd{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;list-style:none}
.v4-hday summary.hd{cursor:pointer;-webkit-tap-highlight-color:transparent}
.v4-hday summary.hd::-webkit-details-marker{display:none}
.v4-hday summary.hd:focus-visible{outline:2px solid var(--v4-blue);outline-offset:-2px}
.v4-hday .hd .d{flex:none;font-size:13.5px;font-weight:600;color:var(--v4-sub)}
.v4-hday .hd .d b{margin-right:1px;font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--v4-text);font-variant-numeric:tabular-nums}
.v4-hday .hd .d em{font-style:normal;margin-left:7px;padding:2px 8px;border-radius:999px;
  background:var(--v4-hot-tint);color:var(--v4-hot-tx);font-size:11.5px;font-weight:700}
.v4-hday .hd .s{flex:1;min-width:0;text-align:right;font-size:13px;font-weight:500;color:var(--v4-sub);font-variant-numeric:tabular-nums}
.v4-hday .hd .s b{font-weight:800;color:var(--v4-green-tx)}
.v4-hday .hd .car{flex:none;width:8px;height:8px;margin:-4px 3px 0 1px;border-right:2px solid #A9B2BA;border-bottom:2px solid #A9B2BA;
  transform:rotate(45deg);transition:transform .15s}
.v4-hday[open] .hd .car{transform:rotate(-135deg);margin-top:4px}
.v4-hday[open] > .hd{border-bottom:1px solid var(--v4-line-2)}
.v4-hday--none{box-shadow:none;background:transparent}
.v4-hday--none .hd{min-height:44px}
.v4-hday--none .hd .s b{font-weight:700;color:var(--v4-sub)}
@media (prefers-reduced-motion:reduce){ .v4-hday .hd .car{transition:none} }

/* 보기 탭의 건수 · 기간 고르기 · 잔글씨 */
.v4-seg-n{margin-left:6px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.72}
.v4-sec .v4-hper{display:flex;gap:2px}
.v4-sec .v4-hper a{display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--v4-sub)}
.v4-sec .v4-hper a[aria-current]{background:var(--v4-slate-tint);color:var(--v4-text);font-weight:700}
.v4-hfine{margin:10px 2px 0;font-size:12.5px;line-height:1.6;font-weight:500;color:var(--v4-sub)}
/* 구역 제목 옆 건수 (홈 「오늘 적중 3」) */
.v4-sec h2 .v4-sec-n{margin-left:3px;color:var(--v4-blue-600);font-variant-numeric:tabular-nums}


/* ══════════ 홈 — 적중 하이라이트 롤링 (2026-10-06 대표) ══════════
   "적중률 높은 것만 모아서 하나씩 롤링" — 한 경주에서 승식을 많이 맞힌 실전 픽을 한 장씩 위로 굴린다.
   히어로 위에 얹히는 짙은 초록 카드(성적 카드와 같은 계열). 6승식 이상은 금색 타일, 삼복승·삼쌍승 칩도 금색.
   마크업 · 동작은 lib/jtm.v4hits.lib.php 의 jtm_v4_hit_hl_html() 한 벌. 높이는 --hl-h 하나로 맞춘다. */
.v4-hl{--hl-h:102px;--hl-t:3.8s;position:relative;isolation:isolate;margin-top:14px;padding:13px 15px 0;
  border-radius:18px;overflow:hidden;color:#fff;
  background:
    radial-gradient(130% 120% at 100% 0%,rgba(245,196,81,.16) 0%,rgba(245,196,81,0) 46%),
    radial-gradient(120% 140% at 0% 0%,#14774F 0%,#0B4A32 52%,#072E1F 100%);
  border:1px solid rgba(143,217,182,.30);
  box-shadow:0 16px 34px rgba(6,42,28,.30),0 2px 6px rgba(6,42,28,.14),inset 0 1px 0 rgba(255,255,255,.08)}
.v4-hl::after{content:'';position:absolute;z-index:-1;right:-34px;bottom:-46px;width:150px;height:150px;border-radius:50%;
  border:18px solid rgba(255,255,255,.035)}
.v4-hl-hd{display:flex;align-items:center;gap:7px;min-height:22px}
.v4-hl-hd > b{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:#fff}
.v4-hl-hd .tg{font-size:11.5px;font-weight:700;line-height:20px;padding:0 8px;border-radius:999px;
  background:rgba(143,217,182,.14);color:#A8E6C7}
.v4-hl-hd .n{margin-left:auto;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.v4-hl-hd .n b{color:#fff;font-weight:800}
.v4-hl-hd .dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#F5C451;
  box-shadow:0 0 0 0 rgba(245,196,81,.55);animation:v4hlPulse 2.2s ease-out infinite}
@keyframes v4hlPulse{0%{box-shadow:0 0 0 0 rgba(245,196,81,.55)}70%{box-shadow:0 0 0 8px rgba(245,196,81,0)}100%{box-shadow:0 0 0 0 rgba(245,196,81,0)}}

/* 창 — 한 장 높이만 보이고 목록이 위로 올라간다 */
.v4-hl-vp{position:relative;height:var(--hl-h);margin-top:10px;overflow:hidden}
.v4-hl-ls{will-change:transform;transition:transform .72s cubic-bezier(.22,.82,.18,1)}
.v4 a.v4-hl-it,.v4-hl-it{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:center;
  height:var(--hl-h);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
.v4-hl-it:hover,.v4-hl-it:active,.v4-hl-it:focus{text-decoration:none;color:#fff}
.v4-hl-it:focus-visible{outline:2px solid #F5C451;outline-offset:-2px;border-radius:12px}

/* 숫자 타일 — 맞힌 승식 수 */
.v4-hl-it .k{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:15px;color:#062A1C;
  background:linear-gradient(160deg,#B6F0D2 0%,#7FDCAE 55%,#52C990 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.v4-hl-it .k--gold{color:#3A2600;background:linear-gradient(160deg,#FFE9A3 0%,#F7CF5E 50%,#E3A92E 100%);
  box-shadow:0 6px 16px rgba(227,169,46,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.v4-hl-it .k b{font-size:32px;font-weight:900;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.v4-hl-it .k small{margin-top:3px;font-size:12px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.v4-hl-it.on .k{animation:v4hlPop .62s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes v4hlPop{0%{transform:scale(.72) rotate(-6deg);opacity:.3}100%{transform:none;opacity:1}}

/* 경주 · 맞힌 승식 */
.v4-hl-it .bd{display:block;min-width:0}
.v4-hl-it .mt{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.v4-hl-it .mt b{margin-right:6px;font-size:14px;font-weight:800;letter-spacing:-.02em;color:#fff}
/* 큰 제목 줄 — '적중!' 은 금색으로 한 번 더 */
.v4-hl-it .hd{display:block;margin-top:1px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:19px;line-height:1.3;font-weight:900;letter-spacing:-.035em;color:#fff}
.v4-hl-it .hd em{font-style:normal;color:#F5C451;text-shadow:0 0 14px rgba(245,196,81,.35)}
.v4-hl-it .ks{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;max-height:46px;overflow:hidden}
.v4-hl-it .ks i{font-style:normal;font-size:11.5px;font-weight:700;line-height:19px;padding:0 7px;border-radius:999px;
  white-space:nowrap;color:#E6F7EE;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16)}
.v4-hl-it .ks i::before{content:'✓';margin-right:3px;font-weight:900;color:#8FD9B6}
.v4-hl-it .ks i.g{color:#FFE7A6;background:rgba(245,196,81,.16);border-color:rgba(245,196,81,.5)}
.v4-hl-it .ks i.g::before{color:#F5C451}
@media (max-width:359px){
  .v4-hl-it .ks i{padding:0 6px}
  .v4-hl-it .ks i::before{display:none}
  .v4-hl-it .hd{font-size:17.5px}
}

/* 경기 없는 날 한 줄 — 원래 따로 있던 안내 상자를 카드 안으로 */
.v4-hl-ft{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;padding:10px 0 11px;
  border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.72);
  word-break:keep-all}
.v4-hl-ft svg{flex:none;margin-top:1px;color:#8FD9B6}
.v4-hl-ft b{font-weight:800;color:#fff}

/* 진행 막대 — 다음 장까지 남은 시간 */
.v4-hl-pg{height:3px;margin:12px -15px 0;background:rgba(255,255,255,.07)}
.v4-hl-ft + .v4-hl-pg{margin-top:0}
.v4-hl-pg i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8FD9B6,#F5C451);border-radius:0 3px 3px 0}
.v4-hl-pg i.go{animation:v4hlBar var(--hl-t) linear forwards}
.v4-hl.is-hold .v4-hl-pg i{animation-play-state:paused}
@keyframes v4hlBar{from{width:0}to{width:100%}}
/* 한 장뿐이면 막대가 없다 — 아래 여백만 */
.v4-hl > .v4-hl-vp:last-child{margin-bottom:12px}

/* 머리 줄 오른쪽 '적중 모두 보기' (PC) */
.v4-hl-hd .mo{margin-left:14px;font-size:12.5px;font-weight:800;color:#A8E6C7;text-decoration:none;white-space:nowrap}
.v4-hl-hd .mo:hover{color:#fff;text-decoration:none}

/* ── PC 메인(_pc.php) — 히어로 아래 띠 한 줄. 경주·제목은 왼쪽, 맞힌 승식 칩은 오른쪽 한 줄 ── */
.v4-hl--pc{--hl-h:84px;margin:0;padding:16px 26px 0;border-radius:20px}
.v4-hl--pc .v4-hl-hd > b{font-size:15px}
.v4-hl--pc .v4-hl-vp{margin-top:8px}
.v4-hl--pc a.v4-hl-it,.v4-hl--pc .v4-hl-it{grid-template-columns:68px minmax(0,1fr);gap:18px}
.v4-hl--pc .v4-hl-it .k{width:68px;height:68px;border-radius:17px}
.v4-hl--pc .v4-hl-it .k b{font-size:34px}
.v4-hl--pc .v4-hl-it .bd{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'mt ks' 'hd ks';
  column-gap:24px;align-items:center}
.v4-hl--pc .v4-hl-it .mt{grid-area:mt;font-size:13.5px}
.v4-hl--pc .v4-hl-it .mt b{font-size:15px}
.v4-hl--pc .v4-hl-it .hd{grid-area:hd;font-size:24px;margin-top:2px}
.v4-hl--pc .v4-hl-it .ks{grid-area:ks;flex-wrap:nowrap;justify-content:flex-end;gap:6px;margin:0;max-height:none;overflow:visible}
.v4-hl--pc .v4-hl-it .ks i{font-size:13px;line-height:28px;padding:0 12px}
.v4-hl--pc .v4-hl-pg{margin:14px -26px 0}
.v4-hl--pc::after{right:-20px;bottom:-70px;width:220px;height:220px;border-width:26px}
/* 좁은 PC(901~1100px)에서는 칩을 제목 아래로 내린다 */
@media (max-width:1100px){
  .v4-hl--pc{--hl-h:104px}
  .v4-hl--pc .v4-hl-it .bd{grid-template-columns:minmax(0,1fr);grid-template-areas:'mt' 'hd' 'ks'}
  .v4-hl--pc .v4-hl-it .ks{justify-content:flex-start;flex-wrap:wrap;margin-top:6px;max-height:64px;overflow:hidden}
  .v4-hl--pc .v4-hl-it .ks i{line-height:24px;padding:0 10px}
}
/* 리빌더·그누보드 전역 a 규칙이 PC 에서 밑줄·색을 얹지 않게 */
.pm .v4-hl a,.pm .v4-hl a:hover{text-decoration:none}
.pm a.v4-hl-it,.pm a.v4-hl-it:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .v4-hl-ls{transition:none}
  .v4-hl-it.on .k,.v4-hl-hd .dot{animation:none}
  .v4-hl-pg{display:none}
}

/* ══════════ 오늘의 경주 — 날짜 줄 + 경마장 줄 고정 (2026-10-07 한민석) ══════════
   상단 메뉴·LIVE 띠 바로 아래에 붙는다(top 은 스크립트가 실제 높이로 맞춘다, 기본 79px).
   붙은 동안은 칩을 조금 낮추고 아래에 그림자를 깐다. 지금 보는 경마장 칩은 초록 테두리(채움 아님). */
.v4-stick{position:sticky;top:79px;z-index:20;margin:14px -16px 0;padding:8px 0 9px;background:var(--v4-bg);
  transition:box-shadow .2s ease,padding .2s ease}
.v4-stick .v4-filters--count{margin-top:8px}
.v4-stick.is-stuck{box-shadow:0 8px 14px -10px rgba(15,46,32,.28);border-bottom:1px solid var(--v4-line);padding:6px 0 7px}
.v4-stick.is-stuck .v4-chip{min-height:33px;font-size:13.5px}
.v4-stick.is-stuck .v4-filters--count{margin-top:6px}
.v4-stick .v4-filters{margin:0;padding:2px 16px}
.v4-stick a.v4-chip{text-decoration:none;-webkit-tap-highlight-color:transparent}
.v4-stick .v4-filters--count a.v4-chip.is-at{border-color:var(--v4-blue);box-shadow:inset 0 0 0 1px var(--v4-blue);color:var(--v4-text)}
.v4-msec{scroll-margin-top:190px}
@media (prefers-reduced-motion:reduce){ .v4-stick{transition:none} }


/* ══════════ 모바일 편의 3종 (2026-10-07 한민석 "세세한 고객 편의") ══════════
   ① .v4-rnav  경주 넘기기 바 — 마추픽·분석 화면 아래 '‹ 5R | 제주 6R 경주 목록 | 7R ›' (lib/jtm.v4nav.lib.php)
   ② .jt2-totop 맨 위로 단추 — 하단 탭바 오른쪽 위 (lib/jtm.ui.lib.php)
   ③ .v4-chip--next 경기 날 '다음 경주' 칩 — 오늘의 경주 고정 줄 맨 앞 (rb.v4/race-list.php)
   ①② 는 .v4 바깥에 그려질 수 있어 --v4-* 토큰 대신 값을 직접 쓴다(다크는 machu-dark.css). */
.v4-rnav,.jt2-totop{display:none}
@media (max-width:900px){
  .v4-rnav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(68px + env(safe-area-inset-bottom,0px) + 12px);z-index:66;
    display:flex;align-items:stretch;width:min(300px,calc(100vw - 88px));height:50px;box-sizing:border-box;border-radius:999px;overflow:hidden;
    background:#fff;border:1px solid #E1E8E4;box-shadow:0 10px 26px rgba(14,27,44,.18),0 2px 6px rgba(14,27,44,.08)}
  .v4-rnav a,.v4-rnav .sd{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;
    color:#0F2E20;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .v4-rnav a:hover,.v4-rnav a:focus{text-decoration:none;color:#0F2E20}
  .v4-rnav .sd{flex:0 0 70px}
  .v4-rnav .sd span{display:flex;flex-direction:column;align-items:center;line-height:1.1}
  .v4-rnav .sd b{font-size:14.5px;font-weight:900;letter-spacing:-.02em}
  .v4-rnav .sd small{margin-top:2px;font-size:10.5px;font-weight:700;color:#6B7A73;font-variant-numeric:tabular-nums}
  .v4-rnav svg{flex:none;color:#0E7C4C}
  .v4-rnav .sd.is-off{color:#AEB9B3}
  .v4-rnav .sd.is-off b{font-size:12px;font-weight:700}
  .v4-rnav .sd.is-off svg{color:#CBD3CE}
  .v4-rnav .md{flex:1;gap:7px;background:#F4F9F6;border-left:1px solid #E9EFEB;border-right:1px solid #E9EFEB}
  .v4-rnav .md span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .v4-rnav .md b{font-size:13.5px;font-weight:900;white-space:nowrap;letter-spacing:-.02em}
  .v4-rnav .md small{font-size:10.5px;font-weight:800;color:#0E7C4C}
  .v4-rnav a:active{background:#E6F3EC}
  /* 같은 자리에 떠 있던 예전 '← 오늘의 경주로 돌아가기' 알약은 숨긴다 */
  html.has-rnav .jt2-back{display:none!important}

  .jt2-totop{position:fixed;right:14px;bottom:calc(68px + env(safe-area-inset-bottom,0px) + 16px);z-index:65;
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;box-sizing:border-box;border-radius:50%;
    border:1px solid #E1E8E4;background:rgba(255,255,255,.97);color:#0E7C4C;cursor:pointer;
    box-shadow:0 6px 18px rgba(14,27,44,.16);opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;-webkit-tap-highlight-color:transparent}
  .jt2-totop.is-on{opacity:1;visibility:visible;transform:none}
  .jt2-totop:active{transform:scale(.94)}
  /* 경주 넘기기 바가 있으면 그 위로 비켜 선다 */
  html.has-rnav .jt2-totop{bottom:calc(68px + env(safe-area-inset-bottom,0px) + 74px)}
}
/* ③ 다음 경주 칩 — 행동 단추라 경주 수 칩과 다르게 연초록 바탕 + 진초록 글자 */
.v4-stick .v4-filters--count a.v4-chip--next{color:#0B5E3A;background:#E8F6EF;border-color:#BFDACB;font-weight:800;gap:5px}
.v4-stick .v4-filters--count a.v4-chip--next[hidden]{display:none}
.v4-stick .v4-filters--count a.v4-chip--next svg{color:#0E7C4C}
.v4-row.is-flash{animation:v4rowFlash 1.8s ease-out}
@keyframes v4rowFlash{0%,35%{background:#FFF4D2}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){ .jt2-totop{transition:none} .v4-row.is-flash{animation:none;background:#FFF4D2} }


/* ══════════ 회원 혜택 — 경주일 포인트 카드 · 지급 알림 (2026-10-07 한민석) ══════════
   카드 .rdp 는 모바일(.rdp--mo, 메인 '마추픽 보기' 아래)·PC(.rdp--pc, 적중 하이라이트 아래) 공용 — lib/jtm.raceday.lib.php jtm_rdpt_card().
   혜택은 금색 계열(적중의 초록과 겹치지 않게). 알림 .jt2-rdtoast 는 lib/jtm.ui.lib.php. 다크는 machu-dark.css. */
.rdp{position:relative;display:grid;grid-template-columns:44px auto minmax(0,1fr);grid-template-areas:"ic bd bd" ". go more";
  column-gap:12px;row-gap:10px;align-items:center;margin-top:12px;padding:15px 15px 14px;border-radius:16px;box-sizing:border-box;
  background:linear-gradient(135deg,#FFF9E8 0%,#FFF1CC 100%);border:1px solid #F1D58A;box-shadow:0 6px 16px rgba(160,110,10,.10)}
.rdp-ico{grid-area:ic;align-self:start;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;
  background:linear-gradient(160deg,#FFE08A,#F5C451);color:#7A4E00;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.rdp-bd{grid-area:bd;min-width:0}
.rdp-lb{display:inline-block;padding:0 8px;border-radius:999px;background:#FCE3A0;color:#8A5A00;font-size:11px;font-weight:800;line-height:19px}
.rdp-h{display:block;margin-top:5px;font-size:17px;font-weight:900;line-height:1.3;letter-spacing:-.03em;color:#3A2600;word-break:keep-all}
.rdp-h em{font-style:normal;color:#B65F00}
.rdp-s{display:block;margin-top:4px;font-size:12.5px;font-weight:600;line-height:1.55;color:#6B5A33;word-break:keep-all}
.rdp-s b{font-weight:800;color:#3A2600}
.rdp-s .ok{color:#0B5E3A}
.rdp a.rdp-go,.rdp-go{grid-area:go;display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;
  background:#3A2600;color:#FFE7A6;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.rdp a.rdp-go--join,.rdp-go--join{background:#0E7C4C;color:#fff}
.rdp a.rdp-more,.rdp-more{grid-area:more;justify-self:end;font-size:12px;font-weight:700;color:#8A6A2A;text-decoration:none;white-space:nowrap}
.rdp a:hover{text-decoration:none}
/* PC — 한 줄 띠 */
.rdp--pc{grid-template-columns:52px minmax(0,1fr) auto auto;grid-template-areas:"ic bd go more";column-gap:18px;margin:0;padding:16px 26px;border-radius:18px}
.rdp--pc .rdp-ico{align-self:center;width:52px;height:52px;border-radius:15px}
.rdp--pc .rdp-h{font-size:20px;display:inline;margin:0 0 0 8px}
.rdp--pc .rdp-s{font-size:13px}
.rdp--pc .rdp-more{justify-self:auto}

/* 지급 알림 — 화면 위 가운데, 7초 뒤 사라진다 */
.jt2-rdtoast{position:fixed;left:50%;top:92px;z-index:9990;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 16px;border-radius:14px;
  background:#2A1B02;color:#E9D9AE;box-shadow:0 14px 32px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translate(-50%,-12px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.jt2-rdtoast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.jt2-rdtoast b{font-size:15px;font-weight:900;color:#F5C451}
.jt2-rdtoast span{font-size:12.5px;font-weight:600}
.jt2-rdtoast a{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:12.5px;font-weight:800;text-decoration:none}
@media (min-width:901px){ .jt2-rdtoast{top:112px} }
@media (prefers-reduced-motion:reduce){ .jt2-rdtoast{transition:none} }


/* ══════════ 내 이용권 보관함 (racing/passbox.php · 2026-10-07 한민석 "기프티콘처럼") ══════════
   PC·모바일 공용(.v4 밖). 카드 = 왼쪽 쿠폰 꼬리표(이용권 종류 색) + 점선 + 본문. 다크는 machu-dark.css. */
.pbx{padding:18px 0 40px;box-sizing:border-box;color:#0F2E20}   /* 폭·좌우 여백은 바깥 .jt-wrap 이 정한다(다른 화면과 같은 끝선) — 2026-10-07 */
.pbx *{box-sizing:border-box}
.pbx-hd{padding:22px 20px 16px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#0B3D2A 0%,#0E7C4C 100%)}
.pbx-hd .lb{display:inline-block;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11.5px;font-weight:800;line-height:21px;color:#BFF0D6}
.pbx-hd h1{margin:8px 0 0;font-size:24px;font-weight:900;letter-spacing:-.03em;color:#fff}
.pbx-hd p{margin:6px 0 0;font-size:13px;line-height:1.6;color:#CDEBDB;word-break:keep-all}
.pbx-hd p b{color:#fff}
.pbx-hd .now{margin-top:12px;padding:9px 12px;border-radius:11px;background:rgba(0,0,0,.18);font-size:13px;font-weight:600;color:#D8EFE3}
.pbx-hd .now.on{background:rgba(245,196,81,.18);color:#FFF1CC}
.pbx-hd .now b{color:#fff;font-weight:800}
.pbx-tabs{display:flex;gap:6px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.pbx-tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.1);color:#E6F7EE;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.pbx-tabs a i{font-style:normal;font-weight:900;color:#F5C451}
.pbx-tabs a.on{background:#fff;color:#0B5E3A}
.pbx-tabs a.on i{color:#0E7C4C}
.pbx-msg{margin-top:12px;padding:12px 14px;border-radius:12px;background:#E6F7EE;color:#0B5E3A;font-size:13.5px;font-weight:700;border:1px solid #BFDACB}
.pbx-msg.bad{background:#FDECEE;color:#B42332;border-color:#F3C2C8}
.pbx-sec{margin-top:16px}
.pbx-h2{margin:0 0 10px;font-size:15px;font-weight:900;color:#0F2E20}
.pbx-h2 i{font-style:normal;color:#0E7C4C}
.pbx.is-tabbed .pbx-h2{display:none}
.pbx-empty{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:22px 18px;border-radius:14px;background:#fff;border:1px dashed #D6E2DB;font-size:13px;color:#5F6F68;word-break:keep-all}
.pbx-empty b{font-size:15px;color:#0F2E20}
.pbx-empty a{margin-top:4px;font-weight:800;color:#0E7C4C;text-decoration:none}

.pbx-card{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);margin-bottom:10px;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid #E3EAE6;box-shadow:0 4px 14px rgba(15,46,32,.06)}
.pbx-card .stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 4px;
  color:#fff;background:linear-gradient(160deg,#16A06A,#0E7C4C)}
.pbx-card .stub::after{content:'';position:absolute;right:-1px;top:8px;bottom:8px;border-right:2px dashed rgba(255,255,255,.55)}
.pbx-card .stub::before{content:'';position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#F6F9F7;box-shadow:0 calc(100% + 0px) 0 0 transparent}
.pbx-card .stub b{font-size:19px;font-weight:900;letter-spacing:-.03em}
.pbx-card .stub small{font-size:10.5px;font-weight:800;opacity:.85}
.pbx-card--week .stub{background:linear-gradient(160deg,#4C7BE8,#2F5FD0)}
.pbx-card--m30 .stub{background:linear-gradient(160deg,#0E6B44,#0B3D2A)}
.pbx-card--m30hi .stub{background:linear-gradient(160deg,#F7CF5E,#E3A92E);color:#3A2600}
.pbx-card--m30hi .stub::after{border-color:rgba(58,38,0,.35)}
.pbx-card .bd{padding:13px 14px 13px 16px;min-width:0}
.pbx-card .top{display:flex;align-items:center;gap:8px}
.pbx-card .nm{flex:1;min-width:0;font-size:15.5px;font-weight:900;letter-spacing:-.02em;color:#0F2E20}
.pbx-card .st{flex:none;padding:0 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:20px}
.pbx-card .st--0{background:#EEF2FF;color:#2F5FD0}
.pbx-card .st--3{background:#FFF4DC;color:#8A5A00}
.pbx-card .st--1{background:#DCF0E5;color:#0B5E3A}
.pbx-card .st--2{background:#EFF1F3;color:#6B7A73}
.pbx-card .meta{display:block;margin-top:4px;font-size:12px;font-weight:600;color:#6B7A73}
.pbx-card .meta em{font-style:normal;font-weight:800;color:#0E7C4C}
.pbx-card .meta em.hot{color:#C2410C}
.pbx-card .when{display:block;margin-top:8px;font-size:13px;font-weight:600;color:#33403A;word-break:keep-all}
.pbx-card .when b{font-weight:800;color:#0F2E20}
.pbx-card.is-done{opacity:.72}
.pbx-card.is-done .stub{filter:grayscale(.85)}
.pbx-card .go{margin-top:10px}
.pbx-card .go summary{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:#0E7C4C;color:#fff;
  font-size:13.5px;font-weight:800;cursor:pointer;list-style:none}
.pbx-card .go summary::-webkit-details-marker{display:none}
.pbx-card .go[open] summary{background:#EAF4EE;color:#0B5E3A}
.pbx-card .opts{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.pbx-card .opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid #DCE6E0;background:#F8FBF9;cursor:pointer}
.pbx-card .opt input{width:18px;height:18px;flex:none;accent-color:#0E7C4C}
.pbx-card .opt span{display:flex;flex-direction:column;min-width:0}
.pbx-card .opt b{font-size:13.5px;font-weight:800;color:#0F2E20}
.pbx-card .opt small{font-size:12px;font-weight:600;color:#6B7A73}
.pbx-card .opt:has(input:checked){border-color:#0E7C4C;background:#EAF6EF}
.pbx-card .ok{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:0;border-radius:12px;
  background:#0E7C4C;color:#fff;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;font-family:inherit}
.pbx-card .ok--a{margin-top:9px;min-height:36px;border-radius:999px;font-size:13px}
.pbx-card .fine{margin:0;font-size:11.5px;color:#8A9A92}
.pbx-card .none{margin:10px 0 0;font-size:12.5px;color:#6B7A73;word-break:keep-all}
.pbx-card .inline{display:inline}
.pbx-card .ln{margin-top:8px;padding:6px 12px;border-radius:999px;border:1px solid #D6E2DB;background:#fff;color:#5F6F68;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.pbx-rule{margin-top:22px;padding:16px 16px 6px;border-radius:14px;background:#fff;border:1px solid #E3EAE6}
.pbx-rule .hd{display:block;font-size:14px;font-weight:900;margin-bottom:8px}
.pbx-rule dl{margin:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 10px;font-size:12.5px;line-height:1.6}
.pbx-rule dt{font-weight:800;color:#33403A}
.pbx-rule dd{margin:0 0 6px;color:#5F6F68;word-break:keep-all}
.pbx-rule dd b{color:#0F2E20}
/* MY 의 '미사용 N' 꼬리표 */
.v4-pbn{display:inline-block;margin-left:5px;padding:0 7px;border-radius:999px;background:#FFF1CC;color:#8A5A00;font-style:normal;font-size:11px;font-weight:800;line-height:18px;vertical-align:2px}
@media (min-width:901px){
  .pbx{padding-top:28px} .pbx-hd{padding:28px 30px 20px} .pbx-hd h1{font-size:28px}
  /* PC 는 넓어진 폭을 살려 이용권 카드를 두 줄로 */
  .pbx-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .pbx-sec[hidden]{display:none}
  .pbx-sec > .pbx-h2,.pbx-sec > .pbx-empty{grid-column:1/-1}
  .pbx-sec > .pbx-card{margin-bottom:0}
  .pbx-rule dl{grid-template-columns:96px minmax(0,1fr)}
}
/* 보관함 — 남은 시간 · 시작까지 (2026-10-07) */
.pbx-card .left{display:inline-flex;align-items:center;gap:5px;margin:8px 8px 0 0;padding:3px 11px;border-radius:999px;
  background:#E6F7EE;color:#0B5E3A;font-size:12.5px;font-weight:700;vertical-align:middle}
.pbx-card .left b{font-weight:900;font-variant-numeric:tabular-nums}
.pbx-card .left--wait{background:#FFF4DC;color:#8A5A00}
.pbx-hd .now b[data-end]{font-variant-numeric:tabular-nums}
/* 보관함 머리 [이용권 구매하기] — 사는 곳은 membership.php (2026-10-13) */
.pbx-hd .buy{display:inline-flex;align-items:center;margin-top:12px;min-height:40px;padding:0 18px;border-radius:999px;background:#fff;color:#0B5E3A;
  font-size:14px;font-weight:900;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.pbx-hd .buy:hover,.pbx-hd .buy:focus,.pbx-hd .buy:active{background:#EAF6EF;color:#0B5E3A;text-decoration:none}
.pbx-empty a:hover,.pbx-empty a:active{text-decoration:none}


/* ══ 고객센터 .spt (racing/support.php · PC·모바일 공용 · 보관함 .pbx 와 같은 결) — 2026-10-08 대표 "고객센터는 비회원도" ══ */
.spt{padding:18px 0 40px;box-sizing:border-box;color:#0F2E20}   /* 폭·좌우 여백은 바깥 .jt-wrap 이 정한다 */
.spt *{box-sizing:border-box}
.spt-hd{padding:22px 20px 18px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#0B3D2A 0%,#0E7C4C 100%)}
.spt-hd .lb{display:inline-block;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11.5px;font-weight:800;line-height:21px;color:#BFF0D6}
.spt-hd h1{margin:8px 0 0;font-size:24px;font-weight:900;letter-spacing:-.03em;color:#fff}
.spt-hd p{margin:6px 0 0;font-size:13px;line-height:1.6;color:#CDEBDB;word-break:keep-all}
.spt-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.spt-quick a{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.12);color:#E6F7EE;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.spt-msg{margin-top:12px;padding:12px 14px;border-radius:12px;background:#E6F7EE;color:#0B5E3A;font-size:13.5px;font-weight:700;border:1px solid #BFDACB;word-break:keep-all}
.spt-msg.bad{background:#FDECEE;color:#B42332;border-color:#F3C2C8}
.spt-sec{margin-top:18px}
.spt-h2{margin:0 0 10px;font-size:15px;font-weight:900;color:#0F2E20}
.spt-h2 small{margin-left:6px;font-size:12px;font-weight:700;color:#6B7A73}
.spt-faq{border-radius:14px;background:#fff;border:1px solid #E3EAE6;overflow:hidden}
.spt-faq details{border-top:1px solid #EEF2F0}
.spt-faq details:first-child{border-top:0}
.spt-faq summary{display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:13.5px;font-weight:800;color:#0F2E20;cursor:pointer;list-style:none;word-break:keep-all}
.spt-faq summary::-webkit-details-marker{display:none}
.spt-faq summary::before{content:'Q';flex:none;width:22px;height:22px;border-radius:7px;background:#EAF6EF;color:#0E7C4C;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.spt-faq details[open] summary{background:#F6FAF8}
.spt-faq details>div{padding:2px 16px 14px 48px;font-size:13px;line-height:1.7;color:#5F6F68;word-break:keep-all}
.spt-faq details>div b{color:#0F2E20}
.spt-faq details>div a{color:#0E7C4C;font-weight:800;text-decoration:none}
.spt-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:#0E7C4C;text-decoration:none}
.spt-card{margin-bottom:12px;padding:16px;border-radius:14px;background:#fff;border:1px solid #E3EAE6}
.spt-card>b{display:block;font-size:15px;font-weight:900;color:#0F2E20}
.spt-card>p{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:#6B7A73;word-break:keep-all}
.spt-card>p a{color:#0E7C4C;font-weight:800;text-decoration:none}
.spt-card .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.spt .ok{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:0;border-radius:12px;background:#0E7C4C;color:#fff;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;font-family:inherit}
.spt .ln{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:12px;border:1px solid #D6E2DB;background:#fff;color:#33403A;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.spt-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.spt-form .row2{display:grid;grid-template-columns:1fr;gap:10px}
.spt-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:800;color:#33403A}
.spt-form label small{font-weight:600;color:#8A9A92}
.spt-form input,.spt-form select,.spt-form textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid #DCE6E0;border-radius:11px;background:#F8FBF9;color:#0F2E20;font-size:14px;font-family:inherit;font-weight:600}
.spt-form textarea{min-height:140px;resize:vertical;line-height:1.6}
.spt-form input:focus,.spt-form select:focus,.spt-form textarea:focus{outline:none;border-color:#0E7C4C;background:#fff}
.spt-form .fine{margin:0;font-size:11.5px;line-height:1.6;color:#8A9A92;word-break:keep-all}
.spt-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.spt-form--inline{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.spt-form--inline label{flex:1 1 160px}
.spt-form--inline .ok{flex:none}
.spt-q{margin-top:12px;padding:14px;border-radius:12px;border:1px solid #E3EAE6;background:#F8FBF9}
.spt-q .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spt-q .cat{flex:none;padding:0 8px;border-radius:999px;background:#EEF2FF;color:#2F5FD0;font-size:11px;font-weight:800;line-height:20px}
.spt-q .top b{flex:1;min-width:0;font-size:14px;font-weight:900;color:#0F2E20;word-break:keep-all}
.spt-q .st{flex:none;padding:0 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:20px}
.spt-q .st--0{background:#FFF4DC;color:#8A5A00}
.spt-q .st--1{background:#DCF0E5;color:#0B5E3A}
.spt-q .meta{display:block;margin-top:4px;font-size:12px;font-weight:600;color:#6B7A73}
.spt-q .body{margin-top:8px;font-size:13px;line-height:1.7;color:#33403A;word-break:keep-all}
.spt-q .ans{margin-top:10px;padding:11px 12px;border-radius:10px;background:#fff;border:1px solid #DCE6E0}
.spt-q .ans>b{display:inline-block;margin-right:6px;font-size:12.5px;font-weight:900;color:#0E7C4C}
.spt-q .ans>span{font-size:11.5px;color:#8A9A92}
.spt-q .ans>div{margin-top:6px;font-size:13px;line-height:1.7;color:#33403A;word-break:keep-all}
.spt-rule{margin-top:22px;padding:16px 16px 6px;border-radius:14px;background:#fff;border:1px solid #E3EAE6}
.spt-rule .hd{display:block;font-size:14px;font-weight:900;margin-bottom:8px}
.spt-rule dl{margin:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 10px;font-size:12.5px;line-height:1.6}
.spt-rule dt{font-weight:800;color:#33403A}
.spt-rule dd{margin:0 0 6px;color:#5F6F68;word-break:keep-all}
.spt-rule dd a{color:#0E7C4C;font-weight:800;text-decoration:none}
@media (min-width:901px){
  .spt{padding-top:28px} .spt-hd{padding:28px 30px 22px} .spt-hd h1{font-size:28px}
  .spt-form .row2{grid-template-columns:1fr 1fr}
  .spt-two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;align-items:start}
  .spt-two .spt-card{margin-bottom:0}
  .spt-rule dl{grid-template-columns:96px minmax(0,1fr)}
}

/* 오늘의 마추 성적 — 경마장 칸 퍼센트 아래 분수 한 줄 (2026-10-09) */
.v4-today .c .f{display:block;margin-top:2px;font-size:10.5px;font-weight:700;line-height:1.3;color:#BFE0CF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){ .v4-today .c .f{font-size:9.5px} }

/* 오늘의 마추픽 — 경마장별 묶음 머리 (2026-10-09) */
.v4-sec--meet{margin:16px 0 9px}
.v4-sec--meet h2{font-size:16.5px}
.v4-sec .v4-sec-r{flex:none;font-size:13px;font-weight:600;color:var(--v4-sub);font-variant-numeric:tabular-nums}
.v4-sec .v4-sec-r b{font-weight:900;color:var(--v4-green-tx,#0E7C4C)}

/* 목록 묶음 머리줄 — 개최일 · 경마장 (2026-10-09) */
.v4-row--grp{padding:7px 14px;font-size:12px;font-weight:800;color:var(--v4-sub);background:var(--v4-slate-tint,#F3F5F4)}
.jt-dark .v4-row--grp{background:#1B2434;color:#A7B4C9}

/* 출전마 카드 — 신마 능력검사 착순 칩 (2026-10-11) */
.v4-ords--abil em{color:#8A5A00;background:#FFF1C6;border-radius:6px;padding:0 5px}
.v4-ords--abil i{opacity:.85}
.v4-ords--abil small{margin-left:4px;font-size:10.5px;font-weight:700;color:var(--v4-sub)}
.jt-dark .v4-ords--abil em{background:#32260F;color:#F0C277}

/* 출전마 카드 — 시장 인기(확정 단승 배당 순위, 결과 확정 뒤) (2026-10-11) */
.v4-mkt{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:2px 8px 2px 6px;border-radius:999px;background:#EEF2FF;color:#2F5FD0;font-size:11.5px;font-weight:700}
.v4-mkt em{font-style:normal;font-weight:800;opacity:.85}
.v4-mkt b{font-weight:900}
.v4-mkt small{font-size:11px;font-weight:600;opacity:.8}
.v4-mkt--top{background:#2F5FD0;color:#fff}
.v4-mkt--top small{opacity:.9}
.jt-dark .v4-mkt{background:#18233D;color:#A9C4FF}
.jt-dark .v4-mkt--top{background:#2F5FD0;color:#fff}

/* 오늘의 경주 — 끝난 경주 줄의 시장 인기 한 줄 (2026-10-11) */
.v4-row .v4-mktline{margin-top:3px;font-size:12px;font-weight:600;color:var(--v4-sub)}
.v4-row .v4-mktline em{font-style:normal;font-weight:800;color:#2F5FD0}
.v4-row .v4-mktline b{font-weight:800;color:var(--v4-text)}
.v4-row .v4-mktline b.o{color:#0E7C4C}
.jt-dark .v4-row .v4-mktline em{color:#A9C4FF}
.jt-dark .v4-row .v4-mktline b.o{color:#7FD9A8}

/* 출전마 분석 모바일 — 기수·조교사·마주 정보 표 (2026-10-11) */
.v4-people{padding:2px 0}
.v4-ptab-sub{display:flex;align-items:center;gap:8px;padding:13px 14px 12px;font-size:14.5px;font-weight:800;letter-spacing:-.02em;cursor:pointer;border-top:1px solid var(--v4-line-2);-webkit-tap-highlight-color:transparent}
.v4-ptab-sub:first-child{border-top:0}
.v4-ptab-sub span{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--v4-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-ptab-sub::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 4px 0;border-right:2px solid var(--v4-faint);border-bottom:2px solid var(--v4-faint);transform:rotate(45deg);transition:transform .15s}
.v4-ptab-sub.on::after{transform:rotate(-135deg);margin-bottom:-3px}
.v4-ptab-scroll{display:none;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 0 8px;border-top:1px solid var(--v4-line-2)}
.v4-ptab-sub.on+.v4-ptab-scroll{display:block}
.v4-ptab{width:100%;border-collapse:collapse;min-width:580px}
.v4-ptab th{font-size:11px;font-weight:700;color:var(--v4-sub);padding:7px 8px;text-align:center;white-space:nowrap;line-height:1.3;border-bottom:1px solid var(--v4-line-2)}
.v4-ptab th i{display:block;font-style:normal;font-size:9.5px;font-weight:500;color:var(--v4-faint)}
.v4-ptab th.l,.v4-ptab td.l{text-align:left}
.v4-ptab td{font-size:12.5px;font-weight:600;color:var(--v4-text);padding:7px 8px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--v4-line-2);font-variant-numeric:tabular-nums}
.v4-ptab tr:last-child td{border-bottom:0}
.v4-ptab td.nm{font-weight:800;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.v4-ptab td.no span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:7px;color:#fff;font-size:11.5px;font-weight:800}
.v4-ptab td b.ps-p{display:block;font-weight:800}
.v4-ptab td b.ps-hi{color:var(--v4-green-tx,#0E7C4C)}
.v4-ptab td small{display:block;margin-top:1px;font-size:10.5px;font-weight:500;color:var(--v4-sub)}
.v4-ptab .ps-na{color:var(--v4-faint);font-weight:500}
.v4-pnote{margin:8px 2px 0;font-size:12px;font-weight:500;line-height:1.6;color:var(--v4-sub);word-break:keep-all}
.v4-pnote b{font-weight:700;color:var(--v4-text)}

/* 누적 적중률 — 최근 적중 기록 줄의 1픽 기수·조교사 복승률 (2026-10-11) */
.v4-row .d.v4-ppl{font-size:12px;color:var(--v4-sub)}
.v4-row .d.v4-ppl > .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-row .d.v4-ppl .ln > span{display:inline-block;margin-right:8px}
.v4-row .d.v4-ppl em{font-style:normal;font-weight:600;opacity:.85}
.v4-row .d.v4-ppl b{font-weight:800;color:var(--v4-text)}
.v4-row .d.v4-ppl i{font-style:normal;font-weight:800;color:var(--v4-green-tx,#0E7C4C);font-variant-numeric:tabular-nums}

/* 마추픽 — 1픽 기수·조교사 복승률 줄 (2026-10-11) */
.v4-row .d.v4-ppl--pick > span{display:inline-block;margin-right:8px;white-space:nowrap}
/* 출전마 분석 — 경주 결과 바 + 착순 배지 (2026-10-11) */
.v4-resbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:12px;padding:12px 14px}
.v4-resbar .h{flex:none;font-size:13px;font-weight:800;color:var(--v4-text)}
.v4-resbar .r{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:800;color:var(--v4-text);letter-spacing:-.02em}
.v4-resbar .r em{font-style:normal;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--v4-slate-tint);color:var(--v4-sub)}
.v4-resbar .r1 em{background:#0E7C4C;color:#fff}
.v4-resbar .r2 em{background:#2F5FD0;color:#fff}
.v4-resbar .r3 em{background:#DCE8FB;color:#23499F}
.v4-resbar .r i{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:7px;color:#fff;font-style:normal;font-size:11.5px;font-weight:800}
.v4-resbar .n{flex:0 0 100%;font-size:12px;font-weight:500;color:var(--v4-sub)}
.v4-ordb{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:4px;border-radius:999px;background:var(--v4-slate-tint);color:var(--v4-sub);font-style:normal;font-size:11px;font-weight:800;line-height:1;vertical-align:2px;white-space:nowrap}
.v4-ordb--1{background:#0E7C4C;color:#fff}
.v4-ordb--2{background:#2F5FD0;color:#fff}
.v4-ordb--3{background:#DCE8FB;color:#23499F}
.v4-ordb--x{background:#FCEEEB;color:#9B3E2B}

/* 적중 줄 — 1픽 기수·조교사 복승률 (2026-10-11) */
.v4-hr .ppl{display:block;font-size:12px;font-weight:500;color:var(--v4-sub);line-height:1.5}
.v4-hr .ppl > span{display:inline-block;margin-right:8px;white-space:nowrap}
.v4-hr .ppl em{font-style:normal;font-weight:600;opacity:.85}
.v4-hr .ppl b{font-weight:800;color:var(--v4-text)}
.v4-hr .ppl i{font-style:normal;min-width:0;height:auto;padding:0;border-radius:0;background:none;font-weight:800;color:var(--v4-green-tx,#0E7C4C)}

/* 오늘의 경주 — 경주 줄 상세 접기 (2026-10-11 "너무 길고 복잡") */
.v4-row .v4-rd{margin-top:4px}
.v4-row .v4-rd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--v4-faint);-webkit-tap-highlight-color:transparent}
.v4-row .v4-rd summary::-webkit-details-marker{display:none}
.v4-row .v4-rd summary i{font-style:normal;font-size:10px;display:inline-block;transition:transform .15s}
.v4-row .v4-rd[open] summary i{transform:rotate(180deg)}
.v4-row .v4-rd[open] summary{color:var(--v4-sub)}
.v4-row .v4-rd > .d{margin-top:4px}

/* 오늘의 경주 — 줄 전체가 분석 링크 (2026-10-11 "분석 버튼 누르려니까 힘들어") · 기존 .v4-row--go(제목 뒤 ›) 그대로 쓴다 */
.v4-row--go{cursor:pointer;-webkit-tap-highlight-color:transparent}
.v4-row--go:active{background:var(--v4-slate-tint)}
.v4-row--go .v4-btn{position:relative;z-index:1}

/* 오늘의 경주 — 전체 보기를 펼치면 단추가 맨 아래 '접기' (2026-10-11) */
details.v4-more[open]{display:flex;flex-direction:column}
details.v4-more[open] > summary.v4-more-sum{order:2}

/* 출전마 분석 — 옛 본문 다섯 묶음 접기 (2026-10-11 "너무 복잡" → "이쁘게 디자인") · PC 는 머리 숨기고 펼침
   .v4-old 는 .v4 바깥이라 --v4-* 변수가 없다 → 값마다 기본값을 같이 적는다 */
.v4-old .v4-acc-hd{display:none}
.v4-old .v4-acc-top{display:none}
@media (max-width:900px){
  .v4-old .v4-accs{display:flex;flex-direction:column;gap:10px;padding:4px 0 10px}
  .v4-old .v4-acc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 2px 6px}
  .v4-old .v4-acc-top h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--v4-text,#0F2E20)}
  .v4-old .v4-acc-top span{flex:none;font-size:12.5px;font-weight:600;color:var(--v4-sub,#5F6F68)}
  .v4-old .v4-acc{border:1px solid var(--v4-line,#E6EBE8);border-radius:18px;background:var(--v4-card,#FFFFFF);overflow:hidden;box-shadow:0 6px 18px rgba(15,46,32,.06)}
  .v4-old .v4-acc.is-open{border-color:#BFE3CF;box-shadow:0 10px 26px rgba(14,124,76,.12)}
  .v4-old .v4-acc-hd{display:flex;width:100%;align-items:center;gap:12px;padding:14px 14px 14px 14px;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .v4-old .v4-acc-hd .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:#EAF6EF;color:#0E7C4C;transition:background .15s,color .15s}
  .v4-old .v4-acc-hd .ic svg{width:21px;height:21px}
  .v4-old .v4-acc-hd .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .v4-old .v4-acc-hd .tx b{font-size:15.5px;font-weight:800;letter-spacing:-.03em;color:var(--v4-text,#0F2E20);line-height:1.25}
  .v4-old .v4-acc-hd .tx small{font-size:12px;font-weight:500;color:var(--v4-sub,#5F6F68);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v4-old .v4-acc-hd i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--v4-slate-tint,#EFF3F1);color:var(--v4-sub,#5F6F68);transition:transform .18s,background .15s,color .15s}
  .v4-old .v4-acc-hd i svg{width:15px;height:15px}
  .v4-old .v4-acc.is-open .v4-acc-hd .ic{background:#0E7C4C;color:#fff}
  .v4-old .v4-acc.is-open .v4-acc-hd .tx b{color:#0E7C4C}
  .v4-old .v4-acc.is-open .v4-acc-hd i{transform:rotate(180deg);background:#0E7C4C;color:#fff}
  .v4-old .v4-acc-bd{display:none;padding:2px 12px 14px;border-top:1px solid var(--v4-line-2,#EFF3F1)}
  .v4-old .v4-acc.is-open .v4-acc-bd{display:block}
  .v4-old{border-top:0;padding-top:4px}
  .jt-dark .v4-old .v4-acc{background:#161E2C;border-color:#232E43;box-shadow:none}
  .jt-dark .v4-old .v4-acc.is-open{border-color:#2E6B4A}
  .jt-dark .v4-old .v4-acc-top h2,.jt-dark .v4-old .v4-acc-hd .tx b{color:#E8EEF7}
  .jt-dark .v4-old .v4-acc-top span,.jt-dark .v4-old .v4-acc-hd .tx small{color:#A7B4C9}
  .jt-dark .v4-old .v4-acc-hd .ic{background:#143325;color:#7FD9A8}
  .jt-dark .v4-old .v4-acc-hd i{background:#232E43;color:#A7B4C9}
  .jt-dark .v4-old .v4-acc.is-open .v4-acc-hd .tx b{color:#7FD9A8}
  .jt-dark .v4-old .v4-acc-bd{border-color:#232E43}
}

/* ══ 포인트 충전 .chgp (racing/charge.php · PC·모바일 공용) — 2026-10-13 한민석 "PC 버전 진짜 별루" ══
   왼쪽 = 고르기(① 금액 ② 입금자명) · 오른쪽 = 확인·신청(보유 → 충전 후, [N원 충전 신청], 입금 계좌) · 아래 = 충전 내역 | 포인트 쓰는 곳.
   색은 jt2 변수만 쓴다 → 다크(machu-dark.css 가 변수를 바꾼다)도 그대로 따라간다. 금액 단추 자체는 jt2.css .chg-amts.
   흐린 회색 글자 금지(대표 선호) — 보조 글자는 --jt2-text-2. */
.chgp .jt2-pagehead .sub{color:var(--jt2-text-2)}
.chgp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chgp-msg{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:var(--mc-primary-tint,#EDF7F1);border:1px solid var(--mc-primary-tint-bd,#BFDACB);
  color:var(--mc-primary-tx,#17794A);font-size:13.5px;font-weight:800;line-height:1.6;word-break:keep-all}
.chgp-msg.bad{background:#FDECEE;border-color:#F3C2C8;color:#B42332}
.chgp-sheet{margin:0 0 16px}
.chgp-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin:0}
.chgp-main > .jt2-card{margin:0}
.chgp-pick > .jt2-card-body{padding:20px}
.chgp-step{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.chgp-step .no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--mc-primary,#0E7C4C);color:#fff;font-size:12.5px;font-weight:900}
.chgp-step b{font-size:16px;font-weight:900;letter-spacing:-.02em;color:var(--jt2-text)}
.chgp-step .hint{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--jt2-text-2);white-space:nowrap}
.chgp-step--2{margin-top:24px}
.chgp .chgp-amts .w3{grid-column:span 2}
.chgp-in{position:relative;display:block;margin-top:10px}
.chgp-in input{display:block;width:100%;box-sizing:border-box;height:52px;margin:0;padding:0 44px 0 16px;border:1.5px solid var(--jt2-hairline);border-radius:12px;
  background:var(--jt2-card);color:var(--jt2-text);font:inherit;font-size:18px;font-weight:900;text-align:right;font-variant-numeric:tabular-nums}
.chgp-in input::placeholder{font-size:14px;font-weight:600;color:var(--jt2-text-2);opacity:.75}
.chgp-in input:focus{outline:0;border-color:var(--mc-primary,#0E7C4C)}
.chgp-in .u{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:800;color:var(--jt2-text-2);pointer-events:none}
.chgp .chgp-dep{height:50px;font-size:15px}
.chgp-note{margin:8px 0 0;font-size:12.5px;font-weight:600;line-height:1.65;color:var(--jt2-text-2);word-break:keep-all}
.chgp-note b{color:var(--jt2-text)}
/* 오른쪽 — 확인·신청 */
.chgp-sum{overflow:hidden}
.chgp-wal{display:flex;flex-direction:column;gap:2px;padding:16px 20px;background:var(--jt2-navy,#0B1626);color:#fff}
.chgp-wal .l{font-size:12px;font-weight:700;color:var(--jt2-navy-mut,#A9B6C8)}
.chgp-wal .v{font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;color:#fff}
.chgp-wal .v small{margin-left:3px;font-size:14px;font-weight:700;color:var(--jt2-navy-mut,#A9B6C8)}
.chgp-wal .v--sm{font-size:18px}
.chgp-wal .s{margin-top:4px;font-size:12px;font-weight:600;line-height:1.5;color:var(--jt2-navy-mut,#A9B6C8);word-break:keep-all}
.chgp-wal .s b{color:#fff}
.chgp-sumbd{padding:16px 20px 20px}
.chgp-rows{margin:0 0 14px}
.chgp-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0}
.chgp-rows dt{font-size:13px;font-weight:700;color:var(--jt2-text-2)}
.chgp-rows dd{margin:0;font-size:15px;font-weight:800;color:var(--jt2-text);font-variant-numeric:tabular-nums}
.chgp-rows .tot{margin-top:6px;padding-top:12px;border-top:1px dashed var(--jt2-hairline)}
.chgp-rows .tot dt{color:var(--jt2-text)}
.chgp-rows .tot dd{font-size:20px;font-weight:900;color:var(--mc-primary-tx,#17794A)}
.chgp .chgp-go{min-height:52px;font-size:16px;font-weight:900;border-radius:14px;background:var(--mc-primary,#0E7C4C);border-color:var(--mc-primary,#0E7C4C)}
.chgp .chgp-go:hover{background:var(--mc-primary-800,#0B6A40);border-color:var(--mc-primary-800,#0B6A40);color:#fff;text-decoration:none}
.chgp .chgp-go:disabled{opacity:.5;cursor:not-allowed}
.chgp-fine{margin:9px 0 0;font-size:12px;font-weight:600;line-height:1.6;color:var(--jt2-text-2);text-align:center;word-break:keep-all}
.chgp-fine b{color:var(--jt2-text)}
.chgp-bank{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--jt2-inset);border:1px solid var(--jt2-hairline)}
.chgp-bank .hd{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.chgp-bank .hd b{font-size:14px;font-weight:900;color:var(--jt2-text)}
.chgp-bank .tag{padding:0 8px;border-radius:999px;background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary-tx,#17794A);font-size:11px;font-weight:800;line-height:20px}
.chgp-bank .jt2-bank .row{padding:8px 0}
.chgp-bank .jt2-bank .row span{color:var(--jt2-text-2)}
.chgp-bank .jt2-bank .row b{color:var(--jt2-text)}
.chgp-bank .jt2-btn{margin-top:10px}
.chgp-tips{margin:10px 0 0;padding:0;list-style:none;font-size:12px;font-weight:600;line-height:1.65;color:var(--jt2-text-2);word-break:keep-all}
.chgp-tips li{position:relative;padding-left:10px}
.chgp-tips li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.chgp-tips b{color:var(--jt2-text)}
/* 아래 — 충전 내역 | 포인트 쓰는 곳 */
.chgp-sub{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.chgp-sub > .jt2-card{margin:0}
.chgp-hist .jt2-chgrow[hidden]{display:none}
.chgp-hist .jt2-chgrow:first-child{border-top:0}
.chgp-hist .jt2-chgrow .dp{color:var(--jt2-text-2)}
.chgp-hist .jt2-chgrow .dt,.chgp-hist .jt2-chgrow .am span{color:var(--jt2-text-2)}
.chgp-more{display:block;width:100%;margin-top:8px;min-height:40px;border:1px solid var(--jt2-hairline);border-radius:10px;background:var(--jt2-card);
  color:var(--jt2-text);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.chgp-more:hover{border-color:var(--mc-primary,#0E7C4C);color:var(--mc-primary-tx,#17794A)}
.chgp-uses{margin:0;padding:0;list-style:none}
.chgp-uses li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--jt2-hairline)}
.chgp-uses li:first-child{padding-top:2px}
.chgp-uses li:last-child{border-bottom:0}
.chgp-uses .nm{font-size:14px;font-weight:800;color:var(--jt2-text)}
.chgp-uses .nm small{margin-left:6px;font-size:12px;font-weight:600;color:var(--jt2-text-2)}
.chgp-uses .p{font-size:15px;font-weight:900;color:var(--mc-primary-tx,#17794A);font-variant-numeric:tabular-nums}
.chgp-use .chgp-note{margin-top:10px}
.chgp-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px}
.chgp-btns .jt2-btn{justify-content:center}
.chgp-btns .jt2-btn--primary{background:var(--mc-primary,#0E7C4C);border-color:var(--mc-primary,#0E7C4C)}
.chgp a.jt2-btn:hover,.chgp a.jt2-btn:active{text-decoration:none}
@media (min-width:980px){
  .chgp-main{grid-template-columns:minmax(0,1fr) 380px;gap:18px}
  .chgp-sum{position:sticky;top:96px}
  .chgp-pick > .jt2-card-body{padding:24px 26px 26px}
  .chgp .chgp-amts{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .chgp .chgp-amts .w3{grid-column:auto}
  .chgp .chgp-amts .w4{grid-column:span 2}
  .chgp .chgp-amts button{min-height:74px}
  .chgp .chgp-amts button b{font-size:18px}
  .chgp-sub{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .chgp-sub > .jt2-card:only-child{grid-column:1/-1}
}

/* ══ 오른쪽 칸 스크롤 고정 (2026-10-13 한민석 "이런 거 스크롤 시 항상 고정") ══
   .jt2-cols 의 오른쪽 칸(.jt2-side · 이용권 구매 등). 2단(1181px~)일 때만.
   top 은 lib/jtm.ui.lib.php 하단 스크립트가 칸 길이에 맞춰 --jt-side-top 으로 준다(화면보다 길면 아래 끝이 화면 아래에 붙는다) */
@media (min-width:1181px){
  .jt2-cols > .jt2-side{position:sticky;top:var(--jt-side-top,96px)}
}

/* ══ 이용권 구매 .mstore (racing/membership.php · PC) — 2026-10-13 한민석 "이용권 구매들을 여기에 · 이쁘게, 대충 하지 말고" ══
   티켓 카드는 보관함(.pbx-card)과 같은 꼴 — 산 이용권이 그대로 보관함에 들어간다는 걸 모양으로 보여 준다.
   색은 jt2 변수(다크가 변수를 바꾸므로 그대로 따라감) + 머리·PREMIUM 만 고정색. 흐린 회색 글자 금지 → 보조 글자는 --jt2-text-2.
   모바일(≤900px)은 위 v4 블록이 같은 이용권 목록을 그리므로 머리·카드는 숨기고 '구매 전에 확인'만 남긴다. */
.mst-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0 0 20px;padding:26px 24px;border-radius:22px;
  color:#fff;overflow:hidden;
  background:radial-gradient(90% 130% at 100% 0%,rgba(245,196,81,.24) 0%,rgba(245,196,81,0) 52%),linear-gradient(135deg,#0B3D2A 0%,#0E7C4C 100%);
  box-shadow:0 10px 28px rgba(11,61,42,.18)}
.mst-hero::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;
  border:28px solid rgba(255,255,255,.05);pointer-events:none}
.mst-hero-tx{position:relative;z-index:1;min-width:0}
.mst-hero .lb{display:inline-block;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.15);font-size:12px;font-weight:800;line-height:24px;color:#C9F2DC}
.mst-hero h1{margin:12px 0 0;font-size:28px;font-weight:900;letter-spacing:-.035em;line-height:1.3;color:#fff;word-break:keep-all}
.mst-hero p{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.7;color:#D6EFE2;word-break:keep-all}
.mst-hero p b{color:#fff;font-weight:800}
.mst-flow{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
.mst-flow li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mst-flow i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#fff;color:#0B5E3A;font-style:normal;font-size:14px;font-weight:900}
.mst-flow li:last-child i{background:#F5C860;color:#3A2600}
.mst-flow div{min-width:0}
.mst-flow b{display:block;font-size:14.5px;font-weight:900;letter-spacing:-.02em;color:#fff}
.mst-flow span{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:#C4E6D3;word-break:keep-all}
.mst-adm{display:inline-block;margin-top:14px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.14);
  color:#fff;font-size:12px;font-weight:800;line-height:28px;text-decoration:none}
/* 오른쪽 칸 작은 글씨 — 흐린 회색 대신 보조 글자색 */
.mstore .jt2-wallet .fine,.mstore .jt2-wallet .tile .s{color:var(--jt2-text-2)}
.mstore .jt2-wallet .tile .s b{color:var(--jt2-text)}
.mst-adm:hover,.mst-adm:active{background:rgba(255,255,255,.24);color:#fff;text-decoration:none}

.mst-sec{margin:0 0 24px}
.mst-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px}
.mst-h b{font-size:19px;font-weight:900;letter-spacing:-.025em;color:var(--jt2-text)}
.mst-h span{font-size:13.5px;font-weight:600;color:var(--jt2-text-2);word-break:keep-all}
.mst-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mst-sm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* 이용권 카드 — 2026-10-13 2차 "왜 이렇게 투박해 보이지?" → 꽉 찬 색 기둥 · 굵은 글자 일색 · 진한 그림자를 걷어 냈다.
   흰 카드 + 작은 아이콘 타일 + 티켓 절취선(점선 + 양옆 반원 홈) 하나로 '이용권' 느낌만 남긴다.
   굵기 단계: 이름 700 · 가격 800 · 혜택 500. 채운 단추는 30일(BEST·PREMIUM)만, 작은 카드는 연한 단추 */
.mst-tk{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:20px;background:var(--jt2-card,#fff);
  border:1px solid var(--jt2-hairline,#E4E8EA);box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 28px rgba(16,24,40,.055);
  transition:transform .18s ease,box-shadow .18s ease}
.mst-tk:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,24,40,.05),0 16px 36px rgba(16,24,40,.09)}
.mst-tk .top{padding:22px 22px 18px}
.mst-tk .hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mst-tk .ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;
  background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary,#0E7C4C);font-size:13px;font-weight:800}
.mst-tk .ico svg{display:block;width:26px;height:26px}
.mst-tk--week .ico{background:rgba(47,95,208,.1);color:#3A68D8}
.mst-tk--m30hi .ico{background:rgba(245,200,96,.14);color:#F5C860}
.mst-tk .bdg{padding:0 10px;border-radius:999px;background:var(--jt2-inset,#F6F8F7);border:1px solid var(--jt2-hairline,#E4E8EA);
  color:var(--jt2-text-2);font-size:11.5px;font-weight:700;line-height:24px;white-space:nowrap}
.mst-tk .nm{display:block;margin-top:16px;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--jt2-text)}
.mst-tk .pr{display:flex;align-items:baseline;flex-wrap:wrap;margin-top:6px;color:var(--jt2-text)}
.mst-tk .pr b{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.mst-tk .pr i{margin-left:2px;font-style:normal;font-size:15px;font-weight:700}
.mst-tk .pr em{margin-left:6px;font-style:normal;font-size:13px;font-weight:600;color:var(--jt2-text-2)}
.mst-tk .alt{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--jt2-text-2)}
.mst-tk .alt b{font-weight:700;color:var(--mc-primary-tx,#17794A)}
.mst-tk .ld{margin:12px 0 0;font-size:13px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
/* 절취선 — 점선 한 줄(반원 홈은 바닥색이 화면마다 달라 흰 점처럼 보여서 뺐다). 설명칸을 두 줄 높이로 맞춰 옆 카드와 같은 높이에 긋는다 */
.mst-tk .cut{height:0;margin:0 22px;border-top:1.5px dashed var(--jt2-hairline,#E4E8EA)}
.mst-sm .mst-tk .ld{min-height:3.2em}
.mst-tk .bot{display:flex;flex-direction:column;flex:1;padding:18px 22px 22px}
.mst-tk .ft{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.mst-tk .ft li{position:relative;padding-left:24px;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--jt2-text);word-break:keep-all}
.mst-tk .ft li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C4C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 16px no-repeat}
.mst-tk .buy{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:auto;padding:0 14px;border-radius:12px;
  background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary-tx,#17794A);font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;text-align:center;transition:background-color .15s,color .15s,transform .08s}
.mst-tk .buy:hover,.mst-tk .buy:focus{background:var(--mc-primary,#0E7C4C);color:#fff;text-decoration:none}
.mst-tk .buy:active{transform:scale(.985);text-decoration:none}

/* 30일 · 큰 카드 */
.mst-tk.is-big{border-radius:22px}
.mst-tk.is-big .top{padding:26px 26px 20px}
.mst-tk.is-big .bot{padding:20px 26px 26px}
.mst-tk.is-big .cut{margin:0 26px}
.mst-tk.is-big .nm{font-size:18px}
.mst-tk.is-big .pr b{font-size:34px}
.mst-tk.is-big .pr i{font-size:17px}
.mst-tk.is-big .buy{min-height:50px;font-size:15px}
.mst-tk.is-best{border-color:var(--mc-primary,#0E7C4C);box-shadow:0 0 0 1px var(--mc-primary,#0E7C4C),0 14px 34px rgba(14,124,76,.12)}
.mst-tk.is-best .bdg{background:var(--mc-primary,#0E7C4C);border-color:var(--mc-primary,#0E7C4C);color:#fff}
.mst-tk.is-best .buy{background:var(--mc-primary,#0E7C4C);color:#fff;box-shadow:0 6px 16px rgba(14,124,76,.22)}
.mst-tk.is-best .buy:hover,.mst-tk.is-best .buy:focus{background:var(--mc-primary-800,#0B6A40);color:#fff}
.mst-tk.is-prem{border-color:transparent;background:linear-gradient(160deg,#1C2B52 0%,#0E1834 100%);box-shadow:0 16px 38px rgba(14,24,52,.24)}
.mst-tk.is-prem .bdg{background:rgba(245,200,96,.12);border-color:rgba(245,200,96,.36);color:#F5C860}
.mst-tk.is-prem .nm,.mst-tk.is-prem .pr,.mst-tk.is-prem .ft li{color:#F3F6FB}
.mst-tk.is-prem .pr em,.mst-tk.is-prem .alt,.mst-tk.is-prem .ld{color:#AEB9D0}
.mst-tk.is-prem .alt b{color:#F5C860}
.mst-tk.is-prem .cut{border-top-color:rgba(255,255,255,.18)}
.mst-tk.is-prem .ft li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C860' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")}
.mst-tk.is-prem .buy{background:#F5C860;color:#2A1C00;box-shadow:0 6px 18px rgba(245,200,96,.22)}
.mst-tk.is-prem .buy:hover,.mst-tk.is-prem .buy:focus{background:#FFD677;color:#2A1C00}

/* 구매 전에 확인 */
.mstore .mst-rules{margin-top:0}
.mst-rl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mst-rl > div{padding:14px 16px;border-radius:14px;background:var(--jt2-inset,#F6F8F7);border:1px solid var(--jt2-hairline,#E4E8EA)}
.mst-rl > div:last-child:nth-child(odd){grid-column:1/-1}
.mst-rl dt{font-size:13.5px;font-weight:900;color:var(--jt2-text)}
.mst-rl dd{margin:5px 0 0;font-size:12.5px;font-weight:600;line-height:1.65;color:var(--jt2-text-2);word-break:keep-all}
.mst-trust{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:14px;
  background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary-tx,#17794A);font-size:13px;font-weight:800;line-height:1.55;word-break:keep-all}
.mst-trust a{flex:none;margin-left:auto;padding:0 15px;border-radius:999px;background:var(--mc-primary,#0E7C4C);color:#fff;
  font-size:12.5px;font-weight:900;line-height:34px;text-decoration:none;white-space:nowrap}
.mst-trust a:hover,.mst-trust a:active{color:#fff;text-decoration:none;filter:brightness(1.08)}
.mst-pay{margin:12px 2px 0;font-size:12.5px;font-weight:600;line-height:1.7;color:var(--jt2-text-2);word-break:keep-all}
.mst-pay a{color:var(--mc-primary-tx,#17794A);font-weight:800;text-decoration:none}
.mst-pay a:hover,.mst-pay a:active{color:var(--mc-primary,#0E7C4C);text-decoration:none}
.mst-note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#FFF7E6;border:1px solid #F5DDA8;color:#7A4E00;font-size:12.5px;font-weight:700;line-height:1.6}

@media (min-width:901px){
  .mst-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:28px;padding:30px 32px}
  .mst-hero h1{font-size:30px}
}
/* 모바일(≤900px) — 2026-10-13 한민석 "모바일 이용권 화면도 이렇게 바꿔줘, 훨씬 낫다"
   위 v4 블록(rb.v4/plans.php)은 말 사진 머리만 남기고 옛 목록 줄·꾸밈 칩·체크·FAQ(.v4-wrap)는 접는다 → 그 자리에 매장 카드 1단.
   매장 머리의 큰 제목은 v4 머리와 겹치므로 숨기고 '구매 흐름 3단계'만 남긴다. */
@media (max-width:900px){
  .v4-plans .v4-wrap{display:none}
  .v4-plans + .v4-old{margin-top:0;padding-top:14px;border-top:0}
  .mst-hero{gap:0;margin:0 0 20px;padding:12px;border-radius:18px;box-shadow:0 8px 20px rgba(11,61,42,.14)}
  .mst-hero::after,.mst-hero-tx{display:none}
  .mst-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mst-flow li{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 10px;border-radius:12px}
  .mst-flow i{width:26px;height:26px;font-size:13px}
  .mst-flow b{font-size:13px;line-height:1.35;word-break:keep-all}
  .mst-flow span{font-size:11.5px;line-height:1.45}
  .mst-sec{margin:0 0 22px}
  .mst-h{margin-bottom:10px}
  .mst-h b{font-size:18px}
  .mst-h span{font-size:12.5px}
  .mst-big,.mst-sm{grid-template-columns:minmax(0,1fr);gap:12px}
  .mst-sm .mst-tk .ld{min-height:0}
  .mst-tk:hover{transform:none}
  .mst-tk .top{padding:20px 20px 16px}
  .mst-tk .bot{padding:16px 20px 20px}
  .mst-tk .cut{margin:0 20px}
  .mst-tk .ft{margin-bottom:18px}
  .mst-tk.is-big .top{padding:22px 20px 18px}
  .mst-tk.is-big .bot{padding:18px 20px 22px}
  .mst-tk.is-big .cut{margin:0 20px}
  .mst-tk.is-big .pr b{font-size:31px}
  .mst-rl{grid-template-columns:minmax(0,1fr)}
  .mst-trust{flex-direction:column;align-items:flex-start}
  .mst-trust a{margin-left:0}
}

/* 이용권 구매 — 좁은 폰(≤480px)은 단계 상자를 제목만 (설명이 세 줄로 꺾여 빽빽했다) */
@media (max-width:480px){ .mst-flow span{display:none} .mst-flow li{gap:7px;padding:10px 9px} }

/* ══ 포인트 충전 창 — 토스식 .tc (racing/charge_modal.php · 2026-10-13 한민석 "PC 충전 모달 너무 안 이뻐, 토스처럼") ══
   큰 질문 · 큰 금액 칸(밑줄) · 4칸 금액 칩 · 회색 정보 상자 · 바닥 큰 단추. 위 X 로 닫고, 아래 닫기 바는 이 창에서만 숨긴다.
   색은 jt2 변수만(다크는 변수가 바뀌어 그대로 따라감). 동작은 jt.app.js(JT.chgPick · JT.comma · JT.charge) 그대로. */
.jt-modal:has(.tc) .jt-modal-foot{display:none}
@media (min-width:720px){ .jt-modal:has(.tc){max-width:460px} }
.jt-modal:has(.tc) .jt-modal-scroll{padding:22px 24px 24px}
.tc{padding:0}
.tc-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.tc-ttl{font-size:15px;font-weight:700;color:var(--jt2-text-2)}
.tc-x{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:-8px -10px 0 0;padding:0;border:0;border-radius:11px;
  background:transparent;color:var(--jt2-text-2);cursor:pointer}
.tc-x:hover{background:var(--jt2-inset,#F2F4F6);color:var(--jt2-text)}
.tc-have{display:flex;align-items:center;justify-content:space-between;margin:8px 0 24px;padding:14px 16px;border-radius:14px;background:var(--jt2-inset,#F6F8F7)}
.tc-have span{font-size:13.5px;font-weight:600;color:var(--jt2-text-2)}
.tc-have b{font-size:17px;font-weight:800;color:var(--jt2-text);font-variant-numeric:tabular-nums}
.tc-q{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.35;color:var(--jt2-text)}
.tc-amt{position:relative;margin-top:14px;border-bottom:2px solid var(--jt2-hairline,#E5E8EB);transition:border-color .15s}
.tc-amt:focus-within{border-bottom-color:var(--mc-primary,#0E7C4C)}
.tc .tc-amt input{display:block;width:100%;box-sizing:border-box;height:auto;margin:0;padding:6px 34px 10px 0;border:0;border-radius:0;background:transparent;
  color:var(--jt2-text);font:inherit;font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;outline:0;box-shadow:none}
.tc .tc-amt input::placeholder{color:var(--jt2-text-2);opacity:.45;font-weight:700}
.tc-amt .won{position:absolute;right:0;bottom:12px;font-size:22px;font-weight:700;color:var(--jt2-text)}
.tc-after{margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--jt2-text-2)}
.tc-after b{color:var(--mc-primary-tx,#17794A);font-weight:800}
.tc-after.bad{color:#D64545}
.tc-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.tc-chips button{min-height:44px;margin:0;padding:0 4px;border:1px solid transparent;border-radius:12px;background:var(--jt2-inset,#F2F4F6);color:var(--jt2-text);
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:none;
  transition:background-color .12s,border-color .12s,transform .08s;-webkit-tap-highlight-color:transparent}
.tc-chips button:hover{background:var(--jt2-hairline,#E9ECEF)}
.tc-chips button:active{transform:scale(.97)}
.tc-chips button.on{background:var(--mc-primary-tint,#EDF7F1);border-color:var(--mc-primary,#0E7C4C);color:var(--mc-primary-tx,#17794A)}
.tc-chips .w2{grid-column:span 2}
.tc-field{margin-top:26px}
.tc-field label{display:block;font-size:13.5px;font-weight:700;color:var(--jt2-text-2)}
.tc .tc-field input{display:block;width:100%;box-sizing:border-box;height:52px;margin:8px 0 0;padding:0 14px;border:1px solid var(--jt2-hairline,#E5E8EB);border-radius:12px;
  background:var(--jt2-card,#fff);color:var(--jt2-text);font:inherit;font-size:16px;font-weight:700;outline:0;box-shadow:none}
.tc .tc-field input:focus{border-color:var(--mc-primary,#0E7C4C);box-shadow:0 0 0 3px rgba(14,124,76,.12)}
.tc-field p{margin:7px 0 0;font-size:12.5px;font-weight:600;color:var(--jt2-text-2)}
.tc-info{margin:22px 0 0;padding:12px 16px;border-radius:14px;background:var(--jt2-inset,#F6F8F7)}
.tc-info > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0}
.tc-info dt{font-size:13.5px;font-weight:600;color:var(--jt2-text-2)}
.tc-info dd{margin:0;font-size:13.5px;font-weight:700;color:var(--jt2-text);text-align:right}
.tc-info dd b{color:var(--mc-primary-tx,#17794A)}
.tc .chg-msg{margin-top:14px}
.tc-go{display:block;width:100%;min-height:56px;margin-top:20px;border:0;border-radius:16px;background:var(--mc-primary,#0E7C4C);color:#fff;
  font:inherit;font-size:17px;font-weight:800;letter-spacing:-.02em;cursor:pointer;transition:background-color .15s,transform .08s}
.tc-go:hover{background:var(--mc-primary-800,#0B6A40);color:#fff}
.tc-go:active{transform:scale(.99)}
.tc-go:disabled{opacity:.6;cursor:default}
.tc-fine{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--jt2-text-2);text-align:center;word-break:keep-all}
.tc-links{display:flex;justify-content:center;gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--jt2-hairline,#EEF0F2)}
.tc-links a{font-size:13px;font-weight:700;color:var(--jt2-text-2);text-decoration:none}
.tc-links a:hover,.tc-links a:active{color:var(--mc-primary-tx,#17794A);text-decoration:none}
@media (max-width:719px){
  .jt-modal:has(.tc) .jt-modal-scroll{padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .tc-q{font-size:20px}
  .tc .tc-amt input{font-size:30px}
  .tc-chips{gap:6px}
  .tc-chips button{min-height:42px;font-size:13.5px}
}

/* ══ 이용권 구매 창 — 토스식 .tcp (racing/plan_modal.php · 2026-10-13 한민석 "이용권 구매 창도 토스처럼") ══
   충전 창 .tc 의 틀(위 X · 정보 상자 · 큰 단추 · 아래 링크)을 같이 쓰고 상품 머리 · 결제 방법 두 칸(포인트 / 무통장)만 더한다.
   결제 방법은 .tcp 의 data-pay(pt|bank) 로 칸을 고른다(인라인 onclick). 신청이 접수돼 결제 창이 뜨면 결제 방법 칸은 접는다. */
.tc a.tc-go{display:flex;align-items:center;justify-content:center;text-decoration:none}
.tc a.tc-go:hover,.tc a.tc-go:active{color:#fff;text-decoration:none}
.tcp-hd{display:flex;align-items:center;gap:14px;margin-top:14px}
.tcp-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;
  background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary,#0E7C4C)}
.tcp-ico svg{display:block;width:30px;height:30px}
.tcp--week .tcp-ico{background:rgba(47,95,208,.1);color:#3A68D8}
.tcp--m30hi .tcp-ico{background:rgba(245,200,96,.18);color:#E3A92E}
.tcp-hdtx{min-width:0}
.tcp-bdg{display:inline-block;padding:0 9px;border-radius:999px;background:var(--jt2-inset,#F6F8F7);border:1px solid var(--jt2-hairline,#E5E8EB);
  color:var(--jt2-text-2);font-size:11.5px;font-weight:700;line-height:22px;white-space:nowrap}
.tcp.is-best .tcp-bdg{background:var(--mc-primary,#0E7C4C);border-color:var(--mc-primary,#0E7C4C);color:#fff}
.tcp.is-prem .tcp-bdg{background:#1C2B52;border-color:#1C2B52;color:#F5C860}
.tcp-nm{display:block;margin-top:5px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--jt2-text)}
.tcp-pr{display:flex;align-items:baseline;flex-wrap:wrap;margin-top:18px;color:var(--jt2-text)}
.tcp-pr b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.tcp-pr i{margin-left:2px;font-style:normal;font-size:19px;font-weight:700}
.tcp-pr em{margin-left:8px;font-style:normal;font-size:14px;font-weight:600;color:var(--jt2-text-2)}
.tcp-lead{margin:8px 0 0;font-size:14px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.tcp-ft{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.tcp-ft li{position:relative;padding-left:24px;font-size:14px;font-weight:500;line-height:1.5;color:var(--jt2-text);word-break:keep-all}
.tcp-ft li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C4C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 16px no-repeat}
.tcp .tcp-info{margin-top:18px}
.tcp-info dd{word-break:keep-all}
.tcp-lb{margin:24px 0 10px;font-size:14px;font-weight:700;color:var(--jt2-text)}
.tcp-pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.tcp-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;margin:0;padding:12px 14px;border:1.5px solid var(--jt2-hairline,#E5E8EB);
  border-radius:14px;background:var(--jt2-card,#fff);color:var(--jt2-text);font:inherit;text-align:left;cursor:pointer;box-shadow:none;
  transition:border-color .12s,background-color .12s;-webkit-tap-highlight-color:transparent}
.tcp-opt b{font-size:15px;font-weight:800}
.tcp-opt span{font-size:12.5px;font-weight:600;color:var(--jt2-text-2)}
.tcp-opt:hover{border-color:var(--jt2-text-2)}
.tcp[data-pay=pt] .tcp-opt--pt,.tcp[data-pay=bank] .tcp-opt--bank{border-color:var(--mc-primary,#0E7C4C);background:var(--mc-primary-tint,#EDF7F1);
  box-shadow:inset 0 0 0 1px var(--mc-primary,#0E7C4C)}
.tcp[data-pay=pt] .tcp-opt--pt b,.tcp[data-pay=bank] .tcp-opt--bank b{color:var(--mc-primary-tx,#17794A)}
.tcp-panel{display:none;margin-top:16px}
.tcp[data-pay=pt] .tcp-panel--pt,.tcp[data-pay=bank] .tcp-panel--bank{display:block}
.tcp-sum{margin:0}
.tcp-sum > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0}
.tcp-sum dt{font-size:14px;font-weight:600;color:var(--jt2-text-2)}
.tcp-sum dd{margin:0;font-size:15px;font-weight:700;color:var(--jt2-text);font-variant-numeric:tabular-nums}
.tcp-sum .tot{margin-top:4px;padding-top:12px;border-top:1px solid var(--jt2-hairline,#E5E8EB)}
.tcp-sum .tot dt{color:var(--jt2-text);font-weight:700}
.tcp-sum .tot dd{font-size:18px;font-weight:800;color:var(--mc-primary-tx,#17794A)}
.tcp-sum .tot dd.bad{color:#D64545}
.tcp .tc-go{margin-top:16px}
.tcp:has(#chgDone[style*="block"]) .tcp-pay,.tcp:has(#chgDone[style*="block"]) .tcp-lb{display:none}
.tcp-steps{margin:0;padding:14px 16px 14px 34px;border-radius:14px;background:var(--jt2-inset,#F6F8F7);font-size:13.5px;font-weight:500;line-height:1.75;color:var(--jt2-text);word-break:keep-all}
.tcp-steps b{font-weight:800}
.tcp-alt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px}
.tcp-alt a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 8px;border:1px solid var(--jt2-hairline,#E5E8EB);border-radius:14px;
  background:var(--jt2-card,#fff);color:var(--jt2-text);font-size:13.5px;font-weight:700;text-align:center;text-decoration:none;word-break:keep-all}
.tcp-alt a:hover,.tcp-alt a:active{border-color:var(--mc-primary,#0E7C4C);color:var(--mc-primary-tx,#17794A);text-decoration:none}
@media (max-width:719px){
  .tcp-pr b{font-size:30px}
  .tcp-nm{font-size:19px}
}

/* ══ 내 이용권 보관함 — 토스식 .pbt (racing/passbox.php · 2026-10-13 한민석 "보관함 화면도 토스처럼") ══
   큰 초록 상자·꽉 찬 색 기둥 티켓 → 깔끔한 제목 · 지금 이용 상태 카드(남은 시간 막대) · 회색 알약 전환 · 흰 카드
   (아이콘 타일 · 상태 · D-day · 큰 [이용하기]) · 안내는 접기. 옛 .pbx 규칙은 더 이상 쓰지 않는다.
   폭·좌우 여백은 바깥 .jt-wrap 이 정한다(자체 max-width 금지). 색은 jt2 변수만(다크 자동). */
.pbt{padding:22px 0 44px;color:var(--jt2-text)}
.pbt *{box-sizing:border-box}
.pbt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.pbt-head h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.035em;color:var(--jt2-text)}
.pbt-head p{margin:6px 0 0;font-size:14px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.pbt-head p b{color:var(--jt2-text);font-weight:700}
.pbt-buy{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;background:var(--mc-primary-tint,#EDF7F1);
  color:var(--mc-primary-tx,#17794A);font-size:14px;font-weight:700;text-decoration:none;transition:background-color .15s,color .15s}
.pbt-buy:hover,.pbt-buy:active{background:var(--mc-primary,#0E7C4C);color:#fff;text-decoration:none}

.pbt-now{margin-top:18px;padding:20px 22px;border-radius:20px;background:var(--jt2-card,#fff);border:1px solid var(--jt2-hairline,#E5E8EB);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05)}
.pbt-now .lb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--jt2-text-2)}
.pbt-now .lb i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--jt2-text-2);opacity:.45}
.pbt-now.on .lb{color:var(--mc-primary-tx,#17794A)}
.pbt-now.on .lb i{background:var(--mc-primary,#0E7C4C);opacity:1;box-shadow:0 0 0 4px rgba(14,124,76,.14)}
.pbt-now .tt{display:block;margin-top:8px;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.35;color:var(--jt2-text);word-break:keep-all}
.pbt-now p{margin:6px 0 0;font-size:14px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.pbt-now .sub{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;font-weight:600;color:var(--jt2-text-2)}
.pbt-now .sub b{color:var(--jt2-text);font-weight:800;font-variant-numeric:tabular-nums}
.pbt-bar{height:8px;margin-top:14px;border-radius:999px;background:var(--jt2-inset,#F2F4F6);overflow:hidden}
.pbt-bar i{display:block;height:100%;min-width:6px;border-radius:999px;background:var(--mc-primary,#0E7C4C)}

.pbt-msg{margin-top:14px;padding:13px 16px;border-radius:14px;background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary-tx,#17794A);
  font-size:14px;font-weight:700;line-height:1.55;word-break:keep-all}
.pbt-msg.bad{background:#FDECEE;color:#B42332}

.pbt-seg{display:flex;gap:4px;margin-top:22px;padding:4px;border-radius:14px;background:var(--jt2-inset,#F2F4F6)}
.pbt-seg a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 6px;border-radius:11px;
  color:var(--jt2-text-2);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.pbt-seg a i{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.pbt-seg a:hover,.pbt-seg a:active{color:var(--jt2-text);text-decoration:none}
.pbt-seg a.on{background:var(--jt2-card,#fff);color:var(--jt2-text);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.pbt-seg a.on i{color:var(--mc-primary-tx,#17794A)}

.pbt-sec{margin-top:14px}
.pbt .pbt-sec[hidden]{display:none}
.pbt-h2{margin:22px 0 10px;font-size:16px;font-weight:800;color:var(--jt2-text)}
.pbt-h2 i{font-style:normal;color:var(--mc-primary-tx,#17794A)}
.pbt.is-tabbed .pbt-h2{display:none}

/* 이용권 카드 */
.pbt-card{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;padding:18px 20px 20px;border-radius:20px;background:var(--jt2-card,#fff);
  border:1px solid var(--jt2-hairline,#E5E8EB);box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05)}
.pbt-card .top{display:flex;align-items:center;gap:12px}
.pbt-card .ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;
  background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary,#0E7C4C)}
.pbt-card .ico svg{display:block;width:28px;height:28px}
.pbt-card--week .ico{background:rgba(47,95,208,.1);color:#3A68D8}
.pbt-card--m30hi .ico{background:rgba(245,200,96,.18);color:#E3A92E}
.pbt-card .tx{flex:1;min-width:0}
.pbt-card .nm{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--jt2-text)}
.pbt-card .meta{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--jt2-text-2)}
.pbt-card .st{flex:none;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:24px;white-space:nowrap}
.pbt-card .st--0{background:rgba(47,95,208,.1);color:#2F5FD0}
.pbt-card .st--3{background:#FFF4DC;color:#8A5A00}
.pbt-card .st--1{background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary-tx,#17794A)}
.pbt-card .st--2{background:var(--jt2-inset,#F2F4F6);color:var(--jt2-text-2)}
.pbt-card .st--8{background:#FDECEE;color:#B42332}
.pbt-card .when{margin:0;font-size:14px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.pbt-card .when b{color:var(--jt2-text);font-weight:700}
.pbt-card .when a{color:var(--mc-primary-tx,#17794A);font-weight:700;text-decoration:none}
.pbt-card .when a:hover{text-decoration:none;color:var(--mc-primary,#0E7C4C)}
.pbt-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pbt-card .chip{display:inline-flex;align-items:center;gap:4px;padding:0 10px;border-radius:9px;background:var(--jt2-inset,#F2F4F6);
  color:var(--jt2-text-2);font-size:12.5px;font-weight:700;line-height:30px}
.pbt-card .chip b{color:var(--jt2-text);font-weight:800;font-variant-numeric:tabular-nums}
.pbt-card .chip.hot{background:#FFF1E8;color:#C2410C}
.pbt-card .chip.hot b{color:#C2410C}
.pbt-card .chip.wait{background:#FFF7E6;color:#8A5A00}
.pbt-card .chip.wait b{color:#8A5A00}
.pbt-card .pbt-bar{margin-top:0}
.pbt-card .act{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin:0;padding:0 14px;border:0;border-radius:14px;
  background:var(--mc-primary,#0E7C4C);color:#fff;font:inherit;font-size:15.5px;font-weight:800;letter-spacing:-.01em;text-decoration:none;
  cursor:pointer;list-style:none;transition:background-color .15s,color .15s,transform .08s;-webkit-tap-highlight-color:transparent}
.pbt-card .act::-webkit-details-marker{display:none}
.pbt-card .act::marker{content:""}
.pbt-card .act:hover,.pbt-card .act:focus{background:var(--mc-primary-800,#0B6A40);color:#fff;text-decoration:none}
.pbt-card .act:active{transform:scale(.99)}
.pbt-card .act--tint{background:var(--mc-primary-tint,#EDF7F1);color:var(--mc-primary-tx,#17794A)}
.pbt-card .act--tint:hover,.pbt-card .act--tint:focus{background:var(--mc-primary,#0E7C4C);color:#fff}
.pbt-card .go[open] > .act{background:var(--jt2-inset,#F2F4F6);color:var(--jt2-text)}
.pbt-card .opts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pbt-card .ol{font-size:14px;font-weight:700;color:var(--jt2-text)}
.pbt-card .opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--jt2-hairline,#E5E8EB);border-radius:14px;
  background:var(--jt2-card,#fff);cursor:pointer;transition:border-color .12s,background-color .12s}
.pbt-card .opt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--mc-primary,#0E7C4C)}
.pbt-card .opt span{display:flex;flex-direction:column;min-width:0}
.pbt-card .opt b{font-size:14.5px;font-weight:700;color:var(--jt2-text)}
.pbt-card .opt small{margin-top:2px;font-size:12.5px;font-weight:500;color:var(--jt2-text-2);word-break:keep-all}
.pbt-card .opt:has(input:checked){border-color:var(--mc-primary,#0E7C4C);background:var(--mc-primary-tint,#EDF7F1)}
.pbt-card .opts .act{margin-top:4px}
.pbt-card .fine{margin:2px 0 0;font-size:12px;font-weight:600;color:var(--jt2-text-2);text-align:center;word-break:keep-all}
.pbt-card .none{margin:12px 0 0;font-size:13.5px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.pbt-card .inline{display:inline;margin:0}
.pbt-card .ln{min-height:34px;padding:0 14px;border:1px solid var(--jt2-hairline,#E5E8EB);border-radius:10px;background:var(--jt2-card,#fff);
  color:var(--jt2-text-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pbt-card .ln:hover{border-color:#D64545;color:#D64545}
.pbt-card.is-done{background:var(--jt2-inset,#F6F8F7);box-shadow:none}
.pbt-card.is-done .ico{filter:grayscale(1);opacity:.55}

/* 빈 칸 */
.pbt-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 20px;border-radius:20px;background:var(--jt2-card,#fff);
  border:1px dashed var(--jt2-hairline,#E5E8EB);text-align:center}
.pbt-empty .ei{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:var(--jt2-inset,#F2F4F6);color:var(--jt2-text-2)}
.pbt-empty b{margin-top:8px;font-size:16px;font-weight:800;color:var(--jt2-text)}
.pbt-empty span{font-size:13.5px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.pbt-empty a{display:inline-flex;align-items:center;margin-top:12px;min-height:44px;padding:0 20px;border-radius:12px;background:var(--mc-primary,#0E7C4C);
  color:#fff;font-size:14.5px;font-weight:800;text-decoration:none}
.pbt-empty a:hover,.pbt-empty a:active{background:var(--mc-primary-800,#0B6A40);color:#fff;text-decoration:none}

/* 안내 (접기) */
.pbt-rule{margin-top:24px;border-radius:16px;background:var(--jt2-card,#fff);border:1px solid var(--jt2-hairline,#E5E8EB)}
.pbt-rule summary{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:14.5px;font-weight:700;color:var(--jt2-text);cursor:pointer;list-style:none}
.pbt-rule summary::-webkit-details-marker{display:none}
.pbt-rule summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--jt2-text-2);border-bottom:2px solid var(--jt2-text-2);
  transform:rotate(45deg);transition:transform .15s}
.pbt-rule[open] summary::after{transform:rotate(-135deg)}
.pbt-rule dl{margin:0;padding:0 18px 18px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px 12px;font-size:13.5px;line-height:1.65}
.pbt-rule dt{font-weight:700;color:var(--jt2-text)}
.pbt-rule dd{margin:0;color:var(--jt2-text-2);word-break:keep-all}
.pbt-rule dd b{color:var(--jt2-text);font-weight:700}
.pbt-rule a{color:var(--mc-primary-tx,#17794A);font-weight:700;text-decoration:none}
.pbt-rule a:hover{text-decoration:none;color:var(--mc-primary,#0E7C4C)}

@media (min-width:901px){
  .pbt{padding-top:30px}
  .pbt-head h1{font-size:30px}
  .pbt-now{padding:24px 26px}
  .pbt-seg{max-width:520px}
  .pbt-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .pbt-sec > .pbt-card{margin-bottom:0}
  .pbt-sec > .pbt-h2,.pbt-sec > .pbt-empty{grid-column:1/-1}
  .pbt-rule dl{grid-template-columns:96px minmax(0,1fr)}
}
@media (max-width:420px){
  .pbt-head{align-items:flex-start}
  .pbt-head h1{font-size:24px}
  .pbt-buy{min-height:38px;padding:0 13px;font-size:13.5px}
  .pbt-seg a{font-size:13px;gap:4px}
}

/* ══ 회원 탈퇴 racing/leave.php (.lvp · 2026-10-13 한민석 "회원탈퇴 버튼도 있어야겠다") — 보관함 .pbt-head + 충전 창 .tc 부품 ══
   잃는 것을 먼저 보여 주고, 탈퇴 단추는 빨강 · 바로 아래 '계속 이용하기'(회색 큰 단추)로 쉽게 물러나게. 색은 jt2 변수(다크 자동) */
.lvp-card{display:block;margin-top:16px;padding:22px 20px;border-radius:20px;background:var(--jt2-card,#fff);border:1px solid var(--jt2-hairline,#E5E8EB);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05)}
.lvp .tc-q small{font-size:13px;font-weight:600;color:var(--jt2-text-2)}
.lvp .tc-info{margin-top:14px}
.lvp-notes{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.lvp-notes li{position:relative;padding-left:14px;font-size:13.5px;font-weight:500;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.lvp-notes li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#D64545}
.lvp-notes b{color:var(--jt2-text);font-weight:700}
.lvp-notes a{color:var(--mc-primary-tx,#17794A);font-weight:700;text-decoration:none}
.lvp-notes a:hover{text-decoration:none}
.lvp-whys{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:14px}
.lvp-why{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1.5px solid var(--jt2-hairline,#E5E8EB);border-radius:14px;background:var(--jt2-card,#fff);cursor:pointer}
.lvp-why input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--jt2-text)}
.lvp-why span{font-size:14px;font-weight:600;color:var(--jt2-text)}
.lvp-why:has(input:checked){border-color:var(--jt2-text);background:var(--jt2-inset,#F6F8F7)}
.lvp-soc{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--jt2-inset,#F6F8F7);font-size:13px;font-weight:600;line-height:1.6;color:var(--jt2-text-2);word-break:keep-all}
.lvp-agree{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;font-weight:700;color:var(--jt2-text);cursor:pointer}
.lvp-agree input{flex:none;width:20px;height:20px;margin:0;accent-color:#D64545}
.lvp .lvp-go{background:#D64545}
.lvp .lvp-go:hover,.lvp .lvp-go:focus{background:#B83737;color:#fff}
.lvp-stay{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:8px;border-radius:16px;background:var(--jt2-inset,#F2F4F6);
  color:var(--jt2-text);font-size:15.5px;font-weight:800;text-decoration:none}
.lvp-stay:hover,.lvp-stay:active{text-decoration:none;color:var(--jt2-text);background:var(--jt2-hairline,#E5E8EB)}
.jt2-setbtn.jt2-setbtn--leave{color:#D64545}
@media (min-width:901px){
  .lvp-card{padding:26px 28px}
  .lvp-whys{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── MY 페이지 회원 탈퇴 링크 (2026-10-13 "모바일 설정 화면에도 탈퇴 버튼") ──
   모바일 '계정 및 서비스' 아래 링크 줄 끝(오른쪽) · PC 아래 링크 줄 끝 → racing/leave.php. 빨강은 설정 화면 [탈퇴하기]와 같은 #D64545 */
.v4-minirow a.v4-minirow-leave{margin-left:auto;color:#D64545}
.v4-minirow a.v4-minirow-leave:hover,.v4-minirow a.v4-minirow-leave:active{color:#B83737;text-decoration:none}
.mypc-foot a.mypc-foot-leave{color:#D64545}
.mypc-foot a.mypc-foot-leave:hover,.mypc-foot a.mypc-foot-leave:active{color:#B83737;text-decoration:none}
/* 3칸 작은 타일(내 기록 · 계정 및 서비스) — 390px 폰에서 '결제…·계정…·고객…'으로 이름이 잘려서,
   아이콘 위·글자 아래로 쌓는 폭을 360 → 430px 로 넓힌다(360 이하 규칙과 같은 모양) */
@media (max-width:430px){
  .v4-grid3 > .v4-mini{flex-direction:column;align-items:flex-start;gap:5px}
  .v4-grid3 > .v4-mini .go{display:none}
}