/* 사이드바 자리를 미리 비워 두는 규칙. * * 왜 따로 파일로 두는가: * 이 규칙들은 원래 sidebar.js 가 화면을 다 읽은 뒤(DOMContentLoaded) 만들어 붙였다. * 그래서 화면을 열면 본문이 먼저 사이드바 없는 자리에 한 번 그려지고, * 사이드바가 붙는 순간 왼쪽 여백(20px → 260px)과 본문 폭이 한꺼번에 밀렸다. * 메뉴를 누를 때마다 사이드바가 사라졌다 폭이 출렁이고 다시 제자리로 오는 게 이것이다. * 에서 미리 읽히는 진짜 스타일시트로 옮기면 첫 그림부터 자리가 맞아 출렁이지 않는다. * * 사이드바가 있는 화면에서만 넣는다. 로그인·농장지도처럼 사이드바가 없는 화면에는 넣지 않는다. * 접힘 여부는 config.js 가 화면 그려지기 전에 로 알려 준다. * 한울 그린(calm)은 calm.css 가 더 구체적인 규칙으로 항상 108px 을 쓰므로 여기 값과 무관하다. */ /* 폰: 사이드바가 화면 밖에 있으니 사이드바 몫은 빼고, 화면 자체의 바깥 여백(12px)은 오른쪽과 똑같이 남긴다. 0 으로 두면 왼쪽만 여백이 없어 글이 화면 끝에 붙는다. 위쪽은 상단 바(52px) 몫을 남긴다. */ @media (max-width: 768px) { body { padding-left: 12px !important; padding-top: 64px !important; } } /* 본문 영역 여백 */ @media (min-width: 769px) { body { /* 240px = 사이드바 폭 + 20px = 화면 바깥 여백(오른쪽과 같게). 딱 240 으로 맞추면 콘텐츠 왼쪽 끝이 사이드바 경계에 붙어 z-index 높은 사이드바가 그 자리 클릭을 가로채고(통계 화면의 전주 단추가 안 눌렸다), 왼쪽만 여백이 없어 보였다. */ padding-left: 260px; transition: padding-left 0.32s cubic-bezier(.4,0,.2,1); } :root[data-sb-fold] body, body.sidebar-collapsed { padding-left: 108px; } } /* 큰 모니터(1700px 이상)에서는 본문을 넓게 쓴다. 페이지마다 .container / .wrap / .dash 가 1400px 에서 멈춰 1920 화면에서 양옆 120px 씩이 비었다. 폰·노트북(1680 이하)은 화면 폭이 먼저 막아 지금과 똑같다. 2560 에서는 1900 에서 멈춘다(눈이 좌우로 너무 움직인다). body > 로 한정한 것은 카드 안쪽에 같은 이름을 쓰는 곳(모달 등)을 건드리지 않기 위해서다. */ @media (min-width: 1700px) { body > .container, body > .wrap, body > .dash { max-width: 1900px; } } /* 첫 그림에서는 여백이 이미 맞아 있으므로 애니메이션이 돌 일이 없다. 사람이 로고를 눌러 접고 펼 때만 위 transition 이 움직인다. */ @media (prefers-reduced-motion: reduce) { body { transition: none !important; } }