(display:flex)/| 가 일반 블록 문서 흐름의
자식처럼 안정적으로 렌더링됨(반응형 테이블→카드 전환의 표준적인 방식). */
[data-category="address"] #data-table {
display: block;
width: 100%;
}
[data-category="address"] #data-table tbody {
display: block;
width: 100%;
}
/* 헤더(thead)도 더 이상 숨기지 않고 block으로 유지 — position:sticky/
top/z-index/background는 main.css의 카테고리 공용 규칙([data-category=
"address"] #data-table thead)을 그대로 물려받으므로 여기서는 display만
table-header-group에서 block으로 바꿔줌(PC/태블릿과 마찬가지로 모바일도
스크롤 시 항목명이 안 사라져야 한다는 3차 요구사항 3번). */
[data-category="address"] #data-table thead {
display: block;
}
[data-category="address"] #data-table thead tr {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 10px 14px;
border-bottom: 1px solid var(--color-border);
}
[data-category="address"] #data-table thead th {
border: none;
padding: 0;
font-weight: 600;
font-size: 12.5px;
color: var(--color-text-muted);
text-align: left;
}
/* 주소는 헤더에서 라벨 자체가 없는 필드(항목의 "제목" 역할)라 헤더 행에서만
숨김 — 데이터 행(tbody)의 주소 셀은 그대로 표시. */
[data-category="address"] #data-table thead .address-cell-street-cell {
display: none;
}
[data-category="address"] #data-table tbody tr {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 10px 14px;
}
[data-category="address"] #data-table tbody tr td {
/* 셀 하나하나가 아니라 행(tr) 전체에 padding/구분선을 한 번만 주므로
기본 셀 padding/border는 제거(중복 방지). */
border-bottom: none;
padding: 3px 0;
}
[data-category="address"] #data-table tbody tr:not(.js-empty-row) {
border-bottom: 1px solid var(--color-border);
}
[data-category="address"] .js-empty-row .empty-row {
flex: 1 1 100%;
}
.col-address-postal-cell {
display: none;
}
/* 1번째 줄: 건물명(왼쪽 절반) + 출입번호(오른쪽 절반), 2번째 줄: 주소(전체 폭,
길면 자동으로 여러 줄) — DOM 순서(우편번호-건물명-주소-출입번호, PC와
동일하게 유지)와 무관하게 order로만 시각적 순서를 재배치(헤더 행에도 th가
동일 클래스를 공유하므로 그대로 적용됨 — PC와 같은 좌우 배치). 건물명/
출입번호가 50%씩 나눠 쓰다 내용이 넘치면(2026-07-27 요구사항: 항상 전체
표시) 잘리지 않고 줄바꿈되도록 main.css의 공통 규칙(.address-cell-building
등 white-space:normal)을 그대로 물려받음 — 여기서 따로 안 건드림. */
.address-cell-building {
order: 1;
flex: 1 1 50%;
}
.address-cell-entrance-cell {
order: 2;
flex: 1 1 50%;
}
.address-cell-street-cell {
order: 3;
flex: 1 1 100%;
margin-top: 4px;
}
/* 모바일에서 건물명 "데이터"만 굵게(2026-07-27 3차 요청 4번) — 헤더 라벨
"건물명"은 그대로 두고 tbody의 실제 값에만 적용. */
[data-category="address"] #data-table tbody .address-cell-building {
font-weight: 700;
}
/* 모바일 네비게이션 2줄 구조(2026-07-18) — 1줄: 사이트명 텍스트만(세이지그린
배너), 2줄: 로고 아이콘+카테고리 탭+햄버거(기존 그대로). 데스크톱/태블릿은
이 미디어쿼리 밖이라 전혀 영향 없음(기존 1줄 구조 그대로 유지). */
.app-header__top-mobile {
display: block;
background: #E9F0E3;
color: #5E7A4E;
font-weight: 600;
font-size: 13px;
padding: 6px 12px;
text-align: center;
}
/* 모바일 상단 네비게이션 전면 재구성(2026-07-14) — 맨 윗줄 1개(로고 아이콘 +
카테고리 탭 5개 축약형 + 햄버거)만 항상 고정 노출하고, 계정정보/로그아웃/
권한관리는 전부 햄버거 드롭다운(.app-nav__dropdown-menu)으로 이동. 데스크톱/
태블릿의 .app-nav(풀네임 링크 + 인라인 계정정보, "임시열람권 관리" 탭 포함)는
이 미디어쿼리 밖이라 전혀 영향 없음 — 그대로 유지됨. */
.app-header__inner {
flex-wrap: nowrap;
gap: 8px;
padding: 0 12px;
position: relative; /* .app-nav__dropdown-menu의 위치 기준점 */
}
.app-header__brand-text {
display: none;
}
.app-header__brand-icon {
display: inline-flex;
}
.app-nav {
flex: 1;
min-width: 0; /* flex item이 콘텐츠 크기 밑으로 줄어들 수 있어야 안의 overflow-x:auto가 실제로 동작함 */
}
.app-nav__links {
flex: 1;
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
gap: 4px;
-webkit-overflow-scrolling: touch;
}
/* 컨테이너 padding-right만으로는 일부 브라우저가 스크롤 끝의 여백을 무시하는
경우가 있어(flex+overflow 조합에서 흔한 현상), 실제 flex 아이템인 가상
스페이서를 하나 더 둬서 "가로스크롤 끝까지 밀어도 마지막 탭이 잘리는" 문제를
확실하게 막음 — 지난 회차에 발견됐던 문제의 재발 방지. */
.app-nav__links::after {
content: '';
flex: 0 0 4px;
}
.app-nav__link {
padding: 10px 10px;
flex: 0 0 auto;
/* 2026-07-14: 축약형(가입/기기/제품/주소/개인) 대신 풀네임을 유지하되 폰트
크기를 10% 줄여서(14px→12.6px) 폭을 최대한 확보 — 계산상 완전히 한 줄에
들어간다고 보장되진 않아 .app-nav__links의 overflow-x:auto 안전장치는
그대로 유지(실브라우저 확인 예정). */
font-size: 12.6px;
}
/* 태블릿/PC는 이 미디어쿼리 밖이라 원래 폰트 크기(14px)와 풀네임을 그대로 유지. */
.app-nav__link-full {
display: inline;
}
.app-nav__link-short {
display: none;
}
/* "권한관리" 탭은 원래 모바일 맨 윗줄에서 제거하고 햄버거 드롭다운으로만
접근하게 했었는데(카테고리 탭과 다른 성격이라는 판단), 카테고리 탭 줄에도
보여야 한다는 피드백으로 숨김을 해제함(2026-07-17) — 드롭다운 메뉴에도
여전히 남아있어 두 경로 모두로 접근 가능(중복이지만 해가 되지 않아 그대로 둠). */
/* 데스크톱 전용 인라인 계정정보/로그아웃 — 모바일에서는 드롭다운 버전으로 대체. */
.app-nav__user {
display: none;
}
.app-nav__toggle-label {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.app-nav__dropdown-menu {
position: absolute;
top: 100%;
right: 12px;
margin-top: 6px;
min-width: 180px;
background: var(--color-surface);
color: var(--color-text);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 8px;
z-index: 30;
}
.app-nav__toggle-input:checked ~ .app-nav__dropdown-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.app-nav__dropdown-account {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 4px;
}
.app-nav__dropdown-account .app-nav__user-name {
color: var(--color-text);
font-weight: 600;
}
.app-nav__dropdown-link {
padding: 10px;
border-radius: var(--radius);
color: var(--color-text);
font-size: 14px;
}
.app-nav__dropdown-link:hover {
background: var(--color-bg);
text-decoration: none;
}
.app-nav__dropdown-link.is-active {
/* 이 드롭다운엔 현재 "권한관리" 항목만 들어있어(mobileMenuItems, nav.ejs)
계정(account) 색이 아니라 admin 색을 쓰는 게 맞음 — 예전엔 무관하게
account-bg를 재사용하고 있었음(2026-07-17 정리). */
background: var(--color-admin-bg);
font-weight: 600;
}
.hub-grid {
grid-template-columns: 1fr;
}
.card-grid {
grid-template-columns: 1fr;
}
/* 검색어 입력란 + 정렬 드롭다운은 스마트폰 폭까지 줄어들어도 세로로 안
쌓이고 한 줄에 같이 보이게 함(2026-07-16) — 기존엔 flex-direction:column
으로 강제 스택시켰던 게 원인. 검색 입력란의 min-width(180px, main.css
.list-toolbar input[type=search])를 그대로 두면 좁은 화면에서 select와
합쳐 컨테이너 폭을 넘어 nowrap이어도 잘릴 수 있어 여기서만 0으로 풀어줌 —
select는 내용 기준 자동 폭이라 별도 처리 불필요. */
.list-toolbar {
flex-wrap: nowrap;
}
.list-toolbar input[type="search"] {
min-width: 0;
}
.list-toolbar select {
flex: 0 0 auto;
}
.detail-field {
grid-template-columns: 1fr;
gap: 4px;
}
.detail-field__label {
font-size: 12px;
}
.page__header {
flex-direction: column;
align-items: flex-start;
}
/* "신규 데이터 입력" 버튼: 모바일은 아이콘만(라벨 span 자체를 감춤, 2026-07-16) —
계정칩(계정명)과 버튼 텍스트가 같은 줄에서 같이 표시되면 좁은 화면에서
줄바꿈/잘림이 생기는 문제를 피하기 위함. PC/태블릿은 main.css 기본값대로
아이콘+텍스트 둘 다 유지(이 미디어쿼리 밖). */
.btn--icon-only__label {
display: none;
}
.btn--icon-only {
padding: 9px 12px;
}
/* 권한관리 매트릭스 표 설명 — 모바일에서는 앞뒤 문장("셀을 클릭하면"/"순서대로
바뀌면서 즉시 저장됩니다")을 감추고 괄호로 묶인 아이콘 순서 부분만 한 줄로
보여줌(2026-07-17). 폭이 좁아 그래도 한 줄에 다 안 들어갈 경우를 대비해
nowrap + overflow-x:auto로 안전하게 가로 스크롤 처리(칸이 넘칠 때 줄바꿈
대신 스크롤 — 이 프로젝트의 테이블 컬럼과 동일한 원칙). */
.grant-matrix-legend {
flex-wrap: nowrap;
overflow-x: auto;
}
.grant-matrix-legend-prefix,
.grant-matrix-legend-suffix {
display: none;
}
.grant-matrix-legend-cycle {
/* display/align-items/gap은 main.css 기본 규칙(상하 중앙정렬)으로 이미
적용됨 — 모바일에서만 다른 값(한 줄 강제 + 폰트 축소)만 여기서 추가.
"열람+수정+삭제" 뒤에 를 추가(괄호 앞 두 칸 간격)하면서 12px에서는
마지막 ")"까지 화면 밖으로 밀려 안 보이는 문제가 생겨(2026-07-17,
실기기 스크린샷으로 확인) 11px로 살짝 더 줄임. */
white-space: nowrap;
font-size: 11px;
}
/* 권한관리 매트릭스 — 스마트폰 실기기 스크린샷 기준 가로 스크롤 전에 계정
6개 정도만 보이던 걸 개선하기 위해 셀 패딩/폭/폰트를 축소(2026-07-17).
PC/태블릿은 이 미디어쿼리 밖이라 기존 값(56px, 패딩 12px 14px) 그대로 유지.
컬럼 폭은 | / | 자체의 width로 지정했었는데 table-layout:auto에서
브라우저가 힌트로만 취급해 무시하는 것으로 확인됨(서로 다른 브라우저 2개,
캐시 완전 삭제 후에도 30~60px 변경이 전혀 반영 안 됨) — 내부
span(.grant-cell__inner/.grant-matrix-grantee-label__inner/
.grant-matrix-axis-caption__inner, 전부 display:block 또는 inline-block)에
width를 주는 방식으로 교체(main.css 참고). 이 방식으로 바꾸자 실제로 폭
조정이 반영되기 시작했고, 처음 시도한 60px는 실제로 적용되니 계정
4~5개만 보일 정도로 과하게 넓었음(2026-07-17 스크린샷으로 확인) — 목표인
"공용까지 스크롤 없이, HK는 스크롤" 기준으로 대폭 축소. */
.grant-matrix-table th,
.grant-matrix-table td {
padding: 6px 4px;
}
.grant-cell {
font-size: 13px;
}
.grant-cell__inner {
/* 30px에서도 IH까지만 보이고 IJ/공용은 여전히 스크롤해야 보였다는
피드백(2026-07-17)으로 24px로 추가 축소. */
width: 24px;
}
.grant-matrix-owner-label {
font-size: 11px;
}
.grant-matrix-table th.grant-matrix-grantee-label {
font-size: 11px;
}
.grant-matrix-grantee-label__inner {
width: 22px;
}
.grant-matrix-axis-caption--left {
font-size: 10px;
}
.grant-matrix-axis-caption__inner {
width: 16px;
}
.grant-matrix-table th.grant-matrix-axis-caption--top {
font-size: 10px;
}
}
|