:root{
  --bg:#0a0b0e; --panel:#14171c; --panel2:#1b1f26; --line:#242830; --line2:#2f343d;
  --ink:#e9edf5; --ink2:#c2c9d6; --mut:#7c8698; --mut2:#5a6376;
  --amber:#ff8a3d; --amber-soft:255,138,61;
  --g1:#3568e6; --g2:#22d8c2; --g3:#f0cc22; --me:#7b8cff; --good:#4fd08a; --bad:#ff6b6b;
  /* 시안 폰트 (dak.gg 방식): 한글·숫자 모두 Pretendard 하나로 통일.
     · Pretendard = Inter + 한글(Source Han Sans/M PLUS 계열) → 라틴·숫자는 Inter와 사실상 동일.
     · Chakra Petch는 tabular figures가 없어 자릿수가 같아도 세로로 안 맞았음.
       Pretendard는 tabular-nums 지원 → body의 font-variant-numeric:tabular-nums 가
       상속되어 숫자 폭 편차 0. (--num 쓰는 곳에서 font-variant-numeric 을 normal 로 덮지 말 것)
     · --logo(로고 "와켓몬.GG")만 기존 Chakra Petch 유지 — 교체 여부 보류 중.
       한글 "와켓몬"은 Gothic A1, ".GG"는 Chakra Petch 로 렌더되므로 폰트 링크에서 둘 다 제거 금지.
       나중에 로고까지 통일하려면 아래 --logo 를 --disp 와 같은 값으로만 바꾸면 된다.

     · --num(숫자)만 Arial → Arimo 스택이다. Pretendard 는 굵기가 오르면 tabular 숫자 폭도
       같이 넓어져서(48.08→51.45px) "본인 행만 볼드"인 로스터에서 앞자리가 3.37px 밀렸다.
       Arial 은 400~700 에서 숫자 폭이 44.49px 로 고정이라 볼드를 섞어도 격자가 안 깨진다.
       다만 Arial 은 OS 폰트라 안드로이드엔 없다 → 메트릭 호환 웹폰트인 Arimo 를 뒤에 둔다.
       (PC=Arial / 모바일=Arimo 가 스택만으로 자동 분기되고, 둘의 글자폭이 1:1로 같아
        어느 쪽이든 정렬이 동일하다. Arial 이 잡히는 환경에선 Arimo woff2 를 받지도 않는다.)
       ⚠️ Arial/Arimo 는 Regular(400) 과 Bold(700) 두 굵기뿐이다. 800·900 을 지정하면
          브라우저가 진짜 굵은 글꼴 대신 "합성 볼드"로 글자를 번지게 만들어 획이 뭉개지고
          폭이 20% 가까이 벌어진다(20px 기준 88.98 → 106.71px). --num 을 쓰는 요소의
          font-weight 는 반드시 400 또는 700 만 쓸 것. <b>/<strong> 은 기본값이 bolder 라
          부모 굵기에 따라 900 까지 올라가므로 굵기를 명시해 준다.
     · 라이선스: Pretendard / Arimo / Chakra Petch / Gothic A1 모두 SIL OFL 1.1 (상업적 사용 가능). */
  --game:'Pretendard',-apple-system,BlinkMacSystemFont,"Malgun Gothic","Noto Sans KR",sans-serif;
  --disp:'Pretendard','Gothic A1','Malgun Gothic',sans-serif;
  --logo:'Chakra Petch','Gothic A1','Malgun Gothic',sans-serif;
  --num:Arial,'Arimo','Pretendard','Malgun Gothic',sans-serif;
  --sans:'Pretendard',-apple-system,"Malgun Gothic","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}
html,body{background:var(--bg);}
/* 세로 스크롤바 자리를 처음부터 비워 둔다.
   메뉴바(.top)의 좌우 여백이 calc(50% - 536px) 라 창 폭이 바뀌면 로고가 같이 움직인다.
   스크롤바는 15px 이므로 로고가 그 절반인 7.4px 밀린다(1500px 창에서 실측: 214 → 206.6).
   내용이 채워져 스크롤바가 생기는 순간, 그리고 화면을 오갈 때 내용 높이가 달라질 때마다
   로고가 왔다 갔다 했다. 자리를 미리 잡아 두면 그 일이 아예 없다. */
html{scrollbar-gutter:stable;}
/* 이 속성을 모르는 브라우저(사파리 18.2 이전)에서는 스크롤바를 늘 띄워 같은 효과를 낸다. */
@supports not (scrollbar-gutter: stable){ html{overflow-y:scroll;} }
body{
  /* 데스크탑 레이아웃 최소 폭 — 이 아래로는 요소를 찌그러뜨리지 않고 페이지를 가로 스크롤한다.
     (deeplol 방식: 확대/좁은 창에서도 레이아웃이 그대로 유지됨. 메뉴바 포함 전체 적용) */
  min-width:1120px;
  color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums;
  background:radial-gradient(900px 500px at 82% -8%,rgba(43,140,239,.11),transparent 60%),radial-gradient(760px 520px at 8% 3%,rgba(34,216,194,.07),transparent 55%),var(--bg);
  min-height:100vh;-webkit-font-smoothing:antialiased;padding:0 0 60px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  /* Arimo(모바일 폴백)는 숫자와 쉼표 사이에 커닝이 있어, 끄지 않으면
     "1,111,111" 만 2.96px 좁아져 자릿수 격자가 깨진다. Arial 은 원래 커닝이 없다. */
  font-kerning:none;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
/* 상단 메뉴바 — 배경은 화면 끝까지 깔고, 내용만 본문 폭(1120px)에 맞춰 가운데 정렬한다.
   좌우 패딩을 calc 로 잡으면 래퍼 <div> 를 추가하지 않고도 풀블리드 배경이 된다.
   max() 는 모바일(본문폭 해제)에서 패딩이 음수가 되는 것을 막는다. */
.top{display:flex;align-items:center;justify-content:flex-start;gap:22px;
  /* 560px = .wrap 최대폭의 절반. 여기에 .wrap 자체 좌우 패딩(24px)까지 빼야
     로고·검색창이 아래 본문(제목·카드)과 같은 세로선에 선다 → 560-24=536.
     max() 는 좁은 화면에서 패딩이 음수가 되는 것을 막는다. */
  padding:16px max(24px,calc(50% - 536px));max-width:none;margin:0;flex-wrap:wrap;
  background:#12151b;border-bottom:1px solid #2a2f39;}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.top .navs{gap:18px;}
/* margin-left:auto 는 .gbtn 으로 옮겼다 — 버튼이 검색창 '왼쪽'이라 오른쪽 묶음의 첫 요소가
   버튼이고, 그래야 폰에서 검색창이 숨어도 버튼이 우측 자리를 지킨다. */
.tsbox{position:relative;width:260px;}
.topsearch{display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;transition:border-color .12s;}
.topsearch:focus-within{border-color:var(--amber);}
.topsearch .tsicon{color:var(--mut);flex:0 0 auto;}
.topsearch:focus-within .tsicon{color:var(--ink2);}
.topsearch input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font-family:var(--sans);
  font-size:13.5px;padding:9px 2px;outline:none;}
.topsearch input::placeholder{color:var(--mut2);}
@media(max-width:720px){.tsbox{display:none;}}

/* ── 메뉴바 게임 버튼 ──────────────────────────────────────
   평소엔 '와켓몬 홈페이지', 진영전 신청 기간(status=enlist)엔 '신청하러가기'로 바뀐다.
   자리·크기는 그대로 두고 색과 문구만 바꾼다 — 메뉴바가 흔들리지 않게. */
.gbtn{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  text-decoration:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:12.5px;
  border-radius:10px;padding:8px 14px;border:1px solid transparent;transition:.12s;}
/* 이모지는 글자와 다른 폰트로 그려져 기본 상태에서 0.86px 아래에 앉는다(실측).
   line-height 를 1 로 눌러 위아래 여백 비대칭을 없애면 0.54px 위로 넘어가므로,
   남는 만큼을 em 으로 되민다 → 편차 0.04px. em 이라 글자 크기가 바뀌어도 따라온다. */
.gbtn .em{display:inline-flex;align-items:center;line-height:1;transform:translateY(.04em);}
.gbtn .arw{opacity:.7;font-size:13px;}
.gbtn.home{color:var(--g2);background:rgba(34,216,194,.09);border-color:rgba(34,216,194,.4);}
.gbtn.home:hover{background:rgba(34,216,194,.15);border-color:rgba(34,216,194,.65);}
/* 이벤트 — 색만 --evb(rgb 3값)로 갈아끼운다. --amber-soft 와 같은 방식. */
.gbtn.ev{animation:evBreath 2s ease-in-out infinite;
  color:rgb(var(--evb));background:rgba(var(--evb),.10);}
.gbtn.ev.conquest{--evb:240,204,34;}    /* 정복전 ⚔️ */
.gbtn.ev.zone{--evb:224,103,176;}       /* 점령전 🚩 — 월보와 같은 분홍 */
/* 황금고블린 등장 — 정복전과 같은 숨쉬기에 금빛 줄기가 스쳐 지나간다(같은 금색이라 정복전과 갈라 보이게).
   30분만 머무는 기습이라 진영전보다 앞선다(boot.js). */
.gbtn.ev.goblin{--evb:240,204,34;position:relative;overflow:hidden;}
.gbtn.ev.goblin::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,170,.55),transparent);
  animation:gbSweep 2.4s ease-in-out infinite;}
@keyframes gbSweep{0%{left:-60%}60%,100%{left:120%}}
@keyframes evBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--evb),0);border-color:rgba(var(--evb),.45);}
  50%    {box-shadow:0 0 0 4px rgba(var(--evb),.16);border-color:rgba(var(--evb),.95);}
}
@media(prefers-reduced-motion:reduce){
  .gbtn.ev{animation:none;border-color:rgba(var(--evb),.75);}
  .gbtn.ev.goblin::after{animation:none;display:none;}
}
/* 폰(검색창이 숨는 조건과 동일)에서는 아이콘만 남긴다.
   통째로 숨기면 '이벤트가 열렸다'는 신호를 폰 사용자만 못 받는데, 그게 이 버튼의 목적이다. */
@media(max-width:720px){
  .gbtn{padding:0;width:36px;height:36px;justify-content:center;gap:0;}
  .gbtn .tx,.gbtn .arw{display:none;}
  .gbtn .em{font-size:15px;}
}
/* ── 디시 갤러리 바로가기(2026-10-05) ──────────────────────
   게임 버튼 오른쪽에 붙는 작은 단추다. 게임 버튼보다 조용해야 한다 — 색을 안 쓰고 테만 둔다.
   메뉴바의 칸 사이(22px)보다 게임 버튼에 가깝게 당긴다(-12) — 둘이 «바로가기 한 묶음» 으로 읽히게.
   그림(.dcm)은 글자로 그렸다. 높이는 게임 버튼과 같다(글자 12.5 + 위아래 8). */
.dcbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin-left:-12px;padding:8px 11px 8px 9px;border-radius:10px;
  border:1px solid var(--line2);background:var(--panel);color:var(--ink2);text-decoration:none;white-space:nowrap;
  font-family:var(--sans);font-size:12.5px;font-weight:700;transition:.12s;}
.dcbtn:hover{color:var(--ink);border-color:#4a5263;}
.dcm{display:inline-flex;align-items:center;justify-content:center;width:19px;height:16px;border-radius:4px;background:#3b4890;color:#fff;
  font-family:Arial,Helvetica,sans-serif;font-size:11.5px;font-weight:800;font-style:italic;line-height:1;letter-spacing:-.04em;padding-bottom:1px;}
@media(max-width:720px){
  .dcbtn{margin-left:-12px;padding:0;width:36px;height:36px;justify-content:center;gap:0;}
  .dcbtn .tx{display:none;}
  .dcm{width:22px;height:18px;font-size:13px;}
}
/* 검색 자동완성 드롭다운 */
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);}
.sugg-hd{padding:9px 14px 7px;font-size:12px;font-weight:700;color:var(--ink);text-align:left;
  border-bottom:1px solid var(--line);letter-spacing:.02em;}
.sugg-row{display:flex;align-items:center;gap:11px;padding:9px 13px;cursor:pointer;transition:background .1s;}
.sugg-row+.sugg-row{border-top:1px solid var(--line);}
.sugg-row:hover,.sugg-row.act,.sugg-rc.act{background:var(--panel2);}
.sugg-row .av{width:32px;height:32px;flex:0 0 auto;}
.sugg-nm{flex:1;min-width:0;text-align:left;font-size:14px;color:var(--ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sugg-meta{font-family:var(--num);font-size:12px;color:var(--mut);white-space:nowrap;flex:0 0 auto;}
.sugg-meta b{font-weight:700;}
.sugg-empty{padding:12px 14px;color:var(--mut);font-size:12.5px;text-align:center;}
/* 더보기로 펼쳤을 때만 스크롤 틀을 씌운다(접힌 3줄엔 안 씌운다).
   6줄 높이에서 자른다 — 줄 높이 50px(9px+32px+9px) + 줄 사이 경계선 1px×5. */
.sugg-list.scr{max-height:305px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#39404b transparent;}
.sugg-list.scr::-webkit-scrollbar{width:8px;}
.sugg-list.scr::-webkit-scrollbar-thumb{background:#39404b;border-radius:4px;}
.sugg-list.scr::-webkit-scrollbar-track{background:transparent;}
.sugg-cnt{font-weight:400;color:var(--mut);}
.sugg-more{display:block;width:100%;padding:8px 13px;border:0;border-top:1px solid var(--line);
  background:none;font-family:var(--sans);font-size:11.5px;color:var(--mut);cursor:pointer;
  transition:color .12s;}
.sugg-more:hover{color:var(--g2);}
.sugg-more svg{vertical-align:-1px;margin-left:1px;}
.sugg-note{padding:7px 13px;border-top:1px solid var(--line);font-size:11px;color:var(--mut2);text-align:center;}
/* 최근 검색 — 결과 줄보다 낮다(아바타가 없다). */
.sugg-clr{float:right;border:0;background:none;padding:0;font-family:var(--sans);font-size:11px;
  font-weight:400;color:var(--mut);cursor:pointer;transition:color .12s;}
.sugg-clr:hover{color:var(--ink2);}
.sugg-rc{display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer;transition:background .1s;}
.sugg-rc+.sugg-rc{border-top:1px solid var(--line);}
.sugg-rc:hover{background:var(--panel2);}
.sugg-rc .rcico{color:var(--mut);flex:0 0 auto;}
.sugg-rc .sugg-nm{font-size:13.5px;font-weight:500;}
.rcx{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:0;background:none;border-radius:6px;color:var(--mut2);cursor:pointer;transition:.12s;}
.rcx:hover{color:var(--ink2);background:var(--line2);}
.word{font-family:var(--logo);font-weight:800;font-size:21px;letter-spacing:.01em;line-height:1;color:#eaf4ff;
  text-shadow:0 0 8px rgba(34,216,194,.5),0 0 16px rgba(43,140,239,.32);}
.word b{color:#22d8c2;font-weight:800;text-shadow:0 0 8px rgba(34,216,194,.9),0 0 18px rgba(34,216,194,.5);}
.word .tag{display:block;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.14em;
  color:var(--mut);margin-top:4px;}
.navs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.nav{display:flex;gap:4px;font-size:13px;color:var(--mut);flex-wrap:wrap;}
.nav a{padding:8px 14px;border-radius:9px;color:var(--mut);text-decoration:none;transition:.12s;cursor:pointer;
  font-weight:700;font-size:14px;}
.nav a:hover{color:var(--ink2);background:var(--panel2);}
.nav a.on{color:#22d8c2;background:rgba(34,216,194,.10);box-shadow:none;}

/* ── 플랫 셸: 페이지 제목 + 서브바 + 리더보드 카드 ── */
/* 좌우 패딩 0 — 제목이 로고·카드와 같은 세로선에 서야 한다(2px 두면 그만큼 밀림). */
/* 제목(좌) ↔ 각주(우) 한 줄. 각주는 아래 요약 블럭 '밖' 우측 위에 놓이는 자리다. */
.phead{padding:34px 0 2px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.pheadl{min-width:0;}
.pnote{font-size:11.5px;color:var(--mut2);white-space:nowrap;flex:0 0 auto;padding-bottom:2px;}
.phead h1{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.pdesc{color:var(--mut);font-size:13px;margin-top:8px;}
.subbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 6px;min-height:14px;}
.subbar .conn{font-family:var(--sans);font-size:11.5px;}
.subbar .upd{font-size:11.5px;line-height:14px;color:var(--mut);white-space:nowrap;}
.subbar .upd b{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;}
.subbar .upd.wait{visibility:hidden;}   /* 받는 중 — 자리만 잡는다 */
.subbar .upd[hidden]{display:none;}
/* «10분 단위 갱신»(.upd10)은 걷었다(2026-10-11). 그 자리에 «최근 갱신 …»(.upd)이 선다 — 줄 높이를 이 줄의 가장 작은 높이(14px)에 맞춰, 글자가 있든 없든 아래가 안 움직인다. */

/* ══ 회차 타임라인 ══════════════════════════════════════════
   하루치 회차(중보 8 + 월보 2)를 시간순 한 줄로. 예전 중보/월보 탭을 대신한다.

   색 규칙 — 표식은 '안 고른 동안' 톤다운(S20%)이고 '고른 순간' 원색이 된다.
     지금 보는 회차에 색을 몰아주면 나머지가 배경으로 물러난다.
   링 규칙 — 안쪽 청록 = 지금 보는 회차 / 바깥 = 그 회차의 성격(월보·토벌중).
     선택 링이 성격 링의 두 배 두께다. '무엇을 보고 있나'가 먼저 읽혀야 한다. */
:root{
  --wbc:165,120,147;      --wbc-on:224,103,176;    /* 월보 — 평소 / 선택 */
  --duc:160,107,226;      --duc-on:160,107,226;    /* 결특 — 평소 / 선택(보라, 상세의 .umtag.d 와 같은 색) */
  --lvc:121,166,142;      --lvc-on:79,208,138;     /* 토벌 중 — 평소 / 선택 */
  --rsel:2px;     /* 선택 링(청록) — 중보·월보·토벌중 공통 */
  --rmark:1px;    /* 성격 링(월보 분홍 / 토벌중 초록) */
  --rgap:3px;     /* 사진 ↔ 선택 링 사이 배경 */
  --rgap2:2.5px;  /* 선택 링 ↔ 성격 링 사이 배경 */
}
.roundtl{margin:15px 0 40px;}
.rtlbadge{display:flex;justify-content:center;margin:0 0 25px;}
/* 타임라인 뒤의 보스 그림(2026-10-09 시안 B) — 고른 회차의 보스를 가로로 넓게, 은은하게. 여기는 PC 꼴이고, 폰 꼴은 파일 끝에 있다(«보스 그림 — 폰»).
   두 겹이다(PC): ::before 는 크게 흐려 «색» 만 넓게, ::after 는 좁게 또렷한 «초상» — 아래 «분위기 + 초상» 참고.
   토벌 중이면 원래 색, 끝난 회차(.dead)는 회색. 그림은 board.js 의 paintTlBg 가 --tlbg 로 건다(없으면 .hasbg 가 안 붙는다).
   폭으로만 가른다. 레이드를 떠나면 걷는다(board.js 의 stopBoard). 이 상자(.roundtl)는 레이드 패널(#raidpanel)에만 있다 — 랭킹은 패널이 따로다(2026-10-10). */
@media (min-width:821px){
  .roundtl{position:relative;isolation:isolate;}
  /* 그림이 아래 블럭 «뒤» 로 가게 — 위치를 준 상자(.roundtl)는 위치 없는 다음 상자들보다 위에 칠해진다. 다음 상자들에도 위치를 줘서 문서 순서대로(뒤의 것이 위) 칠하게 한다.
     z-index 는 안 준다 — 주면 블럭마다 쌓임 맥락이 생겨 안내 풍선이 다음 블럭 밑으로 들어간다. */
  .roundtl ~ .subbar,.roundtl ~ .bsum,.roundtl ~ .lb{position:relative;}
  /* 그림이 깔린 회차에서는 요약 블럭 셋의 바탕을 살짝 비치게 한다 — 그림 아래쪽이 블럭에 통째로 가려지지 않게.
     바탕만 비친다(글자 · 숫자는 그대로). 투명도는 30 — 바탕을 70% 남긴다(100 · 80 · 70 · 60 · 50 · 40 을 차례로 봤고 30 으로 정했다. 더 비치면 숫자와 그림 속 글자가 겹쳐 읽기 어려웠다).
     그림이 없는 회차(.hasbg 가 없다)는 바탕이 전과 같다. */
  .roundtl.hasbg ~ #bsum .sumc{background:rgba(27,31,38,.7);}
  /* 순위 줄도 바탕을 같은 만큼 비치게 한다(요약 블럭과 같은 투명도 30) — 그림이 줄 뒤까지 이어진다. 올렸을 때(hover)의 바탕은 그대로다. */
  .roundtl.hasbg ~ .lb .scroll:not(.rank) .rows .row:not(:hover){background:rgba(20,23,28,.7);}
  /* 토벌 중에는 블럭에 초록빛 바탕이 얹힌다(body.live #bsum .sumc) — 그 빛은 살리고 밑바탕만 비치게 한다. */
  body.live .roundtl.hasbg ~ #bsum .sumc{background:linear-gradient(180deg,rgba(79,208,138,.09),rgba(79,208,138,.02)),rgba(27,31,38,.7);}
  /* 두 겹은 «같은 자리 · 같은 크기 · 같은 그림» 이다 — 하나는 흐리게(blur) 넓게, 하나는 또렷하게 가운데만. 겹쳐서 한 장으로 보인다.
     (가운데 겹만 따로 작게 넣어 봤더니 그림이 둘로 보였다.)
     보스 그림은 세로로 길다. 넓은 띠에 채우면(cover) 위아래가 잘리므로 «위쪽» 을 보여 준다(center 10%) — 머리 · 얼굴이 남고 발 · 이름 글자가 잘린다.
     아래로는 요약 블럭(보스 정보 · 참여 현황 · 보상) 뒤까지 내려가며 사라진다(높이 820 — 순위 줄 서너 개 뒤까지. 순위표가 그보다 짧으면 표의 끝에서 끝난다 — --tlend, board.js 의 fitTlBg) — 타임라인에서 뚝 끊기지 않게. 블럭은 제 바탕이 있어 글자를 가리지 않는다. */
  .roundtl::before,.roundtl::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:-103px;width:min(1100px,100%);height:min(867px,calc(var(--tlend,2000px) + 103px));transform:translateX(-50%);
    background:var(--tlbg) center 10%/cover no-repeat;opacity:0;transition:opacity .35s ease,filter .35s ease;}
  /* «분위기 + 초상»(2026-10-09 시안 C) — 같은 그림 한 장을 두 번 쓴다.
     ::before 는 넓게(1100) 크게 흐려 «색» 만 깐다 — 그림의 구도와 상관없이 화면에 그 보스의 빛이 돈다.
     ::after 는 좁게(620) 또렷한 «초상» — 그림을 원본 크기보다 작게 그려 선명하다(전에는 1072 폭으로 늘려 뭉개졌다. 원본은 가로 1024 · 1440 의 세로 그림).
     그림마다 손볼 것이 없다 — 그림이 바뀌면 색과 초상이 같이 바뀐다. */
  .roundtl::before{filter:blur(34px) saturate(1.25);
    /* 흐린 겹은 «둥글게» 지운다 — 네모로(좌우 · 위아래를 곧게) 지우면 밝은 그림(얼음공주 태영)에서 네모의 윤곽이 그대로 드러났다. 어두운 그림은 바탕에 묻혀 티가 안 났을 뿐이다.
       상자는 메뉴 줄 바로 밑(-103)에서 시작한다 — 그 아래에서 시작하면 위쪽 끝이 곧은 선으로 보였다. 메뉴 줄이 위를 덮어 주므로 거기까지 색을 꽉 채운다. */
    /* 위쪽 끝은 300px 에 걸쳐 풀어 준다(처음 70px 은 아예 비운다). 전에는 145px 이었다(54 · 100 · 180 을 차례로 보고 정했다) — 메뉴 줄에 딱 붙어 끊기면 밝은 그림에서 그 선이 보였다.
       2026-10-11 — 위가 메뉴 줄이 아니라 대시보드(칼 그림)가 됐다. 그 밑에서 보스 그림이 바로 시작하면 그림 둘이 부딪힌다 — 더 길게 풀고, 둥근 겹의 가운데도 내린다(22% → 34%).
       또렷한 초상(::after)도 같이 늦게 나타난다(19% → 38%). 보스의 머리 쪽이 그만큼 가려진다(사용자가 시안 ② 로 고른 것). */
    -webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 34%,#000 0,rgba(0,0,0,.85) 38%,rgba(0,0,0,.4) 68%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 70px,rgba(0,0,0,.2) 140px,rgba(0,0,0,.6) 220px,#000 300px);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 50% 70% at 50% 34%,#000 0,rgba(0,0,0,.85) 38%,rgba(0,0,0,.4) 68%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 70px,rgba(0,0,0,.2) 140px,rgba(0,0,0,.6) 220px,#000 300px);mask-composite:intersect;}
  .roundtl::after{width:min(620px,100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 34%,#000 66%,rgba(0,0,0,.5) 84%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 10%,rgba(0,0,0,.25) 20%,rgba(0,0,0,.7) 30%,#000 38%,#000 60%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 34%,#000 66%,rgba(0,0,0,.5) 84%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 10%,rgba(0,0,0,.25) 20%,rgba(0,0,0,.7) 30%,#000 38%,#000 60%,transparent 100%);mask-composite:intersect;}
  .roundtl.hasbg::before{opacity:.42;}.roundtl.hasbg::after{opacity:.4;}
  .roundtl.hasbg.dead::before{opacity:.26;filter:blur(34px) grayscale(.85) brightness(.8);}
  .roundtl.hasbg.dead::after{opacity:.24;filter:grayscale(.85) brightness(.8);}
}
.dbadge{display:inline-flex;align-items:center;padding:3px 12px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line2);
  font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:.02em;}
.rtl{display:flex;align-items:flex-start;gap:2px;padding:0 8px;}
/* 가로만 잘라야 하는데 overflow:hidden 은 세로도 자른다. 선택 링과 토벌중 파동이
   사진 위아래로 삐져나오므로, 안쪽 여백을 주고 바깥에서 음수 마진으로 되돌린다. */
.rtlvp{flex:1;min-width:0;overflow:hidden;padding:18px 0;margin:-18px 0;}
.rtlday{position:relative;display:flex;align-items:flex-start;}
.rtlline{position:absolute;left:44px;right:44px;top:19px;height:1px;background:var(--line2);}
/* 포착된 회차만 왼쪽부터 쌓는다(2026-10-06, board.js 의 TL_FULL). 칸 폭 = 전체 ÷ --n — 적게 뜬 날은 왼쪽에 모이고 오른쪽이 빈다.
   곧은 선의 자리(한 줄짜리 칸이 이어지는 구간마다)는 board.js 가 칸 수에 맞춰 준다. */
.rtlday>.nd,.rtlday>.slot{flex:0 0 calc(100% / var(--n,6));}
/* 한 줄에 안 드는 날(TL_WIDE 넘게 뜬 날) — 칸을 52 밑으로 안 줄이고 가로로 민다. */
.rtlvp.wide{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;}
.rtlvp.wide .rtlday{min-width:calc(var(--n) * 52px);}

/* -- 한 시각에 회차가 둘일 때: 비스듬히 갈린다 --------------
   결특(결투 월보)은 원래 월보와 «같은 시각» 에 열린다. 옆으로 나란히 놓으면
   다른 시각처럼 읽히므로, 선은 제자리에 두고 거기서 ↗↘ 로 갈라 올리고 내린다.
   위가 결특, 아래가 원래 보스 - 순서를 고정해야 날마다 자리가 안 바뀐다.

   자리 계산 - 원 38 + 사이 26 + 원 38 = 102, 그 한가운데가 51.
   보통 칸의 원 중심(=선)은 19 에 있으므로 51 을 거기로 끌어올리려면 -32 이다.

   ⚠ 곧은 세로 줄기였을 때는 «둘이 세로로 붙어 있다» 로만 읽혔다. 비스듬한 두 가지가
     «여기서 갈라진다» 를 훨씬 분명히 말한다. 각도를 CSS 로 못 박지 않는 이유는
     칸 폭이 화면 폭에 따라 달라지기 때문이다 - SVG 를 칸의 왼쪽 절반에 늘려 맞춘다. */
.slot{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;}
.slot .nd{flex:none;}
.slot.fork{gap:0;margin-top:calc(var(--fk,1) * -32px);position:relative;}   /* --fk = 원 수 - 1(board.js 의 slotHTML). 셋이면 위로 64 */
.slot.fork .nd + .nd{margin-top:26px;}
.slot.fork .tm{margin-top:12px;}
/* 갈래 칸에는 곧은 선이 지나지 않는다 — board.js 가 한 줄짜리 칸끼리만 잇는다(2026-10-09).
   전에는 통으로 긋고 여기서 바탕색 띠로 가렸다. 보스 그림이 뒤에 깔리자 그 띠가 어두운 줄로 드러나 걷어 냈다. */
/* 두 가지. 이웃 원 중심 사이(칸의 -50% ~ 150%)에 늘려 맞추고, 굵기는 고정한다.
   색은 곧은 선(.rtlline)과 같은 회색이다 — 가지는 «길» 일 뿐이다. 결특·월보는 원의 테두리 색이 이미 말한다.
   한때 위 가지를 결특 보라, 아래 가지를 월보 분홍으로 칠했더니 선만 튀어서 타임라인의 나머지와
   따로 놀았다(2026-09-30 요청).
   ⚠ 폭을 «반드시» 못 박는다. svg 는 대체 요소(replaced element)라 width:auto 면
     left/right 로 폭을 풀지 않고 «기본 고유 크기 300x150» 을 쓴다 — right 는 무시된다.
     그래서 가지가 원을 한참 지나 다음 칸까지 뻗은 적이 있다(2026-09-25 운영). */
.slot.fork .fkarm{position:absolute;left:-50%;width:200%;top:19px;height:calc(var(--fk,1) * 64px);overflow:visible;}
.slot.fork .fkarm path{fill:none;stroke:var(--line2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;}
/* 갈래가 위로 32 자란다. 그만큼 위 여백을 주고 바깥에서 되돌린다. */
.rtlvp{padding:calc(52px + (var(--fkmax,1) - 1) * 32px) 0 18px;margin:calc(-52px - (var(--fkmax,1) - 1) * 32px) 0 -18px;}   /* --fkmax = 그 날 가장 높이 쌓인 칸의 원 수 - 1 */
/* 갈래가 있는 날은 «오늘» 배지를 그만큼 밀어 올린다.
   위 여백을 바깥에서 되돌리므로(-52), 갈래는 배지 자리로 그냥 올라간다 - 실제로 겹쳤다. */
.roundtl:has(.slot.fork) .rtlbadge{margin-bottom:calc(56px + (var(--fkmax,1) - 1) * 32px);}
/* PC 는 갈래가 없는 날도 «두 줄(갈래) 기준» 의 높이로 선다(2026-10-10 요청).
   갈래가 있으면 가로 선이 31px 내려가고 상자가 63px 커진다(위 31 + 아래 32). 하루는 00:00 · 06:00 의 중보로 시작해 10:00 에 첫 갈래(월보 · 결특)가 뜬다 —
   그래서 매일 아침은 한 줄 높이였다가 10시에 선과 아래 블럭들이 한꺼번에 내려앉았고, 날짜를 넘길 때도 날마다 선의 높이가 달랐다.
   갈래가 없는 날에 그 자리를 미리 비워 둔다: 날짜 표시 밑을 갈래 날만큼 띄우고(56), 줄 밑에 아래 갈래의 자리(32)를 둔다. 받는 중의 뼈대 · 회차가 없는 날도 같은 높이다(min-height).
   여기는 «가장 작은» 높이만 정한다(min-height). 같은 시각에 셋 이상이 뜨면 원 하나에 위로 32 · 아래로 32 씩 더 자란다(--fk · --fkmax).
   폰은 칩이 줄을 바꾸는 배치라 해당 없다.
   ⚠ 높이는 상자에 «내용이 있을 때» 만 건다(:not(:empty)). 랭킹이 같은 패널을 쓰던 때, 조건 없이 걸었더니 비어 있는 이 상자가
     랭킹 위에 173px 의 빈 자리를 만들었다(2026-10-10 운영). 그 뒤 패널을 나눠(#raidpanel · #rankpanel) 이 상자는 레이드에만 있다 — 조건은 그대로 둔다(첫 받기가 실패하면 상자가 빈다). */
@media(min-width:821px){
  .roundtl:not(:empty){min-height:173px;}
  .roundtl .rtlbadge{margin-bottom:calc(56px + (var(--fkmax,1) - 1) * 32px);}
  .roundtl:not(:has(.slot.fork)) .rtlday{margin-bottom:32px;}
}

/* 결특 노드 — 월보와 같은 보스라 색으로만 갈린다 */
.nd.du .ph{box-shadow:0 0 0 4px var(--bg),0 0 0 calc(4px + var(--rmark)) rgba(var(--duc),.9);}
.nd.du .tm{color:rgb(var(--duc-on));}
/* 골랐을 때도 «무엇인가» 는 남아야 한다 — 청록(선택) 바깥에 보라(결특)를 한 겹 더 두른다.
   월보와 같은 짜임이다. 예전엔 보라가 사라져 결특인지 알 수 없었다(2026-10-01 요청). */
.nd.du.on .ph{box-shadow:0 0 0 var(--rgap) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel)) #22d8c2,
  0 0 0 calc(var(--rgap) + var(--rsel) + var(--rgap2)) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel) + var(--rgap2) + var(--rmark)) rgb(var(--duc-on));}
.nd.du.on .tm{color:#22d8c2;}

/* -- 메뉴 하위 탭 (랭킹 / 랭커) ---------------------------
   호버로 열되 .open 으로도 열린다 - 폰에는 호버가 없어 탭으로 열어야 한다.
   모양은 «세로로 쌓은 알약» 이다. 고른 쪽은 위 메뉴(.nav a.on)와 «같은» 민트로 켠다 —
   색은 하나다. 갈래마다 색을 달리했더니(결특만 보라) 메뉴 안에서 둘이 다른 급으로 보였다(2026-09-25).
   ⚠ 크기 — 글자(13px)에 비해 상자가 컸다. 알약마다 최소 폭 68px·여백 6×13 을 걷고 글자에 맞춘다.
   ⚠ 한때 가로로 나란히 두었는데, 폭(108px)이 메뉴 글자보다 넓어 옆 메뉴의 탭과 부딪혔다.
     세로면 폭이 메뉴 글자 폭에 가까워(약 68px) 옆으로 튀어나오지 않는다(2026-09-25).
   ⚠ 2026-10-11 다시 키웠다(사용자 결정 — 다섯 크기를 나란히 보고 고른 것): 줄 높이 26 → 32 · 폭 48 → 76. 글자는 13 그대로.
     줄이 26px 이면 마우스로 누르기에 작았다. 한 단계 더 큰 것(줄 37 · 폭 100 · 글자 14)도 넣어 봤으나 이쪽으로 정했다.
     하위 메뉴는 한 번에 하나만 펴지므로 옆 메뉴와 부딪칠 일은 없다. */
.navitem{position:relative;display:inline-flex;}
.submenu{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);z-index:30;
  display:none;flex-direction:column;gap:2px;white-space:nowrap;padding:4px;min-width:76px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:9px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);}
.navitem:hover .submenu,.navitem.open .submenu{display:flex;}
/* ① 틈을 메우는 보이지 않는 다리. 탭은 글자에서 9px 떨어져 떠 있어서, 마우스를 탭으로 내리면
     그 틈을 지나는 순간 hover 가 풀려 탭이 사라졌다 — 닿기 전에 없어졌다(2026-09-25 재현:
     가운데 꼬리 자리로 내려갈 때만 살아남았다). 다리는 탭이 떠 있을 때만 생긴다 —
     닫혀 있을 때 보이지 않는 판이 마우스를 붙잡으면 그것대로 «지멋대로» 다. */
.navitem:hover::after,.navitem.open::after{content:"";position:absolute;top:100%;
  left:-30px;right:-30px;height:12px;}
/* ③ 고른 뒤에는 접는다 — 마우스가 그 자리에 있어도. 마우스가 메뉴를 떠나면 다시 hover 로 열린다. */
.navitem.shut .submenu,.navitem.shut::after{display:none;}
/* 위쪽 꼬리 - 어느 메뉴에 달린 것인지 가리킨다 */
.submenu::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;
  margin-left:-4.5px;background:var(--panel2);
  border-left:1px solid var(--line2);border-top:1px solid var(--line2);
  transform:rotate(45deg);border-radius:2px 0 0 0;}
.submenu a{position:relative;z-index:1;padding:7px 16px;border-radius:6px;text-align:center;
  font-size:13px;font-weight:700;line-height:1.35;color:var(--mut);white-space:nowrap;cursor:pointer;
  transition:color .12s,background .12s;}
.submenu a:hover{color:var(--ink);background:rgba(255,255,255,.055);}
.submenu a.on{color:#22d8c2;background:rgba(34,216,194,.10);}

/* 전적 카드 모드 배지 — 결특 */
.ufmd.du{color:#a06be2;background:rgba(160,107,226,.16);}

/* ── 모드 요약 블럭 ────────────────────────────────────────
   보특(중보·월보)과 결특(결투 월보)은 «다른 자» 로 잰 값이다 — 결투엔 보스 특효가
   1%도 안 걸려 딜이 60% 수준이다. 그래서 한 칸에 섞지 않고 같은 모양의 블럭을 둘 세운다.

   자리는 프로필 바로 밑, 왼쪽 칸이다 — 요약은 사람 옆에 붙어 있어야 «이 사람의» 수치로 읽힌다.
   ⚠ 한때 오른쪽 넓은 칸에 다섯 열로 펼쳤는데, 요약이 아니라 «표» 처럼 읽혔다.
   ⚠ 그 전에는 같은 보특 수치가 세 군데로 흩어져 있었다 — 큰 숫자 석 장(오른쪽 위),
     평균 두 칸(옆칸), 최근 순위 띠(옆칸 맨 아래). 어디에도 «보특 것» 이라고 안 적혀 있었다.

   좁은 칸이라 안쪽 모양이 둘로 나뉜다 — 먼저 읽히는 둘은 나란히 크게,
   나머지 셋은 라벨과 값이 마주 보는 줄로. 두 블럭의 «줄 차례» 는 똑같다. */
.msum{background:var(--panel);border:1px solid var(--line);border-left-width:4px;
  border-radius:13px;padding:14px 16px 15px;margin-top:14px;}
.msum.b{border-left-color:#22d8c2;}
.msum.d{border-left-color:#a06be2;}
.msumhd{display:flex;align-items:center;gap:9px;margin-bottom:13px;}
.msumsub{font-size:11px;color:var(--mut);}
.umtag{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.03em;
  padding:2px 9px;border-radius:99px;flex:0 0 auto;}
.umtag.b{color:#22d8c2;background:rgba(34,216,194,.12);box-shadow:inset 0 0 0 1px rgba(34,216,194,.3);}
.umtag.d{color:#a06be2;background:rgba(160,107,226,.13);box-shadow:inset 0 0 0 1px rgba(160,107,226,.34);}
/* 큰 둘은 .uavgblock 을 그대로 쓴다. 다만 머리글 바로 밑이라 제 선은 긋지 않는다. */
.msum>.uavgblock{margin:0;padding:0;border:0;}
/* 블럭 안의 아래 칸들. 선은 여기서 한 번만 긋는다 —
   안에 들어오는 .ugapbar 가 제 선을 또 그으면 두 겹이 된다. */
.msumft{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);}
.msumft .ugapbar{margin:0;padding:0;border:0;}
.msumft .ufl{margin-bottom:9px;}
/* 통산 세 줄 — 좁은 칸에서는 라벨과 값이 마주 보는 편이 열을 나누는 것보다 잘 읽힌다. */
/* 결특 칸 — 쳤지만 아직 확정이 없을 때 */
.mpend{font-size:11.5px;color:var(--mut);text-align:center;padding:2px 0;}
.mrl{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--mut2);margin-bottom:9px;}
.mrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.mrow+.mrow{margin-top:7px;}
.mrk{font-size:11.5px;color:var(--mut);min-width:0;}
.mrk em{font-style:normal;font-size:9.5px;color:var(--mut2);margin-left:3px;}
.mrv{font-family:var(--num);font-weight:700;font-size:14px;color:var(--ink2);
  white-space:nowrap;flex:0 0 auto;}
.mrv.w{color:#fff;}
.mrv.acc{color:#22d8c2;}
.mrv.du{color:#a06be2;}
.mrv.gold{color:#f0cc22;}
.mrv i{font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:400;
  color:var(--mut);margin-left:2px;}
/* 옆칸 — 두 갈래의 «내 자리». 랭킹 화면이 둘로 갈렸으니 여기도 둘이다.
   나란히 두는 이유: 위아래로 쌓으면 둘이 «항목 두 개» 로 읽힌다.
   같은 줄에 서야 «둘 중 어느 쪽이 더 앞인가» 가 한눈에 보인다 — 바로 밑 평균 두 칸과 같은 짜임이다. */
.uprank{width:100%;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:31px 12px;}       /* 2 × 2 — 보특 · 결특 / 덱 · PVP(2026-10-06). 윗줄과 아랫줄 사이는 글자 기준 32(2026-10-06 요청, 처음 17 → 24 → 28 → 32) */
.uprow{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.uprl{font-size:11px;font-weight:600;color:var(--mut);}
.uprow.b .uprl{color:#22d8c2;}
.uprow.d .uprl{color:#a06be2;}
.uprow.k .uprl{color:#6aa8ff;}                 /* 덱 — 보특(청록)과 헷갈리지 않게 파랑 */
.uprow.p .uprl{color:#e58fb9;}                 /* PVP — 줄의 PVP 메달과 같은 분홍 */
/* 정보 아이콘과 풍선(2026-10-07 PVP 랭킹 → 2026-10-08 여섯 군데: 레이드 · 랭킹 제목, 상세의 순위 이름 넷). 그리는 조각 · 여닫기는 common.js infoTip.
   아이콘은 이름의 오른쪽 «바깥» 에 붙인다(등락 .updl 과 같은 방식). 자리를 안 차지해서 이름 글자가 전과 같은 자리에 그대로 선다 —
   나란히 놓으면 글자가 아이콘만큼 밀린다(시안에서 지적). 그래서 이름을 감싼 상자가 position:relative 여야 한다(.uprl · .ttlw).
   누르는 자리는 보이는 것보다 넓힌다(::before) — 14px 짜리를 손가락으로 맞히기 어렵다.
   풍선의 꼴은 최근 순위 칩의 정보창(.chiptip)과 같다. 가로 자리와 꼬리(--ax)는 뜰 때 스크립트가 잰다 — 왼쪽 칸 · 오른쪽 칸 · 좁은 폰을 한 값으로 못 맞춘다.
   기본은 위로 뜬다. .dn 은 아래로(화면 맨 위의 제목은 위에 자리가 없다). 글이 길면 줄을 바꾼다(폭 280 · 화면보다 넓어지지 않는다). */
.uprl,.ttlw{position:relative;}
.ttlw{width:fit-content;max-width:100%;}
.upi{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px;
  width:14px;height:14px;padding:0;border-radius:50%;border:1px solid var(--mut2);background:none;
  color:var(--mut);font:700 9.5px/12px Arial,sans-serif;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ttlw .upi{margin-left:8px;width:16px;height:16px;font-size:10.5px;line-height:14px;}       /* 제목(26px) 옆에서는 조금 크게 */
.upi::before{content:"";position:absolute;inset:-11px;}
.upi:hover,.upi.on,.upi:focus-visible{border-color:var(--ink2);color:var(--ink2);outline:none;}
.uprow.p .upi:hover,.uprow.p .upi.on,.uprow.p .upi:focus-visible{border-color:#e58fb9;color:#e58fb9;}
.uprow.b .upi:hover,.uprow.b .upi.on,.uprow.b .upi:focus-visible{border-color:#22d8c2;color:#22d8c2;}
.uprow.d .upi:hover,.uprow.d .upi.on,.uprow.d .upi:focus-visible{border-color:#a06be2;color:#a06be2;}
.uprow.k .upi:hover,.uprow.k .upi.on,.uprow.k .upi:focus-visible{border-color:#6aa8ff;color:#6aa8ff;}
.uptip{position:absolute;left:0;bottom:calc(100% + 9px);z-index:40;pointer-events:none;
  box-sizing:border-box;width:max-content;max-width:min(280px, calc(100vw - 16px));
  padding:9px 11px;border-radius:10px;background:#0d1016;border:1px solid var(--line2);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8);
  font-family:var(--sans);font-size:11.5px;font-weight:500;line-height:1.55;letter-spacing:0;color:var(--ink2);text-align:left;white-space:normal;word-break:keep-all;}
.uptip::after{content:"";position:absolute;left:var(--ax,14px);top:100%;border:6px solid transparent;border-top-color:var(--line2);}
.uptip.dn{bottom:auto;top:calc(100% + 9px);}
.uptip.dn::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--line2);}
.uprv{position:relative;font-family:var(--num);font-size:11px;color:var(--mut);white-space:nowrap;}
/* 등락 — 숫자의 오른쪽 «바깥» 에 붙인다. 자리를 안 차지해서, 등락이 있든 없든 숫자가 윗줄(보특 · 결특)과 같은 세로선에 선다. */
.updl{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:7px;font-size:11.5px;font-weight:700;}
.updl.u{color:#3ddc97;}.updl.d{color:#ff6f86;}.updl.s{color:var(--mut2);}
/* 숫자 밑의 작은 두 줄 — 전투력 · 지난 시즌. 값은 밝은 회색, 이름은 한 단 아래(너무 어둡다는 지적, 2026-10-06). */
.upsub{display:flex;flex-direction:column;align-items:center;margin-top:2px;font-family:var(--num);font-size:10.5px;line-height:1.5;color:#a3adbd;white-space:nowrap;}
.upsub em{font-style:normal;font-family:var(--sans);color:var(--mut);}
/* 지난 시즌 순위는 숫자만 조금 밝게 — 등락(▼4)이 견주는 값이라 눈에 먼저 들어와야 한다(2026-10-06 요청). «위» 와 전투력은 그대로 둔다. */
.upsub b{font-weight:600;color:#e3e8f0;}
.uprv b{font-size:19px;font-weight:700;color:var(--ink);margin-right:1px;}
.uprv b.dim{color:var(--mut2);font-weight:600;}
.uprv.dim{font-family:var(--sans);font-size:12.5px;color:var(--mut2);line-height:1.6;}

.nd{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  flex:1;min-width:0;background:none;border:0;padding:0;cursor:pointer;font:inherit;}
.nd .ph{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#232830;
  position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg);transition:box-shadow .12s;}
.nd .ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.5) brightness(.78);transition:filter .12s;}
/* 갈래 칸의 시각은 원이 아니라 «칸» 에 붙는다 — 원 둘이 한 시각을 나눠 쓰기 때문이다.
   그래서 .nd .tm 만 적으면 그 하나만 기본 글꼴로 빠져 혼자 커진다(실제로 그랬다).
   두 자리를 한 줄에 묶어 둔다. */
.nd .tm,.slot.fork>.tm{font-family:var(--num);font-size:12px;font-weight:700;
  color:var(--mut);transition:color .12s;}
.nd:hover .ph img{filter:none;}
.nd.on .ph{box-shadow:0 0 0 var(--rgap) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel)) #22d8c2;}
.nd.on .ph img{filter:none;}
.nd.on .tm{color:#22d8c2;}
/* 월보 */
.nd.wb .ph{box-shadow:0 0 0 4px var(--bg),0 0 0 calc(4px + var(--rmark)) rgba(var(--wbc),.9);}
.nd.wb .tm{color:rgb(var(--wbc));}
.nd.wb.on .ph{box-shadow:0 0 0 var(--rgap) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel)) #22d8c2,
  0 0 0 calc(var(--rgap) + var(--rsel) + var(--rgap2)) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel) + var(--rgap2) + var(--rmark)) rgb(var(--wbc-on));}
.nd.wb.on .tm{color:#22d8c2;}
/* 토벌 중 — 보스 화면의 '격파중' 표시와 같은 언어(초록 + 파동) */
.nd.live .ph{box-shadow:0 0 0 4px var(--bg),0 0 0 calc(4px + var(--rmark)) rgb(var(--lvc));}
.nd.live .ph img{filter:none;}
.nd.live .tm{color:rgb(var(--lvc));}
.nd.live::after{content:"";position:absolute;top:0;left:50%;width:38px;height:38px;border-radius:50%;
  border:2.5px solid rgb(var(--lvc));transform:translateX(-50%);pointer-events:none;
  /* box-sizing 을 여기서 다시 지정한다 — 전역 규칙이 `*` 라 가상요소에는 안 걸린다.
     content-box 로 두면 38px 에 테두리가 바깥으로 더 붙어 43.7px 이 되는데,
     가로는 translateX(-50%) 가 잡아 주지만 세로는 top:0 이라 그만큼 아래로 밀린다.
     굵힐수록 더 어긋나서 사진 원과 중심이 안 맞았다. */
  box-sizing:border-box;
  /* 파동 주기 — 원래 1.8초는 눈에 잘 안 걸렸고 1.15초는 조급해 보였다. 1.45초로 앉혔다. */
  animation:ndPing 1.45s cubic-bezier(0,0,.2,1) infinite;}
.nd.live.on .ph{box-shadow:0 0 0 var(--rgap) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel)) #22d8c2,
  0 0 0 calc(var(--rgap) + var(--rsel) + var(--rgap2)) var(--bg),
  0 0 0 calc(var(--rgap) + var(--rsel) + var(--rgap2) + var(--rmark)) rgb(var(--lvc-on));}
.nd.live.on::after{border-color:rgb(var(--lvc-on));}
.nd.live.on .tm{color:#22d8c2;}
@keyframes ndPing{0%{transform:translateX(-50%) scale(1);opacity:.72}
  70%{transform:translateX(-50%) scale(1.85);opacity:0}100%{opacity:0}}
/* 날짜 이동 — 사진 줄과 같은 38px 칸에 세로 중앙 → 연결선과 자동 정렬 */
.rtlnav{flex:0 0 auto;width:34px;height:38px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;}
.rtlnav circle{fill:var(--bg);stroke:var(--line2);transition:stroke .12s;}
.rtlnav path{stroke:var(--mut);fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .12s;}
.rtlnav:hover circle{stroke:rgba(34,216,194,.55);}
.rtlnav:hover path{stroke:#22d8c2;}
/* PC 도 넘기는 단추가 날짜 표시 바로 옆에 선다(2026-10-09, 폰은 아래 폰 덩어리) — 전에는 타임라인 줄의 양 끝이라 날짜와 떨어져 무엇을 넘기는지 안 읽혔다.
   표시의 폭을 못 박아(오늘 · 어제 · 10-05 가 같은 폭) 단추 자리가 날마다 흔들리지 않게 한다. 단추는 표시(22px)의 가운데 높이에 선다.
   단추가 빠진 만큼 타임라인이 양쪽으로 36px 씩 넓어진다 — 빈 자리를 남기면 줄이 까닭 없이 안쪽으로 들어가 보인다. */
@media(min-width:821px){
  .roundtl{position:relative;}
  .rtlbadge .dbadge{min-width:66px;justify-content:center;}
  .rtlnav{position:absolute;top:-8px;}
  .rtlnav[data-go="prev"]{right:calc(50% + 35px);} .rtlnav[data-go="next"]{left:calc(50% + 35px);}
}
/* 보스 그림 위에서도 또렷하게(2026-10-10 시안 B «또렷한 원») — PC 만. 폰은 이미 어두운 칩이라 잘 보인다.
   타임라인 뒤에 보스 그림을 깔자(위 «타임라인 뒤의 보스 그림») 가는 선 · 회색으로 뺀 그림 · 흐린 시각 글자가 그림에 묻혔다.
   띠나 상자를 깔지 않는다 — 그림을 가리지 않고 스케줄 자체를 또렷하게 한다. 배치 · 크기 · 간격은 그대로다.
   · 원 둘레: 띠는 전부 var(--bg) 로 그린다. 그 값만 어두운 받침으로 바꾼다 — 월보 분홍 · 결특 보라 · 토벌 중 초록 · 고른 청록 테의 짜임은 손대지 않는다.
   · 그림: 지난 회차도 제 색(회색으로 빼지 않는다). «지난 것 / 고른 것» 은 테가 가른다.
   · 시각: 받침 없이 글자만 — 밝은 글자에 어두운 그림자를 둘러 밝은 그림(얼음공주 태영) 위에서도 읽힌다. 어두운 알약을 깔아 봤는데 원 밑에 블럭이 하나씩 더 달려 무거웠다(2026-10-10 요청으로 뺐다).
     종류 색(분홍 · 보라)은 테에만 남기고 글자는 전부 흰색. 상태(고름 = 청록 · 토벌 중 = 초록)만 색으로 적는다.
   · 선: 밝게만 한다(흰색 28%). 굵기는 그대로(가로 1px · 갈래 1.5px) — 2px · 42% 는 원보다 선이 먼저 보였다(2026-10-10 요청). 선은 원을 잇는 보조라 원 · 시각보다 물러나 있는다.
   선택자 앞의 .roundtl 은 위의 .nd.wb .tm 같은 규칙을 이기려는 것이다(같은 무게라 뒤에 적힌 이쪽이 이긴다). 순서도 뜻이 있다 — 토벌 중 다음에 고름. */
@media(min-width:821px){
  .roundtl{--bg:rgba(8,10,14,.92);}
  .roundtl .rtlline{background:rgba(255,255,255,.28);}
  .roundtl .slot.fork .fkarm path{stroke:rgba(255,255,255,.28);}
  .roundtl .nd .ph{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));}
  .roundtl .nd .ph img{filter:none;}
  .roundtl .nd.on .ph{filter:drop-shadow(0 0 9px rgba(34,216,194,.55));}
  .roundtl .nd .tm,.roundtl .slot.fork>.tm{color:#e8edf3;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.6);}
  .roundtl .nd.wb .tm,.roundtl .nd.du .tm{color:#e8edf3;}
  .roundtl .nd.live .tm{color:rgb(var(--lvc-on));}
  .roundtl .nd.on .tm,.roundtl .nd.live.on .tm{color:#22d8c2;}
  .roundtl .dbadge{background:rgba(8,10,14,.85);}
  /* 받는 중의 뼈대 — 회색 원은 깜빡이며 반투명해진다(skpulse). 밝아진 선이 그때 원 안으로 비쳤다. 원 밑에 바탕색 원을 하나 받쳐 선을 가린다. */
  .roundtl .nd:has(>.ph.skb)::before{content:"";position:absolute;top:0;left:50%;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:#0b0d11;}
}
@media(prefers-reduced-motion:reduce){.nd.live::after{animation:none;}}
@media(max-width:720px){
  .roundtl{margin:12px 0 28px;}
  .rtlbadge{margin:0 0 18px;}
  .rtl{padding:0 2px;}
  .rtlline{left:32px;right:32px;top:16px;}
  .nd{gap:9px;}
  .nd .ph{width:32px;height:32px;}
  .nd.live::after{width:32px;height:32px;}
  .nd .tm,.slot.fork>.tm{font-size:10.5px;}
  .rtlnav{width:26px;}
}
.lb{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.uhd{margin:22px 0 0;}
/* ── 홈(랜딩) 히어로 ── */
/* 첫 화면은 «한 화면» 에 들어가야 한다 — 밑에 아무것도 없는데 스크롤바가 뜨면 안 된다(2026-09-30 요청).
   자리는 창 높이 880px 에서 좋아 보이던 값으로 못 박았다(2026-10-01 요청) — 화면 아래 정렬은 취소.
   위 여백도 px 로 고정이다(2026-10-02 요청). 전에는 vh 로 화면 높이를 따라갔는데,
   확대/축소는 창을 안 건드리므로 글자만 작아지고 이 여백은 그대로라 배율마다 자리가 달라 보였다.
   창이 낮아도 줄이지 않는다 — 넘치면 스크롤을 받기로 했다(아래 «창 높이로 갈라지지 않는다» 참고). */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
  padding:46px 20px 0;}
.hlogo{font-family:var(--logo);font-size:42px;font-weight:800;letter-spacing:.01em;line-height:1;margin-top:-2px;color:#eaf4ff;
  text-shadow:0 0 12px rgba(34,216,194,.5),0 0 26px rgba(43,140,239,.32);}
.hlogo b{color:#22d8c2;text-shadow:0 0 12px rgba(34,216,194,.9),0 0 28px rgba(34,216,194,.5);}
.htag{color:var(--mut);font-size:14px;letter-spacing:.02em;margin-bottom:14px;}
.hsbox{position:relative;width:100%;max-width:600px;}
/* 세로를 조금 줄였다(2026-10-01 요청): 감싼 여백 7→5, 입력 여백 13→9 — 높이 66px → 54px. */
.hsearch{display:flex;align-items:center;gap:6px;width:100%;max-width:600px;margin-top:12px;padding:5px;
  background:#fff;border-radius:14px;box-shadow:0 10px 34px -12px rgba(0,0,0,.55);}
.hsearch input{flex:1;min-width:0;background:none;border:0;color:#171b22;font-family:var(--sans);
  font-size:16px;padding:9px 12px;outline:none;}
.hsearch input::placeholder{color:#a2a8b2;}
.hsbtn{display:flex;align-items:center;justify-content:center;background:none;border:0;color:#4a5262;
  padding:0 14px;cursor:pointer;}
.hsbtn:hover{color:#1f242c;}
/* 황금고블린 시계 — 첫 화면, 검색창 밑. 상자로 가두지 않고 배경 전체를 쓴다.
   #homepanel 에 상태 클래스가 붙는다: gz-wait(은은한 금빛) · gz-live(진하게 숨쉰다).
   금색(--g3)은 게임의 황고 탭과 같은 색이다. 숫자는 사이트 숫자 글꼴(--num, tabular)이라 초가 줄어도 폭이 안 흔들린다. */
/* 배경은 «화면» 을 채운다(fixed) — .home 안에 가두면 내용 높이만큼만 칠해져 가운데 상자처럼 보인다. */
/* 첫 화면은 화면 아래까지 내려온다 — 그림을 자르는 틀(.gzbg)이 이 높이를 따르기 때문이다.
   짧으면 그림 중간이 잘리고, 화면 끝까지 오면 잘린 자리가 화면 밖이라 안 보인다.
   128 = 메뉴바 68 + 본문 아래 여백 60. 더 주면 그만큼 세로 스크롤이 생긴다. */
.home{position:relative;isolation:isolate;}
/* ⚠ #homepanel 로 좁힌다 — .home 은 메뉴바의 «와켓몬 홈페이지» 버튼(.gbtn.home)도 쓴다.
   그냥 .home 에 걸었더니 버튼이 644px 짜리 기둥이 됐다(2026-10-02). */
#homepanel.home{min-height:calc(100vh - 128px);}
.home::before{content:"";position:fixed;z-index:-1;left:50%;bottom:-16vh;width:min(1600px,180vw);height:88vh;
  transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .8s;
  background:radial-gradient(closest-side,rgba(240,204,34,.26),rgba(240,204,34,.07) 55%,rgba(240,204,34,0));}
/* 고블린 그림 — 금빛 «뒤» 에 아주 옅게 깐다(2026-10-01 요청). 주소는 수집기가 KV 에 둔 것을
   화면이 --gzimg 로 꽂는다. 그림이 없으면 이 칸이 안 그려져 금빛만 남는다.
   ⚠ ::before(금빛)에 같이 넣었더니 그림이 네모로 도드라져 «배경» 이 아니라 «사진» 으로 보였다.
     칸을 따로 둬서 금빛보다 뒤에 깔고, 네 변을 모두 흐리게 지워(mask) 테두리를 없앤다. */
/* 두 장을 겹친다 — 게임도 그렇게 쓴다: 가로로 긴 배경(카드·빛) 위에 고블린을 얹는다.
   고블린은 정사각형이라 혼자 쓰면 가운데 네모로 보인다(2026-10-01 지적).
   가장자리는 «불규칙하게» 사라져야 한다 — 원 하나로 지우면 동그란 테두리가 오히려 눈에 띈다.
   크기·중심이 다른 타원 넷을 겹쳐 지워, 어디가 끝인지 모르게 흩어지도록 했다. */
/* 자리는 «검색창과 황고 사이» 에 못 박는다(2026-10-01 요청) — 화면 아래에 붙여 두면
   창 높이에 따라 그림이 아래로 쏠려 황고 글자와 어긋난다. 메뉴바(68) + 히어로 위쪽만큼 내려온다. */
/* 쪽(.home)에 붙인다 — fixed 였을 땐 스크롤해도 그림만 제자리에 붙어 있었다(2026-10-02 지적).
   두 겹이다: 바깥(.gzbg)은 «자르는 틀», 안(::before)이 실제로 그린다.
   ⚠ 한 겹으로 두면 그림 상자(520px)가 쪽보다 아래로 삐져나와 그만큼 세로 스크롤이 생긴다
     — absolute 로 바꾼 뒤 실제로 26px 짜리 스크롤바가 생겼다(2026-10-02 지적).
     틀을 inset:0 로 쪽에 딱 맞추고 넘치는 부분을 잘라, 그림이 문서 높이를 못 늘리게 한다.
   잘린 자리가 가로선으로 보이지 않게 틀 아래 90px 을 서서히 지운다. */
.home.gz-img .gzbg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 60px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 60px),transparent);}
/* 자리는 틀의 위(= 쪽의 위)에서 센다 — 메뉴바(68)는 틀 밖이라 안 센다. */
.home.gz-img .gzbg::before{content:"";position:absolute;left:50%;top:212px;width:min(1500px,120vw);height:520px;
  transform:translateX(-50%);
  background-image:var(--gzimg),var(--gzbgimg);
  background-repeat:no-repeat,no-repeat;
  background-position:center 32%,center 34%;
  background-size:auto 62%,contain;
  filter:saturate(.45) blur(2px);opacity:.08;transition:opacity .8s,filter .8s;
  -webkit-mask-image:
    radial-gradient(58% 52% at 50% 42%,#000 18%,rgba(0,0,0,.55) 52%,transparent 84%),
    radial-gradient(42% 64% at 38% 36%,rgba(0,0,0,.8) 12%,transparent 74%),
    radial-gradient(46% 44% at 64% 50%,rgba(0,0,0,.7) 14%,transparent 72%),
    radial-gradient(76% 36% at 50% 66%,rgba(0,0,0,.45) 10%,transparent 78%);
  mask-image:
    radial-gradient(58% 52% at 50% 42%,#000 18%,rgba(0,0,0,.55) 52%,transparent 84%),
    radial-gradient(42% 64% at 38% 36%,rgba(0,0,0,.8) 12%,transparent 74%),
    radial-gradient(46% 44% at 64% 50%,rgba(0,0,0,.7) 14%,transparent 72%),
    radial-gradient(76% 36% at 50% 66%,rgba(0,0,0,.45) 10%,transparent 78%);
  -webkit-mask-composite:source-over;mask-composite:add;}
/* 떠다니는 움직임은 뺐다(2026-10-02 요청) — 배경이 흔들리면 그 위의 숫자가 따라 흔들려 보인다. */
/* 출현 중에만 그림에 색이 돈다 — 대기에는 거의 흑백으로 두어 «흰 톤» 과 어울리게. */
.home.gz-live.gz-img .gzbg::before{opacity:.22;filter:saturate(1) blur(2px);}

/* 금가루 — 아주 작은 점이 천천히 떠오른다. 대기에는 옅게, 출현 중에는 조금 더 */
.home::after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:0;transition:opacity .8s;
  background-image:radial-gradient(1.5px 1.5px at 12% 78%,rgba(255,228,120,.9),transparent 60%),
    radial-gradient(1px 1px at 27% 64%,rgba(255,228,120,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 88%,rgba(255,228,120,.8),transparent 60%),
    radial-gradient(1px 1px at 58% 70%,rgba(255,228,120,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 69% 84%,rgba(255,228,120,.85),transparent 60%),
    radial-gradient(1px 1px at 83% 66%,rgba(255,228,120,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 90%,rgba(255,228,120,.8),transparent 60%);
  animation:gzDust 14s linear infinite;}
@keyframes gzDust{from{transform:translateY(0)}to{transform:translateY(-40px)}}
.home.gz-wait::before{opacity:0;}
.home.gz-wait::after{opacity:.35;}
/* 금빛 번짐은 끈다(2026-10-01 요청) — 고블린 그림만으로 충분하고, 번짐이 가운데 얼룩처럼 보였다.
   칸은 남겨 둔다: 그림이 없을 때 쓸 자리이고, 되살리려면 opacity 만 올리면 된다. */
.home.gz-live::before{opacity:0;}
.home.gz-live::after{opacity:.8;}

/* 검색창과의 간격 115px — 880px 창에서 시계 한가운데가 화면 한가운데에 오도록 맞춘 값이다(2026-10-01 요청).
   검색창을 줄인 뒤 아래가 허전해 보여 중앙으로 올렸다. */
/* 검색창(또는 그 아래 우편 띠)과의 간격. 창 높이를 따라간다 — 고정값이면 낮은 창에서
   첫 화면이 넘쳐 세로 스크롤이 생긴다(2026-10-02 에 우편 띠가 87px 을 더 먹으면서 다시 겪었다). */
.gob{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;margin-top:58px;}
/* 머리글 — 왕관 · 이름 · (대기면)시각, 그 아래 빛줄기(2026-10-01 선택: C안).
   색으로 상태를 가른다 — 대기는 «흰 톤», 출현 중은 «금 톤». 글자를 안 읽어도 지금 떴는지 보인다.
   왕관도 대기에는 색을 빼 회색으로 둔다. */
.gzk{display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  font-size:16px;font-weight:800;letter-spacing:.01em;color:#f3f6fb;}
.gzk b{font-weight:800;}
/* 왕관은 늘 둥둥 떠 있다 — 대기에도 멈추지 않는다(살아 있는 느낌). 대기에는 색을 빼 흰 톤에 맞춘다. */
.gzcrown{font-size:22px;line-height:1;filter:grayscale(.55) brightness(1.15) opacity(.9);
  animation:gzFloat 3.2s ease-in-out infinite;}
@keyframes gzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gzk .gzl{font-size:12px;font-weight:600;color:var(--mut);}
/* 대기 머리글 — 👑 황고 : 오후 08:03:59 한 줄. 그 밑에 빛줄기, 그 밑이 숫자다.
   따로 있던 «젠타임 …» 줄(.gzspawn)과 «남은 시간» 줄(.gzsub.live)은 뺐다(2026-10-02) —
   큰 숫자가 그 말을 이미 하고, 두 상태 모두 «머리글 → 숫자» 두 칸뿐이라 높이가 저절로 맞는다.
   왕관(22px)과 글자·숫자의 크기가 달라 baseline 이 아니라 가운데로 맞춘다 — 이모지는 baseline 이 제각각이다. */
.gzrow{display:flex;align-items:center;gap:9px;}
.gzdot{color:rgba(233,237,245,.35);font-weight:400;}
.gzt{font-family:var(--num);font-size:21px;font-weight:700;color:#f6f9ff;letter-spacing:.01em;}
/* 오전/오후 — 숫자 글꼴이 아닌 본문 글꼴로, 숫자보다 한 단계 작고 흐리게. 시각의 «꼬리표» 다. */
.gzap{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:700;
  margin-right:7px;color:rgba(233,237,245,.6);letter-spacing:.02em;}
/* 빛줄기 — 대기에는 가만히, 출현 중에는 숨쉬듯 늘었다 줄어든다. */
.gzbeam{width:118px;height:2px;border-radius:2px;margin-top:2px;
  background:linear-gradient(90deg,transparent,rgba(233,237,245,.42),transparent);}
/* 출현 중 — 한 줄로 선다: 선 · 왕관 · 「황고 출현 중」 · 선.
   대기(세로)와 모양부터 다르게 둔 것이다 — 글자를 안 읽어도 지금 떴는지 보인다.
   선은 글자에서 멀어질수록 사라진다. 상자처럼 가두면 머리글이 알약이 되어 숫자와 경쟁한다. */
.gzk.on{flex-direction:row;align-items:center;gap:14px;
  color:rgba(240,204,34,.85);letter-spacing:.07em;}
.gzrule{flex:0 0 auto;width:74px;height:2px;border-radius:2px;
  box-shadow:0 0 10px rgba(240,204,34,.45);}
.gzk.on .gzrule:first-child{background:linear-gradient(90deg,transparent,rgba(240,204,34,.85));}
.gzk.on .gzrule:last-child{background:linear-gradient(90deg,rgba(240,204,34,.85),transparent);}
.gztx{font-weight:800;text-shadow:0 0 14px rgba(240,204,34,.5);}
.gzk.on .gzcrown{filter:drop-shadow(0 0 12px rgba(240,204,34,.85));}
/* 왕관과 «황고 출현 중» 은 천천히 숨쉰다 — 빠르면 산만하고, 느리면 «지금 벌어지는 중» 으로 읽힌다.
   둘의 주기를 같게 둬야 따로 노는 것처럼 안 보인다. 왕관은 둥둥 뜨기(transform)와 겹쳐 돌린다 —
   건드리는 속성이 달라(transform / opacity) 서로 안 먹는다.
   ⚠ 한 번 전부 걷었다가 이 둘만 되살렸다(2026-10-02). 걷었던 나머지는 되살리지 않는다:
     · 빛줄기(gzBeam) — 셋이 각자 숨쉬니 머리글이 소란스러웠다
     · 숫자 칸(gzFlare 등) — «1초마다» 라 무엇을 넣든 결국 깜빡이는 화면이 된다 */
/* 줄 전체가 한 몸으로 숨쉰다 — 글자만 깜빡이면 양옆 선과 왕관이 따로 논다.
   왕관의 «둥둥»(transform)은 자식에 그대로 두고, 깜빡임(opacity)만 부모가 맡는다 — 속성이 달라 안 겹친다. */
.gzk.on{animation:gzSlowBlink 2.8s ease-in-out infinite;}
@keyframes gzSlowBlink{0%,100%{opacity:1}50%{opacity:.42}}
@media (prefers-reduced-motion: reduce){ .gzk.on,.gzcrown{animation:none;} }
/* 남은 시간 — 시·분·초를 칸에 나눠 담는다(2026-10-01 선택).
   칸마다 폭이 고정이라 초가 바뀌어도 숫자가 좌우로 안 흔들린다. «시간» 칸은 한 시간 넘게 남았을 때만 선다. */
/* 쌍점은 숫자 글자 밑에 깔린 것(칸 안쪽 여백 + 라벨)만큼 띄워야 숫자 한가운데에 선다.
   두 갈래가 같은 틀을 쓰므로 값도 하나다(아래 폰 규칙에서만 바꾼다). */
.gzseg{display:flex;align-items:flex-end;justify-content:center;gap:9px;margin-top:16px;--gzpb:34px;}
.gzu{display:flex;flex-direction:column;align-items:center;gap:6px;}
/* 대기 — 흰 톤. 출현 중(아래 .live)에서만 금으로 바뀐다.
   틀을 뺐다가 되돌렸다(2026-10-02) — 숫자만 두니 배경 그림 위에서 자리가 흐려 보였다. */
.gzv{font-family:var(--num);font-size:56px;font-weight:700;line-height:1;color:#fbfdff;min-width:100px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.26);border-radius:13px;padding:14px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);}
.gzl2{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:rgba(233,237,245,.55);}
/* 숫자 칸에는 아무 효과도 없다(2026-10-02 최종).
   세 가지를 차례로 해 보고 전부 걷었다 — 깜빡임(시한폭탄)·뒤집기(split-flap)·틀 번쩍임(flare).
   공통된 문제는 하나였다: 어느 쪽이든 «1초마다» 일어나니 결국 깜빡이는 화면이 된다.
   남은 시간은 숫자가 줄어드는 것만으로 충분히 읽힌다. 움직임은 왕관 하나로 족하다. */
.gzcolon{font-family:var(--num);font-size:36px;font-weight:700;color:rgba(233,237,245,.38);padding-bottom:var(--gzpb);}
/* 출현 중 — 칸까지 금 톤으로 바뀐다. 깜빡임은 두 번 해 보고 뺐다(2026-10-01) — 테두리를 숨쉬게 하면
   칸이 통째로 들썩이고, 숫자를 반짝이게 하면 읽는 중에 거슬린다. 색 차이만으로 충분하다. */
.gzseg.live .gzv{color:#fff3c4;border-color:rgba(240,204,34,.5);
  background:linear-gradient(180deg,rgba(240,204,34,.24),rgba(240,204,34,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 26px -8px rgba(240,204,34,.6);}
.gzseg.live .gzl2{color:rgba(240,204,34,.6);}
.gzseg.live .gzcolon{color:rgba(240,204,34,.42);}
/* 큰 숫자 밑의 «남은 시간»(2026-10-05). 출현 중에는 금빛 기운만 남긴 회색이다. */
.gzleft{font-size:12px;font-weight:600;color:var(--mut);margin-top:12px;}
.gzseg.live + .gzleft{color:rgba(196,184,138,.6);}     /* 채도를 뺀 누런 회색 — 금빛 그대로면 칸 이름표와 겨뤄 시끄럽다 */
.gzmsg{font-size:14px;color:var(--mut);margin-top:14px;}
/* 실패 안내 밑의 «다시 시도» — 첫 화면의 황고 · 우편함. 말과 단추 사이를 띄운다(2026-10-06). */
.gzmsg .rkretry,.mbmsg .rkretry{margin-top:10px;}
/* 폰·낮은 창 — 고정값이 화면을 넘치므로 여기서만 줄인다. */
@media (max-width:820px){ .gob{margin-top:120px;} .gzv{font-size:40px;min-width:74px;padding:10px 11px;} .gzcolon{font-size:28px;} .gzseg{--gzpb:26px;} }
/* 낮은 창 — 더 줄인다. 예전엔 150px 로 «늘렸는데», 그만큼 첫 화면이 화면을 넘어
   세로 스크롤이 생겼다(2026-10-02). 자리가 좁을수록 덜 띄우는 게 맞다. */
/* 낮은 창 — 로고 위 여백부터 줄인다. 우편 카드가 두꺼워진 만큼 어딘가는 양보해야 하는데,
   맨 위 빈 자리가 가장 덜 아깝다(황고와 우편 사이 간격은 지킨다). */
@media (max-width:480px){ .gob{margin-top:80px;} .gzv{font-size:32px;min-width:60px;padding:8px 9px;} .gzl2{font-size:10px;} .gzcolon{font-size:22px;} .gzseg{--gzpb:22px;} }
@media (prefers-reduced-motion: reduce){
  .home::after,.gzk.on i{animation:none;}
}
.btag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:0;padding:3px 11px;border-radius:999px;line-height:1.45;display:inline-flex;align-items:center;}
/* 중보·월보 색은 상세 전적의 .ufmd 와 동일하게 (중보=파랑 #2b8cef / 월보=핑크 #e067b0) */
.btag.mb{color:#2b8cef;background:rgba(43,140,239,.14);box-shadow:inset 0 0 0 1px rgba(43,140,239,.35);}
.btag.wb{color:#e067b0;background:rgba(224,103,176,.14);box-shadow:inset 0 0 0 1px rgba(224,103,176,.35);}
/* 둘째 칸 — 어떤 특효가 걸리나. 색은 상세의 보특/결특 칸(.umtag)과 같다. */
.btag.bs{color:#22d8c2;background:rgba(34,216,194,.12);box-shadow:inset 0 0 0 1px rgba(34,216,194,.3);}
.btag.du{color:#a06be2;background:rgba(160,107,226,.14);box-shadow:inset 0 0 0 1px rgba(160,107,226,.35);}
.sbmeta .btag+.btag{margin-left:-3px;}
/* 상태 배지 — 한글 표기(토벌 중/처치)라 숫자 폰트가 아닌 본문 폰트를 쓰고,
   대문자용으로 넣었던 자간(.06em)은 한글에선 벌어져 보이므로 없앤다. */
/* 옆의 출현시각(.btime)과 무게가 맞도록 한 단 작게 — 배지가 커서 시각 표기를 눌렀었다. */
.bstat{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:0;padding:2px 9px;border-radius:999px;white-space:nowrap;}
/* 보스 정보 칸 — «경과 12:34»(토벌 중) · «격파 15:30»(처치 뒤). 2026-10-09.
   기본(PC · 폰): 배지 줄 바로 밑에 작은 한 줄. 줄을 통째로 차지하게 해서(flex-basis 100%) 아래로 넘긴다 — 배지가 몇 개든 자리가 같다.
     PC 는 칸이 좁고(348px), 폰은 월보처럼 배지가 셋이면 옆에 설 자리가 없어 저 혼자 아랫줄로 떨어졌다(중보와 자리가 달라졌다).
     이름표와 시각을 같은 크기로 둔다(숫자만 크면 따로 논다). 이름표도 «격파» 로 줄인다.
   넓은 폰 배치(폭 600~820 — 펼친 폴드 · 세로 태블릿): 배지 줄의 오른쪽 끝에 크게. 칸이 화면 폭을 다 써서 배지 셋 옆에도 자리가 남는다.
   숫자 폭이 바뀌어도 글자가 떨리지 않게 고정폭 숫자를 쓴다(1초마다 바뀐다). */
.sbinfo:has(.sbside){flex:1;}
.sbmeta:has(.sbside){align-self:stretch;}
.sbside{flex:0 0 100%;display:flex;align-items:baseline;gap:6px;line-height:1;}
.sbsl{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap;}
.sbst{font-family:var(--num);font-size:12px;font-weight:700;line-height:1;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.sbslm{display:none;}
body.live .sbst.lv{color:#bdffdf;text-shadow:0 0 12px rgba(79,208,138,.45);}
@media(min-width:600px) and (max-width:820px){
  .sbside{flex:0 0 auto;margin-left:auto;display:inline-flex;gap:7px;}
  .sbsl{font-size:11px;}
  .sbst{font-size:17px;}
  .sbslm{display:inline;}
}
.bstat .bd{width:5px;height:5px;border-radius:50%;}
.bstat.dead{color:#8a93a5;background:rgba(120,130,150,.10);border:1px solid var(--line2);}
.bstat.dead .bd{background:#6b7385;box-shadow:none;}
/* 진행 중인 회차 표시 — 배지가 통째로 숨쉰다.
   전에는 점에서만 파동이 퍼졌는데, 5px 짜리라 배지 옆을 스칠 때 잘 안 잡혔다.
   지금은 글자·테두리·배경이 함께 밝아졌다 어두워진다 — 작은 배지에서는 이쪽이 먼저 보인다.
   자리는 안 움직인다. transform 대신 opacity 만 건드려서, 옆의 출현시각과 나란히 읽어도 시선이 안 튄다.
   같은 줄의 '● LIVE' 는 일부러 정적으로 둔다 — 한 화면에 깜빡이는 건 하나면 충분하다. */
.bstat.alive{color:#5fc78e;background:rgba(79,208,138,.12);border:1px solid rgba(79,208,138,.35);
  animation:aliveBlink 1.7s ease-in-out infinite;}
.bstat.alive .bd{background:#4fd08a;box-shadow:0 0 6px rgba(79,208,138,.9);}
@keyframes aliveBlink{
  0%,100%{opacity:1;   box-shadow:0 0 0 0 rgba(79,208,138,0);}
  50%    {opacity:.45; box-shadow:0 0 9px 0 rgba(79,208,138,.30);}
}
@media(prefers-reduced-motion:reduce){ .bstat.alive{animation:none;} }

.scroll{overflow-x:auto;}
/* 순위 칸은 등락 표시가 빠져 76→48px 로 충분 — 그만큼 플레이어가 왼쪽으로 당겨진다 */
.cols,.row{display:grid;grid-template-columns:48px minmax(200px,1.2fr) minmax(260px,1.5fr) 140px 92px 168px;
  align-items:center;gap:16px;min-width:980px;}
/* ═══ 랭킹 뷰 — 행을 카드로 분리한 배치 ═══
   컬럼: 순위 / 플레이어 / 최근5전 평균딜 / 역대 딜량 / 평균 순위 / 입상 / TOP10 등장 / 최근 순위 */
.scroll.rank .cols,.scroll.rank .row{
  /* 남는 폭은 1fr 인 플레이어 컬럼이 흡수한다. 마지막 컬럼을 154→184px 로 넓히면
     그만큼 플레이어 컬럼이 줄어 가운데 컬럼들이 30px 왼쪽으로 당겨진다.
     (fr 로 나누려 했으나 최소폭보다 작은 fr 은 트랙이 min 에 고정돼 효과가 없었다)
     ⚠️ min-width 는 border-box 라 패딩·테두리까지 포함한다. 컬럼 합만 넣으면 그리드가
        카드 안쪽 패딩을 잠식해 마지막 칩이 테두리에 달라붙는다(실측 여백 16→5px).
          컬럼합 926 + gap 14×7=98 → 내용 1024
          행 = 1024 + 패딩 32 + 테두리 2 = 1058  /  헤더 = 1024 + 패딩 34 = 1058
        동시에 본문 폭(body 1120 - .wrap 패딩 48 = 1072px)을 넘기면 안 된다.
        넘기는 순간 데스크탑 최대폭에서도 표 안쪽에 영구 가로 스크롤이 생긴다.
     최근 순위 166px: 칩 7개 = 20px×7 + gap 3px×6 = 158px + 여유 8px.
     TOP10 등장 96→88px: 칩이 5→7개로 늘어난 만큼을 여기서 내줬다.
     평균순위 86→106px: 헤더가 "평균 순위(최근 5회)"로 길어져 101px + 정렬화살표 여유 필요.
       그만큼을 최고 보스딜 122→102px 에서 가져왔다(그쪽은 헤더 64px·값 ~72px 라 여유가 있음).
       총합은 그대로라 min-width 는 유지된다. */
  grid-template-columns:70px minmax(150px,1fr) 132px 102px 106px 112px 88px 166px;
  gap:14px;min-width:1058px;}
.scroll.rank .cols .avgh,.scroll.rank .avgr{text-align:center;}
/* TOP 10 등장 — 평균순위와 최근순위 사이에서 가운데로 */
.scroll.rank .cols .tenh{text-align:center;}
.tenc{text-align:center;}
/* 정렬 가능 헤더 — 비활성 회색 / 활성 라벤더 + 화살표 */
.scroll.rank .cols .shdr{cursor:pointer;color:var(--mut);transition:color .12s;}
.scroll.rank .cols .shdr:hover{color:var(--ink2);}
.scroll.rank .cols .shdr.sorton{color:#b8a6ea;font-weight:700;}
/* 정렬 헤더 — 화살표가 라벨 폭에 끼면 라벨 중심이 화살표 절반만큼 밀려
   값과 중앙이 안 맞는다. 그런데 그리드 아이템은 inline-block 을 줘도 block 으로
   강제 변환(blockification)되어 셀 폭을 다 차지하므로, 안쪽에 .lbl 을 두고
   그것을 기준으로 화살표를 absolute 로 빼낸다. */
.scroll.rank .cols .lbl{display:inline-block;position:relative;font-style:normal;}
/* 헤더 안의 기간 표기 "(최근 5회)" — 본 제목보다 한 단 낮춰 컬럼명이 먼저 읽히게 한다. */
.scroll.rank .cols .lbl em{font-style:normal;font-size:9.5px;color:var(--mut2);
  letter-spacing:0;margin-left:3px;}
/* 정렬 활성 시엔 em 도 활성색을 따라간다. em 에 색을 직접 박아두면 .sorton 보다
   선택자 우선순위가 높아 "평균 순위"만 보라색이고 "(최근 5회)"는 회색으로 남는다.
   inherit + opacity 로 색은 맞추되 한 단 낮은 위계는 유지한다. */
.scroll.rank .cols .shdr.sorton .lbl em{color:inherit;opacity:.9;}
.scroll.rank .cols .sarrow{position:absolute;left:100%;top:50%;
  transform:translateY(-50%);margin-left:3px;font-size:9px;opacity:.55;}
.scroll.rank .cols .sarrow.on{opacity:1;}
/* 헤더는 카드 안쪽 여백과 줄을 맞춘다(테두리 없음) */
.scroll.rank .cols{padding:2px 17px 12px;border-bottom:0;}
/* 행 = 독립 카드. 리더보드 컨테이너의 배경/테두리는 걷어낸다. */
.lb:has(.scroll.rank){background:none;border:0;border-radius:0;overflow:visible;}
.scroll.rank .rows{padding:0;display:flex;flex-direction:column;gap:8px;}
.scroll.rank .rows .row{padding:13px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;transition:border-color .12s,background .12s;}
.scroll.rank .rows .row+.row::before{display:none;}   /* 카드 사이 구분선 불필요 */
.scroll.rank .rows .row:hover{background:var(--panel2);border-color:var(--line2);}
/* 1위 — 초록 테두리 + 왼쪽에서 사라지는 옅은 워시 */
.scroll.rank .rows .row.champ{border-color:rgba(34,216,194,.45);
  box-shadow:0 0 16px -6px rgba(34,216,194,.5);
  background:linear-gradient(90deg,rgba(34,216,194,.07),transparent 45%);}
/* 평균 순위 알약 */
.scroll.rank .avgr{display:flex;justify-content:center;}
.apill{font-family:var(--num);font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;
  line-height:1.25;white-space:nowrap;}
.apill.dim{color:var(--mut);background:rgba(124,134,152,.12);box-shadow:inset 0 0 0 1px var(--line2);}
/* 입상 — 1등/2등/3등 횟수를 x/x/x 로. 값의 색은 순위 배지와 같은 체계(--g1·--g2·--g3)라
   헤더에 범례를 달지 않아도 어느 숫자가 몇 등인지 색으로 읽힌다.
   헤더 자체는 다른 컬럼 제목과 같은 회색을 그대로 쓴다(색을 넣으면 헤더 줄만 튄다).
   0 은 --mut2 로 눌러서 실제 입상 기록만 눈에 들어오게 한다. */
.scroll.rank .cols .podh{text-align:center;}
.podc{text-align:center;white-space:nowrap;
  font-family:var(--num);font-size:15px;font-weight:700;}   /* 15 — 딜량 최고치 · TOP 10 횟수와 같은 크기(2026-10-11 맞춤. 전 14) */
/* 상세 화면의 «순위별 상위권 횟수»(.mrv.pod)도 여기 색을 같이 쓴다 — 두 화면이
   같은 수를 다른 색으로 말하면 안 된다(2026-10-03). 선택자를 따로 두면 한쪽만 고치게 된다. */
.podc .p1,.mrv.pod .p1{color:var(--g1);}
.podc .p2,.mrv.pod .p2{color:var(--g2);}
.podc .p3,.mrv.pod .p3{color:var(--g3);}
.podc .z,.mrv.pod .z{color:var(--mut2);}
.podc .sl,.mrv.pod .sl{color:var(--ink);font-weight:400;margin:0 3px;}
/* TOP 10 등장 횟수 */
.tenc{white-space:nowrap;}
.tenc b{font-family:var(--num);font-size:15px;font-weight:700;color:var(--ink);}
.tenc i{font-family:var(--sans);font-style:normal;font-size:10.5px;color:var(--mut);margin-left:3px;}
/* 랭킹 숫자값 볼드 */
/* 최근 5전 평균딜 · 역대 딜량 — 헤더와 값 모두 가운데 정렬.
   .dmg 는 flex-direction:column 이라 .num 이 셀 폭 전체로 늘어나므로
   text-align 을 반드시 지정해야 글자가 헤더와 맞는다. */
.cols .ctr{text-align:center;}
.scroll.rank .dmg .num{text-align:center;}
.scroll.rank .maxd{text-align:center;}
.scroll.rank .dmg .num,.scroll.rank .maxd .mv{font-weight:700;}
/* 딜량 최고치는 한 톤 낮춘다(2026-10-11 사용자 결정) — 굵기가 평균 보스딜과 같아(700) 두 숫자가 같은 무게로 보였다. 1위 줄의 불빛(.champ)은 그대로.
   PC: --ink2(#c2c9d6) → #aab2c1 · 폰의 줄임꼴(.mman): --ink → --ink2 */
.scroll.rank .maxd .mv{color:#aab2c1;}
/* 표 머리의 글자는 화면마다 11px 이다(2026-10-11 맞춤) — 레이드 · 랭킹(.cols) · 스펙(.sbhd · 폰 .sbch) · 랭커(.rktb th) · 상세 전적(.ufsl).
   전에는 10.5 · 11 · 11.5 가 섞여 있었다. 랭킹의 «TOP 10 등장»(.tenh)만 칸이 좁아 10.5 로 남는다. 폰 랭킹의 정렬 단추(.shdr)는 단추라 여기 안 든다. */
.cols{padding:14px 22px 11px;font-size:11px;color:var(--mut);border-bottom:1px solid var(--line);letter-spacing:.03em;}
.cols .r{text-align:right;}
.rows{padding:6px 0;}
.row{padding:11px 22px;position:relative;transition:background .12s;}
.row+.row::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--line);opacity:.5;}
.row:hover{background:var(--panel2);}
.rkcell{display:grid;grid-template-columns:20px 42px;align-items:center;column-gap:10px;}
/* 등락 표시가 없는 실시간 보드 — 숫자를 헤더('순위')와 같은 왼쪽 기준에 맞춘다 */
.rkcell.solo{grid-template-columns:1fr;}
.rkcell.solo .rk{text-align:left;}
.rk{font-family:var(--num);font-size:16px;font-weight:700;color:var(--mut);line-height:1;text-align:center;}
.rk.g1{color:#2b8cef;}
.rk.g2{color:#22d8c2;}
.rk.g3{color:#f0cc22;}
/* 4~10 등은 흰색. 그 아래는 .rk 기본(회색)이라 «상위권» 이 한눈에 갈린다. */
.rk.g10{color:var(--ink);}
/* 순위 1·2·3 티어색(시안) */
/* 1위 순위 숫자 = 원래 HR 파랑(위 .rk.g1 유지) */
/* 1위 지금회차 피해량 — 파랑 계열(HR) + 부드러운 블루 글로우 */
.rows .dmg .num.g1{color:var(--ink);text-shadow:none;}
/* 박자는 2초(2026-10-09. 처음 1.1초 — 빠르다는 지적 → 2.6초로 레이드 1위 줄과 맞췄다가 느리다고 해 2초로). 레이드의 1위 줄 번짐(topHalo)은 2.6초 그대로다. */
@keyframes blaze{0%,100%{text-shadow:0 0 9px rgba(255,150,60,.85),0 0 20px rgba(255,90,25,.5);}
50%{text-shadow:0 0 16px rgba(255,190,100,1),0 0 34px rgba(255,110,35,.8);}}
/* 1위 역대 최대 피해량 — 흰색 기준 불꽃 */
.scroll.rank .row.champ .maxd .mv{color:#fff;text-shadow:0 0 9px rgba(255,150,60,.8),0 0 20px rgba(255,95,25,.5);animation:blaze 2s ease-in-out infinite;}
/* 1위 닉네임 — 불타는 이펙트(역대최대와 동일: 흰 글자 + 주황 글로우). overflow 해제로 글로우 안 잘리게 */
.scroll.rank .row.champ .nm{color:#fff;text-shadow:0 0 9px rgba(255,150,60,.8),0 0 20px rgba(255,95,25,.5);animation:blaze 2s ease-in-out infinite;overflow:visible;}
/* 1위 Avg Rank 값 — 최근 5전 ADR과 동일한 azure 글로우(볼드로 진하게) */
.scroll.rank .row.champ .avgr{font-weight:700;text-shadow:0 0 10px rgba(43,140,239,.75),0 0 20px rgba(43,140,239,.45);}
/* 1위 ADR 값(랭킹) — 닉네임과 동일한 불꽃(흰 글자 + 주황 글로우) */
/* 랭킹 뷰 1위 — 닉네임과 딜량 모두 불타는 연출 */
.scroll.rank .row.champ .dmg .num{color:#fff;text-shadow:0 0 9px rgba(255,150,60,.8),0 0 20px rgba(255,95,25,.5);animation:blaze 2s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.scroll.rank .row.champ .dmg .num{animation:none;}}
@media(prefers-reduced-motion:reduce){.scroll.rank .row.champ .maxd .mv,.scroll.rank .row.champ .nm{animation:none;}}
.dl{font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--mut);
  display:block;height:16px;line-height:16px;text-align:left;white-space:nowrap;overflow:hidden;}
.dl .ar{font-style:normal;font-size:7.5px;margin-right:2px;vertical-align:1.5px;}
.dl.dup{color:#5fc78e;}
.dl.ddn{color:#e08585;}
.dl.dflat{color:var(--mut2);}
.dl.dnew{color:#b8a6ea;font-size:8px;}
.pl{display:flex;align-items:center;gap:12px;min-width:0;}
.av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#232b3d,#141a27);box-shadow:0 0 0 1px var(--line2);}
.av.fr{box-shadow:0 0 0 1px #c86bff66,0 0 8px -2px #c86bff88;}
.av.fs{box-shadow:0 0 0 1px #b9c6db88;}
.av .sheen{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:2;}
.av.fs .sheen::before,.av.fr .sheen::after{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:55%;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  mix-blend-mode:screen;animation:avSheen 2.9s linear infinite;}
.av.fr .sheen::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,140,205,.6) 16%,rgba(255,225,140,.55) 32%,rgba(150,255,205,.55) 48%,rgba(140,205,255,.6) 64%,rgba(205,150,255,.6) 80%,transparent 100%);
  background-size:300% 100%;mix-blend-mode:screen;opacity:.62;animation:avPrism 3.5s linear infinite;}
@keyframes avSheen{0%{transform:translateX(-140%)}
100%{transform:translateX(320%)}}
@keyframes avPrism{0%{background-position:120% 0}
100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.av.fs .sheen::before,.av.fr .sheen::before,.av.fr .sheen::after{animation:none;}}
.av img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;}
.av .fb{width:100%;height:100%;display:grid;place-items:center;font-family:var(--disp);font-size:14px;font-weight:600;}
.nm{font-family:var(--sans);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.me .nm{color:#aeb8ff;}
.mebadge{font-family:var(--disp);font-size:9.5px;font-weight:600;color:var(--me);border:1px solid rgba(123,140,255,.4);
  border-radius:5px;padding:1px 5px;margin-left:7px;vertical-align:middle;letter-spacing:.05em;}
.dmg{position:relative;display:flex;flex-direction:column;justify-content:center;height:40px;}
.dmg .bar{position:absolute;left:0;bottom:6px;height:3px;border-radius:2px;}
.dmg .track{display:none;}   /* 남은 구간 회색 트랙은 쓰지 않는다 */
/* 실시간 보드: 숫자는 오른쪽 정렬, 그 아래 얇은 게이지(트랙 없음) */
.dmg .num{font-family:var(--num);font-size:15px;font-weight:700;text-align:right;
  letter-spacing:-.01em;position:relative;padding-bottom:8px;color:var(--ink);}
/* 순위권 딜량 숫자는 흰색 통일 — 순위 색은 아래 게이지가 나타낸다 */
.dmg .num.g1,.dmg .num.g2,.dmg .num.g3{color:var(--ink);}
.dmg.nobar .num{padding-bottom:0;}
/* 랭킹: 게이지 없음 → 세로 중앙 */
.dmg .num .u{font-family:var(--sans);font-size:11px;color:var(--mut);font-weight:400;margin-left:3px;}
/* 값이 없는 칸. 숫자 칸과 같은 자리에 같은 크기로 — 빈 칸이면 줄이 밀린다. */
.mdash{font-family:var(--num);font-weight:600;color:var(--mut2);}
.maxd{font-family:var(--num);font-size:15px;font-weight:500;color:var(--ink2);text-align:center;}
.avgr{font-family:var(--num);font-size:14px;font-weight:700;color:var(--mut);text-align:center;}
.form{display:flex;justify-content:flex-end;}
.chips{display:inline-flex;gap:3px;}
.chip{width:20px;height:23px;border-radius:5px;display:grid;place-items:center;
  font-family:var(--num);font-size:11px;font-weight:600;
  opacity:0;transform-origin:center bottom;}
.chip.show{animation:chipPop .42s cubic-bezier(.22,.75,.3,1) both;}
@keyframes chipPop{0%{opacity:0;transform:translateY(6px) scale(.9);}
100%{opacity:1;transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion:reduce){.chip{opacity:1;}
.chip.show{animation:none;}}
.foot{padding:14px 22px;border-top:1px solid var(--line);font-size:11px;color:var(--mut);line-height:1.7;
  display:flex;gap:16px;flex-wrap:wrap;}
.foot b{color:var(--ink2);font-weight:500;}
.row.me{background:linear-gradient(90deg,rgba(123,140,255,.12),rgba(123,140,255,.02));
  box-shadow:inset 3px 0 0 var(--me);}
.empty{padding:48px 22px;text-align:center;color:var(--mut);font-size:14px;}
.empty b{color:var(--ink2);}
.conn{font-family:var(--num);font-size:10px;color:var(--mut2);letter-spacing:.05em;}
.conn.busy{color:#e9c46a;font-family:var(--sans);letter-spacing:0;}      /* «갱신 중…» — 받아 둔 표를 보여 주며 새로 받는 동안(2026-10-15) */

/* ── 행 클릭 → 유저 상세 ── */
.rows .row{cursor:pointer;}
/* ── 유저 상세 패널 ── */
.up{padding:0;}
.back{color:var(--mut);background:var(--panel2);border:1px solid var(--line2);border-radius:8px;
  padding:6px 12px;font-family:var(--sans);font-size:12.5px;cursor:pointer;transition:.12s;}
.back:hover{color:var(--ink);}
/* ── 상세 패널의 상태 화면 (로딩 / 실패 / 기록없음) ──
   내용 대신 상태를 보여줄 때 쓰는 하나의 틀. 세 상태가 같은 자리·같은 크기를 쓴다. */
.ustate{display:grid;place-items:center;text-align:center;padding:76px 20px 92px;}
.ustico{font-size:34px;line-height:1;}
.ustmsg{font-size:17px;font-weight:700;margin-top:14px;letter-spacing:-.01em;}
.ussub{font-size:12.5px;color:var(--mut);margin-top:7px;line-height:1.75;}
.ussub b{color:var(--ink2);font-weight:600;}
.usbtn{margin-top:18px;}
.ubtn{font-family:var(--sans);font-size:12.5px;font-weight:600;border-radius:8px;padding:7px 16px;cursor:pointer;
  color:var(--g2);background:rgba(34,216,194,.13);border:1px solid rgba(34,216,194,.45);transition:.12s;}
.ubtn:hover{background:rgba(34,216,194,.2);}
/* (로딩은 스피너가 아니라 아래 스켈레톤을 쓴다 — .skb 참고) */
/* 부팅 실패 안내는 별도 스타일이 없다 — .ustate(상태 화면) 틀을 그대로 쓰고,
   보이고 숨기는 것은 index.html 의 일반 스크립트가 hidden 속성으로 처리한다. */

/* ── 로딩 스켈레톤 ──
   최종 화면과 '같은 컨테이너'(.bsum / .cols·.row / .udetA)를 그대로 쓰고 내용만 회색 블럭으로
   채운다. 그래서 데이터가 도착해도 자리가 밀리지 않는다 — 그리드 정의를 두 번 쓰지도 않는다.
   흔드는 건 투명도뿐이다. shimmer(그라디언트를 움직이는 방식)는 블럭마다 배경을 깔고
   위치를 애니메이션해야 해서, 행이 10개씩 되는 화면에선 비용이 커진다. */
@keyframes skpulse{50%{opacity:.45;}}
.skb{background:#1e232c;border-radius:6px;animation:skpulse 1.6s cubic-bezier(.4,0,.6,1) infinite;}
.skb.c{border-radius:50%;}
.skrow{cursor:default;pointer-events:none;}          /* 스켈레톤 행은 눌리지 않는다 */
.skstack{display:flex;flex-direction:column;gap:7px;}
.skline{display:flex;align-items:center;gap:8px;}
@media (prefers-reduced-motion:reduce){ .skb{animation:none;opacity:.7;} }

.cempty{color:var(--mut);font-size:12px;padding:14px 0;}

/* ── 덱 스펙 그리드 (카드 스타일은 cards.css = 게임 원본 이식) ── */
.deck{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start;}
.deck .dcard{position:relative;min-width:0;}
.deck .cardwrap,.deck .card,.deck .frame{min-width:0;width:100%;}
.deck .card{padding:0;}
/* 테두리 최소 */
.deck .card .frame{padding:1px;}
/* 카드 안 원본 뱃지·회전링·이펙트는 숨김(정보 밀도 우선) — 강화는 우측 아래 뱃지로만 표시 */
.deck .cardwrap>.card .enh-badge,.deck .enh-ring,.deck .enh-fx{display:none;}
.deck .dcard>.denh2.enh-badge{display:flex;}
/* 우측 아래 강화 뱃지 = 게임 스타일(t1~t6) */
/* 강화 뱃지 — 게임 원본(enh-badge + enh-t 티어색) 재사용,위치만 카드 우측 아래로 + 안쪽 여백.
   cards.css의 .enh-badge{top:6px;left:6px}
보다 우선하도록 선택자를 길게 잡는다. */
.deck .dcard>.denh2.enh-badge{position:absolute;z-index:9;bottom:8px;right:8px;top:auto;left:auto;
  min-width:22px;height:17px;padding:0 5px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:900;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:.3px;
  pointer-events:none;}
/* background는 지정하지 않는다 — cards.css의 .enh-badge(기본 어두운 배경)와
   .enh-t6(프리즘 그라데이션)가 그대로 적용되도록 두기 위함. */
.deck .card .topbar,.deck .card .namebox{display:none;}
/* 상단 HR·별 + 이름 숨김 */
.deck .card .photo{aspect-ratio:3/4.1;}
/* 카드 세로 비율(레퍼런스) */
@media(max-width:560px){.deck{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* ═══ 유저 상세 A — 사이드 프로필 + 날짜블럭 전적 ═══ */
.udetA{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:14px;}
.udetA>.uside,.udetA>.umain{min-width:0;}
@media(max-width:820px){.udetA{grid-template-columns:1fr;}}
.upcard{background:linear-gradient(150deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;
  padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.upcard>.av{width:92px;height:92px;margin-bottom:6px;}
.upcard>.av .fb{font-size:34px;}
/* 로딩 틀의 얼굴 자리 — 실제 얼굴(.av)과 같은 아래 여백을 줘야 블럭 높이가 맞는다(안 주면 6px 짧다). */
.upcard.sk>.skb.c{margin-bottom:6px;}
.upname{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.1;word-break:break-all;}
.uavgblock{width:100%;display:flex;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.uab{flex:1;display:flex;flex-direction:column;gap:4px;}
.uabl{font-size:11px;color:var(--mut);font-weight:400;}
/* 기간 표기 "(최근 5회)" — 항상 둘째 줄로 내린다.
   좌측 컬럼이 좁아 한쪽만 줄바꿈되면 두 .uab 의 라벨 높이가 달라져 값이 어긋난다. */
.uabl em{display:block;font-style:normal;font-size:9.5px;color:var(--mut2);margin-top:1px;}
/* 값은 볼드(700=진짜 Arial Bold). 800 은 합성 볼드가 되므로 금지. 라벨(.uabl)은 400 유지. */
.uabv{font-family:var(--num);font-weight:700;font-size:19px;letter-spacing:-.01em;}
.uabv.acc{color:#22d8c2;}
.uabv.w{color:#fff;}
/* 뒤로 버튼 한 줄. 예전엔 오른쪽에 갱신 시각을 같이 뒀다가 뺐다 —
   프로필 스냅샷 시각이라 전적이 언제 갱신됐는지로 오해할 여지가 있었다. */
.uhd{display:flex;align-items:center;}
/* 1위와의 격차 게이지 */
.ugapbar{width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}

.ugbtop{position:relative;height:17px;}
/* 값이 양끝에서 삐져나가지 않게 컨테이너 안으로 클램프 */
.ugbcur{position:absolute;top:0;white-space:nowrap;
  font-family:var(--num);font-size:12.5px;font-weight:700;color:#fff;}
.ugbtrack{position:relative;height:6px;border-radius:4px;background:var(--line);margin-top:5px;}
.ugbfill{position:absolute;left:0;top:0;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#2b8cef,#22d8c2);}
.ugbdot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
  background:#22d8c2;box-shadow:0 0 0 2px var(--panel),0 0 9px -1px #22d8c2;}
.ugbdot.first{background:#f0cc22;box-shadow:0 0 0 2px var(--panel),0 0 10px -1px #f0cc22;}
/* 결특 블럭 안의 게이지는 결특의 색(보라)이다. 1위 금색은 그대로 둔다(:not(.first)). */
.msum.d .ugbfill{background:linear-gradient(90deg,#6a4fd6,#a06be2);}
.msum.d .ugbdot:not(.first){background:#a06be2;box-shadow:0 0 0 2px var(--panel),0 0 9px -1px #a06be2;}
.ugblbl{display:flex;justify-content:space-between;margin-top:9px;font-size:10.5px;color:var(--mut);font-weight:600;}
.ugblbl b{font-family:var(--num);color:var(--ink2);font-weight:700;}
.ugbfirst{color:#f0cc22;font-weight:700;}
/* 사이드 분리 블럭 (최근 순위 / 스페셜 1등) */
.ublk{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin-top:14px;}
.ublkt{font-size:11.5px;color:var(--mut);font-weight:700;margin-bottom:11px;}
/* 정복전·점령전 1등 횟수 */
.uspbox{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.uspb{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 8px;
  display:flex;flex-direction:column;align-items:center;gap:5px;}
.uspi{font-size:16px;line-height:1;}
.uspl{font-size:10.5px;color:var(--mut);font-weight:600;}
.uspn{font-family:var(--num);font-size:18px;font-weight:700;color:#fff;line-height:1;}
.uspn i{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--mut);font-style:normal;margin-left:2px;}
/* 덱 패널 — 큰 블럭 + 헤더 */
.dkpanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;margin-bottom:16px;}
.dkhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.dkt{font-size:12.5px;font-weight:400;color:var(--mut);}
/* ── 스펙(성장) · PVP (2026-10-04, 2026-10-06 다시) ──
   스펙: 프로필 블럭의 순위 칸 밑. 항목마다 «제 상자» 하나 — 회색 이름 밑에 흰 굵은 값(2026-10-06).
     전에는 색 값이 든 알약이었다. 순위 칸이 넷으로 늘며 프로필에 색이 많아져, 스펙은 이름과 값만 남겼다.
     상자는 늘 셋이고 폭을 똑같이 나눠 갖는다(2026-10-08 — 값이 없는 칸도 «–» 로 선다. 전에는 있는 만큼만 세웠다).
   덱 랭킹 · 전투력은 프로필의 «덱 랭킹» 칸으로 올라갔다 — 대표 덱 머리줄에는 이름만 남는다. */
.ugrow{grid-column:1/-1;box-sizing:border-box;width:100%;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;}
.gc{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;align-items:baseline;column-gap:5px;row-gap:6px;
  min-width:0;box-sizing:border-box;padding:11px 4px 12px;border-radius:12px;line-height:1.25;white-space:nowrap;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.gc em{grid-column:1/-1;text-align:center;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--mut);}
.gc b,.gc i{font-family:var(--num);font-style:normal;font-size:12.5px;font-weight:700;color:#fff;}
/* 값이 없는 칸 — «–» 한 글자. 덱 · PVP 랭킹 칸의 «–»(.uprv b.dim)와 같은 색 · 굵기다. 글자 크기는 이 상자의 것을 따른다 — 상자 높이가 값이 있는 칸과 같아야 한다.
   값이 하나뿐인 칸(«–» · MUR 의 «Lv.15»)은 두 칸(주 값 · 덧붙는 값)에 걸쳐 가운데 놓는다 — 한 칸에만 두면 칸 사이 틈의 반(2.5px)만큼 왼쪽으로 쏠린다
   (MUR 이 전부터 그랬다. «–» 와 나란히 서면 어긋나 보여 같이 바로잡는다). */
.gc b:last-child{grid-column:1/-1;text-align:center;}
.gc b.dim{color:var(--mut2);font-weight:600;}
/* 덱 없음 — 카드와 같은 비율의 빈 슬롯으로 높이 유지,문구는 중앙 */
.deck.dkempty{position:relative;}
.dkslot{aspect-ratio:3/4.1;border-radius:10px;background:rgba(255,255,255,.015);
  border:1px dashed var(--line2);opacity:.5;}
.dkemsg{position:absolute;inset:0;display:grid;place-items:center;
  font-size:12.5px;color:var(--mut);font-weight:600;pointer-events:none;}
.uformbox{width:100%;margin-top:15px;padding-top:15px;border-top:1px solid var(--line);}
.ufl{font-size:11px;color:var(--mut);font-weight:600;margin-bottom:9px;text-align:left;}
.uform2{position:relative;}          /* 칩 정보창(.chiptip)의 위치 기준 */
/* 한 줄에 열 칸 — 칸이 블럭 폭을 나눠 가져 좌우가 꽉 찬다(2026-10-05 요청).
   예전엔 21px 고정 칸을 흘려 담아 PC 는 오른쪽이 17px 남고, 폰은 폭에 따라 13+7 로 갈렸다.
   스무 칸이면 어느 폭에서나 10+10 두 줄이다. 결특처럼 칸이 적으면 같은 크기로 왼쪽부터 선다. */
.uform2 .chips{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;}
/* hover 한 칩만 살짝 키워 정보창이 어느 회차에서 나왔는지 눈으로 잇는다.
   transform 이 아니라 개별 속성 scale 을 쓰는 이유: .chip.show 의 chipPop 애니메이션이
   fill-mode:both 라 재생이 끝난 뒤에도 transform 을 점유해 hover 규칙이 덮이지 않는다.
   (scale 은 transform 과 별개 속성이라 충돌하지 않는다) */
.uform2 .chip.hasinfo{cursor:default;position:relative;transition:scale .13s ease-out;}
.uform2 .chip.hasinfo:hover{scale:1.28;z-index:2;transform-origin:center;}
@media(prefers-reduced-motion:reduce){.uform2 .chip.hasinfo{transition:none;}}
/* 칩 hover 정보창 — 좌측 컬럼이 좁아 잘리기 쉬우므로 x 는 JS 가 컨테이너 폭 안으로 클램프한다.
   pointer-events:none 이어야 창이 커서를 가로채 깜빡이지 않는다. */
.chiptip{position:absolute;z-index:40;pointer-events:none;
  min-width:150px;padding:9px 11px;border-radius:10px;
  background:#0d1016;border:1px solid var(--line2);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8);
  display:flex;flex-direction:column;gap:5px;}
.ctrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;white-space:nowrap;}
.ctk{font-size:10.5px;color:var(--mut);font-weight:600;}
/* 첫 줄 라벨 = 모드. 색 기준은 전적 기록의 중보/월보 태그(.btag.mb/.wb)와 같게 맞춘다. */
.ctk.mode{font-size:11px;font-weight:700;}
.ctk.mode.mb{color:#2b8cef;}
.ctk.mode.wb{color:#e067b0;}
.ctv{font-size:12px;color:var(--ink);font-weight:600;}
.ctv.num{font-family:var(--num);font-weight:700;}
.uform2 .chip{width:auto;height:23px;}

/* 제목과 필터를 한 줄에, 제목 바로 옆에 둔다.
   align-items 는 center 가 아니라 baseline 이다 — 제목(12.5px)과 버튼 글자(11.5px)는
   크기가 달라서, 박스를 가운데 맞추면 글자 밑선이 어긋난다(실측 0.6px).
   크기가 다른 글자를 한 줄에 놓을 때는 밑선을 맞추는 게 맞다. */
/* 색은 --mut — 같은 층위의 블럭 제목(.dkt 대표 덱 · .ublkt 진영전 · .ufl 최근 순위)이
   모두 이 색이다. 여기만 --ink2 로 밝아서 혼자 튀고 있었다. */
.ufeedhd{font-family:var(--disp);font-size:14.5px;font-weight:700;color:var(--mut);margin:20px 0 11px;letter-spacing:.02em;
  display:flex;align-items:baseline;gap:14px;}
/* 전적 갈래 고르개(2026-10-03) — 왼쪽은 «보특/결특/전체» 스위치, 오른쪽 끝은 보특 안의 하위 셋.
   하위는 보특일 때만 보인다. 그 자리가 비면 회차 수가 대신 선다(ui/user.js 의 paintFeedHead).
   갈래가 바뀌면 그 갈래를 서버에서 따로 받는다 — 더보기가 그 탭 기준이 되게. */
.ffilter{display:flex;align-items:center;gap:4px;flex:1;min-width:0;}
/* 스위치 — 세 칸 중 하나가 켜진다. 알약 틀 안에서 칸만 옮겨 다닌다. */
.fsw{display:inline-flex;flex:0 0 auto;padding:2px;border-radius:9px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.fsw button{padding:4px 13px;border:0;border-radius:7px;background:none;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--mut);transition:color .12s,background .12s;}
.ffilter .fsw button{font-size:12.5px;}   /* 전적의 거르기 단추(전체 · 보특 · 결특)는 PC · 폰 모두 12.5(2026-10-11 맞춤). 딜량 추이의 보특 · 결특(.utsw)은 11.5 그대로 */
.fsw button:hover{color:var(--ink2);}
.fsw button.on{color:#06100f;background:var(--g2);}
/* 하위 셋은 오른쪽 끝으로 민다(2026-10-03 요청) — 스위치와 붙여 두면 층이 안 읽힌다. */
.fsubs{margin-left:auto;display:inline-flex;gap:5px;}
.fsubs[hidden]{display:none;}
.fbtn{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--mut);
  background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:4px 12px;cursor:pointer;transition:.12s;}
.fbtn:hover{color:var(--ink2);}
.fbtn.on{color:var(--g2);background:rgba(34,216,194,.12);border-color:rgba(34,216,194,.4);}
/* 더보기 / 끝 표시 */
.fmore{display:flex;justify-content:center;margin-top:16px;}
.fmore .ubtn[disabled]{opacity:.6;cursor:default;}
.fend{text-align:center;margin-top:16px;font-size:11.5px;color:var(--mut2);}
/* 전적 피드 — 보드/랭킹 테이블과 동일한 방식: 최소폭 아래로는 줄이지 않고 가로 스크롤.
   (확대·좁은 창에서 요소가 겹치는 것을 막는다) */
/* min-height — 갈래(보특·결특·전체)를 바꿀 때 목록이 짧아져도 머리줄이 제자리에 있게 화면 한 장만큼은 지킨다.
   없으면 문서가 짧아지며 스크롤이 위로 끌려 올라간다(결특이 한 회차뿐인 사람 등). */
#ufeed{overflow-x:auto;min-height:calc(100vh - 140px);}
.ufgrp{display:flex;align-items:baseline;gap:9px;margin:16px 0 9px;}
.ufgrp:first-child{margin-top:2px;}
.ufgt{font-weight:800;font-size:15px;}
.ufgc{font-size:12px;color:var(--mut);font-weight:600;}
.ufgc b{color:var(--ink2);font-family:var(--num);font-weight:700;}
.ufmatch{display:grid;grid-template-columns:minmax(0,1fr) 336px;background:var(--panel2);border:1px solid var(--line);
  border-left-width:4px;border-radius:11px;overflow:hidden;margin-bottom:9px;}
.ufbody{display:flex;align-items:center;gap:16px;padding:14px 22px 14px 10px;min-width:0;}
/* 진행 중(alive) 회차 카드 — 테두리를 빛이 한 바퀴씩 돈다.
   보스 화면 순위표(body.live .lb::after)와 같은 원리·같은 색(#4fd08a)·같은 속도다.
   같은 뜻에 다른 모양을 주면 둘을 따로 배워야 한다.
   원뿔 그라디언트의 시작 각도(--a)만 돌리고 마스크로 테두리 두께만 남긴다 —
   요소를 회전시키면 둥근 사각형 링이 같이 돌아 모양이 망가진다.
   .ufmatch 는 overflow:hidden 이라 inset:0 안쪽에 그려야 안 잘린다. */
.ufmatch.alive{position:relative;border-left-width:1px;}   /* 좌측 순위색 띠 없음 — 순위 미확정 */
.ufmatch.alive::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  padding:1.5px;
  /* @property 를 모르는 브라우저에서는 conic 선언이 통째로 버려진다 — 바탕 링을 먼저 깐다. */
  background:linear-gradient(rgba(79,208,138,.30) 0 0);
  background-image:
    conic-gradient(from var(--a),
      rgba(79,208,138,0) 0deg, rgba(79,208,138,0) 232deg,
      rgba(79,208,138,.28) 274deg, rgba(79,208,138,.95) 322deg,
      #bdffdf 340deg, rgba(79,208,138,.95) 350deg, rgba(79,208,138,0) 360deg),
    linear-gradient(rgba(79,208,138,.30) 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:lbRun 3.6s linear infinite;
}
@media(prefers-reduced-motion:reduce){
  /* 도는 것만 멈추고 초록 테두리는 남긴다 — 움직임 없이도 '격파중'이 구분돼야 한다. */
  .ufmatch.alive::after{animation:none;background-image:linear-gradient(rgba(79,208,138,.34) 0 0);}
}
/* 줄어들 수 있게 둔다(0 1) — 못 줄면(0 0) 긴 보스 이름이 말줄임 없이 딜량 · 참여인원을 줄 밖으로 밀고 옆의 순위표 위로 겹친다(2026-10-06 재점검에서 봄). */
.ufres{display:flex;align-items:center;gap:13px;flex:0 1 auto;min-width:0;}
/* 순위칸 고정폭 — 값(1/10/114/-)에 따라 뒤쪽 썸네일·보스명이 밀리지 않게.
   46 으론 세 자리(「114위」= 50.55px) 를 못 담아 4.55 가 뒤로 전달됐다(2026-10-03).
   한 중보에 300~500 명이 붙으니 세 자리까지는 항상 나온다 — 거기까지 덮는다. */
.ufrank{font-family:var(--num);font-weight:700;font-size:24px;line-height:1;flex:0 0 auto;
  min-width:51px;text-align:right;font-variant-numeric:tabular-nums;}
/* 순위 칸 — 진행 중이면 숫자 대신 「격파중」이 선다.
   폭(51)은 이 묶음이 쥔다. 안쪽 .ufrank 에만 걸어 두면 숫자가 빠지는 순간 칸이
   배지 폭으로 줄어 뒤쪽이 통째로 밀린다. 둘 다 오른쪽 끝에 맞춘다. */
.ufrk{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;min-width:51px;}
/* 순위 자리에 서는 배지 — 51 안에 들어가야 한다(11.5px + 좌우 6 = 약 46). */
.ufmd.alive.lvrk{font-size:11.5px;padding:4px 6px;}
.ufrank i{font-family:var(--sans);font-size:11px;font-weight:400;font-style:normal;margin-left:1px;}
.ufthumb{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
  background:linear-gradient(150deg,#232a34,#161a20);box-shadow:0 0 0 1px var(--line2);}
@media(min-width:821px){ .ufres>.ufthumb{margin-left:11px;} }   /* PC — 내 순위와 썸네일 사이 13 → 24px(2026-10-11. 순위 숫자와 그림이 붙어 보였다) */
.ufbimg{width:100%;height:100%;object-fit:cover;}
.ufbemo{font-size:22px;}
.ufinfo{min-width:0;display:flex;flex-direction:column;gap:4px;}
.ufbnm{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ufrow2{display:flex;align-items:center;gap:8px;}
/* 모드 배지 — 색은 .btag(보스 화면)와 같은 값이다. 한쪽만 고치면 두 화면이 어긋난다.
   ⚠ 월보 클래스가 CSS 는 .w, JS 는 wb 라 안 맞아 월보가 중보 파랑으로 떨어져 있었다(2026-10-03). */
.ufmd{font-family:var(--num);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;}
.ufmd.mb{color:#2b8cef;background:rgba(43,140,239,.14);}   /* 중보 — 파랑 */
.ufmd.wb{color:#e067b0;background:rgba(224,103,176,.14);}  /* 월보 — 분홍 */
.ufmd.bs{color:#22d8c2;background:rgba(34,216,194,.12);}   /* 보특 — 초록 */
/* 진행 중(alive) 회차 — "격파중" 은 살아있는 상태라 은은하게 명멸시킨다.
   opacity 를 완전히 0 으로 떨구지 않는 이유: 딱딱한 점멸은 눈에 피로하고,
   글자가 사라졌다 나타나면 옆 요소와 함께 읽을 때 시선이 튄다. */
.ufmd.alive{color:#4fd08a;background:rgba(79,208,138,.14);
  animation:alivePulse 1.5s ease-in-out infinite;}
@keyframes alivePulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(79,208,138,0);}
  50%{opacity:.45;box-shadow:0 0 8px 0 rgba(79,208,138,.45);}
}
@media(prefers-reduced-motion:reduce){.ufmd.alive{animation:none;}}
.uftime{font-family:var(--num);font-size:12px;color:var(--mut);font-weight:400;}
.ufstats{display:flex;gap:20px;margin-left:auto;flex:0 0 auto;}
.ufst{display:flex;flex-direction:column;gap:3px;text-align:right;}
.ufsl{font-size:11px;color:var(--mut);font-weight:600;}
.ufsv{font-family:var(--num);font-weight:700;font-size:14px;}
.ufsv.hi{color:#22d8c2;}
.ufros{border-left:1px solid var(--line);background:rgba(0,0,0,.18);padding:11px 16px 11px 26px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:3px 16px;align-content:center;}
/* baseline 정렬 — 닉네임(Gothic A1)과 숫자(Chakra Petch)의 글자 밑선을 맞춘다.
   center로 두면 폰트마다 박스 안 글자 위치가 달라 한글이 떠 보인다. */
.ufpr{display:flex;align-items:baseline;gap:7px;font-size:11px;min-width:0;cursor:pointer;border-radius:5px;padding:1px 3px;}
.ufpr:hover{background:rgba(255,255,255,.05);}
.ufprk{font-family:var(--num);font-weight:700;font-size:10px;color:var(--mut);width:15px;flex:0 0 auto;text-align:right;}
.ufpnm{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
/* 딜량 — 고정폭 + 좌측 정렬 + 자릿수 균일폭으로 행마다 시작점이 같도록 */
/* 딜량: 오른쪽 정렬 — 볼드(본인 행)는 굵기 때문에 글자폭이 미세하게 넓어서
   왼쪽 정렬이면 끝자리가 밀린다. 오른쪽 정렬로 일의 자리를 기준으로 맞춘다. */
.ufpdm{font-family:var(--num);font-size:10px;color:var(--mut);margin-left:auto;flex:0 0 auto;
  min-width:54px;text-align:right;font-variant-numeric:tabular-nums;}
.ufpr.me{background:rgba(34,216,194,.13);}
/* 본인 행 강조: 닉네임·순위·딜량 모두 볼드.
   딜량 폰트가 Arial/Arimo(굵기별 숫자 폭 고정)라 볼드를 섞어도 자릿수가 안 밀린다. */
.ufpr.me .ufpnm,.ufpr.me .ufprk,.ufpr.me .ufpdm{color:#22d8c2;font-weight:700;}
/* 모바일 전용: 폭이 좁으면(820px 이하) 1열로 쌓는다. 폭만 본다 — op.gg·dak.gg 와 같다.
   ⚠ 예전엔 hover:none 을 같이 걸어 «데스크탑 확대는 데스크탑 배치» 로 지켰는데, 실기기(삼성 인터넷)가
     hover 가 있다고 답해 폰에서 데스크탑 배치(1120px 를 축소)가 떴다(2026-10-03 운영 실측: 서버 판정 m, 화면 신호 p·폭 1120↑).
     그래서 폭만 본다. 대가: 데스크탑 창을 820px 밑으로 줄이거나 크게 확대하면 폰 배치가 뜬다. */
@media(max-width:820px){body{min-width:0;}
  .ufmatch{grid-template-columns:1fr;}#ufeed{overflow-x:visible;}
  .ufros{border-left:0;border-top:1px solid var(--line);padding-left:16px;}.ufbody{flex-wrap:wrap;}}
/* ═══ 보드/종합 요약 블럭 ═══ */
.bsum{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:14px;padding:0;margin-bottom:16px;}

/* 보스 화면 3칸 — 보스 정보 · 참여 현황 · 보상. 셋 다 같은 폭. */
.bsum.b3{grid-template-columns:1fr 1fr 1fr;}
/* 재화 아이콘 — 글자 기준선에 맞춰 살짝 내린다. flex 줄이라 shrink 를 막아야 안 찌그러진다. */
.srow .sk .ri{width:14px;height:14px;flex:0 0 auto;margin-right:5px;vertical-align:-2.5px;}
.srow .sk{display:inline-flex;align-items:center;}
/* 보상 큐브 '50% · 1개' — 가운뎃점만 회색으로 눌러 확률·개수를 가른다(둘 다 sv 색 상속). */
.srow .sv .cubed{color:var(--mut);font-weight:400;margin:0 6px;}
/* [마'] 큐브 = 확률(회색) · 개수(청록). 확률은 죽이고 개수만 강조. */
.srow .sv.cube{color:var(--mut);}
.srow .sv.cube .cnum{color:#22d8c2;}
/* 랭킹 요약 = HOT Player · 컷트라인 · 추이 그래프 3블럭.
   그래프는 가로로 넓어야 회차 간 기울기가 읽히므로 가장 넓은 트랙을 준다. */
/* margin-bottom 은 .bsum(16px)을 덮어쓴다 — 카드 아래 테두리와 표 헤더가 붙어 보여서 띄웠다.
   .cols 의 top 패딩 2px 와 합쳐 32px. 랭킹 뷰(.two)에만 적용되고 보스 레이드 뷰는 그대로다. */
.bsum.two{grid-template-columns:1fr .9fr 1.5fr;margin-top:14px;margin-bottom:30px;}
@media(max-width:820px){.bsum,.bsum.two,.bsum.b3{grid-template-columns:1fr;}}
.sumc{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;min-height:104px;display:flex;flex-direction:column;min-width:0;}
.sct{font-family:var(--sans);font-weight:700;font-size:12px;color:#6e7a98;margin-bottom:10px;}
/* 랭킹 1위 카드 라벨 "🔥 현재 HOT Player" — 다른 카드 제목(회색)과 달리 흰 글씨로 띄운다.
   .sct 는 모든 요약 카드가 공유하므로 .hot 수식자에만 적용한다. */
.sct.hot{display:flex;align-items:center;gap:6px;color:var(--ink);}
.sct.hot .fi{font-style:normal;font-size:13px;line-height:1;}
.sbossrow{display:flex;align-items:center;gap:14px;min-width:0;flex:1;}
/* [다] 배치 — 이름이 먼저, 그 아래 태그+상태. 줄이 하나 줄어든 만큼 사진을 키운다. */
.sbthumb.big{width:78px;height:78px;border-radius:15px;font-size:38px;}
.sbname.lg{font-size:19px;}
.sbthumb{width:66px;height:66px;border-radius:13px;display:grid;place-items:center;font-size:32px;overflow:hidden;
  background:linear-gradient(150deg,#232a34,#161a20);box-shadow:0 0 0 1px var(--line2);flex:0 0 auto;}
.sbthumb img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;}
.sbinfo{min-width:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.sbname{font-size:17px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.sbmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.sbody{display:flex;flex-direction:column;gap:8px;justify-content:center;flex:1;}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.srow .sk{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;}
.srow .sv{font-family:var(--num);font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srow .sv.acc{color:#22d8c2;}
/* 보상 카드 — 출현 시각을 크게 앞세우고 재화 두 줄을 아래에 붙인다.
   옛 '다음 보스' 카드가 쓰던 크기·색을 그대로 이어받는다(.nbtime). */
.srwd{display:flex;flex-direction:column;justify-content:center;flex:1;gap:9px;}
.srwd .nbtime{margin-bottom:1px;}
.srwd .sbody{gap:6px;flex:0 0 auto;}
.nbtime{font-family:var(--num);font-weight:700;font-size:30px;color:#22d8c2;text-shadow:0 0 12px rgba(34,216,194,.45);line-height:1;}
.nbtime .u{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--mut);
  margin-left:6px;text-shadow:none;}
.scut{display:flex;flex-direction:column;justify-content:center;flex:1;gap:5px;}
.cutv{font-family:var(--num);font-weight:700;font-size:28px;color:#22d8c2;line-height:1;}
.cutsub{font-size:12px;color:var(--mut);font-weight:400;}
.cutsub .cd{font-family:var(--num);font-weight:700;margin-left:2px;}
/* ── 컷트라인 추이 그래프 ──
   선은 preserveAspectRatio:none 으로 카드 폭에 맞춰 늘어난다(stroke 는 non-scaling 으로 고정).
   점·값 라벨은 늘어나면 찌그러지므로 SVG 가 아니라 HTML 로 %에 얹는다 → 어떤 폭에서도 정원.
   .trplot 이 따로 있는 이유: 라벨이 점 아래로 붙으므로 아래쪽 여백이 필요한데,
   절대배치 %는 패딩까지 포함한 높이를 기준으로 잡혀 여백을 .trbody 에 주면 좌표가 어긋난다. */
.sumc.trend{gap:0;}
.sumc.trend .sct{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;}
.sct .sctsub{font-weight:400;font-size:11px;color:var(--mut2);}
.trbody{flex:1;min-height:56px;padding:6px 0 17px;}
/* 추이를 아직 못 그릴 때 — 칸은 서고 이유를 적는다 */
.trbody.trempty{display:flex;align-items:center;justify-content:center;padding:6px 0 10px;
  font-size:12px;color:var(--mut);}
.trplot{position:relative;height:100%;}
.trsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.cline{fill:none;stroke:#22d8c2;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;}
.cdot{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--panel2);box-shadow:inset 0 0 0 1.4px #22d8c2;}
.cdot.on{width:9px;height:9px;background:#22d8c2;box-shadow:0 0 0 2px var(--panel2),0 0 10px -1px #22d8c2;}
.cval{position:absolute;margin-top:8px;font-family:var(--num);font-size:10px;font-weight:400;
  color:var(--mut);white-space:nowrap;line-height:1;}
.cval.on{color:#22d8c2;font-weight:700;}
.cutsub .cd.up{color:#4fd08a;} .cutsub .cd.dn{color:#e08585;} .cutsub .cd.flat{color:var(--mut2);}

/* ══ 랭커 — 회차별 1위 기록 ═══════════════════════════════
   보드·랭킹과 표 모양이 달라(하루 묶음) 자기 패널을 쓴다. 클래스는 전부 rk 접두사로
   두어 보드 쪽 이름과 섞이지 않게 한다.
   칩·라벨에 --num(Arial) 을 쓰지 않는다 — 한글이 없어 폴백이 일어나면
   글자만 다른 폰트로 그려져 알약 안에서 세로가 어긋난다. 숫자 칸만 --num 이다. */
/* 부제가 없는 화면이라 제목이 표에 바로 붙는다 — 그만큼 아래를 띄운다. */
/* 제목과 내용 사이 — 랭킹(요약 블럭까지 40px)에 맞춘다(2026-10-03 요청).
   레이드 화면만 좁게 둔다: 바로 밑이 타임라인이라 띄우면 첫 화면에서 회차가 밀린다. */
#rankerpanel .phead{margin-bottom:40px;}
/* 랭킹(#rankpanel) — 제목 밑에서 요약 블럭까지 40px(랭커와 같다).
   레이드와 한 패널을 쓰던 때에는 그 사이에 «빈 타임라인 상자»(.roundtl — 아래 여백 40px)가 끼어 있어 이 간격이 거기서 나왔다.
   패널을 나누며(2026-10-10) 상자는 레이드에만 남겼고, 간격은 여기 제 이름으로 적는다 — 타임라인의 여백을 고쳐도 랭킹이 안 움직인다. 폰은 아래 폰 덩어리(14px).
   요약 · 탭 줄 · 순위표의 position 도 같은 까닭이다: 타임라인 «뒤의 상자들» 에 걸던 규칙(.roundtl ~ …)이 랭킹에도 걸려 있었다 — 쌓이는 순서가 전과 같게 그대로 건다. */
#rankpanel .phead{margin-bottom:40px;}
#rankpanel .mtabs,#rankpanel .bsum,#rankpanel .lb{position:relative;}
.rktabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:2px 0 10px;}
.rktab{font-family:var(--sans);font-size:13px;color:var(--mut);background:none;border:0;
  padding:9px 14px 10px;border-bottom:2px solid transparent;cursor:pointer;}
.rktab:hover{color:var(--ink2);}
.rktab.on{color:var(--g2);border-bottom-color:var(--g2);font-weight:600;}

/* 날짜와 날짜 사이 46, 하위 탭 밑 첫 날짜 32 — 22 · 10 일 때는 앞 날의 표와 붙어 날이 바뀌는 자리가 안 읽혔다(2026-10-06 요청) */
.rkday{display:flex;align-items:center;gap:11px;padding:0 2px 14px;margin:46px 0 0;}
.rkday:first-child{margin-top:32px;}
.rkdnum{font-family:var(--num);font-size:22px;font-weight:700;line-height:1;color:var(--ink);}
.rkdlab{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px;
  border-radius:5px;font-family:var(--sans);font-size:11px;line-height:1;color:var(--g2);
  background:rgba(34,216,194,.1);border:1px solid rgba(34,216,194,.28);}
.rkcnt{font-family:var(--sans);font-size:11px;color:var(--mut2);}
.rktally{margin-left:auto;display:flex;align-items:center;gap:10px;}
/* 폰(1열)에서는 1위 횟수가 머리줄 아래로 내려가 접힌다 — 안 접으면 아바타 7개(296px)가
   한 줄로 서서 375px 화면을 37px 밀어냈다(2026-10-03 모바일 실측). */
@media(max-width:820px){.rktally{flex-wrap:wrap;row-gap:6px;min-width:0;max-width:100%;}}
.rktly{display:flex;align-items:center;gap:5px;font-family:var(--num);font-size:12px;color:var(--mut);}
.rktly b{color:var(--ink);font-weight:700;}
.rktly .av{width:22px;height:22px;}

.rktb{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;table-layout:fixed;}
/* 날짜 블록마다 표가 따로라, 자동 배분에 맡기면 표마다 열 폭이 달라져 위아래가 어긋난다
   (실측: 보스 칸이 254 / 268 / 255px → 1위 시작점이 14px 씩 튐).
   폭을 고정해 모든 날짜가 같은 격자를 쓰게 한다. 스켈레톤 표엔 thead 가 없으므로 td 에도 건다. */
.rktb th:nth-child(1),.rktb td:nth-child(1){width:92px;}
.rktb th:nth-child(2),.rktb td:nth-child(2){width:25%;}
.rktb th:nth-child(4),.rktb td:nth-child(4){width:17%;}
.rktb th:nth-child(5),.rktb td:nth-child(5){width:118px;}
.rktb th{text-align:left;font-family:var(--sans);font-size:11px;font-weight:400;color:var(--mut2);
  padding:10px 14px;background:#10141a;border-bottom:1px solid var(--line);}
.rktb th.r{text-align:right;}
.rktb td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;
  color:var(--mut);vertical-align:middle;}
.rktb tr:last-child td{border-bottom:none;}
.rktm{font-family:var(--num);font-size:12px;color:var(--mut);white-space:nowrap;}
.rkboss{display:flex;align-items:center;gap:9px;min-width:0;}
.rkmd{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:19px;padding:0 7px;
  border-radius:4px;font-family:var(--sans);font-size:10.5px;line-height:1;
  background:#1c222c;color:var(--mut);vertical-align:middle;}
/* 월보 — 보스 화면·상세와 같은 분홍. 전에는 혼자 푸른 보라(#9fb6ff)를 썼다(2026-10-03). */
.rkmd.wb{background:rgba(224,103,176,.14);color:#e067b0;}
.rkmd.du{background:rgba(160,107,226,.14);color:#a06be2;}
/* 중보·보특도 다른 화면과 같은 색(2026-10-03 통일) — 상세 전적의 .ufmd 와 같은 값이다. */
.rkmd.mb{background:rgba(43,140,239,.14);color:#2b8cef;}
.rkmd.bs{background:rgba(34,216,194,.12);color:#22d8c2;}
.rkmds{display:inline-flex;gap:5px;flex:0 0 auto;}
.rkbn{font-size:12px;color:var(--mut2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rkwho{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0;}
.rkwho .av{width:24px;height:24px;}
.rknm{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;}
.rkwho:hover .rknm{color:var(--g2);}
.rkvs{font-family:var(--sans);font-size:12px;color:var(--mut2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;}
.rkvs i{font-style:normal;color:#3a4250;margin:0 7px;}
.rkdmg{font-family:var(--num);font-size:14px;font-weight:400;color:var(--ink);
  text-align:right;white-space:nowrap;}
.rkgapc{text-align:right;white-space:nowrap;}
.rkgap{font-family:var(--num);font-size:12px;color:var(--g2);}
.rkgap.close{color:var(--amber);}      /* 10만 미만 접전 */
.rkgap.none{color:var(--mut2);}

/* 스켈레톤 — 실제 배치(날짜 줄 + 표)를 그대로 흉내 낸다. 모양이 다르면 채워질 때 화면이 튄다. */
.rksk .rkday .skb,.rkmore .rkday .skb{display:inline-block;}
.rksk .rktb,.rkmore .rktb{margin-bottom:4px;}
.rkbody .skb{display:inline-block;vertical-align:middle;}
.rkbody .skb.c{border-radius:50%;}
.rkbody .skb.r4{border-radius:4px;}
.rkboss .skb+.skb{margin-left:9px;}
.rkwho .skb+.skb{margin-left:9px;}
/* 바닥 감시자 — 여기에 화면이 닿으면 다음 5일치를 받는다(높이만 있고 보이지 않는다). */
.rksent{height:1px;}
.rkend{text-align:center;color:var(--mut2);font-size:12px;padding:20px 0 6px;}
/* 더 받기 실패 — 자동 재시도를 멈추고 사람이 누르게 한다(감시자를 두면 요청이 폭주한다). */
.rkfail{display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--mut);font-size:12.5px;padding:18px 0 6px;}
/* 첫 로드가 통째로 실패해 이것만 남을 때는 '기록이 없어요'(.empty)와 같은 여백을 준다.
   목록 아래에 붙는 '더 받기 실패'는 그대로 촘촘히 — 위에 이미 표가 있어 숨통이 있다. */
.rkbody > .rkfail:only-child,.rows > .bdfail{padding:48px 22px 44px;}
.rkretry{font-family:var(--sans);font-size:12px;color:var(--g2);background:rgba(34,216,194,.08);
  border:1px solid rgba(34,216,194,.34);border-radius:7px;padding:5px 12px;cursor:pointer;}
.rkretry:hover{background:rgba(34,216,194,.16);}

/* ── 컷트라인 차트 화면 (/cutline) ─────────────────────────
   랭커 목록 위에 얹었다가 떼어낸 자리다. 차트는 넓고 높아야 회차 간 차이가 읽히는데
   목록은 세로로 길어, 한 화면에서 높이를 나눠 가지면 둘 다 어정쩡해졌다.
   이제 이 화면은 차트 하나뿐이라 남는 높이를 전부 캔버스에 준다.

   캔버스는 '정상' 만 그린다. 아직 볼 게 없는 상태(처음 로딩·실패·빈)는 .ctover 덮개로,
   볼 건 있는데 더 못 받은 상태는 .ctside 딱지로 알린다 — 덮개는 조작을 막고 딱지는 안 막는다. */
/* 메뉴바까지 덮는 전체 화면이다. 차트는 가로로 넓고 높을수록 회차 간 차이가 읽히는데,
   메뉴바·검색창·본문 여백을 남겨 두면 그만큼이 그대로 깎인다. 나가는 길은 닫기(우측 상단)와
   Esc 두 개뿐이라 갇히지 않는다.
   fixed 라 본문 폭 제한(min-width:1120px)에도 걸리지 않고 뷰포트를 그대로 쓴다. */
#cutpanel{position:fixed;inset:0;z-index:80;background:var(--bg);
  display:flex;flex-direction:column;padding:14px 20px 16px;}
/* 덮고 있는 동안 뒤 화면이 스크롤되면 닫았을 때 엉뚱한 자리에 떨어진다. */
body.cutview{overflow:hidden;}
.ct{display:flex;flex-direction:column;flex:1;min-height:0;}
.cthd{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex:0 0 auto;}
.cthd .ctt{font-family:var(--disp);font-size:17px;font-weight:800;color:var(--ink);}
.cthd .ctsub{font-family:var(--sans);font-size:11.5px;color:var(--mut2);}
/* 봉 하나의 단위 — 1일 · 7일(2026-10-11). 제목 옆의 작은 두 칸 단추. */
/* 머리글은 한 줄을 지킨다 — 폰(390)에서 제목 · 단추가 두 줄로 꺾였다. 줄어드는 것은 곁말(.ctsub)뿐이고 넘치면 말줄임이다. */
.cthd .ctt,.cthd .ctx,.ctunit button{white-space:nowrap;}
.cthd .ctt,.cthd .ctx,.ctunit{flex:0 0 auto;}
.cthd .ctsub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctunit{display:inline-flex;margin-left:4px;border:1px solid var(--line2);border-radius:7px;overflow:hidden;}
.ctunit button{font-family:var(--sans);font-size:11.5px;color:var(--mut);background:none;border:0;padding:4px 11px;cursor:pointer;}
.ctunit button+button{border-left:1px solid var(--line2);}
.ctunit button:hover{color:var(--ink2);}
.ctunit button.on{color:var(--ink);background:var(--panel2);font-weight:600;}
.ctunit button:focus-visible{outline:2px solid var(--g2);outline-offset:-2px;}
.ctx{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--mut);
  background:rgba(10,11,14,.6);border:1px solid var(--line);border-radius:7px;
  padding:5px 12px;cursor:pointer;}
.ctx:hover{color:var(--ink2);border-color:#3a4150;}
/* 캔버스가 남는 높이를 다 먹는다. min-height:0 이 없으면 flex 아이템이 내용 높이 아래로
   안 줄어들어 페이지가 세로로 삐져나간다. */
.ctwrap{position:relative;flex:1;min-height:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
#ctcv{display:block;width:100%;height:100%;cursor:grab;touch-action:none;}
#ctcv.drag{cursor:grabbing;}
.cttip{position:absolute;pointer-events:none;background:#0e1219;border:1px solid var(--line2);
  border-radius:8px;padding:7px 10px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:2;}
.cttip .tt{font-family:var(--num);font-size:10.5px;color:var(--mut);margin-bottom:2px;}
.cttip .tv{font-family:var(--num);font-size:14px;font-weight:700;color:var(--ink);}
.cttip .tm{font-size:10.5px;color:var(--mut2);margin-top:1px;}
.cttip .tm .wb{color:#b98bff;} .cttip .tm .mb{color:var(--g2);} .cttip .tm .du{color:#a06be2;}
/* 봉의 말풍선 — 큰 수 옆에 «마지막 회차», 아래에 이름 · 값 두 칸 */
.cttip .tt:has(.td){display:flex;justify-content:space-between;gap:16px;margin-bottom:5px;}
.cttip .td{font-family:var(--sans);color:var(--mut2);}
.cttip .td b{font-family:var(--num);font-weight:700;margin-left:2px;}
.cttip .td .mb{color:var(--g2);} .cttip .td .du{color:#a06be2;} .cttip .td .dn{color:var(--bad);}
.cttip .tr{display:grid;grid-template-columns:auto auto;gap:3px 16px;font-size:11.5px;color:var(--ink);}
.cttip .tr span:nth-child(odd){color:var(--mut2);}
.cttip .tr span:nth-child(even){font-family:var(--num);text-align:right;}

/* 딱지 — 왼쪽에서 이전 기간을 받는 중이거나 못 받았을 때. 조작은 계속된다. */
.ctside{position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;}
.ctchip{display:inline-flex;align-items:center;gap:8px;pointer-events:auto;
  font-family:var(--sans);font-size:11px;color:var(--g2);background:rgba(10,11,14,.88);
  border:1px solid rgba(34,216,194,.3);border-radius:7px;padding:5px 10px;}
.ctchip.bad{color:var(--mut);border-color:var(--line2);}
.ctchip button{font-family:var(--sans);font-size:11px;color:var(--g2);background:none;
  border:0;border-left:1px solid var(--line2);padding:0 0 0 8px;cursor:pointer;}
/* 덮개 — 아직 볼 게 없다. 캔버스를 가려 조작이 먹지 않는 것도 의도다. */
.ctover:empty{display:none;}
.ctover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--panel);z-index:3;}
.ctfail{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:12.5px;}
.ctretry{font-family:var(--sans);font-size:11.5px;color:var(--g2);
  background:rgba(34,216,194,.08);border:1px solid rgba(34,216,194,.32);
  border-radius:7px;padding:5px 12px;cursor:pointer;}
.ctsk{position:absolute;inset:0;padding:14px 12px;display:flex;gap:10px;}
.ctskb{flex:1;height:auto;border-radius:8px;}
.ctska{display:flex;flex-direction:column;justify-content:space-between;width:56px;padding:2px 0;}
/* 범례 — 차트 안 좌측 상단. 캔버스 위쪽 여백(PADT=48) 한가운데에 앉는다.
   모서리에 붙이면 차트 밖 머리글처럼 보여서, 위·왼쪽 모두 안쪽으로 들였다.
   pointer-events:none — 여기에 마우스가 걸리면 끌기가 끊긴다. */
.ctlg{position:absolute;left:22px;top:18px;z-index:2;pointer-events:none;
  display:flex;gap:13px;align-items:center;line-height:1;
  font-size:11px;color:var(--mut2);}
.ctlg i,.ctlgd i{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:5px;vertical-align:-1px;}
.ctlg i.mb,.ctlgd i.mb{background:var(--g2);}
.ctlg i.wb,.ctlgd i.wb{box-shadow:inset 0 0 0 1.7px #b98bff;}
.ctlg i.du{background:#a06be2;}
/* 봉의 범례 — 오름 · 내림은 작은 네모(봉의 몸통), 가는 줄은 세로 선 */
.ctlg i.mb,.ctlg i.du,.ctlg i.dn{width:7px;height:11px;border-radius:1px;vertical-align:-2px;}
.ctlg i.dn{background:var(--bad);}
.ctlg i.wk{width:1.5px;height:12px;border-radius:0;background:var(--mut);margin:0 7px 0 3px;vertical-align:-2px;}
/* 차트 아래 줄에는 이제 조작 안내만 남는다. */
.ctlgd{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px;flex:0 0 auto;
  font-size:11px;color:var(--mut2);}
@media (max-width:640px){
  #cutpanel{padding:10px 12px 12px;}
  .ctlg{left:12px;top:14px;gap:10px;}
  /* 안내를 감추면 그 줄에 남는 게 없다 — 줄째 지운다(빈 8px 이 남지 않게). */
  .ctlgd{display:none;}
}

/* 랭킹 추이 블럭의 '자세히 보기' — 제목 줄 오른쪽 끝. */
.sct .sctmore{margin-left:auto;font-family:var(--sans);font-weight:500;font-size:11px;
  color:var(--g2);background:rgba(34,216,194,.08);border:1px solid rgba(34,216,194,.28);
  border-radius:6px;padding:3px 9px;cursor:pointer;line-height:1.4;}
.sct .sctmore:hover{background:rgba(34,216,194,.18);}
.sumc.trend .sct{display:flex;align-items:center;gap:7px;}

/* ── 토벌 중인 회차를 보고 있을 때 ─────────────────────────
   말은 두 군데서 한다. 위쪽 요약 카드는 초록으로 물들고('토벌 중' 배지가 그 안에 있어
   말이 이어진다), 아래 순위표는 테두리를 빛이 한 바퀴씩 돈다 — 순위가 지금도
   바뀌는 중이라는 뜻이다. 배경은 건드리지 않아 숫자 가독성이 그대로다.

   PC 에서는 여기에 화면 가장자리 빛이 더해지고 표를 도는 빛은 꺼진다(아래 PC 블록, 2026-10-06).

   색은 배지와 같은 #4fd08a. 새 색을 들이면 같은 뜻이 두 색으로 갈린다. */
body.live #bsum .sumc{
  border-color:rgba(79,208,138,.34);
  background:linear-gradient(180deg, rgba(79,208,138,.09), rgba(79,208,138,.02)), var(--panel2);
  box-shadow:inset 0 0 0 1px rgba(79,208,138,.06);
}

/* 순위표 테두리를 도는 빛.
   원리 — 원뿔 그라디언트를 각도(--a)만 돌리고, 마스크로 테두리 두께만 남긴다.
     · padding 이 곧 테두리 두께다. content-box 마스크와 전체 마스크를 exclude 로
       빼면 가운데가 뚫려 '테두리만' 남는다.
     · 요소 자체를 회전시키면 둥근 사각형 링이 같이 돌아 모양이 망가진다. 그래서
       요소는 가만두고 그라디언트의 시작 각도만 돌린다(@property 로 각도를 애니메이션).
   .lb 는 overflow:hidden 이라 inset:0 안쪽에 그려야 안 잘린다. */
@property --a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
body.live .lb{position:relative;}
body.live .lb::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  padding:1.5px;
  /* @property 를 모르는 브라우저에서는 아래 conic 선언이 통째로 버려진다.
     그때도 테두리는 남도록 유효한 바탕 링을 먼저 깔아 둔다. */
  background:linear-gradient(rgba(79,208,138,.30) 0 0);
  background-image:
    conic-gradient(from var(--a),
      rgba(79,208,138,0) 0deg, rgba(79,208,138,0) 232deg,
      rgba(79,208,138,.28) 274deg, rgba(79,208,138,.95) 322deg,
      #bdffdf 340deg, rgba(79,208,138,.95) 350deg, rgba(79,208,138,0) 360deg),
    linear-gradient(rgba(79,208,138,.30) 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:lbRun 3.6s linear infinite;
}
@keyframes lbRun{ to{ --a:360deg; } }
@keyframes liveEdge{ 0%,100%{opacity:.45;} 50%{opacity:1;} }
@keyframes topHalo{ 0%,100%{opacity:0;} 50%{opacity:1;} }
@media(prefers-reduced-motion:reduce){
  /* 도는 것만 멈추고 초록 테두리는 남긴다 — 움직임 없이도 '토벌 중'이 구분돼야 한다. */
  body.live .lb::after{animation:none;background-image:linear-gradient(rgba(79,208,138,.34) 0 0);}
  body.live::after{animation:none;opacity:.7;}
  body.live .scroll:not(.rank) .rows .row::after{animation:none!important;opacity:.5!important;}      /* 1위 줄의 번짐 — 움직이지 않고 은은히 켜 둔다 */
}

/* ── 보스 표 페이지 버튼 ─────────────────────────────────
   #pager 에 붙는다. #foot 은 범례가 쓰므로 자리를 나눠 쓰지 않는다. */
/* 아래를 2 로 두었더니 쪽수가 블럭 바닥에 붙어 «틀에 끼인» 모양이 됐다(2026-10-02 지적).
   표 끝과 쪽수 사이가 47px 이라, 아래도 그만큼은 띄워야 쪽수가 제자리에 선다. */
.pg{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:20px 0 22px;justify-content:center;}
.pgb{font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;color:var(--mut);
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 11px;
  min-width:34px;line-height:1.2;transition:.13s;}
.pgb:hover:not(:disabled){color:var(--ink);border-color:var(--line2);}
.pgb.on{color:#22d8c2;border-color:rgba(34,216,194,.45);background:rgba(34,216,194,.1);}
/* 끝에 닿은 화살표는 지우지 않고 눌리지 않게만 둔다 — 버튼이 사라지면 줄이 흔들린다. */
.pgb:disabled{opacity:.32;cursor:default;}
.pgb.nav{padding:6px 9px;}
/* 쪽이 많을 때 줄인 자리 «…» — 단추와 같은 높이로 서되 누를 수 없다. */
.pgdot{min-width:18px;text-align:center;color:var(--mut2);font-size:12px;}
/* 빈 진행 중 회차 — «방금 출현했어요 · 첫 집계 전 · 12:10 에 갱신» */
.empty.fresh{display:flex;flex-direction:column;align-items:center;gap:4px;}
.empty.fresh b{color:var(--ink);font-size:14px;}
.empty.fresh span{font-size:12.5px;}
/* 보특 랭킹 하위 탭 — 제목 오른쪽(A안). 랭커의 탭과 같은 셋·같은 순서. */
.rsub{display:inline-flex;flex:0 0 auto;padding:2px;border-radius:9px;align-self:center;margin-left:auto;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.rsub[hidden]{display:none;}
.rsub a{padding:5px 14px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer;}
.rsub a:hover{color:var(--ink2);}
.rsub a.on{color:#06100f;background:var(--g2);}
.pgn{font-family:var(--num);font-size:11.5px;color:var(--mut2);margin-left:6px;}
/* 진행 중 회차 — 왜 한 장뿐인지 */
.pgnote{padding:20px 0 22px;text-align:center;font-size:12px;color:var(--mut);}
.pgnote b{color:var(--ink2);font-weight:700;}
/* 폰 — 바닥에 닿았는지 보는 감시 칸(보이지 않는다)과 «다시 시도» 단추. */
.pgsent{height:1px;}
.pgnote .pgretry{margin-left:8px;}

/* ══ 우편함 — 운영자 우편 피드(/mailbox) ══════════════════
   표가 아니라 «글» 이다. 날짜로 묶고 위에서 아래로 쌓는다.
   글은 하나뿐이다 — 게임의 운영자 우편은 제목이 본문을 잘라 놓은 것이라
   둘을 같이 그리면 같은 문장이 두 번 나온다(ui/mailbox.js 의 textOf 참고).
   보상은 «받는 단추» 가 아니라 꼬리표다. 여기서 눌러도 받아지지 않으므로 단추처럼 안 생기게 한다. */
.mbbody{margin-top:40px;padding-bottom:40px;}
/* 날짜가 바뀌는 자리 — 통 사이(16px)보다 훨씬 벌려야 «여기서 날이 갈린다» 가 읽힌다.
   26/10 에서 52/18 로 띄웠다(2026-10-03 요청). 첫 날짜는 위를 0 으로 둔다(아래 규칙). */
.mbday{display:flex;align-items:center;gap:12px;margin:52px 0 18px;}
.mbday:first-child{margin-top:0;}
.mbday span{font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--ink2);}
.mbday::after{content:"";flex:1;height:1px;background:var(--line);}
/* 통과 통 사이 — 유리 칠은 판이 떠 보이는 결이라, 붙여 두면 한 덩이로 뭉친다.
   10 에서 16 으로 띄웠다(2026-10-02 요청). */
.mbgrp{display:flex;flex-direction:column;gap:16px;}
/* 한 통 — 왼쪽에 선물 그림, 오른쪽에 머리줄(누가 · 언제) · 글 · 보상.
   «유리» 칠(2026-10-02 선택 K안): 위에서 아래로 옅어지는 바탕에 안쪽 테두리 한 겹,
   그리고 윗변에 1px 흰 선을 그어 판이 살짝 떠 있어 보이게 한다.
   ⚠ 테두리를 border 가 아니라 box-shadow(inset)로 두는 이유: border 는 자리를 먹어서
     호버에 두께를 바꾸면 글이 1px 씩 흔들린다. 그림자는 자리를 안 먹는다. */
.mbi{position:relative;display:flex;gap:14px;padding:15px 17px;border:0;border-radius:13px;
  overflow:hidden;outline:none;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 8px 22px -16px rgba(0,0,0,.9);
  transition:transform .18s,box-shadow .18s;}
/* 윗변의 1px — 가운데만 밝고 양 끝으로 사라진다. 상자 네 변을 다 긋는 것보다 가볍다. */
.mbi::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);}
.mbi:hover{transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 26px -16px rgba(0,0,0,.95);}
@media (prefers-reduced-motion: reduce){ .mbi:hover{transform:none;} }
/* 왼쪽은 선물 이모지 하나다. 틀(상자)을 씌웠다가 뺐다(2026-10-02 요청) —
   금빛 상자가 글보다 먼저 눈에 들어 «무엇을 받았나» 가 «무슨 말인가» 를 앞질렀다. */
.mbic{flex:0 0 auto;font-size:23px;line-height:1.35;}
.mbm{min-width:0;flex:1;}
/* 머리줄 — «누가 · 언제». 가운뎃점은 글자가 아니라 ::after 로 긋는다(복사하면 안 묻어 나온다). */
.mbtop{display:flex;align-items:baseline;gap:8px;margin-bottom:32px;}
/* 쿠폰을 «누가 줬나»(2026-10-18 · 확정 시안 F1) — 꽉 찬 색 동그라미 마크(검은 그림) + 흰 닉(굵게) + 색 알약(자리). 색은 사람마다(--wc) */
.mbwho{--wc:#22d8c2;--wb:rgba(34,216,194,.15);--wl:rgba(34,216,194,.4);display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;line-height:1.3;}
.mbwho.wmayor{--wc:#f5b324;--wb:rgba(245,179,36,.15);--wl:rgba(245,179,36,.4);}
.mbwho.wetc{--wc:#7c8698;--wb:rgba(124,134,152,.15);--wl:rgba(124,134,152,.4);}
/* 점 — 사료 머리(.mbh i)와 같은 꼴(2026-10-18 사용자 «심플하게 · 사료 옆 동그라미처럼» — 처음의 왕관 · 메달 동그라미를 바꿨다) */
.mbwm{flex:none;width:8px;height:8px;margin:0 4px 0 4px;border-radius:50%;background:var(--wc);box-shadow:0 0 0 4px var(--wb);}
.mbwho b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f4f9;font-weight:700;}
.mbwr{flex:none;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;background:var(--wb);color:var(--wc);border:1px solid var(--wl);white-space:nowrap;}
/* 첫 화면 띠의 작은 꼴 — 점이 작고 · 자리는 색 글자. 칸이 좁으면 닉을 말줄임 */
.mbwho.sm{gap:5px;font-size:11.5px;margin:2px 0 4px;}
.mbwho.sm .mbwm{width:6px;height:6px;margin:0 3px 0 3px;box-shadow:0 0 0 3px var(--wb);}
.mbwho.sm .mbwr{padding:0;border:0;background:none;line-height:inherit;font-size:11.5px;}
/* 첫 화면 띠 — 노란 표 바로 옆(머리줄 안)에 서고 점은 뺀다(2026-10-18 사용자). 좁으면 닉을 말줄임 — 시각은 오른쪽 끝에 남는다 */
.mstop .mbwho.sm{margin:0;flex:0 1 auto;}
.mstop .msago{flex:none;white-space:nowrap;}      /* 닉이 길어도 시각은 한 줄 — 닉 쪽이 말줄임으로 준다 */
.mstop .mbwho.sm .mbwm{display:none;}
/* 폰 · 쿠폰 탭의 머리줄은 한 줄 — 보낸 사람 바로 오른쪽에 시각(2026-10-18 사용자 — 처음엔 줄 오른쪽 끝이었다). 아래 여백은 32 → 14(시안) */
.mbi.cp .mbtop{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:14px;}
.mbi.cp .mbtm{order:2;flex:none;}
/* PC · 쿠폰 방 — 말풍선 위의 보낸 사람 */
.rlwho{margin:0 0 7px 2px;}
.mbsd{font-size:13px;font-weight:700;color:rgba(233,237,245,.55);}
.mbsd::after{content:"·";margin-left:7px;color:rgba(233,237,245,.28);font-weight:400;}
.mbtm{font-family:var(--num);font-size:13px;font-weight:600;color:rgba(233,237,245,.42);}
/* 글은 3줄까지. 그 뒤는 «…» 로 자르고 아래 «더 보기» 로 편다(2026-10-02 선택).
   ⚠ max-height 가 꼭 있어야 한다 — -webkit-line-clamp 는 칸 높이가 «글 만큼» 일 때만 듣는다.
     4.86em = 1.62(line-height) × 3줄.
   ⚠ 자르는 동안에는 pre-wrap 을 못 쓴다(-webkit-box 와 어긋나 줄바꿈이 안 먹는다).
     펴면 pre-wrap 으로 돌려 원문의 줄바꿈을 그대로 보여 준다. */
.mbtx{min-width:0;font-size:17px;font-weight:600;line-height:1.62;color:var(--ink);
  word-break:break-word;white-space:normal;max-height:4.86em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mbtx.open{display:block;-webkit-line-clamp:unset;max-height:none;white-space:pre-wrap;}
/* 단추는 글의 일부처럼 둔다 — 틀을 씌우면 보상 알약과 겨룬다. */
.mbmore{margin-top:9px;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;color:#7fe3d0;}
.mbmore:hover{text-decoration:underline;}
.mbmore:focus-visible{outline:2px solid rgba(34,216,194,.5);outline-offset:3px;border-radius:3px;}
/* 보상 — 그림 + 수. 글자(「코인」)는 안 적는다. 툴팁에만 둔다. */
/* 글 위아래를 같은 폭으로 띄운다(14px, 2026-10-02 요청) — 머리줄·글·보상 세 덩이가
   같은 간격으로 서야 «세 칸» 으로 읽힌다. 전에는 위 7 아래 11 로 어긋나 있었다.
   7/11 → 14 → 18 → 25 → 32 로 네 번에 걸쳐 띄웠다(2026-10-02 요청). */
.mbrws{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;}
/* 보상 알약 — 유리 바탕 위라 금빛 칠을 빼고 «어둡게 파인» 자리로 둔다.
   바탕이 이미 밝은 쪽이어서, 알약까지 금빛이면 줄 전체가 노랗게 뜬다. */
.mbrw{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:9px;
  background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.mbrw i{font-style:normal;font-size:15px;line-height:1;}
.mbrw .rwi{width:19px;height:19px;}
.mbrw b{font-family:var(--num);font-size:14.5px;font-weight:700;color:#f2d978;}
/* 부동산의 전원 선물(2026-10-14) — 사료 탭에 우편과 나란히 서지만 우편이 아니다. 블럭의 색으로 가른다(보라 — 사용자가 금빛 · 청록 · 보라 · 파랑에서 골랐다).
   금빛은 코인 칩과 겹치고, 파랑은 보통 블럭과 차이가 적었다. 테두리는 여기서도 그림자다(위 .mbi 의 까닭 그대로). */
.mbi.rt{background:linear-gradient(180deg,rgba(150,130,255,.14),rgba(150,130,255,.05));
  box-shadow:inset 0 0 0 1px rgba(150,130,255,.44),0 8px 22px -16px rgba(0,0,0,.9);}
.mbi.rt::before{background:linear-gradient(90deg,transparent,rgba(195,184,255,.42),transparent);}
.mbi.rt:hover{box-shadow:inset 0 0 0 1px rgba(150,130,255,.62),0 12px 26px -16px rgba(0,0,0,.95);}
.mbic.rt{color:#c3b8ff;}
.mbic.rt .rti{display:block;margin-top:.18em;}
.mbrw.rt{box-shadow:inset 0 0 0 1px rgba(150,130,255,.4);color:#c3b8ff;}
.mbrw.rt .rti{width:17px;height:17px;flex:0 0 auto;}
.mbrw.rt b{color:#c3b8ff;}
.mbrw.rt small{font-size:12px;font-weight:600;color:rgba(195,184,255,.8);margin-left:-2px;}
/* 첫 화면에서 눌러 들어왔을 때 — 그 한 통만 잠깐 빛난다. 스크롤만 하면 어디로 왔는지 모른다. */
.mbi.lit{animation:mbLit 1.9s ease-out;}
/* ⚠ border 가 아니라 box-shadow 를 흔든다 — 위 .mbi 가 테두리를 그림자로 긋기 때문이다.
     border-color 를 움직이던 옛 애니메이션은 이제 아무 데도 안 닿는다. */
@keyframes mbLit{
  0%{box-shadow:inset 0 0 0 1px rgba(240,204,34,.85),0 0 0 4px rgba(240,204,34,.12);}
  60%{box-shadow:inset 0 0 0 1px rgba(240,204,34,.5),0 0 0 4px rgba(240,204,34,0);}
  100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 8px 22px -16px rgba(0,0,0,.9);}}
@media (prefers-reduced-motion: reduce){
  .mbi.lit{animation:none;box-shadow:inset 0 0 0 1px rgba(240,204,34,.6);} }
.mbmsg{padding:56px 0;text-align:center;font-size:14px;color:var(--mut);line-height:1.8;}
.mbsub{font-size:12px;opacity:.8;}
@media (max-width:560px){
  .mbi{padding:13px 13px;gap:11px;}
  .mbic{font-size:17px;}
  .mbtx{font-size:13.5px;}
  .mbtop{flex-direction:column;align-items:flex-start;gap:4px;}
  .mbtm{order:-1;}
}

/* ══ 첫 화면의 우편 띠 — 최근 두 통 ═══════════════════════
   검색창과 황고 사이. 핵심만 — 얼마나 됐나 · 무슨 글 · 무엇이 들었나.
   상자를 안 씌운다: 첫 화면에 틀이 하나 더 생기면 검색창과 황고가 밀려 보인다.
   대신 왼쪽에 금빛 세로선을 둬서 «운영자가 보낸 것» 이라는 결을 준다. */
/* 100vw 로 깎으면 안 된다 — 품(.wrap 24 + .hero 20 = 좌우 44)을 모르는 수라서,
   375px 화면에서 띠가 품보다 28px, 화면 밖으로 4px 삐져나왔다(2026-10-03 실측).
   100% 면 어느 폭에서든 품에 딱 맞고, 넓은 화면에선 792 가 그대로 선다. */
.mstrip{width:792px;max-width:100%;margin:6px auto 0;text-align:left;}
/* 세 통을 «가로로» 세운다(2026-10-02 선택 D안). 세로로 쌓으면 세 줄 높이를 먹는데,
   첫 화면은 황고까지 한 화면에 들어가야 해서 그 70px 이 아깝다.
   auto-fit 이라 좁아지면 저절로 두 칸·한 칸으로 접힌다 — 폰에서 따로 손댈 게 없다. */
.mstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:9px;}
/* 한 칸 — 옅은 알약. 누를 수 있는 것임이 틀만으로 읽힌다(화살표를 뺀 이유다).
   안은 세 줄이다: 머리(✉ · 시각) / 제목 / 보상. */
/* 높이에 바닥을 깐다 — 145px = 20(여백) + 13(머리) + 10 + 59(제목 3줄) + 10 + 14(보상) + 20.
   «제목이 3줄일 때» 의 높이다. 그래야 글이 짧은 우편만 모인 날에도 블럭이 쪼그라들지 않는다
   (2026-10-02 요청: 적든 많든 같은 크기로).
   ⚠ 한 번 넣었다 뺐던 값이다. 그때는 min-height 에 space-between 을 같이 걸어 머리줄까지
     위아래로 벌렸고, 운영자 우편은 86%가 「🍀」 한 글자라 한복판이 텅 비어 보였다.
     지금은 다르다 — 머리와 제목은 위에 붙여 쌓고(flex-start), 보상만 바닥에 붙인다
     (.msrws 의 margin-top:auto). 남는 자리는 제목과 보상 «사이» 한 군데로만 간다.
   세 칸의 높이가 서로 맞는 일은 격자가 한다(align-items 기본값이 stretch 다) —
   한 칸이 길어지면 나머지도 같이 커지되, 짧은 칸의 글은 위에 모여 있다. */
.msi{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;width:100%;min-height:142px;
  padding:20px;border:0;border-radius:13px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .18s,box-shadow .18s;}
.msi:hover,.msi:focus-visible{background:rgba(255,255,255,.06);outline:none;
  box-shadow:inset 0 0 0 1px rgba(240,204,34,.35);}
/* 머리줄(✉ · 시각) 과 제목 사이 = 18px (2026-10-02 요청).
   ⚠ .msi 의 gap 으로 두지 않는다 — 그 gap 은 «제목 → 보상» 에도 똑같이 걸려 둘이 같이 움직인다.
     각각 다른 값을 줘야 해서 gap 을 0 으로 두고 여기와 .mstx 에 margin 으로 나눠 적는다. */
.mstop{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.msic{flex:0 0 auto;font-size:15px;line-height:1;color:rgba(240,204,34,.8);}
.msago{margin-left:auto;font-family:var(--num);font-size:12.5px;font-weight:700;
  color:rgba(233,237,245,.4);}
/* 제목 — 세 줄까지. 그 뒤는 «…» 로 자른다(2026-10-02 요청).
   ⚠ max-height 가 꼭 있어야 한다. -webkit-line-clamp 는 칸 높이가 «글 만큼» 일 때만 듣는데,
     flex:1 로 칸을 늘려 놓으면 clamp 가 안 걸리고 overflow:hidden 이 네 번째 줄을 «중간에서» 잘라
     글자 윗부분만 빼꼼 보인다(2026-10-02 지적). 그래서 늘리지 않고(flex:0 1 auto) 높이를 못 박는다.
     3em = 1.5(line-height) × 2줄.
   3줄 → 2줄로 줄였다(2026-10-02 요청) — 글씨를 13 → 14px 로 키우면서, 블럭 높이(145px)를
     그대로 두려면 한 줄을 내줘야 했다. 운영자 우편은 86%가 「🍀」 한 글자라 실제로 걸리는 일은 드물다. */
/* 글이 한 줄이어도 두 줄 자리를 비워 둔다(2026-10-03 요청) — max-height 면 짧은 글에서
   칸이 줄어 띠 높이가 142~149 사이로 들썩였다. height 로 못 박으면 내용과 무관하게 149 고정이고,
   line-clamp 가 기대는 높이 상한도 그대로 선다. */
.mstx{flex:0 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink2);
  height:3em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:21px;
  transition:color .18s;}
.msi:hover .mstx{color:var(--ink);}
/* 보상 — «한 줄만». 넘치면 줄이 늘어 카드가 들쭉날쭉해지므로 안 접히게 못 박는다.
   안쪽(.msrwl)만 가두고 «+N» 은 그 밖에 둔다 — 넘칠 때 +N 부터 잘려 나가면 안 되기 때문이다.
   잘린 자리는 오른쪽 끝이 흐려지며 사라진다(가위로 자른 듯한 단면을 안 보이게). */
/* 보상은 «바닥» 에 붙인다(2026-10-02 요청). 격자가 세 칸의 높이를 가장 긴 칸에 맞춰 늘리는데,
   그냥 두면 짧은 칸은 보상이 제목 바로 밑에 붙어 칸마다 높이가 들쭉날쭉해 보인다.
   margin-top:auto 로 남는 자리를 전부 제목 «위쪽» 이 아니라 제목과 보상 «사이» 로 보낸다 —
   머리(✉·시각)는 위, 보상은 아래로 고정되고 칸끼리 줄이 맞는다.
   ⚠ .msi 를 space-between 으로 벌리는 것과는 다르다. 그건 머리줄까지 같이 밀려 한복판이 비었다. */
/* 보상 줄 — 높이를 그림 칩(17) 기준으로 받쳐 둔다. 🃏 처럼 그림 없는 칩만 들면
   15.4 로 내려앉아 그 칸만 1.5px 짧아진다. 빈 줄(보상 없는 우편)도 이 높이를 쓴다. */
.msrws{margin-top:auto;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:17px;}
.msrwl{flex:1;min-width:0;display:flex;flex-wrap:nowrap;gap:9px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);}
.msrw.more{flex:0 0 auto;}
.msrw{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;}
.msrw i{font-style:normal;font-size:13.5px;line-height:1;}
.msrw b{font-family:var(--num);font-size:13px;font-weight:700;color:rgba(242,217,120,.92);}
/* 접힌 나머지 — «+2». 수가 아니라 «더 있다» 는 표시라 금빛을 빼고 흐리게 둔다. */
.msrw.more{font-family:var(--num);font-size:13px;font-weight:700;color:rgba(233,237,245,.4);}
/* 보상 그림 — 게임이 쓰는 PNG 를 그대로 가져온다(ui/mailbox.js 의 RW 참고).
   원본이 192px 이라 줄여 쓴다. 안 오면 alt 글자가 그 자리에 보인다. */
.rwi{width:17px;height:17px;object-fit:contain;display:block;font-size:10px;color:var(--mut2);}
@media (max-width:560px){
  .mstrip{margin-top:20px;}
}

/* ══ 맨 위로 ══════════════════════════════════════════════
   한참 내려간 뒤에만 뜬다(SHOW_AT). 늘 떠 있으면 짧은 화면에서도 자리를 먹고,
   오른쪽 아래는 폰에서 엄지가 닿는 자리라 표의 마지막 칸을 가린다. */
.totop{position:fixed;right:26px;bottom:26px;z-index:40;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);color:var(--ink2);
  background:rgba(18,23,32,.92);backdrop-filter:blur(6px);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.65);
  opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s,border-color .18s,color .18s;}
.totop.on{opacity:1;transform:translateY(0);}
.totop:hover{color:var(--ink);border-color:rgba(127,227,208,.5);}
.totop:focus-visible{outline:2px solid rgba(127,227,208,.7);outline-offset:2px;}
/* 폰 — 조금 작게, 모서리에 더 붙인다. 안전 영역(홈 바)을 피한다. */
@media (max-width:560px){
  .totop{right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:40px;height:40px;}
}
@media (prefers-reduced-motion: reduce){ .totop{transition:none;} }

/* ⚠ 창 «높이» 로 갈라지는 규칙은 두지 않는다(2026-10-02 결정).
   확대/축소는 창을 안 건드린다 — 글자만 작아져 더 많이 들어가고, 그만큼 CSS 가 보는
   창 높이가 커진다. 그래서 높이로 갈라 두면 배율만 바꿔도 단계를 넘어 자리가 통째로 뛴다
   (100% 에서 «우편→황고 62», 80% 에서 126 으로 뛰어 지적받았다).
   «배율 무관 고정» 과 «어떤 창에도 한 화면» 은 서로 반대라 둘 다는 안 된다.
   스크롤을 받기로 하고 고정을 택했다 — 100% 의 그림이 모든 배율에서 그대로다.
   폭(max-width)으로 갈라지는 규칙은 그대로 둔다: 경계(820·560·480)가 흔한 창 폭에서
   멀어 배율을 웬만큼 바꿔도 안 넘고, 많이 확대하면 좁은 화면 배치가 오히려 맞다. */

/* ══ 폰 배치 (2026-10-03) ═════════════════════════════════
   조건은 app.js 의 PHONE 과 «똑같다» — 한쪽만 바꾸면 JS(첫 눌림=펼치기)와 배치가 어긋난다.
   폭만 본다 — hover 로 가르면 삼성 인터넷이 폰인데도 데스크탑 배치가 됐다(위 .ufmatch 쪽 설명).
   폰에서만 보이는 요소 — 데스크탑에선 자리도 안 먹는다. */
.msbtn,.msclose,.mseg,.rktmore,.mtabs,.nd .ftm,.mman,.rkmain{display:none;}
/* 폰 카드의 둘째 줄 묶음(board.js · ranking.js). PC 에서는 없는 셈 — 안의 칸이 그대로 표의 열에 선다. */
.rst{display:contents;}
/* 폰 카드 로딩 줄의 아래쪽 자리(board.js · ranking.js skRows). PC 줄은 한 줄이라 안 쓴다. */
.skph{display:none;}
.usums{display:contents;}
@media(max-width:820px){
  /* ── 틀: 위 두 줄 — ① 로고 · 게임 · 검색 단추 ② 메뉴 탭 넷 ──
     아래 탭 막대는 안 쓴다(2026-10-03 요청). op.gg·dak.gg 모바일이 그렇다 — 메뉴를 위에 모으고,
     스크롤하면 위 막대도 같이 올라간다(고정하지 않는다). 화면 아래 56px 을 표가 다 쓴다.
     줄을 가르는 건 순서(order)다 — 마크업은 데스크탑과 같은 한 벌이고, 메뉴(.navs)만 둘째 줄로 내린다. */
  .wrap{padding:0 16px;}
  .top{padding:0 16px;column-gap:10px;row-gap:0;flex-wrap:wrap;}
  /* 로고 줄은 예전(아래 탭 시절) 높이 56px 그대로 — 41px 로 줄었더니 로고 막대가 납작해 보였다(10-03 실기기). */
  .brand{order:0;min-height:56px;display:flex;align-items:center;}
  .gbtn{order:1;}
  .dcbtn{order:1;margin-left:0;padding:0;width:36px;height:36px;justify-content:center;gap:0;}   /* 게임 버튼 바로 뒤(마크업 순서). 폰은 칸 사이가 10 이라 안 당긴다 */
  .dcbtn .tx{display:none;}
  .dcm{width:22px;height:18px;font-size:13px;}
  .msbtn{order:2;}
  .tsbox{display:none;}
  .gbtn{padding:0;width:36px;height:36px;justify-content:center;gap:0;}
  .gbtn .tx,.gbtn .arw{display:none;}
  .msbtn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;
    border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);cursor:pointer;}
  .top .navs{order:3;flex:0 0 calc(100% + 32px);margin:0 -16px;display:block;border-top:1px solid #20252e;}
  #viewnav{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
  #viewnav .navitem{display:flex;}
  #viewnav .submenu,#viewnav .navitem::after{display:none !important;}
  #viewnav>a,#viewnav>.navitem>a{flex:1;display:block;text-align:center;padding:12px 0 11px;border-radius:0;
    font-size:14px;background:none;}
  /* 켜진 탭 — 글자색 + 밑줄. 위 막대 아래 선과 겹쳐 «여기가 지금 화면» 으로 읽힌다. */
  #viewnav>a.on,#viewnav>.navitem>a.on{background:none;box-shadow:inset 0 -2px 0 #22d8c2;}
  .totop{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:40px;height:40px;}
  /* 검색 화면 — 위 검색창 한 벌을 화면 전체로 편다. 자동완성은 창 밑에 그대로 흐른다. */
  /* 화면 전체를 갈아 끼우지 않고, 위에서 내려오는 덮개로 띄운다(2026-10-03 요청). 뒤 화면은 어둡게 비친다.
     덮개 밖을 누르면 닫힌다(app.js). 자동완성은 덮개 안에서 길어지면 스스로 스크롤한다. */
  body.msearch{overflow:hidden;}      /* 덮개가 떠 있는 동안 뒤 화면은 안 민다 — 밀면 덮개와 메뉴바가 어긋난다 */
  body.msearch::before{content:"";position:fixed;left:0;right:0;bottom:0;top:var(--mstop,0px);z-index:59;background:rgba(5,7,10,.62);}
  body.msearch .tsbox{display:block;position:fixed;left:0;right:0;top:var(--mstop,0px);z-index:60;width:auto;
    background:#12151b;border-bottom:1px solid #2a2f39;padding:10px 16px 12px;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.8);max-height:72vh;overflow-y:auto;}
  body.msearch .topsearch{height:46px;}
  body.msearch .topsearch input{font-size:16px;}   /* 16px 밑이면 iOS 가 화면을 확대한다 */
  body.msearch .msclose{display:block;flex:0 0 auto;border:0;background:none;color:var(--mut);
    font-family:var(--sans);font-size:13px;padding:6px 2px 6px 8px;cursor:pointer;}
  body.msearch #tsugg{position:static;margin-top:10px;}
  /* 화면 머리의 보특·결특 — 아래 탭에 못 펴는 하위 메뉴 대신 */
  .mseg{display:inline-flex;flex:0 0 auto;padding:2px;border-radius:9px;background:rgba(255,255,255,.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);align-self:center;}
  .mseg[hidden]{display:none;}
  .mseg a{padding:5px 13px;border-radius:7px;font-size:12px;font-weight:700;color:var(--mut);cursor:pointer;}
  .mseg a.on{color:#06100f;background:var(--g2);}
  .phead{padding-top:22px;flex-wrap:wrap;row-gap:12px;}
  #rankpanel .phead{margin-bottom:14px;}      /* 폰 — 제목 밑에서 탭 줄까지(빈 타임라인 상자의 아래 여백이 하던 일. PC 는 40px) */
  .rsub{order:5;flex:0 0 100%;display:flex;}
  .rsub[hidden]{display:none;}
  .rsub a{flex:1;text-align:center;}
  .phead h1{font-size:22px;}
  .pnote{display:none;}
  /* ── 회차 줄: 시각 칩(2026-10-03 시안 B) ──
     열 칸이 28px 씩이라 원과 시각이 겹쳤다. 그림을 빼고 시각만 여섯 칸씩 세운다 — 보스 그림은 바로 아래 «보스 정보» 가 보여 준다.
     같은 시각의 월보·결특(갈래)은 칩 둘로 나란히 선다. 상태는 색으로: 끝남 기본 · 진행 초록 · 아직 흐림 · 고른 것 청록 테. */
  .roundtl{position:relative;margin:10px 0 14px;}
  .rtlbadge{margin:0 0 12px;}
  .roundtl:has(.slot.fork) .rtlbadge{margin-bottom:12px;}
  .rtl{display:block;padding:0;}
  .rtlnav{position:absolute;top:-6px;width:30px;height:34px;}
  /* 넘기는 단추는 날짜 표시 바로 옆에 선다(2026-10-09) — 전에는 화면 양 끝이라 «어제» 와 떨어져 무엇을 넘기는지 안 읽혔다.
     표시의 폭을 못 박아 두면(오늘 · 어제 · 10-05 가 같은 폭) 단추 자리가 날마다 흔들리지 않는다. */
  .rtlbadge .dbadge{min-width:66px;justify-content:center;}
  .rtlnav[data-go="prev"]{right:calc(50% + 37px);} .rtlnav[data-go="next"]{left:calc(50% + 37px);}
  .rtlvp{overflow:visible;padding:0;margin:0;}
  .rtlday{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;align-items:stretch;}
  .rtlline,.slot.fork .fkarm,.slot.fork>.tm{display:none;}   /* 폰은 뜬 대로 칩만 */
  .rtlday>.nd.skx{display:none;}          /* 받는 중의 뼈대 — 폰은 여섯 칸 한 줄을 지킨다. PC 의 칸 수(board.js 의 TL_FULL)가 여섯을 넘을 때만 걸린다 */
  .slot.fork{display:contents;}
  .slot.fork .nd + .nd{margin-top:0;}
  .nd{flex:none;gap:1px;min-height:44px;height:100%;justify-content:center;padding:6px 0 5px;
    border:1px solid var(--line2);border-radius:9px;background:var(--panel);}
  /* 지나간 회차의 테 — 바탕과 붙어 칸이 안 보이지 않을 만큼만 밝힌다.
     2026-10-05 에는 «아직 안 열린 칸»(어두운 테)과 갈리라고 더 밝게(#6c7585) 했는데, 이제 안 열린 칸이 없어(포착된 회차만 그린다)
     견줄 상대가 없다 — 고른 칩(청록)과 진행 중(초록)이 더 잘 보이게 한 단 뺀다(2026-10-06 요청). */
  .nd.done{border-color:#343b47;}
  .nd .ph{display:none;}
  .nd .tm,.nd .ftm{display:block;font-size:12px;letter-spacing:-.02em;color:var(--ink2);}
  .nd::before{order:2;font-family:var(--sans);font-size:9.5px;font-weight:700;line-height:1.25;}
  .nd{align-items:center;text-align:center;}
  .nd::before{display:block;width:100%;text-align:center;}
  .slot.fork .tm{margin-top:0;}          /* 갈래 칸의 시각에 붙던 12px — 칩에서는 시각이 위로 밀려 문구와 어긋났다 */
  .nd.wb::before{content:"보특 월보";color:rgb(var(--wbc));}
  .nd.du::before{content:"결특 월보";color:#a06be2;}
  /* 시각 색은 상태만 말한다(끝남·진행·아직·고름). 모드 색은 아래 문구가 맡는다 — 결특만 시각까지 보라였다(버그). */
  .nd.wb .tm,.nd.du .tm{color:var(--ink2);}
  .nd.live::after{display:none;}
  .nd.live{border-color:rgba(var(--lvc),.65);}
  .nd.live .tm{color:rgb(var(--lvc));}
  /* 진행 중 — 시각 앞에 초록 점. 고른 칩은 테가 청록이라 «진행 중» 이 테 색만으로는 안 읽혔다. */
  .nd.live .tm::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:rgb(var(--lvc));box-shadow:0 0 6px rgb(var(--lvc));margin-right:4px;vertical-align:2px;}
  .nd.on{border-color:#22d8c2;background:rgba(34,216,194,.09);}
  .nd.live .tm,.nd.wb.live .tm,.nd.du.live .tm{color:rgb(var(--lvc));}
  .nd.on .tm,.nd.wb.on .tm,.nd.du.on .tm,.nd.live.on .tm{color:#22d8c2;}

  /* ── 홈: 우편은 옆으로 넘기는 띠, 황고는 한 단 작게 ── */
  .hero{padding:26px 0 0;gap:12px;}
  .hlogo{font-size:34px;}
  .htag{font-size:13px;margin-bottom:4px;}
  .hsearch input{font-size:16px;}
  .mstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;margin-top:14px;
    padding-bottom:4px;scrollbar-width:none;}
  .mstrip::-webkit-scrollbar{display:none;}
  .mstrip .msi{flex:0 0 78%;scroll-snap-align:start;min-width:0;}
  .gob{margin-top:44px;}

  /* ── 요약 블럭: 하위 탭으로 하나씩, 폭을 다 쓴다(2026-10-03 요청 — 옆으로 넘기기를 바꿈) ──
     탭 줄(.mtabs)은 app.js 가 블럭 바로 위에 세운다. 고른 블럭만 .msel 이 붙는다. */
  .mtabs{display:flex;border-bottom:1px solid var(--line);margin:12px 0 10px;}
  .mtabs[hidden]{display:none;}
  .mtabs button{flex:1;background:none;border:0;padding:10px 0 9px;font-family:var(--sans);font-size:13px;font-weight:700;
    color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .mtabs button.on{color:var(--g2);border-bottom-color:var(--g2);}
  .bsum,.bsum.two,.bsum.b3{display:block;margin-top:0;margin-bottom:14px;}
  .bsum>.sumc{display:none;}
  .bsum>.sumc.msel{display:flex;min-height:132px;}
  /* 블럭 안 제목은 PC 처럼 둔다(2026-10-03 실기기 뒤) — 숨겼더니 블럭 위가 비어 허전했다. */
  /* 추이 그림은 데스크탑에선 세 칸 줄의 높이를 받아 쓴다. 탭 안에서는 줄이 없어 높이가 0 이 됐다 — 못 박는다. */
  .bsum>.sumc.trend .trbody{flex:none;height:120px;}
  .foot{display:none;}            /* «정렬 — 헤더 클릭» 같은 데스크탑 설명. 폰은 칩으로 고른다 */

  /* ── 레이드 표: 사람마다 카드 한 장 (2026-10-05 시안 D + 바탕은 A) ──
     위 줄: 순위 · 플레이어 · 이번 딜.  아래 줄: 평균 순위 · 딜량 최고치 · 최근 순위 — 이름표가 위, 값이 아래.
     예전엔 첫 줄만 보이고 눌러야 나머지가 열렸다. 내용이 너무 적다는 말에 늘 펼쳐 둔다.
     줄을 누르면 바로 그 사람 상세로 간다 — «전적 보기 ›» 단추는 뺐다(app.js). 랭킹 표도 같은 방식이다(아래). */
  .scroll{overflow-x:visible;}
  .cols,.row{grid-template-columns:30px minmax(0,1fr) auto 44px;gap:10px;min-width:0;
    grid-template-areas:"rk pl dm av";}
  .cols{padding:10px 14px 8px;}
  .cols>*{white-space:nowrap;}   /* «평균 순위» 가 두 줄로 접혀 머리줄이 부풀었다(운영 실측) */
  .row{padding:9px 14px;}
  /* 레이드 표만 — 랭킹(.scroll.rank)은 머리줄이 칩 줄이라 아래 따로 잡는다. */
  .scroll:not(.rank) .cols>:nth-child(1),.scroll:not(.rank) .row>.rkcell{grid-area:rk;}
  .scroll:not(.rank) .cols>:nth-child(2),.scroll:not(.rank) .row>.pl{grid-area:pl;}
  .scroll:not(.rank) .cols>:nth-child(3),.scroll:not(.rank) .row>.dmg{grid-area:dm;}
  .scroll:not(.rank) .cols>:nth-child(5),.scroll:not(.rank) .row>.avgr{grid-area:av;}
  .scroll:not(.rank) .cols>:nth-child(4),.scroll:not(.rank) .cols>:nth-child(6),.row>.maxd,.row>.form{display:none;}
  .pl{gap:9px;}
  .dmg{height:34px;}
  .dmg .num{font-size:15px;}   /* 폰도 15 — 레이드 · 랭킹의 딜 숫자는 PC · 폰 모두 15 다(2026-10-11 맞춤. 전 PC 18 · 폰 15.5) */
  .dmg .num .u{display:none;}      /* «딜» 글자 — 칸 머리가 이미 «보스딜량» 이다. 이름 칸에 그만큼 준다 */
  .dmg .bar{display:none;}
  /* 카드 사이는 12px — 8px 였다가 벌렸다(2026-10-05 요청). 카드가 커진 뒤로 8px 는 서로 붙어 보였다. 랭킹(아래)도 같다. */
  .scroll:not(.rank) .rows{display:flex;flex-direction:column;gap:12px;padding:10px;}
  .scroll:not(.rank) .row+.row::before{display:none;}            /* 카드 사이 구분선은 필요 없다 */
  /* 머리줄도 카드 안쪽 칸에 맞춘다 — 평균 순위는 아래 줄로 내려갔으니 머리에서 뺀다. */
  .scroll:not(.rank) .cols{grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"rk pl dm";padding:10px 23px 8px 24px;}
  .scroll:not(.rank) .cols>:nth-child(5){display:none;}
  .scroll:not(.rank) .row:not(.skrow){grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"rk pl dm";row-gap:9px;align-items:center;
    padding:10px 12px 11px 11px;border:1px solid var(--line2);border-left:3px solid var(--line2);border-radius:12px;background:var(--panel2);}
  /* 1~3위는 왼쪽 띠가 순위색 — 상세 화면 전적 카드와 같은 표현이다. */
  .scroll:not(.rank) .row.top1{border-left-color:#2b8cef;} .scroll:not(.rank) .row.top2{border-left-color:#22d8c2;} .scroll:not(.rank) .row.top3{border-left-color:#f0cc22;}
  /* 위 줄 — 이름과 이번 딜이 한 가로줄에 선다. 딜 칸이 34px 높이로 서면 숫자가 이름보다 위로 뜬다. */
  .scroll:not(.rank) .row:not(.skrow)>.dmg{height:auto;}
  .scroll:not(.rank) .row:not(.skrow) .dmg .num{padding-bottom:0;line-height:1.2;}
  /* 아래 줄 — 묶음(.rst)이 한 줄(flex)이다: 평균 순위 · 딜량 최고치는 왼쪽부터, 최근 순위는 오른쪽 끝.
     칸끼리 서로 밀어내므로 값이 길어져도 겹치지 않는다. 자리가 모자라면 칩 쪽이 줄어든다(오래된 칩부터 가려진다).
     ⚠ 예전엔 셋을 같은 칸에 겹쳐 놓고 여백(margin-left:74px)으로 밀었다 — 폭 360 에서 최고치와 칩이 겹쳤다(2026-10-05 점검).
     값의 줄 높이를 칩 높이(23px)에 맞춘다 — 글자 크기가 달라도(14 · 13px) 값 셋이 한 가로줄에 선다. 이름표는 14px. */
  .scroll:not(.rank) .row:not(.skrow)>.rst{display:flex;grid-area:auto;grid-row:2;grid-column:1/-1;align-items:flex-start;gap:16px;min-width:0;padding-top:9px;}
  .scroll:not(.rank) .row:not(.skrow) .rst>*{display:flex;flex-direction:column;gap:4px;height:auto;line-height:23px;white-space:nowrap;}
  .scroll:not(.rank) .row:not(.skrow) .rst>.avgr{order:-1;flex:0 0 auto;align-items:flex-start;text-align:left;font-size:14px;min-width:44px;}
  .scroll:not(.rank) .row:not(.skrow) .rst>.maxd{flex:0 0 auto;align-items:flex-start;text-align:left;font-size:14px;}   /* 14 — 옆의 평균 순위와 같은 크기(2026-10-11 사용자 결정. 전 13 · 잠깐 15) */
  .scroll:not(.rank) .row:not(.skrow) .rst>.form{flex:0 1 auto;min-width:0;margin-left:auto;align-items:flex-end;overflow:hidden;}
  .scroll:not(.rank) .row:not(.skrow) .rst>.form .chips{flex:0 0 auto;}
  .scroll:not(.rank) .row:not(.skrow) .rst>*::before{font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--mut);line-height:14px;}
  .scroll:not(.rank) .row:not(.skrow) .rst>.avgr::before{content:"평균 순위";} .scroll:not(.rank) .row:not(.skrow) .rst>.maxd::before{content:"딜량 최고치";} .scroll:not(.rank) .row:not(.skrow) .rst>.form::before{content:"최근 순위";}
  .scroll:not(.rank) .row:not(.skrow)::after{content:"";grid-row:2;grid-column:1/-1;align-self:start;height:1px;background:var(--line);}

  /* ── 랭킹: 정렬 셋을 칩 줄로, 행엔 고른 지표 하나만 ── */
  .scroll.rank .cols,.scroll.rank .row{min-width:0;}
  .scroll.rank .cols{display:flex;gap:6px;padding:0 0 10px;overflow-x:auto;scrollbar-width:none;}
  .scroll.rank .cols>:not(.shdr){display:none;}
  .scroll.rank .cols .shdr{flex:0 0 auto;padding:6px 11px;border-radius:99px;font-size:11.5px;
    border:1px solid var(--line2);background:var(--panel);text-align:center;}
  .scroll.rank .cols .shdr.sorton{border-color:rgba(184,166,234,.5);background:rgba(184,166,234,.1);}
  .scroll.rank .cols .lbl em{display:none;}
  .scroll.rank .cols .sarrow{display:none;}
  /* ── 줄 = 카드 한 장, 늘 펼쳐 둔다 (2026-10-05 시안 ④) ──
     위 줄  순위 · 이름 · 고른 지표(풀숫자)
     띠     고른 지표를 뺀 둘(평균 딜·최고치·평균 순위 중) + TOP 10 + 1위 횟수 — 이름표가 위, 값이 아래. 딜은 «만» 단위(.mman).
     아래   최근 순위
     예전엔 위 줄만 보이고 눌러야 나머지가 열렸다. 이제 누르면 바로 그 사람 상세로 간다(app.js) — «전적 보기 ›» 는 없앴다.
     상위권은 1위 횟수만 적는다(2·3위 횟수는 PC 표와 상세 화면에 있다) — 셋을 다 적으면 좁은 폰에서 한 줄에 안 든다.
     로딩 줄(.skrow)은 위 줄 틀만 쓴다. */
  .scroll.rank .row{grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"rk pl m";gap:10px;}
  .scroll.rank .rows{gap:12px;}                     /* 폰 카드 사이 — 레이드와 같은 12px(PC 는 8px 그대로) */
  .scroll.rank .rows .row{padding:11px 13px;}
  /* 폰 카드에서는 전 회차 대비 등락(▲9 · ▼1 · NEW)을 뺀다(2026-10-05 요청) — 순위 숫자를 키우니 그 옆에 둘 자리가 없다. PC 표에는 그대로 있다. */
  .scroll.rank .rkcell{grid-template-columns:1fr;column-gap:0;}
  .scroll.rank .rkcell .dl{display:none;}
  .scroll.rank .skrow .rkcell .skb+.skb{display:none;}        /* 로딩 줄의 등락 자리도 같이 */
  /* 순위 숫자 — 폰 카드에서는 20px 로 키우고, 11위 밖의 회색을 한 단 밝힌다(2026-10-05 시안 B).
     카드가 커졌는데 숫자는 표 시절의 16px 그대로라 묻혔다. 색 말은 PC 와 같다: 1 파랑 · 2 청록 · 3 노랑 · 4~10 흰색.
     달라지는 것은 크기와 «그 밖» 의 회색 한 단계뿐이다. 순위 칸은 세 자리(300)가 들도록 42px. 레이드 · 랭킹이 같이 쓴다. */
  .rows .row:not(.skrow) .rk{font-size:20px;font-weight:800;text-align:left;}
  .rows .row:not(.skrow) .rk:not(.g1):not(.g2):not(.g3):not(.g10){color:var(--ink2);}
  .scroll.rank .row>.rkcell{grid-area:rk;}
  .scroll.rank .row>.pl{grid-area:pl;}
  .scroll.rank .row>.dmg,.scroll.rank .row>.maxd,.scroll.rank .row>.avgr,
  .scroll.rank .row>.podc,.scroll.rank .row>.tenc,.scroll.rank .row>.form{display:none;}
  .scroll.rank .row:not(.skrow){row-gap:9px;align-items:center;border-left:3px solid var(--line2);padding-left:11px;}
  /* 1~3위는 왼쪽 띠가 순위색 — 레이드 카드 · 상세 전적 카드와 같은 표현. */
  .scroll.rank .rows .row.top1{border-left-color:#2b8cef;} .scroll.rank .rows .row.top2{border-left-color:#22d8c2;} .scroll.rank .rows .row.top3{border-left-color:#f0cc22;}
  /* 위 줄 오른쪽 — 고른 지표(.rkmain, ranking.js 가 정렬에 맞춰 그린다). */
  .scroll.rank .row:not(.skrow)>.rkmain{display:flex;grid-area:m;justify-content:flex-end;align-items:center;font-family:var(--num);font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;}
  .scroll.rank .row:not(.skrow)>.rkmain .avgr{display:flex;}
  .scroll.rank .row.champ:not(.skrow)>.rkmain{color:#fff;text-shadow:0 0 9px rgba(255,150,60,.8),0 0 20px rgba(255,95,25,.5);}
  /* 띠 — 묶음(.rst)이 한 줄(flex)이고 칸을 양 끝에 맞춰 고르게 편다. 칸끼리 서로 밀어내므로 값이 길어져도 겹치지 않는다.
     ⚠ 예전엔 칸을 겹쳐 놓고 0 · 27% · 54% 자리로 밀었다 — 딜이 1억을 넘으면(«11,036만») 좁은 폰에서 옆 칸과 겹쳤다(2026-10-05 점검).
     고른 지표의 칸은 띠에서 감춘다(위 줄에 이미 있다). 값의 줄 높이는 칩 높이(23px). 띠 바탕은 ::after 가 그린다. */
  .scroll.rank .row:not(.skrow)>.rst{display:flex;grid-area:auto;grid-row:2;grid-column:1/-1;justify-content:space-between;align-items:flex-start;gap:10px;
    position:relative;z-index:1;min-width:0;padding:8px 11px;}
  .scroll.rank .row:not(.skrow) .rst>*{display:block;flex:0 0 auto;height:auto;min-width:0;line-height:23px;text-align:left;white-space:nowrap;}
  .scroll.rank #rankrows[data-sort="adr"] .row:not(.skrow) .rst>.dmg,.scroll.rank #rankrows[data-sort="max"] .row:not(.skrow) .rst>.maxd,
  .scroll.rank #rankrows[data-sort="avg"] .row:not(.skrow) .rst>.avgr{display:none;}
  .scroll.rank .row:not(.skrow) .rst>.podc{order:9;text-align:right;font-size:13px;}       /* 1위 횟수는 늘 오른쪽 끝(마크업에서는 TOP 10 앞이다) */
  .scroll.rank .row:not(.skrow) .rst>*::before{display:block;margin-bottom:4px;font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--mut);line-height:14px;text-shadow:none;}
  .scroll.rank .row:not(.skrow) .rst>.dmg::before{content:"평균 딜";} .scroll.rank .row:not(.skrow) .rst>.maxd::before{content:"최고치";} .scroll.rank .row:not(.skrow) .rst>.avgr::before{content:"평균 순위";}
  .scroll.rank .row:not(.skrow) .rst>.tenc::before{content:"TOP 10";} .scroll.rank .row:not(.skrow) .rst>.podc::before{content:"1위 횟수";}
  .scroll.rank .row:not(.skrow) .rst>.avgr .apill{display:inline-flex;line-height:1.25;}
  .scroll.rank .row:not(.skrow) .rst>.dmg .num,.scroll.rank .row:not(.skrow) .rst>.maxd .mv{display:none;}
  .scroll.rank .row:not(.skrow) .rst .mman{display:block;font-style:normal;font-family:var(--num);font-size:15px;font-weight:700;color:var(--ink);text-shadow:none;animation:none;}
  .scroll.rank .row:not(.skrow) .rst>.maxd .mman{color:var(--ink2);}
  .scroll.rank .row:not(.skrow) .rst .mman.none{color:var(--mut2);font-weight:600;}        /* 값 없음 «–» — 옆 칸의 빈 값(.mdash)과 같은 흐림 */
  .scroll.rank .row:not(.skrow) .rst>.tenc b{font-size:15px;}
  /* 1위 횟수 — 첫 칸(1위)만 남기고 «회» 를 붙인다. TOP 10 칸과 같은 모양이다. 0 회는 흐리게(.z). */
  .scroll.rank .row:not(.skrow) .rst>.podc>span{display:none;}
  .scroll.rank .row:not(.skrow) .rst>.podc>span:first-child{display:inline;font-family:var(--num);font-size:15px;font-weight:700;}
  .scroll.rank .row:not(.skrow) .rst>.podc>span:first-child::after{content:"회";font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--mut);margin-left:3px;}
  .scroll.rank .row:not(.skrow)::after{content:"";grid-row:2;grid-column:1/-1;align-self:stretch;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;}
  /* 아래 줄 — 이름표는 왼쪽, 칩은 오른쪽 끝. */
  .scroll.rank .row:not(.skrow)>.form{display:flex;grid-area:auto;grid-row:3;grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;height:auto;}
  .scroll.rank .row:not(.skrow)>.form::before{content:"최근 순위";font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--mut);line-height:14px;text-shadow:none;}
  .scroll.rank .dmg .num{font-size:15px;padding-bottom:0;}

  /* ── 랭커: 표를 두 줄 카드로 ── */
  .rktabs{overflow-x:auto;scrollbar-width:none;}
  .rktab{flex:0 0 auto;}
  .rktb,.rktb tbody{display:block;}
  .rktb thead{display:none;}
  .rktb tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"tm bs bs" "wh wh dm";column-gap:10px;row-gap:7px;padding:11px 13px;
    border-bottom:1px solid var(--line);}
  .rktb tr:last-child{border-bottom:none;}
  .rktb td{padding:0;border:0;width:auto !important;min-width:0;}
  .rktb td:nth-child(1){grid-area:tm;align-self:center;}
  .rktb td:nth-child(2){grid-area:bs;}
  .rktb td:nth-child(3){grid-area:wh;}
  .rktb td:nth-child(4){grid-area:dm;align-self:center;}
  /* 2위와의 차이·2위 이름은 폰에서 뺀다(2026-10-03 시안 A) — 한 칸에 일곱 조각이 흩어져 있었다.
     남는 건 «언제 · 어느 보스 · 누가 · 얼마». 1위 딜을 밝게 올린다. */
  .rktb td:nth-child(5),.rkvs{display:none;}
  .rktb td.rkdmg{color:var(--ink);font-weight:700;}
  .rktly:nth-child(n+4){display:none;}
  .rktmore{display:inline-flex;align-items:center;font-family:var(--num);font-size:12px;color:var(--mut);}
  .rkday{flex-wrap:wrap;row-gap:6px;}

  /* ── 상세: 프로필은 한 줄로, 요약 셋은 옆으로 넘김, 전적은 눌러서 순위표 ── */
  .upcard{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:4px;
    align-items:center;text-align:left;padding:16px;}
  .upcard>.av{width:64px;height:64px;margin:0;grid-row:1;}
  .upcard>.av .fb{font-size:24px;}
  .upcard>.upname{grid-row:1;font-size:20px;}
  .upcard>.uprank{grid-column:1/-1;}
  .uhd:empty{margin:0;}           /* «뒤로» 를 뺀 자리 — 빈 여백만 남지 않게 */
  .usums{display:block;}
  .usums>*{display:none;margin-top:0;}
  .usums>.msel{display:block;}
  .usums>.ublk{display:block;margin-top:12px;}      /* 진영전 1등 — 탭 밖, 보특·결특 블럭과 대표 덱 사이 */
  /* 로딩 줄(2026-10-03) — 폰 배치의 실제 줄과 같은 높이·같은 칸. 예전엔 PC 줄을 그대로 줄여 써서
     얼굴이 작고(26 → 38) 오른쪽 숫자 자리가 비었고, 줄 높이가 달라 자료가 오면 표가 출렁였다. */
  .skrow .pl .skb.c{width:38px !important;height:38px !important;flex:0 0 auto;}
  .skrow .pl .skb:not(.c){height:13px !important;max-width:96px;}
  /* 실제 줄이 카드 한 장(120px)이다(2026-10-05) — 56 으로 두면 자료가 올 때 줄마다 64px 씩 는다. 테도 같이 둘러 같은 모양으로. */
  /* 로딩 줄도 카드와 같은 틀 — 위 줄(순위 · 얼굴 · 이름 · 딜)과 아래 줄 자리(.skph). 평균 순위는 아래 줄로 갔으니 위 줄에서 뺀다. */
  .scroll:not(.rank) .skrow{min-height:120px;border:1px solid var(--line);border-left-width:3px;border-radius:12px;align-content:start;
    grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"rk pl dm";row-gap:9px;padding:10px 12px 11px 11px;}
  .scroll:not(.rank) .skrow>.avgr{display:none;}
  .skrow>.skph{display:flex;align-items:center;gap:12px;grid-column:1/-1;}
  .scroll:not(.rank) .skrow>.skph{padding-top:26px;border-top:1px solid var(--line);}
  .scroll:not(.rank) .skrow>.dmg{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;}
  .scroll:not(.rank) .skrow>.dmg .skb{width:76px !important;height:13px !important;}
  .scroll:not(.rank) .skrow>.avgr .skb{width:30px !important;height:13px !important;margin-left:auto;}
  .scroll.rank .rows .skrow{min-height:162px;align-content:start;row-gap:9px;border-left-width:3px;padding-left:11px;}     /* 실제 줄이 카드 한 장(162px)이다(2026-10-05) */
  .scroll.rank .skrow>.skph.band{height:57px;box-sizing:border-box;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line);}
  /* 1위 카드의 이름 — PC 는 빛 번짐이 잘리지 않게 넘침을 풀어 뒀다. 폰은 이름 칸이 좁아 긴 닉이 옆 숫자를 덮었다(2026-10-05 점검). */
  .scroll.rank .row.champ .nm{overflow:hidden;padding:10px 12px;margin:-10px -12px;}      /* 안쪽 여백만큼 빛 번짐이 설 자리를 남긴다(바깥 여백으로 되돌려 자리는 그대로) */
  .scroll.rank .rows .skrow>.dmg{display:flex;grid-area:m;align-items:center;justify-content:flex-end;height:auto;}
  .scroll.rank .skrow>.dmg .skb{width:74px !important;height:13px !important;}
  /* 전적 로딩 카드 — 폰은 딜·인원에 이름표가 없다. PC 용 이름표 막대를 숨겨 두 줄로 맞춘다. */
  .ufstats .skstack .skb:first-child{display:none;}
  .ufmatch.sk .ufbody{min-height:99px;box-sizing:border-box;}      /* 실제 카드(세 줄 + 펼침 띠 10px = 101px, 테 2px 포함)와 같은 높이 */
  .ufmatch.sk .ufros{display:none;}                                   /* 폰은 순위표를 접어 둔다 — 로딩 카드도 같다 */
  /* 상세 첫 로딩 — 프로필 카드를 폰 크기로. 높이는 내용이 정한다(성장 알약이 폭에 따라 한 줄 · 두 줄로 흐른다, user.js skeletonHTML). */
  .upcard.sk>.skb.c{width:64px !important;height:64px !important;margin:0;}
  /* 대표 덱 — 다섯 장 한 줄. 석 장씩 두 줄이면 327px 를 먹어 전적이 한 화면 더 밀렸다(5장=135px). */
  .deck{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
  /* 전적 머리 — 스위치와 하위 셋이 한 줄에 서도록 칸을 줄이고, 그래도 모자라면 접는다(글자는 안 접는다). */
  /* 전적 머리(2026-10-03 시안 B) — 제목 / 스위치(폭 가득) / 하위 단추(왼쪽) 세 층.
     예전엔 하위 셋이 둘째 줄 오른쪽 끝에 혼자 떠서 무엇의 하위인지 안 읽혔다. */
  .ufeedhd{flex-wrap:wrap;row-gap:10px;gap:10px;}
  .ffilter{flex:0 0 100%;flex-direction:column;align-items:stretch;gap:8px;}
  .fsw{display:flex;}
  .fsw button{flex:1;padding:7px 0;font-size:12.5px;}
  .fsubs{margin-left:0;justify-content:flex-start;}
  .fsw button,.fbtn{white-space:nowrap;}
  /* 전적 카드: 한 줄(2026-10-03 시안 A) — 순위(밑에 상위 N%) · 보스 · 이름·모드·시각 · 딜(밑에 참여 인원).
     예전엔 딜량·참여인원이 둘째 줄로 내려가 카드 하나가 120px 였다. */
  /* 2026-10-03 실기기 뒤 — 카드를 키우고(위아래 16px), «상위 N%» 는 뺐다.
     오른쪽 두 줄(딜 / 참여 인원)을 왼쪽 두 줄(이름 / 뱃지·시각)과 같은 높이·같은 간격으로 세워 줄이 맞는다. */
  .ufbody{flex-wrap:nowrap;gap:12px;padding:12px 14px 12px 6px;}
  .ufres{flex:1;min-width:0;gap:12px;}
  .ufrk{min-width:48px;}
  .ufrank{font-size:22px;}
  .ufthumb{width:46px;height:46px;}
  .ufinfo{min-width:0;gap:4px;}   /* 이름 → 시각. 글자 사이로 재면 시각 → 뱃지와 같아진다(2026-10-11 맞춤. 전 7 · 5 — 이름 밑만 벌어져 보였다) */
  .ufbnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;font-size:14px;}
  .ufrow2{min-height:20px;flex-wrap:wrap;row-gap:6px;}
  .ufmd{white-space:nowrap;flex:0 0 auto;}      /* 뱃지는 안 접는다 — 좁으면 «월/보» 로 세로로 섰다 */
  /* 시각은 뱃지 밑 셋째 줄 — 가운데 칸이 좁아 뱃지 둘 + 시각이 한 줄에 안 들어간다(세 자리 순위, 2026-10-03 실기기). */
  .ufrow2 .uftime{flex:0 0 100%;order:-1;line-height:16px;font-size:12px;}   /* 이름 / 시각 / 뱃지 순 */
  .ufstats{flex-direction:column;align-items:flex-end;gap:7px;align-self:center;}
  .ufsl{display:none;}
  .ufst{height:20px;flex-direction:row;align-items:center;gap:0;}
  .ufst:nth-child(1) .ufsv{font-size:14px;}
  .ufst:nth-child(2) .ufsv{font-size:14px;font-weight:400;color:var(--mut);}   /* 크기는 PC 와 같은 14(전 12). 굵기 · 색은 폰의 것 그대로 */
  .ufst:nth-child(2) .ufsv::after{content:"명";margin-left:1px;}
  .ufros{display:none;}
  .ufmatch.open .ufros{display:block;}
  .ufmatch{cursor:pointer;}
  /* 펼침 표시(2026-10-05 요청) — 카드 아래 얇은 띠에 작은 세모. 누르면 순위표가 열리는데 그걸 알릴 것이 없었다.
     접혀 있으면 회색 세모가 아래를, 펼치면 청록 세모가 위를 본다. 띠 바탕은 펼친 순위표(.ufros)와 같은 어두운 색이라 열리면 한 덩어리로 이어진다.
     글자(«순위표 보기»)는 뺐다 — 카드마다 되풀이되면 시끄럽다. 세모는 테두리로 그린다(글꼴마다 ▾ 모양이 달라서). */
  .ufbody{position:relative;padding-bottom:22px;}
  .ufbody::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:rgba(0,0,0,.22);border-top:1px solid var(--line);}
  .ufbody::after{content:"";position:absolute;left:50%;bottom:3px;margin-left:-3.5px;width:0;height:0;
    border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid var(--mut);}
  .ufmatch.open .ufbody::after{border-top:0;border-bottom:4px solid #22d8c2;}
  .ufmatch.sk .ufbody::before,.ufmatch.sk .ufbody::after{display:none;}

  /* ── 쪽 단추: 한 줄 (2026-10-03 요청 — 일곱 쪽에서 두 줄로 접혔다) ──
     칸은 pageWindow 가 7개 이하로 묶고(…), 여기서는 단추를 줄여 한 줄에 들인다. */
  .pg{flex-wrap:nowrap;gap:4px;}
  .pgb{min-width:30px;padding:6px 0;font-size:12px;}
  .pgb.nav{min-width:30px;padding:6px 0;display:inline-flex;justify-content:center;align-items:center;}
  .pgn{margin-left:4px;font-size:11px;white-space:nowrap;}

  /* ── 우편함: 쪽 단추 옆 «N통» 은 뺀다(2026-10-03 요청) ── */
  #mailpanel .pgn{display:none;}
  .mbday{margin:32px 0 14px;}
}

/* ══ 딜량 추이 (2026-10-09) — 상세의 수입 요약과 참여 전적 사이. 내용은 ui/trend.js 가 채운다. ══
   이름은 전부 ut 로 시작한다. 그림 칸(.utplot)의 높이를 못 박는다 — 받는 동안의 뼈대와 다 받은 그림이 같은 높이라야
   아래 전적이 안 밀린다. 스위치는 전적의 것(.fsw)을 그대로 쓰되, 폰에서 줄 전체로 늘어나는 것만 막는다(.utsw). */
#utrend{margin-bottom:16px;}
.utblk{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 10px;min-width:0;}
.uthd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;min-height:28px;}
.utt{font-family:var(--disp);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;}
.utt i{font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--mut);margin-left:8px;}
.utt i b{font-family:var(--num);font-size:12.5px;color:var(--ink2);font-weight:700;}
.utplot{position:relative;height:160px;touch-action:pan-y;}
.utplot.sk{padding:6px 0 10px;}
.utplot svg{display:block;}
.utg{stroke:#353b46;stroke-width:1;}          /* 격자 — 블럭 테두리 색(--line)으로는 바탕에 묻혔다 */
.utv{stroke:#2c313b;stroke-width:1;}
.utax{font-family:var(--num);font-size:10px;fill:#9ba4b5;}       /* 눈금 글자 — 한 단계 어두운 색(--mut2)은 폰에서 안 읽혔다 */
.utpt{font-family:var(--sans);font-size:10px;font-weight:600;fill:#9ba4b5;}
.utpt.hi{fill:#22d8c2;}
.utax.hi{fill:#22d8c2;}
.utax.lo{fill:#9ba4b5;}
.utmax{stroke:#22d8c2;stroke-width:1;stroke-dasharray:4 4;opacity:.55;}
.utmin{stroke:#9ba4b5;stroke-width:1;stroke-dasharray:4 4;opacity:.5;}
.utline{fill:none;stroke:#22d8c2;stroke-opacity:.55;stroke-width:1.5;stroke-linejoin:round;}
.utgap{fill:none;stroke:#22d8c2;stroke-opacity:.3;stroke-width:1.2;stroke-dasharray:2 3;}
.utdot{stroke:var(--panel);stroke-width:1;}
.utmiss{fill:var(--line2);}
.utcur{fill:none;stroke:#e9edf5;stroke-width:1.5;pointer-events:none;}
.uttip{position:absolute;transform:translateX(-50%);background:#0d1016;border:1px solid var(--line2);border-radius:8px;padding:6px 9px;
  font-size:11px;color:var(--ink2);white-space:nowrap;line-height:1.5;pointer-events:none;z-index:2;}
.uttip b{font-family:var(--num);color:var(--ink);font-size:12.5px;}
.uttip em{font-style:normal;font-weight:700;margin-left:6px;}
.utmsg{height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mut);font-size:12.5px;text-align:center;}
@media(max-width:820px){
  .utsw{display:inline-flex;}
  .utsw button{flex:0 0 auto;padding:5px 13px;font-size:12px;}
  .utplot{height:150px;}
  .utt i{margin-left:6px;}
  .utmsg{height:150px;}
}
@media(max-width:400px){.utx{display:none;}}
/* 폰 — 블럭이 프로필 카드 바로 밑에 선다(user.js trendAt). 위아래 간격은 그 칸의 다른 블럭(.usums>.ublk)과 같은 12px. */
@media(max-width:820px){.uside>#utrend{margin:12px 0 0;}}

/* ══ 레이드 누적 수입량 (2026-10-03) — 상세의 요약 블럭 + 팝업. 내용은 ui/income.js 가 채운다. ══
   색: 기본 보상 = 노랑(--incb) · 순위 보상 = 보특 배지 색(--incr). 차트·금액 글자가 같은 색이다.
   이름은 전부 inc·inp 로 시작한다 — 짧은 이름(.tm .dn .dl .nm …)은 다른 화면이 이미 쓴다.
   숫자가 길어져도 틀이 안 깨지게: 금액 칸은 고정 폭·오른쪽 정렬, 늘어나는 칸은 min-width:0 + 말줄임,
   요약 숫자는 길이에 따라 한 단계씩 줄인다(.sm .xs — income.js 의 sizeOf). */
:root{--incb:#f0cc22;--incr:#22d8c2;}
#uincome{margin-bottom:16px;}
#uincome[hidden]{display:none;}
.incblk{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;min-width:0;}
/* tap-highlight — 폰 브라우저가 누르는 순간 덮는 반투명 사각형을 끈다(2026-10-03 요청). 사이트가 그리는 효과는 그대로다. */
.incblk[role=button]{cursor:pointer;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;}
.incblk[role=button]:hover{border-color:rgba(240,204,34,.45);background:#171a20;}
.incblk[role=button]:focus-visible{outline:2px solid var(--incb);outline-offset:2px;}
.inchd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;min-height:15px;}
.inct{font-size:14px;font-weight:700;color:#fff;}
.incgo{font-size:11.5px;color:var(--mut2);white-space:nowrap;}
.incblk[role=button]:hover .incgo{color:var(--incb);}
.incbd{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.incm{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 180px;}
/* 이름표 넷(이번달 · 오늘 · 이번주 · 지난달) — 한 단 밝은 회색(2026-10-05 요청).
   처음엔 «이번달» 만 올렸다가 넷을 다 같은 톤으로 맞췄다. 밑의 «N회차» 같은 덧글(.incf)은 어두운 그대로라 층이 갈린다. */
.inck{font-size:11px;color:var(--ink2);}
.incmv{font-family:var(--num);font-size:30px;font-weight:700;line-height:1;color:var(--incb);white-space:nowrap;}
.incmv.sm{font-size:26px;} .incmv.xs{font-size:22px;}
.incmv u{text-decoration:none;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--mut2);margin-left:6px;}
.incf{font-size:10.5px;color:var(--mut2);white-space:nowrap;}
.incf b{font-family:var(--num);font-weight:400;color:var(--mut);}
.incs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;flex:2 1 330px;min-width:0;}
.incc{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;display:flex;flex-direction:column;}
.incc .inck{margin-bottom:6px;}
.incv{font-family:var(--num);font-size:15px;font-weight:700;color:var(--incb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.incv.sm{font-size:13.5px;} .incv.xs{font-size:12px;}
.incc .incf{margin-top:5px;}
.incc.off .incv{color:var(--mut2);}
.ntiny{display:none;}
.incfail{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:14px 0 6px;font-size:12.5px;color:var(--mut);}

/* ── 팝업 ── */
html.inplock,html.inplock body{overflow:hidden;}
.inpwrap{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:20px 16px;
  background:rgba(4,6,10,.72);overscroll-behavior:contain;}
.inpwrap[hidden]{display:none;}
.inpbox{width:100%;max-width:580px;max-height:100%;display:flex;flex-direction:column;background:#151921;border:1px solid var(--line2);
  border-radius:18px;box-shadow:0 30px 60px -30px #000;outline:none;font-variant-numeric:tabular-nums;min-width:0;}
/* 머리는 고정이고 그 밑으로 내용이 굴러 들어간다 — 선과 그림자로 층을 준다(없으면 내용이 위에서 잘린 것처럼 보인다).
   폰에 먼저 넣었던 것을 PC 에도 맞췄다(2026-10-03 요청). */
.inph{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 22px 14px;flex:0 0 auto;
  position:relative;z-index:1;border-bottom:1px solid var(--line2);box-shadow:0 10px 14px -8px rgba(0,0,0,.65);}
.inpwho{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.inpwho .av{width:30px;height:30px;flex:0 0 auto;}
.inpwho .av .fb{font-size:12px;}
.inpnick{font-size:17px;font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inpwho em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--incb);background:rgba(240,204,34,.1);border-radius:999px;
  padding:2px 9px;white-space:nowrap;flex:0 0 auto;}
.inpx{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:0;background:rgba(255,255,255,.05);color:var(--mut);font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--sans);}
.inpx:hover{background:rgba(255,255,255,.1);color:var(--ink);}
.inpx:focus-visible{outline:2px solid var(--incb);outline-offset:1px;}
/* 위 22px — 요약 칸 아래 간격(22)과 같게(2026-10-03 요청). 14 일 때는 요약 칸이 머리 쪽에 붙어 보였다. */
.inpbody{overflow-y:auto;overflow-x:hidden;padding:22px 22px 16px;min-height:0;overscroll-behavior:contain;}
.inpbody{scrollbar-width:thin;scrollbar-color:var(--line2) transparent;}
.inpbody::-webkit-scrollbar{width:8px;} .inpbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;} .inpbody::-webkit-scrollbar-track{background:transparent;}
.inpbody i,.inpbody em{font-style:normal;}
.inpbody small{color:var(--mut);font-size:11.5px;}
.inpbody i.b::before,.inpbody i.r::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;vertical-align:1px;}
.inpbody i.b::before{background:var(--incb);} .inpbody i.r::before{background:var(--incr);}

.inpkpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.inpk{padding:11px 12px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;border-radius:12px;
  background:linear-gradient(180deg,rgba(240,204,34,.1),rgba(240,204,34,.02));border:1px solid rgba(240,204,34,.38);}
.inpk span{font-size:11px;color:var(--incb);}
.inpk b{font-family:var(--num);color:#f6dc5c;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.inpk b.sm{font-size:14.5px;} .inpk b.xs{font-size:12.5px;}
.inpk u{text-decoration:none;font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--mut2);margin-left:4px;}
.inpk b.sm u,.inpk b.xs u{display:none;}
.inpk.off{background:rgba(255,255,255,.02);border-color:var(--line);} .inpk.off span,.inpk.off b{color:var(--mut2);}
.inpk.sk{background:rgba(255,255,255,.02);border-color:var(--line);min-height:58px;}

.inpsec{margin-top:22px;}
.inpsh{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;min-height:20px;}
.inpsh h4{font-size:13.5px;margin:0;font-weight:700;}
.inplg{margin-left:auto;display:flex;gap:12px;font-size:11px;color:var(--mut);white-space:nowrap;}
.inpdh{display:flex;align-items:baseline;gap:8px;padding:8px 10px;background:rgba(255,255,255,.035);border-radius:9px;margin-top:6px;min-width:0;}
.inpdh>b:first-child{font-size:13px;white-space:nowrap;}
.inpdh em{font-family:var(--num);font-size:11.5px;color:var(--mut);}
.inpsplit{margin-left:auto;display:flex;gap:12px;font-size:11.5px;color:var(--mut);white-space:nowrap;min-width:0;}
.inpsplit i{font-family:var(--num);}
.inpdt{font-family:var(--num);font-size:14px;font-weight:700;min-width:64px;text-align:right;white-space:nowrap;}
.inpit{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--line);min-width:0;}
.inplist .inpit:last-child{border-bottom:0;}
.inptm{font-family:var(--num);font-size:12px;color:var(--mut);width:38px;flex:0 0 auto;}
.inpt{font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 7px;white-space:nowrap;flex:0 0 auto;line-height:17px;}
.inpt.mb{color:#9aa3b4;background:rgba(255,255,255,.06);} .inpt.wb{color:#e067b0;background:rgba(224,103,176,.11);}
.inpbn{flex:1;min-width:0;display:flex;align-items:baseline;gap:7px;font-size:13px;font-weight:400;color:var(--ink2);}
.inpbnm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inpbn small{flex:0 0 auto;white-space:nowrap;}
.inppr{display:flex;gap:18px;font-family:var(--num);font-size:12px;flex:0 0 auto;}
.inppr i{text-align:right;white-space:nowrap;}
.inppr i::before{display:none !important;}
.inppr .b{min-width:44px;color:var(--incb);} .inppr .r{min-width:54px;color:var(--incr);}
/* 줄마다의 합계는 보통 굵기 — 굵은 글씨는 «오늘·어제» 머리줄의 합계(.inpdt)에만 둔다(2026-10-03 요청). */
.inpsum{font-family:var(--num);font-size:13.5px;font-weight:400;color:var(--ink2);min-width:62px;margin-left:10px;text-align:right;flex:0 0 auto;white-space:nowrap;}
.inpit.wait .inpbn{color:var(--mut);} .inpnt{font-size:11.5px;color:var(--mut2);white-space:nowrap;flex:0 0 auto;}
.inpnone{padding:12px 10px;font-size:12px;color:var(--mut2);text-align:center;}

.inpdns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.inpdn{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);border-radius:12px;padding:12px 8px 10px;min-width:0;}
.inpdn svg{width:92px;height:92px;max-width:100%;display:block;}
.inpdn .ring{stroke:#262b35;} .inpdn .ring.b{stroke:var(--incb);} .inpdn .ring.r{stroke:var(--incr);}
.inpdn .dl{font-size:9px;fill:var(--mut);font-family:var(--sans);}
.inpdn .dv{font-size:11.5px;font-weight:700;fill:var(--ink);font-family:var(--num);}
.inpdn p{margin:0;display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--mut);width:100%;max-width:150px;min-width:0;}
.inpdn p i{white-space:nowrap;flex:0 0 auto;}
.inpdn p b{margin-left:auto;color:var(--ink);font-family:var(--num);font-weight:600;font-size:12px;white-space:nowrap;}
.inpdn p em{color:var(--mut2);min-width:30px;text-align:right;font-family:var(--num);font-size:11px;white-space:nowrap;flex:0 0 auto;}
.inpdn.none p b{color:var(--mut2);}

.inpbars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;border:1px solid var(--line);border-radius:12px;padding:14px 10px 12px;}
.inpbars.n1{grid-template-columns:minmax(0,180px);justify-content:center;}
.inpbars.n2{grid-template-columns:repeat(2,minmax(0,180px));justify-content:center;}
.inpbc{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0;}
.inpbt{font-family:var(--num);font-size:12.5px;font-weight:700;white-space:nowrap;}
.inpstk{display:flex;flex-direction:column;width:30px;border-radius:5px 5px 0 0;overflow:hidden;min-height:2px;}
.inpstk.none{background:var(--line2);}
.inpstk i{display:block;width:100%;} .inpstk i::before{display:none !important;}
.inpstk .b{background:var(--incb);} .inpstk .r{background:var(--incr);}
.inpbm{font-size:13px;font-weight:700;display:flex;flex-direction:column;line-height:1.3;}
.inpbm em{font-size:10.5px;font-weight:400;color:var(--mut2);min-height:14px;white-space:nowrap;}
.inpbc p{margin:0;display:flex;flex-direction:column;font-family:var(--num);font-size:11.5px;color:var(--ink2);align-items:flex-start;white-space:nowrap;}

.inptops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.inptp{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0;}
.inptp h5{margin:0 0 4px;font-size:12px;color:var(--mut);font-weight:600;}
.inptr{display:flex;align-items:center;gap:8px;padding:5px 0;min-width:0;}
.inptr .av{width:22px;height:22px;flex:0 0 auto;} .inptr .av .fb{font-size:10px;}
.inppos{width:14px;font-family:var(--num);font-size:13.5px;flex:0 0 auto;text-align:center;}
.inppos.g1{color:var(--g1);} .inppos.g2{color:var(--g2);} .inppos.g3{color:var(--g3);}
.inpnm{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inptr.me .inpnm{color:var(--incb);}
.inptv{font-family:var(--num);font-size:12.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;}
.inpfoot{margin:16px 0 0;font-size:11px;color:var(--mut2);text-align:center;text-wrap:balance;}
.inpstate{display:grid;place-items:center;text-align:center;padding:64px 20px 72px;}
.inpsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.inpsk .inpit{border-bottom-color:transparent;}
.inpsk .inptp>.skb{margin-bottom:8px;}

/* 좁은 화면 — 폰. 팝업은 아래에서 올라온 장처럼 화면 폭을 다 쓴다. */
@media(max-width:820px){
  .nfull{display:none;} .ntiny{display:inline;}
  .incbd{gap:12px;}
  .incm{flex:1 1 100%;}
  .incs{flex:1 1 100%;gap:6px;}
  .incc{padding:9px 9px;}
  .incv{font-size:13.5px;} .incv.sm{font-size:12px;} .incv.xs{font-size:11px;}
  /* 폰은 팝업이 아니라 한 쪽이다(2026-10-03 시안 A) — 화면을 다 덮고, 머리 왼쪽의 ‹ 와 폰의 «뒤로» 가 상세로 돌아간다.
     잠깐 보고 가는 화면이라 사이트 메뉴는 안 남긴다. 내역이 길어 세로를 다 쓴다. */
  .inpwrap{padding:0;align-items:stretch;background:var(--bg);}
  .inpbox{max-width:none;max-height:none;height:100%;border-radius:0;border:0;background:var(--bg);box-shadow:none;}
  /* 얼굴·닉네임 줄(30px) 위아래로 15px 씩 — ‹ 단추가 40px 이라 안쪽 여백은 10px 이다. */
  .inph{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px 6px;justify-content:flex-start;gap:2px;position:relative;z-index:1;
    border-bottom:1px solid var(--line2);box-shadow:none;}
  .inpx{order:-1;width:40px;height:40px;background:none;font-size:30px;line-height:1;padding-bottom:4px;color:var(--ink2);}   /* ‹ — 손가락으로 누를 크기 */
  .inpbody{padding:22px 16px calc(14px + env(safe-area-inset-bottom,0px));}      /* 머리 → 요약 칸 22px(구역 사이와 같게) */
  .inpkpis{gap:5px;}
  .inpk{padding:8px 8px 9px;}
  .inpk b{font-size:13px;} .inpk b.sm{font-size:11.5px;} .inpk b.xs{font-size:10.5px;}
  .inpk u{display:none;}
  .inpk b:has(.ntiny){font-size:13px;} .incv:has(.ntiny){font-size:13.5px;}
  .inpsplit{display:none;}
  .inpdt{margin-left:auto;}
  /* 내역 한 줄 → 두 줄: 윗줄 시각·뱃지·보스·합계, 아랫줄 등수와 기본·순위 금액 */
  .inpit{flex-wrap:wrap;row-gap:2px;padding:8px 4px;}
  .inpbn{flex:1 1 0;}
  .inpbn small{display:none;}
  .inpsum{margin-left:6px;min-width:0;}
  .inppr{order:5;flex:0 0 100%;min-width:0;justify-content:flex-end;gap:12px;font-size:11.5px;}
  .inppr .b,.inppr .r{min-width:0;}
  .inppr::before{content:attr(data-rk);margin-right:auto;font-family:var(--sans);color:var(--mut);padding-left:47px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  /* 정산 전 줄은 금액 줄이 없다 — 등수를 이름 밑에 둔다(옆에 두면 긴 등수가 이름을 0 폭으로 민다). */
  .inpit.wait .inpbn{flex-direction:column;align-items:flex-start;gap:0;}
  .inpit.wait .inpbn small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .inpit.wait .inpbnm{max-width:100%;}
  .inpdns{gap:6px;}
  .inpdn{padding:10px 5px 9px;}
  .inpdn svg{width:80px;height:80px;}
  .inpdn .dl{font-size:11px;} .inpdn .dv{font-size:13px;}    /* 그림이 줄어든 만큼 글자를 키운다(9 → 실제 6.7px 였다) */
  .inpdn p{font-size:10.5px;gap:3px;}
  .inpdn p b{font-size:11px;}
  .inpdn p em{display:none;}
  .inpbars{gap:6px;padding:12px 6px 10px;}
  .inptops{grid-template-columns:minmax(0,1fr);}
}

/* 폰 레이드 카드의 최근 순위 칩 수 — 폭마다 정해 둔다(2026-10-05 점검).
   아래 줄은 «평균 순위 · 딜량 최고치 · 칩» 이 한 줄이다. 일곱 칸이 다 들려면 화면 폭이 400px 을 넘어야 한다.
   묶음이 서로 밀어내니 겹치지는 않지만, 그냥 두면 칩이 반쯤 잘려 보인다 — 오래된 칸부터 통째로 뺀다.
   최고치가 1억을 넘는 경우(열한 글자)까지 넣어 셈한 값이다.
     ~400px(아이폰 375 · 390)  여섯      ~370px(갤럭시 360)  다섯      ~350px  넷      ~330px(320)  셋 */
@media(max-width:400px){
  .scroll:not(.rank) .row:not(.skrow) .form .chip:nth-child(-n+1){display:none;}
  .scroll:not(.rank) .row:not(.skrow)>.rst{gap:12px;}
}
@media(max-width:370px){
  .scroll:not(.rank) .row:not(.skrow) .form .chip:nth-child(-n+2){display:none;}
}
@media(max-width:350px){
  .scroll:not(.rank) .row:not(.skrow) .form .chip:nth-child(-n+3){display:none;}
}
@media(max-width:330px){
  .scroll:not(.rank) .row:not(.skrow) .form .chip:nth-child(-n+4){display:none;}
}
/* 가장 좁은 폰(≤340px)의 랭킹 띠 — «평균 순위 순» 이면 딜 둘이 나란히 선다. 둘 다 1억을 넘으면(«1억 2,419만» × 2)
   네 칸이 띠를 넘쳐 오른쪽 끝(1위 횟수)이 잘렸다(2026-10-05 점검). 숫자를 한 치수 줄이고 칸 사이를 좁힌다. */
@media(max-width:340px){
  .scroll.rank .row:not(.skrow)>.rst{gap:6px;padding:8px 9px;}
  .scroll.rank .row:not(.skrow) .rst .mman,.scroll.rank .row:not(.skrow) .rst>.tenc b,
  .scroll.rank .row:not(.skrow) .rst>.podc>span:first-child{font-size:13px;}
}

/* ══ 우편함 탭 · 쿠폰 줄 · 복사한 흔적 (2026-10-05) ═══════════════
   탭 — 쿠폰(기본) · 사료. 알약 둘이고, 고른 쪽에 보랏빛 테가 선다. */
.mbtabs{display:flex;gap:8px;margin-top:18px;}
.mbtabs:empty{display:none;}
.mbtab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel);color:var(--mut);
  font-family:var(--sans);font-size:13.5px;font-weight:700;transition:color .15s,border-color .15s,background .15s;}
.mbtab:hover{color:var(--ink2);}
.mbtab.on{border-color:var(--me);color:var(--ink);background:rgba(123,140,255,.1);}
/* 탭 밑의 첫 날짜 줄 — 본문 통의 위 여백(40)과 날짜 줄의 «첫 줄은 0» 규칙을 탭이 대신한다. */
.mbtabs+.mbbody{margin-top:0;}
.mbtabs+.mbbody>.mbday:first-child{margin-top:28px;}
/* 쿠폰 줄 — 사료 줄과 같은 틀에, 제목 밑으로 코드 칸이 하나 더 선다(시안 B).
   코드 칸은 점선 상자다(오려 쓰는 쿠폰). 폭은 글자에 맞추되 420 을 안 넘긴다 — 넓은 화면에서 줄 끝까지 늘어지면 단추가 코드와 멀어진다. */
.mbcode{margin-top:10px;max-width:420px;}
.mbcbox{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 14px;border:1px dashed #4a5263;border-radius:10px;background:rgba(0,0,0,.28);
  transition:border-color .2s,background .2s;}
.mbcbox small{flex:none;font-size:11.5px;font-weight:600;color:var(--mut);white-space:nowrap;}
/* 코드 글자 — 글자를 고를 수 있게 둔다(복사가 막힌 곳에서는 손으로 긁어 간다). */
.mbcbox b{flex:1;min-width:0;font-family:var(--num);font-size:16px;font-weight:700;letter-spacing:.12em;color:#f2d98a;
  user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;transition:color .2s;}
.mbcp{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);font-family:var(--sans);font-size:12px;font-weight:700;}
.mbcp:hover{color:var(--ink);border-color:#4a5263;}
.mbcp.bad,.mscp.bad{color:var(--bad);border-color:rgba(255,107,107,.45);}
/* 복사한 흔적 — 상자 밑에 «복사한 때»(«10-05 14:32») 한 줄뿐이다(2026-10-05 요청). 상자와 단추는 그대로 둔다.
   전에는 «✓ 복사함» 글자와 초록 테가 같이 남았다 — «썼다» 로 읽혀 애매했다.
   흔적이 없으면 그 줄은 높이가 0 이다 — 빈 줄을 미리 잡아 두지 않는다(첫 화면 띠만 예외다. 아래 .mscw 참고). */
.cpnote{font-size:11.5px;font-weight:600;color:var(--good);padding-left:2px;}
.cpnote i{font-style:normal;font-family:var(--num);font-weight:400;color:rgba(79,208,138,.7);}
.cpnote:not(:empty){margin-top:7px;}
/* 한 번이라도 복사한 코드 칸 — 점선이 초록 실선이 된다(2026-10-05 요청). 코드 글자와 단추는 그대로 둔다(다시 누를 수 있다). */
.mbcode.done .mbcbox,.rlm.done .rlc,.mscw.done .mscode{border-style:solid;border-color:rgba(79,208,138,.5);}
.mbi.cp .mbrws{margin-top:20px;}

/* ══ PC 우편함 — 사료(본문) + 쿠폰 방 (2026-10-05, 시안 B2) ═══════════════
   탭 대신 두 단이다. 왼쪽은 사료 목록(넓게 읽는다), 오른쪽은 메신저 창처럼 생긴 «쿠폰 방» 이 내려도 따라온다.
   폰(820 이하)에서는 이 틀을 안 쓴다 — ui/mailbox.js 가 .duo 를 PC 에서만 붙인다. */
.mbsum{display:flex;gap:8px;margin-top:14px;}
.mbsum span{font-size:12.5px;font-weight:600;color:var(--ink2);padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.mbsum i{font-style:normal;margin-right:5px;}
.mbbody.duo{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:34px;align-items:start;margin-top:34px;}
.duo .mbfeed{min-width:0;}
.duo .mbfeed>.mbday:first-of-type{margin-top:0;}
/* 사료 단의 머리 — 점 하나 달린 얇은 이름표. 줄은 오른쪽으로 갈수록 사라진다. */
.mbh{display:flex;align-items:center;gap:10px;margin:0 0 18px;}
.mbh i{width:8px;height:8px;border-radius:50%;background:var(--me);box-shadow:0 0 0 4px rgba(123,140,255,.16);}
.mbh b{font-size:15px;font-weight:800;color:var(--ink);}
.mbh span{font-size:12.5px;color:var(--mut);}
.mbh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
/* 쿠폰 방 — 창 하나. 화면보다 길면 방 안(.rlb)만 굴러간다. */
.mbrail{position:sticky;top:20px;display:flex;flex-direction:column;max-height:calc(100vh - 40px);border-radius:18px;overflow:hidden;
  background:#12151b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.95);}
.rlh{flex:none;display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(123,140,255,.14),rgba(123,140,255,.04));}
.rlav{width:36px;height:36px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#23263a;font-size:19px;}
.rlh b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);}
.rlb{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 16px;scrollbar-width:thin;scrollbar-color:#3a4252 transparent;}
.rlb::-webkit-scrollbar{width:8px;}
.rlb::-webkit-scrollbar-thumb{background:#3a4252;border-radius:4px;border:2px solid #12151b;}
/* 날짜 알약 — 위아래를 넉넉히 띄운다(2026-10-05 요청). 날이 바뀌는 자리가 말풍선 사이 간격과 구별돼야 한다. 맨 위 것만 방 머리에 붙인다. */
.rld{display:flex;justify-content:center;margin:28px 0 16px;}
.rld:first-child{margin-top:12px;}
.rld span{font-size:11px;font-weight:600;color:var(--mut);padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.05);}
/* 말풍선과 다음 말풍선 사이 — 시각 글자가 아래 말풍선에 붙어 보여 조금 띄웠다(2026-10-05 요청). */
.rlm{margin-bottom:20px;outline:none;border-radius:12px;}
/* 말풍선 — 왼쪽 위만 각지다(말하는 쪽). 폭은 내용만큼, 방 폭을 안 넘는다. */
.rlbb{display:inline-block;max-width:100%;min-width:0;padding:10px 12px 11px;border-radius:4px 15px 15px 15px;background:#1d212b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
/* 코드 칸의 위(이름과 사이) · 아래(보상과 사이)를 넉넉히 띄운다(2026-10-05 요청) — 붙어 있으면 한 덩어리로 읽혀 코드가 안 선다. */
.rln{margin-bottom:18px;font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;}
.rlc{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 11px;border:1px dashed #4a5263;border-radius:9px;background:rgba(0,0,0,.3);transition:border-color .2s;}
.rlc b{flex:1;font-family:var(--num);font-size:14.5px;font-weight:700;letter-spacing:.1em;color:#f2d98a;user-select:all;-webkit-user-select:all;}
.rlbb .mbrws{margin-top:19px;}
.rlbb .mbrwl{gap:5px;}
.rlbb .mbrw{padding:3px 8px 3px 6px;}
.rlbb .mbrw b{font-size:12px;}
.rlbb .mbrw .rwi,.rlbb .mbrw i{width:15px;height:15px;}
.rlbb .mbrw i{line-height:15px;font-size:12px;}
.rlft{display:flex;flex-wrap:wrap;gap:2px 8px;margin:10px 0 0 4px;font-size:11px;color:var(--mut);}       /* 말풍선과 시각 사이를 띄웠다(4 → 10, 2026-10-05 요청) */
.rlft time{font-family:var(--num);}
.rlbb .cpnote:not(:empty){margin-top:6px;}
/* 첫 화면에서 눌러 들어온 쿠폰 — 잠깐 빛난다(사료 줄의 .lit 과 같은 뜻) */
.rlm.lit .rlbb{animation:rllit 1.6s ease-out;}
@keyframes rllit{0%{box-shadow:inset 0 0 0 1px rgba(240,204,34,.9),0 0 0 4px rgba(240,204,34,.18);}100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 0 transparent;}}
.rlmsg{padding:44px 8px;text-align:center;font-size:13px;line-height:1.9;color:var(--mut);}
.rlmsg span{font-size:11.5px;opacity:.85;}
.rlmsg .pgretry{margin-top:8px;padding:6px 14px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;}
.rlmore{display:block;width:100%;margin-top:4px;padding:9px;border:0;border-radius:10px;background:rgba(255,255,255,.045);color:var(--mut);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;}
.rlmore:hover{color:var(--ink2);}

/* ══ 첫 화면 — 쿠폰 띠 ══════════════════════════════════════
   머리글(«최신 쿠폰 · 쿠폰 전체 ›»)이 띠 위에 선다. 띠와 같은 폭이다. */
.mshead{width:792px;max-width:100%;margin:6px auto -8px;display:flex;align-items:baseline;justify-content:space-between;text-align:left;}
.mshead b{font-size:14px;font-weight:700;color:var(--ink);}
.mshead a{font-size:12.5px;color:var(--mut);text-decoration:none;}
.mshead a:hover{color:var(--ink2);}
/* 쿠폰 칸 — 네 줄: 머리 / 이름(한 줄) / 코드 + 복사 / 보상. 이름은 한 줄로 자른다(쿠폰 이름은 짧다).
   코드 칸을 이름 «바로 밑» 에 붙이려고, 사료 띠가 쓰던 «제목 두 줄 자리»(height:3em)를 푼다. */
.mstx.one{display:block;height:auto;white-space:nowrap;text-overflow:ellipsis;margin-bottom:9px;}
/* 쿠폰 그림(.tk) — 노란 표. 그린 그림(SVG)이라 어느 기기에서든 같다(ui/mailbox.js 의 TICKET 참고).
   색은 여기 글자색을 따른다(fill:currentColor). 글자 줄에 놓일 때 아래로 처지지 않게 조금 올린다. */
.tk{color:rgba(240,204,34,.85);font-style:normal;}
.tki{display:inline-block;vertical-align:-.16em;}
.mbic.tk .tki,.rlav.tk .tki,.msic.tk .tki{display:block;vertical-align:0;}
/* 세로를 조금 줄였다(2026-10-05 요청 — PC 에서 칸이 너무 컸다). 폰은 손가락으로 누르는 칸이라 아래에서 도로 키운다. */
.mscode{display:flex;align-items:center;gap:8px;padding:3px 4px 3px 11px;border:1px dashed #4a5263;border-radius:8px;background:rgba(0,0,0,.28);}
.mscode b{flex:1;min-width:0;font-family:var(--num);font-size:13.5px;font-weight:700;letter-spacing:.09em;color:#f2d98a;overflow:hidden;text-overflow:ellipsis;}
.mscp{flex:none;padding:2px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);font-family:var(--sans);font-size:11.5px;font-weight:700;}
.mscp:hover{color:var(--ink);}
/* 복사 단추를 누를 때는 «단추만» 눌린 것으로 보인다(2026-10-05 지적). 단추가 칸 안에 있어서, 그대로 두면
   단추에 손을 올리거나 누를 때 칸 전체가 밝아지고 금테가 섰다 — 칸을 누른 것처럼 보였다. */
.msi:has(.mscp:hover),.msi:has(.mscp:active),.msi:has(.mscp:focus){background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.msi:has(.mscp:hover) .mstx,.msi:has(.mscp:active) .mstx{color:var(--ink2);}
.mscp,.mbcp{-webkit-tap-highlight-color:transparent;transition:transform .08s,background .12s,border-color .12s,box-shadow .12s,color .12s;}
.mscp:active{transform:scale(.94);}
.mbcp:active{transform:scale(.95);}
/* 누르면 단추에 초록 테가 선다(2026-10-05 요청). 누르는 순간(:active)은 너무 짧아, 복사가 되면 .ok 로 0.7초 더 둔다(ui/mailbox.js).
   남는 표시가 아니다 — 남는 것은 밑의 시각 한 줄뿐이다. */
.mscp:active,.mbcp:active,.mscp.ok,.mbcp.ok{color:var(--good);border-color:rgba(79,208,138,.75);background:rgba(79,208,138,.08);box-shadow:0 0 0 1px rgba(79,208,138,.35);}
/* 첫 화면 띠의 «복사한 때» — 자리를 늘 잡아 둔다(높이 12). 복사한 칸만 길어지면 옆 칸과 보상 줄이 어긋난다. */
.mscw{display:block;}
.mscw .cpnote{display:block;height:12px;line-height:12px;margin:5px 0 7px;font-size:10px;white-space:nowrap;}   /* PC 는 한 단 작게(2026-10-05 요청). 폰은 아래에서 11 로 */

/* ══ 첫 화면 — 패치노트 목록 ════════════════════════════════
   쿠폰 띠와 황고 시계 사이. 띠와 같은 폭의 상자에 다섯 줄 — 꼬리표 · 제목 · 날짜 · ›. */
.pn{width:792px;max-width:100%;margin:22px auto 0;border:1px solid var(--line);border-radius:14px;background:rgba(20,23,28,.72);overflow:hidden;text-align:left;}
.pnh{padding:13px 18px;border-bottom:1px solid var(--line);}
.pnh b{font-size:14.5px;font-weight:700;color:var(--ink);}
.pnr{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;border:0;border-top:1px solid rgba(255,255,255,.045);
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s;}
.pnr:first-child{border-top:0;}
.pnr:hover,.pnr:focus-visible{background:rgba(255,255,255,.04);outline:none;}
/* 누른 줄 — 안쪽 테두리로 알린다. 팝업을 닫으면 초점이 그 줄로 돌아오므로 «방금 본 것» 표시도 된다. */
.pnr:active,.pnr:focus{box-shadow:inset 0 0 0 1px rgba(123,140,255,.6);outline:none;}
.pntg{flex:none;font-size:11px;font-weight:800;padding:3px 7px;border-radius:5px;background:rgba(53,104,230,.2);color:#8fb0ff;}
.pntg.new{background:rgba(255,107,107,.17);color:#ff8fa3;}
.pntt{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pnr:hover .pntt{color:var(--ink);}
.pndt{flex:none;font-family:var(--num);font-size:12.5px;color:var(--mut);}
.pnar{flex:none;font-size:15px;line-height:1;color:var(--mut2);}
.pnmore{display:block;width:100%;padding:11px;border:0;border-top:1px solid rgba(255,255,255,.045);background:rgba(0,0,0,.18);
  color:var(--mut);font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;}
.pnmore:hover{color:var(--ink2);}
/* ── 첫 화면의 세로 간격(2026-10-05, 황고를 검색창 밑으로 올리며 다시 잡았다) ──
   칸들은 .hero 의 gap(18px)으로 벌어진다. 아래 margin 은 거기에 «더하는» 값이다.
     검색창 ↔ 황고      40 = 18 + 22
     황고 ↔ «최신 쿠폰»  32 = 18 + 14
   황고 배경 그림(.gzbg)도 시계 자리를 따라 내린다 — 시계가 그림 한가운데에 서야 한다. */
.hsbox+.gob,.hsbox~.gob{margin-top:22px;}
.gob+.mshead{margin-top:14px;}
.home.gz-img .gzbg::before{top:200px;}

/* ── 팝업 ── 뒤를 어둡게 덮고 가운데 창. 폰에서도 양옆 · 위아래를 띄운다(2026-10-05 요청 — 꽉 차면 팝업인지 안 보인다).
   창 안만 굴러간다. 스크롤 막대는 늘 보이게 그린다 — 내용이 더 있다는 표시다. */
.pnov{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:rgba(4,6,10,.8);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.pnmd{width:640px;max-width:100%;max-height:min(780px,100%);display:flex;flex-direction:column;overflow:hidden;text-align:left;
  background:#12161d;border:1px solid #3a4456;border-radius:16px;box-shadow:0 0 0 1px rgba(123,140,255,.22),0 20px 60px rgba(0,0,0,.7);}
.pnmdh{flex:none;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.pnmdh>div{flex:1;min-width:0;}
.pnmdh small{display:block;margin-bottom:3px;font-family:var(--num);font-size:12px;color:var(--mut);}
.pnmdh b{display:block;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;}
.pnx{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);font-size:15px;cursor:pointer;}
.pnx:hover{color:var(--ink);border-color:#4a5263;}
.pnmdb{flex:1;min-height:0;overflow-y:scroll;overscroll-behavior:contain;padding:2px 14px 18px 18px;outline:none;
  scrollbar-width:thin;scrollbar-color:#4a5466 #1b212b;}
.pnmdb::-webkit-scrollbar{width:9px;}
.pnmdb::-webkit-scrollbar-track{background:#1b212b;border-radius:5px;margin:8px 0;}
.pnmdb::-webkit-scrollbar-thumb{background:#4a5466;border-radius:5px;border:2px solid #1b212b;}
.pnmdb h4{margin:14px 0 8px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--g2);}
.pnmsg{padding:48px 0;text-align:center;font-size:13.5px;line-height:1.9;color:var(--mut);}
.pnmsg span{font-size:12px;opacity:.85;}
.pnretry{margin-top:8px;padding:6px 14px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;}
/* 카드 한 장 — 이름(+ 신규 · 상향 딱지) / 바뀐 수치(옛값 → 새값) / 설명 */
.pcd{border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.22);padding:10px 12px;margin-bottom:8px;}
.pcnm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:13.5px;font-weight:700;color:var(--ink);}
.pcnm i{font-style:normal;}
.pcnm span{min-width:0;overflow-wrap:anywhere;}
.pcnm u{text-decoration:none;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:4px;background:rgba(79,208,138,.16);color:var(--good);}
.pcnm u.new{background:rgba(255,107,107,.17);color:#ff8fa3;}
.pcnm u.info{background:rgba(53,104,230,.2);color:#8fb0ff;}
.pcnm u.down{background:rgba(255,138,61,.16);color:var(--amber);}
.pcsub{margin-top:3px;font-size:12px;color:var(--mut);}
.pcrw{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:6px;font-size:12.5px;color:var(--mut);}
.pcrw s{color:var(--mut2);}
.pcrw em{font-style:normal;color:var(--mut2);}
.pcrw b{font-weight:700;color:#f2d98a;overflow-wrap:anywhere;}
.pcbd{margin-top:6px;font-size:12.5px;line-height:1.6;color:#aab3c2;overflow-wrap:anywhere;}
.pcbd b{font-weight:700;color:var(--ink);}
/* 팝업이 떠 있는 동안 뒤 화면을 묶는다. 스크롤바 자리는 html 이 늘 잡아 두고 있어(위 scrollbar-gutter) 화면이 안 흔들린다. */
html.pnlock{overflow:hidden;}

/* ══ 위 로딩 막대 ═══════════════════════════════════════════
   화면 맨 위의 얇은 청록 막대(boot.js ⑤) — 로고의 «.GG» 와 같은 색이다(초록으로 했다가 바꿨다, 2026-10-05). 받는 동안 차오르고(.run), 다 오면 끝까지 찬 뒤 사라진다(.end).
   빠르게 60% 쯤 가고 그 뒤로는 천천히 긴다 — 진짜 진행률을 모르니 «멈춘 것처럼» 만 안 보이면 된다.
   팝업(z 90)보다 위에 둔다. 누르는 것을 가리지 않게 pointer-events 를 끈다. */
#nkbar{position:fixed;left:0;top:0;z-index:200;width:0;height:2px;opacity:0;pointer-events:none;
  background:var(--g2);box-shadow:0 0 8px rgba(34,216,194,.65),0 0 2px rgba(34,216,194,.9);border-radius:0 2px 2px 0;}
#nkbar.run{opacity:1;animation:nkbar 10s cubic-bezier(.1,.7,.2,1) forwards;}
#nkbar.end{width:100%;opacity:0;transition:width .18s ease-out,opacity .25s ease-out .18s;}
@keyframes nkbar{0%{width:0;}7%{width:60%;}100%{width:92%;}}

/* ══ 알림 한 줄 ═════════════════════════════════════════════
   화면 아래 가운데에 잠깐 떴다 사라진다(ui/mailbox.js 의 toast). 쿠폰 코드를 복사했을 때 쓴다.
   누르는 것을 가리지 않게 pointer-events 를 끈다. 맨 위로 단추(오른쪽 아래)와 안 겹치게 가운데에 둔다. */
.nktoast{position:fixed;left:50%;bottom:34px;z-index:210;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);
  padding:11px 16px 11px 13px;border-radius:12px;background:#171c25;color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(79,208,138,.4),0 14px 34px -12px rgba(0,0,0,.85);
  opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .18s,transform .18s;}
.nktoast.on{opacity:1;transform:translate(-50%,0);}
.nktoast i{flex:none;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:12px;font-weight:800;color:#0b0e13;background:var(--good);}
.nktoast span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.nktoast b{flex:none;font-family:var(--num);font-weight:700;letter-spacing:.08em;color:#f2d98a;padding-left:9px;border-left:1px solid var(--line2);}
.nktoast.bad{box-shadow:inset 0 0 0 1px rgba(255,107,107,.45),0 14px 34px -12px rgba(0,0,0,.85);}
.nktoast.bad i{background:var(--bad);}
/* 폰 — 긴 글은 두 줄로 접되 낱말 가운데서 끊지 않는다. 폭은 글자만큼(좁게 접히지 않게 max-content). */
@media(max-width:820px){ .nktoast{bottom:22px;font-size:13px;padding:10px 14px 10px 12px;white-space:normal;word-break:keep-all;width:max-content;} }

/* ══ 바닥글 ═════════════════════════════════════════════════
   모든 화면의 맨 아래 — 줄 하나 긋고 가운데 한 줄(2026-10-05 요청). */
.ft{margin-top:72px;padding:18px 4px 34px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;color:var(--mut2);}
.ft b{font-weight:700;color:var(--mut);}

@media(max-width:820px){
  .mbtabs{margin-top:14px;}
  .mbtabs+.mbbody>.mbday:first-child{margin-top:22px;}
  .mbcode{max-width:none;}
  .mbcbox{gap:9px;padding:8px 8px 8px 12px;}
  .mbcbox b{font-size:15px;letter-spacing:.09em;}
  .mshead{margin:14px auto -4px;}
  /* 폰 — 칸은 «누르는 동안» 만 밝아진다. 손가락에는 올려 둠이 없어 :hover 가 뗀 뒤에도 남는다(복사만 눌러도 칸이 밝은 채였다). */
  .msi{-webkit-tap-highlight-color:transparent;}
  .msi:hover{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
  .msi:hover .mstx{color:var(--ink2);}
  .msi:active:not(:has(.mscp:active)){background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(240,204,34,.35);}
  .mscode{padding:6px 6px 6px 11px;}
  .mscp{padding:3px 9px;}
  .mscw .cpnote{font-size:11px;}
  /* 폰 — 패치노트 줄을 누른 뒤 배경이 밝은 채로 남았다(2026-10-05 지적). 손가락에는 «올려 둠» 이 없어 :hover 가 뗀 뒤에도 붙어 있고,
     팝업을 닫으며 초점이 돌아와 한 번 더 켜진다. 배경은 비우고(브라우저의 누름 얼룩도 끈다) 테두리만 남긴다. */
  .pnr{-webkit-tap-highlight-color:transparent;}
  .pnr:hover,.pnr:focus-visible,.pnr:focus,.pnr:active{background:none;}
  .pn{margin-top:18px;}
  .pnh{padding:12px 14px;}
  .pnr{padding:12px 14px;gap:9px;}
  .pntt{font-size:13px;}
  .hsbox+.gob,.hsbox~.gob{margin-top:56px;}
  .gob+.mshead{margin-top:22px;}
  .home.gz-img .gzbg::before{top:236px;}
  .pnov{padding:20px 14px;}
  .pnmd{max-height:min(680px,100%);}
  .pnmdh{padding:14px 14px 13px 16px;}
  .pnmdb{padding:2px 9px 16px 14px;}
  .ft{margin-top:48px;padding:16px 4px 28px;font-size:12px;}
}
/* 보상 칩 — 그림 없는 칩(🎁)이 섞이면 그 칩만 내려앉고 옆 간격도 벌어졌다(2026-10-05 지적).
   칩들이 안쪽 묶음(.mbrwl) 안에서 «글자처럼» 흘러 기준선에 맞춰 섰기 때문이다 — 이모지는 기준선이 그림과 다르다.
   묶음을 줄 맞춤(flex)으로 바꾼다: 높이는 가운데로, 간격은 gap 으로 똑같이. */
.mbrwl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
/* 이모지 글자는 줄 높이가 글꼴마다 달라 칩을 키운다 — 그림과 같은 19px 칸에 가둔다. */
.mbrw i{display:block;width:19px;height:19px;line-height:19px;font-size:14px;text-align:center;overflow:hidden;}
@media(max-width:820px){
  /* 폰 — 보낸이(«쿠폰» · «운영자»)를 뺀다(2026-10-05 요청). 탭이 이미 말해 준다. 머리줄은 시각만. */
  .mbtop .mbsd{display:none;}
  /* 폰 · 쿠폰 줄 — 왼쪽의 노란 표 그림을 뺀다(2026-10-18 사용자). 보낸 사람 줄의 점이 그 자리를 맡는다 — 본문이 왼쪽 끝부터 선다. PC 는 그대로 */
  .mbi.cp .mbic{display:none;}
  #mailpanel .pgnote{padding:26px 0 8px;}
}
/* 가장 좁은 폰 — 코드 칸의 «쿠폰 코드» 이름표를 뺀다. 코드 8자와 단추가 한 줄에 서야 한다. */
@media(max-width:350px){
  .mbcbox small{display:none;}
}

/* ══ 줄의 «지금 스펙» — 레이드 · 랭킹 (2026-10-06) ═══════════════════
   줄마다 세 자리가 있다(ui/spec.js 가 채운다): .spx PC 스펙 마크 · .rkx PC 순위 메달 · .spp 폰의 스펙 줄(마크 + 메달 — 2026-10-10 까지는 알약 두 줄).
   마크업에서는 줄의 «끝» 에 붙어 있다. PC 는 order 로 제자리에 세운다 — 스펙은 플레이어와 딜 사이, 메달은 맨 끝.
   (앞에 끼우지 않은 까닭: 폰의 머리줄 · 줄이 앞쪽 칸을 차례(nth-child)와 이름으로 집는다. 끼우면 폰이 어긋난다.)
   색: MUR 노랑 · 엠블럼 보라 · 용병 남색 · 덱 청록 · PVP 분홍. 상세 화면과 같은 말은 아니다 — 여기는 좁아서 색으로 가른다. */
.spx,.rkx,.spp,.sph,.rkh{display:none;}
.spno{font-style:normal;color:#4a5263;}
.spsk{display:block;width:100%;height:30px;border-radius:8px;}
.rows .row .nm{font-size:14.5px;}              /* 13.5 에서 키웠다(2026-10-06) — 줄에 칸이 늘어 닉네임이 묻혔다 */
@media(min-width:821px){
  .rows .row .spx,.rows .row .rkx,.cols .sph,.cols .rkh{display:flex;}
  .cols .sph,.cols .rkh{display:block;}
  /* 스펙 — 둥근 마크(M · 엠 · 용) + 값. 숫자만 계열 색, «Lv.» · «단계» · 등급은 흰색 계열. 용병은 늘 둘째 줄. */
  .spx{flex-wrap:wrap;gap:5px 12px;align-content:center;min-width:0;}
  .sm{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap;}
  .sm.c{flex-basis:100%;}
  .sm u{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
    font-size:9.5px;font-weight:800;color:rgb(var(--c));background:rgba(var(--c),.14);box-shadow:inset 0 0 0 1.5px rgba(var(--c),.6);}
  .sm b{font-family:var(--num);font-weight:600;color:var(--ink2);}
  .sm b i{font-style:normal;color:rgb(var(--v));}
  .sm.m{--c:227,199,104;--v:240,214,120;}.sm.e{--c:169,156,240;--v:190,178,250;}.sm.c{--c:120,150,230;--v:150,176,245;}
  /* 순위 메달 — 덱(카드) · PVP(칼). 밑에 «2위», 3위 안이면 위에 왕관(금 · 은 · 동). */
  .rkx{gap:10px;align-items:flex-start;justify-content:center;min-width:0;}
  .mk{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;margin:4px 0 15px;
    color:rgb(var(--c));background:radial-gradient(circle at 35% 30%,rgba(var(--c),.3),rgba(var(--c),.08));box-shadow:inset 0 0 0 1.5px rgba(var(--c),.7);}
  .mk.d{--c:95,211,198;}.mk.p{--c:229,143,185;}
  .mk.hi{box-shadow:inset 0 0 0 1.5px rgba(var(--c),.95),0 0 10px -2px rgba(var(--c),.8);}        /* 3위 안 — 테가 밝다. («top» 이라 부르면 메뉴바(.top)의 스타일이 딸려 온다) */
  .mk svg{display:block;}
  .mk b{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-family:var(--num);font-size:10.5px;font-weight:600;color:rgb(var(--c));white-space:nowrap;}
  /* 왕관 — 글자 👑. 금은 조금 노랗게 밝히고, 은 · 동은 몸통만 바꾸고 보석 색은 남긴다(ui/spec.js 의 거르개 #cwS · #cwB). */
  .mk .cw{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-style:normal;font-size:11.5px;line-height:1;}
  .mk .cw.c1{filter:saturate(1.5) hue-rotate(12deg) brightness(1.2);}
  .mk .cw.c2{filter:url(#cwS);}
  .mk .cw.c3{filter:url(#cwB);}
  .rkx .spno,.spx .spno{margin:auto;}
  .spx .spno{margin:0;}
  /* 최근 순위는 뒤에서 다섯 개만 — 칸을 스펙 · 메달에 내줬다. «최근 5회» 기준과도 맞는다. */
  .rows .form .chip:nth-last-child(n+6){display:none;}

  /* ── 레이드 줄 = 카드(랭킹과 같은 꼴). 1 · 2 · 3위는 순위색 테, 나머지는 회색. 딜 밑 게이지는 뺐다. ── */
  #raidpanel .lb{background:none;border:0;border-radius:0;overflow:visible;}      /* 랭킹 표는 위의 .lb:has(.scroll.rank) 가 같은 일을 한다 */
  /* 진행 중 회차 — PC 에서는 화면 가장자리 전체가 초록으로 숨쉰다(2026-10-06, 양옆 시안 «마»).
     내용이 가운데로 모여 양옆이 비는데, 그 빈자리까지 써서 «지금 토벌 중» 을 알린다. 화면에 붙어 있어 내려 읽어도 따라온다.
     전에는 요약 블럭 셋의 테두리를 빛이 돌았다 — 가장자리 빛과 겹치면 어수선해서 뺐다(블럭의 초록 물듦과 «토벌 중» 배지는 그대로).
     표의 틀이 없어(위 줄) 표를 도는 빛도 PC 에서는 끈다. 폰은 표의 틀이 그대로라 예전처럼 표를 돈다.
     투명도만 움직인다 — 그림자 값을 움직이면 화면 전체를 매번 다시 칠한다. */
  body.live #raidpanel .lb::after{display:none;}
  body.live::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
    box-shadow:inset 0 0 90px 8px rgba(79,208,138,.30), inset 0 0 0 1px rgba(79,208,138,.35);
    animation:liveEdge 3.2s ease-in-out infinite;
  }
  .scroll:not(.rank) .cols{padding:2px 17px 12px;border-bottom:0;}
  .scroll:not(.rank) .rows{padding:0;display:flex;flex-direction:column;gap:8px;}
  .scroll:not(.rank) .rows .row{padding:10px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:border-color .12s,background .12s;}
  .scroll:not(.rank) .rows .row+.row::before{display:none;}
  .scroll:not(.rank) .rows .row:hover{background:var(--panel2);border-color:var(--line2);}
  .scroll:not(.rank) .rows .row.top1{border-color:rgba(43,140,239,.6);}
  .scroll:not(.rank) .rows .row.top2{border-color:rgba(34,216,194,.55);}
  .scroll:not(.rank) .rows .row.top3{border-color:rgba(240,204,34,.55);}
  /* 토벌 중 — 1위 줄의 테두리가 순위 색(파랑)으로 번졌다 든다(2026-10-09, 시안 «라»). PC 만.
     지금 1위가 누구인지 — 순위가 아직 바뀌는 중이라는 것을 줄에서도 말한다. 색은 1위 테두리의 색 그대로다 — 새 색을 들이지 않는다.
     처음엔 1 · 2 · 3위 셋 다였다. 셋이 같이 뛰니 눈이 갈 데가 없어 1위만 남겼다(사용자 결정).
     줄 위에 겹친 한 겹(::after)의 투명도만 움직인다 — 줄의 그림자 값을 직접 움직이면 프레임마다 줄을 다시 칠한다.
     처치된 회차(body.live 가 꺼진다)에서는 가만히 있다. */
  /* 번짐이 좌우에서 잘리지 않게 — 표를 감싼 .scroll 이 overflow-x:auto 라 줄 밖으로 나가는 그림자를 자른다(좌우 끝이 뚝 끊겼다).
     안쪽 여백을 주고 같은 만큼 바깥 여백을 빼서 자리를 내준다 — 줄의 위치 · 폭은 그대로다. */
  body.live #raidpanel .scroll:not(.rank){padding:0 20px 20px;margin:0 -20px -20px;}
  body.live .scroll:not(.rank) .rows .row.top1::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    border:1px solid rgba(43,140,239,.95);box-shadow:0 0 16px 1px rgba(43,140,239,.42);
    opacity:0;animation:topHalo 2.6s ease-in-out infinite;
  }
  .scroll:not(.rank) .dmg .bar,.scroll:not(.rank) .dmg .track{display:none;}
  .scroll:not(.rank) .dmg{min-height:47px;height:auto;}      /* 메달 칸의 높이(47)와 같게 — 스펙이 없는 줄 · 받는 중인 줄도 키가 같다 */
  .scroll:not(.rank) .dmg .num{padding-bottom:0;}
  /* 순위 48 | 플레이어(남는 폭) | 스펙 176 | 딜 122 | 최고치 104 | 평균 순위 58 | 최근 순위 126 | 메달 84 */
  .scroll:not(.rank) .cols,.scroll:not(.rank) .row{grid-template-columns:48px minmax(170px,1fr) 176px 122px 104px 58px 126px 84px;gap:12px;min-width:980px;}
  .scroll:not(.rank) .cols>:nth-child(1),.scroll:not(.rank) .row>.rkcell{order:1;}
  .scroll:not(.rank) .cols>:nth-child(2),.scroll:not(.rank) .row>.pl{order:2;}
  .scroll:not(.rank) .cols>.sph,.scroll:not(.rank) .row>.spx{order:3;}
  .scroll:not(.rank) .cols>:nth-child(3),.scroll:not(.rank) .row>.dmg{order:4;}
  .scroll:not(.rank) .cols>:nth-child(4),.scroll:not(.rank) .row .maxd{order:5;}
  .scroll:not(.rank) .cols>:nth-child(5),.scroll:not(.rank) .row .avgr{order:6;}
  .scroll:not(.rank) .cols>:nth-child(6),.scroll:not(.rank) .row .form{order:7;}
  .scroll:not(.rank) .cols>.rkh,.scroll:not(.rank) .row>.rkx{order:8;}

  /* ── 랭킹 줄 — 칸을 하나도 안 빼고 지금 폭(1072)에 열 칸. 평균 딜 글자를 최고치와 같은 크기로 줄이고 칸마다 조금씩 당겼다. ──
     순위 60 | 플레이어(남는 폭) | 스펙 152 | 평균 딜 98 | 최고치 96 | 평균 순위 62 | 상위권 횟수 90 | TOP10 54 | 최근 순위 120 | 메달 74, 사이 8.
     잰 것(2026-10-06, 화면 폭 1440): 50줄에서 넘치는 칸 0 · 잘린 닉네임 0. 딜 10자리 · 상위권 세 자리씩 · TOP10 999회도 칸 안에 든다.
     닉네임은 한글 여덟 글자까지 든다 — 그보다 길면 «…». */
  .scroll.rank .cols,.scroll.rank .row{grid-template-columns:60px minmax(124px,1fr) 152px 98px 96px 62px 90px 54px 120px 74px;gap:8px;min-width:1010px;}
  .scroll.rank .rows .row{padding-left:14px;padding-right:14px;}
  .scroll.rank .cols{padding-left:15px;padding-right:15px;}
  .scroll.rank .cols>*{white-space:nowrap;}
  .scroll.rank .cols .lbl em{display:none;}            /* «(최근 5회)» — 칸이 좁아 잘린다. 표 위 오른쪽에 한 번만 적는다(아래 ::before) */
  .scroll.rank .cols .tenh{font-size:10.5px;letter-spacing:-.02em;}
  /* 순위 숫자 칸의 폭을 못 박는다 — 숫자 폭대로(auto) 두면 «9 ▲5» 와 «10 ▲2» 의 등락이 줄마다 다른 세로선에 선다(2026-10-06 요청).
     두 자리 숫자 폭(20)에 맞추고 등락과 10 을 띄운다. 세 자리(100위~)는 사이로 조금 넘어가지만 등락과 안 겹친다. */
  .scroll.rank .rkcell{grid-template-columns:20px auto;justify-content:start;column-gap:10px;}
  .scroll.rank .rkcell .rk{text-align:left;}
  .scroll.rank .pl{gap:9px;}
  /* 1위 줄의 닉네임 — 빛 번짐 때문에 넘침을 풀어 둬서(overflow:visible) 긴 닉이 옆의 스펙 칸과 겹쳤다(2026-10-06 재점검, 넓은 글자 16자에 8px).
     폰과 같은 방법으로 자른다: 안쪽 여백만큼 빛이 설 자리를 남기고 바깥 여백으로 되돌려 자리는 그대로 둔다. */
  .scroll.rank .row.champ .nm{overflow:hidden;padding:10px 12px;margin:-10px -12px;}
  .scroll.rank .dmg .num{font-size:15px;font-weight:600;}
  .scroll.rank .spx{gap:4px 8px;}
  .scroll.rank .sm{gap:5px;font-size:11px;}
  .scroll.rank .sm u{width:18px;height:18px;font-size:9px;}
  .scroll.rank .rkx{gap:8px;}
  .scroll.rank .row .pl{min-height:47px;}                    /* 레이드와 같은 까닭 — 메달이 없는 줄도 키가 같게 */
  /* «최근 5회 기준» 한마디 — 요약 블럭(컷트라인) «바깥 위 오른쪽» 에 선다(2026-10-06 요청). 표 바로 위에 있을 때는 머리글과 붙어 답답했다.
     블럭 밖에 띄우므로(absolute) 요약 블럭의 칸 배치를 안 건드린다. */
  .bsum.two{position:relative;}
  /* 요약 블럭 위의 한마디(«… 최근 5회 기준» — data-note)는 걷었다(2026-10-11). 같은 말이 대시보드 밑의 안내(.dinfo)에 늘 보인다. */
  .scroll.rank .cols>:nth-child(1),.scroll.rank .row>.rkcell{order:1;}
  .scroll.rank .cols>:nth-child(2),.scroll.rank .row>.pl{order:2;}
  .scroll.rank .cols>.sph,.scroll.rank .row>.spx{order:3;}
  .scroll.rank .cols>:nth-child(3),.scroll.rank .row .dmg{order:4;}
  .scroll.rank .cols>:nth-child(4),.scroll.rank .row .maxd{order:5;}
  .scroll.rank .cols>:nth-child(5),.scroll.rank .row .avgr{order:6;}
  .scroll.rank .cols>:nth-child(6),.scroll.rank .row .podc{order:7;}
  .scroll.rank .cols>:nth-child(7),.scroll.rank .row .tenc{order:8;}
  .scroll.rank .cols>:nth-child(8),.scroll.rank .row>.form{order:9;}
  .scroll.rank .cols>.rkh,.scroll.rank .row>.rkx{order:10;}
}
@media(max-width:820px){
  /* 폰 — 카드 밑에 구분선을 긋고 스펙 한 줄: 왼쪽에 스펙 마크(M · 엠 / 용 — 두 줄), 오른쪽에 순위 메달(덱 · PVP). PC 와 같은 꼴이다(2026-10-10 시안 «가»).
     전에는 알약 두 줄이었다(MUR · 엠블럼 · 용병 / 덱 · PVP — 전투력과 순위). 전투력은 PC 처럼 뺐다(상세에 있다). 없는 묶음은 PC 처럼 «–» 를 세운다. 못 받았을 때만 칸째 안 그린다(:empty).
     마크는 줄을 바꿀 수 있고(좁은 폰 — 엠블럼이 둘째 줄로 내려간다) 메달은 안 줄어든다. 둘이 겹치지 않는다. */
  .rows .row>.spp{display:flex;align-items:center;gap:8px;grid-column:1/-1;width:100%;box-sizing:border-box;
    margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);}
  .rows .row>.spp:empty{display:none;}
  .spp .spm{display:flex;flex-wrap:wrap;gap:5px 12px;align-content:center;flex:1 1 auto;min-width:0;}
  .spp .spr{display:flex;gap:10px;align-items:flex-start;flex:0 0 auto;margin-left:auto;}
  .spp .spno{align-self:center;line-height:20px;}      /* 없는 묶음의 «–» — 마크 한 줄(20px)의 높이로, 메달 옆에서는 세로 가운데 */
  /* 마크 · 메달의 모양 — PC 의 .sm · .mk 규칙과 «같은 값» 이다(위 PC 덩어리). 한쪽을 고치면 여기도 고친다 — 테스트가 둘을 맞춰 본다.
     같이 쓰는 규칙으로 올리지 않은 까닭: .sm 이라는 이름을 다른 화면(수입 팝업 · 상세의 순위 숫자)도 써서, 폭 조건 밖으로 꺼내면 거기에 걸린다. */
  .spp .sm{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap;}
  .spp .sm.c{flex-basis:100%;}
  .spp .sm u{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%; font-size:9.5px;font-weight:800;color:rgb(var(--c));background:rgba(var(--c),.14);box-shadow:inset 0 0 0 1.5px rgba(var(--c),.6);}
  .spp .sm b{font-family:var(--num);font-weight:600;color:var(--ink2);}
  .spp .sm b i{font-style:normal;color:rgb(var(--v));}
  .spp .sm.m{--c:227,199,104;--v:240,214,120;}
  .spp .sm.e{--c:169,156,240;--v:190,178,250;}
  .spp .sm.c{--c:120,150,230;--v:150,176,245;}
  .spp .mk{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;margin:4px 0 15px; color:rgb(var(--c));background:radial-gradient(circle at 35% 30%,rgba(var(--c),.3),rgba(var(--c),.08));box-shadow:inset 0 0 0 1.5px rgba(var(--c),.7);}
  .spp .mk.d{--c:95,211,198;}
  .spp .mk.p{--c:229,143,185;}
  .spp .mk.hi{box-shadow:inset 0 0 0 1.5px rgba(var(--c),.95),0 0 10px -2px rgba(var(--c),.8);}
  .spp .mk svg{display:block;}
  .spp .mk b{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-family:var(--num);font-size:10.5px;font-weight:600;color:rgb(var(--c));white-space:nowrap;}
  .spp .mk .cw{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-style:normal;font-size:11.5px;line-height:1;}
  .spp .mk .cw.c1{filter:saturate(1.5) hue-rotate(12deg) brightness(1.2);}
  .spp .mk .cw.c2{filter:url(#cwS);}
  .spp .mk .cw.c3{filter:url(#cwB);}
  /* 받는 중 — 마크 두 줄 · 메달 둘의 자리를 같은 높이(47px)로 잡아 둔다(로딩 줄 · 스펙을 기다리는 줄). 오는 순간 카드가 길어지지 않게. */
  .sppsk{display:block;flex:0 0 62%;height:20px;border-radius:6px;}
  .sppsk.s{flex-basis:44%;}
  .sppmk{display:block;width:28px;height:28px;border-radius:50%;margin:4px 0 15px;}

  /* 상세 — 보특 / 결특 탭은 «기울인 판»(2026-10-06). 고른 쪽을 제 색(보특 청록 · 결특 보라)으로 채운다. 프로필 블럭과는 띄운다. */
  #userpanel .mtabs{border-bottom:0;gap:6px;padding:0 8px;margin-top:26px;}
  #userpanel .mtabs button{--tc:34,216,194;transform:skewX(-12deg);background:#11151c;border:0;border-radius:4px;padding:10px 0;}
  #userpanel .mtabs button:nth-child(2){--tc:160,107,226;}
  #userpanel .mtabs button.on{background:rgb(var(--tc));color:#0b0e13;box-shadow:4px 4px 0 rgba(var(--tc),.25);}
}
/* 넓은 폰 배치(폴드 펼침 · 태블릿 세로, 600 ~ 820) — 스펙 마크를 한 줄로 세운다(2026-10-10 요청).
   좁은 폰은 용병이 둘째 줄이다(위). 넓은 화면에서 그대로 두면 왼쪽이 휑한데 용병만 한 줄 밑에 떨어져 있었다.
   «들어가면 한 줄» 로 내용에 맡기지 않고 폭으로 가른다 — 경계에서 값이 긴 사람만 두 줄이 되면 줄마다 꼴이 다르다. 600 이면 가장 긴 값도 한 줄에 든다.
   메달이 47px 라 한 줄이 되어도 줄의 높이는 같다. 받는 중의 막대도 한 줄로 눕힌다. */
@media (min-width:600px) and (max-width:820px){
  .spp .spm>.sm.c{flex-basis:auto;}
  .spp .spm>.sppsk{flex:0 0 150px;}
  .spp .spm>.sppsk.s{flex-basis:110px;}
}

/* ══ 상세 개편 (2026-10-09 시안 16판) — ui/user.js pdHTML 이 그린다. PC 와 폰이 같은 틀이고, 폰 배치는 이 덩어리 끝의 @media 가 바꾼다. ══
   이름은 전부 pd 로 시작한다. 위에서부터 머리띠 → 랭킹 카드 둘 | 딜량 추이 + 최근 순위 → 탭 블럭 → 전적 히스토리. */
/* 세로 간격(2026-10-09 사용자 지정) — 큰 블럭 사이 36px · 제목 줄과 첫 날짜 32px · 날짜와 날짜 28px.
   칸 사이(gap)로 한꺼번에 주지 않고 블럭마다 위 여백으로 준다 — 제목 줄과 전적 목록 사이만 값이 다르다. */
.pd{display:flex;flex-direction:column;margin-top:14px;}
.pd>.pdmid{margin-top:36px;}
/* 구분선 — 랭킹 카드 · 추이 밑, 탭 블럭 밑. 구분선과 그 밑 블럭 사이가 36px 다(사용자 지정). 위쪽(윗 블럭과 구분선 사이)은 보통 간격 14px */
.pd>.pdhr{height:1px;background:var(--line2);margin-top:14px;}
.pd>.pdtabbox{margin-top:36px;}
/* 머리띠 */
.pdhero{position:relative;display:flex;align-items:center;gap:22px;padding:24px 28px;border-radius:16px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(520px 200px at 12% 0%,rgba(34,216,194,.13),transparent 70%),linear-gradient(150deg,#171b22,#101318);}
.pdhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--g2),rgba(34,216,194,0) 55%);}
.pdhero>.av{width:88px;height:88px;box-shadow:0 0 0 2px #0f1217,0 0 0 3px rgba(34,216,194,.55);}
.pdhero>.av .fb{font-size:30px;}
.pdwho{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pdnick{font-family:var(--disp);font-size:26px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pdmedals{margin-left:auto;display:flex;gap:26px;align-items:flex-start;flex:0 0 auto;}
/* 메달 — 랭킹 · 레이드 줄의 순위 메달(.mk)과 같은 규칙. 머리띠에서는 크기만 키운다(28 → 46px). 정보가 없으면 회색에 «–». */
.pdmkw{display:flex;flex-direction:column;align-items:center;min-width:58px;}
.pdmk{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;margin:10px 0 22px;
  color:rgb(var(--c));background:radial-gradient(circle at 35% 30%,rgba(var(--c),.3),rgba(var(--c),.08));box-shadow:inset 0 0 0 2px rgba(var(--c),.7);}
.pdmk.d{--c:95,211,198;}.pdmk.p{--c:229,143,185;}.pdmk.l{--c:95,227,161;}
/* 불운(운 랭킹 아래 50) — 게임의 «운 나쁜 50» 과 같은 붉은빛. 금(.crk)은 메달 바닥 빛으로 그어 잎이 갈라져 보이게 한다. «하위» 는 숫자보다 작게.
   이름이 lb 가 아닌 까닭: .lb 는 순위표 상자가 이미 쓴다(overflow:hidden — 메달 밑의 글자가 잘려 안 보였다). */
.pdmk.unl{--c:255,143,148;}.pdmk.unl .crk{stroke:#1c1a20;}
.pdmk b i{font-style:normal;font-family:inherit;font-size:.78em;margin-right:3px;opacity:.88;}
.pdmk.hi{box-shadow:inset 0 0 0 2px rgba(var(--c),.95),0 0 14px -2px rgba(var(--c),.8);}
.pdmk svg{display:block;width:24px;height:24px;}
.pdmk b{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-family:var(--num);font-size:15px;font-weight:700;color:rgb(var(--c));white-space:nowrap;}
.pdmk .cw{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-style:normal;font-size:17px;line-height:1;}
/* 왕관의 색 — 1위 금 · 2위 은 · 3위 동. 줄의 메달(.mk .cw)과 같은 거름(index.html 의 #cwS · #cwB)을 쓴다 */
.pdmk .cw.c1{filter:saturate(1.5) hue-rotate(12deg) brightness(1.2);}
.pdmk .cw.c2{filter:url(#cwS);}
.pdmk .cw.c3{filter:url(#cwB);}
.pdmkw small{font-size:11px;font-weight:600;color:var(--mut);white-space:nowrap;}
.pdmkw.off .pdmk{--c:98,107,126;}.pdmkw.off .pdmk b,.pdmkw.off small{color:var(--mut2);}
/* 가운데 — 왼쪽 랭킹 카드 둘, 오른쪽 추이 */
.pdmid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px;align-items:stretch;}
.pdranks{display:flex;flex-direction:column;gap:14px;}
.pdrkc{flex:1;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:26px 24px 24px;border-radius:14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--g2);}
.pdrkc.d{border-left-color:#a78bfa;}
.pdrktop{display:flex;align-items:center;gap:22px;}
.pdrkpos{flex:0 0 96px;text-align:center;}
.pdrkpos .lbl{position:relative;display:inline-block;font-size:13px;font-weight:700;color:var(--g2);margin-bottom:2px;}
.pdrkc.d .pdrkpos .lbl{color:#a78bfa;}
.pdrkpos .n{font-family:var(--num);font-size:34px;font-weight:700;line-height:1.1;white-space:nowrap;}   /* PC 도 폰과 같은 34(2026-10-11 맞춤. 전 42) */
.pdrkpos .n.sm{font-size:26px;line-height:1.44;}      /* 네 자리 순위 — 34px 로는 «위» 가 다음 줄로 떨어진다. 줄 높이는 그대로 둔다(37.4px) */
.pdrkpos .n i{font-style:normal;font-family:var(--sans);font-size:13px;color:var(--mut);margin-left:2px;}
.pdrkpos .n.dim{color:#4a5263;}
.pdrkpos .of{font-size:11px;color:var(--mut);}
.pdrkst{flex:1;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;line-height:1.45;font-size:13px;color:var(--mut);align-content:center;min-width:0;}
.pdrkst small{font-size:11.5px;}
.pdrkst b{font-family:var(--num);font-size:13px;color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pdrkst b em{font-style:normal;}.pdrkst b .g{color:#2b8cef;}.pdrkst b .s{color:#22d8c2;}.pdrkst b .z{color:#f0cc22;}
/* 1위와의 격차 — 카드의 머리 색 계열(보특 청록 · 결특 보라), 가라앉힌 톤 */
.pdgap{display:flex;flex-direction:column;gap:7px;}
.pdgv{font-family:var(--num);font-size:13px;font-weight:700;color:var(--ink);position:relative;height:16px;}
.pdgv b{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;}
.pdgv b.l{transform:none;}.pdgv b.r{transform:translateX(-100%);}      /* 양 끝에서는 정렬을 바꿔 숫자가 카드 밖으로 안 나가게 */
.pdgb{position:relative;height:4px;border-radius:99px;background:#20242c;}
.pdgb i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#2c6a68,#4fb0a3);}
.pdgb u{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#7fd2c6;box-shadow:0 0 0 3px var(--panel);}
.pdrkc.d .pdgb i{background:linear-gradient(90deg,#4a4180,#8b7bcb);}.pdrkc.d .pdgb u{background:#b1a4e8;}
.pdgf{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--mut);}
.pdgf span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdgf em{font-style:normal;color:var(--ink2);font-weight:600;}
.pdgf span:last-child{white-space:nowrap;}.pdgf b{font-family:var(--num);color:var(--ink2);font-weight:700;margin-left:4px;}
/* 추이 — 블럭의 틀은 이 칸이 갖고, 안의 추이 블럭(#utrend)은 테두리를 벗는다 */
.pdtrend{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px;display:flex;flex-direction:column;min-width:0;}
.pdtrend #utrend{margin:0;flex:1;display:flex;flex-direction:column;}
.pdtrend .utblk{background:none;border:0;border-radius:0;padding:0;flex:1;display:flex;flex-direction:column;}
.pdtrend .uthd{margin-bottom:14px;}
.pdtrend .utplot{height:300px;}.pdtrend .utmsg{height:300px;}
.pdrec{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:15px;border-top:1px solid var(--line);}
.pdrec>span{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;}
.pdrec .uform2{flex:1;min-width:0;display:none;}
.pdrecno{font-size:12px;color:var(--mut2);line-height:27px;}      /* 그 갈래에 친 회차가 없다 — 이름표만 덩그러니 서지 않게 */
/* 칩은 한 줄로 — 요약 블럭에서는 열 칸씩 두 줄이었다. PC 의 이 칸은 스무 칸이 한 줄에 들어간다 */
.pdrec .uform2 .chips{display:flex;gap:4px;}
.pdrec .uform2 .chip{flex:1 1 0;min-width:0;max-width:32px;height:27px;}
.pdtrend[data-scope="boss"] .pdrec .uform2[data-rec="boss"],.pdtrend[data-scope="duel"] .pdrec .uform2[data-rec="duel"]{display:block;}
/* 탭 블럭 — 띠 위의 칸. 고른 칸이 청록으로 찬다 */
.pdtabbox{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);}
.pdtabs{display:flex;background:var(--panel2);border-bottom:1px solid var(--line);}
.pdtab{padding:15px 30px;font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--mut);white-space:nowrap;background:none;border:0;border-right:1px solid var(--line);cursor:pointer;}
.pdtab:hover{color:var(--ink2);}
.pdtab.on{background:var(--g2);color:#06100f;}
.pdpane{padding:18px;}
.pdpane[hidden]{display:none;}
/* 정보 — 여섯 칸 한 줄 */
.pdinfo{display:grid;grid-template-columns:1fr 1.1fr 1.2fr 1.6fr 1.6fr 1.3fr;}
.pdinfom{display:none;}      /* 폰의 꼴 — 폭 820 아래에서만 보인다 */
.pdinfo>div{padding:6px 18px;border-left:1px solid var(--line2);min-width:0;}
.pdinfo>div:first-child{border-left:0;padding-left:4px;}
.pdinfo .k{font-size:12px;color:var(--mut);}
/* 이름표 + ⓘ(덱 전투력 · PVP 전투력) — 아이콘은 이름의 오른쪽 바깥에 붙는다(.upi). 이름 글자는 다른 칸과 같은 자리에 선다 */
.pdk{position:relative;display:inline-block;}
.pdinfo .v{font-family:var(--num);font-size:20px;font-weight:700;margin:5px 0 3px;white-space:nowrap;}
.pdinfo .v.hm{color:#f0d678;}.pdinfo .v.he{color:#beb2fa;}.pdinfo .v.hc{color:#96b0f5;}.pdinfo .v.dim{color:#4a5263;}
.pdinfo .f{font-size:11.5px;color:var(--mut);white-space:nowrap;}
.pdinfo .f b{color:var(--ink2);font-family:var(--num);}
/* 레이드 코인 획득 */
.pdci{width:.82em;height:.82em;margin-right:.32em;vertical-align:-.06em;flex:0 0 auto;}
#uinctab{display:flex;flex-direction:column;gap:12px;}
.pdphd{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);}
.pdphd>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdphd b{color:var(--ink2);font-size:13px;}
.pdmore{margin-left:auto;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--g2);background:none;border:1px solid rgba(34,216,194,.4);border-radius:8px;padding:5px 12px;cursor:pointer;}
.pdmore:hover{background:rgba(34,216,194,.1);}
.pdg4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.pdg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pdcc{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;min-width:0;}
.pdcc .k{font-size:12px;color:var(--ink2);}
.pdcc .v{font-family:var(--num);font-size:16px;font-weight:700;color:#f0cc22;margin:4px 0 2px;white-space:nowrap;}
.pdcc .f{font-size:11.5px;color:var(--mut);}
.pdcc.big{display:flex;flex-direction:column;justify-content:center;}.pdcc.big .v{font-size:32px;margin:6px 0 4px;}
.pdblk{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:13px 18px 12px;min-width:0;}
.pdblk h4{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--mut);}
.pdtop3{display:flex;flex-direction:column;}
.pdt3{display:flex;align-items:center;gap:10px;padding:6px 2px;border-top:1px solid var(--line);}
.pdt3:first-child{border-top:0;}
/* 누적 순위 블럭은 한 줄이 14 다 — 순위 · 닉네임 · 코인(2026-10-11 사용자 결정. 전 17 · 14 · 15) */
.pdt3 .rk{font-family:var(--num);font-size:14px;font-weight:700;width:26px;text-align:center;}
.pdt3 .n{font-size:14px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdt3 .c{margin-left:auto;font-family:var(--num);font-size:14px;font-weight:700;color:#f0cc22;white-space:nowrap;}
.pdnone{padding:26px 0;text-align:center;color:var(--mut);font-size:12.5px;}
/* 실패 줄 — 글자와 «다시 시도» 단추를 가운데 한 줄로(코인 탭 · 전적) */
.ufail{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
/* 덱 구성 — 카드만. 블럭의 틀 · 머리줄은 탭이 대신한다 */
.pdpane .dkpanel{background:none;border:0;padding:0;margin:0;}
.pdpane .dkhd{display:none;}
/* 전적 히스토리 */
.pd .ufeedhd{margin:40px 0 0;}      /* 구분선에서 제목 줄까지 40px(2026-10-08 — 그 전 33). 탭 블럭에서는 55px(구분선 위 14 + 선 1 + 여기 40). 폰은 아래 묶음의 36 그대로 */
.pd #ufeed{margin-top:28px;}        /* 제목 줄(스위치 포함)에서 첫 날짜까지 28px(그 전 32) — 날짜 묶음 사이(.ufgrp 28)와 같은 박자. 폰은 16 그대로 */
/* 날짜 묶음 사이 — 앞 날짜의 마지막 카드와 다음 날짜 제목이 붙어 보였다(폰은 그대로) */
.pd .ufgrp{margin-top:28px;}
.pd .ufgrp:first-child{margin-top:0;}
/* 전적 카드 — 토벌 중일 때만 출현 시각 옆에 «경과 47:17»(PC · 폰 모두). 처치된 회차에는 아무것도 안 붙는다. */
.ufel{display:inline-flex;align-items:baseline;gap:4px;font-size:11.5px;color:#5fc78e;white-space:nowrap;}
.ufel b{font-family:var(--num);font-size:12px;font-weight:700;color:#bdffdf;font-variant-numeric:tabular-nums;}
/* 받는 동안의 뼈대 — 진짜 틀을 빈 값으로 그리고(user.js pdHTML 의 sk), «글자» 를 전부 막대로 바꾼다(시안 B, 2026-10-10).
   틀이 같아서 자료가 와도 아래가 안 밀린다. 단추는 못 누른다 — 받는 중에 갈래를 바꾸면 받을 사람이 아직 없다.
   전에는 값만 막대였다 — 이름표 · 메달 · 단추 · 탭이 색까지 그대로 서 있어 다 받은 것처럼 보였다(청록 단추가 가장 눈에 띄었다).
   글자를 지우지 않고 «투명하게» 한다 — 칸의 크기는 진짜 글자가 정하므로 막대의 치수를 따로 맞출 일이 없다. */
.pd.sk{pointer-events:none;}
/* 값 · 이름표 — 글자 자리에 막대 */
.pd.sk .pdmk b,.pd.sk .pdmkw small,.pd.sk .pdrkpos .lbl,.pd.sk .pdrkpos .n,.pd.sk .pdrkpos .of,.pd.sk .pdrkst>span,.pd.sk .pdrkst b,.pd.sk .pdgv b,.pd.sk .pdgf span,
.pd.sk .utt,.pd.sk .pdrec>span,.pd.sk .pdinfo .k,.pd.sk .pdinfo .v,.pd.sk .pdinfo .f,.pd.sk .pdinfom .k,.pd.sk .pdinfom b,.pd.sk .pdinfom .sub,
#uinctab.sk .pdphd>span,#uinctab.sk .pdcc .k,#uinctab.sk .pdcc .v,#uinctab.sk .pdcc .f,#uinctab.sk .pdblk h4,#uinctab.sk .pdt3 span{
  color:transparent!important;background:#1e232c;border-radius:5px;animation:skpulse 1.6s cubic-bezier(.4,0,.6,1) infinite;}
.pd.sk .pdrkpos .lbl *,.pd.sk .pdrkpos .n *,.pd.sk .pdrkst>span *,.pd.sk .pdrkst b *,.pd.sk .pdgf span *,.pd.sk .utt *,.pd.sk .pdinfo .k *,.pd.sk .pdinfo .f *,.pd.sk .pdinfom .k *,
#uinctab.sk .pdphd>span *,#uinctab.sk .pdcc .v *,#uinctab.sk .pdt3 span *{color:transparent!important;background:none!important;animation:none!important;}
/* 줄 전체가 아니라 글자 폭만큼만 */
.pd.sk .pdinfo .k,.pd.sk .pdrec>span,#uinctab.sk .pdcc .k,#uinctab.sk .pdcc .f,#uinctab.sk .pdblk h4{width:fit-content;}
#uinctab.sk .pdcc .v{width:62%;}
#uinctab.sk .pdt3 .n{min-width:84px;}#uinctab.sk .pdt3 .c{min-width:70px;}
/* 「시즌 순위 · 지난 시즌」 줄 — 이름은 감추기만 한다(값의 막대가 줄의 오른쪽 끝에 선다) */
.pd.sk .pdinfom .ln{color:transparent!important;}
.pd.sk .upi,.pd.sk .pdmk svg,.pd.sk .pdmk .cw,#uinctab.sk .pdci{visibility:hidden;}
/* 메달 — 아이콘 없이 회색 원 */
.pd.sk .pdmk{background:#1e232c!important;box-shadow:none!important;animation:skpulse 1.6s cubic-bezier(.4,0,.6,1) infinite;}
/* 단추 · 탭 — 글자 없이 회색 판. 고른 칸만 한 단계 밝다 */
.pd.sk .utsw button,.pd.sk .fsw button,.pd.sk .fsubs button,#userpanel .pd.sk .pdmt button,.pd.sk .pdtab,#uinctab.sk .pdmore{color:transparent!important;background:#171b22!important;box-shadow:none!important;border-color:var(--line)!important;}
.pd.sk .utsw button.on,.pd.sk .fsw button.on,#userpanel .pd.sk .pdmt button.on,.pd.sk .pdtab.on{background:#232934!important;}
.pd.sk .utsw,.pd.sk .fsw{border-color:var(--line)!important;}
/* 색 띠 · 금 — 받는 중에는 뺀다 */
/* 받는 동안에도 머리띠는 바탕이 없다(2026-10-11 — 대시보드의 그림 위에 선다. 전에는 카드라 제 바탕을 깔았다). */
.pd.sk .pdhero{background:none;}
.pd.sk .pdhero::after{display:none;}
.pd.sk .pdrkc,.pd.sk .pdmid .pdtrend{border-left-color:var(--line2);}
/* 전적 제목 — 글자가 낱말 하나(글자 마디)라 감쌀 칸이 없다. 글자를 감추고 같은 자리에 막대를 그린다 */
.pd.sk .ufeedhd{color:transparent!important;background:linear-gradient(#1e232c,#1e232c) left 0 top 4px/78px 17px no-repeat;}
/* 크기 */
.pd.sk .pdhero>.av{box-shadow:none;}
.pd.sk .pdnick{width:140px;height:30px;}
.pd.sk .pdmk b{min-width:30px;}
.pd.sk .pdrkpos .n{width:56px;margin:0 auto 3px;}
.pd.sk .pdrkpos .of{width:48px;margin:0 auto;}
.pd.sk .pdrkst b{justify-self:end;min-width:52px;}
.pd.sk .pdgv b{min-width:60px;}
.pd.sk .pdgf span{min-width:64px;}
.pd.sk .pdgb u{display:none;}
.pd.sk .pdinfo .v{width:62%;}.pd.sk .pdinfo .f{width:84%;}
.pd.sk .pdinfom .pill>b{width:56%;margin-left:auto;margin-right:auto;}
.pd.sk .pdinfom .t:not(.w)>b{width:58%;}
.pd.sk .pdinfom .ln b,.pd.sk .pdinfom .t.w>b{min-width:30px;}
.pd.sk .pdrec .chip{opacity:1;}
@media (prefers-reduced-motion:reduce){ .pd.sk *,#uinctab.sk *{animation:none!important;} }
/* 전적 카드(PC 개편) — 칸의 폭을 못 박아 카드마다 세로 줄이 맞게 한다.
   왼쪽(순위 · 그림 · 이름 · 시각) | 딜량 124px | 참여인원 56px ‖ 오른쪽 순위표 440px(전에는 336px 라 이름이 잘렸다). */
@media(min-width:821px){
  .pd .ufmatch{grid-template-columns:minmax(0,1fr) 440px;}
  .pd .ufres{flex:1 1 0;}
  .pd .ufstats{margin-left:0;gap:18px;}
  .pd .ufstats .ufst:first-child{width:124px;}
  .pd .ufstats .ufst:last-child{width:56px;}
  .pd .ufros{padding-left:30px;padding-right:22px;}
  .pdmt{display:none!important;}
}

/* ── 개편의 폰 배치(폭 820 아래) — PC 와 같은 순서로 한 줄로 쌓는다: 머리띠 → 랭킹 카드 둘 → 추이 → 탭 → 전적 ── */
@media(max-width:820px){
  .pd{margin-top:10px;}
  .pd>.pdmid{margin-top:16px;}
  .pd>.pdtabbox{margin-top:24px;}
  .pd>.pdhr{margin-top:12px;}
  .pd .ufeedhd{margin:36px 0 0;}
  .pd #ufeed{margin-top:16px;}
  .pd .ufgrp{margin-top:22px;}
  /* 머리띠 — 그림 · 이름 한 줄, 메달 셋은 그 밑에 고르게 */
  .pdhero{flex-wrap:wrap;gap:14px;padding:16px 16px 12px;border-radius:14px;}
  .pdhero>.av{width:60px;height:60px;}
  .pdhero>.av .fb{font-size:22px;}
  .pdwho{flex:1;}
  .pdnick{font-size:21px;}
  .pdmedals{margin:0;flex:0 0 100%;justify-content:space-around;gap:0;border-top:1px solid var(--line);padding-top:6px;}
  /* 폰의 메달은 작게(2026-10-15 사용자 «뱃지와 폰트 크기를 좀만 줄이자» → «더 줄여봐» — 40 → 32px · 순위 14 → 12px · 이름 11 → 10px) */
  .pdmkw{min-width:48px;} .pdmkw small{font-size:10px;}
  .pdmk{width:32px;height:32px;margin:8px 0 16px;}
  .pdmk svg{width:17px;height:17px;}
  .pdmk b{font-size:12px;bottom:-16px;}
  .pdmk .cw{font-size:13px;top:-10px;}
  /* 가운데 — 보특/결특 탭 밑에, 고른 갈래의 랭킹 카드와 그 갈래의 추이가 «한 블럭» 으로 선다.
     카드의 아래 테두리와 추이의 위 테두리를 없애 붙이고, 왼쪽의 색 띠를 추이까지 잇는다. 추이 안의 보특/결특 단추는 감춘다(탭이 대신한다). */
  #userpanel .pdmt{margin:12px 0 10px;}      /* 대시보드(메달 줄) 밑과의 사이 — 24 → 12px(2026-10-15 사용자) */
  .pd>.pdmid{margin-top:0;}
  .pdmid{grid-template-columns:minmax(0,1fr);gap:0;}
  .pdranks{gap:0;}
  .pdmid[data-m="boss"] .pdrkc.d,.pdmid[data-m="duel"] .pdrkc.b{display:none;}
  .pdmid .pdrkc{border-radius:14px 14px 0 0;border-bottom:0;}
  /* 요약과 추이는 선이 아니라 «바탕의 밝기» 로 가른다 — 선을 진하게 하면 블럭이 둘로 쪼개져 보인다. 전적 카드의 순위표 칸과 같은 방법이다 */
  .pdmid .pdtrend{border-radius:0 0 14px 14px;border-top:1px solid var(--line);border-left:3px solid var(--g2);background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),var(--panel);}
  .pdmid .pdtrend{padding-top:31px;}      /* 구분선 ↔ «딜량 추이» 제목 32px(선 1 + 31) · 게이지 ↔ 구분선 16px — 사용자 지정 */
  .pdmid .pdrkc{padding-top:17px;padding-bottom:18px;}      /* 블럭 위 ↔ 숫자 줄 18px(테두리 1 + 17) · 게이지 ↔ 구분선 18px */
  .pdmid[data-m="duel"] .pdtrend{border-left-color:#a78bfa;}
  .pdtrend .utsw{display:none;}
  .pdrkc{padding:18px 16px 16px;gap:16px;}
  .pdrktop{gap:14px;}
  .pdrkpos{flex-basis:84px;}
  .pdrkpos .n{font-size:34px;}.pdrkpos .n.sm{font-size:26px;line-height:1.44;}
  .pdrkst{font-size:12.5px;gap:4px 10px;}
  .pdrkst b{font-size:13px;}
  .pdtrend{padding:14px 14px 17px;}      /* 칩 ↔ 블럭 끝 18px(17 + 테두리 1) */
  .pdtrend .utplot{height:170px;}.pdtrend .utmsg{height:170px;}
  .pdtrend .uthd{margin-bottom:8px;}
  /* 최근 순위 — 스무 칸이 한 줄에 안 든다. 이름표를 위로 올리고 열 칸씩 두 줄로 */
  .pdrec{flex-direction:column;align-items:stretch;gap:8px;margin-top:18px;padding-top:31px;}      /* 그림 ↔ 선 18px · 선 ↔ «최근 순위» 32px(선 1 + 31) */
  .pdrec .uform2 .chips{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;}
  .pdrec .uform2 .chip{max-width:none;height:24px;}
  .pdrecno{line-height:24px;}
  /* 탭 — 세 칸이 폭을 나눠 갖는다 */
  .pdtab{flex:1;padding:12px 4px;font-size:13px;text-align:center;}
  .pdtab:last-child{border-right:0;}
  .pdpane{padding:14px;}
  /* 정보 — PC 의 여섯 칸 띠 대신 폰의 꼴을 보인다: 성장 셋 한 줄, 덱 · PVP 둘, 진영전 한 줄. 상자 없이 가는 선으로만 나눈다 */
  .pdinfo{display:none;}
  .pdinfom{display:flex;flex-direction:column;}
  .pdinfom .k{font-size:12px;color:var(--mut);}
  .pdinfom b{font-family:var(--num);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
  .pdinfom b.hm{color:#f0d678;}.pdinfom b.he{color:#beb2fa;}.pdinfom b.hc{color:#96b0f5;}.pdinfom b.dim{color:#4a5263;}
  /* 성장 셋 — 알약 상자였는데 벗겼다(시안 «A · 선만»): 값이 없는 사람은 빈 상자 셋이 «–» 만 들고 서 있어 더 비어 보였다. 칸 사이 세로 금 + 밑에 가로 금 */
  .pdinfom .pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line2);padding-bottom:14px;margin-bottom:12px;}
  .pdinfom .pill{text-align:center;min-width:0;border-left:1px solid var(--line2);}
  .pdinfom .pill:first-child{border-left:0;}
  .pdinfom .pill>b{display:block;font-size:15px;margin-top:4px;white-space:nowrap;}
  /* 그 밑 — 덱 | PVP 사이에 세로 금, 진영전 위에 가로 금 */
  .pdinfom .lo{display:grid;grid-template-columns:1fr 1fr;}
  .pdinfom .t{padding:4px 14px 12px;min-width:0;}
  .pdinfom .t:nth-child(1){padding-left:2px;border-right:1px solid var(--line2);}
  .pdinfom .t:nth-child(2){padding-right:2px;}
  .pdinfom .t>b{display:block;font-size:17px;margin:4px 0 5px;}
  .pdinfom .ln{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);line-height:1.6;}
  .pdinfom .ln b{font-size:12px;color:var(--ink2);}
  .pdinfom .t.w{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--line2);padding:12px 2px 0;}
  .pdinfom .t.w>b{margin:0;font-size:16px;}
  .pdinfom .t.w .sub{font-size:11.5px;color:var(--mut);margin-left:8px;}
  /* 코인 — 큰 칸은 둘씩, 순위표는 위아래로 */
  .pdg4{grid-template-columns:1fr 1fr;gap:8px;}
  .pdg2{grid-template-columns:1fr;gap:8px;}
  .pdg2>.pdblk+.pdblk{display:none;}      /* 폰에서는 지난달 누적 순위를 뺀다(사용자 결정) — 탭이 길어진다 */
  .pdcc{padding:11px 12px;}
}
@media(max-width:360px){
  .pdrkpos{flex-basis:72px;}.pdrkpos .n{font-size:30px;}.pdrkpos .n.sm{font-size:23px;line-height:1.44;}
  .pdinfom .pill>b{font-size:13.5px;}      /* «전설 Lv.100» 이 칸 밖으로 나간다 */
}
/* 폭 340 아래(아이폰 SE 1세대 따위) — 랭킹 카드의 이름표가 두 줄로 꺾였다(«평균 순위 (최근 5회)», «TOP 10 횟수»).
   «(최근 5회)» 를 접고 글자를 한 단계 줄인다. 기준은 이름 옆의 ⓘ 풍선이 말한다. */
@media(max-width:340px){
  .pdrkpos{flex-basis:66px;}
  .pdrkpos .lbl{font-size:12px;}      /* 이름 + ⓘ 가 칸(66px) 안에 들어야 옆의 이름표에 안 닿는다 */
  .pdrktop{gap:10px;}
  .pdrkst{font-size:12px;gap:4px 8px;}
  .pdrkst span{white-space:nowrap;}
  .pdrkst small{display:none;}
  .pdrkst b{font-size:13px;}
}
/* ▼ 보스 그림 — 폰 */
/* 폰에서도 고른 회차의 보스 그림을 깐다(2026-10-09) — PC 처럼 «전체»: 제목 · 회차 칩 · 요약 탭 · 보스 정보 블럭 · 순위 카드 두세 장 뒤까지 내려가며 사라진다. 순위표가 짧으면 표의 끝에서 끝난다(--tlend). (높이 980 — 짧게 두면 카드 바탕을 비워도 그 뒤에 그림이 없어 «색만 빠진» 것처럼 보였다).
   폰은 세로로 길어 그림이 폭에 꽉 차게 한 겹으로 들어간다(PC 처럼 양옆을 흐릴 자리가 없다).
   위로는 메뉴(레이드 · 랭킹 · 랭커 · 우편함) 줄을 넘지 않는다 — 그 아래에서 시작해 서서히 나타난다.
   블럭 · 카드의 바탕은 PC 와 같은 투명도 30(바탕을 70% 남긴다). 순위표의 바깥 상자(.lb)는 바탕을 비운다 — 카드와 겹쳐 두 번 칠해지면 그만큼 덜 비친다.
   토벌 중은 원래 색, 끝난 회차는 회색, 그림이 없으면 안 깔고 바탕도 그대로다(PC 와 같은 약속 · 같은 클래스). 폭으로만 가른다. */
@media (max-width:820px){
  .roundtl{position:relative;isolation:isolate;}
  .roundtl ~ *{position:relative;}
  .roundtl::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:-74px;height:min(980px,calc(var(--tlend,2000px) + 74px));width:100vw;transform:translateX(-50%);
    background:var(--tlbg) center 10%/cover no-repeat;opacity:0;transition:opacity .35s ease,filter .35s ease;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 74%,transparent 100%);}
  .roundtl.hasbg::before{opacity:.34;}
  .roundtl.hasbg.dead::before{opacity:.22;filter:grayscale(.85) brightness(.8);}
  .roundtl.hasbg ~ #bsum .sumc{background:rgba(27,31,38,.7);}
  body.live .roundtl.hasbg ~ #bsum .sumc{background:linear-gradient(180deg,rgba(79,208,138,.09),rgba(79,208,138,.02)),rgba(27,31,38,.7);}
  .roundtl.hasbg ~ .lb{background:transparent;}
  .roundtl.hasbg ~ .lb .scroll:not(.rank) .rows .row{background:rgba(27,31,38,.7);}
}
/* 폴드 펼침 · 태블릿 세로(600 ~ 820) — 폰 꼴이지만 화면이 넓다. 그림을 폭에 꽉 채우면 너무 크게 확대돼 형체가 안 보였다(재점검 2026-10-09).
   그림 상자를 560 으로 좁혀 가운데에 두고 높이도 760 까지만 — 보스의 얼굴 · 몸통이 한눈에 들어온다. 좁힌 만큼 양옆은 서서히 지운다. */
@media (min-width:600px) and (max-width:820px){
  .roundtl::before{width:min(100vw,560px);height:min(760px,calc(var(--tlend,2000px) + 74px));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 74%,transparent 100%);mask-composite:intersect;}
}
/* ▲ 보스 그림 — 폰 */
/* ▼ 황고 배경 — 폰 */
/* 폰의 황고 배경 그림(2026-10-09) — 시계는 그대로 두고 «그림만» 시계 뒤 한가운데로 올린다.
   전에는 그림이 시계 아래에서 시작해 황고가 «최신 쿠폰» 카드 뒤에 깔렸다(쿠폰 글자 뒤가 어수선했다).
   레이드 배경과 같은 두 겹이다 — 같은 자리 · 같은 크기 · 같은 그림. ::before 는 또렷하게 가운데만(전에 걸려 있던 흐림 2px 를 뺐다 — 1px 도 넣어 봤지만 선명한 쪽이 낫다는 결정, 2026-10-09),
   ::after 는 흐리게(9px) 넓게 — 양옆이 뿌옇게 사라진다. 진하기는 전과 같다(대기 8% · 출현 중 22%).
   PC 는 안 건드린다 — PC 는 원래 시계가 그림 한가운데에 선다. 폭으로만 가른다. */
@media (max-width:820px){
  .home.gz-img .gzbg::before,.home.gz-img .gzbg::after{top:76px;}
  .home.gz-img .gzbg::before{filter:saturate(.45);
    -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 34%,#000 66%,transparent 90%),radial-gradient(58% 52% at 50% 42%,#000 18%,rgba(0,0,0,.55) 52%,transparent 84%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 10%,#000 34%,#000 66%,transparent 90%),radial-gradient(58% 52% at 50% 42%,#000 18%,rgba(0,0,0,.55) 52%,transparent 84%);mask-composite:intersect;}
  .home.gz-live.gz-img .gzbg::before{filter:saturate(1);}
  .home.gz-img .gzbg::after{content:"";position:absolute;left:50%;width:min(1500px,120vw);height:520px;transform:translateX(-50%);
    background-image:var(--gzimg),var(--gzbgimg);background-repeat:no-repeat,no-repeat;background-position:center 32%,center 34%;background-size:auto 62%,contain;
    filter:saturate(.45) blur(9px);opacity:.08;transition:opacity .8s,filter .8s;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),radial-gradient(58% 52% at 50% 42%,#000 18%,rgba(0,0,0,.55) 52%,transparent 84%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),radial-gradient(58% 52% at 50% 42%,#000 18%,rgba(0,0,0,.55) 52%,transparent 84%);mask-composite:intersect;}
  .home.gz-live.gz-img .gzbg::after{opacity:.22;filter:saturate(1) blur(9px);}
}
/* ▲ 황고 배경 — 폰 */

/* ══ 이미지 팝업 (ui/imgpop.js, 2026-10-10 시안 C) ══
   보스 정보의 썸네일 · 상세 머리띠의 대표 이미지를 누르면 뜬다. 수입 팝업과 같은 상자 틀 — 머리줄에 이름과 닫기, 그 밑에 그림.
   그림은 화면에 맞춰 줄이기만 한다(확대하지 않는다 — 게임 원본이 1024×1536 쯤이라 줄여도 또렷하다). */
[data-zoom]{cursor:zoom-in;}
[data-zoom]:focus-visible{outline:2px solid var(--g2);outline-offset:3px;}
/* 올리면 살짝 커진다(2026-10-09, 1.08배 — 1.05 · 1.08 · 1.12 를 나란히 보고 정했다). 커서(돋보기)만으로는 «누르면 크게 본다» 가 잘 안 읽혔다.
   «실제로 열리는 칸» 에만 건다 — 그림이 없거나(이니셜) · 아직 안 받았거나 · 기본 보스 그림이면 눌러도 안 열리니 커지지도 않는다(imgpop.js 의 zoomSrc 와 같은 조건).
   PC 만(폭으로 가른다) — 폰에는 올림이 없고, 누른 뒤에 커진 채로 남는다. 최근 순위 칩(1.28배)보다 작게: 칸이 커서 그만큼 키우면 옆 글자를 덮는다. */
@media (min-width:821px){
  .sbthumb[data-zoom],.pdhero>.av[data-zoom]{transition:scale .15s ease,box-shadow .15s ease;}
  /* 덱의 카드도 누르면 크게 본다(2026-10-10) — 올리면 살짝 뜬다. 카드는 테 · 강화 효과가 제 그림자를 갖고 있어 크기만 키운다. 그림이 없는 카드(data-zoom 이 안 붙는다)는 그대로다. */
  .deck .dcard[data-zoom]{transition:scale .15s ease;}
  .deck .dcard[data-zoom]:hover{scale:1.04;z-index:2;}
  .sbthumb[data-zoom]:has(img[data-boss]:not([src*="boss.svg"])):hover{scale:1.08;box-shadow:0 0 0 1px #4a5361,0 6px 18px rgba(0,0,0,.45);}
  .pdhero>.av[data-zoom]:has(img[src]:not([style*="none"])):hover{scale:1.08;box-shadow:0 0 0 2px #0f1217,0 0 0 3px rgba(34,216,194,.95),0 0 18px rgba(34,216,194,.35);}
}
@media (prefers-reduced-motion:reduce){ .sbthumb[data-zoom],.pdhero>.av[data-zoom],.deck .dcard[data-zoom]{transition:none;} }
.ipw{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:20px 16px;background:rgba(4,6,10,.84);overscroll-behavior:contain;}
.ipw[hidden]{display:none;}
.ipbox{display:flex;flex-direction:column;max-width:min(100%,560px);max-height:100%;background:#151921;border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 60px -30px #000;overflow:hidden;outline:none;}
/* 머리줄 — 낮게(사용자 요청: 48px). 이름이 길면 말줄임 */
.iphd{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.iphd b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iphd small{font-size:12px;color:var(--mut);white-space:nowrap;}
.ipx{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:rgba(20,24,31,.9);color:var(--ink2);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.ipx:hover{color:var(--ink);border-color:var(--mut);}
.ipbd{padding:14px;display:flex;justify-content:center;background:#0e1116;min-height:0;}
.ipbd img{display:block;max-width:100%;max-height:68vh;max-height:68dvh;width:auto;height:auto;object-fit:contain;border-radius:10px;}
.ipbox{cursor:zoom-out;}      /* 어디를 눌러도 닫힌다 — 여는 칸의 zoom-in 과 짝이다 */
/* 넘기기(2026-10-10) — 덱의 카드처럼 여럿이 한 묶음일 때만 선다(imgpop.js 의 group). 상자의 «바깥» 좌우에 선다 — 그림 위에 얹으면 그림을 가린다(2026-10-10 요청).
   자리는 «고정» 이다 — 화면 한가운데에서 좌우로 같은 거리(상자의 가장 큰 폭 560 의 절반 + 18 만큼 떨어진 곳). 그림마다 폭이 달라 상자가 넓어졌다 좁아졌다 하는데,
   상자 옆에 붙여 세웠더니 넘길 때마다 꺾쇠가 따라 움직여 같은 자리를 연달아 누를 수 없었다(2026-10-10 요청). 폭이 좁은 그림에서는 상자와 꺾쇠 사이가 그만큼 벌어진다.
   폰은 화면 좌우 가장자리에 아주 작게 붙인다(아래) — 밀어서도 넘긴다.
   꺾쇠만은 눌러도 안 닫힌다(커서도 손가락). 머리줄의 «2 / 5» 는 닫기 단추 앞에 선다. */
.ipnav{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(20,24,31,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.ipnav[hidden]{display:none;}
.ipnav.prev{left:calc(50% - 280px - 18px - 40px);}.ipnav.next{right:calc(50% - 280px - 18px - 40px);}
.ipnav svg{width:19px;height:19px;display:block;}
.ipnav.prev svg{transform:scaleX(-1);}
.ipnav:hover{background:rgba(34,40,50,.95);border-color:rgba(255,255,255,.5);}
.ipnav:focus-visible{outline:2px solid var(--g2);outline-offset:2px;}
/* 끝(첫 장의 왼쪽 · 마지막 장의 오른쪽) — 흐리게 세워 둔다. 올려도 안 밝아지고 커서도 손가락이 아니다. PC · 폰 같다 */
.ipnav.off,.ipnav.off:hover{opacity:.3;cursor:default;background:rgba(20,24,31,.72);border-color:rgba(255,255,255,.22);}
.ipcnt{font-style:normal;font-family:var(--num);font-size:12px;color:var(--mut);white-space:nowrap;margin-left:auto;}
.ipcnt[hidden]{display:none;}
.ipcnt:not([hidden]) + .ipx{margin-left:0;}
/* 꺾쇠를 연달아 누르면(두 번 누르기 = 고르기) 그림이 «골라져» 파랗게 덮였다(2026-10-10 로컬에서 발견). 팝업 안은 고를 글이 없다 — 고르기 · 끌기 · 폰의 누름 번쩍임을 끈다. */
.ipw{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.ipbd img{-webkit-user-drag:none;}
@media(max-width:820px){
  .ipw{padding:16px 12px;}
  .ipbd{padding:10px;}
  /* 폰의 꺾쇠 — 아주 작게, 화면의 좌우 가장자리에 붙여 세로 가운데에(2026-10-10 요청). 그림이 화면 폭을 거의 다 써서 PC 처럼 상자 바깥에 둘 자리가 없다.
     처음에는 아예 뺐는데(밀기만), «넘길 수 있다» 는 것이 안 보였다. 동그라미 대신 PC 것(40)보다 작은 동그라미(28)다. 밀어서도 넘긴다(imgpop.js). */
  .ipnav{width:28px;height:28px;margin-top:-14px;border-radius:50%;background:rgba(10,13,18,.6);border-color:rgba(255,255,255,.2);}      /* 동그라미(2026-10-10 요청 — 길쭉한 손잡이였다) */
  /* 화면 끝에 딱 붙였더니 너무 가장자리였다(2026-10-10 요청) — 살짝 안쪽으로. 그림의 왼쪽 끝이 화면에서 22 떨어져 있어, 그림 가장자리에 걸쳐 선다 */
  .ipnav.prev{left:8px;}
  .ipnav.next{right:8px;}
  .ipnav svg{width:13px;height:13px;}
  .ipcnt{font-size:12.5px;color:var(--ink2);}
  /* 폰은 머리줄을 한 단계 더 낮게(사용자 요청: 48 → 40px) — 그림이 그만큼 커진다 */
  .iphd{padding:6px 8px 6px 16px;}
  .ipx{width:28px;height:28px;font-size:12px;}
}

/* 점령전의 글자(2026-10-11 맞춤) — 순위표 한 줄 13 · 표 머리 11 · 순위 보상 12 · 진영 비율과 인원 12. PC 와 폰이 같은 값이다(전에는 PC 가 반 픽셀씩 컸다). */
/* ═══ 스펙 화면(/spec — #specpanel, 2026-10-11) ═══
   PC  — 분포 칸 셋(.sbdist) + 선만 긋는 표(.sbhd · .sbrw). 고른 기준은 노랑(#f0cc22 — 상세의 레이드 코인 숫자와 같은 색).
   폰  — 탭(.sbtabs) + 값으로 묶은 목록(.sbgh 묶음 머리 · .sbmr 줄). 묶음 머리 밑의 줄(u)이 분포 막대다.
   이름은 sb- 로 시작한다 — 줄에 붙는 스펙 마크(.sm · .mk · .spx …, ui/spec.js)와 안 섞이게.
   스펙의 색: MUR 금 · 엠블럼 연보라 · 용병 파랑(줄의 스펙 마크와 같은 계열). */
#specpanel{--sbgold:#f0cc22;--sbm:240,214,120;--sbe:190,178,250;--sbc:150,176,245;padding-bottom:26px;}
/* 받는 중 — 자리(높이)는 다 받은 것과 같아야 한다. 막대(13px)가 글자 · 아이콘보다 낮아 알약 2px · «유저 N명» 줄 6px · 분포 칸 10px 씩 모자랐다(2026-10-11 재점검). */
.sbupd.sk{border-color:transparent;background:none;padding-left:0;min-height:31px;box-sizing:border-box;}
.sbcap>.skb{margin:3px 0;}
.sbtabs.wait{pointer-events:none;}.sbnote.wait{visibility:hidden;}
/* 랭킹 PC 의 요약 블럭 셋 — 다 받으면 «자세히 보기» 단추가 든 셋째 칸이 줄을 115px 로 민다. 받는 동안은 단추가 없어 108px 였고, 자료가 오면 순위표가 7px 내려갔다(2026-10-11 재점검). */
@media(min-width:821px){ #ranksum .sumc{min-height:115px;} }
.sbupd{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  font-size:13px;color:var(--ink2);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.sbupd svg{width:15px;height:15px;flex:none;color:var(--sbgold);}
.sbupd b{color:var(--ink);font-weight:700;}
.sbupd small{color:var(--mut);font-size:12px;}
/* 분포 칸 — 고르지 않은 칸은 테두리 없이 바탕만 살짝 밝다. 고른 칸만 노란 테두리의 블럭. */
.sbdist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.sbdist:empty{display:none;}
.sbdc{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid transparent;border-radius:14px;padding:14px 16px 12px;
  background:rgba(255,255,255,.035);transition:border-color .12s,background .12s;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;}
/* 칸마다 스펙의 색 — 위에 얇은 줄 · 제목 앞의 마크 · 막대. 고른 칸은 줄과 막대가 노랑이 된다(마크는 제 색 그대로). */
.sbdc{position:relative;overflow:hidden;}
.sbdc.k-mur{--c:var(--sbm);}.sbdc.k-emb{--c:var(--sbe);}.sbdc.k-merc{--c:var(--sbc);}
.sbdc[class*="k-"]::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(var(--c),.55);}
.sbdc.on::before{background:var(--sbgold);}
.sbdh b{display:inline-flex;align-items:center;gap:8px;}
.sbmk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:10px;font-weight:800;
  color:rgb(var(--c));border:1.5px solid rgba(var(--c),.7);background:rgba(var(--c),.12);}
.sbdc:hover{border-color:#3a4656;background:rgba(255,255,255,.06);}
.sbdc.on{background:var(--panel);border-color:var(--sbgold);}
.sbdc:focus-visible{outline:2px solid var(--sbgold);outline-offset:2px;}
/* 받는 동안의 칸 — 다 그린 뒤와 같은 높이를 잡아 둔다(머리 + 아홉 줄). 안 잡으면 자료가 오는 순간 표가 120px 내려간다. */
.sbdc.sk{cursor:default;gap:9px;min-height:249px;}   /* 다 받은 칸의 높이(249 — 아홉 줄)와 같게. 전 225 */
.sbdc.sk:hover{border-color:transparent;background:rgba(255,255,255,.035);}
.sbdh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;font-size:14px;color:var(--ink2);}
.sbdh em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:var(--mut2);}
.sbdc.on .sbdh,.sbdc.on .sbdh em{color:var(--sbgold);}
.sbdr{display:grid;grid-template-columns:86px 1fr 46px 58px;gap:10px;align-items:center;padding:3px 0;font-size:13px;}   /* 줄 사이를 살짝 띄운다(2026-10-11. 전 2px — 다닥다닥 붙어 보였다. 4px 은 벌어져 보여 3px 로) */
.sbdc.sk .sbdr{display:block;padding:0;}
.sbdr b{white-space:nowrap;}
.sbdr .n{text-align:right;}
.sbdr .pc{text-align:right;color:var(--mut);font-size:12px;}
.sbdr u{display:block;height:6px;border-radius:9px;background:#1b212a;position:relative;overflow:hidden;text-decoration:none;}
.sbdr u::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);min-width:2px;border-radius:9px;background:rgba(var(--c,194,201,214),.75);}
.sbdc.on .sbdr u::after{background:var(--sbgold);}
.sbdr.z{color:var(--mut);}
.sbdr.z b{font-weight:500;}
.sbdr.z u::after{background:#4a5568!important;}
/* «유저 N명» — 표 위의 한 줄. 밑에 선 하나(제목 → 머리 → 줄). */
.sbcap{display:flex;align-items:baseline;gap:8px;padding:20px 4px 12px;margin-bottom:12px;border-bottom:1px solid var(--line);}
.sbcap:empty{display:none;}
.sbcap b{font-size:16px;font-weight:800;}
.sbcap span{color:var(--mut);font-size:13.5px;font-variant-numeric:tabular-nums;}
/* 표 — 선만 긋는다. 머리의 칸은 단추다(위아래 꺾쇠를 늘 달고, 고른 칸만 노란 바탕). */
.sbtb{min-width:0;font-variant-numeric:tabular-nums;}
.sbhd,.sbrw{display:grid;grid-template-columns:40px minmax(160px,1.1fr) 96px 250px 150px 84px 84px;gap:12px;align-items:center;}
/* 줄의 간격은 점령전의 최종 순위표와 같다(2026-10-11 맞춤) — 줄 9px 10px · 머리 8px 10px · 칸 사이 12px. 그 뒤 줄만 위아래 12px 로 살짝 더 띄웠다(11 을 거쳐)(사용자 결정 — 엠블럼 막대 · 딱지가 있어 같은 여백으로는 답답했다). 전에는 줄 10px 4px · 머리 0 4px 8px · 칸 사이 10px. */
.sbhd{color:var(--mut);font-size:11px;padding:8px 10px;border-bottom:1px solid var(--line);}
.sbhd .c,.sbrw .c{text-align:center;justify-self:center;}
.sbhd button{display:inline-flex;align-items:center;gap:5px;justify-self:start;padding:3px 8px;margin-left:-8px;border:0;border-radius:6px;background:none;
  font:inherit;color:inherit;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;-webkit-tap-highlight-color:transparent;}
.sbhd button.c{justify-self:center;margin-left:0;}
.sbhd button:hover{background:rgba(255,255,255,.07);color:var(--ink);}
.sbhd button.on{color:var(--sbgold);font-weight:700;background:rgba(240,204,34,.1);}
.sbhd button:focus-visible{outline:2px solid var(--sbgold);outline-offset:1px;}
.sbso{display:inline-flex;flex-direction:column;gap:2px;}
.sbso::before,.sbso::after{content:"";border:3px solid transparent;border-top-width:0;border-bottom:4px solid var(--mut2);}
.sbso::after{transform:rotate(180deg);}
.sbhd .on.up .sbso::before,.sbhd .on.dn .sbso::after{border-bottom-color:var(--sbgold);}
.sbrw{padding:12px 10px;border-bottom:1px solid var(--line);font-size:13px;}
.sbrw:hover{background:rgba(255,255,255,.03);}
.sbrw.sk{display:flex;gap:18px;padding:16px 10px;}
.sbrw.sk:hover{background:none;}
/* 숫자는 숫자 글꼴로(2026-10-11) — 레이드 · 랭킹 · 랭커 · 점령전과 같다. 전에는 스펙만 한글 글꼴로 그려 같은 13px 인데 생김새가 달랐다. */
.sbnum,.sblv b,.sbemb b,.sbemb em,.sbmc b,.sbrk,.sbdr b,.sbdr .n,.sbdr .pc,.sbsv b,.sbrr b,.sbgh b,.sbgh span em{font-family:var(--num);}
.sbnum{font-weight:700;color:var(--mut);}
.sbnm{font-weight:600;font-size:13px;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.sbnm:hover{text-decoration:underline;text-underline-offset:3px;}
.sbno2{color:var(--mut2);}
.sblv{color:var(--mut);white-space:nowrap;}
.sblv b{color:var(--ink);font-weight:700;margin-left:2px;}
.sbemb{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.sbpp{display:flex;gap:2px;}
.sbpp i{width:5px;height:10px;border-radius:1.5px;background:#232b37;}
.sbpp i.f{background:rgba(169,156,240,.8);}
.sbemb b{font-weight:700;}
.sbemb em{font-style:normal;color:rgb(var(--sbe));font-weight:700;min-width:30px;}
/* 엠블럼을 게임의 그림으로(2026-10-11 — 스펙 화면만). 그림 + «11 홍련»(단계의 색 — 글자에 직접 칠한다) + 강화.
   그림의 크기: 표 26 · 분포 칸 18 · 폰 목록 18 · 폰 묶음 머리 20. 못 받은 그림은 감춘다(ui/specboard.js 가 hidden 을 건다) — 이름은 남는다.
   줄 높이: 그림이 든 표(.art)는 위아래 여백을 10px 로 줄여 46px(전 41px). 받는 중(뼈대)도 46px 로 잡는다. */
.sbei{flex:none;display:block;object-fit:contain;}
.sben{font-family:var(--num);font-weight:700;white-space:nowrap;}
.sbrw.art{padding:10px 10px;}
.sbdn{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;}
.k-emb .sbdr:has(.sbdn){grid-template-columns:96px 1fr 46px 58px;}
.sbmc{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.sbmc b{font-weight:700;}
.sbmc i{font-style:normal;font-size:10px;font-weight:700;padding:1px 7px;border-radius:5px;border:1px solid rgba(160,195,255,.75);background:rgba(130,175,255,.2);color:#bcd6ff;}
.sbrk{font-weight:700;}
.sbrk small{font-size:10px;font-weight:600;color:var(--mut);margin-left:1px;}
.sbrk.t10{color:var(--sbgold);}
.sbrk.no{color:var(--mut2);font-weight:500;}
/* 쪽 단추 — 다른 표와 같은 모양(.pgb)에 고른 쪽만 노랑. */
#sbpager .pgb.on{color:var(--sbgold);border-color:rgba(240,204,34,.5);background:rgba(240,204,34,.1);}
/* 폰에서만 쓰는 것 — PC 에서는 비어 있다 */
.sbtabs:empty,.sbnote:empty{display:none;}

/* 좁은 PC(821 ~ 1119px)에는 따로 맞추지 않는다 — 사이트의 틀(.wrap)이 그 폭에서 1120px 로 버티고 화면을 옆으로 민다(다른 화면과 같다). */
@media(max-width:820px){
  /* 폰 — 탭으로 기준을 고르고, 같은 값끼리 묶은 목록으로 본다. */
  .sbupd{padding:4px 10px 4px 8px;gap:6px;font-size:11.5px;}
  .sbupd svg{width:12px;height:12px;}
  .sbupd.sk{min-height:24px;}.sbcap>.skb{margin:1.5px 0;}
  .sbupd small{font-size:11px;}
  .sbtabs{display:flex;gap:2px;margin:4px -4px 0;}
  /* 누르는 높이는 36px 을 지킨다 — 글자는 작아도 손가락은 그대로다 */
  .sbtabs button{padding:9px 11px;min-height:36px;border:0;border-radius:8px;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .sbtabs button.on{background:#1d232c;color:var(--sbgold);}
  .sbnote{font-size:11px;color:var(--mut);margin-top:6px;}
  .sbcap{padding:12px 0 8px;margin-bottom:0;}
  .sbcap b{font-size:14px;}
  .sbcap span{font-size:12px;}
  .sbch,.sbmr{display:grid;grid-template-columns:minmax(0,1fr) 72px 72px 62px;gap:8px;align-items:center;}   /* 값 칸 둘은 같은 폭이다 — 탭에 따라 어느 칸에 엠블럼(«10단계 +30», 가장 긴 값)이 올지 바뀐다. 전에는 78 · 58 이라 값이 13px 이 되자 좁은 칸에서 넘쳤다 */
  .sbch{font-size:11px;color:var(--mut2);padding:5px 0 0;}
  .sbch span:last-child{text-align:right;}
  /* 묶음 머리 — «값 · N명 · 상위 N%» 한 줄 글 + 그 밑의 줄이 분포 막대(옅은 노랑 위에 그 묶음의 몫만큼 진하게). */
  .sbgh{margin-top:18px;}
  .sbgh div{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;}
  .sbgh b{font-size:14.5px;font-weight:800;color:var(--sbgold);white-space:nowrap;}
  .sbgh span{font-size:12px;color:var(--mut);white-space:nowrap;}
  .sbgh span em{font-style:normal;color:var(--ink2);font-weight:600;}
  .sbgh span i{font-style:normal;color:var(--mut2);}
  .sbgh u{display:block;height:3px;background:rgba(240,204,34,.16);position:relative;text-decoration:none;}
  .sbgh u::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);min-width:3px;background:var(--sbgold);}
  .sbmr{padding:8px 0;border-bottom:1px solid #171c24;}
  .sbmn{display:flex;align-items:baseline;gap:5px;min-width:0;}
  .sbmn .sbnm{font-size:13px;}   /* PC 와 같은 13(2026-10-11 맞춤. 전 13.5) */
  .sbmn .sbsv{flex:none;}
  .sbsv{font-size:13px;color:var(--mut);white-space:nowrap;}   /* 줄의 값도 PC 와 같은 13(전 12) */
  .sbsv b{font-weight:700;}
  .sbsv.m b{color:rgb(var(--sbm));}
  .sbsv.e b{color:rgb(var(--sbe));}
  .sbsv.c b{color:rgb(var(--sbc));}
  /* 엠블럼 값 — 그림 + 이름 + 강화. 칸이 넓어져(«11 홍련 +30» 은 96px 남짓) 그 칸이 선 자리에 따라 폭을 다시 나눈다: 엠블럼 100 · 옆 값 60. */
  .sbsv.art{display:flex;align-items:center;gap:4px;} .sbsv.art .sben{font-size:12.5px;} .sbsv.art>b:last-child{margin-left:1px;}
  .sbch.e1,.sbmr.e1{grid-template-columns:minmax(0,1fr) 100px 60px 62px;}
  .sbch.e2,.sbmr.e2{grid-template-columns:minmax(0,1fr) 60px 100px 62px;}
  .sbga{display:flex;align-items:center;gap:6px;} .sbga .sben{font-size:14.5px;font-weight:800;color:var(--sbgold);}
  .sbgh div:has(.sbga){align-items:center;}
  .sbrr{text-align:right;font-size:10.5px;color:var(--mut);white-space:nowrap;line-height:1.35;}
  .sbrr span{display:block;}
  .sbrr b{font-weight:700;font-size:13px;color:var(--ink);margin-left:3px;}
  .sbrr b.t10{color:var(--sbgold);}
  .sbrr b.no{color:var(--mut2);font-weight:500;}
  .sbrr small{font-size:10px;}
  .sbmore{display:block;width:100%;padding:12px 0;border:0;border-bottom:1px solid #171c24;background:none;font-family:inherit;font-size:11.5px;color:var(--mut);cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .sbrw.sk{gap:12px;padding:15px 0;}
}
@media(max-width:360px){
  /* 아주 좁은 폰(320) — 칸을 조금씩 줄인다. 닉네임 칸이 먼저 숨이 막힌다. */
  .sbch,.sbmr{grid-template-columns:minmax(0,1fr) 62px 62px 60px;gap:6px;}
  /* 엠블럼 값이 든 줄 — 320 에서는 그림을 16 으로, 칸은 88 · 52. 닉네임 칸이 70px 남짓 남는다(긴 닉네임은 말줄임). */
  .sbch.e1,.sbmr.e1{grid-template-columns:minmax(0,1fr) 88px 52px 58px;} .sbch.e2,.sbmr.e2{grid-template-columns:minmax(0,1fr) 52px 88px 58px;}
  .sbsv.art{gap:3px;} .sbsv.art .sbei{width:16px;height:16px;} .sbsv.art .sben{font-size:11.5px;}
  .sbtabs button{padding:9px 8px;font-size:12.5px;}
  .sbsv{font-size:11.5px;}
  .sbupd small{display:none;}
  /* 화면 머리의 단추가 셋이 됐다(보특 · 결특 · 스펙) — 320 에서 제목 옆에 못 서고 다음 줄로 떨어져 랭킹의 머리가 40px 길어졌다. 단추의 옆 여백을 줄여 제 줄에 세운다. */
  .mseg a{padding:5px 9px;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   점령전(/zone · #zonepanel, 2026-10-11) — 안쪽은 ui/zone.js 가 채운다.
   짜임이 둘이다. 넓게(821px 부터 — #zonepanel.wide): 판 하나(SVG) — 왼쪽 점수판 + 지도 + 회차 넘김.
   좁게(820px 까지): 위에서 아래로 — 상태 줄 · 진영 셋 · 지도 · 회차 넘김 · 누른 나라의 카드. 가르는 것은 폭뿐이고, 클래스(.wide)는 ui/zone.js 가 단다.
   이름은 전부 zn 으로 시작하거나 #zonepanel 밑에 건다 — 짧은 이름(.r · .n · .on)이 다른 화면의 것과 섞이지 않게.
   진영 색(--k)은 .znA · .znB · .znC 가 정한다. 판의 바탕은 그림이다(zone-bg.webp — 2026-10-11. 전에는 진영 색의 번짐이었다).
   ══════════════════════════════════════════════════════════════════════════════ */
#zonepanel{--za:#e5605e;--zb:#4f93ee;--zc:#44bd86;--zhot:#e9c46a;padding-bottom:10px;}
#zonepanel .znA{--k:var(--za);} #zonepanel .znB{--k:var(--zb);} #zonepanel .znC{--k:var(--zc);}
#zonepanel .k{color:var(--k);font-weight:700;}
#zonepanel .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--k,#5a6376);flex:0 0 auto;}
/* 전황의 하위 탭(레이드 · 점령전) — 화면 머리에 서는 것. 지금 화면은 <b>, 갈 곳은 <a>. 레이드에서는 폰에서만 보인다(.mwar — PC 는 메뉴의 하위 탭이 그 일을 한다). */
.wartabs{display:inline-flex;gap:4px;align-items:center;flex:0 0 auto;}
.wartabs a,.wartabs b{font-size:14px;font-weight:700;color:var(--mut);padding:7px 14px;border-radius:9px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.wartabs a:hover{color:var(--ink2);}
.wartabs b{color:var(--ink);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);cursor:default;}
.wartabs.mwar{display:none;}
/* 맨 윗줄 — 하위 탭 + 시즌 단추. 제목은 없다. */
.znsub{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:22px 0 14px;position:relative;}
/* 최근 갱신 — 레이드의 .subbar .upd 와 같은 값. 시즌 단추가 왼쪽에 서므로 오른쪽 끝으로 민다. 늦어지면(.late) 노란 글자 */
.znsub .upd{margin-left:auto;font-size:11.5px;line-height:14px;color:var(--mut);white-space:nowrap;} .znsub .upd b{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;} .znsub .upd.late,.znsub .upd.late b{color:#e9a23b;}
.znsea{font:inherit;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;background:var(--panel);border:1px solid #3b424d;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer;}
.znsea i{font-style:normal;font-size:8px;color:var(--mut);}
.znsea:disabled{opacity:.5;cursor:default;}
.znsea[aria-expanded="true"]{border-color:var(--g2);} .znsea[aria-expanded="true"] i{color:var(--g2);transform:rotate(180deg);}
.znsea:focus-visible,.zndwl button:focus-visible,#zonepanel g[role=button]:focus-visible,#zonepanel button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* 목록의 자리는 열 때 ui/zone.js 의 placeList 가 잡는다(단추 바로 밑 · 단추가 선 쪽 끝). 여기 값은 그 전에 잠깐 쓰이는 것이다. */
.zndwl{position:absolute;right:0;top:100%;margin-top:-8px;z-index:6;width:236px;max-height:min(60vh,420px);overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.6);}
.zndwl button{font:inherit;color:inherit;background:none;border:0;width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 9px;border-radius:6px;font-size:12px;text-align:left;cursor:pointer;}
.zndwl button:hover{background:rgba(255,255,255,.05);} .zndwl button.on{background:rgba(34,216,194,.1);} .zndwl button.on b{color:var(--g2);}
.zndwl b{font-weight:600;font-size:12.5px;white-space:nowrap;}
.zndwl span{display:flex;align-items:center;gap:6px;color:#c2c9d6;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .zndwl span.hot{color:#e9c46a;}
.zndwl small{font-family:var(--num);color:var(--mut);font-size:11px;}
/* 판 */
.znwrap{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:url(/zone-bg.webp?v=014819ae) center/cover no-repeat,#0c0f14;}
/* 바탕 그림을 덮는 어둠 — 그림이 밝고 복잡해 그대로 두면 글자가 묻힌다(사용자가 화면을 보며 정한 값 2026-10-11).
   PC 는 판(SVG)의 막이 한다: 위 45% → 맨 밑 92%(zone.js 의 znscr — 밑에 회차 넘기기가 있다). 폰은 그 막이 없어 여기서 판 전체에 60%.
   못 받으면 색 바탕(#0c0f14)이 남는다. */
#zonepanel:not(.wide) .znwrap{background:linear-gradient(rgba(5,7,10,.6),rgba(5,7,10,.6)),url(/zone-bg.webp?v=014819ae) center/cover no-repeat,#0c0f14;}
.znsvg{display:block;width:100%;height:auto;font-family:var(--sans);}
.znsvg [data-z],.znsvg [data-r],.znsvg [data-nav],.znsvg [data-def],.znsvg [data-retry],.znsvg [data-go]{cursor:pointer;}
.znin{transform-box:fill-box;transform-origin:center;transform:scale(.975);}
.znhl{opacity:0;transition:opacity .12s;pointer-events:none;} .znhl.on{opacity:1;}
.znstamp{transform:rotate(-14deg);transform-box:fill-box;transform-origin:center;}
@media (prefers-reduced-motion:no-preference){
  /* 접전 알약 — 레이드의 «토벌 중»(.bstat.alive)과 같은 숨쉬기: 1.7초 · 불투명도 1 ↔ .45 */
  .znhot{animation:znHot 1.7s ease-in-out infinite;} @keyframes znHot{0%,100%{opacity:1}50%{opacity:.45}}
  /* 접전 땅 — 진행 중인 회차를 열 때마다 세 번 밝아졌다 돌아온다(2026-10-11). 어디가 접전인지 지도를 훑지 않고도 눈에 들어오게. 꺼지는 것이 아니라 밝아진다(지도가 번쩍이지 않게).
     끝나면 제 값(fill-opacity 속성)으로 돌아간다. 움직임을 줄인 기기에서는 안 깜빡인다(이 블럭 밖). */
  .znblink{animation:znBlink .4s ease-in-out 3;} @keyframes znBlink{50%{fill-opacity:.82}}
  .znwv{animation:znWv 2.8s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center top;} @keyframes znWv{from{transform:skewX(-4deg)}to{transform:skewX(4deg)}}
  .znring{animation:znRing 2s ease-out infinite;transform-box:fill-box;transform-origin:center;} @keyframes znRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
  .znstamp.go,.znstampn.go{animation:znStamp .55s cubic-bezier(.2,1.5,.4,1) .45s both;}
  @keyframes znStamp{0%{opacity:0;transform:rotate(-34deg) scale(3)}55%{opacity:1;transform:rotate(-12deg) scale(.9)}75%{transform:rotate(-15deg) scale(1.06)}100%{opacity:1;transform:rotate(-14deg) scale(1)}}
  .znsk,.znskb{animation:znSk 1.2s ease-in-out infinite alternate;} @keyframes znSk{from{opacity:.55}to{opacity:1}}
  .znspin,.znwrap div.znld i{animation:znSpin .9s linear infinite;} @keyframes znSpin{to{transform:rotate(360deg)}}
  .znst .l b i{animation:znDot 1.4s ease-in-out infinite;} @keyframes znDot{50%{opacity:.25}}
}
/* 올리면 뜨는 창(넓은 화면) — 나라: 초상이 창을 채우고 아래로 어두워진다 · 회차: 작은 지도와 바뀐 나라. */
.zntip{position:absolute;z-index:5;width:264px;background:#10141a;border:1px solid #3b424d;border-radius:12px;padding:12px 14px;box-shadow:0 14px 34px rgba(0,0,0,.6);pointer-events:none;font-size:12.5px;line-height:1.5;color:#c2c9d6;}
.zntip.img{width:300px;padding:0;overflow:hidden;color:#d3d9e3;}
.zntip.img .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.zntip.img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,20,26,0) 26%,rgba(16,20,26,.72) 50%,rgba(16,20,26,.93) 66%,rgba(16,20,26,.97) 100%);}
.zntip.img .in{position:relative;z-index:2;padding:232px 14px 14px;}
.zntip .th{display:flex;align-items:center;gap:7px;margin-bottom:9px;} .zntip .th b{font-size:16px;font-weight:800;color:#fff;margin-right:auto;}
.zntip.img .th{margin-bottom:10px;flex-wrap:wrap;} .zntip.img .th b{font-size:20px;font-weight:800;flex:1 0 100%;margin:0 0 3px;text-shadow:0 2px 10px rgba(0,0,0,.8);}
#zonepanel .tg{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line2);white-space:nowrap;}
#zonepanel .tg.hot{color:var(--zhot);box-shadow:inset 0 0 0 1px var(--zhot);}
.zntip.img .tg,.znzc .tg{color:#dfe5ee;background:rgba(10,13,18,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}
#zonepanel .zr{display:grid;grid-template-columns:minmax(44px,auto) minmax(0,1fr) 66px;gap:8px;align-items:center;padding:3px 0;}
#zonepanel .zr span:first-child{color:var(--k);font-weight:700;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#zonepanel .zr .n{text-align:right;font-family:var(--num);font-weight:700;color:#fff;white-space:nowrap;}
#zonepanel .zb{height:8px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden;} #zonepanel .zb i{display:block;height:100%;background:var(--k);border-radius:9px;}
/* 게이지 안의 %(2026-10-12) — 글자가 들어가게 높이를 15px 로. 막대가 길면 막대 안 오른쪽 끝에 어두운 글자(.znpin), 짧으면 막대 바로 오른쪽에 밝은 글자(.znpout).
   이름을 zn… 으로 묶었다 — .in · .top · .now 같은 짧은 이름은 이미 있는 규칙(.znzc .in · 위 막대의 .top)에 걸린다(시안에서 표가 깨졌다). */
#zonepanel .zb.znpc{height:15px;position:relative;}
#zonepanel .zb.znpc em{position:absolute;top:0;line-height:15px;font-style:normal;font-size:10.5px;font-weight:700;font-family:var(--num);white-space:nowrap;}
#zonepanel .zb.znpc em.znpin{padding-right:6px;color:#0b0f15;} #zonepanel .zb.znpc em.znpout{padding-left:6px;color:#dfe5ee;}
#zonepanel .ld{margin-top:6px;color:var(--zhot);font-weight:700;}
#zonepanel .tf{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14);color:#aab4c5;} #zonepanel .tf b{color:#dfe5ee;font-weight:600;font-family:var(--num);}
/* 좁은 화면 — 상태 줄 · 진영 셋 · 지도 · 회차 넘김 */
/* 좁은 틀의 판 · 카드는 화면 폭을 다 쓴다(2026-10-13 사용자 — 태블릿 폭에서 640px 에 멈춰 가운데 서던 것을 푼다: 블럭의 머리 · 시즌 단추 · 안내 줄은 화면 폭인데 지도 · 표만 안쪽이라 줄이 안 맞았다). */
.znst{display:flex;justify-content:space-between;align-items:flex-end;padding:12px 14px 10px;min-height:68px;}
.znst .l b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--zhot);} .znst .l b.off{color:#aab4c5;} .znst .l b i{width:8px;height:8px;border-radius:50%;background:var(--zhot);display:block;}
.znst .l span{font-size:12.5px;color:#cfd6e2;} .znst .l span.znen{display:block;margin-top:2px;font-size:12px;color:#aab4c5;}
#zonepanel a.zngo{cursor:pointer;} #zonepanel a.zngo:focus-visible{outline:2px solid #fff;outline-offset:2px;} .znst .l span strong{color:#fff;font-weight:800;}
.znst .r{text-align:right;line-height:1.25;} .znst .r b{font-family:var(--num);font-size:24px;font-weight:700;color:#fff;} .znst .r em{display:block;font-style:normal;font-size:10.5px;color:var(--mut);} .znst .r em.late{color:#e9a23b;}
.znback{font:inherit;height:30px;padding:0 12px;border-radius:15px;background:rgba(11,15,21,.85);border:1px solid var(--zhot);color:var(--zhot);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.znsc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 10px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);}
.znsc>div{position:relative;padding:9px 6px;text-align:center;min-width:0;} .znsc>div+div{border-left:1px solid rgba(255,255,255,.1);}
.znsc .tn{font-size:13px;font-weight:800;color:var(--k);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.znsc .n{font-family:var(--num);font-size:32px;font-weight:700;line-height:1.1;color:#fff;}
.znsc .tks{display:flex;gap:3px;justify-content:center;margin:3px 0 4px;} .znsc .tks i{width:var(--w,13px);height:4px;border-radius:2px;background:rgba(255,255,255,.2);display:block;} .znsc .tks i.on{background:var(--k);}
.znsc small{display:block;font-size:10.5px;color:#aab4c5;white-space:nowrap;} .znsc small b{color:#fff;} .znsc small.coin{color:#f0cc22;font-family:var(--num);font-weight:700;}
/* 진영 넷(2026-10-16) — 칸이 좁아 글자 · 숫자를 조금 줄인다(390 에서 칸 85px 남짓) */
.znsc.n4>div{padding:9px 3px;} .znsc.n4 .tn{font-size:12px;} .znsc.n4 .n{font-size:27px;}
/* 진영 다섯부터 — 목록형(한 줄에 한 진영 · 몇 개든 같은 모양. ui/zone.js 의 LIST_FROM). 이름 · 눈금 · 나라 수가 한 줄, 밑에 보상(왼쪽) · 왕(오른쪽) */
.znsc.znlist{display:block;}
.znsc.znlist>div{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:7px 4px 6px;text-align:left;}
.znsc.znlist>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.1);}
.znsc.znlist .tks{justify-content:flex-start;margin:0;} .znsc.znlist .n{font-size:22px;line-height:1;text-align:right;min-width:24px;}
.znsc.znlist .sub{grid-column:1/4;display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0;margin-top:3px;}
.znsc.znlist .sub small.znpay{justify-content:flex-start;} .znsc.znlist .sub small.king{min-width:0;flex:0 1 auto;text-align:right;}
.znsc.znlist .znstampn{right:36px;top:-2px;font-size:15px;border-width:2.5px;padding:1px 6px 0 7px;outline-offset:-5px;}
/* 목록형의 서랍(2026-10-16 사용자) — 접으면 진영 모두가 한 줄 요약(.znsum — 색 점 · 이름 앞 네 글자 · 나라 수 · 1등), 펼치면(.open) 진영마다 한 줄 */
.znsc.znlist:not(.open)>div{display:none;} .znsc.znlist.open>.znsum+div{border-top:1px solid rgba(255,255,255,.1);}
.znsum{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;width:100%;margin:0;padding:10px 34px 10px 6px;position:relative;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.znsum .zc{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;} .znsum .zc b{font-size:12px;font-weight:800;color:var(--k);}
.znsum .zc em{font-style:normal;font-family:var(--num);font-size:17px;font-weight:700;color:#fff;line-height:1;}
.znsum .zc u{text-decoration:none;font-size:10px;font-weight:800;color:var(--zhot);border:1.5px solid var(--zhot);border-radius:4px;padding:0 3px;line-height:14px;}
.znsum .znchev{position:absolute;right:10px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid #aab4c5;border-bottom:2px solid #aab4c5;transform:rotate(45deg);transition:transform .2s;}
.znsc.znlist.open .znchev{transform:rotate(225deg);margin-top:-2px;} .znsum:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:6px;}
/* ── 보상 줄(2026-10-13) — 재화마다 아이콘 + 숫자, 숫자는 그 재화의 색(글자에 직접 칠한다). 점수판(PC · 폰) · 순위표의 구간 머리 · 발수 보너스가 같이 쓴다. ──
   한 줄에 나란히 서고(.znpay), 넘치는지는 화면이 잰다(ui/zone.js 의 fitRw): 넘치면 줄인 글(.znk — 160k), 그래도 넘치면 두 줄(.zn2).
   아이콘은 폭 · 높이를 못 박는다(받는 동안 줄이 안 들썩인다). 못 받으면 감춘다 — 숫자와 색은 남는다. 모르는 재화는 🎁(i.znrwi). */
.znpay{display:flex;align-items:center;gap:3px 10px;white-space:nowrap;overflow:hidden;min-width:0;font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;}
.znpay.zn2{flex-wrap:wrap;} .znpay .znbr{flex:0 0 100%;height:0;}      /* .znbr — 줄을 끊는 자리(점수판의 세 칸이 같은 데서 꺾인다) */
.znrw1{display:inline-flex;align-items:center;gap:4px;flex:none;} .znrw1 b{font-weight:700;color:inherit;} .znrw1 u{text-decoration:none;opacity:.55;margin:0 1px;}
.znrwi{flex:none;display:block;object-fit:contain;} i.znrwi{font-style:normal;font-size:.9em;line-height:1;}
/* 넓은 화면의 점수판 — SVG 안의 한 칸(foreignObject). 글자 13px, 줄 높이 15px(두 줄이 되어도 다음 진영의 가로줄에 안 닿는다). */
#zonepanel foreignObject .znpay{font-size:13px;line-height:15px;justify-content:flex-start;}
#zonepanel foreignObject.znfs .znpay{font-size:11.5px;line-height:13px;}      /* 진영이 다섯 넘게 쌓인 점수판(2026-10-16) — 줄 사이가 좁다 */
/* 좁은 화면의 점수판 — 칸의 가운데. 세 칸이 같이 두 줄이 되면(.zn2) 한 줄짜리 칸도 두 줄 높이를 지켜 밑의 왕 줄이 나란히 선다. */
.znsc small.znpay{display:flex;justify-content:center;gap:1px 7px;font-size:10.5px;line-height:15px;color:inherit;} .znsc small.znpay b{color:inherit;}
.znsc small.znpay .znrw1{gap:2px;} .znsc small.znpay.zn2{min-height:31px;align-content:flex-start;}
/* 진영의 왕 — 흰 닉네임 앞에 왕관. 칸이 좁아(폭 320 에서 100px 남짓) 긴 닉네임은 말줄임한다. 투표 중(.vote)은 회색 글자만. */
.znsc small.king{color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis;} .znsc small.king i{font-style:normal;font-size:9.5px;margin-right:3px;} .znsc small.king.vote{color:#aab4c5;font-weight:400;} .znsc small.king.none{color:#5f6b7d;font-weight:400;}
/* 폰의 «1등» 도장 — PC 의 도장과 같은 크기(2026-10-11 사용자: «모바일을 그냥 도장크기를 pc랑 똑같이 · 좀더 안쪽으로»). PC 는 SVG 74×38 을 1.32 배 · 판 배율 .9 → 화면에서 88×45px · 글자 26px. 폰은 거기서 «아주 살짝» 줄였다(글자 23.5px — 같은 날 사용자). 이름을 좀 가려도 된다(사용자).
   칸(폰 390 에서 112px)보다 조금 작은 크기라 진영 이름 위에 걸쳐 찍힌다 — 도장의 바탕이 비쳐 이름은 그 밑으로 보인다. */
.znstampn{position:absolute;right:-5px;top:-8px;font-size:23.5px;font-weight:800;letter-spacing:.06em;color:var(--zhot);border:3.5px solid var(--zhot);border-radius:9px;padding:3px 8px 1px 10px;line-height:1.25;outline:1.2px solid var(--zhot);outline-offset:-7px;transform:rotate(-14deg);background:rgba(233,196,106,.1);opacity:.95;}
.znstp{display:flex;flex-direction:column;align-items:center;gap:7px;padding:2px 0 14px;min-height:66px;}
.znstp .pill{display:flex;align-items:center;height:27px;border-radius:13.5px;background:rgba(11,15,21,.88);border:1px solid rgba(255,255,255,.22);} .znstp .pill.now{border-color:var(--zhot);}
.znstp .pill button{font:inherit;width:30px;height:27px;background:none;border:0;font-size:15px;line-height:1;color:#fff;cursor:pointer;} .znstp .pill button:disabled{opacity:.25;cursor:default;}
.znstp .pill span{font-size:11px;font-weight:700;color:#dfe5ee;padding:0 1px;white-space:nowrap;} .znstp .pill span b{font-family:var(--num);font-size:13px;font-weight:700;color:#fff;} .znstp .pill.now span b{color:var(--zhot);}
.znstp .pill em{font-style:normal;font-family:var(--num);font-size:11.5px;font-weight:700;padding:0 3px 0 7px;color:#fff;} .znstp .pill em.e{font-family:var(--sans);font-size:10.5px;color:var(--mut);font-weight:600;}
.znstp .tks{display:flex;gap:4px;} .znstp .tks button{width:20px;height:16px;padding:6px 0;background:none;border:0;display:block;cursor:pointer;} .znstp .tks button:disabled{cursor:default;}
.znstp .tks button i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;}
.znstp .tks button.d i{background:rgba(255,255,255,.75);} .znstp .tks button.c i::after{content:"";position:absolute;inset:0 calc(100% - var(--p,0%)) 0 0;background:var(--zhot);}
.znstp .tks button.x i{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);} .znstp .tks button.f i{background:var(--zhot);}
.znstp .tks button.s i{box-shadow:0 0 0 1.5px var(--g2);} .znstp .tks button.s.c i{box-shadow:0 0 0 1.5px var(--zhot);}
.znstp p{margin:0;font-size:11px;line-height:16px;color:#6b7486;}
.znnt{padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:850/690;}   /* 지도와 같은 꼴 — 안내로 바뀌어도 판의 높이가 그대로다 */
.znghost{visibility:hidden;} .znnt b{display:block;font-size:17px;font-weight:800;color:#fff;} .znnt p{margin:6px 0 0;font-size:13px;color:#aab4c5;}
.znnt a.zngo{display:inline-flex;align-items:center;text-decoration:none;} .znnt button,.znnt a.zngo{font:inherit;margin-top:16px;height:38px;padding:0 18px;border-radius:19px;background:rgba(11,15,21,.88);border:1px solid var(--g2);color:var(--g2);font-size:13.5px;font-weight:700;cursor:pointer;}
.znskb{background:rgba(255,255,255,.09);border-radius:8px;display:block;}
/* 받는 중 — 판 한가운데의 도는 고리(2026-10-13). 좁은 화면은 감춘 틀(.znhid — 자리만 차지한다) 위에 얹는다. 넓은 화면은 SVG 안의 원(.znspin)이다. */
.znhid{visibility:hidden;}
.znwrap div.znld{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;white-space:nowrap;}
.znwrap div.znld i{width:40px;height:40px;box-sizing:border-box;border-radius:50%;border:4px solid rgba(255,255,255,.14);border-top-color:#2fe0c8;}
.znwrap div.znld b{font-size:13px;font-weight:600;color:#e6ebf3;}
.znspin{transform-box:fill-box;transform-origin:center;}
/* 누른 나라의 카드(좁은 화면) — 초상이 왼쪽에 크게, 오른쪽으로 서서히 어두워진다 */
.znzc{position:relative;margin-top:10px;border:1px solid #3b424d;border-radius:14px;overflow:hidden;background:#10141a;font-size:12.5px;line-height:1.5;color:#d3d9e3;min-height:176px;}
.znzc .bg{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(90deg,#000 52%,transparent 99%);mask-image:linear-gradient(90deg,#000 52%,transparent 99%);}      /* 사진의 오른쪽 끝이 선으로 보이지 않게 흐린다(2026-10-15 사용자) */
/* 글은 사진 바로 옆에서 시작한다(2026-10-14 사용자 — 가로 폰처럼 카드가 넓으면 40% 가 사진보다 훨씬 오른쪽이라 글이 멀리 떨어졌다).
   --zcw = 사진의 실제 폭(card() 가 잰다 · 재기 전에는 146 — 카드 185 높이의 얼굴 그림). 세로 폰(390)은 40% 와 사진 폭이 같아 모양이 그대로다(min). */
.znzc::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(16,20,26,0) 0,rgba(16,20,26,.78) min(30%,calc(var(--zcw,146px) * .75)),rgba(16,20,26,.96) min(44%,calc(var(--zcw,146px) * 1.1)));} .znzc.noimg::before{display:none;}
.znzc .in{position:relative;z-index:2;padding:12px 14px 12px min(40%,calc(var(--zcw,146px) - 3px));} .znzc.noimg .in{padding-left:14px;}
.znzc h4{margin:0;font-size:18px;font-weight:800;color:#fff;padding-right:28px;}
.znzc .x{position:absolute;z-index:3;right:6px;top:4px;width:36px;height:36px;background:none;border:0;font-size:18px;color:#aab4c5;cursor:pointer;}
.znzc .tgs{display:flex;gap:5px;margin:4px 0 9px;min-height:19px;}
/* 아주 좁은 폰(폭 340 이하) — 카드의 사진이 차지하는 폭을 줄인다(40% → 28%). 게이지가 32px 뿐이라 % 가 안 들어갔다(사용자 결정 2026-10-12 «사진을 좁혀 게이지를 넓힌다»). */
@media(max-width:340px){ .znzc .in{padding-left:28%;} .znzc::before{background:linear-gradient(90deg,rgba(16,20,26,0) 0,rgba(16,20,26,.78) 20%,rgba(16,20,26,.96) 31%);} }
.znzc .zr{grid-template-columns:minmax(40px,auto) minmax(0,1fr) 60px;gap:6px;} .znzc .zb{height:7px;} .znzc .zb.znpc{height:15px;} .znzc .zb.znpc em{font-size:10px;} .znzc .zb.znpc em.znpin{padding-right:5px;} .znzc .zb.znpc em.znpout{padding-left:5px;} .znzc .tf{margin-top:7px;padding-top:7px;font-size:11.5px;}
.znhint{margin:10px 4px 0;font-size:12px;color:var(--mut);text-align:center;}
/* 순위표 — 끝난 시즌만. 넓게는 두 단(30줄씩), 좁게는 한 단. */
.znsec{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 4px;} .znsec h2{margin:0;font-size:17px;font-weight:800;} .znsec span{color:var(--mut);font-size:12.5px;}
/* ── 진영별 누적 딜(2026-10-12) — 지도 밑, 순위표 앞. 누적 막대(.zntot) + 회차마다 넣은 딜의 표(.znrt). ──
   막대의 이름 칸 · 표의 첫 칸은 폭을 묶는다(긴 진영 이름은 말줄임). 숫자는 자리가 맞게(tabular-nums).
   표: 가장 많이 넣은 칸 .znmx(굵고 밝게) · 진행 중인 회차 .zncur(머리 노랑 · 숫자 기울임) · 넘겨 보는 회차 .znsee(옅은 바탕).
   좁은 화면에서 표가 넘치면 표만 옆으로 민다(.zndx) — 진영 이름 칸은 왼쪽에 붙는다(sticky). 페이지는 안 밀린다. */
.zndmg{border:1px solid var(--line2);border-radius:14px;background:var(--panel);padding:18px 22px 14px;margin:10px 0 0;min-width:0;}
.zndmg.znsk{height:292px;padding:0;}
.zntot{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:9px 14px;align-items:center;}
.zntot > b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:132px;} .zntot strong{font-size:14px;color:var(--ink);font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.znbar{position:relative;height:10px;border-radius:5px;background:#1b2028;overflow:hidden;min-width:24px;} .znbar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transition:width .6s cubic-bezier(.2,.7,.2,1);}
@media (prefers-reduced-motion:reduce){ .znbar i{transition:none;} }
/* ── 전체 화면(2026-10-14 · PC 만) — 판 오른쪽 아래의 ⛶(.znfull) → 쪽을 다 덮는 창(.znfo). 보상 창(.znrp 880)보다 밑 ── */
.znfull{position:absolute;right:14px;bottom:14px;z-index:4;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(8,10,14,.72);display:grid;place-items:center;color:#e8ebf1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.4);padding:0;}
.znfull:hover{border-color:rgba(255,255,255,.5);} .znfull svg{width:18px;height:18px;} .znfull[hidden]{display:none;}
html.znfo-on,html.znfo-on body{overflow:hidden;}
.znfo{position:fixed;inset:0;z-index:870;background:#07090d;display:flex;flex-direction:column;}
.znfo[hidden]{display:none;}
/* 위 줄(2026-10-15 사용자 «상단 줄이 너무 많이 차지 — 절반으로» → «버튼 크기가 오바 — 조정 · 앞쪽 gap 조금») — 54 → 36px · 앞 여백 20. 시즌 단추는 0.9 배로 */
.znfoh{display:flex;align-items:center;gap:10px;height:30px;flex:none;border-bottom:1px solid #1d232d;color:#e8ebf1;padding:0 12px 0 20px;}      /* 30px — 4차(«1번 정도») */
/* 시즌 단추 · 지금 보는 것은 지도 블럭의 왼쪽 위에 겹친다(7차 «지도 블럭 상단 좌측에 · 버튼은 본래 크기로») — 위 줄에는 안내 글과 ✕ 만.
   목록(서랍)은 보통 크기로 단추 바로 밑에. «점령전» 글자는 걷었다(6차 — 점수판에 있다) */
.znfo .mp > .znfotl{position:absolute;left:18px;top:14px;z-index:5;display:flex;align-items:center;gap:12px;}
.znfotl .znslot{position:relative;display:flex;align-items:center;flex:none;} .znfotl .zndwl{margin-top:4px;right:auto;left:0;}
.znfotl .now{font-size:12.5px;color:#cfd6e2;text-shadow:0 1px 3px rgba(0,0,0,.85);white-space:nowrap;} .znfotl .now b{color:#e9c46a;font-weight:700;} .znfoh .znslot{position:relative;display:flex;align-items:center;flex:none;}      /* .slot 은 다른 화면의 이름이라 안 쓴다(flex:1 이 걸려 단추가 가운데로 갔다) */
.znfoh .now{font-size:12px;color:#9aa3b2;} .znfoh .now b{color:#e9c46a;font-weight:700;}
/* 최근 갱신(2026-10-15 사용자 «전체 화면일 때 갱신 시각이 없어진다» → «지도 블럭 왼쪽 아래에») — 보통 화면의 #znupd 와 같은 말 · 같은 때(진행 중인 시즌만). 판 위에 겹친다 */
.znfo .mp > .upd{position:absolute;left:18px;bottom:14px;z-index:2;font-size:12px;color:#9aa3b2;white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.8);} .znfo .mp > .upd[hidden]{display:none;}
.znfo .mp > .upd b{color:#dfe5ee;font-weight:600;font-variant-numeric:tabular-nums;} .znfo .mp > .upd.late b{color:#e9c46a;}
.znfoh small{margin-left:auto;color:#6f7888;font-size:11px;}
.znfoh .x{width:24px;height:24px;border-radius:7px;border:1px solid #2a3240;background:none;display:grid;place-items:center;color:#cfd6e2;font-size:13px;cursor:pointer;padding:0;}
.znfob{flex:1;min-height:0;display:flex;gap:18px;padding:8px;}      /* 지도 블럭과 오른쪽 칸 사이 18(6차) */
.znfo .mp{flex:1;min-width:0;position:relative;}
.znfo .mp .znwrap{position:absolute;inset:0;margin:0;background:linear-gradient(rgba(5,7,10,.45),rgba(5,7,10,.45) 70%,rgba(5,7,10,.9)),url(/zone-bg.webp?v=014819ae) center/cover no-repeat,#0c0f14;}
.znfo .mp #znboard,.znfo .mp .znsvg{width:100%;height:100%;} .znfo .mp .znsvg > rect[fill="url(#znscr)"]{display:none;}
.znfo .mp .znfull{display:none;}
/* 오른쪽 칸 — 창이 낮으면(디스플레이 175% · 브라우저 확대) 칸 전체를 비율로 줄인다(zoom · ui/zone.js 의 fitSide — 토스증권처럼, 2026-10-14 사용자). 스크롤이 안 생긴다.
   너무 낮아 0.55 배 아래로 가야 하면 그때만 칸 안에서 내린다 — 막대는 은은하게(얇고 둥근 옅은 손잡이만 · 길 · 화살표 없음 · 올리면 조금 밝아진다) */
.znfo .sd{zoom:1.12;width:360px;flex:none;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain;}
.znfo .sd::-webkit-scrollbar{width:6px;} .znfo .sd::-webkit-scrollbar-track{background:transparent;} .znfo .sd::-webkit-scrollbar-button{display:none;}
.znfo .sd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px;} .znfo .sd:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);}
@supports not selector(::-webkit-scrollbar){ .znfo .sd{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;} }
.znfo .sd .zndec{margin:0;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;} .znfo .sd .zndec b{font-size:22px;}
.znfo .sd .znsec{margin:2px 0 0;} .znfo .sd .zndmg{margin:0;padding:14px 14px 12px;}
.znfo .sd .zntot{gap:12px 10px;} .znfo .sd .zntot > b{max-width:70px;}
.znfo .znvt{margin-top:14px;} .znfo .znvt table{font-size:12.5px;}      /* 보통 화면의 표와 같은 크기(2026-10-15 사용자) */ .znfo .znvt tr{height:var(--zr,34px);}
.znfo .znvt th,.znfo .znvt td{padding:4px 8px;text-align:right;}
.znfo .znvt th:first-child{text-align:left;color:#8f98a8;font-weight:600;font-size:12.5px;position:static;box-shadow:none;width:auto;padding-left:0;}
.znfo .znvt tr:first-child th{font-size:12px;} .znfo .znvt th[style*="--k"]{color:var(--k);}
.znfo .znvx{overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;}      /* 진영이 많아 표가 칸보다 넓으면 표만 옆으로(2026-10-16) */      /* 진영 색은 화면이 칸마다 --k 로 준다(2026-10-16 — 진영이 몇 개든 · 게임 색) */
.znfo .znvt tr.znsee th,.znfo .znvt tr.znsee td{background:rgba(255,255,255,.06);} .znfo .znvt tr.zncur th{color:#e9c46a;} .znfo .znvt tr.znyet th{color:#4b5464;}
#zonepanel.wide .znfo .znvt th:not(:first-child),#zonepanel.wide .znfo .znvt td:not(:first-child){text-align:right;}
/* 감쇠 띠(2026-10-14) — 지도 바로 밑, 누적 딜 블럭 앞. 보는 회차의 감쇠(×0.65) */
.zndec{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:10px 0 0;padding:10px 16px;border-radius:12px;border:1px solid rgba(233,196,106,.42);background:linear-gradient(90deg,rgba(233,196,106,.11),rgba(233,196,106,.02));font-size:13px;color:var(--ink);}
.zndec b{color:#e9c46a;font-size:17px;font-weight:800;font-family:var(--num);margin-left:2px;} .zndec small{color:var(--mut);font-size:12px;}
#zonepanel:not(.wide) .zndec{padding:9px 12px;font-size:12.5px;} #zonepanel:not(.wide) .zndec b{font-size:16px;}
.zndmg b[style*="--k"],.zndmg td[style*="--k"]{color:var(--k);} .znbar i[style*="--k"]{background:var(--k);}      /* 진영 색 — 칸마다 --k(2026-10-16) */
.znrt{margin-top:16px;border-top:1px solid var(--line2);padding-top:12px;} .zncap{font-size:12px;color:var(--ink2);margin-bottom:6px;} .znunit{font-size:11.5px;color:var(--mut);margin-top:6px;text-align:right;}
.zndx{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;}      /* 밑의 스크롤 막대는 옅게(2026-10-15 사용자) — 밀 수 있다는 표시는 음영이 맡는다 */
.zndx::-webkit-scrollbar{height:4px;} .zndx::-webkit-scrollbar-track{background:transparent;} .zndx::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}
/* 밀리는 표의 가장자리 음영(2026-10-15 사용자) — 이름 칸 밑에 숨은 회차가 있으면 그 오른쪽에 그림자(.l), 오른쪽에 더 있으면 끝이 흐려진다(.r · .zndf). 안 밀리면 없다 */
.zndf{position:absolute;top:0;bottom:0;right:0;pointer-events:none;opacity:0;width:40px;background:linear-gradient(to right,rgba(20,23,28,0),var(--panel) 75%);}
.zndr.r .zndf{opacity:1;}
.zndl{position:absolute;top:0;bottom:0;left:0;width:26px;pointer-events:none;z-index:2;opacity:0;background:linear-gradient(to right,var(--panel) 25%,rgba(20,23,28,.6) 60%,rgba(20,23,28,0));}      /* 숫자 표의 왼쪽 끝(= 이름 칸 바로 옆) — 앞 회차가 그 밑에 숨었다. 서서히 켜지는 움직임은 뺐다(2026-10-15) — 회차를 넘길 때마다 표를 새로 그려, 켜지는 사이 숨은 번호가 번쩍였다 */
.zndr.l .zndl{opacity:1;}
.zndmg table{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--num);font-variant-numeric:tabular-nums;}
.zndmg th,.zndmg td{padding:7px 10px;text-align:right;white-space:nowrap;} .zndmg th{color:var(--mut);font-weight:600;font-family:inherit;} .zndmg th i{font-style:normal;} .zndmg tr + tr{border-top:1px solid #1b2028;} .zndmg td{color:#8a94a6;}
.zndmg :where(table:not(.znnum)) th:first-child,.zndmg :where(table:not(.znnum)) td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left;font-weight:700;font-family:inherit;padding-left:0;width:1%;}
.zndmg :where(table:not(.znnum)) td:first-child span{display:block;max-width:108px;overflow:hidden;text-overflow:ellipsis;}
/* 옆으로 민 표 — 이름 칸의 오른쪽에 바탕색을 조금 번지게 해, 그 밑으로 들어가는 숫자가 뚝 잘려 보이지 않게 한다 */
/* 회차 표(가로) — 이름 칸(.znnm)은 밀리는 표(.zndx 의 .znnum) 밖에 따로 선다(2026-10-15 사용자 «진영별 라인은 고정»). 두 표의 줄 높이를 같게 못 박아 줄이 어긋나지 않게 */
.zndw{display:flex;align-items:flex-start;} .znnm{width:auto !important;flex:none;} .zndr{position:relative;flex:1;min-width:0;} .zndmg .znnm tr + tr{border-top:0;}      /* 이름 칸에는 가로 줄을 안 긋는다 — 줄은 회차 칸에만(2026-10-15 사용자. 세로 줄은 넣어 봤다가 뺐다) */
.zndw tr{height:34px;} #zonepanel:not(.wide) .zndw tr{height:29px;}
.znnum th{min-width:calc(var(--cl,4) * 1ch + 20px);} #zonepanel:not(.wide) .znnum th{min-width:calc(var(--cl,4) * 1ch + 8px);}      /* 빈 회차 칸도 숫자 칸만큼(--cl 은 가장 긴 숫자의 글자 수) */
.zndmg th.znyet{color:#4b5464;}      /* 아직 안 온 회차 — 머리만 흐리게 서고 칸은 빈다 */
.zndmg td.znmx{color:#fff;font-weight:700;} .zndmg th.zncur{color:#e9c46a;}      /* 진행 중인 회차 — 머리만 노랑(기울임은 걷었다 · 2026-10-15 사용자) */ .zndmg th.znsee,.zndmg td.znsee{background:rgba(255,255,255,.055);}
#zonepanel .zndmg th:not(:first-child),#zonepanel .zndmg td:not(:first-child),#zonepanel .zndmg .znnum th,#zonepanel .zndmg .znnum td{text-align:center;}      /* 회차 칸은 가운데 — PC(2026-10-14 사용자) · 폰도(2026-10-15 사용자) */
#zonepanel:not(.wide) .zndmg{padding:14px 12px 10px;} #zonepanel:not(.wide) .zndmg.znsk{height:246px;padding:0;}
#zonepanel:not(.wide) .zntot{gap:8px 10px;} #zonepanel:not(.wide) .zntot > b{font-size:12.5px;max-width:92px;} #zonepanel:not(.wide) .zntot strong{font-size:13px;}
#zonepanel:not(.wide) .zndmg table{font-size:11px;} #zonepanel:not(.wide) .zndmg th,#zonepanel:not(.wide) .zndmg td{padding:6px 4px;} #zonepanel:not(.wide) .zndmg th i{display:none;}
#zonepanel:not(.wide) .zndmg :where(table:not(.znnum)) th:first-child,#zonepanel:not(.wide) .zndmg :where(table:not(.znnum)) td:first-child{padding-right:6px;} #zonepanel:not(.wide) .zndmg td:first-child span{max-width:54px;}
/* ── 신청 기간의 «이번 시즌 보상»(2026-10-13) — 지도 밑의 두 블럭. 판과 같은 폭 · 같은 자리(좁은 틀은 640px 에서 멈춰 가운데). ──
   .znof  등수마다의 카드(진영이 셋이면 셋, 둘이면 둘 — --n). 넓으면 보상을 한 줄에 나란히, 좁으면 재화를 한 줄에 하나씩(카드의 폭이 110px 남짓이라 «200,000 · 100,000» 이 한 줄에 안 든다).
   .znpz  순위 보상의 표 — 구간마다 한 줄(왼쪽 순위 · 오른쪽 보상). 넓으면 두 단(.two). */
.znsec.znw{flex-wrap:wrap;gap:2px 12px;} .znsec.znw h2{white-space:nowrap;} .znsec.znw span{margin-left:auto;text-align:right;}
.znof{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:10px;margin-top:10px;}
.znof > div{border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:13px 10px 14px;text-align:center;min-width:0;}
.znof > div > b{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:7px;} .znof > div:first-child > b{color:#e9c46a;}
.znof .znpay{justify-content:center;font-size:14px;gap:3px 16px;} .znno{color:#5f6b7d;font-family:var(--num);}
.znpz{margin-top:6px;} .znpz.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;}
.znpz1{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;min-width:0;}
.znpz1 > span{flex:none;white-space:nowrap;color:var(--ink2);font-family:var(--num);} .znpz1 .znpay{flex:1;justify-content:flex-end;font-size:13px;gap:2px 16px;}
#zonepanel:not(.wide) .znof{gap:6px;margin-top:8px;} #zonepanel:not(.wide) .znof > div{padding:10px 4px 11px;} #zonepanel:not(.wide) .znof > div > b{font-size:12px;margin-bottom:5px;}
#zonepanel:not(.wide) .znof .znpay{flex-direction:column;align-items:center;font-size:12.5px;gap:2px;} #zonepanel:not(.wide) .znof .znpay.zn2{flex-wrap:nowrap;}
#zonepanel:not(.wide) .znpz1{padding:8px 4px;font-size:12.5px;gap:8px;} #zonepanel:not(.wide) .znpz1 .znpay{font-size:12.5px;gap:2px 12px;}
.znwait{border:1px dashed var(--line2);border-radius:12px;padding:22px;color:var(--mut);text-align:center;margin-top:10px;font-size:13.5px;} .znwait.tall{height:220px;border-style:solid;}
.znshr{margin:12px 0 26px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;} .znshr .t{font-size:12px;color:var(--mut);margin-bottom:9px;}
.znshr .hbar{display:flex;height:22px;border-radius:6px;overflow:hidden;gap:2px;} .znshr .hbar i{display:flex;align-items:center;justify-content:center;background:var(--k);font-style:normal;font-family:var(--num);font-size:12px;font-weight:700;color:#0a0b0e;min-width:0;overflow:hidden;}
.znshr .hleg{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:var(--mut);flex-wrap:wrap;} .znshr .hleg>span{display:flex;align-items:center;gap:6px;white-space:nowrap;} .znshr .hleg b{font-family:var(--num);color:#c2c9d6;font-weight:600;}
.znd2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;}
#zonepanel .zrow{display:grid;grid-template-columns:44px minmax(0,1fr) 110px 150px;gap:12px;padding:9px 10px;font-size:13px;align-items:center;border-bottom:1px solid var(--line);}
#zonepanel .zrow[data-nick]{cursor:pointer;} #zonepanel .zrow[data-nick]:hover{background:rgba(255,255,255,.035);}
#zonepanel .zrow.h{color:var(--mut);font-size:11px;padding-top:8px;padding-bottom:8px;}
#zonepanel .zrow b{font-family:var(--num);color:var(--mut);font-weight:700;} #zonepanel .zrow.t1 b{color:#2b8cef;} #zonepanel .zrow.t2 b{color:var(--g2);} #zonepanel .zrow.t3 b{color:var(--g3);}
#zonepanel .zrow .nk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;} #zonepanel .zrow .tm{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} #zonepanel .zrow .r{text-align:right;font-family:var(--num);white-space:nowrap;}
#zonepanel .tier{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 10px 6px;font-size:11.5px;color:var(--mut);border-bottom:1px solid var(--line2);}
/* 구간 머리의 보상 — 왼쪽 글(«4 ~ 10위 순위 보상»)은 안 꺾이고 안 잘린다. 보상은 오른쪽에 붙고, 넘치면 줄인 글 · 그래도 넘치면 두 줄(오른쪽 맞춤). 감춰 둔 푼 줄(.znsp)은 fitRw 가 세운다. */
#zonepanel .tier > span{flex:none;white-space:nowrap;} #zonepanel .tier .znpay{flex:1;justify-content:flex-end;font-size:12px;gap:2px 12px;}
#zonepanel .tier.znsp{padding-top:9px;} #zonepanel .tier.znmg + .tier.znsp{padding-top:16px;}
@media(max-width:820px){
  /* 레이드의 머리 — 전황의 하위 탭이 제목 오른쪽에 선다(랭킹의 보특 · 결특 단추와 같은 자리). */
  .wartabs.mwar{display:inline-flex;align-self:center;}
  .wartabs a,.wartabs b{font-size:13.5px;padding:7px 12px;}
  .znsub{padding:12px 0;}
  .znsea{height:29px;font-size:12.5px;}
  .zndwl{width:216px;margin-top:-6px;} .zndwl button{grid-template-columns:50px minmax(0,1fr) auto;padding:9px;}
  .znsec{margin:26px 4px 4px;} .znsec h2{font-size:16px;} .znsec span{font-size:12px;}
  .znshr{margin:10px 0 18px;padding:12px 14px;} .znshr .t{font-size:11.5px;margin-bottom:8px;} .znshr .hbar{height:20px;} .znshr .hleg{gap:6px;}
  #zonepanel .zrow{grid-template-columns:26px minmax(0,1fr) minmax(0,62px) auto;gap:8px;padding:9px 4px;font-size:13px;} #zonepanel .zrow.h{font-size:11px;} #zonepanel .zrow .tm{gap:6px;font-size:12.5px;}
  #zonepanel .tier{padding:14px 4px 6px;font-size:11px;} #zonepanel .tier b{font-size:12px;}
  .znwait{padding:18px;font-size:13px;margin-top:8px;}
}
@media(max-width:340px){ .wartabs a,.wartabs b{padding:7px 9px;font-size:13px;} .znsea{padding:0 8px;} }

/* ═══ 화면 머리 = 대시보드(2026-10-11) ═══
   위 메뉴로 들어간 화면의 머리는 모양이 하나다: 폭을 다 쓰는 그림 띠(.dash) + 큰 제목(.dasht — 메뉴 이름) + 하위 탭(.dtabs). 그것만 든다.
   본문은 그 밑, 간격을 띄운 자리에서 시작한다: 안내(.dinfo) → 고르기 줄(.drow) → 내용.
   그림은 띠 한 장이다(/dash-band.webp · 1970×342 — 사용자가 만든 것. 2026-10-11): 칼 그림을 조금 줄여 오른쪽에 붙이고 둘레를 흐리고(5) 가운데를 살짝 흐리고(1.1)
   밝기를 60% 로 누른 것. 왼쪽은 그림 안에서 이미 사이트 바탕색이라, 띠 높이에 맞춰 오른쪽 끝에 붙이기만 하면 왼쪽의 바탕과 이음매 없이 이어진다.
   그림을 못 받으면 바탕색만 남는다. 전에는 게임의 칼 그림(192px)을 두 겹(흐린 밑 + 또렷한 위 .dashart)으로 썼다(그 마크업 .dashart 도 걷었다).
   폭을 다 쓰는 법: 틀(.wrap)의 안쪽에서 좌우로 «화면 폭의 절반 − 제 폭의 절반» 만큼 밀어낸다. */
.dash{position:relative;margin:0 calc(50% - 50vw) 72px;padding:0 calc(50vw - 50%);
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg);}
/* 창이 본문의 가장 작은 폭(1120)보다 좁으면(821 ~ 1119 — 가로로 밀리는 창) 50vw 가 본문의 절반보다 작아, 바깥 여백이 «양수» 가 되고 띠가 안쪽으로 밀려 제목이 본문과 어긋난다
   (2026-10-13 — 폭 1000 안팎의 창). 그때는 쪽의 옆 여백(24px)에서 멈춘다: 띠는 쪽(1120)의 끝에서 끝까지, 제목은 본문의 왼쪽 끝. 좁은 화면(폰)은 여백이 달라 건드리지 않는다. */
@media(min-width:821px){ .dash{margin-left:min(-24px,calc(50% - 50vw));margin-right:min(-24px,calc(50% - 50vw));padding-left:max(24px,calc(50vw - 50%));padding-right:max(24px,calc(50vw - 50%));} }
.dash::before{content:"";position:absolute;inset:0;background:url(/dash-band.webp?v=aecabb90) right center/auto 100% no-repeat;}
.dash::after{content:"";position:absolute;inset:auto 0 0 0;height:110px;background:linear-gradient(180deg,transparent,rgba(10,11,14,.85));}
/* 높이는 화면마다 같다(PC 250 · 폰 176) — 탭이 없는 화면(우편함 PC)도 그만큼 선다. */
.dashin{position:relative;z-index:1;padding:84px 0 72px;min-height:250px;box-sizing:border-box;}
.dasht{margin:0 0 18px;font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink);}
/* 하위 탭 — 작게. 켜진 탭은 흰 바탕 · 검은 글자. 글자만큼만 선다(폰에서도 좌우로 꽉 채우지 않는다). */
.dtabs{display:inline-flex;border-radius:9px;background:rgba(8,10,14,.82);border:1px solid var(--line2);overflow:hidden;}
/* 하위 탭 밑의 회색 한 줄(전황 — «컨텐츠별 기록실». 2026-10-12 사용자). 대시보드의 높이는 그대로 둔다 — 줄이 드는 만큼(27px · 폰 22px) 아래 여백을 줄인다.
   제목 · 탭의 자리는 다른 메뉴와 같다(메뉴를 오갈 때 안 들썩인다). */
.dnote{margin-top:12px;font-size:14px;line-height:15px;font-weight:500;color:#8a94a6;letter-spacing:-.01em;white-space:nowrap;}
.dashin.wnote{padding-bottom:45px;}
.dtabs a{padding:8px 18px;font-size:13.5px;font-weight:800;color:var(--ink);border-right:1px solid rgba(255,255,255,.08);cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.dtabs a:last-child{border-right:0;}
.dtabs a:hover{background:rgba(255,255,255,.07);}
.dtabs a.on{background:#fff;color:#0a0c10;}
/* 탭의 다른 꼴 둘 — 전황(지금 화면은 <b>, 갈 곳은 <a>) · 우편함(단추 .mbtab). 모양은 같다. */
.dtabs[hidden]{display:none;}
.dtabs b,.dtabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;font-family:inherit;font-size:13.5px;font-weight:800;color:var(--ink);border:0;border-right:1px solid rgba(255,255,255,.08);border-radius:0;background:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dtabs b:last-child,.dtabs button:last-child{border-right:0;}
.dtabs button:hover{background:rgba(255,255,255,.07);}
.dtabs b,.dtabs button.on{background:#fff;color:#0a0c10;cursor:default;border-color:rgba(255,255,255,.08);}
/* 상세(/u/닉) — 제목 자리에 초상 · 닉네임 · 메달 셋. 머리띠(.pdhero)의 카드 모양(테두리 · 바탕 · 밑줄)은 걷는다 — 대시보드가 바탕이다.
   닉네임은 초상의 위 끝에서 10px 내려 서고, 메달 셋이 그 밑에 달린다(이름표는 초상 아래로 조금 내려온다). 초상은 88 → 118px.
   본문과의 사이는 다른 화면보다 좁다(PC 44px · 폰 26px) — 바로 밑의 블럭이 제 위 여백(36px)을 갖고 있다. */
/* 위 여백을 되돌려 위 막대 바로 밑에 붙인다(상세의 틀이 위로 36px — 폰 10px — 을 띄운다). */
.pd>.pddash{margin-top:-36px;margin-bottom:8px;}
.pddash .dashin{padding:62px 0 46px;min-height:0;}
/* PC — 띠는 창 끝까지 그대로, 그림은 «본문 폭» 에 고정(2026-10-15 사용자: 블럭으로 봤을 때의 그림이 확대 · 축소해도 안 변하는 느낌 — «그 그림의 가로폭을 고정하고, 모자란 좌우는 비슷한 톤으로»).
   ::after = 또렷한 그림 상자: 오른쪽 끝 = 본문의 오른쪽 끝(상단 메뉴의 검색창 끝과 같은 선 — 띠의 가운데 + 536px · 본문 1120 − 옆 여백 24 × 2 의 절반 · 거기서 48px 더 바깥 — 사용자 «메뉴 줄보다 살짝 더 길게»), 높이 = 띠 높이, 꼴 = 그림(1970:342).
     본문 폭 · 띠 높이가 같이 확대를 따르므로 그림의 짜임이 창 폭과 상관없이 같다(전에는 그림을 창의 오른쪽 끝에 붙여 창 폭에 따라 칼의 자리 · 잘림이 달라졌다).
   ::before = 본문 오른쪽 바깥의 메움: 그림의 오른쪽 끝(1970 의 1/40 ≈ 50화소)을 가로로 늘여 깔고 많이 흐리고 어둡게 한 뒤, 창 끝으로 갈수록 옅게(바탕색으로).
     또렷한 그림의 오른쪽 150px 는 가려(mask) 메움으로 녹인다 — 안 그러면 본문 끝에 세로 경계가 보였다(2026-10-15). 왼쪽 바깥은 그림의 왼쪽이 원래 바탕색이라 그대로 이어진다.
   밑의 어둠(지금의 ::after)은 두 층에 같이 싣는다. 폰(820 이하)은 지금 띠 그대로. 이 규칙은 위의 띠 규칙 · ::after 보다 뒤에 둔다(같은 무게라 앞이면 덮인다). */
@media(min-width:821px){
  .dash::before{inset:-30px -30px -30px calc(50% + 584px - 180px);filter:blur(30px) brightness(.62);
    background:linear-gradient(180deg,transparent calc(100% - 140px),rgba(10,11,14,.9) calc(100% - 30px)),url(/dash-band.webp?v=aecabb90) right center/calc(100% * 40) 100% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,#000 180px,#000 calc(180px + 12%),transparent 85%);mask-image:linear-gradient(90deg,#000 180px,#000 calc(180px + 12%),transparent 85%);}
  .dash::after{inset:auto;top:0;right:calc(50% - 584px);height:100%;aspect-ratio:1970/342;
    background:linear-gradient(180deg,transparent calc(100% - 110px),rgba(10,11,14,.85)),url(/dash-band.webp?v=aecabb90) center/100% 100% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 150px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 150px),transparent);}
}
.pddash .pdhero{align-items:flex-start;gap:22px;padding:0;border:0;border-radius:0;background:none;overflow:visible;}
.pddash .pdhero::after{display:none;}
.pddash .pdhero>.av{width:118px;height:118px;}
.pddash .pdwho{gap:9px;padding-top:10px;}
.pddash .pdmedals{margin:0;justify-content:flex-start;gap:14px;}
/* 우편함만 — 제목 밑의 설명 한 줄(PC). 폰에서는 탭이 그 자리에 선다. */
.dashdesc{color:var(--ink2);font-size:13.5px;margin-top:-6px;}
.drow .mbsum{margin:0;}
/* 점령전 — 시즌 단추 줄이 대시보드 밑의 첫 줄이 됐다. 위 여백은 대시보드가 띄운다. */
.dash + .znsub{padding-top:0;justify-content:flex-start;}
/* 안내 — 늘 보이는 글. 앞의 ⓘ 는 누르는 단추가 아니라 글머리다. PC 는 문장을 이어 두 줄(셋째 문장부터 줄을 바꾼다), 폰은 문장마다 한 줄. */
.dinfo{display:flex;gap:9px;align-items:flex-start;margin:0 0 26px;color:var(--mut);font-size:12.5px;line-height:1.6;}
.dinfo>i{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1px solid var(--mut2);font:700 10.5px/14px Arial,sans-serif;text-align:center;color:var(--mut);}
.dinfo>span>span:nth-child(n+3){display:block;}
/* 점령전의 안내 — 문장 둘을 PC 에서도 한 줄씩(다른 화면은 앞의 두 문장을 한 줄에 잇는다). 밑의 시즌 단추와는 조금 가깝게. */
.zninfo{margin-bottom:16px;} .zninfo>span>span{display:block;}
.dash + .zninfo + .znsub{padding-top:0;justify-content:flex-start;}
/* 고르기 줄 — 갈래 단추 · 하위 탭 · 최근 갱신 같은 것이 한 줄에 선다. */
.drow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;}
.drow:empty{display:none;}
.drow .rsub{margin-left:0;}
.drow .sbupd{margin:0;}
/* 갈래 단추(보특 · 결특) — 하위 탭(.rsub)과 같은 모양. */
.dseg{display:inline-flex;flex:0 0 auto;padding:2px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line2);}
.dseg a{padding:5px 13px;border-radius:7px;font-size:12px;font-weight:700;color:var(--mut);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.dseg a:hover{color:var(--ink2);}
.dseg a.on{color:#06100f;background:var(--g2);}
@media(max-width:820px){
  .dash{margin-bottom:48px;}
  /* 폰은 띠가 좁아 그림의 밝은 쪽이 글자 뒤에 온다 — 아래쪽(탭 · 상세의 메달이 서는 자리)을 더 어둡게 누른다(2026-10-11 사용자). PC 는 아래 110px 만 옅게. */
  .dash::after{height:68%;background:linear-gradient(180deg,transparent 0%,rgba(10,11,14,.72) 45%,rgba(10,11,14,.93) 100%);}
  /* 상세는 띠가 더 높고(232px) 아래쪽에 메달 셋이 선다 — 조금 더 어둡게(2026-10-11 사용자) */
  .pddash::after{height:76%;background:linear-gradient(180deg,transparent 0%,rgba(10,11,14,.8) 38%,rgba(10,11,14,.96) 100%);}
  .dashin{padding:54px 0 46px;min-height:176px;}
  .dnote{margin-top:8px;font-size:12.5px;line-height:14px;} .dashin.wnote{padding-bottom:24px;}
  /* 우편함 — 폰에서는 «왼쪽 · 사료 / 오른쪽 · 쿠폰» 줄이 없다(탭이 그 일을 한다). 빈 줄의 여백이 남지 않게 줄째 걷는다. */
  #mailpanel .drow{display:none;}
  .dasht{font-size:26px;margin-bottom:14px;}
  .dtabs a,.dtabs b,.dtabs button{padding:7px 15px;font-size:13px;}
  .dashdesc{display:none;}
  /* 상세 — 초상 · 닉네임 한 줄, 메달 셋은 그 밑에 왼쪽부터 12px 사이로(2026-10-15 사용자 — 22 → 14 → 8 → 10 → 12px, 견줘 보고 12 로 — 전에는 폭 전체에 고르게 퍼졌다). 사이의 줄은 아주 가늘고 옅게(반 픽셀 — 사용자 결정. 전에는 1px 또렷한 줄이었다).
     메달 밑의 여백도 줄였다(30 → 18px · 같은 날 사용자). */
  .pd>.pddash{margin-top:-10px;margin-bottom:2px;}
  .pddash .dashin{padding:34px 0 18px;}
  .pddash .pdhero{align-items:center;flex-wrap:wrap;gap:14px;}
  .pddash .pdhero>.av{width:60px;height:60px;}
  .pddash .pdwho{display:contents;}
  .pddash .pdnick{flex:1;min-width:0;}
  .pddash .pdmedals{position:relative;flex:0 0 100%;justify-content:flex-start;gap:12px;border-top:0;padding-top:10px;}
  .pddash .pdmedals::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.14);transform:scaleY(.5);transform-origin:0 0;}
  .dinfo{font-size:12px;margin-bottom:22px;}
  .dinfo>span>span{display:block;}
  .drow{margin-bottom:14px;}
  /* 하위 탭은 글자만큼만 — 전에는 제목 밑의 한 줄을 좌우로 꽉 채웠다. */
  .drow .rsub{display:inline-flex;width:auto;flex:0 0 auto;margin:0;}
  .drow .rsub a{flex:none;padding:5px 13px;font-size:12.5px;}
}

/* 보상 창(2026-10-13) — 판 안의 ⓘ 가 연다. 이름은 znri(아이콘) · znrp(창). znrwi 는 재화 아이콘의 것이라 안 쓴다. */
/* ⓘ — 작고 회색(안내 문구 앞의 ⓘ 와 같은 결). 좁은 판: 상태 글자(«격전 중» · «시즌 종료»)와 같은 줄 · 같은 높이. 눌리는 범위는 40px — 바깥 여백을 그만큼 되돌려 줄의 높이는 그대로다. */
button.znri{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-13px -12px -13px -9px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
/* 머리의 글이 길 때(«8회차가 끝났을 때»)도 ⓘ 가 같은 줄에 선다 — 눌리는 범위가 줄 밖으로 삐져나가는 만큼(12px)은 줄이 품는다. */
.znst .l b:has(> button.znri){padding-right:12px;white-space:nowrap;}
button.znri u{display:block;width:15px;height:15px;border-radius:50%;border:1px solid #8e99a8;font:700 10.5px/13px Arial,sans-serif;text-align:center;text-decoration:none;color:#8e99a8;}
button.znri:hover u,button.znri:focus-visible u{border-color:#e6eaf0;color:#e6eaf0;} button.znri:focus-visible{outline:none;} button.znri:focus-visible u{box-shadow:0 0 0 2px #fff;}
g.znri{cursor:pointer;outline:none;} g.znri:hover circle+circle,g.znri:focus-visible circle+circle{stroke:#e6eaf0;} g.znri:hover text,g.znri:focus-visible text{fill:#e6eaf0;}
/* 창 — 화면에 붙는다. 길면 창 안에서 내리고 뒤의 쪽은 안 움직인다(body.znrpon). */
body.znrpon{overflow:hidden;}
.znrp{position:fixed;inset:0;z-index:880;display:flex;align-items:center;justify-content:center;padding:20px 16px;background:rgba(5,7,10,.66);}
.znrp[hidden]{display:none;}
.znrpb{position:relative;box-sizing:border-box;width:min(940px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#10141a;border:1px solid var(--line2);border-radius:14px;padding:18px 22px 20px;box-shadow:0 18px 50px rgba(0,0,0,.65);outline:none;}
.znrpb .znsec{margin:20px 0 2px;} .znrpb .znsec:first-of-type{margin-top:0;padding-right:34px;min-height:24px;} .znrpb .znsec h2{font-size:15px;}
.znrpb .znof > div{background:rgba(255,255,255,.03);}
.znrpx{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--mut);font-size:15px;line-height:1;cursor:pointer;}
.znrpx:hover{color:var(--ink);background:rgba(255,255,255,.06);} .znrpx:focus-visible{outline:2px solid #fff;outline-offset:-2px;}
@media(max-width:820px){
  .znrp{padding:12px 10px;} .znrpb{padding:16px 14px 16px;border-radius:12px;}
  .znrpb .znsec h2{font-size:14.5px;}
}