/* ==========================================================================
   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); }

/* 파인 상자 — 선택과 금액이 한 덩어리다 */
/* ★★ 시안대로 <정산 시간 | 베팅 금액>을 나란히 (레드 2026-09-18).
     세로로 쌓으면 카드가 두 배로 길어져 폰에서 상승·하락이 화면 밖으로 밀린다.
   ★ 자리는 grid-row 로 <명시>한다. 자동 배치에 맡기면 마크업 순서(라벨·시간·안내·
     상승하락·금액라벨·금액)대로 흘러 두 열이 어긋난다. */
.mk-buy__box{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px 10px; padding:12px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
/* ⚠ 정산 시간은 칩이 <셋>이라 금액칸보다 넓어야 한다. 1fr:1fr 로 두었더니
     칩이 세로로 눌려 「1분」이 두 줄로 갈라졌다 (2026-09-18 실측). */
.mk-buy__box > .mk-buy__label{ grid-column:1; grid-row:1; }
.mk-buy__box > .ud-times--cart{ grid-column:1; grid-row:2; }
.mk-buy__box > .ud-amt-head{ grid-column:2; grid-row:1; }
/* ⚠ 라벨도 <한 줄로> 못 박는다. 「정산 시간」이 두 줄로 갈라져 칸 높이가 어긋났다 */
.mk-buy__box > .mk-buy__label,
.mk-buy__box > .ud-amt-head .mk-buy__label{ white-space:nowrap; }
.mk-buy__box > .mk-buy__amount{ grid-column:2; grid-row:2; }
.mk-buy__box > .ud-pick__hint{ grid-column:1 / -1; grid-row:4; margin:0; }
.mk-buy__box > .mk-buy__sides{ grid-column:1 / -1; grid-row:3; }
.mk-buy__box > .mk-buy__quick{ grid-column:1 / -1; grid-row:5; }
.mk-buy__box > .mk-win{ grid-column:1 / -1; grid-row:6; }
/* ★★ 시안대로 상승·하락을 <맨 아래>로 (레드 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; }
.mk-buy__side{
  height:42px; border-radius:var(--r-chip);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text);
  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:hover{ filter:brightness(1.12); }
.mk-buy__side.is-on{ border-color:var(--text-3); }
.mk-buy__side--yes.is-on{ background:var(--success); color:var(--text-on-cta); }
.mk-buy__side--no.is-on { background:var(--tag-casino); color:#fff; }

.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{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:var(--r-chip); background:var(--bg);
}
.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-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); }

/* ---- 카트 — 매수·매도가 없다 -------------------------------------------- */
/* 선물게임 카트 — 고른 쪽에 불이 들어온다. 다운은 빨강이다. */
.mk-buy .mk-buy__side--no.is-on{ background:var(--updown-down); 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; }

  /* 차트는 <가장자리까지> 쓴다. 판의 남은 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 어긋났다.
       그 여백만큼 내려 준다. */
  .mk-buy__toggle{
    position:absolute; top:10px; bottom:auto; right:var(--gutter);
    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; }
  /* 접혀 있으면 위를, 펼쳐져 있으면 아래를 가리킨다 */
  .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; }
  .mk-buy.is-closed .mk-buy__head{
    background:none; border:0; padding:0 44px 0 0;
  }
}
@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; }

/* ⚠ 좁은 화면에서도 .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). 여기서 새 색을 정하면
     같은 화면 안에서 위아래 색이 두 벌이 된다.
   ───────────────────────────────────────────────────────────── */
.ud-bets{ list-style:none; margin: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; }
.ud-bet__name{ font-size:var(--fs-base); font-weight:800; display:flex; align-items:center; gap:6px; 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, var(--surface)); 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) 20%, transparent); color:var(--accent); }

/* 카트 아래 한 줄 안내 — 왜 못 걸었는지, 접수됐는지 */
.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; }