/* ui4.css — 2026-10-22 Macho 「전반적인 UI 개선」 정비 층
   「아이콘·글 잘림 · 번역하면 깨짐 · 보상 창 정신없음 · 불필요한 여백 · 두꺼운 단추 · 색이 산만」
   ─────────────────────────────────────────────────────────────────────────
   · skin_game3.css 뒤에 싣는다. 각 화면 js 가 실행 중에 덧넣는 꾸밈(같은 세기)을 이기려 !important 를 쓴다.
   · 자(尺) 하나로 맞춘다 — 큰 단추 48 · 보통 단추 40 · 탭·토글 40 · 칩 26 · 머리글 16~18 · 본문 13~14
   · 글은 어느 언어든 상자 밖으로 안 나간다 — nowrap 금지, 줄바꿈 허용, 긴 낱말은 끊어서(overflow-wrap:anywhere)
   · 설명 글은 화면에 두지 않고 「?」 도움말로 (tipBtn) — 화면엔 상태·숫자·단추만
   · 색 : 한 화면에 강조색 하나(파랑=선택, 초록=가야 할 곳, 노랑=보상), 정보 칸은 회색 */

:root{ --u4-ink:#22304d; --u4-sub:#6F7D96; --u4-line:#DCE6F3; --u4-soft:#F4F6FA; --u4-blue:#3D8EF0; --u4-blue-d:#2A6FC4; --u4-green:#4BC304; --u4-yel:#FFC93C; }

/* ═══ 0. 공통 조절 — 탭·토글·단추 ═══ */
/* 가로로 늘어선 탭·토글 묶음 : 40px · 13.5px · 줄바꿈 허용(번역) · 칸을 나눠 가진다 */
html body .vtog .vt, html body .rowline .tabs .tab.static, html body .rowline .qhub,
html body .cx-sw button, html body .cx-ax, html body .sh-t, html body .rk-tabs button, html body .lg-top button,
html body .qz-tabs button, html body .op-stabs .op-tab, html body .op-tabs .op-tab, html body .dk-sort button, html body .mx-leg .mx-all{
  min-height:40px !important; height:auto !important; padding:5px 8px !important; font-size:13.5px !important; line-height:1.15 !important;
  white-space:normal !important; word-break:keep-all; overflow-wrap:anywhere; display:inline-flex !important; align-items:center; justify-content:center; gap:4px }
html body .rk-tabs, html body .lg-top, html body .cx-sw, html body .cx-axis, html body .qz-tabs{ gap:6px !important; margin-top:6px !important; margin-bottom:8px !important }
html body .qz-tabs{ padding-bottom:8px !important }
html body .qz-tabs i{ top:-4px !important; right:-2px !important }   /* 숫자 배지는 모서리 밖으로 — 글과 안 겹치게 */
html body .op-stabs{ grid-template-columns:repeat(4,1fr) !important; gap:4px !important }
html body .op-stabs .op-tab{ padding:4px 3px !important; font-size:12.5px !important }
/* 보통 단추(받기·사기·바꾸기) 40 · 넓은 단추 48 */
html body .k-btn{ min-height:40px !important; padding-top:0 !important; padding-bottom:0 !important; font-size:15px !important }
html body .sh-row .k-btn{ min-width:74px !important; flex:none }
html body .k-btn.wide, html body .bigbtn, html body .qclose, html body .rwg-ok, html body .rs2-next, html body .cx-unmet{ min-height:48px !important }
html body .qz-claim{ min-height:42px !important; min-width:84px !important; font-size:15px !important }
html body .mx-b{ min-height:52px !important }
html body .mx-b b{ font-size:17px !important }
/* 작은 칩(등급·덤·상태) */
html body .sh-dum, html body .mx-chip, html body .qz-t em, html body .pill, html body .rk-tt{ white-space:normal !important; line-height:1.2 !important }
/* 머리글 */
html body .dk-h, html body .cx-h, html body .sh-h, html body .mx-cmpt, html body .qz-top b, html body .rk-sub{ font-size:16px !important; font-weight:900 !important; color:var(--u4-ink) !important }
html body .rk-hd b{ font-size:18px !important }
html body .mx-ph b{ font-size:19px !important }
html body .sh-h{ display:flex !important; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px !important }
html body .sh-h .sh-sub{ flex:1 1 100%; font-weight:700 !important; font-size:12.5px !important }
/* 「?」 도움말 단추 — 어디서나 같은 크기 */
html body .qbtn.tipq{ width:26px !important; height:26px !important; min-width:0 !important; min-height:0 !important; padding:0 !important; border-radius:50% !important; font-size:14px !important; line-height:1 !important; vertical-align:middle }
/* 정보 칸은 회색 — 색이 많아 산만하던 것 */
html body .dk-guide, html body .cx-prog, html body .rk-pos, html body .mx-done{ background:var(--u4-soft) !important; color:var(--u4-ink) !important; border:0 !important; box-shadow:none !important }
/* 카드(흰 판) 안쪽 여백 통일 */
html body .sh-card{ padding:10px 12px !important; margin:6px 0 !important; border:0 !important; box-shadow:0 3px 0 var(--u4-line) !important; border-radius:16px !important }
html body .sh-row{ padding:7px 0 !important; gap:8px !important }
html body .sh-row > div:first-child{ flex:1 1 auto; min-width:0 }
html body .sh-row b{ word-break:keep-all; overflow-wrap:anywhere }
html body .sh-sub{ font-size:12.5px !important; line-height:1.3 !important; word-break:keep-all; overflow-wrap:anywhere }

/* ═══ 1. 로비 ═══ */
/* 위 재화 알약 — 가운데 · 한 덩어리 (10-19 에서 옮김) */
html body .g3-top{ gap:5px !important; padding:8px 0 6px !important }
html body .g3-top .g3-pill{ justify-content:center !important; padding:0 8px !important; gap:4px !important; overflow:visible; min-width:0 }
html body .g3-top .g3-pill .t:empty{ display:none !important }
html body .g3-top .g3-pill .ic{ flex:none }
html body .g3-top .g3-pill.tk .ic, html body .g3-top .g3-pill.tk .ic img, html body .g3-top .g3-pill.tk .ic svg{ width:26px !important; height:26px !important }
/* 둘째 줄(지도·목록 / 수도권 노선도 / 미션) */
html body .rowline{ gap:5px !important; margin-bottom:6px !important; padding-right:8px; box-sizing:border-box }
html body .rowline .vtog{ padding:2px !important; flex:none }
html body .rowline .tabs{ flex:1 1 auto !important; min-width:0; overflow:visible !important; padding:0 !important }
html body .rowline .tabs .tab.static{ flex:1 1 auto !important; width:100% }
html body .rowline .qhub{ flex:none; padding:0 10px 0 6px !important }
html body .rowline .qhub img{ width:26px !important; height:26px !important; margin-top:-2px !important }
/* 역 카드 — 목표 줄 : 그림은 고정, 글은 줄바꿈, 「?」 는 오른쪽 */
html body .g3-pick .pk-ms{ display:flex !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:6px !important; padding-right:34px !important }
html body .g3-pick .pk-ms .mi-ic{ flex:none; margin:0 !important; line-height:0 }
html body .g3-pick .pk-ms > span:not(.mi-ic):not(.pill){ flex:1 1 auto; min-width:0; margin:0 !important; white-space:normal !important; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere }
html body .g3-pick .pk-ms .qbtn{ position:absolute; right:0; top:50%; transform:translateY(-50%) }
html body .g3-pick .pk-nm{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.1 !important; font-size:24px !important; margin:1px 0 3px !important; word-break:keep-all; overflow-wrap:anywhere }
html body .g3-pick .pk-tag{ white-space:normal !important; line-height:1.2 }
/* 플레이 단추 */
html body .g3-play{ min-height:50px !important; padding:3px 8px !important; border-radius:18px !important }
html body .g3-play b{ font-size:23px !important; line-height:1.1 !important; white-space:normal !important; word-break:keep-all; overflow-wrap:anywhere }
html body .g3-play small{ margin-top:0 !important; font-size:12px !important; white-space:normal !important }
html body .g3-play:not(:has(small)){ padding:0 8px !important }
/* 목록 보기 머리 */
html body .stnlist{ margin-top:0 }
/* 아래 메뉴 — 동그라미 50 · 글 11 두 줄 허용 */
html body .tabbar{ padding-top:6px !important; padding-bottom:5px !important }
html body .tabbar button{ min-height:0 !important; padding:4px 0 3px !important; min-width:0 }
html body .tabbar button .ic{ width:50px !important; height:50px !important; padding:7px !important }
html body .tabbar button .tx{ font-size:11px !important; line-height:1.1 !important; white-space:normal !important; word-break:keep-all; max-width:100%; display:block; text-align:center }

/* ═══ 2. 판(플레이) 화면 ═══ */
html body.play .hud{ padding:7px !important; margin-bottom:7px !important }
html body.play .hud .box.gl{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:center; align-content:center; align-items:center; column-gap:6px; row-gap:2px; padding:6px 8px !important }
html body.play .hud .box.gl .ic{ width:auto !important; min-width:0 !important; margin:0 !important; font-size:0 !important; display:flex !important; line-height:0 }
html body.play .hud .box.gl .ic img{ width:28px !important; height:28px !important }
html body.play .hud .box.gl b{ width:auto !important; min-width:0 !important; margin:0 !important; font-size:24px !important }
html body.play .hud .box.gl .ml{ flex:0 0 100%; text-align:center; font-size:12.5px !important; line-height:1.25 !important; margin-top:2px !important; word-break:keep-all; overflow-wrap:anywhere }
html body.play .hud .box.mv{ justify-content:center }
html body.play .hud .box.mv .ic{ display:none }
html body.play .hud .box.mv b{ width:58px !important; height:58px !important; line-height:48px !important; font-size:26px !important; margin:0 auto !important }
html body.play .hud .box.mv span{ margin-top:3px !important; line-height:1.15 !important; font-size:12px !important; white-space:normal !important; text-align:center }
html body.play .g3-trk{ margin-bottom:8px !important }
html body.play .gt-st{ white-space:normal !important; max-width:30%; overflow:hidden; text-overflow:ellipsis; line-height:1.15 }
/* 카드 칸 — 그림 거의 정사각, 패시브는 얇은 띠, 등급표 작게 (10-19 「카드가 안 보여」 뒤 확정) */
html body.play .cd-bar{ margin-top:8px !important; align-items:stretch !important; padding:8px 4px 4px !important }
html body.play .cd-slot{ padding:4px 4px 6px !important }
html body.play .cd-slot .cd-face{ width:100% !important; max-width:88px !important; aspect-ratio:1 / 1 !important; max-height:76px; height:auto !important; margin:0 auto; box-sizing:border-box }
html body.play .cd-slot .cd-face img{ object-position:50% 20% !important }
html body.play .cd-psv{ left:0 !important; right:0 !important; bottom:0 !important; border-radius:0 !important; padding:1px 2px !important; background:rgba(255,255,255,.86) !important; box-shadow:none !important; line-height:13px !important; font-size:9.5px !important }
html body.play .cd-psv::before{ content:none !important }
html body.play .cd-slot .cd-rk{ top:3px !important; left:3px !important; padding:0 4px !important; line-height:13px !important; font-size:9px !important; min-width:0 !important }
html body .cd-name.cd-sk{ white-space:normal !important; display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:clip !important; line-height:1.12 !important; font-size:10.5px !important; word-break:keep-all; overflow-wrap:anywhere; text-align:center }
html body.play .g3-dock{ padding-top:8px !important }
html body.play .g3-say{ padding:8px 12px !important; font-size:14px !important }

/* ═══ 3. 결과 창 ═══ */
html body .rs2 .rs2-top b{ font-size:24px !important; white-space:normal !important; word-break:keep-all }
html body .rs2 .rs2-gain{ margin:4px 0 6px !important }
html body .rs2 .rs2-gain .gi{ white-space:nowrap }
html body .rs2-gotlb{ font-size:12.5px !important; margin:6px 0 2px !important }
html body button.rs2-adx2, html body .rs2-adx2{ min-height:54px !important; margin-bottom:8px !important; padding:7px 10px !important }
html body .rs2-adx2 b{ font-size:14.5px !important; white-space:normal !important }
html body .rs2-adx2 .rs2-adg{ font-size:14px !important }
html body .rs2-adx2 em{ font-size:11.5px !important }
html body .rs2 .rs2-murmur, html body .rs2 .g3-spot{ margin:0 0 8px !important; font-size:12.5px !important }
html body .rs2 .rs2-next{ min-height:50px !important }
html body .rs2-more{ min-height:40px !important }

/* ═══ 4. 상점 ═══ */
html body .sh-tabs{ gap:5px !important; margin-bottom:8px !important; flex-wrap:wrap }
html body .sh-t{ flex:1 1 auto !important; min-width:0 !important; padding:5px 6px !important }
/* 뽑기 배너 */
html body .mx-ban{ padding:12px 12px 10px !important; margin-bottom:10px !important }
html body .mx-bt{ flex-wrap:wrap; row-gap:4px; min-height:0 !important; margin-bottom:4px }
html body .mx-chip{ white-space:normal !important; line-height:1.2 !important; text-align:left }
html body .mx-left{ white-space:nowrap }
html body .mx-btx b{ font-size:22px !important; white-space:normal !important; word-break:keep-all; overflow-wrap:anywhere }
html body .mx-btx small{ font-size:12px !important; line-height:1.3 !important }
html body .mx-pity{ padding:7px 9px !important; margin-bottom:8px !important }
html body .mx-pity b{ font-size:12.5px !important; white-space:normal !important }
html body .mx-urt{ flex-wrap:wrap !important; row-gap:2px; min-height:40px !important; padding:5px 10px !important }
html body .mx-urt span{ flex:1 1 100% !important; text-align:left; white-space:normal !important }
html body .mx-urt b{ flex:1 1 0 !important; min-width:0; text-align:left; white-space:normal !important; text-overflow:clip !important; overflow:visible !important; line-height:1.15 }
html body .mx-bb{ gap:6px !important }
html body .mx-b small{ white-space:normal !important; line-height:1.15 }
html body .mx-b em{ white-space:normal !important; line-height:1.1; max-width:80% }
/* 패스 */
html body .mx-ph{ flex-wrap:wrap !important; row-gap:2px; margin-bottom:6px }
html body .mx-ph span{ white-space:normal !important; line-height:1.2 }
html body .mx-leg{ display:flex !important; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap }
html body .mx-leg span{ font-size:12px !important; white-space:normal !important; line-height:1.2 }
html body .mx-prow{ gap:8px !important }
html body .mx-prow .mx-b{ min-height:46px !important; height:auto !important; align-self:stretch !important }
html body .mx-prow .mx-b.ok{ align-self:center !important; min-height:44px !important }
/* 상품 */
html body .mx-hero{ padding:12px 12px 12px !important; margin:6px 0 10px !important }
html body .mx-hero .mx-rib{ font-size:11px !important; white-space:normal !important; line-height:1.1; text-align:center; width:150px; right:-42px; padding:4px 0 }
html body .mx-cmp{ padding:10px !important }
html body .mx-cmp th, html body .mx-cmp td{ padding:4px 2px !important; font-size:12px !important; line-height:1.25 !important; white-space:normal !important; word-break:keep-all; overflow-wrap:anywhere }
html body .mx-cmp th{ font-size:11.5px !important }
/* 충전 */
html body .mx-unlbar{ font-size:12.5px !important; padding:6px 10px !important; white-space:normal !important }

/* ═══ 5. 덱 · 도감 ═══ */
html body .dk-h{ display:flex; align-items:center; gap:6px; margin:4px 2px 6px !important }
html body .dk-guide{ padding:7px 10px !important; margin:6px 0 10px !important; font-size:13px !important }
html body .cx-sw{ margin-bottom:6px !important }
html body .cx-axis{ margin-bottom:6px !important }
html body .cx-prog{ padding:6px 10px !important; border-radius:12px; margin:6px 0 !important }
html body .cx-unmet{ margin:8px 0 6px !important; min-height:44px !important; white-space:normal !important; line-height:1.2; text-align:left; justify-content:center !important; flex-wrap:wrap }
html body .cx-unmet span{ margin-left:auto; white-space:nowrap }

/* ═══ 6. 랭킹 ═══ */
html body .rk{ padding:4px 12px 20px !important }
html body .rk-hd{ padding:4px 2px 8px !important }
html body .rk-me{ padding:12px 12px 10px !important }
html body .rk-me1{ flex-wrap:wrap; row-gap:6px }
html body .rk-nm{ white-space:normal !important; text-overflow:clip !important; overflow:visible !important; line-height:1.15 !important; font-size:18px !important; overflow-wrap:anywhere }
html body .rk-ed{ min-height:40px !important; white-space:nowrap }
html body .rk-ed.hot{ background:linear-gradient(180deg,#FFE066,#FFB800) !important; color:#4A2C00 !important; box-shadow:0 3px 0 #D89A00 }   /* 아직 닉네임이 없으면 이 단추가 노랗게 */
html body .rk-me3 span{ flex-wrap:wrap; padding:7px 9px !important; gap:4px !important }
html body .rk-me3 b{ font-size:18px !important }
html body .rk-me3 small{ white-space:normal !important; line-height:1.15; font-size:12px !important }
html body .rk-pos{ margin-top:8px !important; padding:8px 10px !important; font-size:13px !important }
html body .rk-acc{ margin-top:8px !important; padding:8px 10px !important; flex-wrap:wrap; row-gap:6px }
html body .rk-acc > div{ flex:1 1 auto; min-width:0 }
html body .rk-acc b{ white-space:normal !important; font-size:13.5px !important }
html body .rk-gbtn{ flex:0 1 auto !important; max-width:56%; min-height:40px !important; white-space:normal; line-height:1.15; padding:6px 12px !important }
html body .rk-list{ padding:2px 8px !important }
html body .rk-tis{ margin-top:10px }
html body .rk-ti{ display:flex; align-items:center; gap:8px; min-height:40px; padding:5px 0 }
html body .rk-ti b{ flex:1 1 auto; min-width:0; white-space:normal !important; line-height:1.2; font-size:14px !important; overflow-wrap:anywhere }
html body .rk-ti span{ flex:none; max-width:46%; text-align:right; white-space:normal !important; line-height:1.2; font-size:12px !important }

/* ═══ 7. 팝업 — 미션 · 쪽지함 · 설정 · 도움말 · 카드 ═══ */
html body .qz-hd{ min-height:46px !important; padding:10px 12px 6px 16px !important }
html body .qz-hd > b{ font-size:17px !important }
html body .qz-bd{ padding:8px 12px calc(16px + env(safe-area-inset-bottom)) !important }
html body .qz-row{ margin-bottom:6px !important; padding:9px 10px !important }
html body .qz-t{ font-size:14.5px !important; line-height:1.3 !important; word-break:keep-all; overflow-wrap:anywhere }
html body .qz-t em{ display:inline-block; margin:0 5px 2px 0 !important; vertical-align:middle !important }
html body .qz-top{ margin:2px 2px 8px !important }
html body .qz-top span{ white-space:normal !important; text-align:right; line-height:1.2 }
html body .op-sh .op-hd{ min-height:46px !important }
html body .op-t{ min-height:54px !important; padding:8px 9px !important }
html body .op-t .tx b{ white-space:normal !important; font-size:14px !important; line-height:1.2 !important; overflow-wrap:anywhere }
html body .op-t.swt .tx b{ white-space:normal !important }
html body .op-t .tx small{ white-space:normal !important }
html body .op-h2{ margin-top:10px !important }
html body .op-grid{ gap:6px !important }
html body .op-ask-lead + .op-grid .op-t{ min-height:48px !important }
html body .qbox h3{ font-size:17px !important; margin:0 0 8px !important }
html body .tipbody{ font-size:14px !important; line-height:1.65 !important; word-break:keep-all; overflow-wrap:anywhere }
html body .cp-where-t{ font-size:13px !important }
html body .ml-h{ min-height:46px !important }
/* 확인창(certbox) — 제목 18 · 단추 48 */
html body .certbox h3{ font-size:18px !important; line-height:1.3 !important; word-break:keep-all }
html body .certbox .bigbtn{ min-height:48px !important; font-size:16px !important }
html body .certbox .sub{ font-size:13.5px !important }

/* ═══ 8. 번역판 공통(html.i18n-x) — 글이 길어져도 상자 안에 ═══ */
html.i18n-x body{ overflow-x:clip }
html.i18n-x body .sh-t{ font-size:12.5px !important }
html.i18n-x body .op-hd > b, html.i18n-x body .qz-hd > b, html.i18n-x body .dkp-hd > b{ white-space:normal !important; text-overflow:clip !important; display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-width:66% !important; font-size:15px !important; line-height:1.15 !important; text-wrap:balance }
html.i18n-x body .cd-psv{ font-size:9px !important; letter-spacing:-.4px }
html.i18n-x body .cd-name.cd-sk{ word-break:normal !important; font-size:10px !important }
html.i18n-x body .g3-pick .pk-nm{ font-size:22px !important }
html.i18n-x body .tabbar button .tx{ font-size:10.5px !important }
html.i18n-x body .mx-btx b{ font-size:20px !important }
html.i18n-x body .rk-tt{ font-size:11.5px !important }

/* ═══ 9. 좁은 폰(≤350px) ═══ */
@media (max-width:350px){
  html body .g3-top{ gap:3px !important }
  html body .g3-top .g3-pill{ padding:0 5px !important; gap:2px !important; font-size:14px !important }
  html body .g3-top .g3-pill .ic, html body .g3-top .g3-pill .ic img, html body .g3-top .g3-pill .ic svg{ width:24px !important; height:24px !important }
  html body .g3-top .g3-rnd{ width:40px !important; height:40px !important; flex:none !important }
  html body .g3-top .g3-rnd img{ width:28px !important; height:28px !important }
  html body .rowline button{ font-size:13px !important; padding-left:6px !important; padding-right:6px !important }
  html body .tabbar button .tx{ font-size:10px !important }
}

/* ═══ 10. 2차 — 러시아어 대조에서 남은 셋 ═══ */
/* 로비 둘째 줄 : 노선 이름은 두 줄까지만(세로로 길어져 지도를 밀어냈다) · 줄 높이는 40 고정 */
html body .rowline{ align-items:center !important }
html body .rowline .tabs .tab.static{ max-height:40px; overflow:hidden; display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.1 !important; padding:2px 6px !important; font-size:12.5px !important; text-align:center; align-items:center }
/* 설정 켜기·끄기 칸 : 그림 · 글(두 줄 허용) · 스위치 — 글이 세로로 쪼개지지 않게 글칸에 최소 폭 */
html body .op-t.swt{ gap:6px !important; padding:8px 7px !important }
html body .op-t.swt .ic{ width:30px !important; height:30px !important; font-size:16px !important }
html body .op-t.swt .tx{ flex:1 1 56px !important; min-width:52px }
html body .op-t.swt .tx b{ font-size:13px !important; line-height:1.15 !important; display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; word-break:normal !important; overflow-wrap:anywhere }
html body .op-t.swt .tx small{ font-size:11px !important }
html body .op-sw{ width:40px !important; height:24px !important }
html body .op-sw::after{ width:18px !important; height:18px !important }
html body .op-t.swt.on .op-sw::after{ left:19px !important }
/* 상점 탭 4개 : 글이 길면 2×2 로 (한 줄에 끼어 글이 11px 로 쪼그라들었다) */
html.i18n-x body .sh-tabs .sh-t{ flex:1 1 45% !important; padding:5px 4px !important; font-size:13px !important }
/* 로비 둘째 줄 — 번역판은 「미션」 글이 길어(Задания·Missionen) 노선 이름 칸이 56px 로 눌렸다 → 번역판에선 미션 단추를 그림+배지만 44px 로 */
html.i18n-x body .rowline .qhub{ width:44px !important; padding:0 !important; justify-content:center !important }
html.i18n-x body .rowline .qhub span{ display:none !important }
html.i18n-x body .rowline .qhub img{ margin:0 !important }
html.i18n-x body .rowline .tabs .tab.static{ font-size:12px !important }
/* 설정 탭 4개 — 「Информация」처럼 긴 낱말은 두 줄까지·글 12px, 낱말 안에서 끊지 않는다 */
html body .op-stabs .op-tab{ white-space:normal !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none; line-height:1.1 !important; padding:3px 2px !important; font-size:12px !important; min-height:40px !important; display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-align:center; align-items:center }
html.i18n-x body .op-stabs .op-tab{ font-size:11.5px !important }
/* 번역판 노선 이름(「Схема линий столичного региона」)이 세 줄 → 11px 로 두 줄 안에 · 미션 단추를 44 로 줄여 생긴 폭을 전부 노선 칸에 */
html.i18n-x body .rowline .tabs .tab.static{ font-size:11px !important; padding:2px 4px !important; letter-spacing:-.2px }
/* ═══ 11. 3차 — 15개 언어 재검사에서 남은 것 ═══ */
/* 미션 탭 숫자 배지 : 글 위에 얹히지 않게 글은 왼쪽 여유, 배지는 오른쪽 위 모서리 */
html body .qz-tabs button{ padding-right:22px !important }
html body .qz-tabs button i{ top:-5px !important; right:-3px !important; min-width:18px !important; height:18px !important; line-height:18px !important; font-size:11px !important }
/* 설정 탭 「Sonido·Pantalla」 — 가운뎃점(·)은 줄바꿈 자리가 아니라 한 덩어리로 넘쳤다 → 가운뎃점 뒤에서 끊을 수 있게(낱말 단위는 유지) */
html body .op-stabs .op-tab{ overflow-wrap:anywhere !important }
/* 도감 「아직 못 만난 고양이 627 ▾」 — 글은 왼쪽, 숫자·펼치기는 오른쪽 끝(가운데 정렬 검사에 걸렸지만 의도된 좌·우 배치) */
html body .cx-unmet{ justify-content:flex-start !important; text-align:left !important; flex-wrap:nowrap !important; gap:6px !important }
html body .cx-unmet b{ margin-left:auto; padding-left:6px; flex:none }
html body .cx-unmet span{ flex:none; margin-left:0 }
/* 번역판 설정 탭 — 「Sonido·Pantalla」처럼 가운뎃점으로 붙은 두 낱말은 11px 로, 그림(이모지)은 뺀다 → 두 줄 안에 */
html.i18n-x body .op-stabs .op-tab{ font-size:11px !important; letter-spacing:-.2px; padding:2px 2px !important }
html.i18n-x body .op-stabs .op-tab .ic, html.i18n-x body .op-stabs .op-tab img{ display:none !important }
html[lang="vi"] body .op-stabs .op-tab{ font-size:10px !important; letter-spacing:-.3px }   /* 베트남어 「Âm thanh·Màn hình」만 세 줄이었다 */
/* 미션 탭 배지 — 세로로 글과 겹친다고 검사에 걸림 → 탭 글은 아래로 2px, 배지는 위로 더 */
html body .qz-tabs button{ padding-top:7px !important; padding-bottom:3px !important }
html body .qz-tabs button i{ top:-7px !important }
/* 러시아어 320px — 노선 이름이 세 줄 → 좁은 폰 번역판은 10.5px */
@media (max-width:350px){ html.i18n-x body .rowline .tabs .tab.static{ font-size:10.5px !important; letter-spacing:-.2px; line-height:1.1 !important; max-height:48px; -webkit-line-clamp:3; height:48px !important }   /* 좁은 폰 번역판은 세 줄까지 — 지도·목록·미션 단추도 같은 48 */
  html.i18n-x body .rowline .vt, html.i18n-x body .rowline .qhub{ min-height:48px !important; height:48px !important } }
/* 번역판 노선 칸 — 여러 줄이면 글 그림자(0 2px)가 아랫줄과 겹쳐 글이 두 겹으로 보였다 → 그림자 끔 · 좁은 폰은 지도·목록 토글 글자도 줄여 노선 칸을 넓힌다 */
html.i18n-x body .rowline .tabs .tab.static{ text-shadow:none !important }
@media (max-width:350px){
  html.i18n-x body .rowline .vtog .vt{ font-size:11.5px !important; padding:4px 6px !important; letter-spacing:-.2px }
  html.i18n-x body .rowline .tabs .tab.static{ padding:2px 3px !important }
}
/* 10연 단추 꼬리표(「SR 이상 확정」) — 번역판은 글이 길어 단추를 덮었다 → 한 줄·작게, 넘치면 「…」 */
html body .mx-b em{ max-width:92% !important; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; top:-9px !important; right:4px !important; padding:2px 6px !important }
html.i18n-x body .mx-b em{ font-size:9px !important }

/* ═══ 12. 친구 초대 칸 (설정 › 계정 · invite.js) ═══ */
html body .op-inv .inv-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid #EEF1F6 }
html body .op-inv .inv-row > div{ flex:1 1 auto; min-width:0 }
html body .op-inv .inv-row b{ display:block; font-size:14px; color:var(--u4-ink); word-break:keep-all; overflow-wrap:anywhere }
html body .op-inv .inv-row small{ display:block; font-size:12px; color:var(--u4-sub); margin-top:2px; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere }
html body .op-inv .inv-code{ font-size:22px !important; letter-spacing:.08em; color:#1f6fd0 !important; font-family:var(--font-t), inherit }
html body .op-inv .inv-row button{ flex:none; min-height:40px; padding:0 14px; border:0; border-radius:12px; font-family:inherit; font-size:14px; font-weight:900; cursor:pointer; white-space:nowrap }
html body .op-inv .inv-row button.go{ background:linear-gradient(180deg,#5CB2FF,#3D8EF0); color:#fff; box-shadow:0 3px 0 #2A6FC4 }
html body .op-inv .inv-row button.gr{ background:#EEF2F8; color:#4a5a78 }
html body .op-inv .inv-row button[disabled]{ opacity:.55; cursor:default }
html body .op-inv .inv-note{ display:block; font-size:12px; color:var(--u4-sub); margin-top:4px }