@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-09-24
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 * 공통 UI 의 디자인 토큰 — 색 · 치수. 컴포넌트 CSS 가 읽는 값의 **기본값**이 여기 있다.
 *
 * variables.css (public_html/main/asset/css) — 이 사이트의 base.php 가 **맨 먼저** 건다.
 *   `asset('site::css/variables.css')` — **이 사이트 소유**다.
 *
 *   ── 이 파일이 gwizard 와 다른 이유 ──────────────────────────────────────────
 *   여기는 **사용자쪽(방문자) 사이트**다. gwizard 는 관리자 화면이라 빽빽하고 진하지만,
 *   이쪽은 레거시 홈페이지의 성긴 여백과 밝은 표가 그대로여야 한다(사용자 지시 2026-09-22
 *   "레거시 같은 화면을 만드는 것"). **규칙(form·table·ui.css)은 gwizard 와 한 글자도 다르지
 *   않고, 갈리는 것은 이 파일의 값뿐이다** — 그러라고 나눠 둔 자리다.
 *     ⚠ 반대로 **규칙을 고칠 때는 양쪽을 같이 본다.** 2026-09-21 이전에 이 복제로 이 사이트가
 *       gwizard 의 수정을 3일간 못 받은 적이 있다(에러는 나지 않았다).
 *
 *   ── 값의 출처 ───────────────────────────────────────────────────────────────
 *   아래 `[구 …]` 는 **레거시 원본**의 자리다 (`public_html_reg/main/css/`·`_skin/board/basic/`).
 *   확인된 것만 옮겼다 — 레거시에 근거가 없는 토큰은 **gwizard 값 그대로 두었다**(추측 ✗,
 *   작업 수칙 2). 그 줄에는 `※ 레거시 근거 없음` 을 적어 두었으니, 사용자쪽 화면을 붙이면서
 *   실제 모양이 보이면 그때 정한다.
 *
 *   ── 무엇이 토큰이 되나 ──────────────────────────────────────────────────────
 *   아무 값이나 올리지 않는다. 셋 중 하나일 때만 올린다:
 *     ① 사이트가 바꿀 축    — 주조색 · 알림색 · 컨트롤 높이
 *     ② 여러 곳이 같이 움직여야 하는 값 — 한쪽만 고치면 어긋나는 것
 *     ③ 파일을 넘어 공유되는 값         — 컴포넌트 CSS 와 사이트 CSS 가 함께 읽는 것
 *
 *   ⚠ **레거시 프론트 토큰(`--color1`·`--point1`·`--space-*` …)은 여기 없다** — 그쪽은
 *     `layout.css` 의 `② root` 절에 옛 이름 그대로 살아 있고, 이 사이트의 홈페이지 마크업이
 *     읽는다. 이름이 하나도 겹치지 않아 **두 벌이 섞이지 않는다**. 이 파일은 `c-*` 컴포넌트의
 *     값이고, 그 값을 레거시 토큰에서 **베껴 온 것**이다(아래 `[구 --color1]` 같은 표시).
 *     ✗ `var(--color1)` 로 **참조하지 않는다** — 그러면 로드 순서에 매이고(layout.css 가 뒤다),
 *       레거시 절을 걷어낼 때 이 파일이 통째로 깨진다. 값을 적어 둔다.
 * ---------------------------------------------------------------------------------------------- */


:root {

/*  주조색 — 강조 · 활성 · 채움 버튼  ============================================================
    사용자쪽의 주조색은 **진한 남색**이다(관리자의 밝은 파랑과 다르다).
    채움 계열 셋은 색이 아니라 **무채색**이다 — 레거시 게시판의 [등록하기] 가 짙은 회색이었다.  */
	--color-primary			: #003d97;	/* 강조 — 묶음 제목 고리 · 탭 활성            [구 --color1] */
	--color-primary-ink		: #001B54;	/* 그 진한 쪽 — 강조된 글자와 눌린 테두리      [구 --color4] */
	--color-fill			: #444;		/* 채움 버튼 바탕                             [구 .bbs_btn01] */
	--color-fill-border		: rgba(0,0,0,.2);	/* 〃 테두리                          [구 .bbs_btn01] */
	--color-fill-hover		: #101821;	/* 〃 hover                                   [구 .bbs_btn01:hover] */
	--color-blue			: #187ad2;	/* 라인 버튼(파랑)                            [구 --color2] */

/*  알림색 — 필수 · 위험 · 도움말 · 변경  ========================================================  */
	--color-danger			: #e2453c;	/* 필수 표시(*) · 숨김.  ※ 레거시 근거 없음 — `.required` 에 색 규칙이 없었다 */
	--color-danger-ink		: #b3261e;	/* 그 눌린 쪽.           ※ 레거시 근거 없음 */
	--color-danger-bg		: #fdf1f0;	/* 플래시 오류 상자 바탕 — 강조선·글자는 위 danger 두 값 */
	--color-done			: #2e9e5b;	/* 됐다 — 플래시 성공 상자 강조선 */
	--color-done-ink		: #1f7a44;	/* 〃 글자 */
	--color-done-bg			: #f1faf4;	/* 〃 바탕 */
	--color-black			: #333;		/* 라인 버튼(검정) — 삭제류.  ※ 레거시 근거 없음 */
	--color-red				: #fc6562;	/* 라인 버튼(빨강)                            [구 --point1 포인트 컬러] */
	--color-off				: #c00;		/* 사용안함 상태 글자.   ※ 레거시 근거 없음 */
	--color-help			: #de8c55;	/* 도움말 글자 — 입력칸 아래·옆 설명. 2026-09-23 사용자 지정값 (주황 #fe6600 → 회색 계열을 거쳐 이 값으로) */
	--color-notice			: #fe6600;	/* 안내 상자 강조선 — 옛 --color-help 값. 도움말 글자와 갈랐다(2026-09-23) */
	--color-notice-border		: #ffd7b5;	/* 안내 상자 테두리 */
	--color-notice-bg			: #fff8f2;	/* 안내 상자 바탕 */
	--color-changed			: #e8912d;	/* 기본값에서 벗어난 입력 — 테두리.  ※ 레거시 근거 없음 */
	--color-changed-ink		: #b96a0c;	/* 〃 글자.              ※ 레거시 근거 없음 */

/*  글자  ========================================================================================  */
	--color-dark			: #646c75;	/* 어두운 채움 버튼 바탕.  ※ 레거시 근거 없음(정렬 화살표가 사용자쪽에 없다) */
	--color-ink				: #444;		/* 버튼 글자·테두리                           [구 .bbs_btn02] */
	--color-mute			: #999;		/* 흐린 글자 — 부차 정보 */
	--color-disabled		: #ccc;		/* 못 누름 · 값 없음 */
	--color-placeholder		: #bbb;

/*  테두리 · 바탕  ================================================================================  */
	--border-color			: #98a0b0;	/* 입력칸 · 버튼 테두리 — 2026-09-23 한 단계 어둡게(사용자 지시) */
	--border-color-select	: var(--border-color);	/* select 도 **같은 선**이다 — 값을 적지 않고 입력칸 것을 참조한다(사용자 지시 2026-09-23). 관리자쪽은 제 값(한 단계 옅음)을 그대로 쓴다 */
	--border-color-focus	: #888;		/* 포커스 — 회색이다. 관리자의 파란 테두리와 다르다  [구 .input_form:focus] */
	--border-color-cell		: #e0e0e0;	/* 표 칸 — 2026-09-23 화면 기준으로 조정(사용자 지시). [구 --border-color1 #dfdfdf] */
	--border-color-label	: #e0e0e0;	/* 입력형 표의 라벨 칸 — 값 칸과 **같은 값**   [구 --border-color1 #dfdfdf] */

/*  표 머리줄 — **다섯이 한 덩어리**로 사이트가 바꾸는 축이다 (2026-09-22).
    사용자쪽은 **밝은 회색 바탕 + 검은 글자**다 — 관리자의 진한 바탕 + 흰 글자와 정반대다.
    레거시에서도 두 사이트가 같은 `.gtable` 을 다른 값으로 그렸다(그 갈림을 값으로 옮긴 것이다).
    ⚠ 다섯을 **같이** 고친다 — 바탕만 밝게 하고 글자를 흰색으로 두면 글자가 사라진다.
    규칙은 `table.css` 한 벌이다.                                        [구 .gtable thead th]  */
	--bg-thead				: #f2f2f2;	/* 〃 바탕 */
	--color-thead-ink		: #111;		/* 〃 글자 */
	--color-thead-link		: inherit;	/* 〃 링크(정렬) — 레거시는 색을 **주지 않았다**(그 줄이 주석 처리돼
										   있었다). 밝은 바탕이라 본문색 그대로가 맞다 */
	--border-color-thead	: #d3d3d3;	/* 〃 테두리 */
	--thead-weight			: 600;		/* 〃 글자 굵기 — 관리자(400)보다 굵다 */

	--bg-label				: #f2f2f3;	/* 입력형 표의 라벨 칸 — 옅은 회색. 2026-09-23 사용자 지시(화면 기준). [구 .gtable tbody th #f8f8f8] */
	--color-label-ink		: #333;	/* 입력형 표의 라벨 칸 글자 — 2026-09-23 사용자 지시 — 상속값(#555)보다 한 단계 어둡게 */
	--bg-switch				: #d1d5db;	/* 토글 스위치 꺼짐 바탕 — 켜짐은 --color-primary (2026-09-23) */
	--bg-seg-on				: #eaf2fe;	/* 분절 선택에서 고른 칸.  ※ 레거시 근거 없음 */
	--bg-row-hover			: #feffd3;	/* 행 hover.               ※ 레거시 근거 없음 */
	--bg-btn-hover			: #101821;	/* 버튼 hover 바탕 — 관리자(#444)보다 어둡다  [구 .bbs_btn01:hover] */

/*  글자 크기  ====================================================================================
    ★ **뿌리는 `html`(layout.css) 이고 이 사이트는 17px 이다** — 레거시에서 그대로 온 값이다(좁은 화면 16px).
      아래 값은 그 뿌리의 배수(`rem`)다. `rem` 은 **늘 뿌리 기준**이라 어디에 중첩돼도 결과가 같다.
    ★ **새로 쓰는 곳은 `em` 이 아니라 이 토큰을 읽는다.** `em` 은 **부모 기준**이라 겹치면 곱해진다 —
      0.9em 안의 0.85em 은 0.77em 이 되어, 화면을 보기 전에는 결과를 알 수 없다. 그래서 기준이 필요했다.
      (지금 사용자쪽 스타일시트에 font-size 선언이 em 319 · rem 39 개다. 옛것은 그대로 두고 손볼 때 하나씩 옮긴다.)
    ※ 컴포넌트 **안에서만** 비례해야 하는 자리(배지 속 글자 등)는 `em` 이 맞다 — 그때만 쓴다.
    ※ 뿌리를 `100%`(사용자가 브라우저에서 정한 크기)로 옮기는 것은 다음 단계다 — 그러면 위 rem 39곳이
      같이 움직이므로 화면을 훑어보고 정한다.  */
	--font-size-base		: 1rem;		/* 본문 — 뿌리 그대로 (17px) */
	--font-size-sm			: 0.9rem;	/* 보조 — 표 안·부차 정보 (15px) */
	--font-size-xs			: 0.825rem;	/* 잔글씨 — 도움말·캡션 (14px). .c-help 이 쓰는 값과 같다 */
	--font-size-lg			: 1.2rem;	/* 소제목 (20px) */

/*  치수  ========================================================================================
    ★ `--control-height` 는 **한 줄에 나란히 서는 것들의 공통 높이**다 — 입력칸 · select · 버튼이
      이 하나를 읽는다. 사용자쪽은 34 다: 레거시 입력칸이 `line-height:32px` + 테두리 1+1 이었다.
    ★ 줄 높이(line-height)는 토큰이 **아니다** — `calc(var(--control-height) - 2px)` 로 컴포넌트가
      그때그때 낸다. 높이에서 **따라 나오는 수**라 따로 적지 않는다.  */
	--control-height		: 38px;		/* 폼 컨트롤 공통 높이 — 2026-09-23 34→38 (사용자쪽 폼을 큼직하게, 목업 기준)  [구 .input_form line-height:32px] */
	--control-height-sm		: 28px;		/* 목록 **행 안**의 컨트롤.  ※ 레거시 근거 없음 — 사용자쪽 목록 화면이
										   아직 없다. 그 화면을 붙일 때 `--control-height` 와의 차를 보고 정한다 */
	--control-pad-x			: 10px;		/* 입력칸·select·textarea 안쪽 좌우 여백 — 관리자(5)의 두 배다
										   [구 .input_form padding:0 10px · .textarea_form padding:10px] */
	--row-height			: auto;		/* 목록 행 높이 — 레거시는 **고정하지 않았다**(칸 여백이 높이를 정했다).
										   그래서 `auto` 다. 관리자는 44px 로 못 박는다 */
	--label-width			: 180px;	/* 입력형 표의 라벨 칸 폭 — 2026-09-23 200→180 (사용자 지시).  ※ 레거시 근거 없음(화면마다 제각각이었다) */
	--thead-pad				: 17px 5px;	/* 표 머리 칸 여백 — 관리자(10px 5px)보다 성기다  [구 .gtable thead th] */
	--label-pad				: 14px 10px;	/* 입력형 표의 라벨 칸 여백                [구 .gtable tbody th] */
	--cell-pad				: 14px 10px;	/* 표 값 칸 여백 — 라벨 칸과 **같은 값**이다(관리자는 8:6 으로 다르다)
										       [구 .gtable tbody td] */
	--badge-height			: 20px;		/* 배지 높이 = 한 글자일 때의 가로폭.  ※ 레거시 근거 없음 */
	--gap-inline			: 3px;		/* 나란히 선 것들 사이 간격.  ※ 레거시 근거 없음 */
	--radius-input			: 6px;		/* 입력칸·select·textarea 모서리 — 사용자쪽은 둥글게 — 목업 기준(2026-09-23).  ※ 레거시 근거 없음 */
	--radius-sm				: 2px;		/* 작은 버튼 · 화살표.  ※ 레거시 근거 없음 */
	--radius-md				: 5px;		/* 큰 버튼 · 배지 — 레거시 게시판 버튼이 5 였다  [구 .bbs_btn01] */

/*  폼 하단의 큰 버튼 (c-btn--lg) — 화면을 끝내는 동작([등록하기][목록][삭제]).
    **사용자쪽이 훨씬 크다** — 레거시 게시판 버튼이 높이 54 에 최소폭 100 이었다.
    ★ 기본 버튼(c-btn)은 여기 **해당 없다** — 그쪽은 입력칸·select 와 한 줄에 나란히 서야 해서
      `--control-height` 를 같이 읽는다(위 "치수" 절의 ★). 큰 버튼은 그 줄에 안 선다.
                                                          [구 .bbs_btn01 · .bbs_btn02]  */
	--btn-lg-height			: 54px;		/* 줄 높이는 여기서 테두리 1+1 을 뺀다 */
	--btn-lg-min-width		: 100px;	/* 사용자쪽은 최소폭을 못 박는다 — 버튼이 글자 수에 따라 들쑥날쑥하지 않다 */

}