@charset "utf-8";
/**
 * jquery 날짜 선택 콤포넌트 관련
 */
.ui-datepicker-trigger {
    cursor:pointer;
    vertical-align: -5px;
}

/*****************************************************************/
/* editor output */
/*****************************************************************/
.editorOutput, 
.editorOutput th, 
.editorOutput td  { margin: 0; padding: 0; font-size: 13px; font-family: 'apple SD gothic neo','Malgun Gothic',sans-serif; }
.editorOutput p { margin: 0; padding: 3px 0; font-size: 13px; font-family: 'apple SD gothic neo','Malgun Gothic',sans-serif; }
.editorOutput a:hover { text-decoration: underline; }
.editorOutput a:link { color: #0000ff; }
.editorOutput ul { margin: 0 0 0 40px; padding: 0; }
.editorOutput ul li { margin: 0; list-style-type: disc; padding: 0; }
.editorOutput ul ul li { list-style-type: circle; }
.editorOutput ul ul ul li { list-style-type: square; }
.editorOutput img, .editorOutput fieldset { border: 0; }

@media all and (max-width:640px) {
    .editorOutput, 
    .editorOutput th, 
    .editorOutput td { font-size:1.1em; font-family: 'apple SD gothic neo','Malgun Gothic',sans-serif; }
    .editorOutput p { font-size:1.1em; font-family: 'apple SD gothic neo','Malgun Gothic',sans-serif; }
}

/*****************************************************************/
/* 업로드 파일 리스트 */
/*****************************************************************/
.file_list { margin:0 0 0 0; }

.file_list ul {list-style:none; padding:0; margin:0;}
.file_list ul li {list-style:none;}

.file_list li { margin:5px 0 5px 0;position: relative; }
.file_list li .file_txt { position: relative;width:300px;height:22px;border:1px solid #CCCCCC; }
.file_list li .file_txt .file_name { position: absolute;top:4px;left:4px; }
.file_list li .file_txt .file_size { top:4px;right:20px;position: absolute; }
.file_list li .file_btn { top:0;left:305px;position: absolute; }
.file_list li .file_msg { width:100%;}

/*****************************************************************/
/* loding */
/*****************************************************************/
.loding_search { padding-top:10px;padding-bottom:10px;text-align:center;border:2px solid black;background-color:white; }
.loding_search span { display:block; background:url(./images/waiting.gif) no-repeat center;height:20px; };
.loding_modal { text-align:center;margin:20px;}
.loding_modal span { display:block; background:url(./images/waiting.gif) no-repeat center;height:20px;margin-top: 40px; }

/*****************************************************************/
/* pagination */
/*****************************************************************/

/* 페이징 */
.pagination {text-align:center;padding:8px;}

/* 모든 링크 */
.pagination a {text-decoration: none;border: solid 1px #c8c8c8;color: #444444;}
.pagination a:link {text-decoration: none;border: solid 1px #c8c8c8;color: #444444;}
.pagination a:visited {text-decoration: none;border: solid 1px #c8c8c8;color: #444444;}
.pagination a:active {text-decoration: none;border: solid 1px #c8c8c8;color: #444444;}
.pagination a:hover {text-decoration: none;border: solid 1px #5d5d5d;color: #444444;}

/* 각요소의 공백 */
.pagination a,
.pagination span {padding: 6px 4px 5px 4px;font-size: 12px; display:inline-block;min-width: 18px; }

/* 선택된 page */
/* .pagination .current {border:1px solid #dedede;background-color:#325391;color:#ffffff;} */
.pagination .current {border: solid 1px #5d5d5d;color: #fff;background-color: #444;font-weight: bold;}

/*****************************************************************/
/* button */
/* Jeong Chan Myeong(dece24@gmail.com) */
/*****************************************************************/

/* Button Reset */
.button,
.button a,
.button button,
.button input { position:relative; margin:0; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; border:0; font-size:12px; font-family:Tahoma, Sans-serif; white-space:nowrap; background:url(./images/buttonWhite.gif) no-repeat; overflow:visible; color:#333;}
.button { height:23px; padding:0; vertical-align:middle; margin-right:2px; background-position:left top;}
.button a,
.button button,
.button input{ left:2px; vertical-align:top; cursor:pointer;}

/* Button Size */
.button.large { height:29px; background-position:left -30px; }
.button.xLarge { height:35px; background-position:left -65px; }
.button.small { height:18px; background-position:left -107px; }
.button a,
.button button,
.button input { height:23px; padding:0 10px 0 8px; font-size:12px; line-height:23px; background-position:right top;}
.button.large a,
.button.large button,
.button.large input { height:30px; padding:0 10px 0 8px; font-size:16px; line-height:29px; background-position:right -30px;}
.button.xLarge a,
.button.xLarge button,
.button.xLarge input { height:35px; padding:0 10px 0 8px; font-size:20px; line-height:35px; background-position:right -65px;}
.button.small a,
.button.small button,
.button.small input { height:18px; padding:0 6px 0 4px; font-size:12px; line-height:18px; background-position:right -107px;}

/* Button Text Color */
.button *:hover,
.button *:active,
.button *:focus{ color:#690;}
.button.green,
.button.green a,
.button.green button,
.button.green input { background-image:url(./images/buttonGreen.gif); color:#fff;}
.button.green *:hover,
.button.green *:active,
.button.green *:focus{ color:#ff0;}
.button.black,
.button.black a,
.button.black button,
.button.black input { background-image:url(./images/buttonBlack.gif); color:#fff;}
.button.black *:hover,
.button.black *:active,
.button.black *:focus{ color:#ff0;}
.button.red,
.button.red a,
.button.red button,
.button.red input { background-image:url(./images/buttonRed.gif); color:#fff;}
.button.red *:hover,
.button.red *:active,
.button.red *:focus{ color:#ff0;}
.button.blue,
.button.blue a,
.button.blue button,
.button.blue input { background-image:url(./images/buttonBlue.gif); color:#fff;}
.button.blue *:hover,
.button.blue *:active,
.button.blue *:focus{ color:#ff0;}

/* Button Text Strong */
.button.strong * { font-weight:bold !important;}

/*****************************************************************/
/* button ui */
/*****************************************************************/
.ui_btn_g { vertical-align:middle; display:inline-block; height:26px; border:1px solid #d8d8d8; 
background: #fdfcfc; /* Old browsers */
background: -moz-linear-gradient(top,  #fdfcfc 0%, #dfdfdf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfcfc), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fdfcfc 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fdfcfc 0%,#dfdfdf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fdfcfc 0%,#dfdfdf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fdfcfc 0%,#dfdfdf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfcfc', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g a,
.ui_btn_g a:hover { display:inline-block; padding:0px 30px; margin:0; border:0; line-height:26px; font-size:12px; color:#363535; }
.ui_btn_g input { display:inline-block; padding:0px 30px; margin:0; border:0; line-height:26px; font-size:12px; color:#363535; background: none; cursor:pointer; }

.ui_btn_g.small {height:22px; line-height:22px; }
.ui_btn_g.small a,
.ui_btn_g.small input {padding:0px 22px; line-height:22px; }

.ui_btn_g.large {height:29px; line-height:30px;}
.ui_btn_g.large a,
.ui_btn_g.large input {padding:0px 22px; line-height:30px;}

.ui_btn_g.wide {vertical-align:middle; display:inline-block; width:100%; height:40px; margin:20px 0; background-color:#5a4f4a; text-align:center;}
.ui_btn_g.wide a,
.ui_btn_g.wide input {display:inline-block; padding:0; margin:0; border:0; line-height:40px; font-size:12px; color:#000; font-weight:bold; text-decoration:none; display:block; width:100%;}

.ui_btn_g.select {}
.ui_btn_g.select a,
.ui_btn_g.select input { background:url(./images/bui_form_select.png) no-repeat 90% 13px; }

.ui_btn_g.gray { border:1px solid #818181; 
background: #8e8e8e; /* Old browsers */
background: -moz-linear-gradient(top,  #8e8e8e 0%, #818181 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#818181)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8e8e8e 0%,#818181 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8e8e8e 0%,#818181 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8e8e8e 0%,#818181 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8e8e8e 0%,#818181 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#818181',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.gray a,
.ui_btn_g.gray input { color:#ffffff;}

.ui_btn_g.blue { border:1px solid #4568b3; 
background: #395ba9; /* Old browsers */
background: -moz-linear-gradient(top,  #395ba9 0%, #274890 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#395ba9), color-stop(100%,#274890)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #395ba9 0%,#274890 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #395ba9 0%,#274890 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #395ba9 0%,#274890 100%); /* IE10+ */
background: linear-gradient(to bottom,  #395ba9 0%,#274890 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#395ba9', endColorstr='#274890',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.blue a,
.ui_btn_g.blue input { color:#ebeef6;}

.ui_btn_g.red { border:1px solid #b62d57; 
background: #f9112f; /* Old browsers */
background: -moz-linear-gradient(top,  #f9112f 0%, #de0313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9112f), color-stop(100%,#de0313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9112f 0%,#de0313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9112f 0%,#de0313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f9112f 0%,#de0313 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f9112f 0%,#de0313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9112f', endColorstr='#de0313',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.red a,
.ui_btn_g.red input { color:#fee7ea;}

.ui_btn_g.green { border:1px solid #349519; 
background: #4bab2d; /* Old browsers */
background: -moz-linear-gradient(top,  #4bab2d 0%, #358920 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bab2d), color-stop(100%,#358920)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4bab2d 0%,#358920 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4bab2d 0%,#358920 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4bab2d 0%,#358920 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4bab2d 0%,#358920 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bab2d', endColorstr='#358920',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.green a,
.ui_btn_g.green input { color:#f6faf4;}

.ui_btn_g.sky { border:1px solid #26a099; 
background: #29a6a0; /* Old browsers */
background: -moz-linear-gradient(top,  #29a6a0 0%, #1d8884 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29a6a0), color-stop(100%,#1d8884)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #29a6a0 0%,#1d8884 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #29a6a0 0%,#1d8884 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #29a6a0 0%,#1d8884 100%); /* IE10+ */
background: linear-gradient(to bottom,  #29a6a0 0%,#1d8884 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29a6a0', endColorstr='#1d8884',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.sky a,
.ui_btn_g.sky input { color:#e9f5f4;}

.ui_btn_g.brown { border:1px solid #767676; 
background: #6c584c; /* Old browsers */
background: -moz-linear-gradient(top,  #6c584c 0%, #4b3629 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c584c), color-stop(100%,#4b3629)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6c584c 0%,#4b3629 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6c584c 0%,#4b3629 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6c584c 0%,#4b3629 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6c584c 0%,#4b3629 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c584c', endColorstr='#4b3629',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.brown a,
.ui_btn_g.brown input { color:#e9e9e9;}

.ui_btn_g.black { border:1px solid #767676; 
background: #535353; /* Old browsers */
background: -moz-linear-gradient(top,  #535353 0%, #3e3e3e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#535353), color-stop(100%,#3e3e3e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #535353 0%,#3e3e3e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #535353 0%,#3e3e3e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #535353 0%,#3e3e3e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #535353 0%,#3e3e3e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#535353', endColorstr='#3e3e3e',GradientType=0 ); /* IE6-9 */ }
.ui_btn_g.black a,
.ui_btn_g.black input { color:#e9e9e9;}

/*****************************************************************/
/* 데스크탑 ui */
/*****************************************************************/
/* 폼 */
.ui_form { padding:10px 0 0 0; }
.ui_form * {  color:#5a5a5a; }
.ui_form .ui_form_title { padding: 5px 0 5px 5px; font-weight:bold; font-size:14px; padding-left:10px; }
.ui_form .ui_form_title .icon { color: #999; font-size: 16px; font-weight: normal; vertical-align: middle; }
.ui_form .ui_form_title .icon { display: none; }
.ui_form .ui_form_title .required { float:right; color:#606060; font-size:12px; text-align:right; }
.ui_form .ui_form_title .required .red { color:#c40452; font-weight:bold; }
.ui_form input,
.ui_form textarea,
.ui_form select,
.ui_form table,
.ui_form button { font-size:12px;}
.ui_form table { width:100%;border-collapse:collapse;border:0;border-top:1px solid #283e6c;}
.ui_form caption { padding:8px 0; font-weight:bold; text-align:left;}
.ui_form th,
.ui_form td { border:0; }
.ui_form th { padding:0 0 0 33px; height:45px; background:url(./images/ui_form_cell_dot.png) no-repeat 19px; background-color:#f5f5f5; border-bottom:1px solid #dcdcdc; text-align:left; font-weight:bold; color:#323232; }
.ui_form td { padding:10px; border-bottom:1px solid #dcdcdc; text-align:left; }
.ui_form .star { color:#c40452; font-weight:bold; }
.ui_form .item { position:relative; margin:-4px 0; }
.ui_form .item .i_input { color:#5a5a5a; height:19px; border:1px solid #c1c1c1;vertical-align:middle; }
.ui_form .item .i_check { position: relative; top: 3px; }
.ui_form .item .i_radio { position: relative; top: 3px; }
.ui_form .item label { margin:0 10px 0 0; cursor:pointer;font-size: 11px;}
.ui_form .item .i_help { position:absolute; top:4px; right:0; }
.ui_form .item .i_label { top:5px; left:6px; }
.ui_form .item .i_desc { margin:2px 0; }
.ui_form .item .hide { position:absolute; left:0; top:0; width:1px; height:1px; font-size:0; line-height:0; visibility:hidden; }
.ui_form .item .random_image { float:left;padding:0 10px 0 0; }
.ui_form .item .random_input { float:left;padding:14px 10px 0 0; }
.ui_form .item .text { height:25px; margin-right:5px; color:#5b5b5b; line-height:25px; }
.ui_form .item .text .red { color:#cc2524; }
.ui_form .item .i_select { padding:2px;margin:2px; }
.ui_form .item .i_select option { background-color: white; color:#5a5a5a }
.ui_form .item .i_scrollbox { height: 100px; padding: 13px; border: 1px solid #d7d7d7; background-color: #fafafa; overflow: scroll; overflow-x:hidden; margin:0 0 10px 0; }
.ui_form .item textarea.i_scrollbox { width: 100%; padding:0; margin:0; resize:none; }
.ui_form_btn { text-align: right;padding-top:5px; }
.ui_form_btn.center { text-align: center; }

/* 리스트 */
.ui_list { margin-bottom:20px; border-top:1px solid #283e6c; }
.ui_list * {  color:#5a5a5a; }
.ui_list table { width:100%;border-collapse:collapse; }
.ui_list th { height:47px;border-bottom:1px solid #d2d2d2;line-height:18px;background-image:url(./images/ui_list_header_bg.png); background-repeat:no-repeat ; background-position:left; background-color:#f9f9f9; text-align:center; font-weight:bold; color:#323232; }
.ui_list th:first-child  { background-image: none; }
.ui_list td { border-bottom:1px solid #e3e3e3; line-height:20px; padding:10px 4px 10px 4px; }
.ui_list td.left { text-align:left; padding-left:20px; }
.ui_list td.left img { vertical-align:middle; margin-right:7px; }

/* 데이터 그리드 */
.ui_frame {}
.ui_frame .ui_frame_label {border:1px solid #999;background:url(./images/dtable_bg.gif) repeat-x;}
.ui_frame .ui_frame_label .wy_drop {margin-right:16px;}
.ui_frame .ui_frame_label table {width:100%;border-collapse:collapse;}
.ui_frame .ui_frame_label th {padding:0 2px 0 2px;height:31px;border-left:1px solid #EEE;}
.ui_frame .ui_frame_label th span {color:#575757;font-size:11px;display:block;line-height:28px;}
.ui_frame .ui_frame_data {border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;overflow-x:hidden;overflow-y:scroll;position:relative;}
.ui_frame .ui_frame_data table {width:100%;border-collapse:collapse;}
.ui_frame .ui_frame_data td {padding:0 2px 0 2px;height:22px;border-left:1px solid #EEE;border-bottom:1px solid #EEE;}

/* 검색 */
.ui_search { height:36px; }
.ui_search .option {list-style: none;padding:0;margin:0;}
.ui_search .option li {float: left;padding:0 4px 0 0;}
.ui_search .option li.select select {padding:4px; border:1px solid #d7d7d7;}
.ui_search .search { float:right;list-style: none;padding:0;margin:0; }
.ui_search .search li {float:left;padding:0 0 0 4px;}
.ui_search .search li.select select {height:26px; padding:2px; border:1px solid #d7d7d7;}
.ui_search .search li.input {width:149px; height:26px;}
.ui_search .search li.input input {padding:0; width:144px; height:24px; border:1px solid #d7d7d7; background-color:#f7f7f7;}
.ui_search .search li.search_btn {padding:0;}
.ui_search .search li.search_btn input {text-indent: -1000px;border:0;background: none;cursor:pointer;width:31px;height:26px;background-image: url(./images/ui_search_btn.png);margin:0 0 0 0;}

/* 검색 func */
.ui_search_func {height: 28px;padding:14px 0 10px 0;line-height: 28px;}
.ui_search_func .left {float: left;}
.ui_search_func .right {float: right;}
.ui_search_func select {height:23px;line-height:26px;border:1px solid #b8b8b8;font-size: 12px;color:#515151;}

/*****************************************************************/
/* 모바일 ui */
/*****************************************************************/

/* 입력폼 */
.m_ui_form { margin-top:20px; border-top:2px solid #565656; }
.m_ui_form table { width:100%; border-collapse:collapse; }
.m_ui_form th { padding:13px 0 12px; border-bottom:1px solid #d3d3d3; text-align:left; }
.m_ui_form th .subject { margin-left:15px; background:url(./images/m_ui_table_header_bg.png) repeat-y right top; color:#323232; line-height:20px; font-weight:bold; }
.m_ui_form td { overflow:hidden; padding:13px 15px 12px; text-align:left; color:#3e3e3e; border-bottom:1px solid #d3d3d3; }
.m_ui_form td.file_area { padding:0; text-align:left; color:#3e3e3e; border-bottom:0px solid #d3d3d3; }
.m_ui_form td.content_area { padding:15px 12px; text-align:left; color:#484848; line-height:22px; border:none; }
.m_ui_form td .file { padding:13px 15px 12px; border-bottom:1px solid #d3d3d3; background-color:#f9f9f9; display:none; }
.m_ui_form td .file ul { margin:0; padding:0; }
.m_ui_form td .file li { float:left; list-style:none; width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m_ui_form td .file a,
.m_ui_form td .file a:hover { color:#484848; line-height:20px; }
.m_ui_form td .random_code { float:left; }
.m_ui_form td .random_code_input { float:left; width:100%; }
.m_ui_form td .i_input { width:98%; height:20px; padding:0 1%; border:1px solid #cbcbcb; line-height:22px; }
.m_ui_form td .i_textarea { width:100%; height:100px; border:1px solid #c3c3c3 }

/* 리스트 */
.m_ui_list { margin-bottom:20px; border-top:2px solid #565656; }
.m_ui_list table { width:100%; border-collapse:collapse; }
.m_ui_list th { padding:13px 0; border-bottom:1px solid #d3d3d3; text-align:center; }
.m_ui_list th .no { background:url(./images/m_ui_table_header_bg.png) repeat-y right top; color:#323232; line-height:34px; }
.m_ui_list td { padding:10px 15px; border-bottom:1px solid #d3d3d3; }
.m_ui_list td .subject { text-align:left; color:#3e3e3e; font-weight:bold; }
.m_ui_list td .data { padding-top:2px; text-align:left; color:#888889; font-size:12px; }

/* 검색 */
.m_ui_search { }
.m_ui_search .search { position:relative; margin:14px 0; }
.m_ui_search .search .input { margin:0 88px 0 0; height:26px;}
.m_ui_search .search .input input {padding:0; width:100%; height:26px; border:1px solid #d4d4d4; background-color:#fff;}
.m_ui_search .search .search_btn { position:absolute; right:0; top:0; }

/*****************************************************************/
/* 반응형 ui */
/*****************************************************************/
/* form */
.bui_form { padding:10px 0 0 0; }
.bui_form .bui_form_title { height:22px; padding-left:14px; background:url(./images/bui_form_dot02.png) no-repeat 0 6px; font-size:13px; color:#222222; font-weight:bold; font-Family:'Apple SD Gothic Neo',AppleGothic,"Lucida Grande",Tahoma,Verdana,'Malgun Gothic',Dotum,sans-serif; }
.bui_form .bui_form_body { padding:5px 0 25px; margin-bottom:15px; border:1px solid #cacaca; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.bui_form .bui_form_body .col_th { height:22px; margin:20px 20px 0; padding-left:15px; background:url(./images/bui_form_dot01.png) no-repeat 5px 5px; color:#313131; font-weight:bold; }
.bui_form .bui_form_body .col_th span { color:#c40505; }
.bui_form .bui_form_body .col_td { position:relative; margin:0 20px 10px 20px; }
.bui_form.view .bui_form_body .col_td { padding-left:15px; }
.bui_form .bui_form_body .col_td input,
.bui_form .bui_form_body .col_td select,
.bui_form .bui_form_body .col_td textarea { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#313131; outline:none; }
.bui_form .bui_form_body .col_td .i_input { width:100%; height:27px; padding-left:15px; border:1px solid #d7d7d7; background-color:#fafafa; -webkit-appearance:none; -moz-appearance:none; }
.bui_form .bui_form_body .col_td .i_check { position: relative; top: 2px; }
.bui_form .bui_form_body .col_td .i_radio { position: relative; top: 2px; }
.bui_form .bui_form_body .col_td label { cursor: pointer; margin: 0 10px 0 0; }
.bui_form .bui_form_body .col_td .i_select { width:100%; height:27px; padding-left:13px; border:1px solid #d7d7d7; background-color:#fafafa; }
.bui_form .bui_form_body .col_td .i_select option { height:27px; margin:5px 0 0; border:1px solid #d7d7d7; background-color:#fafafa; }
.bui_form .bui_form_body .col_td .i_textarea { width:100%; height:100px; padding:13px; border:1px solid #d7d7d7; background-color:#fafafa; resize:none; }
.bui_form .bui_form_body .col_td .i_scrollbox { height: 100px; padding: 13px; border: 1px solid #d7d7d7; background-color: #fafafa; overflow: scroll; overflow-x:hidden; margin:0 0 10px 0; }
.bui_form .bui_form_body .col_td textarea.i_scrollbox { width: 100%; padding:0; margin:0; resize:none; }
.bui_form .bui_form_body .col_td .item_adress { margin-right:110px; }
.bui_form .bui_form_body .col_td .item_adress_btn { position:absolute; right:0; top:0; }
.bui_form .bui_form_body .col_td .item_adress_detail { margin-top:5px; }
.bui_form .bui_form_body .col_td .item_year { float:left; width:100px; margin-right:4px; }
.bui_form .bui_form_body .col_td .item_month { float:left; width:50px; margin-right:4px; }
.bui_form .bui_form_body .col_td .item_day { float:left; width:50px; margin-right:4px; }
.bui_form .bui_form_body .col_td .item_fileupload_btn { position:absolute; left:0; top:4px; }
.bui_form .bui_form_body .col_td .item_fileupload_text { margin-top:0; margin-left:132px; margin-bottom:20px; line-height:18px; color:#5b5b5b; }
.bui_form .bui_form_body .col_td .item_fileupload_text span { color:#c40505; font-weight:bold; }
.bui_form .bui_form_body .col_td .item_code_img { position:absolute; width:100px; left:0; }
.bui_form .bui_form_body .col_td .item_code { position:absolute; width:110px; left:105px; top:0; }
.bui_form .bui_form_body .col_td .item_code_input { margin-left:220px; }
.bui_form .bui_form_body .col_td .info_text { margin:5px 0 0 15px; }
.bui_form_btn { text-align:right; margin:15px 0; }
.bui_form_btn.center { text-align:center; }

/* NO LINE */
.bui_form.no_line { padding:0; }
.bui_form.no_line .bui_form_title { height:24px; }
.bui_form.no_line .bui_form_body { padding:5px 0 25px; margin-bottom:15px; border:none; border-top:1px solid #d9d9d9; }
.bui_form.no_line .bui_form_body .col_th { height:22px; margin:17px 10px 0; padding-left:15px; background:url(./images/bui_form_dot01.png) no-repeat 5px 5px; color:#313131; font-weight:bold; }
.bui_form.no_line .bui_form_body .col_td { position:relative; margin:0 10px 10px; }
.bui_form.no_line .bui_form_body .col_agree .check_text { margin:1px 0 0 23px; line-height:19px; }
.bui_form.no_line .bui_form_body .col_agree { overflow:hidden; position:relative; min-height:25px; margin:0 21px 0 15px; color:#555555; vertical-align:middle; } 

/* search */
.bui_search { position:relative; height:36px; }
.bui_search ul.option { margin:0; padding:0; }
.bui_search ul.option li { list-style:none; float:left; margin-right:4px; }
.bui_search ul.option li.select select { min-width:100px; height:28px; padding-left:5px; border:1px solid #d8d8d8; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#363535; }
.bui_search ul.search { position:absolute; right:0; top:0; margin:0; padding:0; }
.bui_search ul.search li { list-style:none; float:left; margin-left:4px; }
.bui_search ul.search li.select select { min-width:100px; height:26px; padding-left:5px; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#363535; font-size:12px; }
.bui_search ul.search li.input > input { min-width:146px; height:26px; padding-left:5px; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#363535; background-color:#f7f7f7; outline:none; }
.bui_search ul.search li.input > input[type=text]::-ms-clear {display: none;}
.bui_search ul.search li.input > .btn { padding:0; }
.bui_search ul.search li.input > .btn > input {text-indent: -1000px;border:0;background: none;cursor:pointer;width:31px;height:26px;background-image: url(./images/ui_search_btn.png);margin:0 0 0 0;}
.bui_search_write { display:none; }

/* search form */
.bui_search_form { position:relative; background-color:#f5f5f5; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.bui_search_form .area { position:relative; padding:15px 0; background-color:#e7e7e7; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.bui_search_form .area ul { margin:0; padding:0; }
.bui_search_form .area li { position:relative; list-style:none; min-height:40px; }
.bui_search_form .area .col_title { position:absolute; width:17%; max-width:110px; padding-left:40px; left:0; top:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#4f4f4f; line-height:40px; background:url(./images/bui_search_bar.png) no-repeat right 14px; line-height:40px; }
.bui_search_form .area .col_text { margin-left:125px; }
.bui_search_form .area .col_text .col_cell01 { float:left; width:15%; min-width:100px; margin-right:4px; }
.bui_search_form .area .col_text input[type=text]::-ms-clear{display: none; }
.bui_search_form .area .col_text .col_cell02 { float:left; width:65%; margin-right:4px; }
.bui_search_form .area .col_text .col_cell03 { float:left; width:2%; min-width:16px; color:#4f4f4f; text-align:center; line-height:30px; }
.bui_search_form .area .col_text .select { width:100%; height:30px; padding-left:4px; background-color:#fff; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#4f4f4f; }
.bui_search_form .area .col_text .input { width:100%; height:30px; padding-left:7px; background-color:#fff; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#4f4f4f; }
.bui_search_form .area .col_text .input01 { width:100%; height:30px; padding-left:7px; background-color:#fff; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#4f4f4f; background:url(./images/bui_search_calendar.png) no-repeat right 8px; background-color:#fff; }
.bui_search_form .slide_btn { height:20px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; border-left:1px solid #dddddd; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-border-bottom-left-radius:4px; -moz-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -webkit-border-top-left-radius:0; -moz-border-top-left-radius:0; border-top-left-radius:0; -webkit-border-top-right-radius:0; -moz-border-top-right-radius:0; border-top-right-radius:0; text-align:center; display:none; }
.bui_search_form .slide_btn a,
.bui_search_form .slide_btn a:hover { line-height:16px; padding-bottom:4px; display:block; }
.bui_search_form .search_btn { position:absolute; width:110px; top:-4px; right:40px; }
.bui_search_form .search_btn .ui_btn_g.wide { vertical-align:middle; display:inline-block; width:100%; height:26px; margin:20px 0; background-color:#5a4f4a; text-align:center;}
.bui_search_form .search_btn .ui_btn_g.wide a,
.bui_search_form .search_btn .ui_btn_g.wide input {display:inline-block; padding:0; margin:0; border:0; line-height:26px; font-size:12px; color:#fff; font-weight:normal; text-decoration:none; display:block; width:100%;}

/* search form simple */
.bui_search_simple_form { padding:10px 0 0 0; color:#333333; position:relative; }
.bui_search_simple_form input,
.bui_search_simple_form textarea,
.bui_search_simple_form select,
.bui_search_simple_form table,
.bui_search_simple_form button{ font-size:12px;}
.bui_search_simple_form table { width:100%;border-collapse:collapse;border:0;border-top:1px solid #283e6c;}
.bui_search_simple_form caption{ padding:8px 0; font-weight:bold; text-align:left;}
.bui_search_simple_form th,
.bui_search_simple_form td{ border:0;}
.bui_search_simple_form th{padding:0 0 0 33px; height:45px; background:url(./images/ui_form_cell_dot.png) no-repeat 19px; background-color:#f5f5f5; border-bottom:1px solid #dcdcdc; color:#313131; text-align:left; font-weight:bold;}
.bui_search_simple_form td{padding:10px; border-bottom:1px solid #dcdcdc; color:#5b5b5b; text-align:left;}
.bui_search_simple_form .item{ position:relative; margin:-4px 0;}
.bui_search_simple_form .item .i_radio { width:13px; height:13px; padding:0; margin:2px 5px 2px 0; vertical-align:middle;}
.bui_search_simple_form .item .i_check { width:13px; height:13px; padding:0; vertical-align: middle;margin: -1px -0 1px }
.bui_search_simple_form .item .i_text,
.bui_search_simple_form .item .i_input { color:#5a5a5a; height:19px; border:1px solid #c1c1c1;vertical-align:middle;}
.bui_search_simple_form .item select{ padding:2px;margin:2px;}
.bui_search_simple_form .item label{ margin:0 10px 0 0; cursor:pointer;font-size: 11px;}
.bui_search_simple_form .search_btn {position: absolute;bottom: 6px;right: 6px}

/* search func */
.bui_search_func {height: 28px;padding:14px 0 10px 0;line-height: 28px;}
.bui_search_func .left {float: left;}
.bui_search_func .right {float: right;}
.bui_search_func select {height:23px;line-height:26px;border:1px solid #b8b8b8;font-size: 12px;color:#515151;}

/* list */
.bui_list { width:100%; margin-bottom:17px; border-top:1px solid #283e6c; }
.bui_list .bui_list_head { }
.bui_list ul { margin:0; padding:0; }
.bui_list li { list-style:none; width:100%; padding:19px 0 16px; border-bottom:1px solid #d2d2d2; background-color:#f9f9f9; display:table; }
.bui_list li:first-child { background-image:none; }
.bui_list li .th { display:table-cell; text-align:center; vertical-align:middle; font-size:12px; font-weight:bold; color:#323232; background:url(./images/bui_list_bar.png) no-repeat left 1px; }
.bui_list li .th:first-child { background-image:none; }
.bui_list li .td { display:table-cell; text-align:center; vertical-align:middle; font-size:12px; color:#5a5a5a;}
.bui_list li .col_no { width:8%; }
.bui_list li .col_image { width:10%; }
.bui_list li .col_subject { }
.bui_list li .col_name { width:14%; }
.bui_list li .col_date { width:11%; }
.bui_list li .col_hit { width:9%; }
.bui_list li .col_process { width:15%; }
.bui_list .bui_list_body { }
.bui_list .bui_list_body ul { margin:0; padding:0; }
.bui_list .bui_list_body li { list-style:none; padding:12px 0 10px; border-bottom:1px solid #e3e3e3; background-color:#fff; line-height:18px; }
.bui_list .bui_list_body li:nth-child(even) { background-color:#f9f9f9;}
.bui_list .bui_list_body li span.red_mark { padding:4px 5px; margin-right:2px; font-weight:bold; color:#ffffff; background-color:#fe2328; }
.bui_list .bui_list_body li .col_image { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:0; line-height:0; }
.bui_list .bui_list_body li .col_image img { width:100%; }
.bui_list .bui_list_body li .col_subject { padding-left:15px; padding-right:20px; text-align:left; color:#000000; font-size:12px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.bui_list .bui_list_body li .col_subject span.red_mark { display:none; }
.bui_list .bui_list_body li .col_subject p { margin:0; padding:0; }

 /* list round */
.bui_list.round { border-top:none; }
.bui_list.round .bui_list_head { display: none; }
.bui_list.round .bui_list_body { }
.bui_list.round .bui_list_body li { list-style:none; padding:20px 0 20px; margin-bottom:8px; border-left:1px solid #ebebeb; border-top:1px solid #ebebeb; border-right:1px solid #ebebeb; border-bottom:3px solid #e3e3e3; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; line-height:20px; background:#fff; cursor:pointer; }
.bui_list.round .bui_list_body li .col_subject { padding-left:20px; text-align:left; border-left:1px solid #dddddd; color:#000000; font-size:12px; }
.bui_list.round .bui_list_body li .col_name { color:#5a5a5a; border-left:1px solid #dddddd; }
.bui_list.round .bui_list_body li .col_date { color:#5a5a5a; border-left:1px solid #dddddd; }
.bui_list.round .bui_list_body li .col_hit { color:#5a5a5a; border-left:1px solid #dddddd; }

 /* list press */
.bui_list.press { width:100%; margin-bottom:17px; border-top:1px solid #283e6c; }
.bui_list.press li .td { position:relative; padding:10px 15px; text-align:left; font-Family:'Apple SD Gothic Neo',AppleGothic,"Lucida Grande",Tahoma,Verdana,'Malgun Gothic',Dotum,sans-serif; color:#333333; font-size:14px; text-align:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.bui_list.press .bui_list_body li .col_press_subject { font-size: 14px; font-weight: bold; }
.bui_list.press .bui_list_body li .col_press_text { margin-top:10px; color:#7e7e7e; }
.bui_list.press .bui_list_body li .col_press_etc { margin-top:6px; color:#646464; }

 /* list thum */
.bui_list.thum li .td { position:relative; padding-left:10px; padding-right:10px; text-align:left; font-Family:'Apple SD Gothic Neo',AppleGothic,"Lucida Grande",Tahoma,Verdana,'Malgun Gothic',Dotum,sans-serif; color:#333333; text-align:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.bui_list.thum li .col_thum { width:20%; }
.bui_list.thum .bui_list_body li .col_thum { padding:3px; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:0; line-height:0; }
.bui_list.thum .bui_list_body li .col_thum img { width:100%; }
.bui_list.thum .bui_list_body li .col_thum_subject { font-size:14px; text-align:left; font-weight:bold; }
.bui_list.thum .bui_list_body li .col_thum_text { margin-top:10px; color:#7e7e7e; }
.bui_list.thum .bui_list_body li .col_thum_etc { margin-top:6px; color:#646464; }

@media all and (max-width:640px) {
    /* form */
    .bui_form.resp .bui_form_body .col_th { height:24px; background:url(./images/bui_form_dot01.png) no-repeat 5px 7px; font-size:1.2em; }
    .bui_form.resp .bui_form_body .col_td { font-size:1.2em; }
    .bui_form.resp .bui_form_body .col_td .i_select { padding-left:10px; }

    .bui_form.resp .bui_form_body .col_td .item_year { width:35%; margin-right:1%; }
    .bui_form.resp .bui_form_body .col_td .item_year { width:35%; margin-right:1%; }
    .bui_form.resp.view .bui_form_body .col_td { font-size:1.2em; }
    .bui_form.resp .bui_form_body .col_td .item_month { width:25%; margin-right:1%; }
    .bui_form.resp .bui_form_body .col_td .item_day { width:25%; margin-right:1%; }
    .bui_form.resp .bui_form_body .col_td .item_fileupload_btn { position:relative; top:0; }
    .bui_form.resp .bui_form_body .col_td .item_fileupload_text { margin-top:10px; margin-left:0; }
    .bui_form.resp .bui_form_body .col_td .item_fileupload_btn { position:relative; top:0; }
    .bui_form.resp .bui_form_body .col_td .item_fileupload_text { margin-top:10px; margin-left:0; }
    .bui_form.resp .bui_form_body .col_td .item_code { position:relative; margin-left:105px; left:0; }
    .bui_form.resp .bui_form_body .col_td .item_code_input { margin-left:0; margin-top:5px; }
    .bui_form.resp .bui_form_body .col_td .info_text01 { margin:5px 0 0 0; display:block; }

    .bui_form.resp .bui_form_body .col_td .item_code { position:relative; margin-left:105px; left:0; }
    .bui_form.resp .bui_form_body .col_td .item_code_input { margin-left:0; margin-top:5px; }
    .bui_form.resp .bui_form_title { font-size:1.3em; }
    .bui_form.resp .bui_form_body .col_th { font-size:1.2em; }
    .bui_form.resp .bui_form_body .col_td .i_input { font-size:1em; }
    .bui_form.resp .bui_form_body .col_td .i_select { font-size:0.8em; }
    .bui_form.resp .bui_form_body .textarea { font-size:1.2em; }
    .bui_form.resp .bui_form_agree .textarea { font-size:1.2em; }

    /* search */
    .bui_search.resp { height:auto; }
    .bui_search.resp ul.option li { float:none; margin-right:0; margin-bottom:7px; }
    .bui_search.resp ul.option li.btn { display:none; }
    .bui_search.resp ul.option li.select select { width:100%; height:30px; padding-left:10px; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; color:#363535; background-color:#f7f7f7; }
    .bui_search.resp ul.search { position:relative; margin-bottom:4px; }
    .bui_search.resp ul.search li { width:100%; margin:0 0 6px 0; position: relative; }
    .bui_search.resp ul.search li.select select { width:100%; height:30px; padding-left:10px; border:1px solid #d7d7d7; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; color:#363535; background-color:#f7f7f7; }
    .bui_search.resp ul.search li.input > input { width:100%; height:30px; padding-left:15px; border:1px solid #d7d7d7; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background-color:#f7f7f7;-webkit-appearance:none; -moz-appearance:none }
    .bui_search.resp ul.search li.input > .btn input {position:absolute; width:30px; height:28px; right:2px; top:1px; background-image:url(./images/bui_search_btn.png); background-position:0 29px; -webkit-border-top-right-radius:4px; -moz-border-top-right-radius:4px; border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-bottom-right-radius:4px; border-bottom-right-radius:4px;   -webkit-border-top-left-radius:0; -moz-border-top-left-radius:0; border-top-left-radius:0; -webkit-border-bottom-left-radius:0; -moz-border-bottom-left-radius:0; border-bottom-left-radius:0; border-left:1px solid #d7d7d7; }
    .bui_search_write { display:block; }
        
    /* search form */
    .bui_search_form.resp { margin-bottom:50px; }
    .bui_search_form.resp .area .col_title { position:relative; width:auto; padding-left:8%; background:none; font-size:1.2em; font-weight:bold; line-height:30px; }
    .bui_search_form.resp .area .col_text { margin-left:8%; margin-bottom:8px; }
    .bui_search_form.resp .area .col_text .col_cell01 { width:43%; margin-bottom:5px; }
    .bui_search_form.resp .area .col_text .col_cell02 { width:43%; }
    .bui_search_form.resp .area .col_text .col_cell03 { width:4%; min-width:4%; }
    .bui_search_form.resp .area .col_text .col_cell04 { position:absolute; width:100%; bottom:0; left:0; }
    .bui_search_form.resp .slide_btn { display:block; }
    .bui_search_form.resp .slide_btn a,
    .bui_search_form.resp .slide_btn a:hover { ldisplay:block; }
    .bui_search_form.resp .search_btn { width:100%; bottom:-70px; left:0; right:0; top:auto; }
    .bui_search_form.resp .search_btn .ui_btn_g.wide { height:40px; }
    .bui_search_form.resp .search_btn .ui_btn_g.wide a,
    .bui_search_form.resp .search_btn .ui_btn_g.wide input { line-height:40px; font-size:1.2em; }
    
    /* search form simple */
    .bui_search_simple_form.resp .search_btn { position: relative; bottom: 0; right:0; margin:6px 0 6px 0; text-align: center; }
    
    /* list */
    .bui_list.resp .bui_list_head { display:none; }
    .bui_list.resp li .col_image { width:20%; }
    .bui_list.resp .bui_list_body li .col_no { display:none; }
    .bui_list.resp .bui_list_body li .col_image { padding-left:5px; }
    .bui_list.resp .bui_list_body li .col_subject { padding-left:20px; margin-top:1px; font-weight:bold; font-size:1.2em; color:#1f1f1f; display:block; }
    .bui_list.resp .bui_list_body li .col_subject a,
    .bui_list.resp .bui_list_body li .col_subject a:hover { font-weight:bold; font-size:1em; color:#1f1f1f; }
    .bui_list.resp .bui_list_body li .col_subject span.red_mark { padding:1px 5px; margin-right:2px; font-weight:bold; font-size:0.8em; color:#ffffff; background-color:#fe2328; display:inline-block; }
    .bui_list.resp .bui_list_body li .col_subject p { padding:0 0 0 20px; margin:0; }
    .bui_list.resp .bui_list_body li .col_name { padding-left:20px; display:inline; }
    .bui_list.resp .bui_list_body li .col_date { display:inline; }
    .bui_list.resp .bui_list_body li .col_date::before { content: " / "; }
    .bui_list.resp .bui_list_body li .col_hit { display:inline; }
    .bui_list.resp .bui_list_body li .col_hit::before { content: " / "; }
    .bui_list.resp .bui_list_body li .col_process { width:100%; text-align:left; margin:5px 0 5px 20px; display:block; }
    
     /* list round */
    .bui_list.round.resp .bui_list_body li .col_no { display:none; }
    .bui_list.round.resp .bui_list_body li .col_subject { font-weight:bold; display:block; border:none; color:#000000; font-size:1.2em; }
    .bui_list.round.resp .bui_list_body li .col_name { padding-left:20px; display:inline; border:none; }
    .bui_list.round.resp .bui_list_body li .col_date { display:inline; border:none; }
    .bui_list.round.resp .bui_list_body li .col_date::before { content: " / "; }
    .bui_list.round.resp .bui_list_body li .col_hit { display:inline; border:none; }
    .bui_list.round.resp .bui_list_body li .col_hit::before { content: " / "; }
    
    /* list press */
    .bui_list.press.resp { margin-top:-10px; margin-bottom:10px; border-top:none; }
    .bui_list.press.resp li .td { padding:20px 15px; font-size:1.4em;  }
    .bui_list.press.resp .bui_list_body li .col_press_subject { font-size:1.0em; }
    .bui_list.press.resp .bui_list_body li .col_press_subject span { font-size:1.0em; }
    .bui_list.press.resp .bui_list_body li .col_press_text { padding-right:20px; font-size:0.9em; line-height:1.4em; }
    .bui_list.press.resp .bui_list_body li .col_press_etc { padding-right:20px; margin:5px 0; font-size:0.8em; }

    /* list thum */
    .bui_list.thum.resp { margin-top:-10px; margin-bottom:10px; border-top:none; }
    .bui_list.thum.resp li .td { position:relative; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:block; }
    .bui_list.thum.resp li .col_thum { width:100%; display:block; }
    .bui_list.thum.resp .bui_list_body li { padding:12px 0 0; border-bottom:none; }
    .bui_list.thum.resp .bui_list_body li:nth-child(even) { background-color:#fff;}
    .bui_list.thum.resp .bui_list_body li .col_no { display:none; }
    .bui_list.thum.resp .bui_list_body li .col_thum { padding:8px; }
    .bui_list.thum.resp .bui_list_body li .col_thum_subject { position:relative; padding-left:0; margin-top:20px; padding-right:0; font-size:1.4em; }
    .bui_list.thum.resp .bui_list_body li .col_thum_subject span { font-size:1em; }
    .bui_list.thum.resp .bui_list_body li .col_press_text { padding-right:20px; font-size:0.9em; line-height:1.4em; }
    .bui_list.thum.resp .bui_list_body li .col_thum_text { padding-right:20px; font-size:1.25em; line-height:1.4em; }
    .bui_list.thum.resp .bui_list_body li .col_thum_etc { padding-right:20px; margin-bottom:20px; font-size:1.1em; }
}

/*****************************************************************/
/* Deprecated css */
/*****************************************************************/
.ui_form .item .i_text { color:#5a5a5a; height:19px; border:1px solid #c1c1c1;vertical-align:middle; }
.ui_form .item select { padding:2px;margin:2px; }
.ui_form .item select option { background-color: white; color:#5a5a5a }

.m_ui_form td .i_text { width:98%; height:20px; padding:0 1%; border:1px solid #cbcbcb; line-height:22px; }

.bui_form .bui_form_body .col_td .input,
.bui_form .bui_form_body .col_td .i_text { width:100%; height:27px; padding-left:15px; border:1px solid #d7d7d7; background-color:#fafafa; -webkit-appearance:none; -moz-appearance:none; }
.bui_form .bui_form_body .col_td select,
.bui_form .bui_form_body .col_td .select { width:100%; height:27px; padding-left:13px; border:1px solid #d7d7d7; background-color:#fafafa; }
.bui_form .bui_form_body .col_td select option,
.bui_form .bui_form_body .col_td .select option { height:27px; margin:5px 0 0; border:1px solid #d7d7d7; background-color:#fafafa; }
.bui_form .bui_form_body .col_td .textarea { width:100%; height:100px; padding:13px; border:1px solid #d7d7d7; background-color:#fafafa; resize:none; }

@media all and (max-width:640px) {
    .bui_form.resp .bui_form_body .col_td .input,
    .bui_form.resp .bui_form_body .col_td .i_text { font-size:1em; }

    .bui_form.resp .bui_form_body .col_td select,
    .bui_form.resp .bui_form_body .col_td .select { padding-left:10px; font-size:0.8em; }
}

/* formTable(데스크탑 ui, 출처 : http://naradesign.net/ouif/uio/form/table/quirks.html) */
.formTable { padding:10px 0 0 0; font-size:12px; font-family:Tahoma, Geneva, sans-serif; }
.formTable .formTitle { padding: 5px 0 5px 5px;font-weight:bold;font-size:14px; }
.formTable .formTitle .icon { color: #999;font-size: 16px;font-weight: normal;vertical-align: middle; }
.formTable input,
.formTable textarea,
.formTable select,
.formTable table,
.formTable button{ font-size:12px; }
.formTable table { width:100%;border-collapse:collapse;border:0;border-top:1px solid #283e6c; }
.formTable caption { padding:8px 0; font-weight:bold; text-align:left; }
.formTable th,
.formTable td { border:0; padding:8px; vertical-align:top; }
.formTable th { color:#393939;font-weight:bold; }
.formTable td { color:#5a5a5a; }
.formTable thead th { border-bottom:1px solid #ccc; background:#f8f8f8; }
.formTable tbody th { border-bottom:1px solid #dcdcdc; background:#f5f5f5; text-align:center;padding:13px 0px; }
.formTable tfoot th { border-bottom:1px solid #dcdcdc; }
.formTable tbody td { border-bottom:1px solid #dcdcdc;padding:13px 0px 13px 15px; }
.formTable tfoot td { border-bottom:1px solid #dcdcdc; font-weight:bold; color:#333; }
.formTable .item { position:relative; margin:-4px 0; }
.formTable .item .iHelp { position:absolute; top:4px; right:0; }
.formTable .item .iLabel { top:5px; left:6px; }
.formTable .item .iDesc { margin:2px 0; }
.formTable .item .iCheck,
.formTable .item .iRadio { width:13px; height:13px; padding:0; margin:2px 5px 2px 0; vertical-align:middle; }
.formTable .item .iText { color:#5a5a5a; height:18px; border:1px solid #c1c1c1; }
.formTable .item .hide { position:absolute; left:0; top:0; width:1px; height:1px; font-size:0; line-height:0; visibility:hidden; }
.formTable .item input.iText { padding:2px; }
.formTable .item select { padding:2px;margin:2px; }
.formTable .item label { margin:0 10px 0 0; cursor:pointer; }

/* 일반 리스트 스타일 */
.dtable { margin-bottom:20px; border-top:1px solid #283e6c; }
.dtable table { width:100%;border-collapse:collapse; }
.dtable th { height:47px;border-bottom:1px solid #d2d2d2;line-height:18px;background:url(./images/dtable_header_bg.png) no-repeat left; background-color:#f9f9f9; text-align:center; color:#323232; font-weight:bold; }
.dtable th:first-child  { background:none;background-color:#f9f9f9; }
.dtable td { border-bottom:1px solid #e3e3e3; line-height:20px; color:#5a5a5a; padding:10px 4px 10px 4px; }
.dtable td.left { text-align:left; padding-left:20px; }
.dtable td.left img { vertical-align:middle; margin-right:7px; }

/* 데이터 그리드 스타일 */
.dtable_label_frame {border:1px solid #999;background:url(./images/dtable_bg.gif) repeat-x;}
.dtable_label_frame .wy_drop {margin-right:16px;}
.dtable_label_frame table {width:100%;border-collapse:collapse;}
.dtable_label_frame th {padding:0 2px 0 2px;height:31px;border-left:1px solid #EEE;}
.dtable_label_frame th span {color:#575757;font-size:11px;display:block;line-height:28px;}
.dtable_data_frame {border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;overflow-x:hidden;overflow-y:scroll;position:relative;}
.dtable_data_frame table {width:100%;border-collapse:collapse;}
.dtable_data_frame td {padding:0 2px 0 2px;height:22px;border-left:1px solid #EEE;border-bottom:1px solid #EEE;}


/*****************************************************************/
/* Bread 업무 UI — DESIGN.md 기준                                */
/*                                                               */
/* 스코프는 .bread-ui 하나다. 앱 이름을 셀렉터에 넣지 않는다.    */
/* 신규 화면은 최상위 컨테이너에 아래 클래스만 붙이면 된다.      */
/*   페이지: class="bread-ui is_page"                            */
/*   모달  : class="bread-ui is_modal"                           */
/* 기존 화면(.ui_list/.pagination 등)에는 영향이 없다.           */
/*****************************************************************/
.bread-ui {
    --bread-primary:#287dff;
    --bread-primary-hover:#005deb;
    --bread-primary-bg:#e0ecff;
    --bread-canvas:#ffffff;
    --bread-surface:#f9fafb;
    --bread-elevated:#f3f4f6;
    --bread-text:#374151;
    --bread-strong:#212121;
    --bread-muted:#7c7d94;
    --bread-line:#e5e5e5;
    --bread-line-strong:#d1d5db;
    --bread-success:#10b981;
    --bread-error:#ef4444;
    color:var(--bread-text);
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
}
.bread-ui * { box-sizing:border-box; }
.bread-ui.is_page { padding:20px 0; }
.bread-ui.is_modal { background:var(--bread-canvas); }

.bread-ui .p-page_head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.bread-ui .p-page_head h2 { margin:0; color:var(--bread-strong); font-size:20px; font-weight:700; }
.bread-ui .p-page_head .spacer,
.bread-ui .p-list_bar .spacer { flex:1; }

.bread-ui .p-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    height:34px;
    padding:0 14px;
    margin:0;
    border:1px solid var(--bread-line-strong);
    border-radius:6px;
    background:var(--bread-canvas);
    color:var(--bread-text);
    font:600 13px/1 Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}
.bread-ui .p-btn:hover { background:var(--bread-elevated); color:var(--bread-text); }
.bread-ui .p-btn.primary { border-color:var(--bread-primary); background:var(--bread-primary); color:#fff; }
.bread-ui .p-btn.primary:hover { border-color:var(--bread-primary-hover); background:var(--bread-primary-hover); color:#fff; }
.bread-ui .p-btn.danger { border-color:transparent; background:#fee2e2; color:#b91c1c; }
.bread-ui .p-btn.excel { border-color:#1f7246; background:#1f7246; color:#fff; }
.bread-ui .p-btn.excel_line { border-color:#1f7246; background:var(--bread-canvas); color:#1f7246; }
.bread-ui .p-btn.excel_line:hover { background:#eaf5ef; color:#1f7246; }
.bread-ui .p-btn.sm { height:28px; padding:0 10px; font-size:12px; }
.bread-ui .p-btn:disabled { border-color:var(--bread-line); background:var(--bread-elevated); color:var(--bread-muted); cursor:not-allowed; }

.bread-ui .p-search { margin-bottom:12px; border:1px solid var(--bread-line); border-radius:8px; background:var(--bread-canvas); }
.bread-ui .p-search_body { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:14px 16px; }
.bread-ui .p-search_actions { display:flex; align-items:center; gap:6px; }
.bread-ui .p-field { display:flex; flex-direction:column; gap:5px; min-width:130px; }
.bread-ui .p-field.grow { flex:1; min-width:260px; }
.bread-ui .p-field label { color:var(--bread-muted); font-size:12px; font-weight:700; }
.bread-ui .i_input,
.bread-ui .i_select,
.bread-ui .i_textarea {
    min-height:32px;
    margin:0;
    padding:6px 10px;
    border:1px solid var(--bread-line-strong);
    border-radius:6px;
    background:#fff;
    color:var(--bread-text);
    font:14px/1.4 Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.bread-ui .i_input:focus,
.bread-ui .i_select:focus,
.bread-ui .i_textarea:focus { border-color:var(--bread-primary); outline:3px solid rgba(40,125,255,.15); }

/* 셀렉트 — KRDS 셀렉트 스펙(appearance:none + 화살표 아이콘)
   https://www.krds.go.kr/html/site/component/component_06_03.html */
.bread-ui select.i_select {
    appearance:none;
    -webkit-appearance:none;
    padding-right:34px;
    background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358616a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
    cursor:pointer;
}
.bread-ui select.i_select:hover { border-color:var(--bread-primary); }
.bread-ui .i_input.is-error,
.bread-ui select.i_select.is-error,
.bread-ui .i_textarea.is-error { border-color:var(--bread-error); }

/* 토글 스위치 — 즉시 반영형 on/off. input이 스위치 전체를 덮어 클릭·스크린리더 접근을 보장한다. */
.bread-ui .p-switch { position:relative; display:inline-block; width:40px; height:22px; vertical-align:middle; }
.bread-ui .p-switch input { position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.bread-ui .p-switch i { position:absolute; left:0; top:0; right:0; bottom:0; background:var(--bread-line-strong); border-radius:9999px; transition:background .16s; pointer-events:none; }
.bread-ui .p-switch i:before { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .16s; }
.bread-ui .p-switch input:checked + i { background:var(--bread-primary); }
.bread-ui .p-switch input:checked + i:before { transform:translateX(18px); }
.bread-ui .p-switch input:focus-visible + i { outline:3px solid rgba(40,125,255,.25); }
.bread-ui .p-switch input:disabled { cursor:not-allowed; }
.bread-ui .p-switch input:disabled + i { opacity:.5; }

.bread-ui .p-list_bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.bread-ui .p-list_bar .count { color:var(--bread-muted); font-size:13px; }
.bread-ui .p-list_bar .i_select { width:auto; min-width:92px; height:32px; }

.bread-ui .p-table_wrap { position:relative; min-height:180px; max-height:calc(100vh - 260px); overflow:auto; border:1px solid var(--bread-line); border-radius:8px; background:var(--bread-canvas); }
.bread-ui .p-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.bread-ui .p-table th { position:sticky; top:0; z-index:2; height:42px; padding:9px 8px; border-right:1px solid var(--bread-line); border-bottom:1px solid var(--bread-line); background:var(--bread-elevated); color:var(--bread-strong); font-size:13px; font-weight:600; text-align:center; white-space:nowrap; }
.bread-ui .p-table td { height:42px; padding:9px 8px; border-right:1px solid var(--bread-line); border-bottom:1px solid var(--bread-line); background:var(--bread-canvas); color:var(--bread-text); font-size:13px; text-align:center; white-space:nowrap; }
.bread-ui .p-table th:last-child,
.bread-ui .p-table td:last-child { border-right:0; }
.bread-ui .p-table tbody tr:last-child td { border-bottom:0; }
.bread-ui .p-table tbody tr:hover td { background:#f4f8ff; }
.bread-ui .p-table tbody tr.is_selectable { cursor:pointer; }
.bread-ui .p-table td { border-right:1px solid var(--bread-line); }
.bread-ui .p-table tbody tr:hover td { background:#f5f9ff; }
.bread-ui .p-table tbody tr:hover td.fix_l,
.bread-ui .p-table tbody tr:hover td.fix_r { background:#f5f9ff; }
.bread-ui .p-table td.left { text-align:left; }
.bread-ui .p-table .ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bread-ui .p-table th[draggable] { cursor:grab; }
/* 정렬 가능 컬럼 — 현재 정렬은 화살표와 색으로 표시한다(BreadList가 class를 붙인다). */
/* 화살표는 CSS 삼각형이다. 유니코드 글리프는 폰트마다 크기·기준선이 달라 헤더에서 어긋난다. */
.bread-ui .p-table th[data-sort] > span:after {
    display:inline-block;
    margin:0 0 1px 5px;
    border-top:5px solid var(--bread-muted);
    border-right:4px solid transparent;
    border-left:4px solid transparent;
    content:'';
    vertical-align:middle;
    opacity:.3;
}
.bread-ui .p-table th[data-sort]:hover > span:after { opacity:.6; }
.bread-ui .p-table th.sort_asc,
.bread-ui .p-table th.sort_desc { color:var(--bread-primary); }
.bread-ui .p-table th.sort_asc > span:after,
.bread-ui .p-table th.sort_desc > span:after { opacity:1; }
.bread-ui .p-table th.sort_asc > span:after { border-top:0; border-bottom:5px solid var(--bread-primary); }
.bread-ui .p-table th.sort_desc > span:after { border-top-color:var(--bread-primary); }
.bread-ui .p-table th.dragging { opacity:.45; }
.bread-ui .p-table th.drag-over { background:var(--bread-primary-bg); }
.bread-ui .p-table .fix_l,
.bread-ui .p-table .fix_r { position:sticky; z-index:1; }
.bread-ui .p-table th.fix_l,
.bread-ui .p-table th.fix_r { z-index:3; background:var(--bread-elevated); }
.bread-ui .p-table td.fix_l,
.bread-ui .p-table td.fix_r { background:var(--bread-canvas); }
.bread-ui .p-table .fix_l_1 { left:0; }
.bread-ui .p-table .fix_l_2 { left:42px; }
.bread-ui .p-table .fix_r { right:0; }
.bread-ui .p-table .cell_btn { display:flex; justify-content:center; gap:4px; }

.bread-ui .p-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:600; }
/* 색만으로 상태를 전달하지 않도록 점을 함께 찍는다(마크업에 <i class="dot">가 있을 때만). */
.bread-ui .p-badge .dot { flex:none; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; }
.bread-ui .p-badge.success { background:#dcfce7; color:#047857; }
.bread-ui .p-badge.neutral { background:var(--bread-elevated); color:var(--bread-muted); }

.bread-ui .p-empty,
.bread-ui .p-list_state { min-height:220px; display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; }
.bread-ui .p-empty strong,
.bread-ui .p-list_state strong { display:block; margin-bottom:6px; color:var(--bread-strong); font-size:15px; }
.bread-ui .p-list_state.error strong { color:var(--bread-error); }

/* 페이징 — BreadList가 렌더한다. 화면·서버는 data-* 값만 내려준다. */
.bread-ui .p-paging { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; padding:16px 0 4px; }
.bread-ui .p-paging_btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    height:32px;
    margin:0;
    padding:0 8px;
    border:1px solid var(--bread-line-strong);
    border-radius:6px;
    background:var(--bread-canvas);
    color:var(--bread-text);
    font-family:inherit;
    font-size:13px;
    line-height:1;
    cursor:pointer;
}
.bread-ui .p-paging_btn:hover { border-color:var(--bread-primary); background:var(--bread-primary-bg); color:var(--bread-primary-hover); }
.bread-ui .p-paging_btn.current { border-color:var(--bread-primary); background:var(--bread-primary); color:#fff; font-weight:700; cursor:default; }
.bread-ui .p-paging_btn:disabled { border-color:var(--bread-line); background:var(--bread-elevated); color:var(--bread-muted); cursor:not-allowed; }
.bread-ui .p-paging_btn:focus-visible { outline:3px solid rgba(40,125,255,.25); outline-offset:1px; }

/* 파일 업로드 — BreadFile/BreadImage가 마크업을 렌더한다. 화면은 빈 컨테이너만 둔다. */
.bread-ui .p-file,
.bread-ui .p-image { border:1px dashed var(--bread-line-strong); border-radius:8px; padding:10px 12px; background:var(--bread-surface); }
.bread-ui .p-file.is_over,
.bread-ui .p-image.is_over { border-color:var(--bread-primary); background:var(--bread-primary-bg); }
.bread-ui .p-file_head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bread-ui .p-file_hint { color:var(--bread-muted); font-size:12px; }
.bread-ui .p-file_pick { position:relative; overflow:hidden; }
.bread-ui .p-file_pick input[type=file] { position:absolute; top:0; right:0; width:100%; height:100%; margin:0; opacity:0; direction:ltr; cursor:pointer; }
.bread-ui .p-file_progress { display:none; margin:8px 0 0; }
.bread-ui .p-file_progress .ui-progressbar-value { background:var(--bread-primary); }

.bread-ui .p-file_list { list-style:none; margin:8px 0 0; padding:0; }
.bread-ui .p-file_list li { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px; border:1px solid var(--bread-line); border-radius:6px; background:var(--bread-canvas); }
.bread-ui .p-file_list li + li { margin-top:6px; }
.bread-ui .p-file_list .thumb { flex:0 0 auto; width:50px; height:50px; border:1px solid var(--bread-line); border-radius:4px; background:var(--bread-elevated); cursor:pointer; }
.bread-ui .p-file_list .thumb img { display:block; width:100%; height:100%; object-fit:cover; border-radius:3px; }
.bread-ui .p-file_list .info { flex:1; min-width:120px; display:flex; flex-direction:column; gap:2px; overflow:hidden; cursor:pointer; }
.bread-ui .p-file_list .info .name { overflow:hidden; color:var(--bread-strong); font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.bread-ui .p-file_list .info .size { color:var(--bread-muted); font-size:12px; }
.bread-ui .p-file_list .btns { display:flex; gap:4px; flex-wrap:wrap; }
.bread-ui .p-file_list .msg { display:none; flex-basis:100%; color:var(--bread-error); font-size:12px; }

.bread-ui .p-image_area { display:flex; align-items:flex-start; gap:10px; margin-top:8px; }
.bread-ui .p-image_area:empty { margin-top:0; }
.bread-ui .p-image_area .thumb { cursor:pointer; }
.bread-ui .p-image_area .thumb img { display:block; max-width:120px; border:1px solid var(--bread-line); border-radius:4px; }
.bread-ui .p-image_area .btns { display:flex; flex-direction:column; gap:4px; }

/* 엑셀 업로드 — BreadExcel이 렌더한다. */
.bread-ui .p-excel_bar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px; border:1px solid var(--bread-line); border-radius:8px; background:var(--bread-canvas); }
.bread-ui .p-excel_bar .spacer { flex:1; }
.bread-ui .p-excel_summary { color:var(--bread-muted); font-size:13px; }
.bread-ui .p-excel_summary strong { color:var(--bread-primary); }
.bread-ui .p-excel_preview { margin-top:12px; }
.bread-ui .p-excel_preview .p-table_wrap { max-height:380px; }
.bread-ui .p-excel_table th { height:auto; padding:6px; vertical-align:top; }
.bread-ui .p-excel_table th .p-excel_map { width:100%; min-height:26px; margin-top:4px; padding:2px 4px; font-size:12px; }
.bread-ui .p-excel_table tbody tr.is_out td { background:var(--bread-elevated); color:var(--bread-muted); }
.bread-ui .p-excel_note { margin:6px 2px 0; color:var(--bread-muted); font-size:12px; }
.bread-ui .is_hidden { display:none !important; }

/* 모달 — jQuery UI Dialog를 쓰지 않는 자체 레이어(BreadModal) */
body.bread-modal_open { overflow:hidden; }

.bread-modal_layer {
    position:fixed;
    left:0; top:0;
    width:100%; height:100%;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
/* 레이어의 padding까지 덮어야 하므로 absolute가 아니라 fixed다. */
.bread-modal_dim { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(17,24,39,.55); }
.bread-modal {
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    /* width/height 옵션은 상한일 뿐이고 실제 크기는 뷰포트가 결정한다. */
    max-width:min(var(--bread-modal_w, 800px), 100%);
    max-height:min(var(--bread-modal_h, 600px), calc(100vh - 32px));
    max-height:min(var(--bread-modal_h, 600px), calc(100dvh - 32px));
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
    animation:bread-modal_in .16s ease-out;
}
/* 최상위가 아닌(뒤로 밀린) 모달 — 대각선으로 조금씩 더 밀고 흐려져서 "카드 스택"처럼
   보이게 한다. 크기가 다른 모달이 겹칠 때도 항상 의도된 모양으로 보이도록 깊이별로
   고정폭 오프셋을 쓴다(3단계 이상은 더 밀지 않고 3단계 모양으로 캡). 클릭은 위쪽
   모달로만 가야 하므로 pointer-events를 끈다. */
.bread-modal.is_stacked_lv1,
.bread-modal.is_stacked_lv2,
.bread-modal.is_stacked_lv3 {
    pointer-events:none;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    transition:transform .15s ease, opacity .15s ease;
}
.bread-modal.is_stacked_lv1 { transform:translate(14px, 14px) scale(.97); opacity:.9; }
.bread-modal.is_stacked_lv2 { transform:translate(24px, 24px) scale(.94); opacity:.8; }
.bread-modal.is_stacked_lv3 { transform:translate(32px, 32px) scale(.91); opacity:.7; }

.bread-modal_head {
    flex:none;
    display:flex;
    align-items:center;
    gap:8px;
    padding:13px 14px 13px 18px;
    border-bottom:1px solid #e5e5e5;
    background:#fff;
}
.bread-modal_title {
    flex:1;
    min-width:0;
    margin:0;
    color:#212121;
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bread-modal_close {
    flex:none;
    width:32px; height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#7c7d94;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.bread-modal_close:hover { background:#f3f4f6; color:#212121; }
.bread-modal_close:focus-visible { outline:3px solid rgba(40,125,255,.25); outline-offset:1px; }
/* 제목 없는 모달(BreadModal.open에 title 미지정) — 제목 줄을 통째로 없애 헤더
   높이(약 58px)만큼 짧아지고, 닫기 버튼을 모달 바깥 오른쪽 위에 띄운다. 본문 라운드는 overflow:hidden 대신
   content의 border-radius가 담당한다(그래야 버튼이 모달 밖으로 나갈 수 있다). */
.bread-modal.is_no_title { overflow:visible; }
.bread-modal.is_no_title > .bread-modal_content { border-radius:12px; }
.bread-modal.is_no_title > .bread-modal_head {
    position:absolute;
    right:-12px; top:-12px;
    z-index:1;
    padding:0;
    border-bottom:0;
    background:transparent;
}
.bread-modal.is_no_title .bread-modal_title { display:none; }
/* 딤 위에 뜨는 버튼이라 흰 원보다 어두운 원이 배경과 덜 부딪힌다.
   &times; 문자는 폰트마다 광학 중심이 어긋나므로 font-size:0으로 숨기고
   의사요소 두 줄로 직접 그린다(정확히 중앙). */
.bread-modal.is_no_title .bread-modal_close {
    position:relative;
    width:34px; height:34px;
    border-radius:50%;
    /* 흰 링을 둘러 딤·헤더·본문 어디에 걸쳐도 윤곽이 끊기지 않게 한다. */
    border:2px solid #fff;
    background:#1f2937;
    box-shadow:0 3px 12px rgba(0,0,0,.35);
    font-size:0;
    transition:background .15s ease, transform .15s ease;
}
.bread-modal.is_no_title .bread-modal_close:before,
.bread-modal.is_no_title .bread-modal_close:after {
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:13px; height:2px;
    margin:-1px 0 0 -6.5px;
    border-radius:1px;
    background:#fff;
}
.bread-modal.is_no_title .bread-modal_close:before { transform:rotate(45deg); }
.bread-modal.is_no_title .bread-modal_close:after { transform:rotate(-45deg); }
.bread-modal.is_no_title .bread-modal_close:hover { background:#111827; transform:scale(1.08); }
@media (prefers-reduced-motion:reduce) {
    .bread-modal.is_no_title .bread-modal_close { transition:none; }
    .bread-modal.is_no_title .bread-modal_close:hover { transform:none; }
}
/* 모달이 화면 폭을 꽉 채우면 밖으로 나간 버튼이 잘리므로 안쪽으로 되돌린다. */
@media (max-width:640px) {
    .bread-modal.is_no_title > .bread-modal_head { right:6px; top:6px; }
}

.bread-modal_content {
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
/* iframe 모드(BreadModal.open({iframe:true})) — 스크롤은 iframe 문서가 담당한다.
   본문이 iframe 하나뿐이라 높이가 잡히지 않으므로 요청 높이를 그대로 쓰고 max-height로 자른다. */
.bread-modal.is_iframe { height:var(--bread-modal_h, 600px); }
.bread-modal_content.is_iframe { overflow:hidden; }
.bread-modal_content.is_iframe > iframe { display:block; width:100%; height:100%; border:0; }

/* element 모드(BreadModal.open({element:...})) — 문서에 숨겨 둔 폼 박스를 그대로 본문으로 쓴다. */
.bread-modal_content.is_element { padding:18px 20px 20px; }

.bread-modal_state { padding:28px 20px; color:#7c7d94; font-size:14px; text-align:center; }
.bread-modal_state.error { color:#ef4444; }

@keyframes bread-modal_in {
    from { opacity:0; transform:translateY(8px) scale(.99); }
    to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
    .bread-modal { animation:none; }
}

/* 메시지 모달(BreadModal.alert/confirm) — KRDS 모달 컴포넌트 스펙
   (radius 12 · border #b1b8be · shadow 2단 · 제목 헤더 · 우측 정렬 버튼 · 우상단 X) */
.bread-modal--msg {
    max-width:min(400px, 100%);
    max-height:calc(100dvh - 32px);
    border:1px solid #b1b8be;
    border-radius:12px;
    box-shadow:0 0 2px rgba(0,0,0,.08), 0 16px 24px rgba(0,0,0,.12);
}
.bread-modal_msg { position:relative; }
.bread-modal_msg_title {
    margin:0;
    padding:32px 56px 0 32px;   /* 우측은 X 버튼 자리 */
    color:var(--bread-text-strong, #1e2124);
    font-size:20px;
    font-weight:700;
    line-height:1.5;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bread-modal_msg_text {
    padding:12px 32px 8px;
    color:var(--bread-text, #334155);
    font-size:15px;
    line-height:1.6;
    white-space:pre-line;      /* alert 메시지의 \n 줄바꿈 호환 */
    word-break:break-word;
}
.bread-modal_msg_btn { display:flex; justify-content:flex-end; gap:8px; padding:16px 32px 32px; }
.bread-modal_msg_btn .p-btn { min-width:78px; height:44px; padding:0 16px; font-size:15px; }
.bread-modal_msg_close {
    position:absolute;
    top:16px; right:16px;
    width:32px; height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    cursor:pointer;
}
.bread-modal_msg_close:hover { background:var(--bread-elevated, #eef2f7); }
.bread-modal_msg_close:before {
    content:'';
    display:block;
    width:18px; height:18px;
    margin:auto;
    background:var(--bread-muted, #64748b);
    -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bread-modal_msg_close:hover:before { background:var(--bread-text, #334155); }

/* 달력 모달(BreadCalendar) — KRDS 달력 컴포넌트 스펙
   (연/월 탐색 헤더 · 요일 헤딩 그리드 · old/new·today·period·day-off 상태 · 오늘/취소/확인 푸터) */
.bread-modal--cal { max-width:min(360px, 100%); }
.bread-cal_head { display:flex; align-items:center; justify-content:center; gap:6px; padding:16px 32px 4px; }
.bread-cal_move {
    flex:none;
    width:32px; height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    cursor:pointer;
}
.bread-cal_move:hover { background:var(--bread-elevated, #eef2f7); }
.bread-cal_move:before {
    content:'';
    display:block;
    width:16px; height:16px;
    margin:auto;
    background:var(--bread-text, #334155);
    -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bread-cal_move.next:before { transform:scaleX(-1); }
.bread-cal_move:focus-visible, .bread-cal_day:focus-visible { outline:3px solid rgba(40,125,255,.25); outline-offset:1px; }
/* 연/월 드롭다운 — KRDS calendar-drop-down. 목록은 스크롤로 제한한다. */
.bread-cal_drop { position:relative; }
.bread-cal_switch {
    height:32px;
    padding:0 10px;
    border:1px solid var(--bread-line, #d0d5dd);
    border-radius:8px;
    background:var(--bread-canvas, #fff);
    color:var(--bread-text-strong, #1e2124);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.bread-cal_switch:hover { background:var(--bread-elevated, #eef2f7); }
.bread-cal_switch:focus-visible { outline:3px solid rgba(40,125,255,.25); outline-offset:1px; }
.bread-cal_list {
    display:none;
    position:absolute;
    left:0; top:calc(100% + 4px);
    z-index:1;
    min-width:100%;
    max-height:192px;
    margin:0;
    padding:4px;
    overflow-y:auto;
    border:1px solid #b1b8be;
    border-radius:8px;
    background:var(--bread-canvas, #fff);
    box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.bread-cal_list li { list-style:none; }
.bread-cal_list button {
    display:block;
    width:100%;
    padding:6px 12px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--bread-text, #334155);
    font-size:14px;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
}
.bread-cal_list button:hover { background:var(--bread-elevated, #eef2f7); }
.bread-cal_list button.active { background:var(--bread-primary, #287dff); color:#fff; font-weight:700; }
.bread-cal_tbl { width:calc(100% - 64px); margin:8px 32px 0; border-collapse:collapse; table-layout:fixed; }
.bread-cal_tbl caption {
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}
.bread-cal_tbl th { padding:6px 0; color:var(--bread-muted, #64748b); font-size:12px; font-weight:600; text-align:center; }
.bread-cal_tbl th:first-child { color:#b91c1c; }
.bread-cal_tbl th:last-child { color:#1d4ed8; }
.bread-cal_tbl td { padding:1px; text-align:center; }
.bread-cal_day {
    width:100%; height:36px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--bread-text, #334155);
    font-size:14px;
    cursor:pointer;
}
.bread-cal_day:hover { background:var(--bread-elevated, #eef2f7); }
.bread-cal_tbl td.day-off .bread-cal_day { color:#b91c1c; }
.bread-cal_tbl td.sat .bread-cal_day { color:#1d4ed8; }
.bread-cal_tbl td.old .bread-cal_day, .bread-cal_tbl td.new .bread-cal_day { color:var(--bread-muted, #64748b); }
/* 오늘은 색상 외 단서(테두리)로도 구분한다. */
.bread-cal_tbl td.today .bread-cal_day { box-shadow:inset 0 0 0 1px var(--bread-primary, #287dff); font-weight:700; }
.bread-cal_tbl td.period .bread-cal_day { background:var(--bread-primary, #287dff); color:#fff; font-weight:700; }
.bread-cal_foot { display:flex; justify-content:flex-end; gap:8px; padding:16px 32px 32px; }
.bread-cal_foot .p-btn { min-width:78px; height:44px; padding:0 16px; font-size:15px; }

/* 달력 열기 아이콘 버튼 — attach가 input 뒤에 붙인다. (KRDS form-btn-datepicker) */
.bread-cal_trigger {
    width:32px; height:32px;
    margin-left:4px;
    padding:0;
    border:1px solid var(--bread-line-strong, #c7ced6);
    border-radius:6px;
    background:var(--bread-canvas, #fff);
    vertical-align:middle;
    cursor:pointer;
}
.bread-cal_trigger:hover { background:var(--bread-elevated, #eef2f7); }
.bread-cal_trigger:focus-visible { outline:3px solid rgba(40,125,255,.25); outline-offset:1px; }
.bread-cal_trigger:before {
    content:'';
    display:block;
    width:16px; height:16px;
    margin:auto;
    background:var(--bread-muted, #64748b);
    -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bread-cal_trigger:hover:before { background:var(--bread-text, #334155); }

/* 달력 팝업(BreadCalendar.attach) — input 아래 붙는 레이어. 모달보다 위(1050). */
.bread-cal_pop {
    position:absolute;
    z-index:1050;
    width:312px;
    border:1px solid #b1b8be;
    border-radius:12px;
    background:var(--bread-canvas, #fff);
    box-shadow:0 0 2px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.12);
}
.bread-cal_pop .bread-cal_head { padding:12px 16px 2px; }
.bread-cal_pop .bread-cal_tbl { width:calc(100% - 32px); margin:4px 16px 0; }
.bread-cal_pop .bread-cal_foot { padding:8px 16px 16px; }
.bread-cal_pop .bread-cal_foot .p-btn { min-width:56px; height:32px; padding:0 12px; font-size:13px; }

/* 모바일은 풀스크린. 고정 px 폭 때문에 화면을 넘던 문제를 없앤다. */
@media all and (max-width:640px) {
    .bread-modal_layer { padding:0; align-items:stretch; }
    .bread-modal,
    .bread-modal.is_iframe {
        max-width:none;
        max-height:none;
        height:100%;
        border-radius:0;
    }
    .bread-modal_head { padding:11px 8px 11px 14px; }
    .bread-modal_title { font-size:15px; }

    /* 메시지 모달은 모바일에서도 풀스크린으로 바꾸지 않는다. */
    .bread-modal_layer--msg { padding:16px; align-items:center; }
    .bread-modal_layer--msg .bread-modal {
        height:auto;
        max-width:min(400px, 100%);
        max-height:calc(100dvh - 32px);
        border-radius:12px;
    }
}

/* 레거시 iframe 모달(jQuery UI Dialog)은 BreadModal 레이어보다 위에 둔다.        */
/* BreadModal 안에서 아직 iframe 모달을 여는 화면(고객 구분·결제방법·경비율 등)이 */
/* 남아 있어, .ui-front 기본값(z-index:100)이면 딤 뒤에 가려 보이지 않는다.        */
.ui-front { z-index:1200; }

/* alert·confirm 메시지 모달은 항상 최상단. 레거시 iframe 모달(.ui-front) 안에서 */
/* 열어도 가려지지 않아야 한다.                                                  */
.bread-modal_layer--msg { z-index:1250; }

/* jQuery UI datepicker는 body 직속이라 모달 위로 올려준다(Dialog가 하던 일). */
#ui-datepicker-div { z-index:1300 !important; }

/* 툴팁(BreadTooltip) — KRDS 툴팁 스펙(다크 팝오버 · hover·focus 표시)
   트리거에 data-tooltip="내용"만 붙인다. 모달(z-index:1000) 안에서도 보이도록 그 위에 둔다. */
.bread-tooltip_popover {
    position:fixed;
    left:0; top:0;
    z-index:1100;
    max-width:280px;
    padding:4px 12px;
    border-radius:4px;
    background:#1e2124;
    color:#fff;
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:13px;
    line-height:1.5;
    word-break:break-word;
    opacity:0;
    visibility:hidden;
    transition:opacity .12s;
    pointer-events:none;
}
.bread-tooltip_popover.show { opacity:1; visibility:visible; }
/* 표시 방향에 따라 트리거를 가리키는 화살표. 좌표는 JS가 --arrow-x/--arrow-y로 내려준다. */
.bread-tooltip_popover:after { content:''; position:absolute; left:var(--arrow-x, 50%); width:8px; height:8px; background:#1e2124; transform:translateX(-50%) rotate(45deg); }
.bread-tooltip_popover.pos_top:after { bottom:-4px; }
.bread-tooltip_popover.pos_bottom:after { top:-4px; }
.bread-tooltip_popover.pos_left:after,
.bread-tooltip_popover.pos_right:after { left:auto; top:var(--arrow-y, 50%); transform:translateY(-50%) rotate(45deg); }
.bread-tooltip_popover.pos_left:after { right:-4px; }
.bread-tooltip_popover.pos_right:after { left:-4px; }

/* 도움말 아이콘 버튼 — data-tooltip과 함께 라벨·버튼 옆에 붙여 쓴다. */
.bread-ui .p-help { display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--bread-muted); vertical-align:middle; cursor:help; }
.bread-ui .p-help:hover { color:var(--bread-primary); }
.bread-ui .p-help:focus-visible { outline:3px solid rgba(40,125,255,.25); }
.bread-ui .p-help:before { content:''; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 에디터 모드 전환 탭(BreadEditor) — 에디터 하단의 에디터/HTML 모드 탭 (peach tiny-editor 이식) */
/* 에디터·모드바가 하나의 창으로 보이도록 맞닿는 모서리를 직각으로 잇는다.
   보더도 TinyMCE 기본(2px)이 아니라 HTML 모드 textarea와 같은 1px로 통일한다. */
.tox-tinymce.bread-editor_hasbar { border:1px solid #eeeeee; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.bread-editor_modebar { display:flex; margin-bottom:12px; border:1px solid #eeeeee; border-top:0; border-radius:0 0 6px 6px; background:#f9fafb; overflow:hidden; }
.bread-editor_modebar button { display:inline-flex; align-items:center; gap:4px; padding:7px 10px; border:0; border-right:1px solid #eeeeee; background:transparent; color:#7c7d94; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:12px; font-weight:500; cursor:pointer; transition:background .12s, color .12s; }
.bread-editor_modebar button:hover { background:#f3f4f6; color:#374151; }
.bread-editor_modebar button.active { background:#fff; color:#212121; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.bread-editor_modebar button:before { content:''; width:12px; height:12px; background:currentColor; }
.bread-editor_modebar button.is_editor:before { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-5m-1.414-9.414a2 2 0 1 1 2.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-5m-1.414-9.414a2 2 0 1 1 2.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bread-editor_modebar button.is_html:before { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20l4-16m4 4 4 4-4 4M6 16l-4-4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20l4-16m4 4 4 4-4 4M6 16l-4-4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* HTML 모드로 전환된 원본 textarea — 스킨의 .bread-ui .i_textarea(radius 6px 전체)보다 우선해야
   모드바와 맞닿는 하단 모서리가 직각으로 이어진다. */
.bread-editor_htmlarea,
.bread-ui textarea.bread-editor_htmlarea { display:block; padding:10px 12px; border:1px solid #eeeeee; border-radius:6px 6px 0 0; background:#fff; color:#374151; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.6; resize:none; }
.bread-editor_htmlarea:focus,
.bread-ui textarea.bread-editor_htmlarea:focus { border-color:#eeeeee; outline:2px solid rgba(40,125,255,.2); }

/* 처리중 오버레이 — 모달보다 위 */
.bread-loding {
    position:fixed;
    left:0; top:0;
    width:100%; height:100%;
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(17,24,39,.35);
}
.bread-loding_box { padding:18px 24px; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.bread-loding_box span { display:block; width:60px; height:20px; background:url(./images/waiting.gif) no-repeat center; }

.bread-ui .p-modal_body { padding:18px 20px; }
.bread-ui .p-modal_foot { position:sticky; bottom:0; z-index:1; display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--bread-line); background:var(--bread-canvas); }
.bread-ui .p-form_table { width:100%; border-collapse:collapse; }
.bread-ui .p-form_table th,
.bread-ui .p-form_table td { padding:10px 8px; border-bottom:1px solid var(--bread-line); vertical-align:top; }
.bread-ui .p-form_table th { width:140px; color:var(--bread-strong); font-weight:600; text-align:left; }
.bread-ui .p-form_table .i_input,
.bread-ui .p-form_table .i_textarea { width:100% !important; }
/* 4열 폼 표(라벨-값-라벨-값) — Grid 스타일.
   행 구분선만으로는 어느 값이 어느 라벨의 것인지 구분되지 않으므로 모든 셀에 경계선을 둔다.
   라벨 칸은 좌측 액센트 바로 시작점을 표시하고, 행에 올리면 그 바가 브랜드색으로 바뀐다. */
.bread-ui .p-form_table.is_quad { border-collapse:collapse; }
.bread-ui .p-form_table.is_quad th,
.bread-ui .p-form_table.is_quad td { border:1px solid var(--bread-line); padding:10px 12px; vertical-align:middle; }
.bread-ui .p-form_table.is_quad th { background:#f4f6f9; color:var(--bread-strong); font-weight:700; }

/* 라벨 줄 — 아이콘 · 텍스트 · 필수 뱃지는 왼쪽에, 도움말은 오른쪽 끝에 고정한다. */
.bread-ui .p-form_table .lb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; white-space:nowrap; }
.bread-ui .p-form_table .lb .p-help { margin-left:auto; }
.bread-ui .p-form_table .lb .req,
.bread-ui .p-form_table .lb .opt { flex:none; padding:1px 6px; border-radius:9999px; font-size:11px; white-space:nowrap; }
.bread-ui .p-form_table .lb .req { background:#fee2e2; color:#b91c1c; font-weight:700; }
.bread-ui .p-form_table .lb .opt { background:var(--bread-elevated); color:var(--bread-muted); font-weight:600; }
/* 형식 안내 — placeholder는 입력을 시작하면 사라지므로 입력 아래에 남긴다. */
.bread-ui .p-form_table .help_text { margin-top:5px; color:var(--bread-muted); font-size:12px; font-weight:400; }

/* 라벨 아이콘 — SVG mask라 색은 토큰을 따르고 이미지 요청이 없다.
   항목 성격에 맞는 것이 없으면 붙이지 않는다. 억지로 고르면 화면마다 제각각이 된다. */
.bread-ui .ico { flex:none; display:inline-block; width:15px; height:15px; background:#9aa0aa; }
.bread-ui .ico.user { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat; }
.bread-ui .ico.mail { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.bread-ui .ico.phone { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat; }
.bread-ui .ico.cal { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat; }
.bread-ui .ico.tag { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 12 22l-9-9V3h10l7.59 7.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 12 22l-9-9V3h10l7.59 7.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.bread-ui .ico.power { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64A9 9 0 1 1 5.64 6.64'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64A9 9 0 1 1 5.64 6.64'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E") center/contain no-repeat; }
.bread-ui .ico.image { -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 날짜처럼 짧은 입력. 100% 강제를 풀어야 datepicker 트리거가 같은 줄에 붙는다. */
.bread-ui .p-form_table .i_input.short { width:auto !important; max-width:100%; }
.bread-ui .p-form_table .item .ui-datepicker-trigger { vertical-align:middle; margin-left:6px; }
/* 조회 버튼이 붙는 입력 — 입력칸은 남는 폭을 먹고 버튼은 한 줄에 같이 선다. */
.bread-ui .p-form_table .item.is_inline { display:flex; align-items:center; gap:6px; }
.bread-ui .p-form_table .item.is_inline .i_input { width:auto !important; flex:1 1 auto; min-width:0; }
.bread-ui .p-form_table .item.is_inline .p-btn { flex:none; }
.bread-ui .p-form_table .i_input[readonly] { background:var(--bread-surface); color:var(--bread-muted); }
.bread-ui .star { color:var(--bread-error); }
.bread-ui [aria-invalid="true"] { border-color:var(--bread-error); outline:3px solid rgba(239,68,68,.12); }
.bread-form-error { margin-top:5px; color:var(--bread-error); font-size:12px; line-height:1.4; }

/* 선택 모달의 선택 바스켓 */
.bread-ui .p-select_basket { margin-top:12px; padding:8px; border:1px solid var(--bread-line); border-radius:8px; background:var(--bread-surface); }
.bread-ui .select_list { max-height:64px; overflow-x:hidden; overflow-y:auto; }
.bread-ui .select_list ul { display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0; margin:0; }
.bread-ui .select_list ul li { list-style:none; padding:0; margin:0; }
.bread-ui .select_list ul li a { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid var(--bread-line-strong); border-radius:9999px; background:var(--bread-canvas); color:var(--bread-text); font-size:12px; text-decoration:none; }
.bread-ui .select_list ul li a:hover { border-color:var(--bread-error); color:var(--bread-error); text-decoration:line-through; }

@media all and (max-width:768px) {
    .bread-ui.is_page { padding:12px 0; }
    .bread-ui .p-field,
    .bread-ui .p-field.grow { flex:1 1 100%; min-width:0; }
    .bread-ui .p-search_actions { width:100%; }
    .bread-ui .p-search_actions .p-btn { flex:1; }
    .bread-ui .p-form_table,
    .bread-ui .p-form_table tbody,
    .bread-ui .p-form_table tr,
    .bread-ui .p-form_table th,
    .bread-ui .p-form_table td { display:block; width:100%; }
    .bread-ui .p-form_table th { padding-bottom:3px; border-bottom:0; }
    .bread-ui .p-form_table td { padding-top:3px; }
}

/* 검색 조건이 많은 화면 — 필드를 격자로 정렬한다.                */
/* flex-wrap은 필드 폭이 제각각이면 행마다 시작점이 어긋난다.       */
.bread-ui .p-search_body.is_grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    align-items:end;
    gap:12px 14px;
}
.bread-ui .p-search_body.is_grid .p-field,
.bread-ui .p-search_body.is_grid .p-field.grow { min-width:0; }
.bread-ui .p-field.span2 { grid-column:span 2; }
.bread-ui .p-field.span3 { grid-column:span 3; }
.bread-ui .p-field .field_row { display:flex; align-items:center; gap:4px; }
.bread-ui .p-field .field_row .i_input { min-width:0; }

/* 검색 실행·초기화는 조건 격자와 섞지 않고 카드 하단 바에 모은다. */
.bread-ui .p-search_foot {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
    padding:12px 16px;
    border-top:1px solid var(--bread-line);
    background:var(--bread-surface);
}
.bread-ui .p-search_foot .count { margin-right:auto; color:var(--bread-muted); font-size:13px; }
.bread-ui .p-search_foot .spacer { flex:1; }

/* 조건이 많은 검색 — 필드마다 라벨을 두면 줄 수가 두 배가 된다.                */
/* 행 단위 라벨(일자/키워드) 하나만 두고, 개별 조건은 select의 첫 옵션이           */
/* 라벨 역할을 한다(접근성은 aria-label로 보완). 자주 쓰지 않는 조건은            */
/* 상세 조건 토글 뒤로 접는다.                                                   */
/* .p-search_body가 flex라 행도 flex item이 된다. 폭을 명시하지 않으면 콘텐츠 폭에
   갇혀 조건이 일찍 줄바꿈된다. */
.bread-ui .p-search_row { display:flex; align-items:flex-start; gap:10px; flex:1 1 100%; width:100%; }
.bread-ui .p-search_row + .p-search_row { margin-top:8px; }
.bread-ui .p-search_row > .row_label {
    flex:0 0 52px;
    padding-top:7px;
    color:var(--bread-muted);
    font-size:12px;
    font-weight:700;
}
.bread-ui .p-search_row > .row_body {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 8px;
}
.bread-ui .p-search_row .row_body .i_select { width:auto; min-width:96px; max-width:100%; }
.bread-ui .p-search_row .row_body .i_input { min-width:0; }
/* 날짜는 값 길이에 맞춘다. 늘어나면 datepicker 아이콘이 다음 줄로 밀린다. */
.bread-ui .p-search_row .row_body .i_input.w_date { width:118px; flex:none; }
.bread-ui .p-search_row .row_body .date_range { display:flex; align-items:center; gap:4px; }
.bread-ui .p-search_row.is_more[hidden] { display:none; }
.bread-ui .p-btn .badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:9999px;
    background:var(--bread-primary);
    color:#fff;
    font-size:11px;
    line-height:1;
}
.bread-ui .p-btn.is_on { border-color:var(--bread-primary); background:var(--bread-primary-bg); color:var(--bread-primary-hover); }

/* 좁은 사이드 검색을 2열로 접는다 — 필드 수가 많으면 세로 1열은 목록을 밀어낸다. */
.bread-ui .p-search.is_stack.is_grid2 .p-search_body {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:8px 10px;
}
.bread-ui .p-search.is_stack.is_grid2 .p-field { min-width:0; }
.bread-ui .p-search.is_stack.is_grid2 .p-field.span2,
.bread-ui .p-search.is_stack.is_grid2 .p-search_actions { grid-column:span 2; }

/* 좁은 사이드 검색을 더 압축한다 — 라벨을 입력 왼쪽에 붙인다. */
.bread-ui .p-search.is_stack.is_inline .p-field { flex-direction:row; align-items:center; gap:8px; }
.bread-ui .p-search.is_stack.is_inline .p-field label { flex:0 0 62px; text-align:right; }
.bread-ui .p-search.is_stack.is_inline .p-field .i_input,
.bread-ui .p-search.is_stack.is_inline .p-field .i_select { flex:1 1 auto; min-width:0; }

/* 폼 표의 입력 폭 — 기본은 칸 전체지만 날짜·금액·짧은 코드는 값에 맞춘다.  */
/* 날짜 입력이 칸 전체로 늘어나면 datepicker 아이콘이 다음 줄로 밀린다.     */
.bread-ui .p-form_table .i_input.w_date { width:132px !important; }
.bread-ui .p-form_table .i_input.w_amount { width:140px !important; text-align:right; }
.bread-ui .p-form_table .i_input.w_short { width:200px !important; }
.bread-ui .p-form_table .i_desc { margin-top:4px; color:var(--bread-muted); font-size:12px; line-height:1.5; }
.bread-ui .p-form_table .item > label { display:inline-flex; align-items:center; gap:4px; }

/* 목록 셀 — 금액은 우측, 배지+날짜는 두 줄로 쌓는다. */
.bread-ui .p-table td.right { text-align:right; }
.bread-ui .p-table .cell_stack { display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.4; }
.bread-ui .p-table .cell_stack .sub { color:var(--bread-muted); font-size:12px; }

/* Two-Depth 좌측 목록의 선택 행 */
.bread-ui .p-table tbody tr.td_view_list.selected td { background:var(--bread-primary-bg); }

/* Two-Depth 레이아웃 — 좌측 고정 목록 + 우측 상세 */
.bread-ui .p-two_depth { display:flex; align-items:flex-start; gap:16px; }
.bread-ui .p-two_depth_side { flex:0 0 340px; min-width:0; }
.bread-ui .p-two_depth_main .p-empty { min-height:420px; }
.bread-ui .p-two_depth_main { flex:1 1 auto; min-width:0; }
.bread-ui .p-panel { border:1px solid var(--bread-line); border-radius:8px; background:var(--bread-canvas); }
.bread-ui .p-panel_head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--bread-line); }
.bread-ui .p-panel_head h3 { flex:1; min-width:0; margin:0; overflow:hidden; color:var(--bread-strong); font-size:16px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.bread-ui .p-panel_body { padding:16px; }

/* 좁은 사이드 검색: 라벨 위, 입력 아래로 세로 배치한다 */
.bread-ui .p-search.is_stack .p-search_body { flex-direction:column; align-items:stretch; gap:8px; padding:12px; }
.bread-ui .p-search.is_stack .p-field,
.bread-ui .p-search.is_stack .p-field.grow { min-width:0; }
.bread-ui .p-search.is_stack .p-search_actions .p-btn { flex:1; }
.bread-ui .p-list_bar.is_stack { gap:6px; }
.bread-ui .p-list_bar.is_stack .i_select { flex:1; min-width:0; }

/* 상세 보기 표 — 입력 폼과 같은 골격에 헤더 배경만 더한다 */
.bread-ui .p-form_table.is_view th { background:var(--bread-elevated); border-bottom:1px solid var(--bread-line); }
.bread-ui .p-form_table.is_view tbody tr:last-child th,
.bread-ui .p-form_table.is_view tbody tr:last-child td { border-bottom:0; }
.bread-ui .p-form_table.is_view td { color:var(--bread-text); }
.bread-ui .p-file_list { display:flex; flex-direction:column; gap:4px; }
.bread-ui .p-file_list a { color:var(--bread-primary); text-decoration:none; }
.bread-ui .p-file_list a:hover { text-decoration:underline; }
.bread-ui .p-thumb { display:inline-block; overflow:hidden; border:1px solid var(--bread-line); border-radius:6px; }
.bread-ui .p-thumb img { display:block; max-width:100px; max-height:100px; }

@media all and (max-width:1024px) {
    .bread-ui .p-two_depth { flex-direction:column; }
    .bread-ui .p-two_depth_side { flex:1 1 auto; width:100%; }
}

/* 목록 갱신 로딩 레이어 — 기존 목록을 지우지 않고 컨테이너 가운데에 덮는다. */
.p-list_host { position:relative; }
.p-list_overlay {
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.62);
}