/* ==========================================================================
   predict — 예측마켓 (predict.html · predict-detail.html)
   근거: ../04-페이지/예측마켓.md · whaley.bet /predictions · /futures 실측
         (_분석/whaley/화면구조-마켓.md · market-latest.css 의 mk-* 규칙)
   ★ 크기·간격·둥글기는 whaley 숫자 그대로. 색만 스카이시티 토큰으로 옮겼다.
     whaley 의 파랑 강조(--primary)는 골드로, 예/아니오는 뜻 그대로 초록/분홍.
   ⚠ .btn · .tbl · .state 는 공통(components.css)을 쓴다.
   ========================================================================== */

/* ---- 예측마켓 전용 값 ----------------------------------------------------
   공통 tokens.css 에 없는 whaley 치수 · 색. 이 파일 안에서만 쓴다(--pm- 접두어). */
:root{
  --pm-t2: color-mix(in srgb, var(--text-sub) 30%, #fff);              /* 글자 2단 (whaley --text-2) */
  --pm-t3: color-mix(in srgb, var(--text-sub) 65%, #fff);              /* 글자 3단 */
  --pm-t4: var(--text-sub);      /* 글자 4단 — 라벨 */
  --pm-t5: color-mix(in srgb, var(--text-sub) 35%, var(--line-strong));              /* 글자 5단 — 발 · 눈금 */
  --pm-t6: var(--text-mute);     /* 글자 6단 — placeholder · 약관 */

  /* 예 · 아니오 — 브랜드 색이 아니라 '뜻' 색이다. 골드로 바꾸지 않는다 */
  --pm-yes: #3fd98a;
  --pm-yes-ink: #04140b;         /* 초록 바탕 위 글자 */
  --pm-no: #ff4f7a;
  --pm-no-ink: #ffffff;

  /* 차트 선 4색 — 1번(확률 1위)은 포인트 골드 */
  --pm-line-1:var(--accent);
  --pm-line-2: #4ec3f7;
  --pm-line-3: #a78bfa;
  --pm-line-4: #ff7a59;

  --pm-fs-xs: 12px;  --pm-fs-sm: 13px;  --pm-fs-base: 14px;  --pm-fs-md: 16px;
  --pm-fs-lg: 18px;  --pm-fs-xl: 24px;
  --pm-r-chip: 8px;  --pm-r: 12px;  --pm-r-side: 14px;
  --pm-gap: 16px;                /* whaley --gap-card */
  --pm-gap-sec: 24px;            /* 화면 안 세로 간격 */

  --pm-banner-h: 170px;          /* whaley 393×170 */
  --pm-chip-h: 40px;
  --pm-opt-h: 36px;
  --pm-thumb: 48px;
  --pm-thumb-lg: 64px;
  --pm-buy-w: 304px;             /* 오른쪽 구매 상자 (whaley 실측) */
  --pm-chart-h: 260px;
  --pm-detail-max: 1140px;       /* 상세 화면 최대 폭 — 본문 전체로 늘리면 차트가 납작하게 길어진다 */
  --pm-axis-w: 44px;             /* y 눈금 글자 자리 */
  --pm-flash: 900ms;             /* 확률이 바뀔 때 빛나는 시간 */
}
:root[data-theme^="light-"]{ --pm-t2:#1c2230; --pm-t3:#3a4252; --pm-t5:#7a8292; }   /* 흰 테마 — 옅은 글자 단계를 진하게 (sports.css 와 같은 값) */

/* ---- 화면 틀 ------------------------------------------------------------- */
.mk-page{ display:flex; flex-direction:column; gap:var(--pm-gap-sec); }
.mk-top{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.mk-top h1{ font-size:var(--pm-fs-xl); font-weight:900; }

/* 실시간 알약 — whaley 의 '오픈 예정' 자리. 시연은 살아 있으니 초록 점이 숨 쉰다 */
.mk-live, .mk-closed{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  height:30px; padding:0 14px; border-radius:var(--r-full);
  font-size:var(--pm-fs-sm); font-weight:800;
}
.mk-live{   /* 메인 LIVE 띠와 같은 빨간 알약 */
  height:24px; padding:0 11px 0 9px; gap:6px; background:var(--live); 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:pm-pulse 1.4s ease-in-out infinite;
}
.mk-closed{ background:var(--surface-2); color:var(--pm-t4); }
@keyframes pm-pulse{ 50%{ opacity:.25; } }

/* ---- 배너 3장 ------------------------------------------------------------
   그림은 피사체가 오른쪽, 왼쪽이 비어 있다 → 글자는 왼쪽, 막 없이 글자 그림자만 (whaley 주석).
   ------------------------------------------------------------------------ */
.mk-banners{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.mk-banner{
  position:relative; overflow:hidden;
  min-height:var(--pm-banner-h); padding:20px 22px; border-radius:var(--pm-r);
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg-deep) center / cover no-repeat;
  color:var(--text);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.mk-banner:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); }
.mk-banner:active{ transform:translateY(0); }
.mk-banner:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-3px; }
.mk-banner__text{ position:relative; z-index:1; max-width:64%; display:grid; gap:7px; }
.mk-banner__title{
  font-size:var(--pm-fs-md); font-weight:900; line-height:1.32; color:#fff;   /* 사진 배너 위 — 테마와 관계없이 흰 글자 */
  white-space:pre-line;      /* 문구의 \n 을 살려 두 줄로 */
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.65);
}
.mk-banner__sub{
  font-size:var(--pm-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);
}
/* 3번 배너 — 사진 대신 CSS 로 그린 밤하늘 + 골드 빛 + 3D 동전 그림 (실존 인물 사진을 쓰지 않으려고) */
.mk-banner--coins{
  background:radial-gradient(60% 90% at 82% 50%, color-mix(in oklab, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(40% 60% at 10% 110%, color-mix(in oklab, var(--sky) 45%, transparent), transparent 70%),
    linear-gradient(120deg, var(--bg-deep), var(--surface-2));
}
.mk-banner--coins::before{     /* 별 가루 */
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff, transparent),
    radial-gradient(1px 1px at 42% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 16%, #fff, transparent),
    radial-gradient(1px 1px at 30% 88%, #fff, transparent),
    radial-gradient(1px 1px at 66% 60%, #fff, transparent);
}
.mk-banner--coins::after{
  content:""; position:absolute; right:-6%; top:50%; translate:0 -50%;
  width:58%; aspect-ratio:1; pointer-events:none;
  background:url("../assets/promo/coins.png") center / contain no-repeat;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));
  transition:transform var(--t);
}
.mk-banner--coins:hover::after{ transform:rotate(-4deg) scale(1.04); }

/* ---- 분류 칩 (탭) --------------------------------------------------------- */
/* 분류 · 검색 · 정렬 — 한 상자 (PC 는 큰 판 안에 들어앉는 안쪽 상자, 휴대폰은 틀 없이 그대로) */
.mk-tools{ display:grid; gap:var(--pm-gap); }
.mk-chips{ display:flex; gap:8px; }
.mk-chip{
  flex:none; height:var(--pm-chip-h); padding:0 14px; border-radius:var(--pm-r);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line);
  font-size:var(--pm-fs-base); font-weight:700; color:var(--pm-t4);
  transition:color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.mk-chip svg{ width:20px; height:20px; color:var(--c, var(--accent-fg)); }
.mk-chip:hover{ color:var(--pm-t2); border-color:var(--accent-line); }
.mk-chip.is-on{ background:var(--accent); border-color:var(--accent-line); color:var(--accent-ink); font-weight:800; }
.mk-chip.is-on svg{ color:var(--accent-ink); }
.mk-chip--mine{ margin-left:auto; }   /* 내 포지션은 오른쪽 끝 (whaley) */
.mk-mine{ margin-left:2px; font-weight:900; color:var(--accent-fg); font-variant-numeric:tabular-nums; }

/* ---- 검색 · 정렬 · 상태 --------------------------------------------------- */
.mk-bar{ display:flex; align-items:center; gap:var(--pm-gap); flex-wrap:wrap; }
.mk-search{
  flex:1; min-width:220px; height:var(--input-h); padding:0 14px; border-radius:var(--pm-r);
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.mk-search svg{ width:20px; height:20px; color:var(--pm-t5); flex:none; }
.mk-search input{ flex:1; min-width:0; border:0; background:transparent; font-size:var(--pm-fs-base); color:var(--text); }
.mk-search input::placeholder{ color:var(--pm-t5); }
.mk-search input:focus{ outline:none; }
.mk-search:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.mk-search:focus-within svg{ color:var(--accent-fg); }

/* 어두운 선택칸 — 공통 .select 는 흰 바탕이라 이 화면 결과 맞지 않는다.
   화살표 그림은 data URI 라 색 변수를 못 쓴다 → --pm-t4 와 같은 #9aa3b8 */
.mk-select{
  height:var(--input-h); min-width:150px; padding:0 36px 0 14px; border-radius:var(--pm-r);
  appearance:none; cursor:pointer;
  background:var(--surface) 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-size:var(--pm-fs-base); font-weight:700;
  transition:border-color var(--t-fast);
}
.mk-select:hover{ border-color:var(--line-strong); }
.mk-select:focus-visible{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.mk-select option{ background:var(--surface); color:var(--text); }

/* ---- 내 포지션 요약 2단 --------------------------------------------------- */
.mk-summary{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pm-gap); margin-bottom:var(--pm-gap); }
.mk-box{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:88px; padding:12px 20px; border-radius:var(--pm-r);
  background:var(--surface); border:1px solid var(--line);
  font-weight:800;
}
.mk-box__label{ display:flex; align-items:center; gap:6px; font-size:var(--pm-fs-base); font-weight:700; color:var(--pm-t4); }
.mk-box__label svg{ width:18px; height:18px; }
.mk-box__value{ display:block; margin-top:4px; font-size:var(--fs-2xl); font-weight:800; font-variant-numeric:tabular-nums; }
.mk-box__value.is-up{ color:var(--pm-yes); }
.mk-box__value.is-down{ color:var(--pm-no); }

/* ---- 카드 그리드 3열 ------------------------------------------------------ */
.mk-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--pm-gap); grid-auto-rows:1fr; }
.mk-card{
  position:relative;
  display:flex; flex-direction:column; gap:14px;
  padding:20px; border-radius:var(--pm-r);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.mk-card:hover{ border-color:var(--accent-line); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.mk-card:focus-within{ border-color:var(--accent-line); }
.mk-card.is-settled{ opacity:.78; }
.mk-card__head{ display:flex; align-items:flex-start; gap:12px; }
.mk-thumb{
  flex:none; width:var(--pm-thumb); height:var(--pm-thumb); border-radius:var(--pm-r-chip);
  display:grid; place-items:center; background:var(--bg);
  color:var(--c, var(--accent-fg));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c, var(--accent)) 22%, transparent);
}
.mk-thumb svg{ width:26px; height:26px; }
.mk-card__who{ min-width:0; display:grid; gap:4px; align-content:start; }
.mk-card__cat{ font-size:var(--pm-fs-xs); font-weight:800; letter-spacing:.02em; color:var(--c, var(--pm-t3)); }
.mk-card__title{
  font-size:var(--pm-fs-md); font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
/* 제목 링크가 카드 전체를 덮는다 — [예][아니오] 는 그 위에 선다 */
.mk-card__link::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; }
.mk-card__link:focus-visible{ outline:none; }
.mk-card__link:focus-visible::after{ outline:2px solid var(--accent-line); outline-offset:-2px; }

/* 선택지 상자 — 카드 안에 한 단 파인 자리 */
.mk-opts{
  position:relative; z-index:1;
  margin-top:auto; padding:6px; border-radius:var(--pm-r-chip); background:var(--bg);
  display:grid; grid-template-columns:minmax(0,1fr); gap:4px;
  pointer-events:none;       /* 선택지 이름을 눌러도 카드 링크로 간다 — 단추만 따로 받는다 */
}
.mk-opts .mk-vote{ pointer-events:auto; }
.mk-opt{ display:flex; align-items:center; gap:8px; min-height:var(--pm-opt-h); padding:0 6px; border-radius:var(--pm-r-chip); }
.mk-opt__name{
  flex:1; min-width:0; font-size:var(--pm-fs-base); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 예 / 아니오 — 평소에는 글자만 색, 올리면 바탕이 찬다 */
.mk-vote{
  flex:none; min-width:76px; height:var(--pm-opt-h); padding:0 10px; border-radius:var(--pm-r-chip);
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:var(--surface-2);
  font-size:var(--pm-fs-sm); font-weight:700; color:var(--pm-t2);
  transition:background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.mk-vote b{ font-weight:900; font-variant-numeric:tabular-nums; }
.mk-vote--yes b{ color:var(--pm-yes); }
.mk-vote--no b{ color:var(--pm-no); }
.mk-vote--yes:hover{ background:color-mix(in oklab, var(--pm-yes) 26%, var(--surface-2)); color:var(--text); }
.mk-vote--no:hover{ background:color-mix(in oklab, var(--pm-no) 30%, var(--surface-2)); color:var(--text); }
.mk-vote:hover b{ color:var(--text); }

/* 확률이 움직이면 잠깐 빛난다 — 오르면 초록, 내리면 분홍 */
:is(.mk-opt, .mk-listrow).is-up{ animation:pm-flash-up var(--pm-flash) ease-out; }
:is(.mk-opt, .mk-listrow).is-down{ animation:pm-flash-down var(--pm-flash) ease-out; }
@keyframes pm-flash-up{ from{ background-color:color-mix(in oklab, var(--pm-yes) 26%, transparent); } }
@keyframes pm-flash-down{ from{ background-color:color-mix(in oklab, var(--pm-no) 26%, transparent); } }

/* 정산 결과 표 */
.mk-result{
  flex:none; padding:4px 10px; border-radius:var(--pm-r-chip);
  font-size:var(--pm-fs-sm); font-weight:900;
}
.mk-result.is-yes{ background:color-mix(in oklab, var(--pm-yes) 18%, transparent); color:var(--pm-yes); }
.mk-result.is-no{ background:var(--surface-2); color:var(--pm-t5); }

/* 발 — 거래량과 남은 시간 */
.mk-card__foot{ display:flex; align-items:center; gap:6px; font-size:var(--pm-fs-base); color:var(--pm-t5); }
.mk-card__foot b{ font-weight:800; color:var(--pm-t3); font-variant-numeric:tabular-nums; }
.mk-card__foot span{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; }
.mk-card__foot span i{ font-style:normal; }
.mk-card__foot svg{ width:14px; height:14px; }
.mk-held{
  padding:1px 8px; border-radius:var(--r-full); font-style:normal; font-size:var(--pm-fs-xs); font-weight:800;
  background:var(--accent-soft); color:var(--accent-fg);
}
.mk-empty{ grid-column:1 / -1; padding:24px; text-align:center; font-size:var(--pm-fs-md); color:var(--pm-t5); }

/* 뜻 색 글자 — 수익(+) · 손실(−) · 예 · 아니오 */
.is-yes{ color:var(--pm-yes); }
.is-no{ color:var(--pm-no); }

/* ==========================================================================
   상세
   ========================================================================== */
.mk-crumb{ display:flex; align-items:center; gap:6px; font-size:var(--pm-fs-sm); color:var(--pm-t5); }
.mk-crumb a{ transition:color var(--t-fast); }
.mk-crumb a:hover{ color:var(--accent-fg); }
.mk-crumb svg{ width:14px; height:14px; }
.mk-page:has(.mk-crumb){ gap:12px; }

.mk-detail{ width:100%; max-width:var(--pm-detail-max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) var(--pm-buy-w); gap:var(--pm-gap); align-items:start; }
.mk-main{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--pm-gap); }
.mk-panel{ padding:20px; border-radius:var(--pm-r); background:var(--surface); border:1px solid var(--line); }
.mk-panel__title{ font-size:var(--pm-fs-md); font-weight:900; }
.mk-panel__title small{ margin-left:6px; font-size:var(--pm-fs-sm); font-weight:700; color:var(--pm-t5); }

/* 머리 판 — 아이콘 · 분류 · 제목 · 거래량/마감, 오른쪽 끝에 상태 알약 */
.mk-head{ padding:16px 18px; }
.mk-detail__head{ display:flex; align-items:center; gap:16px; }
.mk-head .mk-thumb{ width:var(--pm-thumb-lg); height:var(--pm-thumb-lg); }
.mk-head .mk-thumb svg{ width:34px; height:34px; }
.mk-detail__who{ min-width:0; flex:1; display:grid; gap:4px; }
.mk-detail__who .mk-card__cat:hover{ text-decoration:underline; }
.mk-detail__title{ font-size:var(--pm-fs-lg); font-weight:900; line-height:1.3; }
.mk-detail__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:var(--pm-fs-sm); color:var(--pm-t5);
}
.mk-detail__meta b{ font-weight:800; color:var(--pm-t3); }
.mk-detail__meta svg{ width:14px; height:14px; }

/* 차트 — 패널보다 한 단 어두운 카드 안 (whaley: 페이지 → 패널 → 차트 카드) */
.mk-chartcard{ margin-top:14px; padding:16px; border-radius:var(--pm-r-chip); 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(--pm-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(--pm-fs-sm); font-weight:800; color:var(--text-sub); }
.mk-chart__now em.is-up{ color:var(--success); }
.mk-chart__now em.is-down{ color:var(--danger); }
.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-size:var(--pm-fs-sm); font-weight:700; color:var(--text-sub);
  transition:border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.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-chartwrap{ position:relative; margin-top:12px; padding-right:var(--pm-axis-w); }
.mk-chart{ display:block; width:100%; height:var(--pm-chart-h); 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; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent)); }
.mk-chart__line.is-back{ stroke-width:1.5; opacity:.28; }
/* 끝점 — SVG 가 가로로 늘어나 원이 찌그러지므로 HTML 점을 얹는다 */
.mk-chart__dots{ position:absolute; inset:0 var(--pm-axis-w) 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(--pm-fs-xs); font-weight:700; color:var(--pm-t5); font-variant-numeric:tabular-nums;
}
.mk-chart__x{
  display:flex; justify-content:space-between; margin-top:6px; padding-right:var(--pm-axis-w);
  font-size:var(--pm-fs-xs); font-weight:700; color:var(--pm-t5);
}
.mk-ranges{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.mk-ranges__label{ margin-right:6px; font-size:var(--pm-fs-base); font-weight:800; color:var(--pm-t4); }
.mk-range{
  height:30px; padding:0 12px; border-radius:var(--r-full);
  background:var(--surface-2); font-size:var(--pm-fs-sm); font-weight:700; color:var(--pm-t3);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.mk-range:hover{ color:var(--text); }
.mk-range.is-on{ background:var(--accent); color:var(--accent-ink); }

/* 선택지 목록 — 위에 이름 · 24시간 변화 · 확률, 아래에 [예][아니오] 절반씩 */
.mk-list{ margin-top:14px; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.mk-listrow{ padding:12px 14px; border-radius:var(--pm-r-chip); background:var(--bg); }
.mk-listrow__top{ display:flex; align-items:baseline; gap:12px; }
.mk-listrow__name{ flex:1; min-width:0; font-size:var(--pm-fs-base); font-weight:900; }
.mk-listrow__chg{ flex:none; font-size:var(--pm-fs-sm); font-weight:800; color:var(--pm-t5); }
.mk-listrow__chg.is-up{ color:var(--pm-yes); }
.mk-listrow__chg.is-down{ color:var(--pm-no); }
.mk-listrow__pct{ flex:none; min-width:48px; text-align:right; font-size:var(--pm-fs-lg); font-weight:900; font-variant-numeric:tabular-nums; }
.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:color-mix(in oklab, var(--pm-yes) 18%, var(--surface-2)); }
.mk-listrow__btns .mk-vote--no{ background:color-mix(in oklab, var(--pm-no) 16%, var(--surface-2)); }
.mk-listrow__btns .mk-vote.is-on{ box-shadow:inset 0 0 0 2px var(--accent); color:var(--text); }
.mk-listrow .mk-result{ display:inline-block; margin-top:8px; }

/* 정산 규칙 — 두 문단까지 보이고 흐려지며 [더 보기] */
.mk-rules__title{ font-size:var(--pm-fs-md); font-weight:900; }
.mk-rules__body{ margin-top:12px; display:grid; gap:10px; }
.mk-rules__body p{ font-size:var(--pm-fs-base); color:var(--pm-t4); 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(--pm-fs-sm); color:var(--pm-t4);
}
.mk-rules__foot b{ font-weight:900; color:var(--text); }
.mk-rules__more{
  flex:none; height:34px; padding:0 14px; border-radius:var(--pm-r-chip);
  background:var(--surface-2); font-size:var(--pm-fs-sm); font-weight:900;
  transition:background-color var(--t-fast);
}
.mk-rules__more:hover{ background:var(--surface-3); }
.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(--pm-r-chip); background:var(--bg); }
.mk-src__ico{
  flex:none; width:38px; height:38px; border-radius:var(--pm-r-chip);
  display:grid; place-items:center; background:var(--surface-2); color:var(--accent-fg);
}
.mk-src__ico svg{ width:20px; height:20px; }
.mk-src__txt{ min-width:0; }
.mk-src__txt b{ display:block; font-size:var(--pm-fs-base); font-weight:900; }
.mk-src__txt span{ display:block; margin-top:1px; font-size:var(--pm-fs-sm); color:var(--pm-t4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 구매내역 표 */
.mk-hist{ margin-top:12px; }
.mk-hist .mk-empty{ padding:32px 0; }
.mk-tbl td{ font-variant-numeric:tabular-nums; }
.mk-tbl small{ display:block; font-size:var(--pm-fs-xs); font-weight:700; }
.mk-side{ display:inline-block; padding:1px 10px; border-radius:var(--r-full); font-size:var(--pm-fs-xs); font-weight:900; }
.mk-side.is-yes{ background:color-mix(in oklab, var(--pm-yes) 18%, transparent); }
.mk-side.is-no{ background:color-mix(in oklab, var(--pm-no) 18%, transparent); }

/* ---- 구매 상자 (오른쪽 304) ----------------------------------------------
   패널 자체는 바탕이 없고, 안쪽 상자만 판을 깐다. 스크롤해도 따라온다.
   ------------------------------------------------------------------------ */
.mk-buy{
  position:sticky; top:calc(var(--header-h) + var(--pm-gap));
  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(--pm-r); background:var(--surface); border:1px solid var(--line); }
.mk-buy__head .mk-thumb{ width:44px; height:44px; }
.mk-buy__head .mk-thumb svg{ width:24px; height:24px; }
.mk-buy__who{ min-width:0; }
.mk-buy__market{ font-size:var(--pm-fs-sm); color:var(--pm-t5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-buy__pick{ margin-top:2px; font-size:var(--pm-fs-md); font-weight:900; line-height:1.25; }
.mk-buy__pick em{ font-style:normal; }
.mk-buy__bal{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:var(--pm-r); background:var(--surface); border:1px solid var(--line);
  font-size:var(--pm-fs-base); color:var(--pm-t4);
}
.mk-buy__bal b{ font-size:var(--pm-fs-md); font-weight:900; color:var(--money); font-variant-numeric:tabular-nums; }
.mk-buy__box{
  display:flex; flex-direction:column; gap:10px;
  padding:14px; border-radius:var(--pm-r); background:var(--surface); border:1px solid var(--line);
}
.mk-buy__box .mk-select{ width:100%; }
.mk-buy__label{ font-size:var(--pm-fs-sm); font-weight:800; color:var(--pm-t4); }
.mk-buy__sides{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* 두 단추는 늘 제 색으로 찬다 — 고른 쪽은 흰 테두리로만 짚는다 (whaley 2026-09-20 규칙) */
.mk-buy__side{
  height:52px; border-radius:var(--pm-r-side);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--pm-fs-md); font-weight:900;
  border:2px solid transparent; opacity:.72;
  transition:filter var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.mk-buy__side b{ font-variant-numeric:tabular-nums; }
.mk-buy__side--yes{ background:linear-gradient(180deg, var(--pm-yes), color-mix(in oklab, var(--pm-yes) 78%, #000)); color:var(--pm-yes-ink); box-shadow:0 6px 18px -8px var(--pm-yes); }
.mk-buy__side--no{ background:linear-gradient(180deg, var(--pm-no), color-mix(in oklab, var(--pm-no) 78%, #000)); color:var(--pm-no-ink); box-shadow:0 6px 18px -8px var(--pm-no); }
.mk-buy__side:hover{ filter:brightness(1.1); opacity:1; }
.mk-buy__side.is-on{ border-color:var(--text); opacity:1; }
.mk-buy__amount{
  display:flex; align-items:center; gap:8px; height:48px; padding:0 14px;
  border-radius:var(--pm-r-chip); background:var(--bg); border:1px solid var(--line);
  transition:border-color var(--t-fast);
}
.mk-buy__amount:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.mk-buy__amount b{ font-size:var(--pm-fs-md); font-weight:900; color:var(--pm-t4); }
.mk-buy__amount input{
  flex:1; min-width:0; border:0; background:transparent; text-align:right;
  font-size:var(--pm-fs-md); font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;
}
.mk-buy__amount input:focus{ outline:none; }
.mk-buy__amount input::placeholder{ color:var(--pm-t6); }
/* 빠른 금액 다섯 + 절반 · 최대 · 초기화 = 여덟 → 4×2 */
.mk-buy__quick{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.mk-buy__quick button{
  height:36px; border-radius:var(--pm-r-chip); background:var(--surface-2);
  font-size:var(--pm-fs-xs); font-weight:900;
  transition:background-color var(--t-fast), color var(--t-fast);
}
.mk-buy__quick button:hover{ background:var(--surface-3); color:var(--accent-fg); }
.mk-win{ display:grid; gap:6px; padding:10px 12px; border-radius:var(--pm-r-chip); background:var(--bg); }
.mk-win div{ display:flex; justify-content:space-between; gap:10px; font-size:var(--pm-fs-sm); }
.mk-win dt{ color:var(--pm-t4); }
.mk-win dd{ font-weight:800; font-variant-numeric:tabular-nums; }
.mk-win .is-win dd{ font-size:var(--pm-fs-md); font-weight:900; color:var(--pm-yes); }
.mk-buy__go{ height:48px; font-size:var(--pm-fs-md); font-weight:900; }
.mk-buy__terms{ font-size:var(--pm-fs-xs); color:var(--pm-t6); line-height:1.5; }
/* 비로그인 · 정산 완료 — 상자 대신 안내 */
.mk-buy__guest{ align-items:center; text-align:center; padding:24px 16px; color:var(--pm-t4); }
.mk-buy__guest > svg{ width:36px; height:36px; color:var(--surface-3); }
.mk-buy__guest b{ font-size:var(--pm-fs-md); color:var(--text); }
.mk-buy__guest em{ font-style:normal; font-weight:800; }

/* ---- 좁은 화면 ----------------------------------------------------------- */
/* ---- PC — 큰 판 하나 안에 상자들 (마이페이지와 같은 틀) ---------------------
   바깥 판이 제목 · 배너 · 분류 · 검색 · 카드까지 한 장으로 감싸고, 카드는 한 단계 어두운 면으로 들어앉는다 */
@media (min-width:1025px){
  .mk-page{
    gap:18px; margin-top:-16px; margin-bottom:40px; padding:20px;   /* 위 — 페이지 기본 여백 30 에서 16 을 당겨 헤더와 14 만 */
    border-radius:26px; border:1px solid var(--pn-line);
    background:linear-gradient(180deg, var(--pn-top) 0%, var(--pn-bot) 100%);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  }
  .mk-page:has(.mk-crumb){ gap:12px; }
  .mk-card{ background:var(--pn-card); border-color:var(--pn-line); }
  .mk-tools{ gap:12px; padding:14px; border-radius:16px; background:var(--pn-card); border:1px solid var(--pn-line); }
}

@media (max-width:1024px){
  .mk-banners{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .mk-banner{ flex:none; width:88%; scroll-snap-align:start; }
  .mk-banner__text{ max-width:76%; }
  .mk-chips{ overflow-x:auto; scrollbar-width:none; }
  .mk-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mk-detail{ grid-template-columns:minmax(0,1fr); }
  .mk-buy{ position:static; }
}
@media (max-width:640px){
  .mk-grid, .mk-summary, .mk-srcs{ grid-template-columns:minmax(0,1fr); }
}

/* ---- 움직임 줄이기 — 빛남 · 숨쉬는 점 · 떠오르기를 끈다 ------------------ */
@media (prefers-reduced-motion:reduce){
  :is(.mk-opt, .mk-listrow):is(.is-up, .is-down), .mk-live::before{ animation:none; }
  .mk-card:hover, .mk-banner:hover, .mk-banner--coins:hover::after{ transform:none; }
}

/* ---- 휴대폰 (1023px 이하) — 카드를 낮게: 그림 작게 · 제목 한 줄 · 선택지 줄 낮게 ---------- */
@media (max-width:1023px){
  :root{ --pm-thumb: 34px; --pm-opt-h: 30px; --pm-gap: 8px; --pm-gap-sec: 14px; --pm-banner-h: 110px; --pm-chart-h: 170px; }
  .mk-card{ gap:8px; padding:12px; }
  .mk-card__head{ gap:10px; align-items:center; }
  .mk-thumb svg{ width:20px; height:20px; }
  .mk-card__who{ gap:1px; }
  .mk-card__title{ font-size:14px; -webkit-line-clamp:1; }
  .mk-opts{ padding:4px; gap:2px; }
  .mk-opt{ padding:0 4px; }
  .mk-opt__name{ font-size:13px; }
  .mk-vote{ min-width:66px; font-size:12px; }
  .mk-card__foot{ font-size:11px; }
  .mk-banner{ padding:14px 16px; }
}

/* 휴대폰 — 상세: 머리는 한 덩어리로 낮게, 선택지는 [이름 · 변동 · 확률 | 예 | 아니오] 한 줄 */
@media (max-width:1023px){
  .mk-panel{ padding:12px; }
  .mk-detail__head{ position:relative; gap:10px; }
  .mk-detail__head > .mk-live, .mk-detail__head > .mk-closed{ position:absolute; top:0; right:0; }
  .mk-detail__who{ gap:2px; padding-right:52px; }
  .mk-detail__title{ font-size:16px; }
  .mk-detail__meta{ font-size:11px; }
  .mk-listrow{ display:flex; align-items:center; gap:8px; padding:6px 8px; }
  .mk-listrow__top{ flex:1; min-width:0; flex-wrap:wrap; align-items:baseline; gap:0 6px; }
  .mk-listrow__name{ flex:1 1 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .mk-listrow__chg{ font-size:10px; }
  .mk-listrow__pct{ min-width:0; font-size:14px; text-align:left; }
  .mk-listrow__btns{ flex:none; margin-top:0; gap:4px; grid-template-columns:58px 74px; }
  .mk-listrow__btns .mk-vote{ height:32px; padding:0 4px; gap:3px; font-size:11px; white-space:nowrap; }
  .mk-legend{ gap:4px; }
}