/*
 * 메인(/) · 방송 목록(/live) 페이지 CSS.
 * 처음 틀은 시안 docs/superpowers/specs/2026-10-20-main-page-mockups/ 이고,
 * 2026-10-21 다듬기(.superpowers/sdd/2026-10-21-main-polish/brief.md)에서 기존 사이트(/rank/bj · /rank/user · 예전 메인)의 말투로 맞췄다:
 *   글꼴 Pretendard(본문) + GmarketSans(제목 · 큰 숫자), 강조색 #6fb9ff, 별풍선 #facc15, 회색은 공통 테마(900 #191919 · 800 #323232 · 700 #3b3b3b),
 *   카드 = 800 바탕 + 700 테두리, Remix 아이콘, 이름 hover 는 강조색.
 *
 * - 모든 페이지 class 는 .m- 접두어를 쓴다 (공통 Tailwind/common.resource 의 .tag · .more 같은 이름과 겹치지 않게).
 * - 이 파일은 /ver3/dist/main.css (Tailwind 빌드) 뒤에 읽는다 → 같은 우선순위면 여기가 이긴다.
 * - 요소 선택자(h1, section)는 :where(body.m-page) 로 감싸 우선순위를 요소 1개로 둔다.
 * - 움직임: hover 는 150~200ms. 처음 등장(.m-anim .m-rise)은 _head.ejs 가 html 에 m-anim 을 달고 MainLive.reveal 이 화면에 들어올 때 한 번 m-in 을 단다.
 *   prefers-reduced-motion 이면 등장 · 숫자 올라가기 · 크기 변화 없이 색만 바뀐다.
 */

:root{
  color-scheme:dark;
  --bg:#191919; --surface:#202020; --card:#262626; --raise:#323232; --hover:#2d2d2d; --line:#2e2e2e; --line2:#3b3b3b; --line3:#4a4a4a;
  --ink:#f3f4f6; --ink2:#b3b3b3; --ink3:#8c8c8c; --on:#191919;
  --pri:#6fb9ff; --pri-d:rgba(111,185,255,.13);
  --chat:#6fb9ff; --bal:#facc15; --bal-d:rgba(250,204,21,.13); --hot:#ff5f57; --hot-d:rgba(255,95,87,.14); --enter:#4ade80; --user:#c4b5fd;
  --up:#ff5f57; --down:#5aa2ff;
  --gold:#facc15; --silver:#d4d4d8; --bronze:#e0995e;
  --m-nav-h:65px; /* 공통 헤더(common.nav) 높이: py-3 + 로고 40px + border 1px */
  --r:12px; --ease:cubic-bezier(.2,.7,.2,1); --t:.18s;
  --f-body:'Pretendard','Noto Sans KR',system-ui,sans-serif;
  --f-head:'GmarketSansBold','Pretendard',sans-serif;
  --f-mid:'GmarketSansMedium','Pretendard',sans-serif;
  --shadow-t:0 1px 2px rgba(0,0,0,.65);
  /* 기존 메인 .text-shadow 와 같은 0.05em 검은 테두리 — 제목 · 큰 숫자 가독성 */
  --shadow-o:-0.05em -0.05em 0em #000000dd, -0.05em -0.025em 0em #000000dd, -0.05em 0em 0em #000000dd, -0.05em 0.025em 0em #000000dd, -0.05em 0.05em 0em #000000dd, -0.025em -0.05em 0em #000000dd, -0.025em -0.025em 0em #000000dd, -0.025em 0em 0em #000000dd, -0.025em 0.025em 0em #000000dd, -0.025em 0.05em 0em #000000dd, 0em -0.05em 0em #000000dd, 0em -0.025em 0em #000000dd, 0em 0em 0em #000000dd, 0em 0.025em 0em #000000dd, 0em 0.05em 0em #000000dd, 0.025em -0.05em 0em #000000dd, 0.025em -0.025em 0em #000000dd, 0.025em 0em 0.025em #000000dd, 0.025em 0.025em 0.025em #000000dd, 0.025em 0.05em 0.025em #000000dd, 0.05em -0.05em 0em #000000dd, 0.05em -0.025em 0em #000000dd, 0.05em 0em 0.05em #000000dd, 0.05em 0.025em 0.05em #000000dd, 0.05em 0.05em 0.05em #000000dd;
}
html{background:var(--bg)}
body.m-page{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;font-feature-settings:"tnum" 1;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
/* :where 로 우선순위 0 — 공통 footer · 모바일 메뉴의 Tailwind 링크 색(text-gray-400 등)이 이긴다 */
:where(body.m-page) a{color:inherit;text-decoration:none}
body.m-page a:focus-visible,body.m-page button:focus-visible,body.m-page input:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}
.m-wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
:where(body.m-page) [hidden]{display:none!important}

/* ---- 공통 부품 ---- */
.m-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r)}
.m-num{font-family:var(--f-head);font-weight:400;letter-spacing:-.01em}
.m-unit{font-size:.62em;color:var(--ink3);font-weight:500;margin-left:2px;letter-spacing:0;font-family:var(--f-body)}
.m-av{width:36px;height:36px;border-radius:50%;background:var(--raise);flex:none;overflow:hidden;display:grid;place-items:center;color:var(--ink2);font-weight:700;font-size:13px;box-shadow:0 0 0 1px var(--line2)}
.m-av img{width:100%;height:100%;object-fit:cover;display:block}
.m-nm{font-weight:700;transition:color var(--t)}
/* 카드 · 줄: 덮개 링크(.m-cover)가 방송 상세, 그 위의 BJ 사진 · 이름(.m-bjl)이 BJ 상세 */
.m-card{position:relative}
.m-cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
.m-cover:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.m-bjl{position:relative;z-index:2;color:inherit}
.m-bjl.m-nm{display:inline-block;max-width:100%;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-bjl.m-nm:hover,.m-bjl.m-nm:focus-visible{color:var(--pri);text-decoration:underline;text-underline-offset:3px}
.m-bja{display:block;border-radius:50%;flex:none;width:max-content}
.m-bja .m-av{transition:box-shadow var(--t)}
.m-bja:hover .m-av{box-shadow:0 0 0 2px var(--pri)}
.m-sub{font-size:13px;color:var(--ink3)}
/* 순위 숫자 — 1~3위는 금 · 은 · 동 원 */
.m-n{font-family:var(--f-head);color:var(--ink3);font-size:13px;text-align:center}
.m-md{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#191919;font-size:12px;line-height:1;text-shadow:none}
.m-md1{background:var(--gold);box-shadow:0 0 0 3px rgba(250,204,21,.18)}.m-md2{background:var(--silver)}.m-md3{background:var(--bronze)}
/* 문장 강조 조각 (MainView.partsHtml) */
body.m-page em{font-style:normal}
.m-e-bj{color:var(--pri)}
/* 문장 속 BJ 이름 — 사진 + BJ 상세 링크 (MainView.partsHtml) */
.m-bjp{color:var(--pri);font-style:normal;text-decoration:none;white-space:nowrap;transition:color var(--t)}
.m-fi-bj{color:var(--ink2)}
.m-bjp:hover,.m-bjp:focus-visible{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.06em}
.m-bjp-av{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;object-fit:cover;vertical-align:-.16em;margin-right:.22em;background:var(--raise);box-shadow:0 0 0 1px var(--line2)}.m-e-user{color:var(--user)}.m-e-bal{color:var(--bal)}.m-e-chat{color:var(--chat)}.m-e-enter{color:var(--enter)}
.m-e-hot{color:var(--hot)}.m-e-up{color:var(--up)}.m-e-down{color:var(--down)}
.m-e-num{color:var(--ink);font-weight:700}
[class^="m-e-"],[class*=" m-e-"]{font-weight:700}
.m-u{color:var(--up)} .m-d{color:var(--down)}
/* 후원 정보 비공개 사용자 — 블라인드 칩 (MainView.privHtml). 서버가 이름을 보내지 않으므로 칩은 고정 모양:
   왼쪽은 이름 자리를 가린 모자이크(회색 픽셀 + 살짝 흐림), 오른쪽은 자물쇠 + '비공개'. 툴팁 = title */
/* 비공개 칩 .m-priv 는 /ver3/css/priv.css (메인 · 랭킹 페이지가 같이 쓴다) */
.m-rk .m-rk-nm .m-priv{vertical-align:middle}
.m-av.m-av-priv{color:var(--ink3);font-size:12px;background:repeating-conic-gradient(#3f3f3f 0 25%,#363636 0 50%) 0 0/6px 6px}

/* ---- 공지 (nav 는 공통 common.nav.ejs) ---- */
.m-notice{border-bottom:1px solid var(--line);font-size:14px;background:var(--surface)}
.m-notice .m-wrap{display:flex;align-items:center;gap:14px;height:42px}
.m-notice strong{font-size:12px;color:var(--pri);font-weight:700;background:var(--pri-d);padding:2px 8px;border-radius:999px;white-space:nowrap}
.m-notice strong i{margin-right:3px}
.m-notice a.m-nt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);transition:color var(--t)}
.m-notice a.m-nt:hover{color:var(--pri);text-decoration:underline;text-underline-offset:3px}
.m-notice time,.m-notice .m-nall{white-space:nowrap}
.m-notice time{color:var(--ink3);font-size:13px}
.m-notice .m-nall{color:var(--ink2);font-size:13px;display:inline-flex;align-items:center;transition:color var(--t)}
.m-notice .m-nall:hover{color:var(--pri)}

/* ---- hero ---- */
.m-hero{padding-top:40px}
.m-hero-top{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:end}
.m-hero-top.m-wide{grid-template-columns:minmax(0,1fr) 460px}
.m-asof{color:var(--ink3);font-size:13px;display:flex;gap:8px;flex-wrap:wrap;row-gap:4px}
.m-asof>span{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.m-asof .m-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px var(--hot-d);animation:m-blink 2s ease-in-out infinite}
@keyframes m-blink{50%{opacity:.45}}
:where(body.m-page) h1{font-family:var(--f-head);font-weight:400;font-size:40px;line-height:1.32;letter-spacing:-.02em;margin:16px 0 12px;max-width:22ch;text-shadow:var(--shadow-o);word-break:keep-all;text-wrap:balance}
.m-lede{color:var(--ink2);font-size:16px;max-width:52ch;margin:0;text-wrap:pretty}
/* 지금 숫자 — 있는 칸만 (m-n1 한 칸 · m-n2 두 칸 · m-n3 한 줄 세 칸 · m-n4 2×2) */
.m-now{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;margin:0}
.m-now.m-n1{grid-template-columns:1fr}.m-now.m-n3{grid-template-columns:repeat(3,1fr)}
.m-now>div{background:var(--card);padding:14px 16px 12px;transition:background var(--t);min-width:0;container-type:inline-size}
.m-now>div:hover{background:var(--hover)}
.m-now dt{font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:5px;white-space:nowrap}
.m-now dt i{font-size:14px}
.m-now dd{margin:2px 0 0;font-size:26px;line-height:1.3;white-space:nowrap}
.m-now dd small.m-cmp{display:block;font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:0;font-family:var(--f-body);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 비교 줄은 한 줄 — 칸이 좁으면 '지난주 수요일 대비' → '지난주 대비' (m-cmp-l / m-cmp-s, main.js cmpLine) */
.m-cmp-s{display:none}
@container (max-width:200px){.m-cmp-l{display:none}.m-cmp-s{display:inline}}
.m-now .m-k-view dt i{color:var(--enter)}.m-now .m-k-uniq dt i,.m-now .m-k-chat dt i{color:var(--chat)}.m-now .m-k-bal dt i{color:var(--bal)}
.m-now .m-k-bal .m-num{color:var(--bal)}

/* 타임라인 */
.m-tl{position:relative;margin-top:34px;height:220px;cursor:crosshair;touch-action:pan-y}
.m-tl svg{width:100%;height:100%;display:block;overflow:visible}
.m-tl-lab{position:absolute;top:89.5%;font-size:11px;line-height:1;color:var(--ink3);transform:translateX(5px);white-space:nowrap;pointer-events:none}
.m-tl-lab.m-tl-now{transform:translateX(-50%);color:var(--ink);font-weight:700}
.m-tl-guide{position:absolute;top:10.9%;height:77.3%;width:0;border-left:1px dashed var(--ink3);pointer-events:none;opacity:0;transition:opacity .12s}
.m-tl-tip{position:absolute;top:0;z-index:3;pointer-events:none;background:#111;border:1px solid var(--line3);border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:0;transition:opacity .12s}
.m-tl-tip b{display:block;font-family:var(--f-mid);font-weight:400;color:var(--ink);font-size:12px;margin-bottom:2px}
.m-tl-tip span{display:block;color:var(--ink2)}
.m-tl-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.m-tl.m-tip-on .m-tl-guide,.m-tl.m-tip-on .m-tl-tip{opacity:1}
.m-pin{position:absolute;transform:translate(-50%,0);background:none;border:0;padding:0;cursor:pointer;z-index:2}
.m-pin b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--on);font-size:12px;font-weight:800;box-shadow:0 0 0 3px var(--bg);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.m-pin.m-hot b{background:var(--hot);color:#fff}.m-pin.m-bal b{background:var(--bal)}.m-pin.m-enter b{background:var(--enter)}
.m-pin[aria-pressed="true"] b{box-shadow:0 0 0 3px var(--bg),0 0 0 5px currentColor}
.m-pin.m-hot{color:var(--hot)}.m-pin.m-bal{color:var(--bal)}.m-pin.m-enter{color:var(--enter)}.m-pin{color:var(--ink)}
.m-pin:hover b,.m-pin:focus-visible b{transform:scale(1.18)}
.m-pin::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#111;border:1px solid var(--line3);color:var(--ink);font-size:12px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;display:none;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.m-pin:hover::after,.m-pin:focus-visible::after{display:block}
/* 오른쪽 · 왼쪽 끝 핀은 풍선말을 안쪽으로 (가려져 있을 때는 display:none 이라 가로 스크롤을 만들지 않는다) */
.m-pin.m-pin-r::after{left:auto;right:-6px;transform:none}.m-pin.m-pin-l::after{left:-6px;transform:none}
.m-legend{display:flex;gap:20px;font-size:13px;color:var(--ink2);padding:10px 0 0;flex-wrap:wrap;row-gap:6px}
.m-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:3px}
.m-legend i.m-bar{width:5px;height:11px;vertical-align:-1px}
.m-legend i.m-dash{background:none;border-top:2px dashed var(--ink3);height:0}
.m-legend .m-aside{margin-left:auto;color:var(--ink3);white-space:nowrap}
.m-legend span{white-space:nowrap}

/* 이야기 — 칸 수 = 이야기 수 (m-s1 ~ m-s4) */
.m-stories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.m-stories.m-s1{grid-template-columns:1fr}.m-stories.m-s2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-stories.m-s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-stories button{all:unset;box-sizing:border-box;cursor:pointer;padding:14px 16px 16px;position:relative;background:var(--card);border:1px solid var(--line2);border-radius:10px;transition:background var(--t),border-color var(--t),transform var(--t) var(--ease)}
.m-stories button:hover,.m-stories button:focus-visible{background:var(--hover);border-color:var(--line3)}
.m-stories button:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.m-stories button[aria-pressed="true"]{border-color:var(--pri);background:linear-gradient(180deg,var(--pri-d),transparent 70%),var(--card)}
.m-stories .m-w{font-size:13px;color:var(--ink3);display:flex;gap:8px;align-items:center;min-width:0}
.m-stories .m-w span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-stories .m-w b{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--on);font-size:11px;font-family:var(--f-head);font-weight:400}
.m-stories .m-hot .m-w b{background:var(--hot);color:#fff}.m-stories .m-bal .m-w b{background:var(--bal)}.m-stories .m-enter .m-w b{background:var(--enter)}
.m-stories h3{font-size:15px;line-height:1.45;margin:8px 0 0;font-weight:600;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.m-stories button[aria-pressed="true"] h3,.m-stories button:hover h3{color:var(--ink)}

/* ---- section heads (아이콘 + GmarketSans 제목 + 흐린 설명 + 오른쪽 링크) ---- */
:where(body.m-page) section{padding-top:60px}
.m-sh{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap;row-gap:4px}
.m-sh h2{font-family:var(--f-mid);font-weight:400;font-size:21px;letter-spacing:-.01em;margin:0;text-shadow:var(--shadow-o);display:flex;align-items:center;gap:8px}
.m-sh h2 i{font-size:19px;color:var(--ink3);text-shadow:none}
.m-sh h2{white-space:nowrap}
.m-sh p{margin:0;color:var(--ink3);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.m-sh a{margin-left:auto;white-space:nowrap;font-size:14px;color:var(--ink2);display:inline-flex;align-items:center;transition:color var(--t)}
.m-sh a i{font-size:18px;transition:transform var(--t) var(--ease)}
.m-sh a:hover{color:var(--pri)}
.m-sh a:hover i{transform:translateX(2px)}

/* ---- surge: 하나면 작은 카드, 2~4면 lead + rows ---- */
.m-surge{display:grid;grid-template-columns:1.25fr 1fr;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.m-lead{display:block;padding:22px 26px;border-right:1px solid var(--line2);transition:background var(--t)}
.m-lead:hover,.m-lead:has(>.m-cover:focus-visible){background:var(--hover)}
.m-lead .m-who{display:flex;align-items:center;gap:12px}
.m-lead .m-who>div,.m-srow>div{min-width:0}
.m-lead .m-sub,.m-srow .m-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-lead .m-fig{display:flex;align-items:baseline;gap:14px;margin:18px 0 4px;flex-wrap:wrap;row-gap:6px}
.m-lead .m-fig strong{font-family:var(--f-head);font-weight:400;font-size:40px;letter-spacing:-.02em;line-height:1;color:var(--hot);white-space:nowrap;text-shadow:var(--shadow-o)}
.m-lead .m-fig strong.m-bal{color:var(--bal)}.m-lead .m-fig strong.m-chat{color:var(--chat)}.m-lead .m-fig strong.m-enter{color:var(--enter)}
.m-lead .m-fig span{color:var(--ink2);white-space:nowrap}
.m-lead svg{display:block;width:100%;height:96px;margin-top:14px}
.m-lead .m-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);margin-top:4px}
.m-srow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);transition:background var(--t)}
.m-srow:last-child{border-bottom:0}
.m-srow:hover,.m-srow:has(>.m-cover:focus-visible){background:var(--hover)}
.m-srow .m-k{text-align:right}
.m-srow .m-k strong{display:block;font-family:var(--f-head);font-weight:400;font-size:17px;letter-spacing:-.01em}
.m-srow .m-k span{font-size:12px;color:var(--ink3);white-space:nowrap}
.m-k.m-hot strong{color:var(--hot)}.m-k.m-bal strong{color:var(--bal)}.m-k.m-chat strong{color:var(--chat)}.m-k.m-enter strong{color:var(--enter)}
.m-surge.m-one{grid-template-columns:1fr}
.m-surge.m-one .m-lead{border-right:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(140px,300px);gap:28px;align-items:center;padding:18px 24px}
.m-surge.m-one .m-lead .m-fig{margin:0;flex-direction:column;align-items:flex-end;gap:4px}
.m-surge.m-one .m-lead .m-fig strong{font-size:32px}
.m-surge.m-one .m-lead .m-fig span{font-size:13px}
.m-surge.m-one .m-lead svg{height:52px;margin:0}
.m-surge.m-one .m-lead .m-axis{display:none}

/* ---- most watched + feed ---- */
.m-two{display:grid;grid-template-columns:1.7fr 1fr;gap:32px}
.m-two.m-one,.m-pair.m-one{grid-template-columns:1fr}
.m-two>*,.m-pair>*,.m-top3>*{min-width:0}
.m-top3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.m-th{border-radius:8px;background:var(--raise);aspect-ratio:16/9;position:relative;overflow:hidden;transition:box-shadow var(--t)}
.m-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.m-th .m-vw{white-space:nowrap;position:absolute;left:8px;top:8px;background:rgba(0,0,0,.68);color:#fff;font-size:12px;padding:1px 7px;border-radius:4px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.m-th .m-vw i{color:#fff;opacity:.75;font-size:11px}
.m-th .m-tm{white-space:nowrap;position:absolute;right:8px;top:8px;background:rgba(0,0,0,.68);color:#fff;font-size:11px;padding:0 6px;border-radius:4px}
.m-th .m-wave{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));pointer-events:none}
.m-th .m-wave svg polyline{filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.m-th .m-wave svg{width:100%;height:100%;display:block}
.m-t3{display:block;border-radius:10px}
.m-ct3{margin-top:10px;display:grid;grid-template-columns:auto 28px minmax(0,1fr);gap:8px;align-items:center}
.m-ct3 .m-av{width:28px;height:28px}
.m-ct3>div{min-width:0}
.m-ct3 .m-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.m-ct3 .m-t{font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-t3:hover .m-th,.m-lc:hover .m-th,.m-lr:hover .m-th,.m-t3:has(>.m-cover:focus-visible) .m-th,.m-lc:has(>.m-cover:focus-visible) .m-th,.m-lr:has(>.m-cover:focus-visible) .m-th{box-shadow:0 0 0 2px var(--pri)}
.m-t3:hover .m-th img,.m-lc:hover .m-th img,.m-lr:hover .m-th img,.m-t3:has(>.m-cover:focus-visible) .m-th img,.m-lc:has(>.m-cover:focus-visible) .m-th img,.m-lr:has(>.m-cover:focus-visible) .m-th img{transform:scale(1.045)}
.m-rows{margin-top:16px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:4px 0}
.m-r{display:grid;grid-template-columns:28px 24px minmax(0,1fr) 96px 78px;gap:12px;align-items:center;padding:9px 16px;font-size:14px;transition:background var(--t)}
.m-r+.m-r{border-top:1px solid var(--line)}
.m-r:hover,.m-r:has(>.m-cover:focus-visible){background:var(--hover)}
.m-r .m-av{width:24px;height:24px;font-size:11px}
.m-r .m-r-main{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-r .m-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-r .m-v{text-align:right;font-size:15px;white-space:nowrap}
.m-r .m-v.m-bb .m-num{color:var(--bal)}
.m-r svg{width:96px;height:22px;display:block}

.m-feed{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:4px 0;overflow:hidden}
.m-fi{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:10px 16px;font-size:14px;align-items:baseline;transition:background var(--t)}
.m-fi+.m-fi{border-top:1px solid var(--line)}
.m-fi:hover,.m-fi:focus-within{background:var(--hover)}
.m-fi time{color:var(--ink3);font-size:12px;white-space:nowrap}
.m-fi>div{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-fi .m-sub{transition:color var(--t)}
.m-fi .m-sub:hover{color:var(--pri);text-decoration:underline;text-underline-offset:3px}
.m-fi .m-amt{font-family:var(--f-head);color:var(--bal);font-size:15px;white-space:nowrap}
.m-fi .m-amt small{font-family:var(--f-body);font-size:11px;color:var(--ink3);margin-left:2px}
.m-fi.m-big .m-amt{font-size:18px}
.m-fi.m-big{box-shadow:inset 3px 0 0 var(--bal);background:linear-gradient(90deg,var(--bal-d),transparent 60%)}
.m-fi.m-new{animation:m-in .6s ease-out}
@keyframes m-in{from{opacity:0;transform:translateY(-4px);background:var(--bal-d)}}

/* ---- whales + rank ---- */
.m-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.m-box{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:6px 0}
.m-wh{display:grid;grid-template-columns:24px minmax(0,120px) minmax(0,1fr) 52px;gap:12px;align-items:center;padding:10px 16px;font-size:14px;transition:background var(--t)}
.m-wh+.m-wh{border-top:1px solid var(--line)}
.m-wh:hover,.m-wh:has(>.m-cover:focus-visible){background:var(--hover)}
.m-wh .m-av{width:24px;height:24px;font-size:11px}
.m-wh .m-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-wh .m-bar{height:8px;background:var(--raise);border-radius:4px;overflow:hidden}
.m-wh .m-bar i{display:block;height:100%;background:linear-gradient(90deg,#c99a06,var(--bal));border-radius:4px;transform-origin:left;transition:width .4s var(--ease)}
.m-wh .m-c{text-align:right;font-size:15px;white-space:nowrap}
.m-note{font-size:13px;color:var(--ink3);margin-top:10px;display:flex;align-items:center;gap:5px}
.m-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);padding:0 8px}
.m-tabs button{border:0;background:none;padding:12px 10px 11px;font-size:14px;font-weight:600;color:var(--ink3);cursor:pointer;position:relative;white-space:nowrap;transition:color var(--t)}
.m-tabs button:hover{color:var(--ink)}
.m-tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:transparent;transition:background var(--t)}
.m-tabs button:hover::after{background:rgba(111,185,255,.45)}
.m-tabs button[aria-selected="true"]{color:var(--pri)}
.m-tabs button[aria-selected="true"]::after{background:var(--pri)}
.m-rk{display:grid;grid-template-columns:24px 24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 16px;font-size:14px;transition:background var(--t)}
.m-rk+.m-rk{border-top:1px solid var(--line)}
.m-rk:hover,.m-rk:focus-within{background:var(--hover)}
.m-rk .m-av{width:24px;height:24px;font-size:11px}
.m-rk .m-rk-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-rk .m-rk-nm b,.m-rk b.m-rk-nm{font-weight:600;transition:color var(--t)}
.m-rk a.m-rk-nm:hover b,.m-rk a.m-rk-nm:focus-visible b{color:var(--pri)}
.m-rk .m-v{font-size:15px;white-space:nowrap;text-align:right}
.m-rk .m-v.m-vb .m-num{color:var(--bal)}.m-rk .m-v.m-vc .m-num{color:var(--chat)}
.m-rk .m-v.m-u .m-num{color:var(--up)}.m-rk .m-v.m-d .m-num{color:var(--down)}

/* ---- records ---- */
.m-rec{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px}
.m-rec.m-c2{grid-template-columns:1.6fr 1fr}.m-rec.m-c1{grid-template-columns:1fr}
.m-rec>div{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:18px 20px 18px;transition:border-color var(--t),background var(--t)}
.m-rec>div:hover{border-color:var(--line3);background:var(--hover)}
.m-rec .m-k{font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:6px;white-space:nowrap}
.m-rec .m-k i{font-size:15px}
.m-rec .m-k .ri-vip-crown-line{color:var(--bal)}.m-rec .m-k .ri-medal-line{color:var(--pri)}.m-rec .m-k .ri-scales-3-line{color:var(--ink2)}
.m-rec .m-h{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:8px 0 6px;line-height:1.45;text-wrap:pretty}
.m-rec>div:first-child .m-h{font-size:22px}
/* 제목 · 큰 숫자 테두리 (기존 메인 text-shadow) */
.m-now dd .m-num,.m-rec .m-h,.m-pc .m-amt .m-num,.m-ph h1{text-shadow:var(--shadow-o)}
/* 방송 목록 · 썸네일 글자 테두리 */
.m-lc .m-t,.m-lc .m-sub b,.m-lr .m-t,.m-lr .m-bb,.m-lr .m-v,.m-t3 .m-nm,.m-th .m-vw,.m-th .m-tm,.m-pc .m-nm{text-shadow:var(--shadow-o)}
.m-rec p{margin:0;color:var(--ink2);font-size:14px;max-width:46ch;text-wrap:pretty}
/* 문장 속 강조 조각(이름 · 숫자)은 한 덩어리로 — 숫자와 단위가 갈라지지 않는다 */
/* 숫자 조각만 한 줄로 (40.3만 개 가 꺾이지 않게). BJ · 사용자 이름 조각은 꺾일 수 있다 — 긴 이름이 390px 에서 넘치지 않게 */
.m-rec .m-h em:is(.m-e-bal,.m-e-num,.m-e-chat,.m-e-enter),.m-rec p em:is(.m-e-bal,.m-e-num,.m-e-chat,.m-e-enter),.m-lede em:is(.m-e-bal,.m-e-num,.m-e-chat,.m-e-enter),.m-stories h3 em:is(.m-e-bal,.m-e-num,.m-e-chat,.m-e-enter){white-space:nowrap}
.m-rec .m-h em:is(.m-e-bj,.m-e-user),.m-rec p em:is(.m-e-bj,.m-e-user),.m-lede em:is(.m-e-bj,.m-e-user),.m-stories h3 em:is(.m-e-bj,.m-e-user){overflow-wrap:anywhere}

/* ---- 방송 목록 ---- */
/* 목록 막대 — 글자는 줄바꿈하지 않고, 안 들어가면 줄 단위로 내리거나 그 줄 안에서 가로로 민다 (.m-hs) */
.m-bar2{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"sort filt . view";align-items:center;gap:10px 12px;margin-bottom:18px;font-size:14px}
.m-bar2>.m-hs-sort{grid-area:sort}.m-bar2>.m-filt{grid-area:filt;justify-self:start}.m-bar2>.m-view{grid-area:view}.m-bar2>.m-sp{display:none}
.m-sort,.m-view{display:flex;gap:6px;flex-wrap:nowrap}
.m-sort button,.m-view button,.m-filt,.m-chk,.m-llnote{white-space:nowrap;flex:none}
.m-hs{display:flex;align-items:center;gap:10px;min-width:0}
.m-sort button,.m-view button{border:1px solid transparent;background:var(--raise);padding:6px 12px;border-radius:8px;color:var(--ink2);font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background var(--t),color var(--t),border-color var(--t)}
.m-sort button:hover,.m-view button:hover{background:var(--line2);color:var(--ink)}
.m-sort button[aria-pressed="true"],.m-view button[aria-pressed="true"]{background:var(--pri-d);color:var(--pri);border-color:rgba(111,185,255,.35)}
.m-filt{border:1px solid var(--line2);background:none;border-radius:8px;padding:6px 12px;color:var(--ink2);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color var(--t),color var(--t)}
.m-filt:hover{border-color:var(--pri);color:var(--pri)}
.m-bar2 .m-sp{flex:1}
.m-llnote{color:var(--ink3);font-size:12px}
.m-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px}
.m-lc{display:block;min-width:0;border-radius:10px}
.m-lc .m-meta{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;margin-top:10px}
.m-lc .m-meta>div{min-width:0}
.m-lc .m-av{width:32px;height:32px}
.m-lc .m-t{font-weight:600;font-size:14px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t)}
.m-lc:hover .m-t,.m-lc:has(>.m-cover:focus-visible) .m-t{color:var(--pri)}
.m-lc .m-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.m-lc .m-sub b{color:var(--bal);font-family:var(--f-head);font-weight:400}
.m-lc .m-tags{display:flex;gap:6px;margin-top:6px;font-size:11px;color:var(--ink2);flex-wrap:wrap}
.m-lc .m-tags span{background:var(--raise);padding:1px 7px;border-radius:4px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.m-lc .m-tags .m-hot{color:var(--hot);font-weight:700;background:var(--hot-d)}
.m-lc .m-tags .m-adult{color:#fca5a5}
.m-more{display:flex;justify-content:center;margin-top:30px}
.m-ghost{border:1px solid var(--line2);background:none;color:var(--ink);font-weight:600;padding:10px 22px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--t),border-color var(--t),color var(--t)}
.m-ghost:hover{background:var(--raise);border-color:var(--line3)}
.m-empty{margin:0;padding:28px 0;color:var(--ink3);font-size:14px;text-align:center;border-top:1px solid var(--line)}
.m-listv{display:none;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.m-lr{display:grid;grid-template-columns:28px 112px minmax(0,1fr) 110px 100px 80px;gap:16px;align-items:center;padding:9px 16px;font-size:14px;transition:background var(--t)}
.m-lr+.m-lr{border-top:1px solid var(--line)}
.m-lr:not(.m-hd):hover,.m-lr:not(.m-hd):has(>.m-cover:focus-visible){background:var(--hover)}
.m-lr:hover .m-t,.m-lr:has(>.m-cover:focus-visible) .m-t{color:var(--pri)}
.m-lr .m-th{border-radius:6px}
.m-lr .m-bb{text-align:right;color:var(--bal);font-family:var(--f-head);white-space:nowrap}
.m-lr .m-v{text-align:right;white-space:nowrap;font-family:var(--f-head)}
.m-lr svg{width:110px;height:24px;display:block}
.m-lr.m-hd{font-size:12px;color:var(--ink3);padding:9px 16px;background:var(--surface)}
.m-lr.m-hd span:nth-child(n+4){text-align:right}
.m-lr-main{min-width:0}
.m-lr .m-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--t)}
.m-lr .m-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-nochat .m-lr{grid-template-columns:28px 112px minmax(0,1fr) 100px 80px}
.m-nochat .m-lr .m-ck,.m-nochat .m-lr.m-hd span:nth-child(4){display:none}
/* 시청자 수를 모르면 (크롤러 없음) 시청자 열을 뺀다 */
.m-noview .m-lr{grid-template-columns:28px 112px minmax(0,1fr) 110px 100px}
.m-noview.m-nochat .m-lr{grid-template-columns:28px 112px minmax(0,1fr) 100px}
.m-noview .m-lr .m-v,.m-noview .m-lr.m-hd span:nth-child(6){display:none}
body.m-as-list .m-grid{display:none}body.m-as-list .m-listv{display:block}

/* ---- CTA ---- */
.m-cta{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.m-cp{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:28px 28px 0;display:grid;grid-template-rows:auto 1fr;overflow:hidden;transition:border-color var(--t),transform var(--t) var(--ease)}
.m-cp:hover,.m-cp:focus-within{border-color:var(--line3)}
.m-cp h3{font-family:var(--f-mid);font-weight:400;font-size:22px;letter-spacing:-.01em;margin:0 0 10px;line-height:1.35;text-shadow:var(--shadow-o)}
.m-cp h3 i{color:var(--pri);margin-right:6px}
.m-cp:nth-child(2) h3 i{color:var(--bal)}
.m-cp>div>p{margin:0 0 20px;color:var(--ink2);max-width:42ch}
.m-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.m-b1{border:0;font-weight:700;padding:10px 16px;border-radius:8px;cursor:pointer;background:var(--pri);color:#0b1b2b;display:inline-flex;align-items:center;gap:6px;transition:filter var(--t),transform var(--t) var(--ease)}
.m-b1:hover{filter:brightness(1.08)}
.m-b1.m-y{background:var(--bal);color:var(--on)}
.m-shot{align-self:end;background:var(--bg);border:1px solid var(--line2);border-bottom:0;border-radius:8px 8px 0 0;padding:12px 14px 6px;font-size:13px;transition:transform .3s var(--ease)}
.m-cp:hover .m-shot{transform:translateY(-3px)}
.m-shot .m-hd{display:flex;justify-content:space-between;color:var(--ink3);font-size:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.m-shot .m-ln{display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.m-shot .m-ln:last-child{border-bottom:0}
.m-shot .m-tag{font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}
.m-tg1{background:var(--bal-d);color:var(--bal)}.m-tg2{background:var(--pri-d);color:var(--chat)}.m-tg3{background:var(--hot-d);color:var(--hot)}
.m-shot .m-amt{color:var(--bal);font-family:var(--f-head)}

/* ---- 방송 목록 (/live) ---- */
.m-ph{padding-top:36px}
.m-ph h1{font-size:32px;margin:0 0 8px;max-width:none;display:flex;align-items:center;gap:10px}
.m-ph h1 i{font-size:28px;color:var(--hot);text-shadow:none}
.m-ph p{margin:0;color:var(--ink2)}
.m-ph p b{color:var(--ink);font-family:var(--f-head);font-weight:400}
.m-ph p b.m-e-enter{color:var(--enter)}
.m-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.m-pc{display:block;padding:14px 14px 14px;background:var(--card);border:1px solid var(--line2);border-radius:10px;min-width:0;transition:background var(--t),border-color var(--t)}
.m-pc:hover,.m-pc:has(>.m-cover:focus-visible){background:var(--hover);border-color:var(--line3)}
.m-pc .m-pos{display:flex;align-items:center;gap:8px}
.m-pc .m-pos .m-n{width:22px}
.m-pc .m-av{width:28px;height:28px;font-size:12px}
.m-pc .m-pc-nm{margin-top:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-pc .m-amt{font-size:20px;color:var(--bal);margin-top:2px;white-space:nowrap}
.m-pc .m-amt .m-num{color:var(--bal)}
.m-pc .m-sub{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-tool{position:sticky;top:var(--m-nav-h);z-index:4;background:rgba(25,25,25,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);margin:36px 0 24px}
/* 1줄 검색 · 보기 전환 / 2줄 정렬 + 체크 칩 */
.m-tool .m-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q view" "ctl ctl";gap:10px 14px;align-items:center;font-size:14px;padding-top:10px;padding-bottom:10px}
.m-tool .m-fsearch{grid-area:q;width:min(100%,340px)}
.m-tool .m-view{grid-area:view}
.m-ctl{grid-area:ctl;display:flex;align-items:center;gap:20px;min-width:0}
.m-chips{gap:12px}
.m-fsearch{display:flex;align-items:center;border:1px solid var(--line2);border-radius:8px;padding:0 12px;height:34px;width:230px;color:var(--ink3);font-size:13px;box-sizing:border-box}
input.m-fsearch{background:var(--surface);color:var(--ink);font:inherit;font-size:13px;outline:none;transition:border-color var(--t)}
input.m-fsearch::placeholder{color:var(--ink3)}
input.m-fsearch:hover{border-color:var(--line3)}
input.m-fsearch:focus{border-color:var(--pri)}
.m-chk{display:flex;gap:6px;align-items:center;color:var(--ink2);cursor:pointer;font-size:13px;border:0;background:none;padding:4px 2px;border-radius:6px;transition:color var(--t)}
.m-chk:hover{color:var(--ink)}
.m-chk i{width:15px;height:15px;border:1.5px solid var(--line3);border-radius:3px;display:inline-block;position:relative;transition:background var(--t),border-color var(--t)}
.m-chk:hover i{border-color:var(--pri)}
.m-chk[aria-pressed="true"]{color:var(--ink)}
.m-chk[aria-pressed="true"] i{background:var(--pri);border-color:var(--pri)}
.m-chk[aria-pressed="true"] i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--on);border-width:0 2px 2px 0;transform:rotate(45deg)}
.m-chk[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.m-chk[aria-disabled="true"]:hover{color:var(--ink2)}
.m-chk[aria-disabled="true"]:hover i{border-color:var(--line3)}

/* ---- 처음 등장 (html.m-anim 은 _head.ejs 가 단다 · m-in 은 MainLive.reveal) ---- */
@keyframes m-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.m-anim .m-rise{opacity:0}
.m-anim .m-rise.m-in{animation:m-rise .46s var(--ease) both;animation-delay:var(--d,0ms)}
/* 한 번만: m-done 뒤에는 hidden → 보임으로 바뀌어도(60초 갱신) 다시 움직이지 않는다 */
.m-anim .m-rise.m-done{animation:none;opacity:1}
/* 묶음 안 카드들은 한 번 더 조금씩 늦게. m-done 이 붙을 때 아직 움직이는 카드는 m-st 를 받아 끝까지 움직이고
   (같은 animation 값이라 다시 시작하지 않는다), animationend 에 m-st 를 뗀다. 그 뒤 새로 그린 카드는 움직이지 않는다 */
.m-anim .m-rise.m-in:not(.m-done) .m-stag>*,.m-anim .m-stag>.m-st{animation:m-rise .42s var(--ease) both}
.m-anim .m-rise.m-in:not(.m-done) .m-stag>:nth-child(2),.m-anim .m-stag>.m-st:nth-child(2){animation-delay:calc(var(--d,0ms) + 60ms)}
.m-anim .m-rise.m-in:not(.m-done) .m-stag>:nth-child(3),.m-anim .m-stag>.m-st:nth-child(3){animation-delay:calc(var(--d,0ms) + 120ms)}
.m-anim .m-rise.m-in:not(.m-done) .m-stag>:nth-child(4),.m-anim .m-stag>.m-st:nth-child(4){animation-delay:calc(var(--d,0ms) + 180ms)}
.m-anim .m-rise.m-in:not(.m-done) .m-stag>:nth-child(5),.m-anim .m-stag>.m-st:nth-child(5){animation-delay:calc(var(--d,0ms) + 240ms)}
.m-anim .m-rise.m-in:not(.m-done) .m-stag>:nth-child(6),.m-anim .m-stag>.m-st:nth-child(6){animation-delay:calc(var(--d,0ms) + 300ms)}
.m-anim .m-rise.m-in:not(.m-done) .m-stag>:nth-child(n+7),.m-anim .m-stag>.m-st:nth-child(n+7){animation-delay:calc(var(--d,0ms) + 340ms)}
@media print{.m-anim .m-rise,.m-anim .m-rise .m-stag>*{opacity:1;animation:none;transform:none}}
/* 타임라인 그려지기 (첫 렌더 한 번) — 채팅 선은 왼쪽부터, 별풍선 막대는 바닥에서 */
@keyframes m-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.m-draw .m-tl-lines{animation:m-wipe 1s ease-out both}
.m-draw .m-tl-bars rect{transform-box:fill-box;transform-origin:50% 100%;animation:m-grow .6s var(--ease) both;animation-delay:.15s}

@media (prefers-reduced-motion:reduce){
  .m-anim .m-rise{opacity:1}
  .m-anim .m-rise.m-in,.m-anim .m-rise.m-in .m-stag>*,.m-anim .m-stag>.m-st,.m-draw .m-tl-lines,.m-draw .m-tl-bars rect,.m-fi.m-new,.m-asof .m-dot{animation:none}
  .m-th img,.m-pin b,.m-sh a i,.m-shot,.m-b1{transition:none}
  .m-t3:hover .m-th img,.m-lc:hover .m-th img,.m-lr:hover .m-th img,.m-pin:hover b,.m-pin:focus-visible b,.m-sh a:hover i,.m-cp:hover .m-shot{transform:none}
}

/* ---- 반응형 ---- */
/* 가로로 미는 줄: 스크롤 막대는 숨기고 오른쪽 끝을 흐리게 (끝까지 밀면 여백 24px 이 흐린 자리를 받는다) */
@media (max-width:1000px){
  .m-ctl{overflow-x:auto;scrollbar-width:none;padding:3px 28px 3px 3px;margin:-3px -3px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .m-ctl::-webkit-scrollbar{display:none}
  .m-ctl>.m-hs{flex:none}
  .m-bar2{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sort sort" "filt view"}
}
@media (max-width:980px){
  .m-hero-top,.m-hero-top.m-wide,.m-two,.m-pair,.m-surge,.m-cta{grid-template-columns:1fr}
  .m-hero-top{gap:18px}
  .m-lead{border-right:0;border-bottom:1px solid var(--line2)}
  .m-stories,.m-stories.m-s3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-stories.m-s1{grid-template-columns:1fr}
  .m-rec,.m-rec.m-c2,.m-rec.m-c1{grid-template-columns:1fr}
  .m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(body.m-page) h1{font-size:30px}
  .m-notice time{display:none}
  .m-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .m-surge.m-one .m-lead{grid-template-columns:minmax(0,1fr) auto}
  .m-surge.m-one .m-lead svg{grid-column:1/-1;height:48px}
}
@media (max-width:760px){
  .m-lr,.m-nochat .m-lr,.m-noview .m-lr,.m-noview.m-nochat .m-lr{grid-template-columns:24px 90px minmax(0,1fr) 64px}
  .m-lr .m-ck,.m-lr.m-hd span:nth-child(4),.m-lr.m-hd span:nth-child(5){display:none}
  .m-lr .m-bb{display:none}
  .m-noview .m-lr .m-bb{display:block}
  .m-noview .m-lr.m-hd span:nth-child(5){display:block}
  .m-tool .m-fsearch{width:100%}
}
@media (max-width:560px){
  .m-wrap{padding-left:16px;padding-right:16px}
  .m-top3,.m-grid{grid-template-columns:1fr}
  .m-r{grid-template-columns:24px 24px minmax(0,1fr) 72px;padding:9px 12px}.m-r svg{display:none}
  .m-tl{height:170px}
  .m-stories,.m-stories.m-s2,.m-stories.m-s3{grid-template-columns:1fr}
  .m-now.m-n3{grid-template-columns:1fr 1fr}.m-now.m-n3>div:first-child{grid-column:1/-1}
  .m-now dd{font-size:22px}
  :where(body.m-page) h1{font-size:26px}
  .m-tabs{overflow-x:auto;scrollbar-width:none;padding:0}
  .m-tabs::-webkit-scrollbar{display:none}
  .m-tabs button{flex:none}
  .m-wh{grid-template-columns:24px 88px minmax(0,1fr) 44px;padding:10px 12px}
  .m-rk,.m-fi{padding-left:12px;padding-right:12px}
  .m-srow{padding:14px 16px}
  .m-lead{padding:18px 16px}
  .m-surge.m-one .m-lead{padding:16px}
  .m-lead .m-fig strong{font-size:34px}
  .m-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-tool{position:static}
  /* 정렬 · 칩을 각자 가로 스크롤 줄로 */
  .m-ctl{display:grid;gap:8px;overflow:visible;padding:0;margin:0;-webkit-mask-image:none;mask-image:none}
  .m-ctl>.m-hs,.m-bar2>.m-hs-sort{overflow-x:auto;scrollbar-width:none;padding:3px 28px 3px 3px;margin:-3px -3px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .m-ctl>.m-hs::-webkit-scrollbar,.m-bar2>.m-hs-sort::-webkit-scrollbar{display:none}

  .m-cp{padding:22px 18px 0}
}

/* ---- 공통 헤더 · 푸터 덮어쓰기 (body.m-page 에서만) ----
 * common.nav / common.footer / 로그인 모달(common.javascript)은 Tailwind 회색과 #1f2937(푸른 회색)을 쓴다.
 * 이 페이지에서는 푸른 기 없는 중립 토큰으로 맞춘다. :where() 로 우선순위를 class 1개로 두어
 * hover:text-primary 같은 상태 class 는 그대로 이기게 한다 (이 파일이 dist/main.css 뒤라 기본 class 는 여기가 이긴다). */
:where(body.m-page) .bg-gray-900{background-color:var(--bg)}
:where(body.m-page) .bg-gray-900.bg-opacity-95{background-color:rgba(25,25,25,.95)}
:where(body.m-page) .bg-gray-800,:where(body.m-page) .active\:bg-gray-800:active{background-color:var(--raise)}
:where(body.m-page) .bg-gray-700,:where(body.m-page) .hover\:bg-gray-700:hover{background-color:var(--line2)}
:where(body.m-page) .bg-\[\#1f2937\],:where(body.m-page) .bg-\[\#1a1a1a\]{background-color:var(--surface)}
:where(body.m-page) .bg-\[\#2a2a2a\]{background-color:var(--raise)}
:where(body.m-page) .border-gray-800{border-color:var(--line)}
:where(body.m-page) .border-gray-700,:where(body.m-page) .border-gray-600{border-color:var(--line2)}
:where(body.m-page) .text-gray-300{color:var(--ink2)}
:where(body.m-page) .text-gray-400,:where(body.m-page) .text-gray-500,:where(body.m-page) .text-gray-600{color:var(--ink3)}
:where(body.m-page) .placeholder-gray-400::placeholder{color:var(--ink3)}
:where(body.m-page) .search-input{background-color:var(--bg);color:var(--ink)}
:where(body.m-page) .search-input:not(.border-primary){border-color:var(--line2)}
:where(body.m-page) .search-input::placeholder{color:var(--ink3)}
/* 지금 보고 있는 메뉴 (페이지가 aria-current="page" 를 붙인다) */
:where(body.m-page) #bcraping-nav a[aria-current="page"]{color:var(--ink)}