/* ===== 반응형 사이드바 — 창이 좁아질수록 사이드바 너비·글씨·아이콘·버튼·간격을 같이 줄인다 =====
   --u = 1 "디자인 px" 의 실제 크기. 창 폭 1440px 이상은 1px(원래 크기), 1000px 에서 0.8px, 그보다 좁으면(작은 창·모바일 서랍) 0.8px.
   모든 크기는 calc(원래값 * var(--u)) — 다시 배치해서 그리는 크기라 글씨가 흐려지지 않는다(transform: scale 아님).
   기본 화면에만 적용한다(위장 스킨 work·mall 은 각자 크기를 쓴다). 원래 값은 01-sidebar · 03-teams · 10-payroll · 11-emotes · 12-characters 와 같다. */
:root{--u:clamp(.8px, calc(.36px + .0445vw), 1px)}

/* 사이드바 칸 너비 (데스크톱 격자. 접힌 상태·모바일 서랍은 기존 규칙 그대로) */
@media (min-width:761px){
  body:not(.mall):not(.work):not(.side-closed) .app{grid-template-columns:calc(272 * var(--u)) 1fr}
}

body:not(.mall):not(.work) .side{padding:calc(20 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u))}
@media (max-width:760px){
  body:not(.mall):not(.work) .side{padding-top:calc(20 * var(--u) + env(safe-area-inset-top,0px));padding-bottom:calc(18 * var(--u) + env(safe-area-inset-bottom,0px))}
}
body:not(.mall):not(.work) .side-x{font-size:calc(18 * var(--u))}
body:not(.mall):not(.work) .brand{padding:0 calc(8 * var(--u)) calc(14 * var(--u))}
body:not(.mall):not(.work) .brand h1{font-size:calc(24 * var(--u))}
body:not(.mall):not(.work) .brand p{font-size:calc(12 * var(--u))}
body:not(.mall):not(.work) .sect{font-size:calc(12 * var(--u));padding:calc(16 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u))}

/* 대화방 목록 · 새 방 */
body:not(.mall):not(.work) .ch{gap:calc(9 * var(--u));padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u));font-size:calc(12 * var(--u))}
body:not(.mall):not(.work) .ch .em{width:calc(22 * var(--u))}
body:not(.mall):not(.work) .ch .cnt{font-size:calc(12 * var(--u));padding:calc(1 * var(--u)) calc(7 * var(--u))}
body:not(.mall):not(.work) .newch{gap:calc(6 * var(--u));padding:calc(6 * var(--u)) calc(2 * var(--u)) 0}
body:not(.mall):not(.work) .newch input{font-size:calc(12 * var(--u));padding:calc(7 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u))}
body:not(.mall):not(.work) .newch button{font-size:calc(12 * var(--u));padding:calc(6 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u))}

/* 멘탈 배터리 · 감정표현 안내 */
body:not(.mall):not(.work) .moods{gap:calc(4 * var(--u));padding:0 calc(4 * var(--u))}
body:not(.mall):not(.work) .mood{font-size:calc(24 * var(--u));padding:calc(3 * var(--u)) 0;border-radius:calc(10 * var(--u))}
body:not(.mall):not(.work) .moodnow{font-size:calc(12 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u)) 0;min-height:calc(26 * var(--u))}
body:not(.mall):not(.work) .emo-help{font-size:calc(11.5 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u)) 0}

/* 내 팀 · 캐릭터 꾸미기 버튼 · 팀 대항전 */
body:not(.mall):not(.work) .teams{gap:calc(4 * var(--u));padding:0 calc(4 * var(--u))}
body:not(.mall):not(.work) .teamb{font-size:calc(12 * var(--u));padding:calc(6 * var(--u)) calc(4 * var(--u));border-radius:calc(10 * var(--u))}
body:not(.mall):not(.work) .charbtn{margin:calc(8 * var(--u)) calc(4 * var(--u)) 0;width:calc(100% - 8 * var(--u));padding:calc(7 * var(--u));font-size:calc(12 * var(--u));border-radius:calc(10 * var(--u))}
body:not(.mall):not(.work) .score{padding:calc(2 * var(--u)) calc(6 * var(--u)) 0}
body:not(.mall):not(.work) .score .row2{grid-template-columns:calc(78 * var(--u)) 1fr calc(34 * var(--u));gap:calc(6 * var(--u));font-size:calc(12 * var(--u));margin:calc(5 * var(--u)) 0}
body:not(.mall):not(.work) .score .bar{height:calc(9 * var(--u))}
body:not(.mall):not(.work) .score .pt,
body:not(.mall):not(.work) .score .tag,
body:not(.mall):not(.work) .score .help{font-size:calc(12 * var(--u))}
body:not(.mall):not(.work) .side .tbadge{font-size:calc(12 * var(--u));padding:0 calc(6 * var(--u));margin-left:calc(5 * var(--u))}

/* 지갑 */
body:not(.mall):not(.work) .wallet{font-size:calc(12 * var(--u));padding:calc(2 * var(--u)) calc(6 * var(--u)) 0}
body:not(.mall):not(.work) .wallet .bal{font-size:calc(24 * var(--u))}
body:not(.mall):not(.work) .wallet .row3{gap:calc(6 * var(--u));margin:calc(3 * var(--u)) 0}
body:not(.mall):not(.work) .walletbtns{gap:calc(4 * var(--u));padding:calc(6 * var(--u)) calc(4 * var(--u)) 0}
body:not(.mall):not(.work) .walletbtns button{font-size:calc(12 * var(--u));padding:calc(6 * var(--u)) calc(2 * var(--u));border-radius:calc(10 * var(--u))}

/* 다들 상태 (캐릭터 그림은 pixelated 그대로 — 상자 크기만 줄어든다) */
body:not(.mall):not(.work) .team{padding:0 calc(2 * var(--u))}
body:not(.mall):not(.work) .team li{gap:calc(9 * var(--u));padding:calc(5 * var(--u)) calc(6 * var(--u))}
body:not(.mall):not(.work) .av,
body:not(.mall):not(.work) .av img{width:calc(30 * var(--u));height:calc(30 * var(--u))}
body:not(.mall):not(.work) .av.on::after{width:calc(10 * var(--u));height:calc(10 * var(--u))}
body:not(.mall):not(.work) .team .tn,
body:not(.mall):not(.work) .team .ts,
body:not(.mall):not(.work) .team .none{font-size:calc(12 * var(--u))}
body:not(.mall):not(.work) .team .kick{font-size:calc(11 * var(--u));padding:calc(4 * var(--u)) calc(7 * var(--u))}