@charset "utf-8";
/* ------------------------------------------------------------------
 * 총판모드(PD) 전용 스타일
 *  basic.css 에는 프레임 레이아웃이 없어 여기에서 자립적으로 정의한다.
 *  (erp.css 의 프레임 구조를 기반으로 총판 배색 적용)
 * ------------------------------------------------------------------ */

/* ===== 프레임 ===== */
#frame_all { width:100%; height:100%; position:fixed; top:0; overflow-y:hidden; padding:0; margin:0; }

#frame_all #head { position:fixed; z-index:100000; left:0; top:0; width:100%; height:50px; font-size:13px; font-weight:bold; line-height:50px; color:#fff; padding:0; margin:0; background-color:#2C3E50; }
#frame_all #head li { color:#fff; padding:0; margin:0; }
#frame_all #head a { color:#fff; }
#frame_all #head #top_logo { float:left; width:200px; text-align:center; font-size:13px; font-weight:bold; color:#fff; cursor:pointer; }
/* PAI ASP 로고가 검정이라 헤더(네이비)에 맞춰 흰색으로 반전시킨다 */
#frame_all #head #top_logo img { height:28px; vertical-align:middle; filter:brightness(0) invert(1); }
#frame_all #head #top_logo span { vertical-align:middle; margin-left:6px; font-size:12px; font-weight:normal; color:#B8C4D0; }
#frame_all #head #left_menu_icon { float:left; margin-right:10px; }
#frame_all #head #top_stname { float:left; font-size:110%; }
#frame_all #head #top_logout { position:fixed; top:0; right:0; font-size:25px; padding-right:10px; }

#frame_all #left_menu { position:fixed; width:200px; height:100%; font-size:12px; line-height:14px; z-index:99999; background-color:#2C3E50; }

#frame_all #content { position:absolute; top:50px; width:calc(100% - 200px); height:calc(100% - 50px); overflow-x:hidden; overflow-y:auto; margin-left:200px; background-color:#fff; font-size:12px; color:#333; }
#frame_all #content .sub_title { float:left; color:#333; font-size:25px; font-weight:bold; padding-top:20px; }
#frame_all #content #sub_title_etc { float:left; padding-left:20px; padding-top:25px; line-height:25px; }
#frame_all #content .menu_location { float:right; color:#888; font-size:13px; padding-top:30px; }
#frame_all #content .menu_location i { font-size:16px; }
#frame_all #content #content2 { height:100%; }

#frame_all.mu_close #left_menu { width:0; display:none; }
#frame_all.mu_close #content { width:calc(100% - 10px); padding-left:10px; margin:0; }
#frame_all.mu_close #left_menu_icon { left:-2px; }

/* ===== 좌측메뉴 ===== */
#left_menu_icon { width:30px; height:52px; cursor:pointer; text-align:center; }

#i_left_menu { width:200px; height:100%; background-color:#2C3E50; margin-top:50px; overflow-x:hidden; overflow-y:auto; }
#i_left_menu div.menu { padding:0; color:#fff; font-size:15px; font-weight:bold; font-family:Malgun Gothic,NanumGothic,Gulim; }
#i_left_menu div.menu ul { margin:0; padding:0; list-style:none; }
#i_left_menu div.menu ul p { margin:0; }
#i_left_menu div.menu ul p.mu1 { color:#fff; height:46px; line-height:46px; padding-left:15px; cursor:pointer; }
#i_left_menu div.menu ul p.mu1:hover { background-color:#22303D; }
#i_left_menu div.menu ul.on p.mu1 { background-color:#1B2836; }
#i_left_menu div.menu ul li { list-style:none; height:38px; line-height:38px; padding-left:32px; font-size:14px; font-weight:normal; color:#D8DEE4; background-color:#22303D; cursor:pointer; display:none; }
#i_left_menu div.menu ul li:hover { color:#fff; background-color:#1B2836; }
#i_left_menu div.menu ul li.on { color:#5DADE2; font-weight:bold; }

/* ===== 검색영역 ===== */
#div_search { font-size:12px; padding:10px 5px; border:1px solid #ddd; background-color:#f7f7f7; line-height:30px; }
#div_search div { color:#333; }
#div_search input[type=text] { background-color:#fff; border:1px solid #bbb; font-size:13px; height:30px; padding:0 5px; margin-top:0; }
#div_search select { background-color:#fff; border:1px solid #bbb; font-size:12px; height:30px; margin-top:1px; }
#div_search label { padding-right:5px; cursor:pointer; line-height:30px; }
#div_search button { height:30px; cursor:pointer; padding:0 12px; border:0; border-radius:2px; background-color:#2C3E50; color:#fff; font-size:14px; }
#div_search button:hover { background-color:#3E5871; }
#div_search button:active { color:#F5B041; }

/* ===== 팝업 ===== */
#open_div { padding:0 18px 18px 18px; }
#open_div .title { font-size:15px; font-weight:bold; color:#2C3E50; padding:14px 0 10px 0; }

/* ===== 입력 테이블 ===== */
table.table_input { width:100%; border-collapse:collapse; border-top:2px solid #2C3E50; font-size:13px; }
table.table_input th { padding:8px 10px; text-align:left; background-color:#f7f7f7; border-bottom:1px solid #e0e0e0; color:#333; font-weight:bold; }
table.table_input td { padding:8px 10px; border-bottom:1px solid #e0e0e0; color:#333; }
table.table_input input[type=text], table.table_input input[type=password] { border:1px solid #bbb; height:28px; padding:0 5px; font-size:13px; }
table.table_input select { border:1px solid #bbb; height:28px; font-size:13px; }
table.table_input button { height:28px; padding:0 10px; border:1px solid #bbb; background-color:#fff; color:#333; cursor:pointer; border-radius:2px; font-size:12px; }
table.table_input button:hover { background-color:#f0f0f0; color:#000; }

/* ===== 목록 테이블 ===== */
table.table_list { width:100%; border-collapse:collapse; border-top:2px solid #2C3E50; font-size:13px; table-layout:fixed; }
/* 부트스트랩이 th 를 text-align:inherit 로 덮으므로 명시한다 */
table.table_list th { padding:7px 8px; background-color:#f7f7f7; border-bottom:1px solid #e0e0e0; color:#333; font-weight:bold; text-align:center; }
table.table_list td { padding:7px 8px; border-bottom:1px solid #ececec; color:#333; text-align:center; }
table.table_list th.left,  table.table_list td.left  { text-align:left; }
table.table_list th.right, table.table_list td.right { text-align:right; }
table.table_list tr:hover td { background-color:#fafafa; }
table.table_list button { height:26px; padding:0 8px; border:1px solid #bbb; background-color:#fff; color:#333; cursor:pointer; border-radius:2px; font-size:12px; }
table.table_list button:hover { background-color:#f0f0f0; color:#000; }

/* ===== 계정 추가 영역 ===== */
#div_user_add { margin-top:28px; padding:14px 12px 12px 12px; background-color:#f7f7f7; border:1px solid #ececec; border-radius:4px; }
#div_user_add .tit { font-size:13px; font-weight:bold; color:#333; margin-bottom:10px; }
#div_user_add input[type=text], #div_user_add input[type=password] {
	height:26px; line-height:26px; font-size:12px; border:1px solid #bbb; border-radius:2px; padding:0 6px; box-sizing:border-box;
}
#div_user_add input::placeholder { font-size:12px; color:#aaa; }
/* 입력칸은 폭에 상관없이 항상 한 줄 (부트스트랩 .row 충돌 회피) */
#div_user_add .add_row { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin:0; }
#div_user_add .add_row input { flex:1 1 0; min-width:0; }
#div_user_add .btn_row { margin-top:10px; }
#div_user_add button {
	height:28px; font-size:12px; padding:0 18px; border:0; border-radius:2px;
	background-color:#2C3E50; color:#fff; cursor:pointer;
}
#div_user_add button:hover { background-color:#3E5871; }

/* ===== 신청 장비 추가 영역 ===== */
#div_dev_add { margin-top:6px; padding:12px; background-color:#f7f7f7; border:1px solid #ececec; border-radius:4px; }
/* 부트스트랩의 .row 와 충돌하지 않도록 별도 클래스를 쓴다 */
#div_dev_add .dev_row { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin:0; }
#div_dev_add .lbl { font-size:12px; color:#888; white-space:nowrap; }
#div_dev_add select,
#div_dev_add input[type=text] {
	height:28px; line-height:28px; font-size:12px; border:1px solid #bbb; border-radius:2px;
	padding:0 6px; box-sizing:border-box; background-color:#fff; color:#333;
}
#div_dev_add .w_dev  { width:110px; }
#div_dev_add .w_prog { width:130px; }
#div_dev_add .w_qty  { width:70px; text-align:right; }
#div_dev_add button {
	height:28px; font-size:12px; padding:0 18px; border:0; border-radius:2px;
	background-color:#2C3E50; color:#fff; cursor:pointer; white-space:nowrap; margin-left:4px;
}
#div_dev_add button:hover { background-color:#3E5871; }

/* ===== 처리중 화면 (가맹점 생성 대기) ===== */
#pd_wait { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:200000; background:rgba(255,255,255,0.92); }
#pd_wait .box { position:absolute; top:38%; left:0; width:100%; text-align:center; }
#pd_wait .ttl { font-size:18px; font-weight:bold; color:#2C3E50; margin-bottom:12px; }
#pd_wait .msg { font-size:13px; color:#666; line-height:22px; margin-bottom:22px; }
#pd_wait .bar { width:260px; height:5px; margin:0 auto; background:#e4e8ec; border-radius:3px; overflow:hidden; }
#pd_wait .bar span { display:block; width:40%; height:100%; background:#2C3E50; border-radius:3px; animation:pd_bar 1.2s ease-in-out infinite; }
@keyframes pd_bar {
	0%   { margin-left:-40%; }
	100% { margin-left:100%; }
}

/* ===== 목록 상태 배지 =====
 * jGrid 는 셀 값을 HTML 그대로 뿌리므로 조회 SQL 에서 span 을 씌워 보낸다.
 */
.st_badge {
	display:inline-block; min-width:50px; padding:2px 7px; border-radius:10px;
	font-size:11px; font-weight:bold; line-height:16px; text-align:center; white-space:nowrap;
}
.st_use  { background-color:#E7F1FF; color:#0D6EFD; }              /* 사용 */
.st_stop { background-color:#FBE3E5; color:#DC3545; }              /* 중지 - 영업이 멈춘 상태라 눈에 띄어야 한다 */
.st_del  { background-color:#495057; color:#fff; }                 /* 해지 - 종료된 건. 빨강은 조치가 필요한 쪽에 남겨둔다 */
.st_wait { background-color:#FFF3CD; color:#9A7A00; }              /* 장비대기 - 재전송 필요 */
.st_ing  { background-color:#E9ECEF; color:#6C757D; }              /* 생성중 */
.st_fail { background-color:#FBE3E5; color:#DC3545; }              /* 생성실패 */

/* ===== 가맹점 상태변경 (상세창 하단) ===== */
#div_state { padding:12px; background-color:#f7f7f7; border:1px solid #ececec; border-radius:4px; }
#div_state.canceled { background-color:#fdf3f3; border-color:#f0d5d5; }
#div_state .now { font-size:13px; color:#333; }
#div_state .row_st { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin:0; }
#div_state .row_st .lbl { font-size:12px; color:#888; white-space:nowrap; }
#div_state .row_st input[type=text] {
	flex:1 1 0; min-width:0; height:28px; line-height:28px; font-size:12px;
	border:1px solid #bbb; border-radius:2px; padding:0 6px; box-sizing:border-box; background-color:#fff; color:#333;
}
#div_state button {
	height:28px; font-size:12px; padding:0 18px; border:0; border-radius:2px;
	color:#fff; cursor:pointer; white-space:nowrap;
}
#div_state .btn_stop { background-color:#6C757D; }
#div_state .btn_stop:hover { background-color:#5A6268; }
#div_state .btn_go   { background-color:#2C3E50; }
#div_state .btn_go:hover { background-color:#3E5871; }
#div_state .btn_del  { background-color:#DC3545; }
#div_state .btn_del:hover { background-color:#BD2130; }
#div_state .btn_del:disabled { background-color:#e2a5aa; cursor:not-allowed; }
/* 해지 영역은 위쪽과 확실히 갈라놓는다 */
#div_state .danger { padding-top:12px; border-top:1px dashed #e0c0c0; }

/* ===== 공용 위젯 =====
 * CSS 는 css_{URLTYPE}.css 규칙으로 한 파일만 로드되므로(BasicFunction::html_head),
 * 다른 모드의 css_V.css 등에 있는 공용 위젯 스타일을 여기에도 둬야 한다.
 * 빠뜨리면 스타일 없이 문서 흐름에 그대로 흘러나온다.
 */

/* 메시지창 - pop_msg() 가 body 에 붙이는 div */
.Msg_Open {
	min-width:200px; position:fixed; top:0; right:10px; color:#204EAC; background-color:#C7D6F5;
	border:1px solid #497ADE; z-index:9999999; border-radius:4px; padding:15px; font-size:15px; font-weight:bold;
}
.Msg_Open.blue { color:#204EAC; background-color:#C7D6F5; border:1px solid #497ADE; }
.Msg_Open.red  { color:#ffffff; background-color:#D9534F; border:1px solid #9B2522; }

/* 로딩창 */
#J_Loading { position:absolute; z-index:9999999; filter:alpha(opacity=30); opacity:0.3; text-align:center; vertical-align:middle; background:url(/images/waiting.gif) center center no-repeat #F4C891; }

/* 폼 응답 수신용 숨은 프레임 (index.php 에서 class='off' 로 생성된다) */
iframe#hiddenFrame     { width:0; height:0; top:0; left:0; background-color:#fff; border:0; display:none; position:fixed; z-index:9999; }
iframe#hiddenFrame.off { width:0; height:0; border:0; display:none; }
iframe#hiddenFrame.on  { width:100%; height:300px; background-color:#fff; border:3px solid #FF0000; display:block; resize:vertical; overflow:auto; }

/* ===== 기타 ===== */
.color_red { color:#DC3545; }
.color_blue { color:#0D6EFD; }
.color_888 { color:#888; }