/* MKT3 2026-10-18 (진석 「PC로 보면 개판이다」) — 시장 날씨 화면(#mkt)
   ① 틀 = mazip .view 그대로(D:/mazip/app/web/service.css 99: max-width 520px · 양옆 16px · 가운데) → 칸 폭 488 하나 · PC 2단 안 함(mazip PC 실측 = 한 줄)
      장세(#x10Dh) · 코인 시장 지표(#mk3Mac) · 경제 발표 달력(#ecBox) · 오른·내린 코인(.hm 안 #u3dMkt) 모두 같은 왼쪽·폭.
      폰(390) = 양옆 16px 그대로(경제 달력은 전엔 양옆 0 → 16 으로 맞춤 [바꿈: 다른 칸과 같은 여백]).
   ② 코인 시장 지표 칸 = mazip macro.css(.mx-*) 그대로 → .mk3-* · 색은 ux10 토큰(--x-*)로 [바꿈: mazip 토큰 → 우리 토큰]
   ③ 장세 타일 안 「많이 오른 코인」 = mazip market.css .mk-th-* 그대로 → .mk3-th-*
   body.mk3-on 을 떼면(window.__mkt3.off()) 예전 틀. */
/* ---------- ① 한 틀(520) ---------- */
body.x10.mk3-on.h2-detail.h2-c-mkt #x10Dh{max-width:520px}
body.x10.mk3-on.h2-detail.h2-c-mkt #page-home > #ecBox,
body.x10.mk3-on.h2-detail.h2-c-mkt #page-home > #mk3Mac{box-sizing:border-box; width:auto; max-width:488px; margin:12px max(16px, calc((100% - 488px) / 2)) 0}
body.x10.mk3-on.h2-detail.h2-c-mkt #page-home .hm.uxd,
body.x10.mk3-on.h2-detail.h2-c-mkt #page-home .hm{display:flex !important; flex-direction:column !important; max-width:520px !important; width:auto !important;
  margin-left:auto !important; margin-right:auto !important; padding-left:16px !important; padding-right:16px !important; column-gap:0 !important; box-sizing:border-box}
body.x10.mk3-on.h2-detail.h2-c-mkt #page-home .hm.uxd #u3dMkt{grid-column:auto !important; grid-row:auto !important; width:auto !important; max-width:none !important; align-self:stretch}

/* ---------- ② 코인 시장 지표(mazip .mx-tile) ---------- */
body.x10 #mk3Mac[hidden]{display:none}
body.x10 .mk3-hd{display:flex; align-items:center; gap:6px; min-width:0}
body.x10 .mk3-hd .t{flex:none; font-size:var(--fs-6); font-weight:800; color:var(--x-text)}
body.x10 .mk3-hd .live{display:inline-flex; align-items:center; gap:5px; margin-left:auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--fs-1); color:var(--x-muted)}
body.x10 .mk3-hd .live i{position:relative; flex:none; width:7px; height:7px; border-radius:50%; background:#3FCB8A}   /* [바꿈: mazip --ok(초록) · 우리 --x-ok 는 호박색이라 초록 고정] */
body.x10 .mk3-hd .live i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #3FCB8A; opacity:0; animation:mk3-pulse 2s ease-out infinite}
body.x10 .mk3-hd .live.off i{background:var(--x-faint)}
body.x10 .mk3-hd .live.off i::after{display:none}
body.x10 .mk3-hd .x10-q{flex:none}
@keyframes mk3-pulse{0%{transform:scale(.6); opacity:.8} 100%{transform:scale(1.6); opacity:0}}
body.x10 .mk3-empty{margin:10px 2px 2px; font-size:var(--fs-1); color:var(--x-muted)}
body.x10 .mk3-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px}
body.x10 .mk3-c{position:relative; overflow:hidden; appearance:none; -webkit-appearance:none; border:0; font:inherit; color:var(--x-text); text-align:left; cursor:pointer;
  background:var(--x-card2); border-radius:var(--r-md); padding:10px 10px 8px; min-width:0; min-height:44px; box-shadow:inset 0 0 0 1px var(--x-rim); transition:transform .18s cubic-bezier(.2,.8,.2,1)}
body.x10 .mk3-c:active{transform:scale(.96)}
body.x10 .mk3-c:focus-visible{outline:2px solid var(--x-accent); outline-offset:2px}
body.x10 .mk3-n{display:block; font-size:var(--fs-2); color:var(--x-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10 .mk3-v{display:block; margin-top:2px; font-size:var(--fs-6); font-weight:800; letter-spacing:-.03em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
body.x10 .mk3-d{display:block; font-size:var(--fs-2); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
body.x10 .mk3-d.g{color:var(--x-faint); font-weight:400}
body.x10 .mk3-c :is(.mk3-n, .mk3-v, .mk3-d){text-align:left}   /* 숫자 칸 오른쪽 붙음(바깥 .num 규칙) 막기 — mazip 은 왼쪽 */
body.x10 .mk3-tile .c-up, body.x10 .mk3-sh .c-up, body.x10 .mk3-th .c-up, body.x10 .mk3-th-l .c-up{color:var(--x-up)}
body.x10 .mk3-tile .c-down, body.x10 .mk3-sh .c-down, body.x10 .mk3-th .c-down, body.x10 .mk3-th-l .c-down{color:var(--x-down)}
body.x10 .mk3-c .mk3-sp{display:block; width:100%; height:20px; margin-top:4px; overflow:visible}
body.x10 .mk3-c .mk3-sp-none{display:block; height:20px; margin-top:4px}
body.x10 .mk3-sp polyline{fill:none; stroke-width:1.8px; stroke-linejoin:round; stroke-linecap:round}
body.x10 .mk3-sp .ar{stroke:none; opacity:.12}
body.x10 .mk3-sp.up polyline{stroke:var(--x-up)} body.x10 .mk3-sp.up .ar{fill:var(--x-up)}
body.x10 .mk3-sp.down polyline{stroke:var(--x-down)} body.x10 .mk3-sp.down .ar{fill:var(--x-down)}
body.x10 .mk3-sp.flat polyline{stroke:var(--x-faint)} body.x10 .mk3-sp.flat .ar{fill:var(--x-faint)}
/* 값이 바뀐 칸만 0.9초 깜빡(mazip 그대로) */
body.x10 .mk3-c::after{content:""; position:absolute; inset:0; border-radius:inherit; background:transparent; opacity:0; pointer-events:none}
body.x10 .mk3-c.fl-up::after{background:var(--x-up); animation:mk3-fl .9s ease-out}
body.x10 .mk3-c.fl-down::after{background:var(--x-down); animation:mk3-fl .9s ease-out}
@keyframes mk3-fl{0%{opacity:.16} 100%{opacity:0}}
/* 판 */
body.x10 .mk3-sh-big{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:6px}
body.x10 .mk3-sh-big b{font-size:var(--fs-9); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
body.x10 .mk3-sh-big span{font-size:var(--fs-3); font-weight:700}
body.x10 .mk3-sh-chart{margin-top:12px; background:var(--x-card2); border-radius:var(--r-md); padding:12px 12px 8px}
body.x10 .mk3-sh-chart .mk3-sp{display:block; width:100%; height:120px; overflow:visible}
body.x10 .mk3-sh-chart .mk3-sp-none{height:64px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .mk3-sh-ax{display:flex; justify-content:space-between; margin-top:6px; font-size:var(--fs-1); color:var(--x-muted)}
body.x10 .mk3-sh-say{margin:14px 0 0; font-size:var(--fs-3); line-height:1.55; color:var(--x-text); word-break:keep-all; overflow-wrap:anywhere}
body.x10 .mk3-sh-src{margin-top:12px; display:flex; flex-direction:column; gap:6px}
body.x10 .mk3-sh-src div{display:flex; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--x-line); font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .mk3-sh-src div span:first-child{flex:none}
body.x10 .mk3-sh-src div span:last-child{min-width:0; color:var(--x-text); font-weight:600; text-align:right; overflow-wrap:anywhere; word-break:keep-all}
body.x10 .mk3-sh-src .mk3-src-n{font-size:var(--fs-1); font-weight:400 !important; color:var(--x-muted) !important}
body.x10 .mk3-help{margin:8px 0 0; padding-left:20px; font-size:var(--fs-3); line-height:1.55; color:var(--x-text); word-break:keep-all}
body.x10 .mk3-help li + li{margin-top:6px}
@media (prefers-reduced-motion: reduce){ body.x10 .mk3-hd .live i::after, body.x10 .mk3-c.fl-up::after, body.x10 .mk3-c.fl-down::after{animation:none} body.x10 .mk3-c{transition:none} }

/* ---------- ③ 장세 타일 안 「많이 오른 코인」 · 「거래대금 많은 코인」(mazip .mk-th) ---------- */
body.x10 .mk3-th{margin-top:12px}
body.x10 .mk3-th-h{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .mk3-th-r{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:6px}
body.x10 .mk3-th-b{appearance:none; -webkit-appearance:none; border:0; background:var(--x-card2); border-radius:var(--r-md); padding:10px 10px 9px; min-width:0; min-height:44px;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; color:var(--x-text); font:inherit; cursor:pointer; box-shadow:inset 0 0 0 1px var(--x-rim)}
body.x10 .mk3-th-b .nm{max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.25}   /* [바꿈: mazip 은 … 줄임 → 긴 코인 이름은 두 줄(잘린 글 0)] */
body.x10 .mk3-th-b :is(.nm, .v){font-size:var(--fs-2); font-weight:700; font-variant-numeric:tabular-nums}
body.x10 .mk3-th-b:focus-visible{outline:2px solid var(--x-accent); outline-offset:2px}
body.x10 .mk3-th-l{display:flex; flex-direction:column; margin-top:6px}
body.x10 .mk3-th-m{display:grid; grid-template-columns:26px minmax(0,1fr) auto 70px; align-items:center; gap:8px; min-height:42px; border-top:1px solid var(--x-line); font-size:var(--fs-3)}
body.x10 .mk3-th-m:first-child{border-top:0}
body.x10 .mk3-th-m .rk{color:var(--x-faint); font-size:var(--fs-1)}
body.x10 .mk3-th-m .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
body.x10 .mk3-th-m .v{font-weight:700; text-align:right}
body.x10 .mk3-th-m .a{font-size:var(--fs-1); color:var(--x-muted); text-align:right}
body.x10 .mk3-th-m.mk3-th-hd{min-height:30px; font-size:var(--fs-tag); color:var(--x-faint)}
body.x10 .mk3-th-m.mk3-th-hd .nm, body.x10 .mk3-th-m.mk3-th-hd .v{font-weight:400}
body.x10 .mk3-th-m.mk3-th-hd .a{font-size:var(--fs-tag); color:var(--x-faint); white-space:nowrap}
body.x10 .mk3-fine{margin:10px 0 0; font-size:var(--fs-1); color:var(--x-muted); line-height:1.45; word-break:keep-all}
@media (max-width:359px){ body.x10 .mk3-v{font-size:var(--fs-3)} body.x10 .mk3-th-m{grid-template-columns:22px minmax(0,1fr) auto 62px} }

/* ---------- VRANK1 2026-10-19 (진석 「거래대금 몇 위에서 몇 위로」 · 「김프가 무슨 김프?」) ---------- */
/* ④ 김프·펀딩비 칸 작은 글(업비트↔코인베이스 · 바이낸스) */
body.x10 .mk3-sub{display:block; margin-top:1px; font-size:var(--fs-tag); color:var(--x-faint); line-height:1.25; white-space:normal; overflow-wrap:anywhere; word-break:keep-all; text-align:left}
body.x10 .mk3-c .mk3-n{white-space:normal; overflow-wrap:anywhere; word-break:keep-all; line-height:1.25}   /* VRANK1: 「김프 · 비트코인」·「펀딩비 · 비트코인」 390 폭에서 잘리지 않게 두 줄 [바꿈: mazip 은 한 줄 … 줄임] */
/* ⑤⑥ themeRow 칸 작은 셋째 줄(「거래대금 N위 ↑ M위에서」 · 「K계단 ↑ · 지금 +x%」) [바꿈: mazip 칸은 두 줄 → 한 줄 더] */
body.x10 .mk3-th-b .s{max-width:100%; font-size:var(--fs-1); font-weight:400; color:var(--x-muted); line-height:1.3; overflow-wrap:anywhere; word-break:keep-all; font-variant-numeric:tabular-nums}
body.x10 .mk3-th-b :is(.nm, .v, .s){text-align:left}   /* 숫자 칸 오른쪽 붙음(바깥 .num 규칙) 막기 — mazip 은 왼쪽 */
body.x10 .mk3-th-b .s.c-up{color:var(--x-up)}
body.x10 .mk3-th-b .s b{font-weight:700}
body.x10 .mk3-th-w{appearance:none; -webkit-appearance:none; border:0; width:100%; margin-top:6px; padding:12px 10px; min-height:44px; text-align:left; font:inherit; font-size:var(--fs-2);
  color:var(--x-muted); background:var(--x-card2); border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--x-rim); cursor:pointer}
body.x10 .mk3-th-f{appearance:none; -webkit-appearance:none; border:0; background:none; width:100%; display:block; margin-top:8px;
  padding:6px 2px; min-height:32px; font:inherit; font-size:var(--fs-1); color:var(--x-muted); cursor:pointer; text-align:left; word-break:keep-all; line-height:1.45}
body.x10 .mk3-th-f b{color:var(--x-text); font-weight:700}
body.x10 .mk3-th-w:focus-visible, body.x10 .mk3-th-f:focus-visible{outline:2px solid var(--x-accent); outline-offset:2px}
/* 판: 순위 목록 칸 너비(「123위 → 45위」 · 「78계단 · +12.3%」) */
body.x10 .mk3-th-m.mk3-cl{grid-template-columns:22px minmax(0,1fr) auto auto}
body.x10 .mk3-th-m.mk3-cl .v{font-weight:700}
body.x10 .mk3-th-m.mk3-cl .a b{font-weight:700}
body.x10 .mk3-sh-hd{display:flex; align-items:center; gap:8px}
body.x10 .mk3-sh-hd .x10-q{margin-left:auto; flex:none}
body.x10 .mk3-rule{margin-top:8px; padding:10px 12px; border-radius:var(--r-md); background:var(--x-card2); font-size:var(--fs-1); line-height:1.5; color:var(--x-text); word-break:keep-all}
body.x10 .mk3-rule .h{font-weight:700; color:var(--x-muted)}
body.x10 .mk3-rule ul{margin:4px 0 0; padding-left:18px}
/* 오늘 순위 급상승 기록 */
body.x10 .mk3-wt{margin-top:18px; padding-top:12px; border-top:1px solid var(--x-line)}
body.x10 .mk3-wt-h{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px}
body.x10 .mk3-wt-h .t{font-size:var(--fs-4); font-weight:800; color:var(--x-text)}
body.x10 .mk3-wt-h .n{font-size:var(--fs-2); font-weight:700; color:var(--x-text)}
body.x10 .mk3-wt-m{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:52px; padding:6px 0; border-top:1px solid var(--x-line)}
body.x10 .mk3-wt-m:first-child{border-top:0}
body.x10 .mk3-wt-m .a, body.x10 .mk3-wt-m .b{display:flex; flex-direction:column; gap:2px; min-width:0}
body.x10 .mk3-wt-m .b{align-items:flex-end; text-align:right; flex:none}
body.x10 .mk3-wt-m .nm{font-size:var(--fs-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10 .mk3-wt-m .sub{font-size:var(--fs-1); color:var(--x-muted); white-space:nowrap}
body.x10 .mk3-wt-m .sub b{font-weight:700}
body.x10 .mk3-wt-m .mx{font-size:var(--fs-4); font-weight:800}
body.x10 .mk3-wt-m .g{color:var(--x-faint)}
body.x10 .mk3-wt .c-up, body.x10 .mk3-th-f .c-up, body.x10 .mk3-sh-hd ~ * .c-up{color:var(--x-up)}
body.x10 .mk3-wt .c-down{color:var(--x-down)}
/* FIXM1-12 2026-10-22: 칸마다 받은 때 작은 글(mazip 「15초 전」 꼴) · 30분 넘게 못 받은 칸 = 회색 「멈춤 H:MM」(값·등락도 회색) */
body.x10 .mk3-c .mk3-ago1{display:block; margin-top:2px; font-size:12px; line-height:1.2; color:var(--x-faint); font-weight:400; text-align:left}
body.x10 .mk3-c .mk3-ago1.st{color:var(--x-muted); font-weight:700}
body.x10 .mk3-c.mk3-stale :is(.mk3-v, .mk3-d){color:var(--x-faint) !important}
body.x10 .mk3-c.mk3-stale .mk3-sp{opacity:.35; filter:grayscale(1)}
body.x10 .mk3-hd .live.mk3-stale{color:var(--x-muted); font-weight:700}
body.x10 .mk3-hd .live.mk3-stale i{background:var(--x-faint)}
body.x10 .mk3-hd .live.mk3-stale i::after{display:none}
@media (max-width:480px){ body.x10 .mk3-th-m .nm, body.x10 .mk3-wt-m .nm{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.25} }   /* FIX6(E): 폰 폭에서 순위 급상승 코인 이름 잘림(아이오에…) → 두 줄로 */