/* ============================================================================
작은 화면(노트북) 대응 — 전역 반응형 레이어
----------------------------------------------------------------------------
이 프로젝트의 화면은 24인치 모니터(1920~2560px) 기준으로 만들어져 있어,
14인치 맥북(1512x982, 텍스트 크게 설정 시 1280x832)에서 상단 nav 의 로그아웃
버튼과 조회폼 버튼줄이 화면 밖으로 밀려나 클릭할 수 없었다.
축소 우선순위 (요구사항):
(1) 여백을 먼저 줄이고 (2) 그다음 컴포넌트 크기를 줄여서
(3) 최대한 한 줄로 유지 (4) 글씨가 깨질 지경이면 그때 배치를 바꾼다
이를 미디어쿼리 4단이 아니라 clamp() 보간 구간을 어긋나게 잡아 표현한다.
여백 : 1920 -> 1600 구간에서 축소 완료
크기 : 1600 -> 1280 구간에서 축소
한 줄 : flex-wrap (상시, 넘칠 때만 자동 발동)
재배치 : @media (명시적)
1600px 에서 여백이 이미 바닥이므로, 14인치(1512)로 내려오면 여백은 최소 상태이고
그때부터 컴포넌트가 줄기 시작한다.
설계 규칙 (지킬 것):
- 모든 clamp() 의 최대값 = 현재 하드코딩된 값. 따라서 1920px 에서는 픽셀 무변화.
- 파일 전체를 @media screen 으로 감싼다. @media print 를 쓰는 인쇄 서식과 완전 격리
(vw 는 인쇄 시 용지 폭 기준이라 토큰이 엉뚱한 바닥값이 된다).
- 기존 my_css.css / dashboard_figma.css 는 수정하지 않는다. 이 파일은 head.html
에서 마지막에 로드되므로 캐스케이드 최후단이라 항상 이긴다.
- 문제 발생 시 head.html 의 이 파일 한 줄만 주석 처리하면 전부 원복된다.
- body{white-space:nowrap} 은 건드리지 않는다. flex-wrap 과 직교하므로 건드릴
이유가 없고, 826개 화면의 테이블 행 높이와 인쇄 서식이 여기에 의존한다.
- .col_min 의 !important 도 제거하지 않는다. 인라인 min-width 를 쓰는 화면이 있어
제거하면 렌더링이 예측 불가하게 바뀐다. 특이도를 올린 규칙으로만 덮는다.
========================================================================== */
@media screen {
/* ---------------------------------------------------------------------------
(a) 토큰
clamp 계수는 X = (MAX-MIN)/(V2-V1)*100, C = MIN - X/100*V1 로 산출.
--------------------------------------------------------------------------- */
:root {
/* (1) 여백 — 1920 -> 1600 */
--app-gutter-x: clamp(8px, 2.5vw - 32px, 16px); /* .search_box 거터 */
--app-gap-btn: clamp(2px, 0.625vw - 8px, 4px); /* 버튼 사이 gap-1 */
--app-pad-x: clamp(6px, 0.625vw - 4px, 8px); /* btn-sm / form-control-sm 좌우 */
--app-aside-pad-x: clamp(10px, 1.5625vw - 15px, 15px); /* #aside 좌우 */
--app-nav-gap: clamp(6px, 1.875vw - 24px, 12px); /* nav 버튼 묶음 안쪽 */
--app-nav-gap-outer: clamp(6px, 2.8125vw - 39px, 15px); /* #nav_right 바깥 */
/* (2) 컴포넌트 크기 — 1600 -> 1280 */
--app-btn-min: clamp(88px, 13.125vw - 80px, 130px);
--app-field-min: clamp(96px, 10.625vw - 40px, 130px);
--app-field-min-sm: clamp(76px, 7.5vw - 20px, 100px);
--app-font-sm: clamp(12px, 0.625vw + 4px, 14px); /* 하한 12px = 한글 가독 한계 */
--app-nav-logo-w: clamp(130px, 25vw - 190px, 210px);
--app-nav-search-w: clamp(160px, 37.5vw - 320px, 280px);
/* 기존 변수 재정의 — 이름을 유지하므로 dashboard_figma.css 의 참조처
(#aside width, #main padding-left, #nav height)가 자동으로 따라온다 */
--figma-sidebar-width: clamp(200px, 12.5vw + 40px, 240px);
--figma-nav-height: clamp(60px, 3.125vw + 20px, 70px);
}
/* ---------------------------------------------------------------------------
(b) 상단 #nav — 전 화면(826개) 공통. 로그아웃 버튼 소실의 직접 원인.
#nav 는 position:fixed 라 넘쳐도 문서 가로 스크롤이 생기지 않는다. 즉 밀려난
버튼은 스크롤로도 도달할 수 없이 사라진다. 자식들을 축소 가능하게 만든다.
--------------------------------------------------------------------------- */
#nav {
height: var(--figma-nav-height);
}
#nav_right {
flex: 1 1 auto;
min-width: 0;
justify-content: flex-end;
gap: var(--app-nav-gap-outer);
}
#nav_right > * {
flex: 0 0 auto;
}
/* nav.html 의 버튼 묶음 래퍼가 인라인 style="gap:12px" 를 갖고 있어 덮는다 */
#nav_right > div {
gap: var(--app-nav-gap) !important;
}
#base_logo_div {
flex: 0 1 auto;
min-width: 0;
}
/* 인라인 width:210px / width:280px 를 !important 로 덮는다 */
#logo_img {
width: var(--app-nav-logo-w) !important;
}
#nav-menu-search {
width: var(--app-nav-search-w) !important;
}
/* 현재 display:none 이지만 켜지는 순간 min-width:520px + padding 90px 로 즉시 터진다 */
.urgent-notice-btn {
min-width: min(520px, 100%) !important;
padding: 10px clamp(16px, 5vw, 90px) !important;
}
/* ---------------------------------------------------------------------------
(c) 조회폼/버튼줄 — 본문 영역. 370개 툴바 화면 공통.
.search_box(= bootstrap .row)는 이미 flex-wrap:wrap 이라 버튼 묶음이 통째로
다음 줄로 내려가는 건 된다. 문제는 "묶음 안쪽"이 안 쪼개진다는 것 하나뿐이다.
button_box 는 overflow-auto 라 잘리지는 않지만 스크롤바가 있는 줄 모르면
버튼이 사라진 것으로 보인다 -> 스크롤 대신 줄바꿈으로 바꾼다.
--------------------------------------------------------------------------- */
.overflow-auto.d-flex.gap-1 {
flex-wrap: wrap;
overflow: visible !important;
row-gap: var(--app-gap-btn);
}
.search_box > .col-auto.d-flex {
flex-wrap: wrap;
row-gap: var(--app-gap-btn);
}
.search_box > .col-auto {
min-width: 0;
}
/* 여백 — .gx-3 는 --bs-gutter-x 변수 기반이라 값만 갈아끼우면 된다 */
.search_box {
--bs-gutter-x: var(--app-gutter-x);
}
.search_box .gap-1,
.overflow-auto.d-flex.gap-1 {
gap: var(--app-gap-btn) !important;
}
/* 컴포넌트 최소폭 — .btn.col_min(0,2,0) 으로 특이도를 올려 "버튼만" 줄인다.
val.py 가 input/select 에도 col_min 을 붙이는데 그쪽은 .btn 이 없으므로 유지된다. */
.btn.col_min,
button.col_min,
a.btn.col_min,
.btn_print, .btn_post, .btn_black, .btn_get, .btn_blue, .btn_red {
min-width: var(--app-btn-min) !important;
}
.btn_print, .btn_post, .btn_black, .btn_get, .btn_blue, .btn_red {
font-size: var(--app-font-sm);
padding-left: var(--app-pad-x);
padding-right: var(--app-pad-x);
}
/* 부트스트랩 sm 변형 */
.btn-sm, .btn-group-sm > .btn {
--bs-btn-font-size: var(--app-font-sm);
--bs-btn-padding-x: var(--app-pad-x);
}
.form-control-sm, .form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
font-size: var(--app-font-sm);
padding-left: var(--app-pad-x);
padding-right: var(--app-pad-x);
}
/* select 는 오른쪽에 화살표가 그려지므로 그 자리를 남겨야 글자가 화살표와 겹치지 않는다
(부트스트랩 기본 2.25rem 을 위 규칙이 지워 버려 배차시간 시행일 상자에서 겹침) 260916 */
.form-select-sm,
.input-group-sm > .form-select {
padding-right: calc(var(--app-pad-x) + 1.5rem);
}
/* Select2 는 컨테이너에 인라인 width 를 직접 찍으므로(위젯의 width=500/250/130)
CSS 로는 상한만 걸 수 있다 */
.search_box .select2-container {
max-width: 100%;
}
/* ---------------------------------------------------------------------------
(d) 셸 좌표계 — my_css.css 의 매직넘버(240/250/70)를 변수로 덮는다
--------------------------------------------------------------------------- */
#aside {
width: var(--figma-sidebar-width) !important;
padding-left: var(--app-aside-pad-x) !important;
padding-right: var(--app-aside-pad-x) !important;
}
#main {
padding-left: var(--figma-sidebar-width) !important;
padding-top: var(--figma-nav-height) !important;
}
#sidebar-collapse-btn {
left: var(--figma-sidebar-width);
}
/* 인라인 left 가 있는 것(2분할 화면의 우측 패널)은 건드리지 않는다
- dashboard_figma.css:534 의 기존 관례와 동일
사이드바(#aside)가 있는 화면으로 한정한다. 입·출차 관제·출차 전광판·노선도처럼
base 를 안 쓰는 독립 팝업은 #aside 가 없는데도 이 규칙을 받아 프레임이 사이드바
폭만큼 오른쪽으로 밀리고 왼쪽이 빈 채로 떴다(260923). 그 화면들은 자기 CSS 의
left: 1vw 가 맞다. */
#aside ~ #main .scroll_div:not([style*="left:"]),
#aside ~ #main .scroll_div_border:not([style*="left:"]) {
left: calc(var(--figma-sidebar-width) + 10px);
}
} /* @media screen */
/* 액션 버튼 묶음을 전폭 별도 줄로 — 여기서부터는 한 줄을 포기한다 */
@media screen and (max-width: 1280px) {
.search_box > .col-auto.ms-auto {
flex: 0 0 100%;
max-width: 100%;
margin-left: 0 !important;
justify-content: flex-end;
}
}
/* ---------------------------------------------------------------------------
(4) 배치 변경 — 여기부터는 값이 아니라 구조를 바꾼다.
nav 우측 버튼의 라벨은 없는 bare text node 라 display:none 으로는 못
숨긴다. 부모에 font-size:0 을 주고 .material-icons 만 되살리면 아이콘만 남는다
(템플릿 수정 0건, 킬스위치로 CSS 를 끄면 완전 원복).
--------------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
.totalboard-btn,
.groupware-btn,
.inquiry-btn {
font-size: 0 !important;
gap: 0 !important;
padding: 10px 12px !important;
}
.totalboard-btn .material-icons,
.groupware-btn .material-icons,
.inquiry-btn .material-icons {
font-size: 20px !important;
}
/* 로고 폭이 줄기 시작하므로 가로로 눌리지 않게 (기본 object-fit 은 fill) */
#logo_img { object-fit: contain; }
}
@media screen and (max-width: 1200px) {
.logout-btn {
font-size: 0 !important;
padding: 10px 12px !important;
}
.logout-btn .material-icons { font-size: 20px !important; }
/* 사용자명이 길면 말줄임 */
#nav_right > span.m-1 {
display: inline-block;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
}
/* 최후 안전망 — 위 축소로도 모자라면 잘려 사라지는 대신 스크롤이라도 되게 */
@media screen and (max-width: 1100px) {
#nav_right {
overflow-x: auto;
scrollbar-width: thin;
}
}