@charset "utf-8"; /* ---------------------------------------------------------------------------------------------- * ORANGE-PMI PLATFORM Version 2.0.0 - Last modified 2026-09-22 * Modular Web Architecture · Powered by Orangecommunication · www.oranc.net * ---------------------------------------------------------------------------------------------- * 폼 공용 컴포넌트 — 입력칸 · 선택 · 체크 · 필수표시 · 도움말. * * form.css (public_html//asset/css) — 이 사이트의 base.php 가 `site::css/form.css` 로 건다. * 앞에 `variables.css` 가 먼저 와야 한다 — 색·치수는 거기 토큰을 읽는다. * **이 사이트 소유**다 — 같은 파일이 사이트마다 한 벌씩 있다 (2026-09-21 사용자 결정: * 업그레이드가 덮어쓰는 `asset/core/` 에 두지 않는다). 모양을 바꿀 때는 이 파일을 직접 고친다. * ⚠ **다른 사이트에도 같은 파일이 있다 — 한쪽만 고치면 갈라진다.** 공통 규칙을 손볼 때는 * `public_html//asset/css/` 아래 같은 이름을 **전부** 본다. 2026-09-21 이전에 이 복제로 * main 이 gwizard 의 수정을 3일간 못 받은 적이 있다. → global-template "공통 UI class" * * ── 담는 것 / 담지 않는 것 ────────────────────────────────────────────────── * 담는다 c-input · c-select · c-textarea · c-check · c-req · c-help · c-notice * ✗ 버튼 c-btn 은 ui.css — 폼 밖(목록 · 표 안)에서도 쓰므로 폼에 매이지 않는다 * ✗ 배치 버튼줄 l-actions · 검색줄 l-search 는 layout.css * ✗ 표 라벨 칸이 딸린 입력형 표는 table.css (c-table) * * ★ 이름을 `c-form__input` 으로 짓지 않는다 — Input·Select 는 폼 **밖에서도** 쓰므로 폼의 * 내부 요소가 아니다(지침 4장). 독립 컴포넌트로 둔다. * * ※ 값의 출처는 gwizard 의 레거시 관리자 CSS 다 — 새로 그린 디자인이 아니다. * [구 .input_form · .textarea_form · 전역 select · .ghelp · .inlineblock] * ---------------------------------------------------------------------------------------------- */ /* 입력 컨트롤 ================================================================================== ★ 높이는 `--control-height` 하나다 — **한 줄에 나란히 서는 넷**(입력칸·select·버튼·정렬 화살표)이 같은 토큰을 읽는다. 그래서 목록 한 줄에 [이름칸][체크][∧][∨][+][M][C] 가 섞여 서도 위아래가 맞는다(사용자 지적 2026-09-18). 화살표 규칙은 사이트 CSS 에 있지만 값은 같은 토큰이다 — 2026-09-19 에 셋만 줄이고 화살표를 빠뜨린 사고가 그래서 이제 일어나지 않는다. → variables.css "치수" 절 ★ 줄 높이는 `calc(--control-height - 2px)` — 위아래 테두리 1px 씩을 뺀 값이다. **높이에서 따라 나오는 수**라 숫자로 적지 않는다(적어 두면 높이를 고칠 때 같이 고쳐야 하고, 그게 위 사고의 꼴이다). ★ input 은 line-height 만으로는 높이가 브라우저마다 갈리므로(폰트 크기에 따라 content 가 더 커진다) height 를 **명시**한다 — box-sizing:border-box 라 테두리가 이 안에 든다. ★ **목록 행 안에서는 `--control-height-sm`** 이다 — 행이 좁아서다. 그 네 줄은 table.css 에 모여 있다(여기 말고 거기서 고칠 것). ★ 안쪽 좌우 여백은 `--control-pad-x` 다 — **셋이 같은 값을 읽는다**(입력칸·select·textarea). 관리자는 좁고(5px) 사용자쪽은 넓다(10px) — 사이트가 바꾸는 축이라 토큰이다. textarea 는 위아래도 같은 값을 쓴다(레거시가 그랬다 — 한 값으로 사방을 준다). */ .c-input {vertical-align:middle; height:var(--control-height); border:1px solid var(--border-color); padding:0 var(--control-pad-x); letter-spacing:0; line-height:calc(var(--control-height) - 2px); margin:1px 0; border-radius:var(--radius-input);} .c-textarea {width:100%; min-height:50px; background:#fff; padding:var(--control-pad-x); border:1px solid var(--border-color); overflow-x:hidden; overflow-y:auto; resize:none; border-radius:var(--radius-input);} /* ★ select 는 height 를 **명시**한다 — min-height 만으로는 안 줄어든다. 브라우저가 폰트·패딩으로 정한 제 높이가 그보다 크면 그대로여서, 목록 행에서 이것만 크게 남아 튀었다(2026-09-19). input 과 같은 이유로 값도 같은 토큰을 읽는다(위 ★ 의 "넷"). */ .c-select {vertical-align:middle; min-width:80px; height:var(--control-height); line-height:calc(var(--control-height) - 2px); background:#fff; border:1px solid var(--border-color-select); padding:0 var(--control-pad-x); border-radius:var(--radius-input);} .c-input:focus, .c-textarea:focus, .c-select:focus {border-color:var(--border-color-focus);} /* 기본값에서 벗어난 입력 — 라인(테두리)과 글자색으로 표시한다. 목록에서 대부분의 행이 기본값이라, 눈에 걸리는 칸이 곧 "따로 걸어 둔 설정" 이다. 무엇이 기본값인지는 화면(컨트롤러)이 판정한다. ★ **상태(`is-`)라서** 컴포넌트가 아니다 — 같은 입력칸이 조건에 따라 띠는 모습이다(지침 2장). ★ `.c-select`·`.c-input` **뒤**에 와야 border-color 를 덮는다 — 명시도가 같아 순서가 우선순위다. 그래서 유틸이 아니라 이 파일 이 자리에 둔다(utilities.css 는 더 뒤라 순서는 되지만, 상태는 컴포넌트의 사정이므로 컴포넌트 옆에 있는 편이 읽힌다). */ .is-changed {border-color:var(--color-changed); color:var(--color-changed-ink); font-weight:600;} .c-input::placeholder {color:var(--color-placeholder);} /* 날짜·시간 입력 — 브라우저가 제 껍데기(테두리·배경)를 따로 그려서 옆의 text 입력과 **선 색이 달라 보였다** (사용자 지적 2026-09-23). 껍데기를 벗겨 위 `.c-input` 의 테두리 하나만 남긴다. ★ 달력 아이콘은 별도 가상요소라 그대로 남는다. */ .c-input[type="date"], .c-input[type="datetime-local"], .c-input[type="time"], .c-input[type="month"] {-webkit-appearance:none; appearance:none; background:#fff;} /* 잠긴 필드(disabled)는 브라우저 기본 그대로 둔다 — 지금 관리자 화면이 그렇다. 설정 화면의 🔒 항목이 여기 해당한다. 회색 배경 같은 표시가 필요하면 그때 여기 한 줄을 더한다. */ /* 체크박스·라디오와 그 글자를 한 덩어리로 [구 .inlineblock] 라디오도 이 class 를 쓴다 — 모양이 같아 `c-radio` 를 따로 두지 않는다(필요해지면 그때 나눈다). ★ 항목 사이 간격도 여기서 준다 — 안 주면 한 줄에 여럿일 때 따닥따닥 붙어 어디까지가 한 항목인지 안 읽힌다(사용자 지적 2026-09-18). 마지막 것의 오른쪽 여백은 지워 칸이 헐거워지지 않게 한다. 글자와 네모 사이(input 오른쪽)도 같이 벌린다 — 브라우저 기본은 거의 붙어 있다. ※ 화면(HTML)에 margin 을 인라인으로 적지 않는다. 간격도 모양이라 사이트가 정한다. */ .c-check {display:inline-block; margin-right:18px;} .c-check:last-child {margin-right:0;} .c-check > input {margin-right:5px; accent-color:var(--color-primary);} /* 체크·라디오를 사이트 강조색으로 (2026-09-23) */ /* 분절 선택(라디오 묶음) — 서로 배타인 선택지 **두셋**을 한 덩어리 버튼처럼 붙여 놓는다. 게시판 권한의 '전체 / 로그인회원 / 관리자' 가 첫 자리다 (admin/bbs.form.php). ★ 라디오를 감싸는