@charset "utf-8"; /* ---------------------------------------------------------------------------------------------- * ORANGE-PMI PLATFORM Version 2.0.0 - Last modified 2026-10-21 * 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-search (+ 잠김 상태 · c-seg · c-switch · c-colorpick · 첨부칸) * ✗ 버튼 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] * * ── 2026-09-29 KRDS(정부 디자인 시스템) ────────────────────────────────────── * 입력칸·select·체크·라디오의 **꼴**을 KRDS(krds-uiux 1.1.0 component.css)에서 옮겼다 — 사용자 지시. 값은 variables.css. * 입력칸 높이·여백·모서리는 토큰(48 · 16 · 6) · 포커스 = 주조색 테두리 1 + outline 1(KRDS 2px) · 잠김 = 회색 바탕 * select 브라우저 화살표 ✗ → KRDS ico_angle.svg(asset/img/icon) · 오른쪽 여백 = 좌우여백 + 8 + 아이콘 20 * 체크·라디오 브라우저 그림 ✗ → 20px 상자(체크 4px 모서리 · 라디오 원) · 고르면 주조색 채움 + 흰 체크(ico_checkbox_checked.svg 를 * mask 로) · 라디오는 안에 점 10px. 분절 선택(c-seg)의 라디오도 같은 그림 * ---------------------------------------------------------------------------------------------- */ /* 입력 컨트롤 ================================================================================== ★ 높이는 `--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); font-size:var(--font-size-sm);} /* 글자 15 = KRDS small 입력 (2026-09-29) */ .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); font-size:var(--font-size-sm);} /* ★ select 는 height 를 **명시**한다 — min-height 만으로는 안 줄어든다. 브라우저가 폰트·패딩으로 정한 제 높이가 그보다 크면 그대로여서, 목록 행에서 이것만 크게 남아 튀었다(2026-09-19). input 과 같은 이유로 값도 같은 토큰을 읽는다(위 ★ 의 "넷"). ★ 화살표는 KRDS 아이콘(ico_angle.svg, 20px)을 배경으로 오른쪽 끝에 놓는다 (2026-09-29) — 브라우저 기본 화살표는 OS 마다 달라 `appearance:none` 으로 끈다. 오른쪽 안쪽 여백 = 좌우여백 + 8 + 20 이라 글자가 화살표를 안 가린다. */ .c-select {vertical-align:middle; min-width:80px; height:var(--control-height); line-height:calc(var(--control-height) - 2px); -webkit-appearance:none; appearance:none; background:#fff url(../img/icon/ico_angle.svg) no-repeat right var(--control-pad-x) center / 20px 20px; border:1px solid var(--border-color-select); padding:0 calc(var(--control-pad-x) + 28px) 0 var(--control-pad-x); color:var(--color-ink); border-radius:var(--radius-input); font-size:var(--font-size-sm);} .c-input:focus, .c-textarea:focus, .c-select:focus {border-color:var(--border-color-focus); outline:1px solid var(--border-color-focus); outline-offset:0;} /* KRDS 포커스 = 주조색 2px — 테두리 1 + 바로 바깥 outline 1. outline:none ✗ (global-template 접근성) */ /* 기본값에서 벗어난 입력 — 라인(테두리)과 글자색으로 표시한다. 목록에서 대부분의 행이 기본값이라, 눈에 걸리는 칸이 곧 "따로 걸어 둔 설정" 이다. 무엇이 기본값인지는 화면(컨트롤러)이 판정한다. ★ **상태(`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) — KRDS 는 바탕을 회색으로 채우고 테두리·글자를 한 단계 옅게 한다 (2026-09-29). readonly 는 그대로 둔다 — 값은 읽어야 하므로 글자색을 낮추지 않는다. select 는 화살표도 옅은 것으로 바꾼다. */ .c-input:disabled, .c-textarea:disabled, .c-select:disabled {background-color:var(--bg-disabled); border-color:var(--border-color-disabled); color:var(--color-disabled); cursor:default;} .c-select:disabled {background-image:url(../img/icon/ico_angle_disabled.svg);} /* 키워드 검색칸 — c-search (2026-09-29 KRDS 키트 `keyword-sch` + `btn-ico-wrap`) ★ **사이트 것이다** — 게시판만의 부품이 아니라 **목록 화면의 부품**이라서다(사용자 판단 2026-09-30). 자리(`l-search`·`l-toolbar > .l-search`, layout.css)가 이미 사이트 것이라 모양만 스킨에 두면 짝이 갈린다. 2026-09-30 에 잠깐 게시판 스킨으로 내렸다가 되돌렸다. ※ 관리자(gwizard)에는 이 class 가 없다 — 그쪽은 제 꼴이다.
안에 .c-input 하나와 돋보기 제출 버튼(.c-search__btn) — 버튼은 칸 **안** 오른쪽 20px 자리에 뜨고 글자는 화면 밖 "검색"(u-blind) 뿐이다. 입력칸은 오른쪽 안쪽 여백을 20 + 24 + 20 으로 벌려 글자가 돋보기 밑으로 안 들어간다. 폭은 400(KRDS 키트 588 은 콘텐츠 1200 기준 — 이 사이트 본문에선 과해 줄였다), 좁은 화면은 100%. 돋보기는 KRDS ico_sch.svg 를 ::before 에 mask 로 — 버튼 자체를 mask 하면 포커스 테두리(outline)까지 잘려 나가서 가상요소에 그린다. 별도 글자 버튼 대신 이 꼴을 쓰는 것이 키트의 검색 모양이다. */ .c-search {position:relative; width:400px; max-width:100%;} /* KRDS 키트 값은 588(콘텐츠 1200 기준) — 이 사이트 본문(941)에서는 60% 라 커 보여 400 으로(사용자 지적 2026-09-29) */ .c-search > .c-input {width:100%; margin:0; padding-right:56px;} /* 12 + 24 + 20 */ .c-search__btn {position:absolute; top:50%; right:20px; width:24px; height:24px; padding:0; margin:0; border:0; background:none; transform:translateY(-50%); color:var(--color-ink); cursor:pointer; border-radius:2px;} .c-search__btn::before {content:''; display:block; width:24px; height:24px; background-color:currentColor; -webkit-mask:url(../img/icon/ico_sch.svg) no-repeat center / contain; mask:url(../img/icon/ico_sch.svg) no-repeat center / contain;} .c-search__btn:hover {color:var(--color-primary);} .c-search__btn:focus-visible {outline:2px solid var(--color-primary); outline-offset:2px;} @media screen and (max-width:768px) { .c-search {width:100%;} } /* 체크박스·라디오와 그 글자를 한 덩어리로 [구 .inlineblock] 라디오도 이 class 를 쓴다 — 모양이 같아 `c-radio` 를 따로 두지 않는다(필요해지면 그때 나눈다). ★ 항목 사이 간격도 여기서 준다 — 안 주면 한 줄에 여럿일 때 따닥따닥 붙어 어디까지가 한 항목인지 안 읽힌다(사용자 지적 2026-09-18). 마지막 것의 오른쪽 여백은 지워 칸이 헐거워지지 않게 한다. 네모와 글자 사이는 flex 의 gap 이다(KRDS 8px). ※ 화면(HTML)에 margin 을 인라인으로 적지 않는다. ★ **네모·원을 직접 그린다** (2026-09-29 KRDS) — 브라우저 기본 그림은 OS 마다 달라 KRDS 꼴(20px · 체크 4px 모서리 · 고르면 주조색 채움 + 흰 체크 / 라디오는 테두리만 주조색 + 안에 점 10px)이 안 나온다. `accent-color` 로는 크기·모서리를 못 정한다. 분절 선택(c-seg)의 라디오도 같은 그림이다 — 같은 선택자에 둔다(그쪽 margin 은 제 절에서 따로 준다). 체크 표시는 KRDS ico_checkbox_checked.svg 를 **mask** 로 쓴다 — 파일에 박힌 선 색(파랑)이 아니라 흰색으로 물들여야 해서다. ⚠ 그리는 것이 ::after 라 input 이 position:relative 다. 포커스는 outline 으로 남긴다(global-template 접근성). ⚠ 선택자를 `[type="checkbox"]`·`[type="radio"]` 로 좁힌다 — 같은 label 안에 다른 input(날짜 등)이 서면 그것까지 상자로 그려진다. */ .c-check {display:inline-flex; align-items:center; gap:8px; margin-right:24px; cursor:pointer; vertical-align:middle;} .c-check:last-child {margin-right:0;} .c-check > input[type="checkbox"], .c-check > input[type="radio"], .c-seg__item > input[type="radio"] {-webkit-appearance:none; appearance:none; position:relative; flex:0 0 auto; width:20px; height:20px; margin:0; border:1px solid var(--border-color); border-radius:var(--radius-check); background:#fff; cursor:pointer; vertical-align:middle;} .c-check > input[type="radio"], .c-seg__item > input[type="radio"] {border-radius:50%;} .c-check > input[type="checkbox"]:checked, .c-check > input[type="radio"]:checked, .c-seg__item > input[type="radio"]:checked {border-color:var(--color-primary);} .c-check > input[type="checkbox"]:checked, .c-seg__item > input[type="checkbox"]:checked {background:var(--color-primary);} .c-check > input[type="checkbox"]:checked::after, .c-check > input[type="radio"]:checked::after, .c-seg__item > input[type="radio"]:checked::after {content:''; position:absolute; inset:0; margin:auto; width:14px; height:14px; background:#fff; -webkit-mask:url(../img/icon/ico_checkbox_checked.svg) no-repeat center / contain; mask:url(../img/icon/ico_checkbox_checked.svg) no-repeat center / contain;} .c-check > input[type="radio"]:checked::after, .c-seg__item > input[type="radio"]:checked::after {width:10px; height:10px; border-radius:50%; background:var(--color-primary); -webkit-mask:none; mask:none;} .c-check > input[type="checkbox"]:disabled, .c-check > input[type="radio"]:disabled, .c-seg__item > input[type="radio"]:disabled {background:var(--bg-disabled); border-color:var(--border-color-disabled); cursor:default;} .c-check > input[type="checkbox"]:focus-visible, .c-check > input[type="radio"]:focus-visible, .c-seg__item > input[type="radio"]:focus-visible {outline:2px solid var(--color-primary); outline-offset:2px;} /* 분절 선택(라디오 묶음) — 서로 배타인 선택지 **두셋**을 한 덩어리 버튼처럼 붙여 놓는다. 게시판 권한의 '전체 / 로그인회원 / 관리자' 가 첫 자리다 (admin/bbs.form.php). ★ 라디오를 감싸는