@charset "utf-8";
/* ==========================================================================
 * 버튼 모양 통일 — 1단계 : 모양만, 색은 건드리지 않는다
 *
 * 왜 색을 안 건드리나
 *   btn-primary 가 1,231개 파일에서 "주 동작" 이 아니라 "색 있는 버튼" 으로 쓰이고 있다.
 *   여기서 색을 바꾸면 그 화면들이 통째로 달라진다. 색은 따로 결정한 뒤에 한다.
 *   이 파일은 크기·모서리·정렬만 맞춘다. 모양을 되돌릴 때는 이 파일 하나만 지우면 된다.
 *   (색은 나중에 style.css 로 갔다 — 이 파일 맨 아래 설명 참고. 색을 되돌릴 때 이 파일을
 *    지워도 아무 일도 일어나지 않는다.)
 *
 * 크기를 왜 34px 로 잡았나 — 처음에 32px 로 했다가 고쳤다
 *   손대지 않은 화면의 .btn 은 padding 6/12 + 글자 12px + 테두리 2 = 약 31px 이다.
 *   "버튼이 커지지 않게" 하려고 32px 로 잡았는데, 그게 오히려 통일을 깼다.
 *   이미 `.btn{ height:34px }` 를 직접 박아 둔 파일이 44개(규칙 71개) 있고
 *   CLAUDE.md 도 버튼 높이를 34px 로 정해 두었다. 32px 로 두면 값이 둘이 되어
 *   재설계된 화면(DOMS 쪽)만 커 보인다 — 실제로 그렇게 보인다는 지적을 받았다.
 *   통일의 기준은 '지금 작은 값' 이 아니라 '이미 다수가 쓰는 값' 이어야 한다.
 *   덤으로 .form-control 도 34px 이라, 입력칸과 버튼이 어디서든 끝선이 맞는다.
 *
 * 알아 둘 것 — 이 파일이 지는 곳 (처음에 잘못 세어 두었던 것을 고쳤다)
 *   처음 주석에는 "자체 .btn-primary{} 를 쓴 파일이 165개라 명시도가 같으면 그쪽이 이긴다"
 *   고 적혀 있었다. 다시 세어 보니 틀렸다. 세 가지가 섞여 있었다.
 *
 *   ① 스코프 없는 `.btn-primary{` — 2개 파일뿐이다.
 *      actionSearch.php:344 · erp/account/managerModify_pop.php:190
 *      이것만 명시도가 같아서 '뒤에 오는 쪽이 이긴다' 가 적용된다.
 *   ② `.SCOPE .btn-primary` (약 180개 파일) — 클래스가 하나 더 붙어 명시도가 더 높으니
 *      순서와 무관하게 어차피 이긴다. 이건 사고가 아니라 CLAUDE.md 의 화면별 버튼 위계
 *      작업 그 자체다. 건드릴 것이 없다.
 *   ③ `!important` 로 못박은 화면 (약 60개 파일) — 예: doms/claim2/claim_complete_finish2.php
 *      의 `.cc2` 블록은 btn-primary·btn-info 를 파랑(#1c84c6)으로 고정한다. 이 파일은 닿지 않는다.
 *
 *   ①②③ 모두 그대로 둔다. 그 화면을 손댈 때 블록을 지워 이 파일로 넘긴다.
 *   여기서 !important 로 밀지 않는다 — 그렇게 하면 화면마다 왜 안 먹는지 추적할 수 없게 된다.
 *
 *   교훈 : 이런 숫자는 주석에 적기 전에 어떤 선택자를 셌는지 함께 남긴다.
 *   "165개" 는 스코프 붙은 것까지 함께 센 값이라, 읽는 사람을 엉뚱한 걱정으로 이끌었다.
 * ========================================================================== */

/* ---------- 기본 ---------- */
.btn {
	/* 건수 배지(`.btn > .btn-cnt`, css/style.css)가 버튼 모서리를 기준으로 서려면
	   버튼이 '기준점' 이어야 한다. 없으면 배지가 위쪽 어딘가로 날아간다.
	   z-index 를 주지 않으므로 쌓임 순서는 바뀌지 않는다.

	   ⚠ 스스로 `position:fixed/absolute` 로 자리를 잡던 버튼은 이 값에 덮인다.
	   저장소를 훑어 보니 마크업에서 `btn` 을 함께 다는 그런 버튼은 `.minimalize-styl-2`
	   하나뿐이었고(그건 아래에서 모바일에 감춘다), 나머지 자리잡는 것들
	   (dropZoneBtn·refreshBtn·left_showBtn·moblie_writeBtn)은 `btn` 을 달지 않아 안 걸린다.
	   새로 그런 버튼을 만들면 그 화면에서 position 을 다시 지정해야 한다. */
	position: relative;
	/* 아이콘과 글자의 중심선을 맞춘다. inline-block 으로 두면 아이콘이 글자보다
	   1~2px 내려가 앉아, 버튼이 여러 개 늘어선 줄에서 눈에 띈다. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 아이콘과 글자 사이 간격.
	   처음엔 "마크업에 이미 공백 문자가 있으니 gap 을 주면 두 번 들어간다" 고 적어 두었는데,
	   그게 틀렸다. flex 는 아이템 앞뒤의 공백을 없앤다 — `<i></i> 저장` 의 그 한 칸이
	   사라져서 `🗑저장` 처럼 아이콘과 글자가 딱 붙어 나왔다(실제로 그렇게 보인다는 지적을 받았다).
	   1단계에서 display 를 inline-flex 로 바꾼 것이 원인이었으므로 gap 으로 되돌린다.
	   값 6px 은 이미 화면별로 `.btn{gap:6px}` 를 준 규칙이 34개로 가장 많고,
	   CLAUDE.md 상단 헤더 규격(`gap:6px`)과도 같다. */
	gap: 6px;

	min-height: 34px;
	padding: 5px 12px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	/* 줄바꿈을 막는다. 한 버튼만 두 줄이 되면 그 줄의 버튼 키가 전부 달라 보인다. */
	white-space: nowrap;
	vertical-align: middle;
}

/* 아이콘만 있는 버튼은 gap 이 필요 없다(빈 공간이 한쪽으로 몰려 보인다) */
.btn > i:only-child,
.btn > .fa:only-child {
	margin: 0;
}

/* 아이콘에 직접 붙은 좌우 마진을 지운다.
   `<i class="fa fa-check m-r-xs"></i> 저장` 처럼 아이콘에 m-r-xs(margin-right:5px)를 준 버튼이
   918곳 있다(그중 버튼 안이 113줄). 위 gap:6px 과 겹치면 11px 이 되어 그 버튼만 헐렁해진다.
   간격은 gap 한 곳에서만 정한다 — 마크업을 918곳 고치는 대신 여기서 무력화한다.
   `.m-r-xs{margin-right:5px}`(클래스 하나)보다 명시도가 높아 이긴다. */
.btn > i,
.btn > .fa,
.btn > .glyphicon {
	margin-left: 0;
	margin-right: 0;
}

/* 폭을 꽉 채우는 버튼은 flex 여야 한다 — inline-flex 로는 100% 가 되지 않는다 */
.btn-block {
	display: flex;
}

/* ---------- 작은 버튼 두 단계 ----------
 * 손대기 전에는 .btn-sm 이 약 30px, 기본이 약 31px 로 사실상 같은 크기였다.
 * 그래서 목록 안에서 작게 쓰려고 btn-sm 을 붙여도 작아지지 않았다.
 * 34 / 30 / 26 으로 4px 씩 벌려 세 단계가 실제로 구분되게 한다.
 * (btn-sm·btn-xs 에 붙어 있는 세로 마진 10px·14px 는 건드리지 않았다 —
 *  그 값에 기대어 간격을 잡은 화면이 있어서, 지우는 건 이 단계의 일이 아니다) */
.btn-sm {
	min-height: 30px;
	padding: 3px 10px;
	border-radius: 8px;
	font-size: 11.5px;
}
.btn-xs {
	min-height: 26px;
	padding: 2px 8px;
	border-radius: 7px;
	font-size: 11px;
}

/* 입력칸 옆 버튼(.input-group)에 따로 규칙을 두지 않는다 —
   기본이 34px 이라 .form-control 과 이미 끝선이 맞는다. 여기 값을 또 적으면
   나중에 기본 높이를 고칠 때 이 줄이 남아 입력칸 옆만 안 바뀐다. */

/* ---------- 포커스 ----------
 * 키보드로 옮겨 다닐 때 지금 어디인지 보이게 한다. 색은 건드리지 않는 단계이므로
 * 테두리·배경은 그대로 두고, 바깥으로 번지는 연한 링만 더한다. */
.btn:focus,
.btn.focus {
	outline: 0;
	box-shadow: 0 0 0 3px #E6F6F8;
}
.btn:active:focus {
	box-shadow: 0 0 0 3px #E6F6F8;
}

/* 눌렀을 때 살짝 가라앉는 것만 통일 — 부트스트랩 기본 그림자는 색이 섞여 있다 */
.btn:active,
.btn.active {
	box-shadow: none;
}

/* ---------- 비활성 ---------- */
.btn[disabled],
.btn.disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
}

/* ---------- 숨겨 둔 버튼은 계속 숨어 있어야 한다 ----------
 * 위 `.btn{ display:inline-flex }` 는 클래스 하나짜리 규칙이라, style.css 가
 * `.어떤버튼{ display:none }` 으로 감춰 둔 버튼과 명시도가 같다. 이 파일이 style.css
 * 뒤에 오므로 뒤엣것이 이겨, 숨어 있던 버튼이 화면에 튀어나온다.
 * 실제로 전자메일 좌측 메뉴의 `보내기`(.moblie_enterBtn)가 PC 에서 나타났다 —
 * 모바일 전용 버튼인데 `메일 작성` 아래에 하나 더 붙어 버튼 줄이 통째로 어긋났다.
 *
 * 그래서 클래스를 둘 적어(`.btn.x`) 순서와 무관하게 이기게 해 둔다.
 * 목록은 눈으로 찾은 게 아니라, bootstrap.min.css ~ 이 파일 사이에 오는 시트
 * (style.css / build.css / styleForDoms.css / bootstrap_add.css / style-*menu.css)에서
 *   ① 선택자가 "클래스 하나" 이고 ② display 를 정하는 규칙 을 뽑고,
 *   ③ 마크업에서 같은 태그에 `btn` 이 함께 붙는 것만 남긴 것이다.
 * 나중에 또 걸리면 같은 방법으로 찾아 여기에 더한다.
 *
 * !important 를 쓰지 않는다 — 원래 규칙에도 없었고, jQuery `.show()` 가
 * 인라인 display 로 이 버튼들을 켜는 화면이 있다. !important 로 누르면 그게 안 켜진다.
 */

/* 메일·게시판 좌측 메뉴의 `보내기` — 모바일에서만 쓴다 (style.css: .moblie_enterBtn) */
.btn.moblie_enterBtn {
	display: none;
}

@media (min-width: 992px) {
	/* 허브공지사항 '권한없음' 버튼 — 모바일 전용 (style.css @media min-width:992px) */
	.btn.hubnotice_noAuth {
		display: none;
	}
}

@media (max-width: 767px) {
	/* 상단 옵션 버튼 줄 / 문서 업로드 버튼 — 좁은 화면에서는 감춘다
	   (style.css @media max-width:767px) */
	.btn.head-m-btn,
	.btn.docu2_uploadBtn {
		display: none;
	}
	/* 사이드바 접기(≡) — 모바일에서는 감춘다 (style.css:316 이 `display:none` 을 준다).
	   위 `.btn{display:inline-flex}` 가 같은 명시도이면서 뒤에 와서 그 숨김을 이기는 바람에
	   모바일 상단에 튀어나와 옆의 홈(🏠) 버튼과 겹쳐 있었다.
	   모바일에서 메뉴는 하단 바의 ≡ 가 연다 — 위에 하나 더 있을 이유가 없다. */
	.btn.minimalize-styl-2 {
		display: none;
	}
	/* 권한없음 버튼은 이 폭에서 하단 풀바다 — 블록 레벨을 유지해야 바를 채운다 */
	.btn.hubnotice_noAuth {
		display: flex;
	}
}

/* 화면에서 JS 로 껐다 켜는 공용 유틸 (style.css: .dnone). 버튼에 붙어도 계속 숨어야 한다 */
.btn.dnone {
	display: none;
}

/* 좌측메뉴 접기 라벨 — 이름만 button 이지 34px 짜리 버튼이 아니다.
 *
 * `css/style.css:9805` 가 이 요소에 `padding:3px 6px; font-size:10px` 을 주고 있다.
 * 즉 글자 높이까지 합쳐야 20px 남짓인 '작은 라벨' 인데, 위 `.btn{min-height:34px}` 이
 * 클래스 1개로 걸려서 **34px 로 부풀었다**(좌측메뉴 13곳 · 버튼 61개).
 * 스코프 규칙이 padding 은 이겼지만 min-height 는 아예 정하지 않아 전역이 그대로 살아난 것이다.
 *
 * min-height 를 풀어 padding·글자 크기가 정하던 원래 높이로 되돌린다.
 * (같은 이름을 <span class="label ... leftList_label"> 로 쓰는 곳이 417개 있는데
 *  그쪽은 .btn 이 아니라 처음부터 영향이 없었다.)
 *
 * 같은 함정에 걸린 것이 둘 더 있었다 — 찾는 법은 `css/style.css` 에서
 * **위아래 padding 3px 이하 + font-size 11px 이하** 인 규칙을 뽑아
 * 그 클래스가 마크업에서 `btn` 과 같이 쓰이는지 세는 것이다.
 *   · `.btn-labelToggle` (메일 좌측메뉴 라벨 접기, 66곳) — padding:3px 6px / font-size:10px
 *   · `.btn_comment_del` (댓글 삭제, 27곳) — **`height:20px` 을 줬는데도 소용없었다.**
 *     `min-height` 가 `height` 보다 세서, 높이를 명시해도 34px 로 밀려 올라간다.
 * ========================================================================== */
.btn.leftList_label,
.btn.btn-labelToggle,
.btn.btn_comment_del {
	min-height: 0;
}

/* 원형 버튼도 같은 함정이다 — `css/style.css` 의 `.btn-circle{width:30px;height:30px}` /
 * `.btn-circle2{25px}` 이 `min-height:34px` 에 눌려 30×34 · 25×34 **타원**으로 그려진다.
 * 좌우 여백도 마찬가지다 : `.btn-circle{padding:6px 0}` 은 명시도가 `.btn`(5px 12px)과 같은데
 * 이 파일이 뒤에 로드돼 `.btn` 이 이긴다 → 30px 폭에 좌우 24px 이 들어가 아이콘 자리가 6px 만 남는다.
 * 그래서 높이·여백을 함께 푼다. (`.btn-circle.btn-lg` 는 50px 이라 원래 안 걸린다.)
 * 지금 이 클래스를 쓰는 마크업은 `dashboard/main2.php` 10곳뿐이고 그 화면은 부르는 곳이 없다.
 * 그래도 목록에서 빼 두면 다음에 원형 버튼을 쓸 때 같은 자리에서 또 물린다. */
.btn.btn-circle,
.btn.btn-circle2 {
	min-height: 0;
	padding: 0;
}


/* ==========================================================================
 * 2단계(색)는 이 파일에 없다 — css/style.css 로 옮겼다
 *
 * 한동안 이 파일이 btn-success·btn-info·btn-default·btn-warning·btn-danger·btn-white 의
 * 색을 style.css 뒤에서 덮어쓰고 있었다. 그러다 style.css 자체의 값을 cx 로 고치고 나니
 * 같은 값이 두 곳에 남았다. 그 상태가 위험하다 — 앞엣것(style.css)을 고쳐도 뒤엣것(이 파일)이
 * 이겨서 "고쳤는데 안 바뀐다" 가 된다. 그래서 색은 style.css 한 곳에만 두었다.
 *
 * 지금 색은 여기서 찾는다 (css/style.css). 행 번호는 바뀌기 쉬우니 못 찾으면
 * `rg -n "^\.btn-(primary|success|info|default|warning|danger|white) \{" css/style.css` 로 찾는다.
 *   btn-primary  1011행   #21AFBF / hover #1FA2B1
 *   btn-success  1048행   #13b07c / hover #12a373
 *   btn-info     1085행   #21AFBF / hover #1FA2B1   (주 동작이다. 이유는 아래)
 *   btn-default  1125행   흰 버튼
 *   btn-warning  1165행   #f59e0b / hover #d97706, 테두리형 글자 #c2410c
 *   btn-danger   1202행   #ef4d5a / hover #de4753, .page-heading 은 흰 버튼+빨간 아이콘
 *   btn-white    1311행   테두리 #d8dee6 / hover 연청록+청록
 *
 * btn-info 를 주 동작(청록 채움)으로 둔 이유 — 처음에 연청록 보조로 내렸다가 되돌렸다.
 *   flow/flowColumnView_a·flow_view   참조하기·수신하기·협조하기·통제하기·실행하기·합의하기
 *   inc/function.inc.php              검색
 *   open/open.php · faxall/fax.a.php  다운로드 ('이동' 은 btn-outline btn-info 라 테두리형)
 *   클래스 '이름'(info)이 아니라 그 클래스가 붙은 '버튼 글자' 를 봐야 역할이 보인다.
 *
 * 이 파일에 남은 것은 모양(크기·모서리·정렬·포커스·비활성)과,
 * 위 `.btn{ display:inline-flex }` 때문에 되살아나는 '숨겨 둔 버튼' 을 다시 숨기는 규칙뿐이다.
 * 색을 되돌리려면 이 파일이 아니라 style.css 를 봐야 한다.
 * ========================================================================== */

/* ==========================================================================
 * 삭제 버튼은 어디서나 한 모양 — 흰 배경 + 빨간 테두리 (hover 때 빨강으로 채운다)
 *
 * 색·기본 모양은 css/style.css 의 .btn-danger 가 정한다. 여기서는 그 기본값을
 * 덮어버리는 '변형 클래스' 만 되돌린다.
 *   btn-outline  163곳 — 배경을 투명으로 만든다 → 기본값과 같게
 *   btn-rounded   94곳 — radius:50px 알약 → 크기 단계값(9/8/7px)
 *
 * 왜 여기서 하나 : `.btn-outline`·`.btn-rounded` 는 클래스 하나라, 2클래스로 적으면
 * !important 없이 이긴다. 색 자체는 style.css 한 곳에서만 정한다.
 * ========================================================================== */

.btn-danger.btn-outline {
	background-color: #fff;
	border-color: #ef4d5a;
	color: #be123c;   /* 글자용 진한 빨강 — 자세한 이유는 style.css 의 .btn-danger 주석 */
}
.btn-danger.btn-outline:hover,
.btn-danger.btn-outline:focus,
.btn-danger.btn-outline:active,
.btn-danger.btn-outline.active {
	background-color: #ef4d5a;
	border-color: #ef4d5a;
	color: #fff;
}

/* 알약(radius 50px) 삭제 → 다른 버튼과 같은 라운드 */
.btn-danger.btn-rounded {
	border-radius: 9px;
}
.btn-danger.btn-rounded.btn-sm {
	border-radius: 8px;
}
.btn-danger.btn-rounded.btn-xs {
	border-radius: 7px;
}

/* 예외 : .no-hover 는 버튼이 아니라 결재 도장(승인·보류·반려·전결)이다 — 알약을 지킨다.
 *
 * 위 규칙이 .btn-danger.btn-rounded 를 전부 잡는 바람에 결재 문서에서
 * 빨간 도장만 네모(9px)가 되고 청록 도장(.btn-primary.btn-rounded)은 알약(50px)으로
 * 남아, 같은 문서 안에 모양이 다른 도장 두 개가 찍혀 있었다.
 * 게다가 인쇄 화면(flow_print3/4)은 이 파일을 안 읽어서 거기선 둘 다 알약이라
 * '화면과 인쇄가 다른' 상태이기도 했다. 도장을 알약으로 되돌려 셋을 맞춘다.
 *
 * .no-hover 가 붙은 154곳을 세어 보니 전부 결재 도장이고 삭제 버튼은 하나도 없다.
 * 클래스 3개라 위 2개짜리 규칙을 !important 없이 이긴다. */
.btn-danger.btn-rounded.no-hover {
	border-radius: 50px;
}


/* ==========================================================================
 * 목록 표 안의 버튼 — 행 높이를 끌어올리지 않게 한다
 *
 * 문제 : 행 안에 버튼이 있으면 그 행만 키가 커진다. 글자만 있는 칸은
 *   13px × 1.43 ≈ 19px 인데 버튼은 min-height 가 .btn 34 / .btn-sm 30 / .btn-xs 26px 이라,
 *   버튼이 조건부로만 나오는 목록(예 : 장비목록의 CWIS)에서는 **행마다 키가 달라진다.**
 *   화면에서 `height:20px !important` 를 줘도 안 통한다 — min-height 는 명시도 싸움이 아니라
 *   height 계산이 끝난 뒤 걸리는 별도 제약이라 언제나 이긴다. 그래서 min-height 를 함께 푼다.
 *
 * ⚠ 전역 선택자로는 못 한다. 실측한 값 —
 *   행 안에 버튼이 있는 화면 287개 중 **193개가 폼 표**(행 안에 입력칸이 있다)이고,
 *   거기 버튼은 옆 입력칸(30~38px) 높이에 맞춰 둔 것이라 줄이면 끝선이 어긋난다.
 *   `table-hover` 로 목록만 가르려 했더니 폼 화면 97개가 그 클래스를 쓰고,
 *   `input-group` 으로 가르려 했더니 폼 표의 맨 버튼이 706개였다. 두 축 다 오염돼 있다.
 *   → 그래서 '표시 클래스' 를 쓴다. 값은 여기 한 곳에만 두고, 목록 표에만 클래스를 붙인다.
 *
 * 쓰는 법 : 목록 <table> 에 `cx-rowbtn` 을 더한다.
 *   <table class="table table-bordered table-hover cx-rowbtn">
 *
 * 20px 인 이유 : 글자 칸(약 19px)보다 크지 않아야 행 높이를 안 밀어 올린다.
 *   표준 크기(34/30/26px)보다 작은 예외이므로 목록 행 안에서만 쓴다.
 * ========================================================================== */
.cx-rowbtn > tbody > tr > td .btn {
	min-height: 0;
	height: 20px;
	padding: 0 6px;
	line-height: 1;
}