@charset "utf-8"; /* ---------------------------------------------------------------------------------------------- * ORANGE-PMI PLATFORM Version 2.0.0 - Last modified 2026-10-21 * 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-table-wrap 목록 표를 감싸는 가로 스크롤 틀 — 좁은 화면용 (2026-09-29 KRDS) * c-treerow 계층 목록의 한 줄 조작 묶음 * is-depth0~3 계층 깊이(행 배경) · is-hidden 숨김 행 * ✗ 빈 목록 안내(`c-empty`)는 ui.css — 표를 **대신**하는 `

` 라 표의 내부 요소가 아니다. * * ※ 값의 출처는 gwizard 의 레거시 관리자 CSS 다 [구 .gtable] * * ── 2026-09-29 KRDS(정부 디자인 시스템) ────────────────────────────────────── * 표의 **꼴**을 KRDS 데이터 표(krds-uiux 1.1.0 `.tbl.data`)에서 옮겼다 — 사용자 지시. 값은 variables.css(머리줄 다섯·칸 여백·선 색). * 선 **가로선만** 긋는다(KRDS "열 구분선 지양") — 칸 사이 세로선 ✗. 표 위선은 표 자신이, 칸 아래선은 칸이 긋는다 * 머리줄 옅은 청회색 바탕 + 굵은 글자 + 위아래 선 · 칸은 세로 가운데(vertical-align) * 반응형 목록 표는 `

` 로 감싼다 — 좁은 화면에서 가로 스크롤(맨 아래) * caption 화면 밖에 표 설명을 둔다(마크업은 ``) — 단 **모양은 아래 `.c-table > caption` 이 낸다**: u-blind 의 * position:absolute 가 caption 에 붙으면 Chromium 이 고정 배치의 첫 행 폭을 무시한다(⚠ 아래). th 의 scope 는 마크업 몫 * 두지 않은 것 — 칸 정렬(KRDS 는 글자 왼쪽·숫자 오른쪽)은 이 플랫폼의 "목록형은 가운데" 결정을 그대로 둔다. * 표 안 글자 크기는 **본문 그대로**(KRDS 17) — 2026-09-23 의 한 단계 작게는 같은 날 뒤 지시로 뗐다. * ---------------------------------------------------------------------------------------------- */ /* 본체 — 목록형(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; border-top:1px solid var(--border-color-thead);} /* 글자 크기는 본문 그대로(KRDS 표 본문 17) — 2026-09-23 의 한 단계 작게(--font-size-sm)는 2026-09-29 사용자 지시로 뗐다. 위선은 표가 긋는다 — 머리줄이 있든 없든 첫 줄 위에 선이 있어야 해서(KRDS) */ /* ★ 머리줄은 **통째로 사이트가 바꾸는 축**이라 다섯 가지가 전부 토큰이다 (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:0; border-bottom:1px solid var(--border-color-thead); vertical-align:middle;} .c-table thead th a {color:var(--color-thead-link);} /* 머리 두 단(묶음 th = scope="colgroup" + colspan, 아래 단이 칸 이름)일 때 **묶음 사이에만** 세로선 — 세로선 없는 표에서 묶음의 경계가 안 보였다 (사용자 지적 2026-10-20, 기업정보관리 소속 기업 표 "기업 정보 | 소속 정보"). 본문·아래 단엔 안 긋는다 — KRDS "열 구분선 지양" 은 그대로. 첫 묶음 왼쪽(No 옆)은 안 긋는다 — 그 자리는 rowspan 칸이라 선이 한 단에만 서서 어색하다. 선 색은 머리줄 밑선과 같은 토큰. */ .c-table thead th[scope="colgroup"] + th[scope="colgroup"] {border-left:1px solid var(--border-color-thead);} /* 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:0; border-bottom:1px solid var(--border-color-label); vertical-align:middle; text-align:center;} /* 라벨은 가운데 — 2026-10-20 사용자 지시 "th 를 전부 다"(전엔 left) */ .c-table tbody th[rowspan] {background:var(--bg-label);} /* caption — 화면 밖 표 설명(낭독기용). ⚠ **caption 에 position:absolute 를 쓰지 않는다** — Chromium 은 caption 이 절대 배치되면 `table-layout:fixed` 에서 첫 행 셀의 폭을 통째로 무시해 라벨 칸이 절반으로 벌어진다(2026-09-29 실측: absolute 만 줘도 471/941, static 이면 180). 그래서 마크업의 `u-blind`(absolute) 를 caption 에서만 **흐름 안 1px** 로 되돌린다 — 높이 1px 은 음수 마진으로 지운다. visibility 를 되살리는 이유 — 이 사이트 layout.css 의 옛 `caption{visibility:hidden}` 이 낭독기에서까지 지워 버린다(그러면 caption 을 둔 뜻이 없다). 목록 표(thead 의 width 속성)는 이 quirk 에 안 걸렸지만 규칙은 표 전체에 준다 — 어느 표든 같은 caption 이다. */ .c-table > caption {position:static; caption-side:top; width:1px; height:1px; margin:0 0 -1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); visibility:visible; white-space:nowrap;} /* ★ 라벨 칸 폭은 **`--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);} /* 정보표는 둥근 상자 (2026-10-21 사용자 시안 "라운드 되어서 양쪽이 막힌 걸로" → "전체적으로 적용") 머리줄(thead) 없는 표 = 정보표(th 라벨 + td 값) 전부 — class 를 붙이지 않는다. 구분은 이 파일의 다른 규칙과 같은 기준(머리줄 유무 · c-table--sub 제외). 네 변이 다 막히고 모서리가 둥글다. 목록표(머리줄 있음)는 그대로 — 위 진한 선 + 칸 아래선. ⚠ collapse 표는 border-radius 가 안 먹는다 — 정보표만 separate. 칸 선은 아래선만 쓰므로 겹치지 않는다(마지막 줄은 상자 선이 대신). ⚠ 귀퉁이 칸에도 같은 둥글기 — 라벨 칸의 회색 바탕이 모서리 밖으로 삐져나오지 않게(표의 overflow:hidden 은 브라우저마다 다르다). ⚠ 좁은 화면에서 입력칸이 든 정보표는 세로로 쌓인다(아래 @media) — 그때는 상자를 풀고 예전처럼 위 선 하나. */ .c-table:not(:has(> thead)):not(.c-table--sub) {border-collapse:separate; border:1px solid var(--border-color-cell); border-radius:var(--radius-md);} .c-table:not(:has(> thead)):not(.c-table--sub) > tbody:last-child > tr:last-child > * {border-bottom:0;} /* 정보표 줄 높이 = 한 값 — 입력칸이 있는 줄과 글자만 있는 줄의 높이가 같다(2026-10-21 사용자 "폼이 있는 것과 없는 것의 높이 차이가 없도록"). 칸 위아래 여백을 12 → 5 로 줄이고, 칸 높이를 "입력칸 한 줄이 꼭 들어가는 값" 으로 박는다(표 칸의 height 는 최소 높이 — 여러 줄이면 늘어난다). = --control-height(40, KRDS small 그대로) + 입력칸 margin 위아래 1·1 + 칸 여백 5·5 + 칸 아래선 1 → 53 ⚠ 입력칸 margin(1px — form.css)을 떼지 않는다 — 주소처럼 한 칸에 입력칸이
로 쌓이는 곳의 사이가 그것이다. ⚠ 입력칸 크기·여백 토큰을 바꾸면 이 식도 같이 본다. 좁은 화면의 쌓이는 입력표는 아래 @media 가 풀어 둔다. */ .c-table:not(:has(> thead)):not(.c-table--sub) > tbody > tr > th, .c-table:not(:has(> thead)):not(.c-table--sub) > tbody > tr > td {padding-top:5px; padding-bottom:5px; height:calc(var(--control-height) + 13px);} .c-table:not(:has(> thead)):not(.c-table--sub) > tbody:first-of-type > tr:first-child > :first-child {border-top-left-radius:var(--radius-md);} .c-table:not(:has(> thead)):not(.c-table--sub) > tbody:first-of-type > tr:first-child > :last-child {border-top-right-radius:var(--radius-md);} .c-table:not(:has(> thead)):not(.c-table--sub) > tbody:last-child > tr:last-child > :first-child {border-bottom-left-radius:var(--radius-md);} .c-table:not(:has(> thead)):not(.c-table--sub) > tbody:last-child > tr:last-child > :last-child {border-bottom-right-radius:var(--radius-md);} /* 예외 — 라벨이 **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:0; border-bottom:1px solid var(--border-color-cell); height:var(--row-height); vertical-align:middle;} /* ★ 목록형의 기본 정렬은 **가운데** (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 10px; font-size:var(--font-size-sm);} /* KRDS xsmall 버튼(32 · 여백 10 · 글자 15) — 2026-09-29 */ .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);} /* ★ 행 높이는 글줄이 정한다 — 컨트롤(32)이 글줄(16×1.55≈25)보다 커서 **버튼 있는 행만 7px 높았다**(사용자 지적 2026-10-20 "버튼에 따라 간격이 달라지지 않게"). 버튼 크기(KRDS xsmall 32)는 그대로 두고 위아래 4px 씩을 음수 마진으로 걷어 줄 상자(24) 안에 넣는다 — inline-block 의 줄 상자 기여는 마진 상자라 행이 글줄 높이로 돌아온다. 칸 여백 12 가 버튼 둘레에선 8 로 보인다(KRDS 최소 8). ⚠ `--control-height-sm` 이나 글줄 높이를 바꾸면 이 4 도 다시 센다 — (컨트롤 − 글줄) ÷ 2. */ .c-table thead + tbody td .c-btn, .c-table thead + tbody td .c-input, .c-table thead + tbody td .c-select {margin-top:-4px; margin-bottom:-4px;} /* 계층 목록의 깊이별 행 배경 — 루트가 가장 밝고 내려갈수록 진해진다. 들여쓰기 'ㄴ' 만으로는 가지가 길어질 때 한 카테고리의 범위가 눈에 안 들어온다(메뉴 관리). 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:0; border-bottom: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:center;} /* 본표 라벨과 같이 가운데(2026-10-20) */ table.c-table--sub tbody tr:hover {background:#fbfcfe;} /* 행마다 붙는 관리 버튼 칸 — 가운데, 줄바꿈 없음 [구 style="text-align:center; white-space:nowrap"] ⛔ **`display:flex` 를 td 에 주지 않는다** (2026-09-30 되돌림 — 사용자 지적 "댓글 버튼이 이상하다"). flex 를 주면 그 `` 는 **표의 칸이 아니게 된다** — 브라우저가 익명 칸으로 한 번 더 감싸고, 진짜 td 는 제 내용 높이(57)로만 서서 **행 높이(124·149)만큼 늘어나지 않는다**. 결과가 둘: · 여러 줄 댓글처럼 **키 큰 행에서 버튼이 위로 붙는다**(가운데보다 34~47px 위, 2026-09-30 실측) · 그 칸의 **아래 구분선이 행 끝까지 안 그어진다** — 선이 관리 칸 앞에서 끊겨 보인다 `height:100%` 로도 안 고쳐진다(익명 칸에 대한 백분율이라 auto 로 풀린다 — 같이 실측). 2026-09-21 에 flex 로 바꾼 까닭은 버튼 사이 간격을 **태그 사이 공백**에 맡기지 않으려던 것인데, 그 값은 아래 `> * + *` 한 줄로도 정해진다. **gwizard 는 처음부터 이 꼴이었다** — main 만 어긋나 있었다. ※ 세로 가운데는 `.c-table tbody td` 가 이미 준다. 여기 다시 적는 것은 이 칸의 약속이라서다. */ .c-table__actions {vertical-align:middle; text-align:center; white-space:nowrap;} .c-table__actions > * + * {margin-left:var(--gap-inline);} .c-table__actions > form {display:inline-block;} /* POST 버튼을 감싼 폼(c-cellform)도 한 줄에 선다 — 한 칸에 폼이 둘이면 블록이라 쌓였다(2026-10-20 기업회원관리). l-actions > form 과 같은 처방 */ /* ⚠ **이 두 묶음 안에서는 버튼이 자기 여백을 갖지 않는다** — 간격을 바로 위 `> * + *`(관리 칸)과 `.c-treerow` 의 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 의 "개방형"(좌우 바깥 세로선 지우기) 절은 2026-09-29 에 걷어냈다 — 세로선 자체가 없어져 할 일이 없다(위 KRDS). */ /* 가로 스크롤 틀 — KRDS 표 "좁은 화면에서는 가로 스크롤" (2026-09-29). 목록 표를 `
` 로 감싼다. 넓은 화면에서는 아무 일도 안 한다 — 표가 100% 라 넘칠 것이 없다. 좁아지면 표에 최소폭을 주어 칸이 찌그러지는 대신 옆으로 밀린다. 입력형 표(라벨 + 값)는 감싸지 않는다 — 두 칸이라 좁아져도 읽힌다. */ .c-table-wrap {overflow-x:auto; -webkit-overflow-scrolling:touch;} /* ── 좁은 화면(768 이하) — 표 마크업은 그대로(관리자와 같은 조각을 공유), 꼴은 이 사이트 CSS 만 바꾼다 (2026-10-20) ── ① 목록표(틀 안) — 내용 폭만큼 넓어지고 가로 스크롤. ⚠ 전엔 min-width:640 이었다 — 고정 폭 열 합(회원관리 970)보다 작아 폭 없는 칸(이메일)이 0 으로 찌그러져 글자가 한 줄에 하나씩 섰다. table-layout:auto 면 th 의 width 는 최소 폭으로만 남는다. ② 정보표(머리줄 없는 표 — th 라벨 + td 값) — 보기 표는 라벨 칸만 100 으로 좁혀 옆에 둔다. 입력 폼(input·select·textarea 가 든 표)만 라벨 위·입력칸 아래로 쌓는다(라벨은 띠 없이 작은 회색 글자). 2026-10-20 — 처음엔 전부 쌓았다가 회색 띠가 무거워 갈랐다. ③ 주요 열 고정(c-table-wrap--fix · --fix2) — 가로 스크롤 중에도 왼쪽 열이 남는다(2026-10-20 사용자 지시 "가로 스크롤 + 첫 번째 주요 컬럼 고정"). 표 HTML 은 그대로, 틀에 수식어만: --fix = 첫 열 고정 · --fix2 = **둘째 열**(No 다음의 이름·기업명) 고정 — No 는 같이 밀려 사라지고 이름이 왼쪽 끝에 붙는다 (No 까지 고정하면 80 이 늘 자리를 먹어 이름 칸이 찌그러졌다 — 2026-10-20 실측). ⚠ 고정 칸은 **배경이 불투명**해야 밀리는 칸이 비치지 않는다 — 행 hover(tr 배경)를 칸에도 따로 칠한다. 마지막 고정 열 오른쪽에 그림자로 경계. */ @media screen and (max-width:768px) { .c-table-wrap > .c-table {table-layout:auto;} .c-table-wrap > .c-table th, .c-table-wrap > .c-table td {white-space:nowrap;} .c-table-wrap > .c-table td.u-text-left {white-space:normal; min-width:220px; word-break:keep-all; overflow-wrap:anywhere;} /* 왼쪽 정렬 글 칸(내용·제목) — 한 줄로 늘이면 끝없이 넓어진다. 220 에서 줄을 바꾼다(2026-10-20 쪽지 목록) */ /* 보기 표 — 라벨 칸만 좁힌다(쌓으면 라벨마다 회색 띠가 깔려 무겁다 — 2026-10-20 사용자 "이건 좀 아닌데"). table-layout:fixed 라 첫 행 th 의 폭이 열을 정한다 */ .c-table:not(:has(> thead)):not(.c-table--sub) > tbody > tr > th {width:100px; padding:12px 10px; word-break:keep-all;} /* 정렬은 공용 그대로 가운데 — 여기서 left 로 덮지 않는다(2026-10-20 사용자 "th 는 전부 센터") */ .c-table:not(:has(> thead)):not(.c-table--sub) > tbody > tr > td {padding:12px;} /* 입력 폼(입력칸이 든 표) — 좁은 칸엔 입력칸이 안 들어가 쌓는다. 라벨은 띠 없이 작은 회색 글자, 입력칸 아래에 선 */ .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea), .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody, .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody > tr, .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody > tr > th, .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody > tr > td {display:block; width:auto;} .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody > tr > th {padding:14px 0 6px; border:0; background:transparent; font-size:var(--font-size-sm); color:var(--color-help); text-align:left;} /* 쌓인 폼의 라벨은 칸이 아니라 입력칸 위 글자 — 입력칸과 같은 왼쪽(전엔 위 보기 표 규칙의 left 를 물려받았다) */ .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody > tr > td {padding:0 0 14px;} .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) {border:0; border-top:1px solid var(--border-color-thead); border-radius:0;} /* 쌓일 땐 상자 ✗ — 칸이 상자 선에 붙는다 */ .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody > tr > * {border-radius:0; height:auto;} /* 쌓일 땐 칸 높이 고정 ✗(라벨이 제 줄이 된다) */ .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) > tbody:last-child > tr:last-child > td {border-bottom:1px solid var(--border-color-cell);} .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) .c-input, .c-table:not(:has(> thead)):not(.c-table--sub):has(input:not([type=hidden]), select, textarea) .c-select {max-width:100%;} .c-table-wrap--fix > .c-table > * > tr > :first-child, .c-table-wrap--fix2 > .c-table > * > tr > :nth-child(2) {position:sticky; left:0; z-index:1; background:#fff; box-shadow:6px 0 6px -6px rgba(0,0,0,.25);} .c-table-wrap--fix > .c-table > thead > tr > :first-child, .c-table-wrap--fix2 > .c-table > thead > tr > :nth-child(2) {background:var(--bg-thead);} .c-table-wrap--fix > .c-table > tbody > tr:hover > :first-child, .c-table-wrap--fix2 > .c-table > tbody > tr:hover > :nth-child(2) {background:var(--bg-row-hover);} .c-table-wrap--fix2 > .c-table > * > tr > :nth-child(2) {min-width:120px; max-width:170px; white-space:normal;} /* 고정 칸이 화면을 다 먹지 않게 — 길면 줄을 바꾼다 */ .c-table-wrap--fix2 > .c-table > tbody > tr > td.u-text-left:nth-child(2) {min-width:120px;} /* 위 '왼쪽 정렬 글 칸 220' 보다 고정 칸 폭이 이기게 */ } }