@charset "utf-8"; /* ---------------------------------------------------------------------------------------------- * ORANGE-PMI PLATFORM Version 2.0.0 - Last modified 2026-09-22 * Modular Web Architecture · Powered by Orangecommunication · www.oranc.net * ---------------------------------------------------------------------------------------------- * 표 공용 컴포넌트 — 목록형 · 입력형을 한 class 로 겸한다. * * table.css (public_html//asset/css) — 이 사이트의 base.php 가 `site::css/table.css` 로 건다. * 앞에 `variables.css` 와 `form.css` 가 먼저 와야 한다 — 색·치수 토큰을 읽고, 표 안의 입력칸 * 크기를 `form.css` 의 기본값 위에 덮어쓰기 때문이다(아래 "목록 행 안의 조작 요소"). * **이 사이트 소유**다 — 같은 파일이 사이트마다 한 벌씩 있다 (2026-09-21 사용자 결정: * 업그레이드가 덮어쓰는 `asset/core/` 에 두지 않는다). 모양을 바꿀 때는 이 파일을 직접 고친다. * ⚠ **다른 사이트에도 같은 파일이 있다 — 한쪽만 고치면 갈라진다.** 공통 규칙을 손볼 때는 * `public_html//asset/css/` 아래 같은 이름을 **전부** 본다. 2026-09-21 이전에 이 복제로 * main 이 gwizard 의 수정을 3일간 못 받은 적이 있다. → global-template "공통 UI class" * * ── 담는 것 ──────────────────────────────────────────────────────────────── * c-table 본체 — 목록형(thead 있음)과 입력형(tbody th 가 라벨)을 겸한다 * c-table--sub 다른 표의 셀 안에 놓이는 작은 격자 * c-table__th--grp 라벨 칸이 2단인 행의 예외 폭 * c-table__actions 행마다 붙는 관리 버튼 칸 * c-treerow 계층 목록의 한 줄 조작 묶음 * is-depth0~3 계층 깊이(행 배경) · is-hidden 숨김 행 * ✗ 빈 목록 안내(`c-empty`)는 ui.css — 표를 **대신**하는 `

` 라 표의 내부 요소가 아니다. * * ※ 값의 출처는 gwizard 의 레거시 관리자 CSS 다 [구 .gtable] * ---------------------------------------------------------------------------------------------- */ /* 본체 — 목록형(thead 있음)과 상세·입력형(tbody th 가 라벨)을 한 class 로 겸한다 border-collapse·width·table-layout 을 여기서 잡으므로 마크업의 border·cellpadding·cellspacing· width 속성은 필요 없다. ★ 바탕은 **흰색**이다 — 표 자신이 갖는다. 예전엔 배경이 없어 부모(c-panel)의 흰색이 비쳐 보였는데, 그러면 상자 밖에 놓인 표는 페이지 배경이 그대로 올라온다(사용자 지시 2026-09-18). table 요소에 주므로 행 배경(is-depth*·:hover)은 그 위에 그려진다 — 계층 표현은 그대로다. ★ 사방이 **닫혀 있다** — 예전에는 first/last-child 의 좌우 테두리를 지워 표 양옆이 열려 있었다 (레거시 .gtable 모양). 상자 안에 들어가면서 그 열린 끝이 상자 테두리와 어긋나 보인다. border-collapse:collapse 라 셀의 테두리가 곧 표의 바깥선이 된다 — 따로 표에 border 를 두지 않는다. */ .c-table {border-collapse:collapse; border-spacing:0; width:100%; table-layout:fixed; letter-spacing:-1px; background:#fff; font-size:var(--font-size-sm);} /* 표 안은 본문보다 한 단계 작다(2026-09-23 사용자 지시) */ /* ★ 머리줄은 **통째로 사이트가 바꾸는 축**이라 다섯 가지가 전부 토큰이다 (2026-09-22). 관리자는 진한 바탕에 흰 글자, 사용자쪽은 밝은 회색 바탕에 검은 글자다 — 레거시에서도 두 사이트가 같은 `.gtable` 을 **다른 값**으로 그렸다(gwizard #798291+#fff / main #f2f2f2+#111). 규칙은 여기 한 벌, 값만 `variables.css` 에서 갈린다. → global-template "공통 UI class" ※ 링크색은 머리줄 안에서만 쓴다 — 바탕이 어두우면 밝은 노랑, 밝으면 `inherit`(본문색 그대로)다. */ .c-table thead th {background:var(--bg-thead); color:var(--color-thead-ink); padding:var(--thead-pad); font-weight:var(--thead-weight); letter-spacing:0; border:1px solid var(--border-color-thead);} .c-table thead th a {color:var(--color-thead-link);} /* tbody 의 th 는 **항목 이름**이다(폼의 왼쪽 라벨 칸) — 값과 한눈에 갈리게 굵게 둔다. ★ 여백이 `--cell-pad` 와 **따로**인 이유 — 관리자는 라벨 칸이 값 칸보다 한 단계 넓다(8 : 6). 사용자쪽은 레거시가 둘을 같은 값으로 뒀다 — 그 차이를 사이트가 정한다. */ .c-table tbody th {padding:var(--label-pad); font-weight:600; color:var(--color-label-ink); background:var(--bg-label); border:1px solid var(--border-color-label);} .c-table tbody th[rowspan] {background:var(--bg-label);} /* ★ 라벨 칸 폭은 **`--label-width` 가 기본**이다 — 토큰에서 한 번 정한다 (2026-09-21 사용자 지시). 예전에는 화면마다 처럼 마크업이 들고 있었다: 같은 관리화면인데 140·160·200·220 이 섞여 화면을 옮길 때마다 라벨 칸이 들썩였다. 표가 `table-layout:fixed` 라 **첫 행의 th 폭이 곧 그 표의 열 폭**이므로, 한 곳에서 주면 모든 입력형 표의 라벨이 세로로 맞는다. ★ 자식 선택자(`> tbody > tr >`)인 이유 — 입력형 표의 칸 안에 **다른 표가 들어간다**(메뉴 관리의 회원구분 접근권한 = .c-table--sub). 후손 선택자로 쓰면 그 속표의 th 까지 걸려 '작은 표'가 아니게 된다. 속표가 `c-table` 을 함께 달게 된 뒤로는 이 자식 선택자마저 걸리므로, 아래 `--sub` 절이 `table.` 로 명시도를 한 단계 더 올려 되돌린다. ★ 목록형(thead th)은 **걸리지 않는다** — 열마다 폭이 다른 것이 목록이다(정렬 70 · 등록일 150 …). 그쪽 폭은 지금도 마크업의 width 속성이 들고 있다. ※ 기본 폭이 아니어야 하는 자리는 아래 예외 class 로 **따로** 준다. */ .c-table > tbody > tr > th {width:var(--label-width);} /* 예외 — 라벨이 **2단인 행**: 묶음 라벨(rowspan) + 그 아래 갈래 라벨이 한 행에 나란히 선다 (시스템 설정의 '요청 검증 모듈 | 검증단위'). 둘을 합쳐 110+90 = **기본 폭과 같다** — 위아래 다른 표의 라벨 칸과 값 칸 경계가 어긋나지 않는다: 나눠 쓰는 것이지 넓히는 것이 아니다. ⚠ `--label-width` 를 고치면 이 둘의 합도 그 값이 되게 같이 고친다 — 합이 어긋나면 경계가 틀어진다. */ .c-table > tbody > tr > th.c-table__th--grp {width:110px;} .c-table > tbody > tr > th.c-table__th--sub {width:90px;} .c-table tbody td {padding:var(--cell-pad); word-break:break-all; border:1px solid var(--border-color-cell); height:var(--row-height);} /* ★ 목록형의 기본 정렬은 **가운데** (2026-09-19 사용자 지시). 목록 칸은 대개 날짜·상태·건수처럼 길이가 고른 짧은 값이라 가운데가 읽기 좋다. 길이가 들쭉날쭉한 칸(기업명·업종·주소)만 `u-text-left` 로 왼쪽에 붙인다(아래 "유틸리티 보정"). ★ **`thead + tbody` 인 이유** — `.c-table` 은 목록형과 입력형(tbody th 가 라벨)을 겸한다. `tbody td` 에 그냥 주면 입력 폼의 입력칸까지 가운데로 간다. 머리줄이 있는 표 = 목록형이라 그 인접 형제만 고른다. 입력형은 thead 가 없어 안 걸린다. */ .c-table thead + tbody td {text-align:center;} /* ★ 목록 **행 안의 조작 요소**는 기본(`--control-height`)보다 한 단계 작은 **`--control-height-sm` 한 벌**이다 (2026-09-19 사용자 지시). 숫자가 물려 있다: 행 44 - 위아래 여백 12 = 칸 32px 안에 28 이 들어가고 위아래 2px 이 남는다. ⚠ **입력칸의 마진은 0 으로 죽인다** — 아래 `.c-table input[type="text"]` 의 1px 이 살아 있으면 같은 높이라도 위아래가 1px 씩 깎여 **select 옆에서 혼자 작아 보인다**(실제로 그랬다). ⚠ `--row-height` 나 td 의 padding 을 고치면 이 넷도 다시 맞출 것 — 한 줄에 나란히 서므로 하나만 크면 그것만 튀어나와 행이 통째로 그 크기로 늘어난다(form.css `.c-input` 절의 ★ 참고). ★ 목록형(thead 있는 표)에만 준다 — 입력 폼의 입력칸까지 작아지면 안 된다. `.c-treerow`(계층 목록의 한 줄 묶음) 안의 이름칸도 .c-input 이라 같이 걸린다(의도한 것 — 같은 행에 있다). ※ 정렬 화살표를 위한 별도 줄은 **없다** — 2026-09-21 에 `.arr_top`/`.arr_btm` 이 `c-btn` 으로 합쳐졌다(▲▼ 글자). 그래서 위 `.c-btn` 한 줄이 화살표까지 같이 줄여 준다. */ /* ⚠ `min-width` 를 **같이** 줄인다 — 줄 높이만 줄이면 버튼이 낮아지는데 최소 폭은 기본값(--control-height) 으로 남아, 한 글자 버튼([+][M][C][▲][▼])이 **가로로 길쭉해진다**(ui.css `.c-btn` 절의 "한 글자면 정사각"). */ .c-table thead + tbody td .c-btn {line-height:calc(var(--control-height-sm) - 2px); min-width:var(--control-height-sm); padding:0 8px;} .c-table thead + tbody td .c-input {height:var(--control-height-sm); line-height:calc(var(--control-height-sm) - 2px); margin:0;} .c-table thead + tbody td .c-select {height:var(--control-height-sm); line-height:calc(var(--control-height-sm) - 2px);} /* 계층 목록의 깊이별 행 배경 — 루트가 가장 밝고 내려갈수록 진해진다. 들여쓰기 'ㄴ' 만으로는 가지가 길어질 때 한 카테고리의 범위가 눈에 안 들어온다(메뉴 관리). 4단 이상은 is-depth3 으로 묶는다. ★ **상태(`is-`)다** — 같은 행이 자기 깊이에 따라 띠는 모습이라 컴포넌트의 변형이 아니다. 마크업이 `class="is-depth"` 로 **숫자를 조립**하므로 이름이 규칙적이어야 한다. :hover 는 이 규칙들 **뒤**에 와야 이긴다 — 같은 명시도라 순서가 우선순위다. ※ 넷은 `--color-primary` 에서 눈으로 뽑은 옅은 파랑이다 — 계산으로 나오지 않아 토큰 ✗(주조색을 주조색을 바꾸면 이 넷도 같이 고친다). */ .c-table tbody tr.is-depth0 {background:#fff;} .c-table tbody tr.is-depth1 {background:#f4f7fb;} .c-table tbody tr.is-depth2 {background:#eaf1f9;} .c-table tbody tr.is-depth3 {background:#dfe9f6;} /* 행 hover — **목록 표에만**. 입력형 표(머리줄이 없는 폼)는 행을 고르는 화면이 아니라, 지나가기만 해도 줄이 물드는 것이 방해였다(사용자 지적 2026-09-23). 구분은 머리줄(thead) 유무다 — 같은 파일의 다른 규칙도 그 기준을 쓴다. */ .c-table thead + tbody tr:hover {background:var(--bg-row-hover);} /* 계층 목록의 한 줄 조작 묶음 (메뉴 관리의 '(top) 메뉴명' 칸) 이름칸이 flex:1 로 남는 폭을 **다 먹는다** — 그래서 깊이가 달라도 오른쪽(체크·화살표·버튼)이 세로로 딱 맞는다. 들여쓰기를 글자( )로 밀면 그만큼 이름칸이 밀려 오른쪽 끝이 들쑥날쑥해진다. min-width:0 이 있어야 긴 값이 들어와도 이름칸이 형제를 밀어내지 않는다(flex 기본은 축소 거부). */ .c-treerow {display:flex; align-items:center; gap:var(--gap-inline);} .c-treerow__name {flex:1; min-width:0;} .c-treerow__indent {flex:none;} /* 1단계(루트) 이름칸만 강조 — 그 줄이 **한 카테고리의 머리**다. 깊이별 배경(is-depth*)은 아래로 갈수록 진해지는데 정작 루트가 가장 밝아, 훑을 때 카테고리 경계가 늦게 잡힌다(사용자 지적 2026-09-18). 행 배경을 건드리지 않고 **이름칸만** 파란 테두리·진한 글자로 세운다 — 배경까지 칠하면 깊이 표현과 싸운다. 마크업은 손대지 않는다: 깊이는 이미 에 있다(menu.list.php). :focus 가 더 진한 이유 — 이 규칙(명시도 0,3,2)이 .c-input:focus(0,2,0)를 이겨 눌린 표시가 안 보이게 되므로 여기서 다시 준다. */ .c-table tbody tr.is-depth0 .c-treerow__name {border-color:var(--color-primary); color:var(--color-primary-ink); font-weight:600;} .c-table tbody tr.is-depth0 .c-treerow__name:focus {border-color:var(--color-primary-ink);} /* 숨김('H')·그 하위 — 이름칸을 빨간 테두리로. cid 는 가운데줄로 이미 표시되지만 그건 왼쪽 끝이라, 이름을 훑는 눈에는 늦게 걸린다(사용자 지시 2026-09-18). ★ 위 1단계(is-depth0) 파란 테두리와 **명시도가 같다** — 그래서 **반드시 뒤에** 온다: 숨김인 1단계 메뉴는 파랑이 아니라 빨강이어야 한다("지금 안 보이는 메뉴"가 "카테고리 머리"보다 급한 사실이다). 두 규칙의 순서를 바꾸면 그 조합만 조용히 틀어진다. ⚠ 이 `is-hidden` 은 **화면에서 감추는 것이 아니다** — "숨김으로 설정된 메뉴 행"이라는 뜻이다. 감추는 유틸은 `u-hidden`(utilities.css)이고 둘은 다른 것이다. ※ 사용안함('N')은 손대지 않았다 — cid 의 빨강 가운데줄이 이미 그 뜻이고, 같은 빨강을 두 상태에 쓰면 숨김과 구분이 사라진다. */ .c-table tbody tr.is-hidden .c-treerow__name {border-color:var(--color-danger);} .c-table tbody tr.is-hidden .c-treerow__name:focus {border-color:var(--color-danger-ink);} /* 합계줄 — thead·tbody 와 같이 **사방을 닫는다**(위 ★). 예전엔 오른쪽·아래만 그어 왼쪽과 위가 비어 있었고, 마지막 칸은 그 오른쪽마저 지워 표가 오른쪽 아래로 트여 보였다. ※ 바탕·테두리(#d1d6e0·#b7bbc4)는 이 자리에서만 쓴다 — 토큰 ✗. */ .c-table tfoot th, .c-table tfoot td {background:#d1d6e0; color:#333; padding:0 6px; word-break:break-all; font-weight:normal; height:48px; line-height:48px; letter-spacing:0; border:1px solid #b7bbc4; text-align:center;} /* 표 안의 입력칸 — 행 높이가 들뜨지 않게 [구 .gtable input[type="text"]] */ .c-table input[type="text"] {margin:1px 0;} /* 작은 표 — **다른 표의 셀 안**에 놓이는 격자(행 × 열 선택. 메뉴의 회원구분 접근권한이 그 예). 마크업은 `class="c-table c-table--sub"` 로 쓴다 — 표의 **변형**이지 독립 컴포넌트가 아니다. ★ 선택자에 `table.` 을 붙여 명시도를 한 단계 올린다 — 이 표는 `c-table` 을 함께 달고 또 `c-table` **안에** 들어가므로, 위 규칙들이 두 경로로 내려온다(머리줄이 진회색 + 흰 글자가 되던 이유, 사용자 지적 2026-09-18). 같은 명시도면 파일에서 나중에 나온 쪽이 이겨 **규칙 순서에 끌려다니므로**, 순서와 무관하게 이기도록 못 박는다. ★ 라벨 폭도 되돌린다 — 위 `.c-table > tbody > tr > th`(0,1,3)를 `table.…`(0,1,4)로 이긴다. 이 한 줄이 없으면 속표의 첫 칸이 --label-width 로 벌어져 '작은 표'가 아니게 된다. ★ 작다 — 폭은 내용만큼(width:auto), 칸 높이는 글자만큼(--row-height 를 되돌린다), 글자도 한 단계 작다. `c-table` 은 화면을 나누는 표지만 이건 체크박스 몇 개를 담는 자리다. ★ letter-spacing 을 0 으로 되돌린다 — c-table 의 -1px 이 작은 글자에서 더 답답해 보인다. ※ 세 바탕색(#eef1f5·#f7f8fa·#fbfcfe)은 이 표에서만 쓴다 — 토큰 ✗. */ table.c-table--sub {width:auto; table-layout:auto; border-collapse:collapse; background:#fff; font-size:0.95em; letter-spacing:0;} table.c-table--sub > tbody > tr > th {width:auto;} table.c-table--sub th, table.c-table--sub td {padding:4px 12px; height:auto; border:1px solid var(--border-color-cell); text-align:center; white-space:nowrap; letter-spacing:0; word-break:keep-all;} table.c-table--sub thead th {background:#eef1f5; color:#333; font-weight:600;} table.c-table--sub tbody th {background:#f7f8fa; color:#333; font-weight:600; text-align:left;} table.c-table--sub tbody tr:hover {background:#fbfcfe;} /* 행마다 붙는 관리 버튼 칸 — 가운데, 줄바꿈 없음 [구 style="text-align:center; white-space:nowrap"] ★ **flex 다** (2026-09-21) — 예전에는 inline 흐름이라 버튼 사이 간격을 **태그 사이 공백**이 만들었다. 그 공백은 글자 크기와 `letter-spacing`(이 표는 -1px)에 끌려다녀 폭이 들쭉날쭉하고, 마크업에서 줄을 붙여 쓰면 아예 사라진다. flex 는 그 공백을 먹으므로 **간격이 gap 하나로만** 온다. ⚠ **`align-items:center` 를 빠뜨리지 말 것** — flex 의 기본값은 `stretch` 라, 안 주면 버튼이 **칸 높이(--row-height)만큼 세로로 늘어난다**. 버튼은 `line-height` 로 자기 높이를 만드는데 그게 무시된다(2026-09-21 에 실제로 그렇게 만들었다가 [수정][삭제]만 길쭉해졌다). 위 `.c-treerow` 에 같은 선언이 있는 이유도 같다. ※ `text-align`·`white-space` 는 남긴다 — flex item **안쪽** 글자에는 여전히 듣는다. */ .c-table__actions {display:flex; align-items:center; justify-content:center; gap:var(--gap-inline); text-align:center; white-space:nowrap;} /* ⚠ **이 두 묶음 안에서는 버튼이 자기 여백을 갖지 않는다** — 간격을 gap 이 주므로, `ui.css` 의 `.c-btn {margin-right:…}` 가 그대로 살아 있으면 **둘이 더해져** 다른 자리보다 넓어진다 (2026-09-21 에 실제로 그랬다: treerow 는 gap 4 + margin 3 = 7px, 관리 칸은 공백 2.5 + margin 3 = 5.5px 로 **같은 버튼인데 자리마다 간격이 달랐다**). 간격은 한 곳에서만 준다. */ .c-treerow .c-btn, .c-table__actions .c-btn {margin-right:0;} /* 칸 안에서 나란히 서는 **값 없음** 표시 앞의 간격 — 체크박스 뒤에 바로 오던 자리다 (목록의 콘텐츠 칸, 사용자 지적 2026-09-18). ⚠ **버튼은 여기서 빠졌다** (2026-09-21) — 버튼은 이제 `ui.css` 에서 `margin-right` 로 자기 간격을 갖는다. 여기 남겨 두면 두 규칙이 겹쳐 12px 이 된다. `* + X` 를 버튼에 쓰지 않는 이유도 그 절에 적혀 있다: 사이에 `` 같은 것이 끼면 **안 걸려서 붙어버린다**. `u-none` 은 그 hidden 바로 뒤에 오는 일이 없어 남긴다. ※ `u-none` 은 텍스트 유틸이라 다른 자리에서도 쓴다 — 거기에 margin 을 붙일 수는 없어서 이 칸의 사정으로 여기서 준다. */ .c-table td > * + .u-none {margin-left:6px;} /* 유틸리티 보정 — 목록형 표에서 `u-text-left` 가 먹게 한다 ===================================== `u-text-left`(0,1,0) 혼자로는 위 `.c-table thead + tbody td`(0,1,2)를 **못 이긴다** — 파일 순서로 utilities.css 가 뒤에 와도 명시도가 낮으면 지기 때문이다(cascade 는 명시도가 먼저다). 그래서 표가 자기 사정으로 **여기서** 한 단계 올려 준다. utilities.css 에 `!important` 를 박는 대신 이 방법을 쓴다 — 지침 12장 "!important 는 가능한 한 피한다". ✗ **`u-text-center` 짝은 두지 않는다** (2026-09-21) — 목록형은 위에서 이미 가운데라 거기에 `u-text-center` 를 붙일 일이 없고(지침 "가운데가 기본"), 입력형 표에는 `thead + tbody` 가 안 걸리므로 유틸 혼자로 충분하다. 이길 상대가 없는 보정은 두지 않는다. */ .c-table tbody td.u-text-left {text-align:left;} /* 개방형 — 표의 **좌우 바깥 세로선을 없앤다**(사용자 지시 2026-09-23). 가로선과 칸 사이 세로선은 그대로라 글은 나뉘어 보이되 표가 화면에 갇히지 않는다. 표 폭이 화면을 꽉 채우는 이 레이아웃에서는 바깥 세로선이 테두리처럼 보여 답답했다. ★ 첫 칸의 왼쪽과 마지막 칸의 오른쪽만 지운다 — 칸끼리의 경계는 손대지 않는다. */ .c-table > thead > tr > th:first-child, .c-table > tbody > tr > th:first-child, .c-table > tbody > tr > td:first-child {border-left:0;} .c-table > thead > tr > th:last-child, .c-table > tbody > tr > th:last-child, .c-table > tbody > tr > td:last-child {border-right:0;}