/* ==========================================================================
   minigame — 업/다운 게임 화면 (minigame-play.html) + 로비와 같이 쓰는 조각
   근거: ../04-페이지/미니게임.md · whaley.bet /futures 실측(_분석/whaley/market-latest.css mk-* · ud-*)
   ★ 크기·간격·둥글기·배치 숫자는 whaley 그대로. 색만 스카이시티 토큰으로 옮겼다.
     whaley 의 --primary(파랑 선택) → 골드, 패널 결 --surface-1/2/3 → --surface/-2/-3.
     UP 초록 · DOWN 분홍은 뜻이 있는 색이라 남기되, 밤하늘 남색 위에서 튀지 않게 한 톤 눌렀다.
   ========================================================================== */

/* ---- 미니게임 전용 값 (--mg- 접두어, 이 파일과 로비에서만) ------------------ */
:root{
  --mg-up:        #2fd89a;   /* UP · 상승 · 적중 — 민트 초록 */
  --mg-up-2:      #14a874;
  --mg-up-ink:    #03170f;
  --mg-down:      #ff5a82;   /* DOWN · 하락 · 빗나감 — 분홍 빨강 */
  --mg-down-2:    #d62c5c;
  --mg-down-ink:  #ffffff;
  --mg-up-soft:   rgba(47,216,154,.14);
  --mg-down-soft: rgba(255,90,130,.14);

  --mg-t2: color-mix(in srgb, var(--text-sub) 30%, #fff);          /* 글자 2단 (whaley --text-2) */
  --mg-t5: color-mix(in srgb, var(--text-sub) 35%, var(--line-strong));          /* 글자 5단 — 라벨 */

  --mg-fs-sm: 12px;  --mg-fs-base: 14px;  --mg-fs-md: 16px;  --mg-fs-lg: 18px;  --mg-fs-xl: 28px;
  --mg-r-chip: 8px;  --mg-r: 12px;  --mg-r-side: 14px;  --mg-r-lg: 18px;
  --mg-gap-card: 16px;
  --mg-aside-w: 304px;       /* whaley 오른쪽 aside 실측 */
  --mg-chart-h: 320px;       /* 폭 대비 너무 높으면 흐름이 납작해 보인다 — 약 2.5 : 1 */
  --mg-t-bg: .15s cubic-bezier(.7,-.4,.4,1.4);
  --mg-t-color: .2s ease-in-out;
}
:root[data-theme^="light-"]{ --mg-t2:#1c2230; --mg-t5:#7a8292; }   /* 흰 테마 — 옅은 글자 단계를 진하게 (sports.css 와 같은 값) */

/* ---- 종목 동그라미 (whaley .ud-sym-ico 26) -------------------------------- */
.ud-sym-ico{
  flex:none; width:26px; height:26px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:color-mix(in oklab, var(--c) 22%, var(--bg)); color:var(--c);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 35%, transparent);
}
.ud-sym-ico b{ font-size:var(--mg-fs-base); font-weight:900; line-height:1; }
.ud-sym-ico.is-long b{ font-size:9px; letter-spacing:-.02em; }
.ud-sym-ico.is-lg{ width:40px; height:40px; }
.ud-sym-ico.is-lg b{ font-size:20px; }
.ud-sym-ico.is-lg.is-long b{ font-size:12px; }
/* 실제 로고 모양(SVG) — 바탕 동그라미를 로고가 가진다 */
.ud-sym-ico.is-logo{ background:none; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.ud-sym-ico.is-logo svg{ width:100%; height:100%; display:block; }

/* ---- 등락 글자 ----------------------------------------------------------- */
.mk-chg{ font-size:var(--mg-fs-sm); font-weight:800; font-style:normal; font-variant-numeric:tabular-nums; }
.mk-chg.is-up{ color:var(--mg-up); }
.mk-chg.is-down{ color:var(--mg-down); }
:is(.ud-card__mark, .mg-hero__lead b).is-up{ color:var(--mg-up); }
:is(.ud-card__mark, .mg-hero__lead b).is-down{ color:var(--mg-down); }

/* ---- UP/DOWN 딱지 ------------------------------------------------------- */
.mg-side{
  display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:var(--r-full);
  font-size:var(--mg-fs-sm); font-weight:900; white-space:nowrap;
}
.mg-side--up{ background:var(--mg-up-soft); color:var(--mg-up); }
.mg-side--down{ background:var(--mg-down-soft); color:var(--mg-down); }

/* ---- 지난 회차 카드 (whaley .ud-card 152) — 로비 최근 결과 --------------- */
.ud-past{ display:flex; gap:8px; }
.ud-card{
  flex:none; width:168px; padding:12px; border-radius:var(--mg-r);
  background:var(--bg); border:1px solid var(--line);
}
.ud-card__time{ display:flex; align-items:center; gap:7px; font-size:var(--mg-fs-sm); font-weight:800; color:var(--mg-t5); }
.ud-card__time .ud-sym-ico{ width:20px; height:20px; }
.ud-card__time .ud-sym-ico b{ font-size:11px; }
.ud-card__time .ud-sym-ico.is-long b{ font-size:7px; }
.ud-card__row{
  display:flex; justify-content:space-between; gap:8px; margin-top:6px;
  font-size:var(--mg-fs-sm); color:var(--text-sub); white-space:nowrap;
}
.ud-card__row b{ font-weight:800; color:var(--mg-t2); font-variant-numeric:tabular-nums; }
.ud-card__mark{
  display:flex; align-items:center; justify-content:center; gap:4px;
  height:28px; margin-top:8px; border-radius:var(--mg-r-chip);
  font-size:var(--mg-fs-sm); font-weight:900;
}
.ud-card__mark.is-up{ background:var(--mg-up-soft); }
.ud-card__mark.is-down{ background:var(--mg-down-soft); }
.ud-card__mark.is-tie{ background:var(--surface-2); color:var(--text-sub); }

/* ==========================================================================
   게임 화면
   ========================================================================== */
.mg-play{ line-height:24px; }   /* whaley 줄 높이 24 고정 — 칸 높이가 같게 */

/* 왼쪽 880 + 오른쪽 304 (whaley 1200 폭 실측) */
.mk-detail{ display:grid; grid-template-columns:minmax(0,1fr) var(--mg-aside-w); gap:var(--mg-gap-card); align-items:start; }
.mk-detail > *{ min-width:0; }
.mg-left{ display:grid; gap:var(--mg-gap-card); }
.mk-panel{ padding:20px; border-radius:var(--mg-r); background:var(--surface); border:1px solid var(--line); }
.mk-panel__title{ font-size:var(--mg-fs-md); font-weight:900; }

/* ---- 묶음 탭 + 종목 칩 (두 단) ------------------------------------------- */
.ud-assetpick{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.ud-groups{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
/* 묶음 = 작은 입구 카드 — 그림 · 이름 · 종목 한 줄. 고른 것은 그 묶음 색 테두리 */
.ud-group{
  position:relative; display:flex; align-items:center; gap:10px; height:62px; padding:0 12px 0 8px; text-align:left;
  border-radius:var(--mg-r); border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 120% at 0% 50%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), var(--bg);
  transition:border-color var(--mg-t-bg), background-color var(--mg-t-bg);
}
.ud-group:hover{ border-color:color-mix(in srgb, var(--c) 55%, var(--line)); }
.ud-group.is-on{
  border-color:var(--c);
  background:radial-gradient(ellipse 80% 140% at 0% 50%, color-mix(in srgb, var(--c) 26%, transparent), transparent 75%), var(--surface-2);
  box-shadow:0 0 0 1px var(--c) inset, 0 6px 18px color-mix(in srgb, var(--c) 18%, transparent);
}
.ud-group__art{ flex:none; width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.ud-group__txt{ display:grid; gap:0; min-width:0; line-height:1.3; }   /* 이름과 종목 줄을 붙인다 */
.ud-group__txt b{ font-size:var(--mg-fs-md); font-weight:900; color:var(--mg-t2); }
.ud-group.is-on .ud-group__txt b{ color:var(--text); }
.ud-group__txt small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; color:var(--mg-t5); }

.ud-syms{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.ud-syms::-webkit-scrollbar{ display:none; }
.ud-sym{
  flex:none; height:38px; padding:0 12px 0 5px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--surface-2); color:var(--text-sub);
  font-size:var(--mg-fs-base); font-weight:800;
  border:1px solid transparent;
  transition:background var(--mg-t-bg), color var(--mg-t-color), border-color var(--mg-t-bg);
}
.ud-sym:hover{ background:var(--surface-3); color:var(--mg-t2); }
.ud-sym.is-on{ color:var(--text); border-color:var(--accent-line); background:color-mix(in oklab, var(--accent) 8%, var(--surface-2)); }
.ud-sym__px{ font-style:normal; font-weight:700; font-size:var(--mg-fs-sm); color:var(--text-sub); font-variant-numeric:tabular-nums; }
.ud-sym.is-on .ud-sym__px{ color:var(--mg-t2); }

/* ---- 차트 카드 — 판보다 한 단 어두운 카드 (whaley 실측) ------------------- */
.mk-chartcard{ margin-top:14px; padding:16px; border-radius:var(--mg-r); background:var(--bg); }
.mg-cc__head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }   /* 이름 · 가격 · 변동 · 환율 · 실시간을 한 줄에 */
.mg-cc__title{ display:flex; align-items:baseline; gap:8px; font-size:var(--mg-fs-lg); font-weight:900; }
.mg-cc__title small{ font-size:var(--mg-fs-sm); font-weight:700; color:var(--text-sub); }
.mg-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px;
  border-radius:var(--r-full); background:var(--mg-up-soft);
  font-size:var(--mg-fs-sm); font-weight:800; color:var(--mg-up);
}
.mg-live i{ width:7px; height:7px; border-radius:var(--r-full); background:currentColor; animation:mgBlink 1.6s ease-in-out infinite; }
@keyframes mgBlink{ 50%{ opacity:.25; } }

.ud-chartbar{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-top:14px; }
.ud-now{ display:flex; align-items:baseline; gap:8px; margin-left:2px; padding-left:12px; border-left:1px solid var(--line); }
.ud-now b{ font-size:var(--mg-fs-xl); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mg-rate{ font-size:var(--mg-fs-sm); color:var(--mg-t5); font-variant-numeric:tabular-nums; }

.mg-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:12px; }
.mg-seg{ display:flex; gap:4px; }
.mk-range{
  height:30px; padding:0 12px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; white-space:nowrap;
  background:var(--surface-2); font-size:var(--mg-fs-sm); font-weight:700; color:var(--text-sub);
  transition:background var(--mg-t-bg), color var(--mg-t-color);
}
.mk-range:hover{ color:var(--text); }
.mk-range.is-on{ background:var(--accent); color:var(--accent-ink); font-weight:800; }
.mg-select{ display:inline-flex; align-items:center; gap:8px; font-size:var(--mg-fs-sm); font-weight:800; color:var(--mg-t5); }
.mg-select select{
  height:30px; padding:0 30px 0 12px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239aa3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  color:var(--text); font-size:var(--mg-fs-sm); font-weight:800; appearance:none; cursor:pointer;
}
.mg-select select:hover{ border-color:var(--line-strong); }
.mg-chart{ position:relative; margin-top:12px; height:var(--mg-chart-h); }
.mg-chart canvas{ display:block; width:100%; height:100%; cursor:crosshair; touch-action:pan-y; }

/* ---- 구매내역 ------------------------------------------------------------ */
.mg-hist__head{ display:flex; align-items:center; gap:10px; }
.mg-hist__count{ font-size:var(--mg-fs-sm); font-weight:800; color:var(--accent-fg); }
.mg-hist__sub{ margin:16px 0 8px; font-size:var(--mg-fs-sm); font-weight:800; color:var(--mg-t5); }
.mk-empty{ padding:48px; text-align:center; font-size:var(--mg-fs-md); color:var(--mg-t5); }
.mg-hist .state{ padding:40px 20px; }
.mg-rows{ display:grid; gap:6px; }
.mg-row{
  display:grid; align-items:center; gap:12px;
  grid-template-columns:minmax(150px,1.1fr) 84px minmax(220px,1.8fr) 96px minmax(110px,.9fr) minmax(120px,1fr);
  padding:10px 14px; border-radius:var(--mg-r); background:var(--bg);
  border-left:3px solid var(--line);
  font-size:var(--mg-fs-sm); font-variant-numeric:tabular-nums;
}
.mg-row.is-win{ border-left-color:var(--mg-up); }
.mg-row.is-lose{ border-left-color:var(--mg-down); }
.mg-row.is-tie{ border-left-color:var(--line-strong); }
.mg-row__sym{ display:flex; align-items:center; gap:8px; min-width:0; }
.mg-row__sym b{ font-weight:900; }
.mg-row__sym small{ color:var(--mg-t5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-row__px{ display:flex; align-items:baseline; gap:5px; color:var(--text-sub); white-space:nowrap; overflow:hidden; }
.mg-row__px small{ font-size:11px; color:var(--mg-t5); }
.mg-row__px i{ font-style:normal; color:var(--mg-t5); }
.mg-row__px b{ color:var(--text); font-weight:800; }
.mg-row__stake{ font-weight:800; color:var(--mg-t2); text-align:right; }
.mg-row__time{ display:grid; gap:4px; }
.mg-row__time b{ font-weight:900; color:var(--accent-fg); }
.mg-bar{ display:block; height:4px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden; }
.mg-bar i{ display:block; height:100%; background:var(--accent); transform-origin:left; transform:scaleX(var(--p)); transition:transform 1s linear; }
.mg-row__pl{ display:grid; justify-items:end; line-height:1.35; }
.mg-row__pl em{ font-style:normal; font-size:11px; color:var(--mg-t5); }
.mg-row__pl b{ font-weight:900; }
.mg-row.is-win .mg-row__pl b{ color:var(--mg-up); }
.mg-row.is-lose .mg-row__pl b{ color:var(--mg-down); }
.mg-row.is-tie .mg-row__pl b{ color:var(--text-sub); }
.mg-res{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-full); font-size:var(--mg-fs-sm); font-weight:900; white-space:nowrap; }
.mg-res--win{ background:var(--mg-up); color:var(--mg-up-ink); }
.mg-res--lose{ background:var(--mg-down-soft); color:var(--mg-down); }
.mg-res--tie{ background:var(--surface-2); color:var(--text-sub); }

/* ---- 구매 상자 (whaley aside.mk-buy 304) --------------------------------- */
.mk-buy{ position:sticky; top:calc(var(--header-h) + 20px); display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.mk-buy__head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:var(--mg-r); background:var(--surface); border:1px solid var(--line);
}
.mg-bal__label{ font-size:var(--mg-fs-sm); font-weight:800; color:var(--mg-t5); }
.mg-bal__v{ margin-left:auto; font-size:var(--mg-fs-lg); font-weight:900; color:var(--money); font-variant-numeric:tabular-nums; }
.mg-bal__guest{ margin-left:auto; font-size:var(--mg-fs-sm); color:var(--text-sub); }
.mg-bal__login{ height:30px; padding:0 12px; font-size:var(--mg-fs-sm); }

/* 파인 상자 — [진행 시간 | 베팅 금액] 나란히, 자리는 grid-row 로 못 박는다 (whaley 주석 그대로) */
.mk-buy__box{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px 10px;
  padding:12px; border-radius:var(--mg-r); background:var(--surface); border:1px solid var(--line);
}
.mk-buy__label{ font-size:var(--mg-fs-sm); font-weight:800; color:var(--mg-t5); white-space:nowrap; }
.ud-times{ display:flex; align-items:center; gap:4px; }
.ud-times .mk-range{ flex:1 1 0; justify-content:center; height:48px; padding:0; border-radius:var(--mg-r-chip); font-size:var(--mg-fs-base); }
.mk-buy__amount{
  display:flex; align-items:center; gap:6px; height:48px; padding:0 12px;
  border-radius:var(--mg-r-chip); background:var(--bg); border:1px solid var(--line);
  transition:border-color var(--mg-t-color);
}
.mk-buy__amount:focus-within{ border-color:var(--accent-line); }
.mk-buy__amount b{ font-size:var(--mg-fs-md); font-weight:900; color:var(--text-sub); }
.mk-buy__amount input{
  flex:1; min-width:0; border:0; background:transparent; outline:0;
  font-size:var(--mg-fs-md); font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;
}
.mk-buy__amount input::placeholder{ color:var(--text-mute); }

/* 두 단추는 늘 제 색으로 찬다 — 고르는 칸이 아니라 접수 단추 (whaley 2026-09-20) */
.mk-buy__sides{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:2px; }
.mk-buy__side{
  height:52px; border-radius:var(--mg-r-side);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--mg-fs-md); font-weight:900; letter-spacing:.01em;
  border:2px solid transparent;
  transition:filter var(--mg-t-bg), border-color var(--mg-t-color), transform var(--mg-t-bg);
}
.mk-buy__side em{ font-style:normal; font-weight:800; opacity:.8; font-variant-numeric:tabular-nums; }
.mk-buy__side--yes{
  background:linear-gradient(180deg, var(--mg-up) 0%, var(--mg-up-2) 100%); color:var(--mg-up-ink);
  box-shadow:0 6px 18px -8px var(--mg-up), inset 0 1px 0 rgba(255,255,255,.35);
}
.mk-buy__side--no{
  background:linear-gradient(180deg, var(--mg-down) 0%, var(--mg-down-2) 100%); color:var(--mg-down-ink);
  box-shadow:0 6px 18px -8px var(--mg-down), inset 0 1px 0 rgba(255,255,255,.3);
}
.mk-buy__side:hover{ filter:brightness(1.1); }
.mk-buy__side:active{ transform:translateY(1px); }
.mk-buy__side.is-on{ border-color:#fff; }
.ud-pick__hint{ margin:0; text-align:center; font-size:var(--mg-fs-sm); font-weight:700; color:var(--text-sub); }

.mk-buy__quick{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.mk-buy__quick button{
  height:36px; border-radius:var(--mg-r-chip); background:var(--surface-2);
  font-size:var(--mg-fs-sm); font-weight:900; color:var(--text); white-space:nowrap; letter-spacing:-.02em;
  transition:background var(--mg-t-bg), color var(--mg-t-color);
}
.mk-buy__quick button:hover{ background:var(--surface-3); }
.mk-buy__quick [data-half], .mk-buy__quick [data-max]{ color:var(--accent-fg); }
.mk-buy__quick [data-reset]{ color:var(--text-sub); }

.mk-win{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:var(--mg-r-chip); background:var(--bg);
}
.mk-win span{ font-size:var(--mg-fs-sm); color:var(--text-sub); }
.mk-win b{ font-size:var(--mg-fs-md); font-weight:900; color:var(--mg-up); font-variant-numeric:tabular-nums; }
.mk-buy__terms{ padding:0 4px; font-size:var(--mg-fs-sm); color:var(--text-mute); line-height:1.5; }
.mg-limit{ padding:0 4px; margin-top:-6px; font-size:11px; color:var(--text-mute); }

/* 창이 좁으면(본문 < 1000) 구매 상자를 아래로 — body 최소폭 1180 이라 드물다 */
@media (max-width:1240px){
  .mg-row{ grid-template-columns:minmax(130px,1fr) 80px minmax(200px,1.6fr) 86px minmax(100px,.9fr) minmax(110px,1fr); gap:10px; }
}

/* 모션 줄이기 — 깜빡임 · 막대 흐름을 끈다 (차트는 js 에서 1초 한 번만 그린다) */
@media (prefers-reduced-motion:reduce){
  .mg-live i{ animation:none; }
  .mg-bar i{ transition:none; }
}

/* ---- 종목 접힘 메뉴 — 차트 머리의 「BTC 비트코인 ▾」 ------------------------ */
.mg-sympick{ position:relative; }
.mg-sympick__btn{
  display:flex; align-items:center; gap:10px; height:48px; padding:0 12px 0 4px; border-radius:var(--mg-r);
  transition:background var(--mg-t-bg);
}
.mg-sympick__btn:hover, .mg-sympick__btn[aria-expanded="true"]{ background:var(--surface-2); }
.mg-sympick__caret{ width:16px; height:16px; fill:none; stroke:var(--text-sub); stroke-width:2.2; stroke-linecap:round; transition:transform var(--mg-t-bg); }
.mg-sympick__btn[aria-expanded="true"] .mg-sympick__caret{ transform:rotate(180deg); }
.mg-sympick__menu{
  position:absolute; left:0; top:calc(100% + 6px); z-index:20; min-width:280px; padding:6px;
  border:1px solid var(--line); border-radius:var(--mg-r); background:var(--surface); box-shadow:var(--shadow-pop);
  display:grid; gap:2px;
}
.mg-sympick__menu .ud-sym{
  width:100%; height:44px; padding:0 12px 0 8px; border-radius:var(--mg-r-chip); background:none; border:0;
  display:grid; grid-template-columns:26px auto 1fr auto; align-items:center; gap:10px; text-align:left;
}
.mg-sympick__menu .ud-sym b{ font-weight:900; color:var(--text); }
.mg-sympick__menu .ud-sym span{ font-size:var(--mg-fs-sm); color:var(--text-sub); }
.mg-sympick__menu .ud-sym:hover{ background:var(--surface-2); }
.mg-sympick__menu .ud-sym.is-on{ background:color-mix(in oklab, var(--accent) 12%, var(--surface-2)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent); }
.mg-cc__head .mg-rate{ margin-right:4px; }
.mg-cc__head .mg-seg + .mg-seg{ padding-left:10px; border-left:1px solid var(--line); }
.mg-tools{ margin-top:14px; }
.mg-tools .mg-live{ margin-left:0; }

/* 실시간 표시는 차트 왼쪽 위 모서리에 얹는다 — 머리 줄이 한 줄에 들어가게 */
.mg-chart{ margin-top:18px; }
.mg-chart .mg-live{ position:absolute; top:0; left:0; z-index:1; margin:0; }

/* 한 줄에 다 들어가게 — 버튼 안쪽 여백을 조금 줄이고 라인 고르개는 오른쪽 끝 */
.mg-cc__head .mk-range{ padding:0 10px; }

.mg-cc__head .mg-select select{ padding-left:10px; }

/* ---- 구매 상자 — 세로로 쌓는다 (스포츠 베팅 슬립과 같은 흐름) -----------------
   진행 시간 → 금액 → 빠른 금액 → 계산표 → 안내 → UP / DOWN(= 구매 버튼) */
.mk-buy__box{ display:flex !important; flex-direction:column; gap:12px; }
.ud-amt-head{ display:flex; align-items:baseline; justify-content:space-between; margin-top:6px; }
.ud-amt-have{ font-size:var(--mg-fs-sm); color:var(--text-sub); font-variant-numeric:tabular-nums; }
.mk-buy__box .mk-buy__amount{ height:52px; }
.mk-buy__box .mk-buy__amount input{ font-size:20px; }
.mk-buy__box .mk-buy__quick button{ height:40px; }
.mk-calc{
  margin:0; padding:14px 16px; border-radius:var(--mg-r); background:var(--bg);
  display:grid; grid-template-columns:1fr auto; gap:12px 10px; align-items:center; font-variant-numeric:tabular-nums;
}
.mk-calc dt{ display:flex; align-items:center; gap:8px; font-size:var(--mg-fs-sm); color:var(--text-sub); }
.mk-calc dd{ margin:0; font-weight:900; text-align:right; }
.mk-calc dd.is-win{ color:var(--mg-up); font-size:var(--mg-fs-lg); }
.mk-calc__tag{ font-style:normal; padding:2px 8px; border-radius:var(--r-full); background:var(--surface-2); font-size:11px; font-weight:800; color:var(--mg-t2); }
.mk-buy__box .mk-buy__sides{ margin-top:0; }
.mk-buy__box .mk-buy__side{ height:56px; font-size:var(--mg-fs-lg); }

/* 차트 머리 오른쪽 — 접힘 메뉴 셋. 봉 간격은 골드, 통화는 하늘색 결로 살짝 구분 */
.mg-selects{ margin-left:auto; display:flex; gap:6px; }
.mg-selects .mg-select{ margin-left:0; }
.mg-select--iv select{ border-color:color-mix(in srgb, var(--accent-line) 55%, transparent); background-color:color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color:var(--accent-fg); }
.mg-select--cur select{ border-color:color-mix(in srgb, #4ec3f7 50%, transparent); background-color:color-mix(in srgb, #4ec3f7 12%, var(--surface-2)); color:#9fdcff; }

/* ---- 구매 상자 칸 — PC 는 원래 세로 흐름(칸 틀은 풀고), 휴대폰은 아래 고정 카트의 [이름 ··· 값] 칸 ---- */

/* ---- 게임 규칙 버튼 — 차트 머리 오른쪽 끝, 캔들(차트 모양) 선택 바로 옆 ---- */
.mg-rules-btn{
  flex:none; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px 0 10px; border-radius:var(--r-full);
  background:var(--surface-2); color:var(--mg-t2); font-size:var(--mg-fs-sm); font-weight:800;
  transition:background-color var(--mg-t-color), color var(--mg-t-color);
}
.mg-rules-btn svg{ width:14px; height:14px; fill:none; stroke:var(--accent-fg); stroke-width:2; stroke-linecap:round; }
.mg-rules-btn:hover{ background:var(--surface-3); color:var(--text); }
.mg-rules-btn:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }

/* ---- 지난 회차 결과 — 차트 아래 한 줄, 좌우 화살표로 넘긴다 (왼쪽이 최근) ---- */
.mg-past{ min-width:0; }
.mg-pastbox{ min-width:0; padding:16px 20px; }   /* 지난 회차 — 차트 판과 떨어진 따로 상자 (베팅내역처럼) */
.mg-left, .mg-left > .mk-panel{ min-width:0; }   /* 옆으로 긴 회차 줄이 왼쪽 판을 밀어 넓히지 않게 */
.mg-past__head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mg-past__title{ font-size:var(--mg-fs-base); font-weight:900; }
.mg-past__sum{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--mg-fs-sm); color:var(--mg-t5); }
.mg-past__sum b{ font-weight:900; }
.mg-past__sum .is-up{ color:var(--mg-up); }
.mg-past__sum .is-down{ color:var(--mg-down); }
.mg-past__navs{ display:flex; gap:2px; margin-left:auto; flex:none; }
.mg-past__nav{ display:grid; place-items:center; width:30px; height:28px; background:var(--surface-2); color:var(--text); transition:background-color var(--mg-t-color); }
.mg-past__nav:first-child{ border-radius:8px 0 0 8px; }
.mg-past__nav:last-child{ border-radius:0 8px 8px 0; }
.mg-past__nav svg{ width:15px; height:15px; }
.mg-past__nav:hover{ background:var(--surface-3); }
.mg-past__nav[disabled]{ color:var(--mg-t5); opacity:.5; cursor:default; }
.mg-past__track{ display:flex; gap:6px; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.mg-past__track::-webkit-scrollbar{ display:none; }
.mg-past__chip{
  position:relative; flex:none; display:grid; gap:4px; min-width:92px; padding:10px 10px 8px; border-radius:10px; scroll-snap-align:start;
  background:var(--surface-2);
}
/* 결과 색 줄 — 모서리 테두리와 붙지 않게 떼어 칩 위쪽 안에 짧은 막대로 */
.mg-past__chip::before{ content:""; position:absolute; top:0; left:12px; right:12px; height:3px; border-radius:0 0 3px 3px; background:var(--c, transparent); }
.mg-past__chip.is-up{ --c:var(--mg-up); }
.mg-past__chip.is-down{ --c:var(--mg-down); }
.mg-past__chip.is-tie{ --c:var(--mg-t5); }
.mg-past__no{ font-size:11px; color:var(--mg-t5); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mg-past__no b{ color:var(--mg-t2); font-weight:800; }
.mg-past__res{ font-size:var(--mg-fs-base); font-weight:900; color:var(--c); }
/* 가장 최근 회차는 한 번 더 짚는다 */
.mg-past__chip:first-child{ background:color-mix(in srgb, var(--c) 12%, var(--surface-2)); }

/* ---- 규칙 팝업 ---- */
.mg-rules__steps{ display:grid; gap:8px; margin:0 0 16px; padding:0; list-style:none; }
.mg-rules__steps li{ display:grid; gap:2px; padding:10px 12px; border-radius:10px; background:var(--surface-2); }
.mg-rules__steps b{ font-size:var(--mg-fs-base); }
.mg-rules__steps span{ font-size:var(--mg-fs-sm); color:var(--text-sub); }
.mg-rules__list{ display:grid; gap:10px; margin:0; }
.mg-rules__list div{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; font-size:var(--mg-fs-sm); line-height:1.6; }
.mg-rules__list dt{ font-weight:800; color:var(--accent-fg); }
.mg-rules__list dd{ margin:0; color:var(--text-sub); }
.mg-rules__list dd b{ color:var(--text); }

/* ==========================================================================
   휴대폰 (1023px 이하) — 한 줄로 쌓는다: 차트 판 → 구매 상자 → 구매내역
   (.mg-left 를 풀어서 구매 상자가 차트와 구매내역 사이로 들어오게 한다)
   ========================================================================== */
@media (max-width:1023px){
  :root{ --mg-fs-xl: 22px; --mg-gap-card: 12px; --mg-chart-h: 220px; }
  .mk-detail{ grid-template-columns:minmax(0,1fr); }
  .mg-left{ display:contents; }
  .mg-left > .mk-panel:first-child{ order:1; }
  .mg-left > .mg-pastbox{ order:1; padding:12px 14px; }   /* 휴대폰 — 차트 판 바로 아래 */
  .mk-buy{ order:2; position:static; }
  .mg-left > .mg-hist{ order:3; }
  .mk-panel{ padding:10px; }
  /* 묶음 네 개를 한 줄에 — [그림 이름] 한 줄 · 낮게(40), 종목 목록(금 · 은 · 오일 등)은 뺀다 */
  .ud-groups{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .ud-group{ justify-content:center; gap:3px; height:36px; padding:0 4px; }
  .ud-group__art{ width:22px; height:22px; }
  .ud-group__txt b{ font-size:12px; letter-spacing:-.3px; white-space:nowrap; }
  .ud-group__txt small{ display:none; }
  /* 차트 머리 — 한 줄: [심볼 | BTC 비트코인 ▾ / 가격 변동률] ········ [봉 간격 ▾][통화 ▾][모양 ▾]
     심볼은 두 줄 높이로 왼쪽에 걸고, 그 옆에 이름(접힘 메뉴) · 바로 아래 가격. 환율 글은 뺀다 */
  .mg-cc__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"sym sel" "now sel"; align-items:center; gap:0 8px; }
  .mg-cc__head .mg-sympick{ grid-area:sym; min-width:0; }
  .mg-sympick__btn{ position:relative; height:21px; gap:5px; padding:0 0 0 35px; border-radius:6px; white-space:nowrap; }
  .mg-sympick__btn [data-ico]{ position:absolute; left:0; top:0; }
  .mg-sympick__btn .ud-sym-ico.is-lg{ width:30px; height:30px; margin-top:4px; }
  .mg-sympick__btn .ud-sym-ico.is-lg b{ font-size:15px; }
  .mg-sympick__btn:hover, .mg-sympick__btn[aria-expanded="true"]{ background:none; }
  .mg-cc__title{ gap:4px; font-size:14px; white-space:nowrap; }
  .mg-cc__title small{ font-size:11px; }
  .mg-sympick__caret{ width:14px; height:14px; }
  .ud-now{ grid-area:now; display:flex; align-items:baseline; gap:3px; min-width:0; margin:0; padding:0 0 0 35px; border:0; line-height:17px; white-space:nowrap; }
  .ud-now b{ font-size:12px; letter-spacing:-.3px; }
  .ud-now .mk-chg{ font-size:10px; }
  .ud-now .mk-chg small{ display:none; }
  .mg-cc__head .mg-rate{ display:none; }
  .mg-cc__head .mg-selects{ grid-area:sel; gap:2px; }
  .mg-select select{ height:28px; padding:0 13px 0 6px; background-position:right 3px center; background-size:9px; font-size:11px; }
  .mg-cc__head .mg-select select{ padding-left:6px; }
  .mk-chartcard{ margin-top:8px; padding:10px 8px 8px; margin-inline:-4px; }
  .mg-chart{ margin-top:8px; }   /* 머리 · 차트 사이 18 → 8 */
  .mg-selects{ margin-left:0; }
  .mg-sympick__menu{ min-width:0; width:calc(100 * var(--vw) - 56px); }
  /* 구매내역 한 줄 → 두 칸 세 줄 */
  .mg-row{ grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
  .mg-row__stake{ text-align:left; }
  .mk-empty{ padding:32px 12px; }
  /* 지난 회차 — 요약 글은 빼고 제목 · 화살표만, 칩은 조금 작게 */
  .mg-past__sum{ display:none; }
  .mg-past__chip{ min-width:80px; padding:7px 9px; }
  /* 게임 규칙 — 휴대폰은 ⓘ 동그라미만 */
  .mg-rules-btn{ width:28px; height:28px; padding:0; justify-content:center; }
  .mg-rules-btn span{ display:none; }
  .mg-rules-btn svg{ width:16px; height:16px; }
}

/* 태블릿 세로 (600~1023px) — 묶음 네 칸 한 줄 */
@media (min-width:600px) and (max-width:1023px){
  :root{ --mg-chart-h: 280px; }
}
@media (max-width:1023px){
  .mk-buy__box{ gap:8px !important; }
  .ud-times .mk-range{ height:38px; }
  .mk-buy__box .mk-buy__amount{ height:44px; }
  .mk-buy__box .mk-buy__amount input{ font-size:17px; }
  .mk-buy__box .mk-buy__quick button{ height:34px; }
  .mk-calc{ padding:10px 12px; gap:6px 10px; }
  .mk-buy__box .mk-buy__side{ height:46px; }
  .mk-buy__head{ padding:10px 12px; }
}

/* ---- PC — 큰 판 하나 안에 상자들 (마이페이지 · 예측마켓과 같은 틀) ---------------
   바깥 판이 차트 판 · 베팅내역 · 오른쪽 카트까지 한 장으로 감싸고, 안쪽 상자는 한 단계 어두운 면 */
@media (min-width:1024px){
  .mg-play{
    display:grid; gap:12px; margin-top:-16px; margin-bottom:40px; padding:16px;   /* 위 — 페이지 기본 여백 30 에서 16 을 당겨 헤더와 14 만 */
    border-radius:26px; border:1px solid rgb(var(--fg-rgb) / .07);
    background:linear-gradient(180deg, var(--pn-top) 0%, var(--pn-bot) 100%);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  }
  .mg-play .mk-detail{ gap:12px; }
  .mg-play .mk-panel, .mg-play .mk-buy__box{ border-radius:16px; background:var(--pn-card); border-color:var(--pn-line); }
  .mg-play .mk-chartcard, .mg-play .ud-info{ background:var(--pn-well); }
  /* 카트 — 칸 높이 · 간격을 한 단계 키워 세로를 조금 늘린다 (정보 44 · 금액 버튼 38 · UP/DOWN 56, 묶음 사이 12) */
  .mg-play .mk-buy__box{ gap:12px !important; padding:14px; }
  .mg-play .ud-info{ padding:4px 14px; }
  .mg-play .ud-cell{ height:44px; }
  .mg-play .mk-buy__box .mk-buy__quick{ gap:6px; }
  .mg-play .mk-buy__box .mk-buy__quick button{ height:38px; }
  .mg-play .mk-buy__box .mk-buy__sides{ gap:8px; margin-top:0; }
  .mg-play .mk-buy__box .mk-buy__side{ height:56px; }
}

/* ==========================================================================
   베팅 카트 — PC · 휴대폰 같은 구성 (옛 PC 전용 칸 .is-pc 와 잔액 줄은 숨긴다)
   [이름 ··· 값] : 게임종류 · 게임시간 · 게임회차 · 결과시간 · 베팅금액 · 예상당첨금
   → [1만 5만 10만 50만 100만 MAX] → [▲ UP | ▼ DOWN]
   PC(오른쪽 304 폭)는 한 줄에 한 항목, 휴대폰(아래 고정)은 두 항목씩.
   이름 칸 폭을 가장 긴 「예상당첨금」에 맞춰 값이 같은 세로선에서 시작한다.
   ========================================================================== */
.mk-buy .is-pc, .mk-buy > .mk-buy__head{ display:none !important; }
.mk-buy__box{ display:grid !important; grid-template-columns:minmax(0,1fr); gap:6px !important; }
.ud-info{ display:grid; grid-template-columns:minmax(0,1fr); padding:2px 12px; border-radius:var(--mg-r); background:var(--bg); }
.ud-cell{ display:flex; align-items:center; gap:8px; min-width:0; height:38px; margin:0; padding:0; background:none; }
.ud-info > .ud-cell + .ud-cell{ border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.ud-cell > span, .ud-cell > .mk-buy__label, .ud-cell__k{ flex:none; width:62px; font-size:12px; font-weight:700; color:var(--mg-t5); white-space:nowrap; }
.ud-cell > b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.ud-cell--round b{ color:var(--accent-fg); }
.ud-cell--kind b em{ margin-left:5px; padding:1px 6px; border-radius:4px; background:var(--surface-2); font-style:normal; font-size:12px; font-weight:800; color:var(--mg-t2); }
.ud-cell--win b{ color:var(--mg-up); }
/* 게임시간 — 작은 세 칸 */
.ud-cell--time .ud-times{ flex:1; min-width:0; max-width:132px; gap:2px; padding:2px; border-radius:6px; background:var(--surface-2); }
.ud-cell--time .mk-range{ height:26px; border-radius:5px; font-size:12px; }
/* 베팅금액 — 줄 안의 작은 입력칸, 숫자 뒤 '원' */
.ud-cell--amt .mk-buy__amount{ display:flex; align-items:center; flex:1; min-width:0; max-width:150px; height:28px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); }
.ud-cell--amt .mk-buy__amount:focus-within{ border-color:var(--accent-line); }
.ud-cell--amt .mk-buy__amount b{ display:none; }
.ud-cell--amt .mk-buy__amount::after{ content:"원"; flex:none; margin-left:3px; font-size:12px; font-weight:700; color:var(--mg-t5); }
.ud-cell--amt .mk-buy__amount input{ flex:1; min-width:0; font-size:14px; font-weight:900; text-align:right; }
/* 금액 버튼 한 줄 · UP / DOWN */
.mk-buy__quick{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; }
.mk-buy__box .mk-buy__quick button{ height:32px; padding:0; font-size:12px; }
.mk-buy__box .mk-buy__sides{ gap:6px; margin-top:2px; }
.mk-buy__box .mk-buy__side{ height:48px; font-size:16px; }

/* 휴대폰 — 아래 탭 바로 위에 고정 (접고 펴지 않는다 · 차트를 보면서 베팅), 두 항목씩 */
@media (max-width:1023px){
  .mk-buy{
    position:fixed; top:auto; left:0; right:0; bottom:calc(var(--mtab-h) + env(safe-area-inset-bottom)); z-index:calc(var(--z-quick) + 1);   /* top:auto — PC 의 sticky top 을 푼다 */
    display:block; padding:10px 12px 26px;   /* 아래 26 — 탭 가운데 입금 버튼이 올라오는 자리 */
    background:var(--bg-deep); border-top:1px solid var(--line); box-shadow:0 -10px 28px rgba(0,0,0,.5);
  }
  body:has(.mk-buy){ padding-bottom:calc(var(--mtab-h) + env(safe-area-inset-bottom) + 250px); }
  .mk-buy__box{ padding:0; background:none; border:0; border-radius:0; }
  .ud-info{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--surface); }
  .ud-cell{ height:36px; }
  .ud-info > .ud-cell + .ud-cell{ border-top:0; }
  :is(.ud-cell--round, .ud-cell--until, .ud-cell--amt, .ud-cell--win){ border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent) !important; }
  .mk-buy .ud-cell:is(.ud-cell--time, .ud-cell--until, .ud-cell--win){ padding-left:12px; }   /* 오른쪽 칸 — 가운데 선에서 시작 */
  .ud-cell > span, .ud-cell > .mk-buy__label, .ud-cell__k{ width:auto; font-size:11.5px; }
  /* 오른쪽 칸 이름은 가장 긴 「예상당첨금」 폭에 맞춘다 — 1분 · 16:21 · ₩0 이 같은 세로선 */
  .mk-buy .ud-cell:is(.ud-cell--time, .ud-cell--until, .ud-cell--win) > :first-child{ width:58px; }
  .ud-cell > b{ font-size:13.5px; }
  .ud-cell--kind b em, .ud-cell--time .ud-times, .ud-cell--amt .mk-buy__amount{ background:var(--bg); }
  .ud-cell--kind b em{ margin-left:4px; font-size:11.5px; }
  .ud-cell--time .ud-times{ max-width:104px; }
  .ud-cell--time .mk-range{ height:24px; }
  .ud-cell--amt .mk-buy__amount{ max-width:110px; height:26px; }
  .ud-cell--amt .mk-buy__amount input{ font-size:13.5px; }
  .mk-buy__box .mk-buy__quick button{ height:30px; }
  .mk-buy__box .mk-buy__side{ height:44px; font-size:15px; }
}

/* ==========================================================================
   exit-game 프레임 (csk-igaming 6단계, 레드 2026-09-28 「미니게임은 exit-portal 과 동기화」)
   차트 카드 안은 프레임 하나 — 시안 차트 머리의 종목 고르개 · 가격 · 고르개 셋은 프레임 안에 있어 걷고 규칙 단추만 남겼다.
   높이는 프레임이 exitgame:height 로 알려 온다. 다 그려지기 전(ready)에는 투명 — display:none 이면 안쪽 차트가 찌그러진다.
   ========================================================================== */
.mk-chartcard--embed{ margin-top:0; }
.mk-chartcard--embed .mg-cc__head{ justify-content:flex-end; }
.mg-embed{ position:relative; min-height:var(--mg-chart-h); margin-top:12px; border-radius:var(--mg-r-chip); overflow:hidden; background:var(--bg-deep); }
.mg-embed__frame{ display:block; width:100%; height:var(--mg-chart-h); border:0; opacity:0; transition:opacity .2s ease; }
.mg-embed__frame.is-ready{ opacity:1; }
.mg-embed__wait, .mg-embed__down{ position:absolute; inset:0; display:grid; place-items:center; padding:16px; text-align:center; }
.mg-embed__wait[hidden], .mg-embed__down[hidden], .mg-embed__stale[hidden]{ display:none; }
.mg-embed__down{ background:color-mix(in srgb, var(--bg-deep) 82%, transparent); }
.mg-embed__down p{ max-width:320px; font-size:var(--mg-fs-base); font-weight:700; color:var(--text-sub); line-height:1.6; }
.mg-embed__stale{ padding:8px 4px 0; font-size:var(--mg-fs-sm); font-weight:700; color:var(--warn); }
@media (max-width:1023px){
  .mk-chartcard--embed .mg-cc__head{ display:flex; }
  .mg-embed{ margin-top:8px; }
}