/* ==========================================================================
   market — 예측마켓 · 선물게임 공용
   루벳 예측마켓의 카드 틀(썸네일 + 질문 / 옵션 상자 / 발)을 그대로 쓴다.
   선물게임은 같은 틀에 내용만 갈아 끼운다 — 종목 · 시세 / 상승·하락 / 회차.
   두 화면 모두 2026년 10월 오픈 예정이다.
   ========================================================================== */

/* ---- 오픈 예정 알림 ------------------------------------------------------ */
.mk-soon{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--r-full);
  background:color-mix(in oklab, var(--cta) 14%, var(--surface-1));
  border:1px solid color-mix(in oklab, var(--cta) 46%, transparent);
  font-size:var(--fs-sm); font-weight:800; color:var(--cta);
}

/* ---- 머리 — 제목과 알림 -------------------------------------------------- */
.mk-top{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.mk-top h1{ font-size:var(--fs-2xl); font-weight:900; }

/* ---- 내 현황 2단 (문서 §2) ----------------------------------------------- */
.mk-summary{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); }
.mk-box{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:88px; padding:12px 20px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.mk-box__label{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-base); font-weight:700; color:var(--text-4);
}
.mk-box__value{ display:block; margin-top:4px; font-size:var(--fs-2xl); font-weight:700; }
.mk-box__value.is-up  { color:var(--success); }
.mk-box__value.is-down{ color:var(--tag-casino); }
.mk-box .btn{ flex:none; margin:0; }

/* ---- 칩 줄 --------------------------------------------------------------- */
.mk-chips{ display:flex; gap:8px; }
.mk-chip{
  flex:none; height:40px; padding:0 14px; border-radius:var(--r);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--surface-1); border:1px solid var(--line);
  font-size:var(--fs-base); font-weight:700; color:var(--text-4);
  transition:color var(--t-color), background var(--t-bg), border-color var(--t-color);
}
.mk-chip:hover{ color:var(--text-2); border-color:var(--primary); }
.mk-chip.is-on{ background:var(--primary); border-color:var(--primary); color:#fff; }
.mk-chip svg{ width:20px; height:20px; }

/* ---- 검색 · 정렬 줄 (문서 §4) -------------------------------------------- */
.mk-bar{ display:flex; align-items:center; gap:var(--gap-card); flex-wrap:wrap; }
.mk-search{
  flex:1; min-width:220px; height:40px; padding:0 14px; border-radius:var(--r);
  display:flex; align-items:center; gap:10px;
  background:var(--surface-1); border:1px solid var(--line);
}
.mk-search svg{ width:20px; height:20px; color:var(--text-5); flex:none; }
.mk-search input{
  flex:1; min-width:0; border:0; background:transparent;
  font-family:var(--font); font-size:var(--fs-base); color:var(--text);
}
.mk-bar .select{ height:40px; }

/* ---- 카드 그리드 3열 (문서 §5·§6) ---------------------------------------- */
.mk-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--gap-card); grid-auto-rows:1fr;
}
.mk-card{
  display:flex; flex-direction:column; gap:14px;
  padding:20px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
  transition:border-color var(--t-color), transform var(--t-bg);
}
.mk-card:hover{ border-color:var(--primary); transform:translateY(-2px); }

/* 머리 — 썸네일 72 + 질문 (문서 §5.1) */
/* ⚠ 그림이 72→48 로 줄었으니 사이도 줄인다. 16 을 그대로 두면 아이콘이
     제 무게보다 멀리 떨어져 두 덩이로 읽힌다 */
.mk-card__head{ display:flex; align-items:flex-start; gap:12px; }
/*
  항목 그림 자리.

  ⚠ 그림은 <칸을 꽉 채운다> (레드 2026-09-14 「이부분 꽉차게」). 전에는 72px 판
    한가운데에 40px 짜리가 앉아 사방에 16px 씩 남았다 — 글리프일 때는 그 여백이
    맞았지만 사진이 들어오면서 <액자 속 우표>처럼 보였다.

  ★ 글리프(svg)는 그대로 가운데에 둔다. 아직 그림이 없는 마켓이 그리로 물러난다.
*/
/*
  ★★ 그림 자리를 <줄였다> (레드 2026-09-15 「아이콘 축소」).

    72px 은 사진을 꽉 채우던 시절의 크기다. 이제 선 아이콘이라 그만한 판이
    필요 없고, 카드에서 제일 큰 것이 아이콘이면 <질문이 두 번째로 읽힌다>.
    48 로 줄여 제목 두 줄과 키를 맞췄다.

  ★ 아이콘은 <카테고리 색>을 탄다(currentColor). 바탕에서 뺀 갈래 색이
    여기로 옮겨 온 것이다.
*/
.mk-thumb{
  flex:none; width:48px; height:48px; border-radius:var(--r-chip, 10px);
  display:grid; place-items:center; background:var(--bg);
  overflow:hidden; color:var(--c, var(--text-2));
}
.mk-thumb svg{ width:26px; height:26px; color:inherit; }
.mk-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/*
  ★★ 주제와 제목을 <한 기둥에> 세운다 (레드 2026-09-15 「주제 제목 정렬」).

    전에는 제목 하나만 있어 갈래를 카드에서 알 수 없었다 — 색으로만 말하고
    있었는데, 그 색을 바탕에서 뺐으니 글자로 말해야 한다.
  ⚠ 주제가 위, 질문이 아래다. 훑을 때 <어느 갈래인지>를 먼저 거르고
    그다음 질문을 읽는 순서다.
*/
.mk-card__who{ min-width:0; display:grid; gap:4px; align-content:start; }
.mk-card__cat{
  font-size:var(--fs-xs, 12px); font-weight:800; letter-spacing:.02em;
  color:var(--c, var(--text-3));
  text-transform:none;
}
.mk-card__title{
  font-size:var(--fs-md); font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* 옵션 상자 — 카드 안에 한 단 파인 자리 (문서 §5.2) */
.mk-opts{
  margin-top:auto; padding:6px; border-radius:var(--r); background:var(--bg);
  display:grid; grid-template-columns:minmax(0,1fr); gap:4px;
}
.mk-opt{ display:flex; align-items:center; gap:8px; min-height:36px; padding:0 6px; }
.mk-opt__name{
  flex:1; min-width:0; font-size:var(--fs-sm); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-opt__pct{ flex:none; font-size:var(--fs-sm); font-weight:900; }
.mk-opt__pct.is-yes{ color:var(--success); }
.mk-opt__pct.is-no { color:var(--tag-casino); }

/* 예 / 아니오 버튼 — 라운드만 8px 로 작다 (문서 §5.2) */
.mk-vote{
  flex:none; min-width:76px; height:36px; padding:0 10px; border-radius:var(--r-chip);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--surface-2);
  font-size:var(--fs-sm); font-weight:700; color:var(--text-2);
  transition:background var(--t-bg), color var(--t-color);
}
.mk-vote--yes:hover{ background:color-mix(in oklab, var(--success) 26%, var(--surface-2)); color:#fff; }
.mk-vote--no:hover { background:color-mix(in oklab, var(--tag-casino) 34%, var(--surface-2)); color:#fff; }

/* 발 — 거래량과 주기 (문서 §5.4) */
.mk-card__foot{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-sm); color:var(--text-5);
}
.mk-card__foot b{ font-weight:800; color:var(--text-3); }
.mk-card__foot span{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; }

/* ---- 선물게임 전용 ------------------------------------------------------
   같은 카드 틀에 내용만 바뀐다 — 질문 자리에 종목과 시세, 옵션 자리에 상승·하락.
   ------------------------------------------------------------------------ */
.mk-chg{ margin-left:8px; font-size:var(--fs-sm); font-weight:800; }
.mk-chg.is-up  { color:var(--success); }
.mk-chg.is-down{ color:var(--tag-casino); }

/* ---- 상세 화면 ---------------------------------------------------------- */
.mk-detail{ display:grid; grid-template-columns:1fr 304px; gap:var(--gap-card); align-items:start; }   /* 오른쪽 304 = 루벳 실측 */
/* 격자 칸은 내용의 최소폭만큼 벌어지려 한다. 좁은 화면에서 밀려나지 않게 0 으로 눌러 둔다. */
.mk-detail > *{ min-width:0; }
.mk-panel{
  padding:20px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.mk-panel__title{ font-size:var(--fs-md); font-weight:900; }
.mk-detail__head{ display:flex; align-items:center; gap:16px; }
.mk-detail__head .mk-thumb{ width:64px; height:64px; }
.mk-detail__head .mk-thumb svg{ width:34px; height:34px; }

/* ---- 머리 판 ------------------------------------------------------------
   제목만 있는 줄이다. 판 두께를 얇게 잡고 `오픈 예정` 을 오른쪽 끝에 붙인다.
   위에 따로 한 줄을 두면 그 줄만큼 화면이 통째로 밀린다.
   ------------------------------------------------------------------------ */
.mk-head{ padding:14px 18px; }
.mk-head .mk-detail__head{ flex-wrap:wrap; gap:12px; }
.mk-head .mk-thumb{ width:48px; height:48px; }
.mk-head .mk-thumb svg{ width:26px; height:26px; }
.mk-head .mk-detail__title{ font-size:var(--fs-md); }
.mk-head .mk-soon{ margin-left:auto; flex:none; }
.mk-detail__title{ font-size:var(--fs-lg); font-weight:900; line-height:1.3; }
.mk-detail__meta{
  margin-top:4px; font-size:var(--fs-sm); color:var(--text-5);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;   /* base.css 가 svg 를 block 으로 두기 때문 */
}
.mk-detail__meta b{ font-weight:800; color:var(--text-3); }
.mk-detail__meta svg{ width:14px; height:14px; }

/* ---- 차트 (루벳 상세 화면) ----------------------------------------------
   상위 4개만 선으로 그린다. 범례에 색 점과 지금 확률을 같이 둔다.

   차트는 **패널보다 한 단 어두운 카드** 안에 넣는다 (루벳 실측).
     페이지 #090C1D → 패널 #191939 → 차트 카드 #090C1D
   패널 위에 그냥 얹으면 층이 하나 모자라 밋밋해진다.
   ------------------------------------------------------------------------ */
.mk-chartcard{
  margin-top:14px; padding:16px; border-radius:var(--r);
  background:var(--bg);
}
.mk-chartcard .mk-chartwrap{ margin-top:12px; }
.mk-chartcard .mk-ranges{ margin-top:12px; }
/* 어두운 카드 위에서는 눈금선이 한 단 밝아야 보인다 */
.mk-chartcard .mk-chart__grid{ stroke:var(--surface-3); }
.mk-chartcard .mk-range{ background:var(--surface-2); }
.mk-chartcard .mk-range.is-on{ background:var(--primary); }

.mk-legend{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.mk-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-base); font-weight:700; }
.mk-legend i{ width:10px; height:10px; border-radius:var(--r-full); background:var(--c); }
.mk-legend b{ font-weight:900; }

.mk-chartwrap{ position:relative; margin-top:14px; padding-right:44px; }
.mk-chart{ display:block; width:100%; height:152px; }
.mk-chart__grid{ stroke:var(--line); stroke-width:1; stroke-dasharray:6 6; }
.mk-chart__line{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
/* y축 눈금은 HTML 로 둔다. SVG 안에 넣으면 가로로 늘어날 때 글자가 찌그러진다. */
.mk-chart__y span{
  position:absolute; right:0; transform:translateY(-50%);
  font-size:var(--fs-sm); font-weight:700; color:var(--text-5);
}
.mk-chart__x{
  display:flex; justify-content:space-between; margin-top:6px; padding-right:44px;
  font-size:var(--fs-sm); font-weight:700; color:var(--text-5);
}
.mk-ranges{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
/* 무엇을 고르는 줄인지 앞에 밝혀 둔다 */
.mk-ranges__label{ margin-right:6px; font-size:var(--fs-base); font-weight:800; color:var(--text-4); }
.mk-range{
  height:30px; padding:0 12px; border-radius:var(--r-full);
  display:inline-flex; align-items:center;
  background:var(--surface-2); font-size:var(--fs-sm); font-weight:700; color:var(--text-3);
  transition:background var(--t-bg), color var(--t-color);
}
.mk-range:hover{ color:#fff; }
.mk-range.is-on{ background:var(--primary); color:#fff; }

/* 옵션 목록 — 확률 막대가 같이 보인다 */
.mk-list{ margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
/* 루벳은 확률 막대를 두지 않는다. 위에 이름·거래량·변동, 아래에 버튼 둘이 절반씩이다. */
.mk-listrow{ padding:12px 14px; border-radius:var(--r); background:var(--bg); }
.mk-listrow__top{ display:flex; align-items:baseline; gap:12px; }
.mk-listrow__name{ flex:1; min-width:0; font-size:var(--fs-base); font-weight:900; }
.mk-listrow__vol{ flex:none; font-size:var(--fs-sm); color:var(--text-5); }
.mk-listrow__chg{ flex:none; font-size:var(--fs-sm); font-weight:800; }
.mk-listrow__chg.is-up  { color:var(--success); }
.mk-listrow__chg.is-down{ color:var(--tag-casino); }
.mk-listrow__btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.mk-listrow__btns .mk-vote{ width:100%; min-width:0; }
/* 예는 초록 바탕에 어두운 글자, 아니오는 한 단 밝은 바탕에 흰 글자 (루벳 실측 색) */
.mk-listrow__btns .mk-vote--yes{ background:var(--success); color:var(--text-on-cta); font-weight:900; }
.mk-listrow__btns .mk-vote--no { background:var(--surface-2); color:var(--text); font-weight:900; }
.mk-rule{ margin-top:16px; font-size:var(--fs-base); color:var(--text-4); line-height:1.6; }

/* ---- 정산 규칙 ---------------------------------------------------------
   문단이 길다. 두 개까지만 보이고 아래로 흐려지며, `더 보기` 로 펼친다.
   ------------------------------------------------------------------------ */
.mk-rules__title{ font-size:var(--fs-lg); font-weight:900; }
.mk-rules__body{ position:relative; margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.mk-rules__body p{ font-size:var(--fs-base); color:var(--text-4); line-height:1.6; }
.mk-rules__body.is-clamped p:nth-child(n+3){ display:none; }
/* 둘째 문단부터 흐려져 뒤에 더 있다는 것을 알린다 */
.mk-rules__body.is-clamped p:nth-child(2){
  -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent);
          mask-image:linear-gradient(180deg, #000 30%, transparent);
}
.mk-rules__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px;
  font-size:var(--fs-sm); color:var(--text-4);
}
.mk-rules__foot b{ font-weight:900; color:var(--text); }
.mk-rules__more{
  flex:none; height:34px; padding:0 14px; border-radius:var(--r-chip);
  background:var(--surface-2); font-size:var(--fs-sm); font-weight:900; color:var(--text);
  transition:background var(--t-bg);
}
.mk-rules__more:hover{ background:var(--surface-3); }

/* 정산 출처 · 정산 주체 — 아래 2단 카드 */
.mk-srcs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.mk-src{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:12px; border-radius:var(--r); background:var(--bg);
  transition:background var(--t-bg);
}
.mk-src:hover{ background:var(--surface-2); }
.mk-src__ico{
  flex:none; width:38px; height:38px; border-radius:var(--r-chip);
  display:grid; place-items:center; background:var(--surface-2); color:var(--primary);
}
.mk-src__ico svg{ width:20px; height:20px; }
.mk-src__txt{ min-width:0; }
.mk-src__txt b{ display:block; font-size:var(--fs-base); font-weight:900; }
.mk-src__txt span{
  display:block; margin-top:1px; font-size:var(--fs-sm); color:var(--text-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- 베팅 카트 (루벳 실측 304) -----------------------------------------
   머리(무엇을 사는지) · 매수/매도 탭 · 파인 상자(선택·금액) · 실행 버튼 순.
   패널 자체는 배경을 두지 않고, 안쪽 상자만 한 단 파서 층을 만든다.
   ------------------------------------------------------------------------ */
.mk-buy{
  padding:0; background:none; border:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;   /* 열을 상자 폭에 묶는다 */
}

/* 머리 — 썸네일 + 마켓 이름 + 무엇을 사는지 */
.mk-buy__head{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.mk-buy__head .mk-thumb{ width:44px; height:44px; border-radius:var(--r-chip); }
.mk-buy__head .mk-thumb svg{ width:24px; height:24px; }
.mk-buy__market{
  font-size:var(--fs-sm); color:var(--text-5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-buy__pick{ margin-top:2px; font-size:var(--fs-md); font-weight:900; line-height:1.25; }
.mk-buy__pick em{ font-style:normal; color:var(--success); }

/* 매수 · 매도 — 반씩 나눠 갖고 고른 쪽에만 굵은 밑줄 */
.mk-buy__tabs{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.mk-buy__tabs button{
  height:38px; font-size:var(--fs-base); font-weight:800; color:var(--text-5);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--t-color), border-color var(--t-bg);
}
.mk-buy__tabs button.is-on{ color:var(--text); border-bottom-color:var(--primary); }

/* 파인 상자 — 선택과 금액이 한 덩어리다 */
/*
   ★★ 시안은 <한 열>이다 (minigame.css 511). 차례는 마크업이 정한다 —
     표(.ud-info) → 금액 단추 → 안내 → 상승 · 하락.

   ⚠ 2026-09-18 에 「정산 시간 | 베팅 금액」을 나란히 두려고 <2열 격자>로 만들고
     자식마다 grid-row 를 못 박았다. 그 둘이 2026-09-26 에 <표 안으로> 들어가
     그 배치는 갈 곳이 없어졌다 — 새 표가 한 칸(124px)만 차지했다.
*/
.mk-buy__box{
  display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:12px;
  border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line);
}
/* ⚠ 라벨은 <한 줄로> 못 박는다. 「진행 시간」이 두 줄로 갈라져 칸 높이가 어긋났다 */
.mk-buy__box .mk-buy__label,
.mk-buy__box .ud-cell__k{ white-space:nowrap; }
/* ★★ 시안대로 상승·하락을 <맨 아래>로 (레드 2026-09-18).
     그 둘이 곧 접수라, 정산시간·금액을 다 정한 <뒤에> 누르는 자리여야 한다.
   ★ order 만 준다 — 마크업을 안 건드리므로 되돌리기도 쉽다. */
.mk-buy__sides{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:2px;
}
/* 접수 단추 노릇을 하므로 눌러야 할 것처럼 크게 (시안 비율) */
.mk-buy__sides .mk-buy__side{ height:52px; font-size:var(--fs-lg, 15px); font-weight:800; }
.mk-buy__sides .mk-buy__side:disabled{ opacity:.45; cursor:default; }
/*
   ★★ 두 단추는 <늘 제 색으로> 찬다 (레드 2026-09-20 참고 시안 「이느낌으로」).

     전에는 고른 쪽만 색이 차고 나머지는 회색이었다. 그런데 이 둘은
     <고르는 칸이 아니라 접수 단추>다 — 누르는 순간 돈이 나간다.
     회색으로 두면 「아직 못 누르는 것」처럼 보여 한 번 더 눌러 보게 된다.
   ★ 고른 쪽은 테두리로만 짚는다. 색을 또 바꾸면 눌린 것인지 고른 것인지 섞인다.
*/
.mk-buy__side{
  height:42px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--fs-base); font-weight:900;
  border:2px solid transparent;
  transition:filter var(--t-bg), border-color var(--t-color);
}
.mk-buy__side--yes{ background:var(--success); color:var(--text-on-cta); }
.mk-buy__side--no { background:var(--tag-casino); color:#fff; }
/* 업다운은 제 색을 쓴다 (레드 2026-09-20 시안) — 아래 .mk-buy 규칙에서 함께 덮는다 */
.mk-buy__side:hover{ filter:brightness(1.12); }
/* 고른 쪽 — 색은 그대로 두고 테두리로만 짚는다 */
.mk-buy__side.is-on{ border-color:var(--text); }

.mk-buy__label{ font-size:var(--fs-sm); font-weight:800; color:var(--text-4); }
/* 금액 — 통화 기호를 상자 안 왼쪽에 붙인다 */
.mk-buy__amount{
  display:flex; align-items:center; gap:8px; height:48px; padding:0 14px;
  border-radius:var(--r-chip); background:var(--bg); border:1px solid var(--line);
}
.mk-buy__amount b{ font-size:var(--fs-md); font-weight:900; color:var(--text-4); }
.mk-buy__amount input{
  flex:1; min-width:0; border:0; background:transparent;
  font-family:var(--font); font-size:var(--fs-md); font-weight:800; color:var(--text);
}
.mk-buy__amount input::placeholder{ color:var(--text-6); }

/* 자주 쓰는 금액 — 눌러서 채운다 */
/* ⚠ 여기도 칸 수를 안 박는다 — 빠른금액 다섯 + 절반·최대·초기화 = 여덟이다 */
.mk-buy__quick{ display:grid; grid-template-columns:repeat(auto-fit, minmax(58px,1fr)); gap:6px; }
.mk-buy__quick button{
  height:36px; border-radius:var(--r-chip); background:var(--surface-2);
  font-size:var(--fs-sm); font-weight:900; color:var(--text);
  transition:background var(--t-bg);
}
.mk-buy__quick button:hover{ background:var(--surface-3); }

/* 구매 요약 — 시안 .mk-win 은 <세로 네 줄>이다 (레드 2026-09-26 이미지)
     ┌ 평균 가격 ········ 22¢ ┐
     │ 받을 몫 ·········· 0   │
     │ 예상 당첨금 ······ ₩0  │  ← 이 줄만 초록
     └ 예상 수익 ········ ₩0  ┘

   ⚠⚠ 전에는 flex 한 줄이라, 줄이 넷이 되자 <가로로 나란히> 서서
     「평균 가 / 격」처럼 글자가 세로로 쪼개졌다. dl 안의 div 가 줄 하나다.
   ⚠ 값은 dd 다. 옛 마크업(span·b)도 아직 쓰는 자리가 있어 함께 남긴다. */
.mk-win{
  display:grid; gap:6px;
  padding:10px 12px; border-radius:var(--r-chip); background:var(--bg);
}
.mk-win > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mk-win dt{ font-size:var(--fs-sm); color:var(--text-4); }
.mk-win dd{ margin:0; font-size:var(--fs-md); font-weight:900; font-variant-numeric:tabular-nums; }
.mk-win .is-win dd, .mk-win dd.is-yes{ color:var(--success); }
/* 옛 한 줄짜리(span + b) — 다른 자리가 아직 쓴다 */
.mk-win > span{ font-size:var(--fs-sm); color:var(--text-4); }
.mk-win > b{ font-size:var(--fs-md); font-weight:900; color:var(--success); font-variant-numeric:tabular-nums; }
.mk-win:has(> span){ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.mk-buy__go{ height:48px; font-size:var(--fs-base); }
.mk-buy__terms{ font-size:var(--fs-sm); color:var(--text-6); line-height:1.5; }

.mk-empty{
  grid-column:1 / -1; padding:48px; text-align:center;
  font-size:var(--fs-md); color:var(--text-5);
}

/* ---- 좁은 화면 ---------------------------------------------------------- */
@media (max-width:1024px){
  .mk-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mk-detail{ grid-template-columns:1fr; }
  .mk-head .mk-soon{ margin-left:0; }
  .mk-chips{ overflow-x:auto; scrollbar-width:none; }
  .mk-chips::-webkit-scrollbar{ display:none; }
}
@media (max-width:640px){
  .mk-grid{ grid-template-columns:1fr; }
  .mk-summary{ grid-template-columns:1fr; }
  .mk-card{ padding:16px; }
  .mk-detail__head{ gap:14px; }
  .mk-srcs{ grid-template-columns:1fr; }
  .mk-buy__quick{ grid-template-columns:repeat(3, 1fr); }
}

/* ==========================================================================
   선물게임 (UP AND DOWN) — 예측마켓 상세 화면의 틀을 그대로 쓴다.
     차트 위   = 종목 고르개 (예측마켓의 범례 자리)
     차트 아래 = 베팅 시간 고르개 (기간 탭 자리)
     그 아래   = 지난 회차 결과 가로 슬라이드
     그 아래   = 다가올 회차 목록 (셋만 펼치고 나머지는 흐리게 접는다)
   ========================================================================== */

/* ---- 종목 고르개 — 묶음 탭 + 그 묶음의 종목 ------------------------------
   열 개를 한 줄에 늘어놓으면 밀려서 뒤가 잘린다. 묶음으로 한 단 나눠
   한 줄에 다섯 개를 넘지 않게 한다.
   ------------------------------------------------------------------------ */
/* 라벨 · 묶음 · 종목이 한 줄에 나란히 선다.
   각 덩어리에 width:max-content 를 줘야 한다 — 안 주면 블록이라 한 줄을 다 차지한다. */
/* ★★ 시안대로 <두 단>이다 (레드 2026-09-18) — 윗단 묶음 탭, 아랫단 종목 칩.
     접힘메뉴를 걷고 칩을 늘어놓아 눌러 펴기 전에 무엇이 있는지 보이게 했다. */
/* ⚠⚠ 이름을 .ud-assetpick 으로 바꿨다 (2026-09-18). .ud-pick 은 <이미 쓰이고 있던>
     이름이라(아래 640행 근처 · 차트 아래 시세 줄) 뒤에 실린 그쪽이 내 것을 덮었다.
     align-items:center 가 딸려 와 묶음 탭과 칩 줄이 <가운데로 몰렸다>.
   ★ 새 이름을 지을 때는 먼저 <비어 있는지> 본다. 부딪혀도 오류가 안 난다. */
.ud-assetpick{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }
/* 묶음 탭은 줄을 <가득> 쓴다. 옛 .ud-groups 는 width:max-content 라 왼쪽에만 붙었는데,
   시안은 넷이 고르게 퍼져 있다. 좁으면 가로로 민다 — 넷이라 대개 들어간다. */
.ud-assetpick .ud-groups{ width:auto; overflow-x:auto; scrollbar-width:none; }
.ud-assetpick .ud-groups::-webkit-scrollbar{ display:none; }
.ud-assetpick .ud-group{ flex:1 1 auto; justify-content:center; }

/* 종목 칩 줄 — ⚠ 넘치면 <가로로 민다>. 증권이 여덟이라 폰에서 한 줄에 안 들어간다.
   접힘메뉴를 쓰던 까닭이 「줄이 늘 한 줄로 끝난다」였는데, 미는 줄이면 그 걱정이 없다. */
.ud-syms{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; -ms-overflow-style: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-4);
  font-size:var(--fs-base); font-weight:800;
  border:1px solid transparent;
  transition:background var(--t-bg), color var(--t-color), border-color var(--t-bg);
}
.ud-sym:hover{ background:var(--surface-3); color:var(--text-2); }
.ud-sym.is-on{ color:var(--text); border-color:var(--c, var(--line)); }

/* 칩 안 시세 — 이름보다 한 걸음 뒤로 물린다. 고르는 자리지 보는 자리가 아니다 */
.ud-sym__px{
  font-style:normal; font-weight:700;
  font-size:var(--fs-sm); color:var(--text-4);
  font-variant-numeric:tabular-nums;
}
.ud-sym.is-on .ud-sym__px{ color:var(--text-2); }
/* ⚠ 멈췄거나 3초 넘게 안 온 값. 또렷하면 「이 값으로 걸 수 있다」로 읽힌다 */
.ud-sym__px.is-dim{ opacity:.4; }

.ud-pickrow{ display:flex; align-items:center; gap:10px; }
.ud-pickrow__label{ flex:none; font-size:var(--fs-base); font-weight:800; color:var(--text-4); }
.ud-groups{
  flex:none; width:max-content;
  display:flex; gap:4px; padding:4px; border-radius:var(--r); background:var(--bg);
}
.ud-group{
  height:32px; padding:0 11px; border-radius:var(--r-chip);
  display:inline-flex; align-items:center;
  font-size:var(--fs-base); font-weight:800; color:var(--text-5);
  transition:background var(--t-bg), color var(--t-color);
}
.ud-group:hover{ color:var(--text-2); }
.ud-group.is-on{ background:var(--surface-2); color:var(--text); }

/* ---- 종목 접힘메뉴 — 줄 오른쪽 끝에 둔다 --------------------------------
   묶음을 고르면 그 묶음의 첫 종목이 여기 뜨고, 눌러야 나머지가 펼쳐진다.
   칩을 늘어놓지 않아 줄이 늘 한 줄로 끝난다.
   ------------------------------------------------------------------------ */
.ud-drop{ position:relative; margin-left:auto; }
.ud-drop__btn{
  height:40px; padding:0 10px 0 5px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--surface-2); color:var(--text);
  font-size:var(--fs-base); font-weight:800;
  border:1px solid var(--c, var(--line));
  transition:background var(--t-bg);
}
.ud-drop__btn:hover{ background:var(--surface-3); }
/* 심볼은 종목 색을 옅게 깐 동그라미 안에 넣는다 */
.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);
}
.ud-sym-ico svg{ width:16px; height:16px; }
.ud-drop__caret{ width:16px; height:16px; color:var(--text-4); transition:transform var(--t-bg); }
.ud-drop.is-open .ud-drop__caret{ transform:rotate(180deg); }

.ud-drop__menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  min-width:200px; padding:6px; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  display:none;
}
.ud-drop.is-open .ud-drop__menu{ display:grid; gap:2px; }
.ud-drop__item{
  height:44px; padding:0 12px 0 6px; border-radius:var(--r-chip);
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-base); font-weight:800; color:var(--text-3);
  transition:background var(--t-bg), color var(--t-color);
}
.ud-drop__item:hover{ background:var(--surface-3); color:var(--text); }
.ud-drop__item.is-on{ background:var(--surface-3); color:var(--text); }
.ud-drop__item b{ margin-left:auto; font-size:var(--fs-sm); font-weight:800; color:var(--text-5); }
/* ---- 머리 마크 — 오를 때 빨강, 내릴 때 파랑 --------------------------- */
.ud-mark svg{ width:100%; height:100%; }
.ud-mark .up  { fill:var(--updown-up); }
.ud-mark .down{ fill:var(--updown-down); }

/* 고른 종목 — 차트 위에 크게 */
.ud-now{ display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.ud-now b{ font-size:var(--fs-xl); font-weight:900; font-variant-numeric:tabular-nums; }
.ud-now span{ font-size:var(--fs-base); color:var(--text-4); }

/* ---- 지난 회차 결과 — 가로로 민다 --------------------------------------- */
.ud-past{ display:flex; gap:8px; }   /* .sec 이 아래 간격을 준다 */
.ud-card{
  flex:none; width:152px; padding:12px; border-radius:var(--r);
  background:var(--bg); border:1px solid var(--line);
}
.ud-card__time{ font-size:var(--fs-sm); font-weight:800; color:var(--text-5); }
.ud-card__row{
  display:flex; justify-content:space-between; gap:8px; margin-top:6px;
  font-size:var(--fs-sm); color:var(--text-4); white-space:nowrap;   /* 라벨이 접히지 않게 */
}
.ud-card__row b{ font-weight:800; color:var(--text-2); font-variant-numeric:tabular-nums; }
.ud-card__mark{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  width:100%; height:28px; margin-top:8px; border-radius:var(--r-chip);
  font-size:var(--fs-sm); font-weight:900;
}
.ud-card__mark.is-up  { background:color-mix(in oklab, var(--success) 20%, var(--surface-2)); color:var(--success); }
.ud-card__mark.is-down{ background:color-mix(in oklab, var(--tag-casino) 30%, var(--surface-2)); color:#FF7A9C; }

/* ---- 다가올 회차 목록 --------------------------------------------------- */
.ud-rounds{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:16px; }
.ud-round{ padding:12px 14px; border-radius:var(--r); background:var(--bg); }
.ud-round__top{ display:flex; align-items:baseline; gap:12px; }
.ud-round__when{ flex:1; min-width:0; font-size:var(--fs-base); font-weight:900; }
.ud-round__left{ flex:none; font-size:var(--fs-sm); color:var(--text-5); font-variant-numeric:tabular-nums; }
.ud-round__btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.ud-round__btns .mk-vote{ width:100%; min-width:0; font-weight:900; }
.ud-round__btns .mk-vote--yes{ background:var(--success); color:var(--text-on-cta); }
.ud-round__btns .mk-vote--no { background:var(--surface-2); color:var(--text); }

/* 넷째부터는 흐리게 접어 둔다. 더 있다는 것만 알린다. */
.ud-rounds.is-folded .ud-round:nth-child(n+4){ display:none; }
.ud-rounds.is-folded .ud-round:nth-child(3){
  -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent);
          mask-image:linear-gradient(180deg, #000 40%, transparent);
}
.ud-more{
  width:100%; height:40px; margin-top:10px; border-radius:var(--r);
  background:var(--surface-2); font-size:var(--fs-base); font-weight:900; color:var(--text);
  transition:background var(--t-bg);
}
.ud-more:hover{ background:var(--surface-3); }

/* ---- 카트 — 매수·매도가 없다 -------------------------------------------- */
/* ★★ 업다운 접수 단추 — 시안 색 그대로 (레드 2026-09-20 「이색똑같이해줄래」).
     민트·핑크는 이 두 단추에만 쓴다. 차트 마크는 파랑·빨강 그대로다. */
.mk-buy .mk-buy__side--yes{
  background:linear-gradient(180deg, var(--updown-btn-up) 0%, var(--updown-btn-up-2) 100%);
  color:var(--updown-btn-up-ink);
  box-shadow:0 6px 18px -8px var(--updown-btn-up);
}
.mk-buy .mk-buy__side--no{
  background:linear-gradient(180deg, var(--updown-btn-down) 0%, var(--updown-btn-down-2) 100%);
  color:var(--updown-btn-down-ink);
  box-shadow:0 6px 18px -8px var(--updown-btn-down);
}
/* 고른 쪽은 테두리로만 짚는다 — 밝은 바탕이라 흰 테두리가 잘 보인다 */
.mk-buy .mk-buy__side.is-on{ border-color:#fff; }
/* ---- 차트 머리 — 왼쪽 시세, 오른쪽 확대·축소 ---------------------------- */
.ud-chartbar{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.ud-chartbar .ud-now{ margin:0; }
/* 눈금 글자 폭(72)만큼 당겨서 차트 선이 끝나는 자리에 맞춘다.
   패널 끝에 붙이면 눈금 글자 위로 올라타 어색하다. */
.ud-zoom{ margin-left:auto; margin-right:72px; display:flex; gap:2px; }
.ud-zoom button{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-3);
  font-size:var(--fs-lg); font-weight:900; line-height:1;
  transition:background var(--t-bg), color var(--t-color);
}
.ud-zoom button:first-child{ border-radius:var(--r-chip) 0 0 var(--r-chip); }
.ud-zoom button:last-child { border-radius:0 var(--r-chip) var(--r-chip) 0; }
.ud-zoom button:hover{ background:var(--surface-3); color:var(--text); }
.ud-zoom button[disabled]{ opacity:.35; pointer-events:none; }

/* 뷰 기간은 게임시간 선택과 같은 줄, 오른쪽 끝에 접힘메뉴로 붙는다 */
/* 뷰 고르개도 같은 자리에 맞춘다.
   `.ud-drop` 기본값이 margin-left:auto 라 그대로 두면 라벨과 사이가 벌어진다. */
/* 게임시간 줄은 **줄을 바꾸지 않는다.**
   `10분` 만 아랫줄로 떨어지고 그 옆에 `뷰` 가 붙으면 열이 어긋나 지저분하다.
   위쪽 `자산 선택` 줄과 같이 가운데 칩만 밀어서 보고 `뷰` 는 오른쪽에 고정한다. */
.mk-ranges--ud{ flex-wrap:nowrap; }
/* 라벨과 `뷰` 는 줄어들지 않는다. 줄어드는 것은 가운데 칩 줄뿐이다. */
.mk-ranges--ud .mk-ranges__label{ flex:none; white-space:nowrap; }
.ud-times{ display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 auto; }
.ud-times .mk-range{ flex:none; }

/* `뷰` 라벨과 고르개는 한 덩어리로 움직인다.
   둘을 형제로 두면 줄이 좁아질 때 라벨만 윗줄에 남고 메뉴가 아랫줄로 떨어진다. */
.ud-viewpick{
  margin-left:auto; margin-right:72px;
  display:flex; align-items:center; gap:8px; flex:none;
}
.ud-view-label{ font-size:var(--fs-sm); font-weight:800; color:var(--text-5); }
.ud-drop--view{ margin-left:0; margin-right:0; }
.ud-drop--view .ud-drop__btn{
  height:30px; padding:0 10px 0 12px; border-radius:var(--r-full);
  border-color:var(--line); font-size:var(--fs-sm);
}
.ud-drop--view .ud-drop__menu{ min-width:132px; }
/* 차트 맨 아래에 있으므로 위로 펼친다 */
.ud-drop--up .ud-drop__menu{ top:auto; bottom:calc(100% + 6px); }
.ud-drop--view .ud-drop__item{ height:38px; padding:0 12px; font-size:var(--fs-base); }

.ud-pick{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:var(--r-chip); background:var(--bg);
}
.ud-pick span{ font-size:var(--fs-sm); color:var(--text-5); }
.ud-pick b{ font-size:var(--fs-base); font-weight:900; }

/* 선물게임 차트는 세로축이 시세라 눈금 글자가 길다. 그만큼 오른쪽을 더 비운다. */
/* 시세 차트는 오르내림이 보여야 하므로 높이를 넉넉히 준다 */
.mk-panel .ud-chart{ padding-right:72px; }
.mk-panel .ud-chart .mk-chart{ height:248px; }
.mk-panel .ud-chart + .mk-chart__x{ padding-right:72px; }

/* 좁은 화면 — 자산 줄이 한 줄에 안 들어간다. 묶음은 밀어서 보고 종목 메뉴는 아래로 내린다. */
@media (max-width:768px){
  .ud-pickrow{ flex-wrap:wrap; }
  .ud-groups{ flex:1 1 auto; width:auto; overflow-x:auto; scrollbar-width:none; }
  .ud-groups::-webkit-scrollbar{ display:none; }
  .ud-group{ flex:none; }
  /* 자산 고르개만 아래 줄 전체 폭으로 내린다.
     `.ud-drop` 전체에 걸면 차트 아래 `뷰` 고르개까지 끌려 내려가
     `뷰` 라벨만 윗줄에 남는다. */
  .ud-pickrow .ud-drop{ flex:1 1 100%; margin-left:0; }
  .ud-pickrow .ud-drop__btn{ width:100%; justify-content:flex-start; }
  .ud-pickrow .ud-drop__caret{ margin-left:auto; }
  .ud-pickrow .ud-drop__menu{ left:0; right:0; min-width:0; }
}

@media (max-width:640px){
  /* 시세가 커서 확대 단추와 한 줄에 안 들어간다. 글자를 줄이고 종목명은 뺀다
     — 종목 이름은 바로 위 접힘메뉴에 이미 있다. */
  .ud-chartbar{ flex-wrap:wrap; }
  .ud-now b{ font-size:var(--fs-lg); }
  .ud-now > span:last-child{ display:none; }
  .ud-card{ width:136px; }
  .ud-zoom{ margin-right:60px; }
  /* 게임시간 줄은 어떤 폭에서도 **한 줄이다.**
     줄을 나누면 조각이 흘러넘쳐 열이 어긋난다. 대신 글자와 여백을 조인다.
       라벨  게임시간 선택 → 게임시간
       칩    30 → 28 높이, 안쪽 여백 12 → 8
       뷰    고르개도 같은 높이로 */
  .ud-viewpick{ margin-right:0; gap:6px; }
  .mk-ranges--ud .mk-ranges__label{ margin-right:2px; font-size:var(--fs-sm); }
  .ud-lbl-tail{ display:none; }
  .ud-times{ gap:4px; }
  .ud-times .mk-range{ height:28px; padding:0 8px; font-size:var(--fs-sm); }
  .ud-view-label{ font-size:var(--fs-sm); }
  .ud-drop--view .ud-drop__btn{ height:28px; padding:0 6px 0 10px; }
}

/* 폰 폭에서는 한 번 더 조인다 — 그래도 다섯 칸이 다 보여야 한다 */
@media (max-width:440px){
  .mk-ranges--ud{ gap:4px; }
  .mk-ranges--ud .mk-ranges__label{ margin-right:0; font-size:11px; }
  .ud-times{ gap:3px; }
  .ud-times .mk-range{ padding:0 6px; font-size:11px; }
  .ud-viewpick{ gap:4px; }
  .ud-view-label{ font-size:11px; }
  .ud-drop--view .ud-drop__btn{ padding:0 4px 0 8px; font-size:11px; }
  .ud-drop--view .ud-drop__caret{ width:14px; height:14px; }
}

/* 400 아래 — 라벨을 `시간` 까지 줄이고 칸 여백을 최소로. 다섯 칸이 다 보인다. */
@media (max-width:400px){
  .ud-lbl-head{ display:none; }
  .ud-times{ gap:2px; }
  .ud-times .mk-range{ padding:0 4px; }
  .ud-drop--view .ud-drop__btn{ padding:0 2px 0 6px; }
  .mk-panel .ud-chart{ padding-right:60px; }
  .mk-panel .ud-chart .mk-chart{ height:200px; }
}

/* ---- 모바일 — 카트를 화면 아래에 붙는 시트로 ---------------------------
   좁은 화면에서는 카트가 페이지 맨 아래라 손이 닿지 않는다.
   아래에 붙여 두고, 접으면 고른 것과 베팅 버튼만 남긴다.
   ------------------------------------------------------------------------ */
@media (max-width:1024px){
  .mk-buy{
    position:fixed; left:0; right:0; bottom:var(--tabbar-h); z-index:40;
    gap:10px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--surface-1); border-top:1px solid var(--line);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -12px 32px rgba(0,0,0,.45);
    max-height:80vh; overflow-y:auto;
  }
  /* 시트가 가리는 만큼 본문 아래를 비운다.
     ⚠ 2026-09-18 에 접힌 바에 상승·하락(52px)이 들어가 <바가 더 높아졌다>.
       여백을 안 늘리면 본문 끝이 바에 가려 안 읽힌다. */
  .mk-detail{ padding-bottom:212px; }

  /* ★★ 폰에서는 여백을 걷는다 (레드 2026-09-18 「여백도 좀 없애자 · 너무 작아진다」).

       여백이 <세 겹>으로 쌓여 있었다 — 판 20px + 차트칸 16px, 게다가
       프레임 안에도 제 여백이 있다. 좌우로 70px 넘게 먹으니 그래프가 눌린다.
       PC 는 자리가 넉넉해 그대로 둔다. */
  /* ★ 본문 좌우 여백을 걷는다 — 이 화면에서만 (body.ud-edge, FuturesPage 가 붙인다).
       .content 규칙을 직접 고치면 모든 화면이 딸려 온다. */
  body.ud-edge .content{ padding-inline:0; }
  /* 판은 화면 끝까지 — 시안이 그렇다. 위아래 모서리만 둥글게 남긴다 */
  body.ud-edge .mk-detail > div > .mk-panel{ border-radius:0; border-left:0; border-right:0; }
  /* 아래 시트도 같은 폭을 쓴다. 판만 넓히고 시트를 그대로 두면 두 폭이 어긋나 보인다 */
  body.ud-edge .mk-buy{ padding-left:10px; padding-right:10px; }
  /* 펼치기 단추도 그 여백에 맞춘다 — 안 맞추면 글자가 화면 끝에 붙는다 */
  body.ud-edge .mk-buy__toggle{ right:10px; }

  .mk-detail > div > .mk-panel{ padding:10px; }
  .mk-chartcard{ margin-top:10px; padding:0; background:none; }
  /* ★ 업다운 차트 판만 여백을 더 줄인다 (레드 2026-10-03 「모바일 여백을 좀 줄이는 건 어때?」).
       판 10 + 허브 화면 8 이 겹쳐 좌우가 넓게 비었다 → 판 10 → 6, 차트 칸 위 10 → 4 (허브 쪽도 8 → 4).
       다른 판(내 베팅 · 정산 규칙)은 그대로 둔다 — :has 로 차트가 든 판만 고른다 */
  body .mk-detail > div > .mk-panel:has(.mk-chartcard--embed){ padding:6px 6px 8px; }
  body .mk-chartcard.mk-chartcard--embed{ margin-top:4px; }
  /* ★ 한 번 더 줄인다 (레드 2026-10-03 「모바일은 여백 최소화」) — 판 6 → 4 (차트칸 위는 아래 PC 규칙이 0 으로). 허브 쪽 바깥 여백은 0 */
  body .mk-detail > div > .mk-panel:has(.mk-chartcard--embed){ padding:4px 4px 6px; }

  /* 차트는 <가장자리까지> 쓴다. 판의 남은 10px 도 밀어낸다 */
  /* ⚠⚠ 음수 여백으로 <가장자리까지 넓히려다 프레임이 화면 밖으로 밀려났다>
       (2026-09-18, 되돌림). 판을 벗어난 만큼 잘려서 BTC·가격 왼쪽이 통째로 안 보였다.
       넓히고 싶으면 여백을 <줄이는> 쪽으로만 한다 — 음수로 당기지 않는다. */
  /* 폰에서는 카드 여백을 0 으로 줄였으니 되돌릴 것도 없다.

     ⚠⚠ body 를 앞에 붙여 <명시도를 올린다>. 미디어쿼리는 명시도를 안 올리는데
       원본 규칙(.mk-chartcard--embed > .mk-chartwrap)이 이 블록보다 <뒤에> 있어서,
       같은 선택자로 쓰면 뒤엣것이 이겨 --embed-pull 이 다시 16px 로 덮였다.
       변수로 바꾼 것만으로는 안 됐던 까닭이다 — 순서 문제는 그대로였다. */
  body .mk-chartcard--embed > .mk-chartwrap{ --embed-pull: 0px; }

  /* 시안은 글자 + 화살표다. 동그란 아이콘 단추가 아니다.

     ⚠ top 을 숫자로 박으면 <잔액 줄과 안 맞는다>. 글자 크기·줄 높이가 조금만
       달라져도 위로 쏠린다(2026-09-18 실측). 머리 줄 전체 높이에 걸치고
       세로 가운데로 잡으면 무엇이 바뀌어도 따라간다. */
  /* ⚠ absolute 의 기준은 <카트 전체>다(.mk-buy 가 relative). top:0 으로 두면
       카트 위 여백(10px)만큼 머리 줄보다 높이 뜬다 — 실측 10px 어긋났다.
       그 여백만큼 내려 준다. */
  /* ★ 이제 <머리 줄 안에> 있다 (레드 2026-09-20 시안) — absolute 로 띄울 까닭이 없다.
       전에는 카트 전체를 기준으로 띄우느라 위 여백만큼 어긋나는 것을 손으로 맞췄다. */
  .mk-buy__toggle{
    flex:none; height:var(--toggle-h, 44px);
    padding:0; border-radius:0;
    display:inline-flex; align-items:center; gap:4px;
    background:none; color:var(--up, #2FE3AC);
    font-size:var(--fs-sm); font-weight:800;
  }
  /* 잔액은 왼쪽, 펼치기는 오른쪽 끝 */
  .mk-buy__head{
    min-height:var(--toggle-h, 44px);
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  /* 접혀 있으면 위를, 펼쳐져 있으면 아래를 가리킨다 */
  .mk-buy.is-closed .mk-buy__toggle svg{ transform:rotate(180deg); }
  .mk-buy__toggle svg{ transition:transform var(--t-bg); }

  /* ★★ 접힌 상태 — 무엇을 고랐는지와 <상승·하락>만 남는다.

       ⚠⚠ 전에는 .mk-buy__box 를 통째로 숨겼다. 그때는 접수 단추(.mk-buy__go)가
         상자 <바깥>에 있어 접혀도 눌렸는데, 2026-09-18 시안에서 그 단추를 걷고
         상승·하락이 곧 접수가 됐다 — 그 둘은 상자 <안>이라 함께 숨어서
         <폰에서 베팅할 길이 통째로 사라졌다.> 폰은 기본이 접힘이라 더 그렇다.

       ★ 그래서 상자는 남기고 <그 안에서 상승·하락만> 남긴다.
         정산시간·금액을 고치려면 펼치면 된다. 마지막에 고른 값으로 바로 걸 수 있다. */
  /* ★★ 접힌 모양이 곧 <시안 카드>다 (레드 2026-09-18).
       잔액+펼치기 · 정산시간|베팅금액 · 상승/하락 · 안내 한 줄까지 보인다.
       펼치면 빠른금액·예상당첨이 더 나온다. */
  .mk-buy.is-closed .mk-buy__tabs,
  .mk-buy.is-closed .mk-buy__terms,
  .mk-buy.is-closed .mk-buy__box > .mk-buy__quick,
  .mk-buy.is-closed .mk-buy__box > .mk-win{ display:none; }
  /* ⚠ 오른쪽 44px 여백을 걷었다 — absolute 단추 자리를 비우던 것이라 이제 쓸모없다 */
  /* ⚠⚠ <걷었다> — 이 세 줄이 카트 머리의 테두리·배경·여백을 지우고 있었다
       (레드 2026-09-26, 다섯 번 지적받고서야 찾았다).

     카트가 <붙박이 시트>였을 때, 접으면 머리만 띠처럼 남기려고 준 값이다.
     지금은 폰에서도 카트가 흐르고 접기 단추도 숨겼으므로 접힌 상태여도
     머리는 <상자로 보여야> 한다. 잔액 줄과 같은 결이다.

   ⚠ 내 검증이 이것을 놓친 까닭 — 규칙을 PC 화면(.mk-buy 에 is-closed 가 없다)에서
     훑었다. 그 상태에서는 이 선택자가 <아예 매치되지 않아> 목록에 안 나온다.
     상태에 따라 갈리는 규칙은 <그 상태를 붙여 놓고> 재야 한다. */
}
@media (min-width:1025px){
  .mk-buy__toggle{ display:none; }
  /* PC — 카트는 스크롤을 따라오지 않고 그 자리에 붙어 있는다.
     헤더가 sticky 로 72 를 차지하므로 그 아래에 세운다. */
  .mk-buy{
    position:sticky; top:calc(var(--header-h) + var(--gutter));
    max-height:calc(100dvh - var(--header-h) - var(--gutter) * 2);
    overflow-y:auto; scrollbar-width:none;
  }
  .mk-buy::-webkit-scrollbar{ display:none; }
}

/* ── 못 읽게 덮는 겹 (레드 2026-09-13 · 2026-09-17 다시 씀) ───────────
   ★ 흐리기만 하고 지우지 않는다 — 무엇이 있던 자리인지는 보여야 한다.
     빈 상자만 남으면 고장으로 읽힌다.
   ★ 덮개가 화면 높이를 정하지 않는다. 안쪽 내용이 정한다 —
     inset:0 으로 딱 맞춰 두면 밑에 빈 자리가 남지 않는다.

   쓰는 자리: 그래프 임베드가 안 떠서 우리 차트로 되돌아갔을 때.
   그 값은 <판정 근거가 아니다> — 흐려 두는 것이 곧 「읽지 마세요」다.
   ------------------------------------------------------------------ */
.mk-soonwrap{ position:relative; }

/* ⚠ 전에는 .mk-chartcard 하나만 집었다. 되돌아갈 때는 그 안의 .mk-chartwrap 만
     그려서 선택자가 안 맞아 <흐려지지 않았다.> 무엇을 감싸든 흐려지도록
     「덮개가 아닌 것」으로 집는다. */
.mk-soonwrap > *:not(.mk-soonveil){
  filter:blur(6px);
  /* ⚠ 눌리면 안 된다. 흐린 값을 만지게 두면 읽으라는 뜻이 된다. */
  pointer-events:none;
  user-select:none;
}

.mk-soonveil{
  position:absolute; inset:0; z-index:5;
  display:grid; place-items:center;
  /* 흐린 그림 위에 글자가 뜨려면 바탕을 조금 눌러 줘야 한다. */
  background:rgba(6, 11, 22, .45);
  border-radius:var(--r-lg, 14px);
}

/* ★ 알약을 벗기고 글자만 남긴다 (레드 2026-09-13).
     테두리가 있으면 <누를 수 있는 것>으로 읽힌다 — 여기는 안내이지 단추가 아니다.
     글자도 줄인다. 상자 하나를 덮는 것이라 화면 제목만큼 클 까닭이 없다. */
.mk-soonveil__txt{
  font-size:clamp(.95rem, 1.4vw, 1.15rem);
  font-weight:800; letter-spacing:.06em;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  white-space:nowrap;
}


/* ==========================================================================
   예측마켓 상단 배너 (레드 2026-09-15)

   ★★ 스포츠 배너(.sb-banner)를 <덮지 않는다>. 두 화면이 같은 껍데기를 쓰고
      있었는데, 여기만 그림을 깔아야 해서 이름을 갈랐다 — 한쪽을 고치다
      다른 쪽이 조용히 바뀌는 일을 막는다.

   ★ 그림 셋 다 <피사체가 오른쪽, 왼쪽이 비어> 있다. 그래서 문구를 왼쪽에
     두고, 오른쪽으로 갈수록 막을 걷어 그림이 드러나게 한다. 구도가 그렇게
     찍혀 있으니 거스르지 않는다.
   ========================================================================== */
.mk-banner{
  position:relative; overflow:hidden;
  min-height:170px; padding:20px 22px;
  /* ★ 테두리를 걷었다 (레드 2026-09-15). 그림이 판을 꽉 채우는데 테두리를
       두르면 <액자>가 되어 그림이 한 겹 뒤로 물러나 보인다 */
  border-radius:var(--r); border:0;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  /* ⚠ 그림은 <아래 칸>에 깔고 글자는 그 위다. background 한 줄에 섞으면
       순서가 뒤집히는 판이 있다 */
  background:#06122B center / cover no-repeat;
  color:#fff; text-decoration:none;
  transition:transform .18s, border-color .18s;
}
/* ⚠ 테두리를 걷었으니 hover 도 <떠오르기만> 한다. border-color 를 남겨 두면
     0 폭 테두리에 색을 칠하는 셈이라 아무 일도 안 일어난다 */
.mk-banner:hover{ transform:translateY(-2px); }
.mk-banner:active{ transform:translateY(0); }

/*
  ★★ 어둠막을 <걷었다> (레드 2026-09-15 「그라데이션은 제거」).

    글자를 읽히게 하려고 왼쪽을 어둡게 덮었는데, 그림 셋이 이미 <왼쪽이 어두운>
    구도라 막이 없어도 흰 글자가 선다. 막을 걷으니 그림의 파란 빛줄기가
    왼쪽 끝까지 살아난다.

  ⚠ 대신 글자 그림자를 <조금 더> 준다(.mk-banner__title · __sub).
    막이 하던 일을 그림자가 대신한다 — 그림이 밝은 자리를 지나도 읽힌다.
*/
.mk-banner__text{ position:relative; max-width:64%; display:grid; gap:7px; }
.mk-banner__title{
  font-size:var(--fs-md); font-weight:900; line-height:1.32; color:#fff;
  /* ⚠ 문구에 줄바꿈이 들어 있다(\n). 그대로 살려야 시안처럼 두 줄로 선다 */
  white-space:pre-line;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.65);
}
.mk-banner__sub{
  font-size:var(--fs-sm); font-weight:600; line-height:1.45;
  color:rgba(255,255,255,.84);
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.6);
}

/* 폰 — 가로로 밀어 본다(.sb-banners 규칙을 그대로 탄다) */
@media (max-width:1024px){
  /*
   * ⚠⚠ 폭을 <여기서 다시> 준다. 바깥 줄(.sb-banners)이 폰에서 flex 가로
   *   스크롤로 바뀌는데, 칸 폭을 정하는 규칙은 .sb-banner 에만 걸려 있다 —
   *   이름을 가른 대가다. 안 주면 칸이 <글자 길이만큼> 쪼그라들어
   *   115 · 133 · 97 처럼 셋이 다 다른 폭이 된다. (실측)
   */
  .mk-banner{ flex:none; width:88%; scroll-snap-align:start; }
  .mk-banner{ min-height:150px; padding:16px 18px; }
  /* ⚠ 좁아지면 글자 칸을 넓힌다. 64% 를 유지하면 제목이 석 줄로 접힌다 */
  .mk-banner__text{ max-width:76%; }
  /* ⚠ 폰에서도 막은 없다. 칸이 좁아 글자와 그림이 가까우니 그림자에 기댄다 */
}


/*
  ★ 「내 포지션」 칩을 오른쪽 끝으로 민다 (기획 2026-09-15).
  ⚠ 줄이 가로 스크롤(scroll-x)이라 margin-left:auto 가 <넘칠 때는> 안 먹는다.
    칩이 많아 줄이 꽉 차면 그냥 맨 뒤에 붙는데, 그 편이 맞다 —
    억지로 오른쪽에 붙이면 스크롤해야만 보인다.
*/
.mk-chip--mine{ margin-left:auto; }

/* ==========================================================================
   배너 제목 — 문구가 정한 자리에서 줄을 바꾼다 (레드 2026-09-15)

   ★ 「AI 패권 전쟁, / 승자는 어느 모델이 될까」처럼 뜻이 끊기는 자리에서
     갈라야 읽힌다. 브라우저에 맡기면 「어느 모델이 / 될까」처럼 엉뚱한
     자리에서 접힌다.
   ⚠ 줄바꿈은 <문구 파일>이 정한다(\n). 화면은 그것을 지키기만 한다 —
     언어마다 문장 길이가 달라, 접을 자리도 그 언어가 알아야 한다.
     \n 이 없는 언어는 평소처럼 흐른다.
   ========================================================================== */
.mk-banner__title{ white-space:pre-line; }

/* ═══════════════════════════════════════════════════════════════════
   exit-game 임베드 — 프레임을 카드에 <꽉> 채운다 (레드 2026-09-17 「꽉차게 해줘」)

   .mk-chartcard 는 안쪽 여백 16px 을 두는데, 프레임 안에도 제 여백이 있어
   두 겹이 되면 가운데 그림이 작아 보인다. 프레임만 그 여백을 벗어난다.

   ⚠ 아래 게임시간 줄은 여백을 그대로 쓴다 — 단추가 카드 끝에 붙으면
     누르기 어렵고 카드 모서리와 겹쳐 보인다.
   ⚠ 모서리를 잘라 준다(overflow). 프레임은 제 바탕이 네모라서,
     안 자르면 둥근 카드 귀퉁이 밖으로 각진 모서리가 비어져 나온다.
   ═══════════════════════════════════════════════════════════════════ */
.mk-chartcard--embed{ overflow:hidden; }

.mk-chartcard--embed > .mk-chartwrap{
  /* ⚠⚠ 카드 안쪽 여백만큼 <되돌리는> 값이다. 그래서 카드 여백이 바뀌면
       이 값도 같이 바뀌어야 한다 — 폰에서 카드 여백을 0 으로 줄였는데 여기가
       -16 인 채로 남아 <프레임이 판 왼쪽 밖으로 6px 밀려 잘렸다>(2026-09-18).
       BTC 아이콘·$ 기호·「게임시간」 글자가 통째로 안 보였다.
     ★ 그래서 숫자를 박지 않고 변수로 둔다. 폰 블록에서 이 변수만 0 으로 바꾼다.
     ⚠ 미디어쿼리는 명시도를 <안 올린다>. 뒤에 실린 이 규칙이 이기므로
       폰 블록에서 같은 선택자로 덮으려 해도 안 먹는다. */
  --embed-pull: 16px;
  margin:calc(var(--embed-pull) * -1) calc(var(--embed-pull) * -1) 0;
  border-radius:0;
  /* ⚠ .mk-chartwrap 은 오른쪽에 44px 을 비워 둔다 — <우리> 차트의 눈금 글자 자리다.
       프레임은 눈금을 제 안에 그리므로 그 자리가 필요 없다. 비워 두면 그만큼 안 찬다. */
  padding-right:0;
}
.mk-chartcard--embed > .mk-chartwrap > iframe{ display:block; width:100%; }

/* 되돌아갔을 때(우리 차트)는 여백을 그대로 둔다 — 그림이 카드에 닿으면 답답하다 */
.mk-chartcard--embed > .mk-soonwrap{ margin:0; }

/* ★ PC 업다운 차트 판 여백 최소화 (레드 2026-10-03 「PC 도 해당 부분 여백 최소화」).
     판 20 + 차트칸 위 14 + 허브 화면 8 이 겹쳐 종목 탭 위가 크게 비었다 → 판 10 · 차트칸 여백 0 (허브 쪽 바깥 여백도 0).
     body 를 붙여 명시도를 올린다 — 휴대폰 블록(@media)의 판 규칙은 명시도가 더 높아 그대로 이긴다 */
body .mk-panel:has(> .mk-chartcard--embed){ padding:10px; }
body .mk-chartcard.mk-chartcard--embed{ margin-top:0; padding:0; background:none; }
body .mk-chartcard--embed > .mk-chartwrap{ --embed-pull: 0px; }

/* ⚠ 좁은 화면에서도 .mk-chartcard 의 안쪽 여백은 <16px 그대로>다(205행).
     처음에 12px 로 줄어든다고 짐작해 미디어쿼리를 따로 뒀는데, 값을 확인하니
     바뀌지 않는다 — 그러면 모바일에서 4px 이 덜 채워진다. 그 규칙을 지웠다. */

/* ★ 머리 판을 걷고 그 아이콘을 「자산 선택」 줄 맨 앞으로 옮겼다 (레드 2026-09-17).
     .mk-thumb 는 48px 짜리라 그대로 두면 줄 높이를 혼자 정한다 — 글자 키에 맞춘다. */
.ud-pickrow__mark{
  width:32px; height:32px; flex:none;
  border-radius:var(--r-chip, 8px);
}
.ud-pickrow__mark svg{ width:20px; height:20px; }

@media (max-width:640px){
  /* 좁은 화면에서는 줄이 두 단으로 접힌다. 아이콘이 자리를 먹지 않게 한 단 더 줄인다 */
  .ud-pickrow__mark{ width:28px; height:28px; }
  .ud-pickrow__mark svg{ width:17px; height:17px; }
}

/* ★ 임베드가 다 그려질 때까지 가린다 (레드 2026-09-17 「이럼 안좋아」)
     프레임 안이 차례로 그려지는 동안 「연결 중」·빈 차트가 그대로 보였다.
     반쯤 그려진 화면은 고장으로 읽힌다.
   ⚠ 프레임을 display:none 으로 감추지 않는다 — 크기를 0 으로 재서
     안쪽 차트가 찌그러진 채로 뜬다. opacity 로 가리고 자리는 지킨다. */
.ud-embed-loading{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:var(--bg);
  border-radius:inherit;
}

/* ─────────────────────────────────────────────────────────────
   내 구매내역 (미니게임 > 업다운게임)

   ⚠ 상승·하락 색은 이 파일이 이미 쓰는 것을 그대로 쓴다
     (상승 --success · 하락 --tag-casino). 여기서 새 색을 정하면
     같은 화면 안에서 위아래 색이 두 벌이 된다.
   ───────────────────────────────────────────────────────────── */
/* ⚠ 「내 구매내역」 제목과 첫 카드가 붙어 있었다 — 띄운다 (레드 2026-09-20
     「아래카드 사이좀 띄워달라고」). 아래 .ud-bets 의 margin-bottom 과 짝이다 */
.ud-bets{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }

.ud-bet{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm, 8px);
  background:var(--surface-2);
  display:flex; flex-direction:column; gap:4px;
}

.ud-bet__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* ⚠ 종목 이름과 방향이 붙어 「비트코인▲UP」 한 덩어리로 읽혔다 — 띄운다.
     12 로는 아직 붙어 보였다(레드 2026-09-20 「아직도 딱붙어있다」) — 20 으로 벌린다. */
.ud-bet__name{ font-size:var(--fs-base); font-weight:800; display:flex; align-items:center; gap:20px; min-width:0; }
.ud-bet__side{ font-style:normal; font-size:var(--fs-sm); font-weight:800; }
.ud-bet__side.is-up  { color:var(--success); }
.ud-bet__side.is-down{ color:var(--tag-casino); }

.ud-bet__sub{ font-size:var(--fs-sm); color:var(--text-5); }
/* 숫자가 세로로 줄을 맞춘다 — 값이 바뀔 때 폭이 흔들리지 않는다 */
.ud-bet__num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.ud-bet__st{
  flex:none;
  font-size:var(--fs-xs, 12px); font-weight:800;
  padding:2px 8px; border-radius:999px;
  background:var(--surface-3); color:var(--text-5);
}
.ud-bet__st--win { background:color-mix(in oklab, var(--success) 22%, transparent); color:var(--success); }
.ud-bet__st--lose{ background:color-mix(in oklab, var(--tag-casino) 22%, transparent); color:var(--tag-casino); }
.ud-bet__st--running,
.ud-bet__st--waiting{ background:color-mix(in oklab, var(--accent, var(--primary)) 20%, transparent); color:var(--accent, var(--primary)); }

/* 카트 아래 한 줄 안내 — 왜 못 걸었는지, 접수됐는지 */
.ud-note{ margin:8px 0 0; font-size:var(--fs-sm); color:var(--text-5); text-align:center; }
.ud-note--bad { color:var(--tag-casino); }
.ud-note--good{ color:var(--success); }

/* 카트 안 게임시간 선택 (레드 2026-09-17 — 카트에서도 고를 수 있어야 한다) */
.ud-times--cart{ display:flex; gap:4px; margin:4px 0 0; }
/* ⚠ 좁아져도 <가로로> 선다. 글자를 줄일지언정 세로로 갈라지지 않게 */
.ud-times--cart .mk-range{ white-space:nowrap; padding-inline:6px; font-size:var(--fs-sm); }
.ud-times--cart .mk-range{ flex:1; text-align:center; }
.ud-pick__hint{ margin:6px 0 0; font-size:var(--fs-sm); color:var(--text-5); }
/* 꺼진 칸 — 고를 수 없다는 것이 보여야 한다 */
.mk-range.is-off{ opacity:.45; cursor:not-allowed; text-decoration:line-through; }
/* ⚠ mk-range 는 inline-flex 라 text-align 이 안 먹는다 — justify-content 로 가운데 둔다 */
.ud-times--cart .mk-range{ justify-content:center; }
/* 금액 라벨 줄 — 왼쪽 「금액」, 오른쪽 잔액 */
.ud-amt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
/* 머리의 잔액 한 줄 — 시안은 「잔액  $10,000.00」 왼쪽, 펼치기 오른쪽 */
.ud-bal-line{ display:flex; align-items:baseline; gap:8px; margin:0; }
.ud-bal-line > span{ font-size:var(--fs-sm); color:var(--text-4); }
.ud-bal-line > b{ font-size:var(--fs-lg, 16px); font-weight:800; }

.ud-bal{ font-size:var(--fs-sm); color:var(--text-5); }
.ud-bal b{ color:var(--text-3); font-variant-numeric:tabular-nums; }
/* ⚠ 목록 마지막 칸이 판 바닥에 <닿아 있었다> (레드 2026-09-17 「조금 띄워주고」).
     판의 아래 안쪽 여백이 목록 높이에 먹혀서 정산 규칙 카드와 붙어 보인다. */
.ud-bets{ margin-bottom:4px; }

/* 담아 둔 마켓 수 — 「내 포지션」 칩 안 (시안 .mk-mine, 레드 2026-09-26) */
.mk-mine{ margin-left:2px; font-weight:900; color:var(--primary); font-variant-numeric:tabular-nums; }

/* 셈 — 베팅금 · 배당 · 예상 당첨금 (시안 minigame.css .mk-calc) */
.mk-calc{
  /* ⚠ .mk-buy__box 가 2열이다(「진행 시간 | 베팅 금액」). 셈은 <두 칸을 다> 쓴다 */
  grid-column:1 / -1;
  margin:0; padding:14px 16px; border-radius:var(--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(--fs-sm); color:var(--text-3); }
.mk-calc dd{ margin:0; font-weight:900; text-align:right; }
/* ⚠ UP 단추와 <같은 색>이어야 한다. --updown-up 은 차트 선 색이라 다르다 */
.mk-calc dd.is-win{ color:var(--updown-btn-up); font-size:var(--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(--text-4); }
@media (max-width:1023px){
  .mk-calc{ padding:10px 12px; gap:6px 10px; }
}

/* ==========================================================================
   베팅 카트 — 시안 라벨-값 표 (minigame.css 510~, 레드 2026-09-26)
   [이름 ··· 값] : 게임종류 · 게임시간 · 베팅금액 · 예상당첨금
   ⚠ 시안의 「게임회차」·「결과시간」은 <안 그린다> — 우리는 회차제가 아니다
     (레드 2026-09-17). 누르는 그 순간부터 잰다.
   이름 칸 폭을 가장 긴 「예상 당첨금」에 맞춰 값이 같은 세로선에서 시작한다.
   ========================================================================== */
.ud-info{ display:grid; grid-template-columns:minmax(0,1fr); padding:2px 12px;
  border-radius:var(--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:72px;
  font-size:12px; font-weight:700; color:var(--text-4); 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--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(--text-3); }
.ud-cell--win b{ color:var(--updown-btn-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(--primary); }
.ud-cell--amt .mk-buy__amount input{ flex:1; min-width:0; font-size:14px; font-weight:900; text-align:right; }
/* 금액 단추 — 시안은 한 줄에 여섯 */
/* ⚠ 시안은 <4열 2줄>이다 — 금액 다섯 + [절반][최대][초기화] = 여덟 칸.
     6열로 두면 한 줄에 욱여넣어 글자가 서로 붙는다(레드 2026-09-26 이미지). */
.mk-buy__box .mk-buy__quick{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.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; }

/* 휴대폰 — 두 항목씩 (시안 minigame.css 550~) */
@media (max-width:1023px){
  .ud-info{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--surface-1); }
  .ud-cell{ height:36px; }
  .ud-info > .ud-cell + .ud-cell{ border-top:0; }
  .ud-cell:is(.ud-cell--amt, .ud-cell--win){ border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  /* 오른쪽 칸 — 가운데 선에서 시작 */
  .mk-buy .ud-cell:is(.ud-cell--time, .ud-cell--win){ padding-left:12px; }
  .ud-cell > span, .ud-cell > .mk-buy__label, .ud-cell__k{ width:auto; font-size:11px; }
  .mk-buy .ud-cell:is(.ud-cell--time, .ud-cell--win) > :first-child{ width:58px; }
  .ud-cell > b{ font-size:13px; }
  .ud-cell--kind b em, .ud-cell--time .ud-times, .ud-cell--amt .mk-buy__amount{ background:var(--bg); }
}

/* 선물게임 모바일 카트 — 시안 치수 (minigame.css 543~, 레드 2026-09-26) */
@media (max-width:1023px){
  /* 아래 26 — 탭바 가운데 입금 단추가 올라오는 자리다. 안 비우면 단추에 가린다 */
  .mk-buy{ padding:10px 12px 26px; }
  .mk-buy__box .mk-buy__side{ height:44px; }
}

/* ==========================================================================
   예측마켓 상단 — 시안 predict.css (레드 2026-09-26 「디자인 상단바랑 잘봐주고」)

     .mk-top    [제목] [LIVE]                     ← 가로로 나란히
     .mk-tools  [분류 칩] + [검색·정렬·상태]      ← <한 상자>로 묶는다

   ⚠ 전에는 칩 줄과 검색 줄이 따로 서 있어 「거르는 자리」가 두 덩어리로 읽혔다.
   ========================================================================== */
.mk-top{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }

/* 실시간 알약 — 빨간 바탕에 숨 쉬는 점. 시안 .mk-live 값 그대로 */
.mk-live{
  display:inline-flex; align-items:center; flex:none; gap:6px;
  height:24px; padding:0 11px 0 9px; border-radius:var(--r-full);
  background:#d7374b; color:#fff;
  font-size:12px; font-weight:900; letter-spacing:.06em;
  box-shadow:0 2px 10px rgba(215,55,75,.35);
}
.mk-live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#ffc2cb;
  animation:mk-pulse 1.4s ease-in-out infinite;
}
@keyframes mk-pulse{ 50%{ opacity:.25; } }
/* ⚠ 움직임을 줄여 달라는 회원에게는 점이 멈춘다 */
@media (prefers-reduced-motion:reduce){ .mk-live::before{ animation:none; } }

.mk-tools{ display:grid; gap:var(--gap-card); }
/* 폰에서는 상자로 묶어 한 덩어리로 보인다 (시안 493행) */
@media (max-width:1023px){
  .mk-tools{
    gap:12px; padding:14px; border-radius:16px;
    background:var(--surface-1); border:1px solid var(--line);
  }
}

/* ==========================================================================
   예측마켓 선택칸 — 시안 .mk-select (레드 2026-09-26 「바 체크해줘」)

   ⚠⚠ 공통 `.select` 는 이 화면에서 <흰 바탕>으로 뜬다. 시안도 같은 문제를 겪고
     주석을 남겨 뒀다 — 「공통 .select 는 흰 바탕이라 이 화면과 맞지 않는다」.
     disabled 를 풀자마자 <흰 박스에 흰 글자>가 되어 아무것도 안 읽혔다.
   ★ appearance:none 으로 브라우저 기본을 끄고, 화살표를 직접 그린다.
     data URI 라 색 변수를 못 써서 #9aa3b8 을 글자 그대로 적는다(--text-5 와 같은 색).
   ⚠ option 에도 색을 준다. 안 주면 펼친 목록만 흰 바탕으로 남는다.
   ========================================================================== */
.mk-select{
  height:40px; min-width:150px; padding:0 36px 0 14px; border-radius:var(--r);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239aa3b8' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line); color:var(--text);
  font-family:var(--font); font-size:var(--fs-base); font-weight:700;
  transition:border-color .15s;
}
.mk-select:hover{ border-color:var(--line-strong); }
.mk-select:focus-visible{ outline:none; border-color:var(--primary); }
.mk-select option{ background:var(--surface-1); color:var(--text); }

/* ★ 「내 포지션 : ₩0」 — 라벨과 금액 사이 콜론 (시안 이미지, 레드 2026-09-26).
     글자로 넣지 않고 CSS 로 그린다 — 다섯 언어 키에 콜론을 박으면
     번역할 때마다 따라다니고, 언어마다 띄어쓰기 규칙이 달라진다. */
.mk-chip--mine .mk-mine::before{ content:":"; margin-right:6px; color:var(--text-5); font-weight:700; }
/* ⚠ .mk-mine 본체는 위(1112행 언저리)에 이미 있다. 여기서 다시 쓰면
     color 가 빠진 채 <뒤에서 덮어> 강조색이 조용히 사라진다. */

/* ==========================================================================
   예측마켓 카드 색감 — 시안 실측 (레드 2026-09-26 「우리도 색감은 이렇게가자」)

     카드    rgb(10,16,34)   + 흰색 6% 테두리   (우리는 22,32,52 로 떠 있었다)
     옵션판  rgb(10,13,22)   + 둥글기 8         (우리는 5,8,15 / 12 였다)
     예      rgb(63,217,138) · 아니오 rgb(255,79,122)   ← 퍼센트 <b> 에만
     갈래    12px            (우리는 13px)

   ⚠ 퍼센트에 색을 주는 것이 핵심이다. 우리는 「예 22%」가 통째로 회색이라
     어느 쪽이 유리한지 눈으로 안 읽혔다.
   ========================================================================== */
.mk-card{ background:rgb(10,16,34); border-color:rgba(255,255,255,.06); }
.mk-card .mk-opts{ background:rgb(10,13,22); border-radius:8px; }
.mk-card__cat{ font-size:12px; }

/* 예 · 아니오 — 알약은 차분하게, <숫자만> 색으로 말한다 */
.mk-card .mk-vote{ background:rgb(26,33,51); }
.mk-card .mk-vote--yes b{ color:rgb(63,217,138); font-weight:900; }
.mk-card .mk-vote--no  b{ color:rgb(255,79,122); font-weight:900; }

/* ★ 아이콘 박스 테두리 — 시안 .mk-thumb (레드 2026-09-26 「아이콘 테두리」).

     시안: box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 22%, transparent)
     갈래 색을 <22% 만> 써서 은은한 안쪽 선을 그린다. 진한 테두리를 두르면
     아이콘보다 테두리가 먼저 읽힌다.
   ⚠ border 가 아니라 box-shadow 다. border 를 주면 48px 안쪽이 46px 로 줄어
     아이콘이 한 칸씩 밀린다. */
.mk-thumb{
  border:0;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c, var(--primary)) 22%, transparent);
}

/* ★ 카드 제목이 상세로 가는 문 (시안 .mk-card__link).
     글자 색·굵기는 제목이 정한다 — 링크라고 파랗게 물들이지 않는다. */
.mk-card__link{ color:inherit; text-decoration:none; }
.mk-card__link:hover{ text-decoration:underline; text-underline-offset:3px; }
.mk-card__link:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

/* ==========================================================================
   확률 추이 그래프 — 시안 predict.css (레드 2026-09-26 「더미데이터로 차트처리」)

   ⚠ SVG 는 가로로 늘어난다(preserveAspectRatio:none). 그래서 글자·끝점은
     SVG 밖 HTML 이고, 선 두께는 non-scaling-stroke 로 지켜야 한다.
     안 그러면 넓은 화면에서 선이 굵어지고 글자가 찌그러진다.
   ========================================================================== */
.mk-chartcard{ margin-top:14px; padding:16px; border-radius:var(--r-chip, 10px); background:var(--bg); }
.mk-chart__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mk-chart__now{ display:grid; grid-template-columns:auto auto; align-items:baseline; gap:2px 10px; }
.mk-chart__now span{ grid-column:1 / -1; font-size:var(--fs-sm); font-weight:700; color:var(--c); }
.mk-chart__now b{ font-size:34px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; }
.mk-chart__now em{ font-style:normal; font-size:var(--fs-sm); font-weight:800; color:var(--text-4); }
.mk-chart__now em.is-up{ color:var(--success, #3fd98a); }
.mk-chart__now em.is-down{ color:var(--danger, #ff4f7a); }

.mk-legend{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.mk-legend__btn{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:var(--r-full); border:1px solid var(--line);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:700; color:var(--text-4);
  transition:border-color .15s, color .15s, background-color .15s;
}
.mk-legend__btn:hover{ color:var(--text); border-color:var(--c); }
.mk-legend__btn.is-on{ color:var(--text); border-color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.mk-legend__btn i{ width:8px; height:8px; border-radius:var(--r-full); background:var(--c); }
.mk-legend__btn b{ font-weight:900; font-variant-numeric:tabular-nums; }

/* --mk-axis-w : 오른쪽 y 눈금 자리. 선이 눈금 밑으로 들어가지 않게 비워 둔다 */
.mk-chartwrap{ position:relative; margin-top:12px; padding-right:var(--mk-axis-w, 44px); }
.mk-chart{ display:block; width:100%; height:var(--mk-chart-h, 240px); overflow:visible; }
.mk-chart__grid{ stroke:var(--surface-3); stroke-width:1; stroke-dasharray:6 6; vector-effect:non-scaling-stroke; }
.mk-chart__line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.mk-chart__line.is-main{ stroke-width:3; }
.mk-chart__line.is-back{ stroke-width:1.5; opacity:.28; }

.mk-chart__dots{ position:absolute; inset:0 var(--mk-axis-w, 44px) 0 0; pointer-events:none; }
.mk-chart__dot{
  position:absolute; right:0; width:10px; height:10px; border-radius:50%;
  translate:50% -50%; background:var(--c); box-shadow:0 0 0 3px var(--bg), 0 0 10px var(--c);
}
.mk-chart__y span{
  position:absolute; right:0; translate:0 -50%;
  font-size:var(--fs-xs); font-weight:700; color:var(--text-5); font-variant-numeric:tabular-nums;
}
.mk-chart__x{
  display:flex; justify-content:space-between; margin-top:6px; padding-right:var(--mk-axis-w, 44px);
  font-size:var(--fs-xs); font-weight:700; color:var(--text-5);
}

.mk-ranges{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.mk-ranges__label{ margin-right:6px; font-size:var(--fs-base); font-weight:800; color:var(--text-4); }
.mk-range{
  height:30px; padding:0 12px; border-radius:var(--r-full); border:0; cursor:pointer;
  background:var(--surface-2); font-family:var(--font); font-size:var(--fs-sm); font-weight:700; color:var(--text-3);
  transition:background-color .15s, color .15s;
}
.mk-range:hover{ color:var(--text); }
.mk-range.is-on{ background:var(--primary); color:#fff; }

@media (max-width:1023px){
  .mk-chartcard{ padding:12px; }
  .mk-chart{ height:180px; }
  .mk-chart__now b{ font-size:28px; }
  .mk-legend{ justify-content:flex-start; }
}

/* 선 아래 채움 — 그라디언트는 컴포넌트가 defs 로 만든다 */
.mk-chart__area{ stroke:none; }

/* ★ 빵부스러기 — 시안 .mk-crumb 「예측마켓 › 갈래」 */
.mk-crumb{ display:flex; align-items:center; gap:6px; margin-bottom:12px;
  font-size:var(--fs-sm); color:var(--text-5); }
.mk-crumb a{ color:inherit; text-decoration:none; transition:color .15s; }
.mk-crumb a:hover{ color:var(--primary); }
.mk-crumb svg{ width:14px; height:14px; }

/* ★ 선택지 줄의 확률 — 오른쪽 끝에 붙여 세로로 줄을 맞춘다 (시안 .mk-listrow__pct) */
.mk-listrow__pct{ flex:none; min-width:48px; text-align:right;
  font-size:var(--fs-lg); font-weight:900; font-variant-numeric:tabular-nums; }

/* ★ 패널 제목 뒤의 작은 글씨 — 「선택지 3개 · 확률 높은 순」의 뒷말 */
.mk-panel__title small{ margin-left:6px; font-size:var(--fs-sm); font-weight:700; color:var(--text-5); }

/* ★ 구매 상자 안 선택지 고르개 (시안 .mk-buy__box .mk-select) */
.mk-buy__label{ display:block; margin-bottom:6px; font-size:var(--fs-sm); font-weight:800; color:var(--text-4); }
.mk-buy__box .mk-select{ width:100%; margin-bottom:10px; }

/* ★ LIVE 는 <오른쪽 끝>이다 (레드 2026-09-26 「LIVE 오른쪽정렬」).
     제목 바로 옆에 붙어 있으면 제목의 일부처럼 읽힌다. */
/* ⚠ 세로는 <가운데>다 (레드 「수직정렬」). flex-start 로 두면 위에 붙어
     제목·거래량 두 줄 중 첫 줄에만 걸린 것처럼 보인다. */
.mk-detail__head .mk-live, .mk-detail__head .mk-soon{ margin-left:auto; align-self:center; }

/* ⚠ y 눈금 첫 줄(맨 위)은 translate 로 <반쯤 위로> 나간다. 범례 바로 밑에서
     시작하면 글자가 겹친다 (레드 2026-09-26 「%랑 목록 겹침」).
     차트를 한 뼘 더 내려 눈금이 설 자리를 만든다. */
.mk-chartwrap{ margin-top:14px; }

/* ⚠ 브라우저 기본 포커스 테두리를 끈다 (레드 「인풋포커스 해제」).
     파란 네모가 상자 위에 겹쳐 그려져 우리 테두리와 두 겹이 됐다.
   ★ 대신 <감싼 상자>가 테두리로 포커스를 말한다 — 접근성은 그대로다. */
.mk-buy__amount input:focus,
.mk-buy__amount input:focus-visible{ outline:none; box-shadow:none; }
.mk-buy__amount:focus-within{ border-color:var(--primary); }

/* ⚠⚠ 겹치는 것은 <맨 위 눈금>이다 (레드 2026-09-26 「이건 아직도 겹친다」).
     눈금은 lo→hi 차례라 <마지막>이 맨 위다. 앞서 첫 span(맨 아래)을 재고
     「안 겹친다」고 잘못 읽었다.
   ★ 가운데 눈금만 -50% 로 선 위에 걸치고, 양 끝은 안쪽으로 붙인다.
     그래야 맨 위 글자가 차트 밖으로 나가 범례를 덮지 않는다. */
.mk-chart__y span:last-child{ translate:0 0; }
.mk-chart__y span:first-child{ translate:0 -100%; }

/* ==========================================================================
   폰 — 시안과 <같게> (레드 2026-09-26 「시안대로하라고」)

   시안 predict-detail 을 378px 폭에서 실측해 우리와 견줬다. 다른 것이 둘이었다.

     범례   시안 flex-end  /  우리 flex-start   ← 내가 임의로 왼쪽으로 돌렸던 것
     카트   시안 static    /  우리 fixed 시트   ← 화면 아래 붙여 두던 것

   ⚠ 카트를 흐르게 두면 <스크롤을 내려야> 구매창이 나온다. 그것이 시안의 결이다 —
     선택지를 다 읽고 맨 아래에서 사는 순서. 붙박이 시트는 우리가 더한 것이었다.
   ⚠ 그래서 접기 단추(.mk-buy__toggle)도 함께 숨긴다. 흐르는 상자에는
     접을 까닭이 없고, 눌러도 아무 일이 없는 단추만 남는다.
   ========================================================================== */
@media (max-width:1024px){
  .mk-buy{
    position:static; z-index:auto;
    max-height:none; overflow:visible;
    border-top:0; box-shadow:none;
    border-radius:var(--r);
    padding:20px;
  }
  .mk-buy__toggle{ display:none; }
  /* 접힘 상태로 들어와도 내용이 살아 있게 — 붙박이 시트일 때만 쓰던 규칙이다 */
  /* ⚠⚠ <revert 키워드를 쓰지 않는다> — 이것 때문에 폰 화면이 깨졌다
       (레드 2026-09-26 「똑같은데? 뭐한거임?」).

     revert 는 <그 요소의 기본값>으로 되돌린다. div 의 기본값은 block 이라
     grid 가 통째로 꺼졌고, grid-template-columns:repeat(4,…) 가 무시되어
     빠른 금액 여덟 칸이 <한 줄로 흘러> 글자가 붙었다
     (「7,00010,00070,000100,000700,000절반최대초기화」).
     내 화면은 카트가 안 접힌 상태(PC 폭)라 멀쩡해 보여 못 잡았다.

   ★ 값을 <직접> 적는다. revert·initial·unset 은 태그마다 달라져
     레이아웃이 조용히 바뀐다. */
  .mk-buy.is-closed .mk-buy__tabs,
  .mk-buy.is-closed .mk-buy__terms{ display:block; }
  .mk-buy.is-closed .mk-buy__box > .mk-buy__quick,
  .mk-buy.is-closed .mk-buy__box > .mk-win{ display:grid; }
  .mk-buy.is-closed .mk-buy__head{ position:static; }
}
@media (max-width:1023px){
  /* 시안은 폰에서도 범례가 <오른쪽>이다 */
  .mk-legend{ justify-content:flex-end; }
}

/* ==========================================================================
   카트는 <묶음>이지 상자가 아니다 — 시안 predict.css 410~430
   (레드 2026-09-26 「위에랑 테두리 맞추고 / 안에 여백이 또들어가서 너무좁다」)

     시안   .mk-buy      = grid · gap 12          ← 배경도 테두리도 padding 도 없다
            .mk-buy__head= padding 12 + 테두리    ← 각각이 카드
            .mk-buy__box = padding 14 + 테두리

     우리   .mk-buy 가 .mk-panel(padding 20 + 테두리)이고 그 안에 또 __box 가 있어
            <상자 속 상자>였다. 좌우로 40px 을 잃어 빠른 금액 여덟 칸이
            한 줄에 욱여넣어지며 글자가 붙었다(「7,00010,00070,000…」).

   ★ 그래서 바깥에서 padding·배경·테두리를 걷고, 안쪽 둘에 준다.
     위 패널들과 <같은 테두리·같은 둥글기>가 되어 줄이 맞는다.
   ========================================================================== */
.mk-buy.mk-panel{
  padding:0; background:transparent; border:0; border-radius:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
}
.mk-buy__head{
  padding:12px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line);
}
.mk-buy__box{
  padding:14px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line);
}
/* 구매 단추·약관은 상자 <밖>이다. 바깥 padding 을 걷었으니 좌우를 맞춘다 */
.mk-buy > .mk-buy__go, .mk-buy > .mk-buy__terms{ margin-inline:0; }

@media (max-width:1024px){
  /* 폰에서도 같은 구조. 앞서 준 padding:20px 을 여기서 되돌린다 */
  .mk-buy.mk-panel{ padding:0; gap:10px; }
  .mk-buy__box{ padding:12px; }
  .mk-buy__head{ padding:10px; }
}

/* ★ 폰에서 LIVE 는 <오른쪽 위>에 얹는다 — 시안 predict.css 531~535
     (레드 2026-09-26 「라이브표기 우측상단으로 가자」)

   ⚠ 머리가 flex 라 폭이 모자라면 LIVE 가 <다음 줄>로 떨어진다. 제목·거래량
     아래에 혼자 서서 무엇에 붙은 배지인지 안 읽혔다.
   ★ absolute 로 띄우고, 글자 칸은 오른쪽에 그만큼 자리를 비운다(padding-right).
     안 비우면 긴 제목이 배지 밑으로 들어간다. */
@media (max-width:1023px){
  /* ★ 시안 predict.css 531~537 그대로 (레드 2026-09-26 「라이브 버튼이 애매해」).
       머리를 <한 덩어리로 낮게> 만든다 — 글자를 줄이고 사이를 좁혀야
       제목이 아이콘 아래로 떨어지지 않는다.
     ⚠ 글자 칸의 오른쪽 여백은 <52px> 다. 64 를 주면 폭이 모자라
       제목이 줄바꿈되고 머리가 세로로 길어진다. */
  .mk-detail__head{ position:relative; gap:10px; align-items:flex-start; }
  .mk-detail__head .mk-live,
  .mk-detail__head .mk-soon{ position:absolute; top:0; right:0; margin:0; }
  .mk-detail__head > div{ display:grid; gap:2px; padding-right:52px; min-width:0; }
  .mk-detail__title{ font-size:16px; line-height:1.3; }
  .mk-detail__meta{ font-size:11px; line-height:1.5; }
  .mk-detail__head .mk-thumb{ width:44px; height:44px; }
  .mk-detail__head .mk-thumb svg{ width:24px; height:24px; }
}

/* ==========================================================================
   카트 마무리 (레드 2026-09-26)

     · 「이사이 공간이 너무 많다」  → 폰의 padding-bottom 212px 를 걷는다
     · 「글자정렬도 시안처럼」      → 머리를 왼쪽부터 채운다
     · 「보유금액도 안보인다」      → 잔액 줄
     · 「PC여기 줄맞춰줄래」        → 왼쪽 머리 패널과 아래 라인을 맞춘다
   ========================================================================== */

/* 잔액 — 시안 .mk-buy__bal */
.mk-buy__bal{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line);
  font-size:var(--fs-sm);
}
.mk-buy__bal span{ color:var(--text-4); }
/* ⚠ 숫자는 <강조색>이다 (시안은 --gold). 흰 글자로 두면 라벨과 같은 무게라
     「얼마 있나」가 한눈에 안 들어온다. */
.mk-buy__bal b{ font-size:var(--fs-md); font-weight:900; color:var(--primary); font-variant-numeric:tabular-nums; }

/* ★ PC — 카트 머리를 왼쪽 머리 패널과 <같은 결>로. 패딩·아이콘을 맞추면
     두 상자의 아래 라인이 같은 자리에 선다 (레드 이미지의 빨간 줄). */
@media (min-width:1025px){
  /* ⚠ 왼쪽 머리 패널(.mk-panel.mk-head)의 padding 은 <14px 18px> 이다.
       20px 를 주면 위아래로 12px 커져 두 상자의 아래 라인이 11px 어긋난다
       (레드 2026-09-26 「PC여기 줄맞춰줄래」). 실측해서 같은 값으로 맞춘다. */
  .mk-buy__head{ padding:14px 18px; }
  .mk-buy__head .mk-thumb{ width:48px; height:48px; }
  .mk-buy__head .mk-thumb svg{ width:26px; height:26px; }
}

@media (max-width:1024px){
  /* ⚠⚠ 212px 은 <붙박이 시트>가 화면 아래를 가리던 시절의 자리다.
       카트가 흐르게 된 지금은 구매하기 아래로 빈 화면 한 판이 남는다. */
  .mk-detail{ padding-bottom:0; }

  /* ⚠ space-between 은 접기 단추가 오른쪽에 있던 시절의 값이다. 단추를 숨긴
       지금은 글자 칸이 <오른쪽 끝으로> 밀려 제목·선택이 우측 정렬로 보였다. */
  .mk-buy__head{ justify-content:flex-start; }
}

/* ==========================================================================
   폰 머리 마무리 (레드 2026-09-26 「변경된게 없어」 · 「보더좀넣으라니」)

   ⚠⚠ 아무리 여백을 고쳐도 그대로였던 까닭 — `.mk-head .mk-detail__head{ flex-wrap:wrap }`.
       폭이 모자라면 글자 칸이 <통째로 다음 줄>로 넘어간다. 그래서 제목이
       아이콘 아래로 떨어지고 머리가 세로로 길어졌다. padding-right 만 보고
       이 한 줄을 못 봤다.
   ★ 폰에서는 줄바꿈을 막고, 글자 칸이 <줄어들> 수 있게 min-width:0 을 준다.

   ⚠ 보더는 이미 있었지만 <잔액 줄보다 흐리게> 보였다. 카트 머리는 배경이
     surface-1 이고 바깥이 투명이라 테두리가 배경에 묻힌다. 잔액과 같은 결로
     한 단계 또렷한 선을 준다.
   ========================================================================== */
@media (max-width:1023px){
  .mk-head .mk-detail__head,
  .mk-detail__head{ flex-wrap:nowrap; }
  .mk-detail__head > div{ flex:1 1 auto; min-width:0; }
  .mk-detail__title{ overflow:hidden; text-overflow:ellipsis; }
}
/* 카트 머리 — 잔액 줄과 <같은> 테두리 */
.mk-buy__head{ border:1px solid var(--line-strong, var(--line)); }

/* ★ 갈래 · 질문을 아이콘 <윗선 · 아랫선>에 맞춘다 (레드 2026-09-27 「아이콘옆에 카테고리 타이틀 높이 맞추기」).
     갈래 글자(12px)가 24px 줄 높이 안에 앉아 아이콘 윗선보다 6px 아래로 떠 있었다.
     줄 높이를 글자 키로 줄이고, 기둥을 아이콘 높이(48)로 세워 갈래는 위 · 질문은 아래 끝에 붙인다.
   ⚠ 질문이 두 줄이면 기둥이 아이콘보다 길어진다 — 그때는 위에서부터 쌓인다(갈래 윗선은 그대로 맞는다). */
.mk-card__who{ min-height:48px; align-content:space-between; }
.mk-card__cat{ line-height:1; }

/* ★★ 갈래 · 질문을 아이콘 <윗선 · 아랫선>에 글자째 딱 맞춘다 (레드 2026-09-27 세 번째 「아이콘 위아래에 카테고리 타이틀 딱맞춰줘」 · 빨간 선 그림).
     ⚠ 앞의 두 시도가 어긋난 까닭 — 줄 높이(line-height) 상자와 <실제 글자 모양> 사이에 위아래 여백이 있어서
       상자를 맞춰도 글자는 1~3px 삐져나오거나 떴다(「스포츠」가 아이콘 윗선 위로 나왔다).
     ★ text-box 로 글자 위(cap) · 아래(alphabetic) 여백을 잘라 <글자 자체>를 선에 붙인다.
       갈래 = 위 끝, 질문 = 아래 끝(space-between). 질문이 두 줄이면 덩이가 아이콘보다 길어진다(윗선은 그대로 맞는다).
     ⚠ text-box 를 모르는 브라우저(파이어폭스)는 예전처럼 줄 상자 기준 — 1~2px 차이로 남는다. */
.mk-card__head{ align-items:flex-start; }
.mk-card__who{ display:grid; min-height:48px; align-content:space-between; row-gap:6px; }
.mk-card__cat, .mk-card__title{ text-box:trim-both cap alphabetic; }
/* ★ 한글 보정 (실측 2026-09-27) — text-box 는 영문 기준선(cap · alphabetic)으로 자른다.
     한글은 대문자보다 1px(12px 에서) 키가 크고, 질문 끝(한글 · 「?」)은 기준선 아래로 2px(16px 에서) 내려간다.
     그만큼 안으로 당겨 <한글 글자 자체>가 아이콘 윗선 · 아랫선에 닿게 한다. em 이라 글자 크기가 바뀌어도 비율이 같다. */
.mk-card__cat{ margin-top:.18em; }   /* 화면 검증(3.2배 확대 · 기준선)으로 맞춘 값 — .09em 은 1px 위로 나왔다 */
.mk-card__title{ margin-bottom:0; }   /* ⚠ 2px 보정은 뺐다 — 실제 화면(레드 스샷)에서 한글이 기준선 위에 앉아 2px 떠 보였다. 윗선(갈래)만 보정한다 */
/* ★ 질문은 <한 줄> — 넘치면 끝을 흐리게 사라지게 (레드 2026-09-27 「글자가 넘어가면 끝부분 흐리게 투명처리」).
     두 줄로 접히면 덩이가 아이콘보다 길어져 윗선 · 아랫선 맞춤이 깨졌다. 전체 질문은 마우스를 올리면 보인다(title).
   ⚠ 흐림은 칸 오른쪽 끝 28px 에만 건다 — 짧은 질문은 거기까지 오지 않아 흐려지지 않는다. */
.mk-card__title{
  display:block; -webkit-line-clamp:unset; line-clamp:unset;
  white-space:nowrap; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* ⚠ 글자 덩이가 <남은 폭을 다 쓴다> — 안 그러면 칸이 글자 길이만큼만 잡혀 짧은 질문도 끝이 늘 흐려졌다(레드 스샷 「우승국은?」).
     칸이 카드 폭까지 늘어야 흐림(오른쪽 28px)이 <넘칠 때만> 글자에 닿는다. */
.mk-card__head > .mk-card__who{ flex:1 1 auto; min-width:0; }
/* ★ 최종 보정 (레드 화면 두 장 — .09em 은 0.6px 위로 나오고 .18em 은 1.5px 안쪽 — 을 비교해 계산, 2026-09-27)
     「스포츠」 윗선 = 아이콘 윗선, 질문 아랫선 = 아이콘 아랫선. 둘 다 아이콘 세로 안에 들어온다(「다 들어오게」). */
.mk-card__who > .mk-card__cat{ margin-top:.52em; }   /* ★ 레드가 화면에서 직접 맞춘 값 (2026-09-27) */

/* ⚠ 질문 글자 <윗부분이 잘렸다> (레드 2026-09-27 「타이틀은 글자가 위에 짤리네」).
     text-box 로 칸을 대문자 높이까지만 남겼는데, 넘침 가림(overflow:hidden) · 끝 흐림(mask)이 그 칸 밖을 지워
     대문자보다 키 큰 한글 윗부분이 사라졌다. 칸 안에 위아래 3px 여유를 주고 같은 만큼 바깥 여백을 빼서
     <글자는 안 잘리고 줄 맞춤은 그대로>. */
.mk-card__who > .mk-card__title{ padding:3px 0; margin-top:-3px; margin-bottom:calc(.55em - 3px); }   /* ★ 레드가 화면에서 직접 맞춘 값 (2026-09-27) */

/* ★★ 모바일 예측마켓 상단 배너 — PC 처럼 보인다 (레드 2026-09-27 「모바일 예측마켓 상단 배너 PC랑 동일하게 추가」).
     배너 줄이 .sb-banners 클래스를 같이 쓰는 탓에 스포츠의 <모바일 배너 끄기>
     (sports.css `.container > .sb-banners, .sb-page .sb-banners{ display:none !important }`)에 같이 걸려 사라졌다.
   ★ 가로로 밀어 보는 줄(카드 88%)로 되살린다 — 위 폰 규칙(.mk-banner 88%)이 칸 폭을 맡는다. */
@media (max-width:1023px){
  .container > .sb-banners.mk-banners,
  .sb-page .sb-banners.mk-banners{
    display:flex !important; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .sb-banners.mk-banners::-webkit-scrollbar{ display:none; }
  .sec__head:has(+ .sb-banners.mk-banners){ display:flex; }
}