/* 상단 헤더 */
#header { width: 100%; height: 80px; padding: 0 30px; border-bottom: 1px solid #F6F6F6; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05); float: left; display: flex; justify-content: space-between; align-items: center; }
#header .logo_wrap { width: 13%;  }
#header .logo_wrap > a { width: 100%; float:left; font-size: 19px; font-weight: 500; color:#000; }
#header .logo_wrap img.logo_main {max-height:40px; width:auto; display:block;}

#header .top_menu { width: 74%; float: left;  }
#header .top_menu ul { display: flex; align-items: center; justify-content: center; gap: 15px; }
#header .top_menu ul li { width: 78px; float:left; text-align: center; cursor: pointer; }
#header .top_menu ul li .menu_icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }
#header .top_menu ul li .menu_icon .active_icon { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#header .top_menu ul li.active .menu_icon{ width: 56px; height: 56px; border-radius: 50px; text-align: center; background-color: var(--primary); }
#header .top_menu ul li.active .active_icon { display: block; }
#header .top_menu ul li.active .menu_name { display: block; }
#header .top_menu ul li .menu_name { text-align: center; position: absolute; display: none; z-index: 9; }
#header .top_menu ul li .menu_name span { text-align: center; z-index: 1; top: 16px; font-weight: 500; color:#999999; }
#header .top_menu ul li .menu_name > img { top: -17px; }

#header .info_wrap { width: 13%; float: left; height: 32px; display: flex; align-items: center; gap: 28px;  }
#header .info_wrap .icon_box { display: flex; justify-content: center; align-items: center; text-align: center; font-size: 20px; color: #555555; cursor: pointer; }
#header .state { min-width: 27px; padding: 0 5px; height: 20px; line-height: 18px; text-align: center; background-color: #E1523A; color: #fff; border-radius: 50px; font-size: 10px; font-weight: 500; position: absolute; top: -12px; right: -15px; z-index: 9; }
#header .info_wrap .user_name { width: 100%; float:left; padding-left: 25px; border-left: 1px solid #E0E0E0; }
#header .info_wrap .user_name ul { width: 100%; display: flex; align-items: center; justify-content: space-between; }
#header .info_wrap .user_name ul .name_box { display: flex; gap: 12px; font-size: 16px; font-weight: 500; color:#666; }
#header .info_wrap .user_name ul .name_box span > i { font-size: 26px; color:#999; }
.name_box .name_text { min-width: 90px; }
#header .info_wrap .user_name ul .logout { font-size: 18px; color:#999; }

/* ----------- 찾을 수 없는 페이지 ----------- */
.without_body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow-y: auto; }
.without_body .container { text-align: center; }
.without_body .container h1 { font-size: 24px; color: #333; margin: 20px 0; letter-spacing: 0px; }
.without_body .container div { width:500px; padding:10px; border-bottom:1px solid #ccc; border-top:1px solid #ccc; }
.without_body .container p { font-size: 16px; color: #AEAEAE; margin: 10px 0; line-height: 26px; letter-spacing: 0px; }
/* ----------- 찾을 수 없는 페이지 ----------- */

/* 즐겨찾기 */
.bookmark_wrap { height: 52px; background-color: #F6F7FA; border-bottom: 1px solid #F6F6F6; display: flex; align-items: center; }
.bookmark_wrap ul { width: 100%; float:left; padding: 0 38px; display: flex; align-items: center; gap: 30px; justify-content: flex-start; }
.bookmark_wrap ul li { font-size: 15px; font-weight: 500;  }
.bookmark_wrap ul li.star { color:#FFE312; font-size: 20px; }

/* 메인 컨텐츠 영역 (북마크 아래) */
.bookmark_wrap + .main_container { margin-top: 0; padding-top: 0; }
.main_container { position: relative; width: 100%; display: flex; height: calc(100vh - 132px); min-height: 0; overflow: hidden; }

/* 좌측 메뉴 */
.left_sidebar_wrap { display: flex; flex-shrink: 0; transition: all 0.3s ease; }
.left_menu { width: 220px; float:left; transition: width 0.3s ease, min-width 0.3s ease; display: flex; flex-direction: column; border-right: 1px solid #E7E7E7; overflow: hidden; flex-shrink: 0; }
.left_menu .menu_list { min-width: 220px; }
.left_sidebar_wrap.collapsed .left_menu { width: 0; min-width: 0; border-right: none; }
.sidebar_toggle_btn { width: 20px; min-width: 20px; height: 40px; background-color: #FFF; border: 2px solid #cccccc; border-left: none; border-radius: 0 6px 6px 0; color: #cccccc; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.2s; }
.sidebar_toggle_btn:hover { background-color: #F5F5F5; border-color: #999; border-left: none; color: #999; }
.left_sidebar_wrap.collapsed .sidebar_toggle_btn { border-radius: 0 6px 6px 0; }
.left_sidebar_wrap.collapsed .sidebar_toggle_btn i { transform: rotate(180deg); }
.left_menu .title_box { width: 100%; float: left; height: 68px; line-height: 68px; text-align: center; color:#fff; font-size: 18px; font-weight: 600; flex-shrink: 0; }
.left_menu .menu_list { width: 100%; float: left; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.left_menu .menu_box { width: 100%; flex: 1; padding: 35px 25px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
.left_menu .menu_box .main_list { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.left_menu .menu_box .main_menu { height: 32px; line-height: 32px; width: 100%; float:left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 0 7px; }
.left_menu .menu_box .main_menu li { float: left; }
.left_menu .menu_box .main_menu .menu_name { width: 90%; font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.left_menu .menu_box .main_menu .menu_more { width: 10%; font-size: 16px; text-align: right; color:#999; }
.left_menu .sub_menu { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.left_menu .sub_menu li { width: 100%; float:left; font-size: 14px; font-weight: 500; height: 32px; line-height: 32px; padding: 0 15px; cursor: pointer; }
.left_menu .sub_menu li.active { background-color: #EBEBEB; border-radius: 5px; }
.left_menu .main_menu li { width: 100%; float:left; cursor: pointer; }
.left_menu .main_menu { border-radius: 5px; }
.left_menu .main_menu:has(li.active) { background-color: #EBEBEB; }
.left_menu .main_menu li.active { background: none; color: #333; }
.left_menu .main_menu:has(li.active) .menu_name { color: #333; }
.left_menu .main_menu:has(li.active) .menu_more { color: #333; }
.left_menu .main_menu:has(li.active) .menu_more i { color: #333; }
.left_menu .main_menu li.active a { color: inherit; }
.left_menu .ft_menu { width: 100%; float: left; flex-shrink: 0; margin-top: auto; border-top: 1px solid #E7E7E7; padding: 20px 16px; display: flex; flex-direction: column; gap: 22px; }
.left_menu .ft_menu .tit { width: 100%; float:left; color:#C7C7C7; font-size: 13px; display: flex; gap: 7px; }
.left_menu .ft_menu .call { width: 100%; float:left; background-color: #F9F9F9; border-radius: 10px; padding: 13px 10px; display: flex; gap: 12px; align-items: center; }
.left_menu .ft_menu .call .icon { font-size: 24px; color:#999; }
.left_menu .ft_menu .call .list { width: 100%; float:left; display: flex; flex-direction: column; gap: 6px; }
.left_menu .ft_menu .call .list ul { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.left_menu .ft_menu .call .list ul li { font-size: 11px; font-weight: 500; color:#999; }
.left_menu .ft_menu .call .list ul li.num { font-size: 14px; font-weight: 600; }
.left_menu .ft_menu .menu_close { width: 100%; float:left; text-align: right; color:#bbbbbb; font-size: 12px; font-weight: 400; display: flex; gap: 7px; justify-content: flex-end; cursor: pointer; }
.left_menu .ft_menu .menu_close span > i { font-size: 18px; }

/* 우측 컨텐츠 */
.right_container { flex: 1; min-width: 0; float: left; padding: 30px; padding-bottom:150px; display: flex; flex-direction: column; flex-grow: 1; min-height: auto; overflow-x: hidden; overflow-y: auto; }
.right_container .main_content { width: 100%; max-width: 100%; flex-grow: 0; min-height: auto; display: flex; flex-direction: column; min-width: 1300px; box-sizing: border-box; }
.right_container .top_infowrap { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.right_container .top_infowrap .top_title { float:left; display: inline-flex; align-items: center; gap: 12px;}
.right_container .top_infowrap .top_title .tit { font-size: 20px; font-weight: 600; color:#000; }
.right_container .top_infowrap .top_nav { text-align: right; }
.right_container .top_infowrap .top_nav > span { margin: 0 3px; color:#666; font-size: 13px; cursor: pointer; }
.right_container .top_infowrap .top_nav .star { color:#bbbbbb; font-size: 15px; }
.right_container .top_infowrap .top_nav .star > i { text-align: center; }
.right_container .top_infowrap .top_nav .star.active { color: #FFE312; }
.right_container .top_infowrap .top_nav .bookmark_star { cursor: pointer; }
.bookmark_wrap .bookmark_list li a { color: inherit; text-decoration: none; }
.bookmark_wrap .bookmark_list li a:hover { text-decoration: underline; }

.right_container .search_wrap { width: 100%; margin-top: 35px; display: flex; justify-content: space-between; align-items: center; }
.right_container .search_wrap .left_box { display: flex; align-items: baseline; gap: 15px; }
.right_container .search_wrap .left_box .all { color: #000000; font-size: 20px; font-weight: 400; }
.right_container .search_wrap .left_box .all > span { font-weight: 500; }
.right_container .search_wrap .left_box .small { color: #999999; font-size: 15px; font-weight: 400; }
.right_container .search_wrap .left_box .small > span { font-weight: 500; }
.right_container .search_wrap .search_box { width: 280px; height: 36px; border-radius: 50px; font-size: 14px; color:#ccc; background-color: #F0F1F7; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.right_container .search_wrap .search_box .txt { font-weight: 400; } 
.right_container .search_wrap .search_box .search { display: flex; gap: 6px; align-items: center; flex: 1; }
.right_container .search_wrap .search_box .search .all_search_input { flex: 1; border: none; background: transparent; padding: 0; font-size: 14px; color: #333; outline: none; }
.right_container .search_wrap .search_box .search .all_search_input::placeholder { color: #ccc; }
.right_container .search_wrap .search_box .search .fa-magnifying-glass { cursor: pointer; color: #999; }
.right_container .search_wrap .search_box .search .fa-magnifying-glass:hover { color: #333; }
.right_container .search_wrap .search_box .search .icon { font-size: 11px; color:#777; }

/* 데이터 검색 영역 (simple 타입) */
.data_search_wrap {border: 3px solid #F0F0F0; padding: 20px 30px; position: relative; margin-top:35px; border-radius: 10px;}
.data_search_wrap > form {width: 100%; display: flex; align-items: center;}
.data_search_wrap .search_item {width: 100%; margin: 5px 0; display: flex; align-items: center;}
.data_search_wrap .search_select {margin-right: 10px; width: 150px !important;}
.data_search_wrap .search_input { padding: 0 10px; border: 1px solid #ebebeb; width: 527px;}
.data_search_wrap .label { width: 100px;  font-weight: bold; flex-shrink: 0;}
.data_search_wrap .detail_search .detail_search_date { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;}
.data_search_wrap .date_select_btn { font-size:13px; height:35px; padding: 8px 14px; border-radius: 3px; color: #333; cursor: pointer; background: #EDEDED;}
.data_search_wrap .input_wrap { display: inline-flex; align-items: center; gap: 8px;}
.data_search_wrap .input_wrap .tilde { color: #999; }
.data_search_wrap .input_wrap .txt_box { width: 130px !important; }
.data_search_wrap .search_btn_wrap { margin-left: auto; flex-shrink: 0; position: relative; padding-left: 85px; margin-right:65px;}
.data_search_wrap .search_btn_wrap::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 80px; background-color: #EBEBEB; }
.data_search_wrap .search_btn { padding: 8px 35px; border-radius: 5px;  font-weight: 500; background-color: #808080; color:#FFFFFF}


.line_row { width: 100%; height: 1px; min-height: 1px; background-color: #F0F0F0; }
.line_col { width: 1px; height: 100%; background-color: #F0F0F0; min-width: 1px;}

/* 버튼 영역 */
.right_container .btn_wrap { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.right_container .btn_wrap .right_box { display: flex; align-items: center; gap: 8px; }
.right_container .btn_wrap .left_box { display: flex; align-items: center; gap: 8px; }
.btn_wrap .left_box .line_col,
.btn_wrap .right_box .line_col { width: 1px; height: 20px; background-color: #E1E1E1; margin: 0 10px; }

/* 타이틀 */
.page_title { width: 100%; float: left; font-size: 20px; font-weight: bold; margin-bottom: 15px;}

/* 정보 영역 */
.info_area { width: 100%; float: left; margin-bottom: 10px; color: #666;}

/* 테이블 */
th {background: #f5f7f8;border: 1px solid #ddd;padding: 10px 5px;font-weight: normal;}

td {border-bottom: 1px solid #eee;padding: 10px 5px;text-align: center;}

td.team_detail{border-bottom: 1px solid #eee;padding: 10px 5px; text-align: left !important;}

/* content_box 리스트 */
.content_box { width: 100%; float: left; margin-top: 20px; }

/* 공통 탭 */
.main_content .tab_wrap { display: inline-flex; align-items: center; margin: 40px 0 0px; border-radius: 50px; background-color: #FFFFFF; border: 1px solid #E0E0E0; width: auto; max-width: 100%; flex: 0 0 auto; align-self: flex-start;}
.main_content .tab_wrap .tab_btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 40px; padding: 0 25px; border-radius: 50px; font-weight: 500; color: #999; text-decoration: none; border: none; cursor: pointer; transition: all 0.18s ease;}
.main_content .tab_wrap .tab_btn.on { background-color: var(--primary); color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);}

/* 상품설정 */
.product_setting_wrap { width: 100%; float: left; margin-top: 0; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 60px; align-items: stretch; }
.product_setting_wrap .product_setting_left { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.product_setting_wrap  .write_title { float: left; width: 100%; margin-bottom: 0; font-size: 18px; color: #000000; }
.product_setting_wrap .product_setting_left .product_setting_table { width: 100%; float: left; border-top: 1px solid #333333; border-left: none; border-right: none; border-collapse: collapse; margin-top: 20px; table-layout: fixed; box-sizing: border-box; }
.product_setting_wrap .product_setting_left .product_setting_table th { border: none; border-bottom: 1px solid #eee; }
.product_setting_wrap .product_setting_left .product_setting_table .value { padding: 20px 20px !important; }
.product_setting_wrap .product_setting_left .product_setting_name_wrap { margin-top: 15px; padding: 20px; background-color: #F9F9F9; border-radius: 10px; }
.product_setting_wrap .product_setting_left .btn_wrap { width: 100%; float: left; margin-top: 20px; justify-content: flex-end; display: flex; }
.product_setting_wrap .product_register_company_select { width: 100%; height: 36px; padding: 0 12px; font-size: 14px; color: #333; border-radius: 5px; box-sizing: border-box; }
.product_setting_wrap #product_setting_product[readonly] { background: #f5f5f5; color: #666; cursor: default; }
.product_setting_wrap .product_setting_guide { width: 100%; float: left; padding:30px 45px; margin-top: 20px; display: flex; align-items: center; gap: 30px; background: #FCFCFC; border: 1px solid #E1E1E1; box-sizing: border-box; overflow: hidden; }
.product_setting_wrap .product_setting_guide_icon{color:#CCCCCC; font-size:30px;}
.product_setting_wrap .product_setting_guide_line { flex-shrink: 0; width: 1px; height: 70px; background: #C8C8C8; }
.product_setting_wrap .product_setting_guide_txt { flex: 1; font-size: 13px; color: #666;  }
.product_setting_wrap .product_setting_guide_txt_sub{font-weight:600; text-decoration: underline;}
.product_setting_wrap .product_setting_right { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.product_setting_wrap .product_setting_preview { margin-top:20px; width: 100%; float: left; border: none; border-top:1px solid #333333; background: #F5F5F5; padding: 35px; box-sizing: border-box; min-height: 280px; }
.product_setting_wrap .product_setting_preview .no_data { color: #999; font-size: 14px; padding: 20px 0; text-align: center; }
.product_setting_wrap .product_tree_company_row { width: 100%; float: left; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.product_setting_wrap .product_tree_company_select { flex: 1 1 0%; min-width: 0; border-radius: 4px; border: 1px solid #D1D5DB; background: #fff; overflow: hidden; position: relative; }
.product_setting_wrap .product_tree_company_select_input { width: 100%; height: 32px; border: none; padding: 0 28px 0 10px; font-size: 13px; color: #000000; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; }
.product_setting_wrap .product_tree_company_arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #999999; pointer-events: none; }
.product_setting_wrap .product_tree_root { list-style: none; margin: 0; padding: 0; width: 100%; float: left; padding: 0 0 0 35px;}
.product_setting_wrap .product_tree_children { list-style: none; margin: 0; padding: 0 0 0 35px; width: 100%; float: left;  }
.product_setting_wrap .product_tree_node { width: 100%; float: left; padding: 6px 0; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; box-sizing: border-box; }
.product_setting_wrap .product_tree_toggle { cursor: pointer; color: #888; width: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.product_setting_wrap .product_tree_toggle i { font-size: 22px; }
.product_setting_wrap .product_tree_item_box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; cursor: pointer; }
.product_setting_wrap .product_tree_node.active > .product_tree_item_box .product_tree_label { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: var(--primary); color: var(--primary); }
.product_setting_wrap .product_tree_label { flex: 1; min-width: 0; height:32px; line-height: 32px; color: #000000; padding: 0 32px 0 10px; background: #fff; border-radius: 4px; border: 1px solid #E1E1E1; box-sizing: border-box; }
.product_setting_wrap .product_tree_label .tree_prefix { color: #999999; margin-right: 4px; }
.product_setting_wrap .product_tree_del { width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; color: #999; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* 테이블 */
.content_box .list_table { width: 100%; float: left; overflow-x: auto; }
.content_box .list_table table { width: 100%; min-width: 1200px; border: 1px solid #E1E1E1; border-collapse: collapse; overflow: hidden; table-layout: fixed; }
.content_box .list_table thead th { height: 75px; min-height: 75px; max-height: 75px; box-sizing: border-box; background-color: #F5F7F8; border: 1px solid #E1E1E1; padding: 6px 8px; font-weight: 600; color: #333; text-align: center; vertical-align: middle; overflow: hidden; }
.content_box .list_table thead th > span { display: block; margin-bottom: 4px; }
.content_box .list_table thead th .th_sort_wrap { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.content_box .list_table thead th .sort_icon_wrap { display: inline-flex; align-items: center; margin-left: 2px; cursor: pointer; }
.content_box .list_table thead th .sort_icon { font-size: 12px; line-height: 1; --fa-primary-color: #999; --fa-secondary-color: #999; --fa-primary-opacity: 0.4; --fa-secondary-opacity: 0.4; }
.content_box .list_table thead th .sort_icon_wrap.sort-asc .sort_icon::before { opacity: 1; }
.content_box .list_table thead th .sort_icon_wrap.sort-asc .sort_icon::after { opacity: 0.5; }
.content_box .list_table thead th .sort_icon_wrap.sort-desc .sort_icon::before { opacity: 0.5; }
.content_box .list_table thead th .sort_icon_wrap.sort-desc .sort_icon::after { opacity: 1; }
.content_box .list_table thead th .sort_icon_wrap:hover .sort_icon { --fa-primary-color: #555; --fa-secondary-color: #555; }
.content_box .list_table thead th .sort_icon_wrap.sort-asc .sort_icon,
.content_box .list_table thead th .sort_icon_wrap.sort-desc .sort_icon { --fa-primary-color: #666666; --fa-secondary-color: #666666; }
.content_box .list_table thead th.fix { background-color: color-mix(in srgb, var(--primary) 12%, white); }
.content_box .list_table thead.has_group_header th { height: 38px; min-height: 38px; max-height: 38px; }
.content_box .list_table thead th.th_group { background-color: #ececec; }
.content_box .list_table thead th .table_form { width: 100%; height: 30px; min-height: 30px; line-height: 30px; font-size: 12px; padding: 0 6px; margin-top: 2px; box-sizing: border-box; }
.content_box .list_table thead th .search_icon_wrap { display: flex; align-items: center; margin-top: 5px; height: 30px; border: 1px solid #e1e1e1; border-radius: 5px; background: #fff; box-sizing: border-box; }
.content_box .list_table thead th .search_icon_wrap i { flex-shrink: 0; width: 25px; text-align: center; font-size: 12px; color: #999; }
.content_box .list_table thead th .search_icon_wrap .txt_box { flex: 1; min-width: 0; height: 28px; min-height: 28px; margin: 0; padding: 0 3px; border: none; border-radius: 0; font-size: 12px; box-sizing: border-box; background: transparent; }
.content_box .list_table thead th .txt_box { width: 100%; height: 30px; min-height: 30px; font-size: 12px; padding: 0 6px; border: 1px solid #e1e1e1; border-radius: 5px; margin-top: 2px; box-sizing: border-box; }
.content_box .list_table tbody td { box-sizing: border-box; border-bottom: 1px solid #EEE; padding: 10px 8px; font-size: 14px; color: #666; text-align: center; vertical-align: middle; }
.content_box .list_table tbody tr:last-child td { border-bottom: none; }
.content_box .list_table tbody td .list_cont_wrap { display: flex; flex-direction: column; gap: 0; align-items: stretch; justify-content: center; text-align: center; list-style: none; margin: 0; padding: 0; }
.content_box .list_table tbody td .list_cont { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 11px 0; font-size: 13px; line-height: 1.4; color: #666; box-sizing: border-box; }
.content_box .list_table .list_color_swatch { display: inline-block; width: 20px; height: 20px; background: var(--swatch-color, #eee); border: 1px solid #ccc; border-radius: 3px; vertical-align: middle; }
.content_box .list_table .list_color_swatch { display: inline-block; width: 20px; height: 20px; background: var(--swatch-color, #eee); border: 1px solid #ccc; border-radius: 3px; vertical-align: middle; }

.no_data_wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; text-align: center; color: #999; font-size: 14px; }
.no_data_wrap .no_data_icon { font-size: 48px; color: #DDD; }

/* 페이지네이션 */
.pagination_wrap { width: 100%; float: left; margin-top: 20px; text-align: center; }
.pagination { display: inline-flex; align-items: center; gap: 5px; }
.pagination li a { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; font-size: 14px; color: #666; }
.pagination li a:hover { background-color: #F5F4F9; border-color: var(--primary); }
.pagination li a.active { color:var(--primary); border: 1px solid var(--primary); border-radius: 5px; }
.pagination li a.page_arrow { font-size: 12px; }

/* 등록 */
.content_box .write_table { width: 100%; float: left; overflow-x: auto; }
.content_box .write_table .write_title { float:left; width: 100%; margin-bottom: 15px; font-size: 15px; font-weight: 600; }
.content_box .write_table table { width: 100%; border-collapse: collapse; table-layout: fixed; box-sizing: border-box; }
.content_box .write_table table th.label { padding: 14px 20px; font-size: 14px; font-weight: 500;}
.content_box .write_table table td.value { border: 1px solid #E1E1E1; padding: 12px 20px; vertical-align: middle; box-sizing: border-box; }
.content_box .write_table .input_dash { font-size: 14px; }
.content_box .write_table .vertical_wrap { display: flex; flex-direction: column; gap: 10px; }
.input_split { display: flex; align-items: center; gap: 8px; }
.input_split .txt_box { flex: 1; min-width: 0; }
.input_split .txt_box.w50 { flex: 0 0 calc(50% - 4px); width: auto !important; }
.form_inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.unit {font-size: 14px; color: #666; }

/* 파일 업로드 드래그앤드롭 */
.file_upload_wrap { width: 100%; }
.file_drop_area { width: 100%; min-height: 150px; border: 2px dashed #D1D5DB; border-radius: 8px; background: #FAFAFA; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; position: relative; }
.file_drop_area:hover { border-color: var(--primary); background: #F0F9FA; }
.file_drop_area.drag_over { border-color: var(--primary); background: #E6F4F5; }
.file_drop_content { text-align: center; padding: 20px; }
.file_drop_content i { font-size: 48px; color: #9CA3AF; margin-bottom: 12px; display: block; }
.file_drop_content .file_drop_text { font-size: 15px; color: #374151; margin-bottom: 6px; }
.file_drop_content .file_select_link { color: var(--primary); font-weight: 600; text-decoration: underline; }
.file_drop_content .file_drop_hint { font-size: 13px; color: #6B7280; }
.file_list_wrap { width: 100%; margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.file_item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; }
.file_item_info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.file_item_icon { font-size: 20px; color: var(--primary); flex-shrink: 0; }
.file_item_name { font-size: 14px; color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file_item_size { font-size: 12px; color: #6B7280; flex-shrink: 0; }
.file_item_remove { width: 24px; height: 24px; border: none; background: transparent; color: #EF4444; font-size: 16px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 4px; }

/* 파일 업로드 심플 */
.file_upload_simple { text-align: left; }
.file_upload_simple .file_simple_row { display: inline-flex; align-items: center; gap: 8px; }
.file_upload_simple .file_input_wrap { position: relative; display: inline-flex; align-items: center; }
.file_upload_simple .file_name_display { width: 180px; padding-right: 28px !important; background: #f5f5f5; cursor: default; }
.file_upload_simple .file_clear_btn { position: absolute; right: 6px; border: none; background: transparent; color: #9CA3AF; font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }
.file_upload_simple .file_clear_btn:hover { color: #374151; }
.file_upload_simple .file_select_btn { flex-shrink: 0; white-space: nowrap; }

.product_list_wrap{float:left; width:100%;}
.product_list_item{margin-top:15px;}
.product_list_btn_wrap{float:left; width:100%; text-align: center; margin-top:20px;}
.product_list_head{display:flex; align-items:center; justify-content:space-between; font-size:14px; margin-bottom:5px;}
.product_list_remove_btn{width:auto; height:auto; border:none; background:none; color:#BFBFBF; font-size:25px; margin-right:10px; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.product_list_remove_btn:hover{color:#666;}
.product_add_btn {width:400px; height:50px; line-height: 50px;}

/* 금액관리 */
.product_price_wrap { width: 100%; float: left; margin-top: 0; display: flex; flex-direction: column; gap: 24px; }
.product_price_wrap .write_title { float: left; width: 100%; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #000; }

.product_price_wrap .product_price_top { width: 100%; float: left; border-radius: 20px; border: 4px solid #F2F2F2; background: #FFFFFF; padding: 24px; box-sizing: border-box; }
.product_price_wrap .bundle_top_layout { display: flex; align-items: stretch; gap: 24px; }
.product_price_wrap .bundle_top_left { flex: 0 0 140px; min-width: 140px; display: flex; align-items: flex-start; }
.product_price_wrap .bundle_top_center { flex: 1; min-width: 0; }
.product_price_wrap .bundle_top_right { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; gap: 0; }
.product_price_wrap .bundle_right_divider { width: 1px; height: 100%; background-color: #E0E0E0; margin-right: 25px; }
.product_price_wrap .bundle_right_inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.product_price_wrap .product_price_top .bundle_company_row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.product_price_wrap .product_price_top .bundle_label { min-width: 80px; font-size: 14px; font-weight: 500; color: #333; }
.product_price_wrap .product_price_top .bundle_company_row .txt_box { width: 220px; }
.product_price_wrap .product_price_top .bundle_company_row .bundle_row_add_top { min-width: 36px; width: 36px; height: 36px; padding: 0; line-height: 36px; flex-shrink: 0; }

.product_price_wrap .bundle_products_box { min-height:150px; display: flex; flex-direction: row; align-items: flex-start; gap: 50px; overflow-y: auto; scrollbar-gutter: stable; max-height: 150px; border-radius: 8px; background: #F9FAFB; padding: 20px 30px 20px; box-sizing: border-box; }
.product_price_wrap .bundle_products_header_line { flex-shrink: 0; display: flex; align-items: center; margin: 0; padding-top: 6px; }
.product_price_wrap .bundle_products_label { font-size: 14px; font-weight: 500; color: #333; min-width: 36px; }

.product_price_wrap .salary_items_box { flex: 1; min-width: 0; }
.product_price_wrap .bundle_products_body { display: flex; flex-direction: column; gap: 0; }
.product_price_wrap .bundle_row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.product_price_wrap .bundle_row:last-child { margin-bottom: 0; }
.product_price_wrap .bundle_row .txt_box.w30 { width: 38%; min-width: 100px; }
.product_price_wrap .bundle_row .txt_box.w40 { width: 38%; min-width: 100px; }
.product_price_wrap .bundle_row .product_list_remove_btn { flex-shrink: 0; width: 28px; height: 28px; padding: 0; line-height: 28px; margin-left: 2px; }
.product_price_wrap .bundle_row_selects { flex: 1; display: flex; gap: 8px; }
.product_price_wrap .bundle_row_selects .txt_box { width: 50%; }
.product_price_wrap .bundle_row_actions { display: flex; gap: 6px; }
.product_price_wrap .bundle_row_actions .btn { min-width: 32px; padding: 0; height: 32px; line-height: 32px; }

.product_price_wrap .bundle_products_bottom_bar { margin-top: 12px; padding: 15px 20px; background-color:  color-mix(in srgb, var(--primary) 10%, white); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product_price_wrap .bundle_notice_txt { font-size: 12px; color: #999; }
.product_price_wrap .bundle_total_wrap { display: inline-flex; align-items: center; }
.product_price_wrap .bundle_total_label { font-weight: 600; color: var(--primary)}
.product_price_wrap .bundle_total_input { width: 200px; text-align: right; margin:0 10px 0 20px}
.product_price_wrap .bundel_right_btn {width:150px; height:45px; line-height: 45px; gap: 20px;}
.product_price_wrap .product_price_bottom {margin-top:40px;}
.product_price_wrap .product_price_list_actions {width:100%; float:left; margin-bottom: 10px;}
.product_price_wrap .product_price_filter { margin-bottom: 10px; text-align: right; }
.product_price_wrap .product_price_filter .txt_box { width: 200px; display: inline-block; }
.product_price_wrap .product_price_table .no_data_row td { text-align: center; color: #999; }
.product_price_wrap .product_price_table td.product_price_merged_cell { white-space: normal; word-break: keep-all; }
.product_price_wrap .price_edit_input_wrap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.product_price_wrap .price_edit_input_wrap .unit { margin-right: 0; }
.product_price_wrap .price_view_text { display: inline-block; min-width: 100px; text-align: right; }
.product_price_wrap .price_edit_input { flex: none; width: 100px; text-align: right; }


/* 로그인 페이지 */
.login_wrap { width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; background-color: #f2f9fa; }
.login_wrap .login_container { width: 100%; max-width: 1100px; min-height: 550px; display: flex; overflow: hidden; border-radius: 5px 100px 5px 100px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); flex-shrink: 0; }
.login_wrap .login_left { position: relative; width: 450px; background-color: var(--primary); padding: 48px 40px; border-radius: 5px 0 0 100px; color: #fff; display: flex; flex-direction: column; }
.login_wrap .login_right { flex: 1; min-width: 0; background-color: #fff; padding: 50px 100px; display: flex; align-items: center; justify-content: center; border-radius: 0 5px 5px 0; }
.login_left_tit { font-size: 33px; font-weight: 600; margin-bottom: 8px; }
.login_left_sub { font-size: 19px; }
.login_left_desc { font-size: 17px; color:#E7E7E7; opacity: 0.8; margin-top: auto; margin-bottom: 20px; }
.login_left_pattern { position: absolute; right: 0; bottom: 0; width: 180px; height: 180px; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%); border-radius: 24px 0 0 0; pointer-events: none; }
.login_form_wrap { width: 100%;}
.login_form_tit { font-size: 23px; font-weight: 600; color: #333; margin-bottom: 25px; }
.login_form .login_input_wrap { width: 100%; float: left; margin-bottom: 15px; }
.login_form .login_input_box { position: relative; width: 100%; float: left; border: 1px solid #D8D8D8; border-radius: 5px; background-color: #fff; padding-right: 40px; min-height: 80px; }
.login_form .login_input_inner { width: 100%; padding: 12px 0 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.login_form .login_input_label { font-size: 13px; color: #999; }
.login_form .login_input_box .txt_box { letter-spacing: 0px; width: 100%; border: none; padding: 0; background: transparent; font-size: 15px; font-weight: 500; color: #333; height: auto; min-height: 24px; }
.login_form .login_input_clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: none; border-radius: 50%; background-color: #999; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.login_form .login_input_clear:hover { background-color: #ccc; }
.login_form .login_error_msg { float: left; width: 100%; font-size: 13px; margin: 0; min-height: 20px; line-height: 20px;}
.login_form .login_btn_wrap { width: 100%; float: left; margin-top: 28px; }
.login_form .login_btn_wrap .btn { height: 60px; line-height:60px; border-radius: 10px; font-size: 20px; font-weight: 600;}
.login_foot_link { width: 100%; float: left; text-align: center; margin-top: 20px; }
.login_foot_link a { font-size: 14px; }
.login_foot_link a i { margin-right: 5px; }
.login_foot_link a:hover { text-decoration: underline; }
.login_footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 30px; text-align: center; font-size: 13px; color: #D8D8D8;}

/* 팝업 */
.popup_wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; }
.popup_wrap.on { display: flex; align-items: center; justify-content: center; }
.popup_wrap .popup_dim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); cursor: pointer; }
.popup_wrap .popup_box { position: relative; width: 90%; max-width: 800px; max-height: 90vh; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; }
.popup_wrap .popup_header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--primary, #1AB394); color: #fff; }
.popup_wrap .pop_tit { margin: 0; font-size: 18px; font-weight: 600; }
.popup_wrap .pop_tit .pop_tit_main{color:var(--primary)}
.popup_wrap .popup_close { background-color:#FFF; width: 32px; height: 32px; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.popup_wrap .popup_close:hover { background: rgba(0, 0, 0, 0.233); }
.popup_wrap .pop_iframe { flex: 1; min-height: 400px; position: relative; }
.popup_wrap .pop_iframe iframe { width: 100%; height: 100%; min-height: 400px; border: none; display: block; }
.popup_wrap.small .popup_box { max-width: 500px; }
.popup_wrap.middle .popup_box { max-width: 640px; }
.popup_wrap.big_pop .popup_box { max-width: 95%; max-height: 95vh; }
.popup_wrap.mobile .popup_box { max-width: 100%; max-height: 100%; border-radius: 0; }

/* iframe 팝업 (openPopup / data-popup-url용) */
.popup_iframe_wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; }
.popup_iframe_wrap.on { display: flex; align-items: center; justify-content: center; }
.popup_iframe_wrap .popup_iframe_dim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); cursor: pointer; }
.popup_iframe_wrap .popup_iframe_box { position: relative; width: 90%; max-width: 800px; max-height: 90vh; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; }
.popup_iframe_wrap .popup_iframe_header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--primary, #1AB394); color: #fff; }
.popup_iframe_wrap .popup_iframe_tit { margin: 0; font-size: 18px; font-weight: 600; }
.popup_iframe_wrap .popup_iframe_close { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.3); border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.popup_iframe_wrap .popup_iframe_close:hover { background-color: rgba(0, 0, 0, 0.5); }
.popup_iframe_wrap .popup_iframe_body { flex: 1; min-height: 400px; position: relative; }
.popup_iframe_wrap .popup_iframe_body iframe { width: 100%; height: 100%; min-height: 400px; border: none; display: block; }
.popup_iframe_wrap.small .popup_iframe_box { max-width: 500px; }
.popup_iframe_wrap.middle .popup_iframe_box { width: 960px; max-width: 960px; height: 800px; max-height: 800px; }
.popup_iframe_wrap.big .popup_iframe_box { max-width: 95%; max-height: 95vh; }
.popup_iframe_wrap.mobile .popup_iframe_box { max-width: 100%; max-height: 100%; border-radius: 0; }


.list_setting_layer { position: fixed; z-index: 9999; }
.list_setting_layer .list_setting_box { width: 250px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8e8e8; }
.list_setting_layer .list_setting_header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eee; }
.list_setting_layer .list_setting_tit { margin: 0; font-size: 16px; font-weight: 600; color: #333; }
.list_setting_layer .list_setting_close { width: 28px; height: 28px; border-radius: 50%; background: #f0f0f0; border: none; color: #666; font-size: 14px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.list_setting_layer .list_setting_close:hover { background: #e0e0e0; }
.list_setting_layer .list_setting_body { padding: 12px 16px; max-height: 320px; overflow-y: auto; }
.list_setting_layer .list_setting_check_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.list_setting_layer .list_setting_check_list li { margin: 0; }
.list_setting_layer .list_setting_check_list label { display: flex; align-items: center; gap: 20px; cursor: pointer; font-size: 18px; color: #666; }
.list_setting_layer .list_setting_footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #F8F8F8; border-top: 1px solid #eee; flex-shrink: 0; }
.list_setting_layer .list_setting_footer .btn { padding: 8px 14px; font-size: 13px; }
.list_setting_layer .list_setting_footer .reset_txt { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #CCCCCC; cursor: pointer; }
.list_setting_layer .list_setting_footer .reset_txt span { text-decoration: underline; }

/* 상세필터 설정 팝업 */
#detailFilterPopup { z-index: 10000; position: fixed; display: none; }
#detailFilterPopup .detail_filter_popup_box { max-width: 800px; width: 800px; height:473px; position: fixed; }
#detailFilterPopup .popup_header { background: #fff; border-bottom: 1px solid #eee; }
#detailFilterPopup .popup_title { margin: 0; font-size: 18px; font-weight: 600; color: #333; }
#detailFilterPopup .detail_filter_close { background: transparent; color: #666; width: 32px; height: 32px; }
#detailFilterPopup .detail_filter_close:hover { background: #f0f0f0; }
#detailFilterPopup .detail_filter_body { padding: 24px; max-height: 60vh; overflow-y: auto; }
.detail_filter_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.detail_filter_col { display: flex; flex-direction: column; gap: 16px; }
.detail_filter_item { display: flex; flex-direction: column; gap: 8px; }
.detail_filter_label { font-size: 14px; font-weight: 500; color: #333; }
.detail_filter_input_wrap { position: relative; }
.detail_filter_input_wrap .detail_filter_input { width: 100%; padding-right: 36px; }
.detail_filter_calendar { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; }
.detail_filter_select { width: 100%; }
.detail_filter_checkbox_group { display: flex; gap: 16px; height:35px; }
.detail_filter_checkbox_group .custom_check_box { display: flex; align-items: center; gap: 6px; font-size:14px }
#detailFilterPopup .popup_footer { padding: 16px 24px; background: #f8f8f8; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.detail_filter_reset { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: #999; cursor: pointer; font-size: 14px; padding: 8px 12px; }
.detail_filter_reset:hover { color: #666; }
.detail_filter_cancel { padding: 8px 20px; }
.detail_filter_search { display: flex; align-items: center; gap: 6px; padding: 8px 20px; }

.popup_write_wrap { display: flex; flex-direction: column; min-height: 100vh;}
.popup_write_wrap .content_box { flex: 1; min-height: 0; padding: 20px; }
.popup_write_footer { padding: 14px 20px; background: #F5F5F5; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.popup_write_footer .left_box { display: flex; align-items: center; gap: 8px; }
.popup_write_footer .right_box { display: flex; align-items: center; gap: 8px; }
.popup_write_footer .btn { border-radius: 6px; }

/* 시스템 정보 팝업 (개인정보처리방침, 서비스 이용약관) */
.modal_section_wrap { display: flex; flex-direction: column; min-height: 360px; }
.sys_info_tabs { display: flex; gap: 0; border-bottom: 2px solid #E7E7E7; flex-shrink: 0; margin: -10px 0 20px; float:left; width:100%;}
.sys_info_tabs button { padding: 12px 20px; font-size: 14px; font-weight: 500; color: #666; background: #fff; border: none; cursor: pointer; border-bottom: 2px solid #E7E7E7; margin-bottom: -2px; }
.sys_info_tabs button:hover { color: #333; }
.sys_info_tabs button.active { color: var(--primary, #1AB394); font-weight: 600; border-bottom-color: var(--primary, #1AB394); }
.sys_info_content { flex: 1; overflow-y: auto; }
.sys_info_content .tab_panel { display: none; }
.sys_info_content .tab_panel.active { display: block; }
.sys_info_content .modal_section { margin-bottom: 20px; }
.sys_info_content .modal_section_title { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #000; }
.sys_info_content .modal_section_desc { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #333; }
.sys_info_content .modal_section_desc li { margin-bottom: 6px; }
.pop_system_info_footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid #E7E7E7; text-align: center; font-size: 12px; color: #888; }

/* 목록 순서 이동 (드래그) */
.sort_move_cell { white-space: nowrap; }
.sort_move_handle { cursor: grab; display: inline-block; padding: 4px 6px; margin-right: 6px; color: #999; vertical-align: middle; user-select: none; }
.sort_move_handle:hover { color: #333; }
.sort_move_handle:active { cursor: grabbing; }
.sort_move_val { vertical-align: middle; }
tr.sort_row.sort_dragging { opacity: 0.5; }
tr.sort_row.sort_over { background-color: #e8f4ff; outline: 1px dashed #0066cc; }



 /* datepicker */
.txt_box[datepicker] { padding-right: 40px !important; cursor: pointer; width: 100% !important;box-sizing: border-box;}
.datepicker_wrap { position: relative; display: block;}
.datepicker_wrap .txt_box[datepicker] {float: none;display: block;}
.content_box .write_table .form_inline .datename_textpicker_wrap {display: inline-block;vertical-align: middle;align-self: center;}
.datepicker_wrap .datepicker_icon {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);font-size: 16px;color: #C7C7C7;pointer-events: none;z-index: 1;line-height: 1;display: inline-flex;align-items: center;justify-content: center;}

.ui-datepicker { z-index:100 !important; }
.ui-widget.ui-widget-content { border: 0 !important; border-radius: 5px !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important; padding: 0 !important; overflow: hidden; margin-top: 5px; width: 220px !important; }
.ui-datepicker .ui-datepicker-header { border: 0 !important; border-radius: 0 !important; background-color: var(--primary) !important; padding: 8px 50px !important; margin: 0 !important; }
.ui-datepicker .ui-datepicker-title { margin: 0 !important; color: #FFF; font-size: 14px; }
.ui-datepicker .ui-datepicker-title > span { font-size: 14px; }
.ui-datepicker table { margin: 0 !important; }
.ui-datepicker td a { text-align: center !important; font-weight: 500 !important; border: 0 !important; background: none !important; font-size: 12px !important; color: #333 !important; border-radius: 3px; transition: background-color 0.2s; }
.ui-datepicker td a:hover { background-color: #F2F2F2 !important; }
.ui-datepicker td span { text-align: center !important; font-weight: 500 !important; border: 0 !important; background: none !important; font-size: 12px !important; color: #CCC !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight { background-color: #c5c5c5 !important; }
.ui-state-active, .ui-widget-content .ui-state-active { color: #333 !important; font-weight: bold !important; background-color: #FFCC33 !important; }
.ui-state-active:hover, .ui-widget-content .ui-state-active:hover { color: #333 !important; font-weight: bold !important; background-color: #FFCC33 !important; }
.ui-datepicker th { font-size: 12px !important; } 
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev { cursor: pointer; width: 35px !important; height: 35px !important; line-height: 35px !important; text-align: center !important; top: -1px !important; background: none !important;        /* jQuery UI 기본 스프라이트 제거 */ border: 0 !important;}
.ui-datepicker .ui-datepicker-next { right: 0 !important; }
.ui-datepicker .ui-datepicker-next::after { content: "\f138"; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #FFF; opacity: 0.8; transition: opacity 0.5s;}
.ui-datepicker .ui-datepicker-next:hover::after { opacity: 1; }
.ui-datepicker .ui-datepicker-next > span { display: none !important; } 
.ui-datepicker .ui-datepicker-prev { left: 0 !important; }
.ui-datepicker .ui-datepicker-prev::after { content: "\f137"; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #FFF; opacity: 0.8; transition: opacity 0.5s;}
.ui-datepicker .ui-datepicker-prev:hover::after { opacity: 1; }
.ui-datepicker .ui-datepicker-prev > span { display: none !important; }
.ui-datepicker select { height: auto; line-height: normal; padding: 0 2px; border-radius: 0; border: none !important; background-color: var(--primary) !important; font-weight: bold; color: #FFF !important; font-size: 15px !important; cursor: pointer !important; letter-spacing: -0.5px !important; margin: 0 !important; float: left;}
.ui-datepicker-year { width:52% !important; }
.ui-datepicker-month { width:48% !important; }
.ui-datepicker select > option{background: #FFF;color: #333 !important;}



/* 고객 상세 뷰 */
.db_detail_overlay { display: none; position: fixed; top: 132px; right: 0; bottom: 0; left: auto; width: 50vw; min-width: 320px; max-width: 900px; height: calc(100vh - 132px); z-index: 100; pointer-events: none; }
.db_detail_wrap { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 50vw; min-width: 320px; max-width: 900px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: visible; animation: slideInRight 0.3s ease-out; pointer-events: auto; box-sizing: border-box; }
.db_detail_close_box { position: absolute; left: -40px; top: 0px; z-index: 2; }
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
.db_detail_wrap.slide_out { animation: slideOutRight 0.3s ease-in forwards; }
.db_detail_wrap.db_detail_no_animate { animation: none; }

/* 뷰 서브팝업 */
.db_detail_wrap .popup_wrap.db_detail_popup { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; }
.db_detail_wrap .popup_wrap.db_detail_popup.on { display: flex; align-items: center; justify-content: center; }

/* 요청/개통 이력 팝업 */
.db_detail_wrap .popup_wrap.db_detail_popup .popup_header { background: #fff; color: #333; border-bottom: 1px solid #eee; }
.db_detail_wrap .popup_wrap.db_detail_popup .pop_tit { color: #333; }
.db_detail_wrap .popup_wrap.db_detail_popup .popup_close { color: #666; }
.db_detail_wrap .popup_wrap.db_detail_popup .popup_close:hover { background: #e0e0e0; color: #333; }

/* 요청/개통 이력 팝업 박스  */
.db_detail_wrap .popup_box.db_pop_request_box { width: 90%; max-width: 420px; max-height: 600px; }
.db_detail_wrap .popup_box.db_pop_status_box { width: 90%; max-width: 350px;  max-height: 300px; }
.db_detail_wrap .db_pop_request_body { flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: column; gap: 0; min-height: 0; }
.db_detail_wrap .db_pop_request_list { overflow-y: auto; flex: 1; min-height: 0; background: #F8F8F8; padding: 16px; }
.db_detail_wrap .db_pop_status_body { flex: 1; overflow: hidden; padding: 16px; min-height: 0; display: flex; flex-direction: column; }
.db_detail_wrap .db_pop_status_list { overflow-y: auto; flex: 1; min-height: 0; padding:5px}
.db_detail_wrap .db_pop_request_form { padding: 12px 16px 16px; background: #fff; flex-shrink: 0; border-top: 1px solid #e5e7eb; }
.db_detail_wrap .db_pop_request_form_inner { display: flex; align-items: center; gap: 0; background: #f0f0f0; border-radius: 24px; padding: 6px 6px 6px 14px; justify-content: flex-end; }
.db_detail_wrap .db_pop_request_type_wrap { position: relative; display: inline-flex; align-items: center; }
.db_detail_wrap .db_pop_request_type { max-width: 80px; border: none; background: transparent; color: #666; font-size: 13px; cursor: pointer; appearance: none; padding-right: 20px; }
.db_detail_wrap .db_pop_request_type_arrow { position: absolute; right: 0px; pointer-events: none; font-size: 11px; color: #666; }
.db_detail_wrap .db_pop_request_memo { flex: 1; border: none; background: transparent; padding: 10px 12px; font-size: 14px; min-width: 0; }
.db_detail_wrap .db_pop_request_memo::placeholder { color: #999; }
.db_detail_wrap .db_pop_request_send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db_detail_wrap .db_pop_request_send:hover { background: var(--primary); }
.db_detail_wrap .db_pop_request_send:disabled { opacity: 0.6; cursor: not-allowed; }
.db_detail_wrap .db_pop_request_send i {font-size:15px;}

/* 업셀링 등록 팝업 */
.db_detail_wrap .popup_box.db_pop_upsale_box { width: 90%; max-width: 600px; max-height: 90vh; }
.db_detail_wrap .db_pop_upsale_body { flex: 1; overflow-y: auto; padding: 20px; min-height: 0; }
.db_pop_upsale_info { background: #f5f5f5; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.db_pop_upsale_info p { margin: 0; color: #666; font-size: 14px; line-height: 1.5; }
.db_pop_upsale_table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.db_pop_upsale_table th, .db_pop_upsale_table td { border: none !important; background:none; text-align: left;}
.db_pop_upsale_type_wrap, .db_pop_upsale_product_wrap, .db_pop_upsale_option_wrap, .db_pop_upsale_settop_wrap, .db_pop_upsale_gift_wrap { position: relative; display: block; width: 100%; }
.db_pop_upsale_type_wrap select.txt_box, .db_pop_upsale_product_wrap select.txt_box, .db_pop_upsale_option_wrap select.txt_box, .db_pop_upsale_settop_wrap select.txt_box, .db_pop_upsale_gift_wrap select.txt_box { width: 100%; padding-right: 32px; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.db_pop_upsale_type_wrap select.txt_box.w50, .db_pop_upsale_product_wrap select.txt_box.w50, .db_pop_upsale_option_wrap select.txt_box.w50, .db_pop_upsale_settop_wrap select.txt_box.w50, .db_pop_upsale_gift_wrap select.txt_box.w50 { width: 50% !important; }
.db_pop_upsale_type_wrap i, .db_pop_upsale_product_wrap i, .db_pop_upsale_option_wrap i, .db_pop_upsale_settop_wrap i, .db_pop_upsale_gift_wrap i { position: absolute; right: 10px; top: 50%; transform: translateY(100%); pointer-events: none; color: #999; font-size: 12px; }
.db_pop_upsale_type_wrap select.w50 ~ i, .db_pop_upsale_product_wrap select.w50 ~ i, .db_pop_upsale_option_wrap select.w50 ~ i, .db_pop_upsale_settop_wrap select.w50 ~ i, .db_pop_upsale_gift_wrap select.w50 ~ i { right: calc(50% + 10px); }
.db_pop_upsale_gift_wrap.input_split { display: flex !important; gap: 5px !important; }
.db_pop_upsale_gift_select_wrap { position: relative; flex: 0 0 calc(50% - 2.5px); }
.db_pop_upsale_gift_select_wrap i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #999; font-size: 12px; }
.db_pop_upsale_product_num { color: #333; font-size: 14px; }
.db_pop_upsale_product_date.txt_box { width: 100%; }
.db_pop_upsale_amount_row { height:90px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 8px; padding: 16px 20px; margin-top: 20px; text-align: center; }
.db_pop_upsale_amount_row .label { font-size: 14px; font-weight: 500; color: #333; min-width: 80px; }
.db_pop_upsale_amount_row .form_inline { display: flex; align-items: center; gap: 8px; flex: 1; }
.db_pop_upsale_amount { width: 90% !important; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 8px; background: #ffffff; font-size: 16px; font-weight: 500; color: #333; text-align: right; }
.db_pop_upsale_amount::placeholder { color: #CCC; font-size:13px; text-align: right; font-weight: 400;}
.db_pop_upsale_amount_row .unit { font-size: 14px; color: #333; }
.db_pop_upsale_footer { display: flex; justify-content: center; gap: 12px; padding: 16px 20px; border-top: 1px solid #eee; background-color: #F5F5F5; }
.db_pop_upsale_cancel.btn, .db_pop_upsale_submit.btn { height: 35px; line-height: 35px; padding: 0 20px; border-radius: 3px; font-size: 14px; font-weight: 600; }
.db_pop_upsale_submit.btn { background: #208a8a; color: #fff; border: none; }
.db_pop_upsale_submit.btn:hover { background: #1a7070; opacity: 1; }


/* 요청 이력  */
.db_detail_wrap .db_pop_request_list { max-height: 600px; overflow-y: auto; flex: 1; min-height: 0; }
.db_request_item { display: flex; gap: 10px; margin-bottom: 16px; align-items: flex-start; }
.db_request_item_right {justify-content: flex-end; }
.db_request_avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 14px; }
.db_request_avatar_left { background: #aaa; }
.db_request_avatar_right { background: var(--primary); opacity: 50%; align-self: flex-start; }
.db_request_bubble_wrap { max-width: 75%; min-width: 0; }
.db_request_item_right .db_request_bubble_wrap { margin-left: auto; }
.db_request_name { font-size: 13px; color: #333; font-weight: 500; margin-bottom: 4px; }
.db_request_item_right .db_request_name { text-align: right; }
.db_request_bubble { padding: 0; border-radius: 12px; font-size: 14px; overflow: hidden; }
.db_request_item .db_request_bubble { background: #fff; color: #333; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.db_request_item_right .db_request_bubble { color: #333; }
.db_request_bubble_status { padding: 10px 12px 8px; }
.db_request_bubble_divider { margin: 0 auto; border: none; border-top: 1px solid #EDEDED; padding-right:10px; width:90%; }
.db_request_memo_box { padding: 8px 12px 10px; line-height: 1.45; word-break: break-word; }
.db_request_tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.db_request_tag.req_tag_memo { background: #e8dcf5; color: #7b5ab5; }
.db_request_tag.req_tag_request { background: #fce4e4; color: #c75b5b; }
.db_request_tag.req_tag_reply { background: #dceaf5; color: #4a7fb8; }
.db_request_tag.req_tag_main { background: var(--primary); color: #fff; }
.db_request_meta_text { font-size: 12px; color: #999; margin-top: 6px; padding: 0 2px; }
.db_request_item_right .db_request_meta_text { text-align: right; }
.db_pop_empty_msg { text-align: center; color: #999; font-size: 14px; padding: 24px 0; }
.db_detail_wrap .db_pop_request_list .loading_txt { text-align: center; color: #999; padding: 24px 0; }

/* 개통 이력 타임라인 */
.db_status_timeline { position: relative; padding-left: 20px; border-left: 2px solid #e0e0e0; margin-left: 8px; }
.db_status_item { position: relative; margin-bottom: 16px; }
.db_status_dot { background-color: #ffffff; position: absolute; left: -31px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #aaaaaa; }
.db_status_item:first-child .db_status_dot { border-color: var(--primary); }
.db_status_content { min-width: 0; }
.db_status_row { display: flex; align-items: center; gap: 0; min-width: 0; width:260px }
.db_status_name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #333; }
.db_status_filler { flex: 1; min-width: 8px; height: 0; border-bottom: 1px dashed #ccc; margin: 0 6px; align-self: center; }
.db_status_label { flex: 0 0 auto; font-weight: 600; font-size: 14px; }
.db_status_item .db_status_meta { font-size: 12px; color: #999; margin-top: 4px; margin-bottom: 0; }

.db_pop_empty_msg { color: #999; }
.db_detail_error_sub { font-size: 12px; color: #999; margin-top: 10px; }

/* 상품 목록 요청/개통 이력 아이콘 버튼 */
.db_product_btn_request, .db_product_btn_status { font-size:21px; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: #6c757d; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.db_product_btn_request:hover, .db_product_btn_status:hover { background: #f0f0f0; color: #333; }

/* 요청 이력 팝업 태그 색 */
.db_request_tag.req_tag_memo { background: #e8daef; color: #6b3d7a; }
.db_request_tag.req_tag_request { background: #fadbd8; color: #922b21; }
.db_request_tag.req_tag_reply { background: #d4e6f1; color: #1a5276; }
.db_status_label.status_ing { color: #7d3c98; }
.db_status_label.status_recv { color: #c0392b; }
.db_status_label.status_wait { color: #b7950b; }

/* 헤더 영역 */
.db_detail_wrap .db_detail_header { background: #fff; flex-shrink: 0; overflow: hidden; }

/* 상단 타이틀 바 */
.db_detail_title_bar { display: flex; justify-content: space-between; align-items: center; padding: 0px 30px; margin-top:20px;}
.db_detail_title { margin: 0; font-size: 18px; font-weight: 600; color: #333; }
.db_detail_header_actions { display: flex; align-items: center; gap: 8px; }
.db_detail_close_box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #E0E0E0; flex-shrink: 0; border:1px solid #D7D7D7 }
.db_detail_close_box .db_detail_close_btn { width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: transparent; color: #A6A6A6; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.db_detail_close_box .db_detail_close_btn:hover { background: #ddd; color: #333; }
.db_detail_edit_btn { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #9D9D9D; cursor: pointer; border-radius: 4px; font-size: 20px; }
.db_detail_edit_btn:hover { background: #f5f5f5; color: #333; }

/* 고객 정보 박스 */
.db_detail_info_box { height:80px; display: flex; justify-content: space-between; align-items: center; padding: 16px 30px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid var(--primary); margin: 16px 30px; border-radius: 8px; }
.db_detail_info_left { display: flex; align-items: center; gap: 10px; }
.db_detail_info_left i { color: var(--primary); font-size: 20px; }
.db_detail_name_header { font-size: 17px; font-weight: 600; color: var(--primary); }
.db_detail_name_header_phone { font-size: 17px; color: #333; letter-spacing: 0px; }
.db_detail_info_right { display: flex; align-items: center; gap: 15px; }
.db_detail_meta { font-size: 13px; color: #666; }
.db_detail_meta_box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background:  color-mix(in srgb, var(--primary) 10%, white); border-radius: 8px; padding: 10px 14px; }
.db_detail_meta_inflow { font-size: 15px; color: #333; }
.db_detail_meta_product_badge { background: #fff; border-radius: 20px; padding: 4px 12px; font-size: 13px; color: #333; white-space: nowrap; }
.db_detail_meta_product_badge .badge_txt { color: var(--primary); font-weight: 600; }
.db_detail_meta_divider { width: 1px; height: 25px; background: #818181; opacity: 20%; }
/* 탭 영역 */
.db_detail_tabs_wrap { overflow-x: hidden; overflow-y: hidden; padding: 20px 30px 10px; cursor: grab; user-select: none; }
.db_detail_tabs_wrap:active,
.db_detail_tabs_wrap.db_detail_tabs_dragging { cursor: grabbing; }
.db_detail_tabs { display: flex; gap: 0; padding: 0; flex-wrap: nowrap; width: max-content; min-width: 100%; }
.db_detail_tab { flex-shrink: 0; height: 40px; padding: 12px 16px; border: none; background: #FFFFFF; color: #E1E1E1; font-size: 15px; cursor: pointer; white-space: nowrap; border-radius: 50px; margin-right: 7px; transition: all 0.2s; border: 1px solid #E1E1E1; line-height: 5px; }
.db_detail_tab.active { color: #fff; background: #666; font-weight: 500; }

/* 컨텐츠 영역 */
.db_detail_content { flex: 1; overflow-y: auto; padding-left: 30px; padding-right: 30px; min-height: 0; margin-top:30px; padding-bottom: 50px; }
.db_detail_section { margin-bottom: 50px;}
.db_detail_section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.db_detail_content .write_title { float: none; width: 100%; margin-bottom: 14px; font-size: 16px; font-weight: 600; color: #333; }
.db_detail_content .write_title.mt_50 { margin-top: 28px; }
.db_detail_content .no_data_wrap { padding: 40px 20px; float: left; width: 100%; }
.db_detail_placeholder { text-align: center; padding: 60px 20px; color: #999; font-size: 14px; }
.db_detail_placeholder i { display: block; margin-bottom: 12px; color: #ccc; }
.db_detail_loading { text-align: center; padding: 40px; color: #666; }

/* 첨부파일 목록 */
.db_detail_file_list { display: flex; flex-wrap: wrap; gap: 14px; }
.db_detail_file_item { display: flex; align-items: center; gap: 12px; min-width: 200px; max-width: 320px; padding: 12px 14px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; transition: background 0.2s, border-color 0.2s; text-decoration: none; color: inherit; cursor: pointer; }
.db_detail_file_item:hover { background: #fff; border-color: #dee2e6; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.db_detail_file_icon { font-size: 28px; flex-shrink: 0; color: #6c757d; }
.db_detail_file_info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db_detail_file_name { font-size: 14px; font-weight: 500; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db_detail_file_size { font-size: 12px; color: #868e96; }
.db_detail_table { width: 100%; margin-bottom: 20px; background: #fff; border: 1px solid #E1E1E1; border-collapse: collapse; border-spacing: 0; }
.db_detail_table th, .db_detail_table td { height:50px; min-height:50px; padding: 10px 14px; font-size: 14px; border: 1px solid #E1E1E1; }
.db_detail_table th { width: 140px; background: #F5F7F8; font-weight: 600; color: #555; }
.db_detail_table td { text-align: left; }
.db_detail_tab_content { display: none; }
.db_detail_tab_content.active { display: block; }
.db_detail_products th, .db_detail_products td { text-align: center; font-size: 13px; }
.db_detail_products th { width: auto; }
.db_detail_join_info { text-align: left; vertical-align: middle; }
.db_detail_join_info .db_detail_join_num { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.db_detail_join_info .db_detail_join_detail { display: block; font-size: 12px; color: #666; }
.content_box .list_table tbody tr.edit_row_popup,
.content_box .list_table tbody tr.view_row_link,
.content_box .list_table_datal tbody tr.edit_row_popup,
.content_box .list_table_datal tbody tr.view_row_link { cursor: pointer; }
.content_box .list_table tbody tr.row_hover.selected,
.content_box .list_table_datal tbody tr.row_hover.selected { background-color: #F5F4F9; }
.content_box .list_table tbody tr.list_row_notice { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.content_box .list_table .list_noti_icon { color: var(--primary); }
.content_box .list_table .list_noti_prefix { font-weight: 700; color: var(--primary); margin-right:5px; }

/* 커뮤니티형 상세보기 */
.view_community { width: 100%; margin-bottom:20px; margin-top: 20px; }
.view_community_category { font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 8px; }
.view_community_title { font-size: 20px; font-weight: 600; color: #333; margin: 0 0 12px; padding-bottom: 16px; border-bottom: 1px solid #eee; line-height: 1.5; }
.view_noti_badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; background: var(--primary); color: #fff; border-radius: 4px; vertical-align: middle; }
.view_community_meta { font-size: 13px; color: #888; margin-bottom: 24px; }
.view_community_content { margin-bottom: 28px; padding: 20px 0; min-height: 150px; }
.view_community_files { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; }
.view_community_files_label { font-size: 14px; font-weight: 600; color: #555; margin-bottom: 12px; }

/* 에디터 HTML 출력 스타일 */
.content_area.content_html {font-size: 14px; line-height: 1.6; color: #333; word-wrap: break-word;}
.content_area.content_html p { margin: 0 0 0.8em; }
.content_area.content_html p:last-child { margin-bottom: 0; }
.content_area.content_html ul, .content_area.content_html ol { padding-left: 1.5em; margin: 0.8em 0; }
.content_area.content_html img { max-width: 100%; height: auto; }
.content_area.content_html table { border-collapse: collapse; margin: 0.8em 0; }
.content_area.content_html table td, .content_area.content_html table th { border: 1px solid #ddd; padding: 6px 10px; }
.content_area.content_html blockquote { border-left: 4px solid #ccc; padding-left: 1em; margin: 0.8em 0; color: #666; }
.content_area.content_html a { color: #0782c1; }
.content_area.content_html h1, .content_area.content_html h2, .content_area.content_html h3 { margin: 1em 0 0.5em; font-weight: 600; }

/* spectrum color picker style*/
.sp-picker-container { width: 150px; padding-bottom: 0; }
.sp-container button.sp-choose { background-color: var(--primary); }

/* 협력점 상세보기 */
.team_v_badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.team_v_badge_on { background: #e6f7ee; color: #1a9e5a; }
.team_v_badge_off { background: #f5f5f5; color: #999; }
.team_v_file_link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; text-decoration: none; padding: 4px 0; }
.team_v_file_link:hover { color: var(--primary); }
.team_v_file_size { color: #999; font-size: 12px; }

/* 협력점 정보 박스 */
.team_detail_td {border-bottom: 1px solid #eee;padding: 10px 5px;text-align: center;}
.team_detail_info_box { height:80px; display: flex; justify-content: space-between; align-items: center; padding: 16px 30px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid var(--primary); margin: 16px 0px; border-radius: 8px; }
.team_detail_info_left { display: flex; align-items: center; gap: 10px; }
.team_detail_info_left i { color: var(--primary); font-size: 20px; }
.team_detail_name_header { font-size: 17px; font-weight: 600; color: var(--primary); }
.team_detail_name_header_phone { font-size: 17px; color: #333; letter-spacing: 0px; }
.team_detail_info_right { display: flex; align-items: center; gap: 15px; }
.team_detail_info_right .line_col { width: 1px; height: 18px; background-color: #ccc; flex-shrink: 0; }
.team_detail_meta { font-size: 13px; color: #333; }
.team_detail_contract_box { display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 30px; padding: 10px 28px; background: #fff; }
.team_detail_contract_label { font-size: 12px; color: var(--primary); font-weight: 600; }
.team_detail_meta_box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #E0F2F7; border-radius: 8px; padding: 10px 14px; }
.team_detail_meta_inflow { font-size: 15px; color: #333; }
.team_detail_meta_product_badge { background: #fff; border-radius: 20px; padding: 4px 12px; font-size: 13px; color: #333; white-space: nowrap; }
.team_detail_meta_product_badge .badge_txt { color: var(--primary); font-weight: 600; }
.team_detail_meta_divider { width: 1px; height: 25px; background: #818181; opacity: 20%; }

/* 조직도 */
.group_chart_wrap { flex: 1; min-width: 0; padding: 0 15px; }
.group_toolbar { margin-bottom: 15px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.group_toolbar .btn { padding: 8px 16px; border-radius: 6px; cursor: pointer; border: 1px solid #ddd; }
.group_toolbar .btn.primary_bg { background: #0066cc; color: #fff; border-color: #0066cc; }
.group_canvas_container { min-height: 400px; overflow: auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; background: #fafafa; display: flex; flex-direction: column; align-items: center; }
.group_canvas_inner { display: flex; align-items: flex-start; position: relative; }
.group_canvas { flex: 1; min-width: 0; min-height: 360px; }
.group-node { padding: 0; background: #fff; border: 1px solid #ccc; border-radius: 8px; min-width: 180px; position: relative; font-size: 15px; overflow: hidden; }
.group-node-body { display: flex; flex-direction: column; }
.group_chart_wrap .orgchart .node { padding: 10px; }
.group_chart_wrap .orgchart .node > .title,
.group_chart_wrap .orgchart .node > .content { display: none; }
.group_chart_wrap .orgchart .node > .group-node { display: block; }
.group-node.group-drop-target,
.group_chart_wrap .orgchart .node:has(.group-drop-target) { cursor: grab; user-select: none; }
.group-node.group-drop-target:active,
.group_chart_wrap .orgchart .node:has(.group-drop-target):active { cursor: grabbing; }
.group-node-actions button, .group-node-actions a { cursor: pointer; }
.group-node-header { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 18px; }
.group-node-actions { display: flex; justify-content: flex-end; gap: 2px; }
.group-node-actions button { border: none; background: none; cursor: pointer; padding: 4px 6px; font-size: 14px; color: #666; }
.group-node-actions button:hover { color:var(--primary) }
.group-node-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.group-node-title { font-size: 15px; font-weight: 600; line-height: 1.4; word-break: break-word; width: 100%; }
.group-node-employees { padding: 10px 18px; background: #f8f9fa; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.group-emp-chip { font-size: 14px; padding: 5px 10px; background: #e8f4fd; border-radius: 6px; line-height: 1.3; border:1px solid #d8d8d8}
.group_chart_wrap .orgchart .node .verticalEdge,
.group_chart_wrap .orgchart .node .horizontalEdge,
.group_chart_wrap .orgchart .node .toggleBtn { display: none !important; }
.group_chart_wrap .orgchart { margin: 0 auto; }
.group_chart_wrap .orgchart .nodes { margin: 0 auto; }
.group_chart_wrap .orgchart { background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent) 10%, transparent 10%), linear-gradient(color-mix(in srgb, var(--primary) 15%, transparent) 10%, transparent 10%); }
.group_chart_wrap .orgchart .verticalNodes > td::before { border-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.group_chart_wrap .orgchart .verticalNodes ul > li::after,
.group_chart_wrap .orgchart .verticalNodes ul > li::before { border-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.group_chart_wrap .orgchart .lines .topLine { border-top-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.group_chart_wrap .orgchart .lines .rightLine { border-right-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.group_chart_wrap .orgchart .lines .leftLine { border-left-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.group_chart_wrap .orgchart .lines .downLine { background-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.group-drop-hover { outline: 3px solidvar(--primary); outline-offset: 2px; }
.group-drag-active .group-drop-target { border-color: var(--primary) }
.group-drag-helper { opacity: 0.9; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.group-drag-helper .group-drop-hint { display: none !important; }
.group-drag-helper .group-node-info { text-align: center; justify-content: center; }
.group-drag-helper .group-node-title { text-align: center; }
.group-drop-hint { display: none; width: 100%; text-align: center; font-size: 12px; font-weight: 600; color: #666; background: #e8f0fa; padding: 4px 8px; border-radius: 4px; margin-top: 6px; }
.group-drag-active .group-drop-hint { display: block; }
.group-dragging .group-drop-hint { display: none !important; }
.group_canvas .no_data_wrap { padding: 60px 20px; }
.gw_employee_list_panel { width: 280px; flex-shrink: 0; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; background: #fff; }
.gw_panel_header { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.gw_panel_title { font-size: 15px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; }
.gw_panel_title i { color: #666;}
.gw_panel_guide { font-size: 12px; color: #666; line-height: 1.5; margin-top: 6px; }
.gw_employee_list_panel .employee_item { padding: 8px 10px; margin-bottom: 6px; background: #f5f5f5; border-radius: 6px; cursor: move; display: flex; justify-content: space-between; align-items: center; }
.gw_employee_list_panel .employee_item:hover { background: #eee; }
.gw_employee_list_panel .employee_item.ui-draggable-dragging { opacity: 0.8; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.gw_employee_manage_btn { margin-top: 10px; display: block; text-align: center; }
.gw_group_panel { flex: 1; min-width: 0; }
.gw_group_wrap { display: flex; gap: 20px; }

/* 결재선 관리 */
.approval_line_name_row { margin-bottom: 20px; }
.approval_line_name_box { display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px; border: 1px solid #eee; border-radius: 8px; background: #f5f7f8; margin-bottom: 16px;}
.approval_line_name_label { min-width: 90px; font-weight: 500; line-height: 35px;}
.approval_line_name_field { flex: 1; }
.approval_line_name_input { max-width: 360px; width: 100%; }
.approval_line_three_sections { display: flex; gap: 20px; min-height: 480px; max-height: 480px; }
.approval_line_section { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.approval_line_left { flex: 4.5 1 0; min-width: 320px; border-radius: 10px; background: #ffffff; border: 1px solid #E5E5E5; }
.approval_line_center { flex: 1.5 1 0; display: flex; flex-direction: column; background: transparent; box-shadow: none; }
.approval_line_right { flex: 4 1 0; min-width: 320px; border-radius: 10px; background: #ffffff; border: 1px solid #E5E5E5; }
.approval_line_dept_tree { padding: 12px; overflow-y: auto; flex: 1; }
.approval_line_write_wrap .dept_tree_item { padding: 6px 8px; cursor: pointer; border-radius: 4px; }
.approval_line_write_wrap .dept_tree_item:hover { background: #EBEBEB; }
.approval_line_write_wrap .dept_tree_item.selected { background: #EBEBEB; }
.approval_line_write_wrap .dept_tree_item .dept_icon { margin-right: 6px; color: #666 }
.approval_line_write_wrap .dept_count_badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); font-size: 11px; font-weight: 600; }
.approval_line_search { padding: 15px 15px 0 15px; }
.approval_line_search_row { display: flex; align-items: center; gap: 8px; }
.approval_line_search_row .search_icon_wrap { flex: 1; min-width: 0; display: flex; align-items: center; border-radius: 50px; background: #F0F1F7; padding: 0 16px 0 14px; }
.approval_line_search_row .search_icon_wrap .txt_box { flex: 1; min-width: 0; border: none; background: transparent; padding: 8px 0; }
.approval_line_search_row .search_icon_wrap .txt_box::placeholder { color: #ccc; }
.approval_line_search_row .search_icon_wrap i { flex-shrink: 0; margin-left: 8px; font-size: 14px; color: #ccc; }
.approval_select_all_row { padding: 6px 12px; border-bottom: 1px solid #E5E5E5; padding-bottom: 10px;}
.approval_check_all_wrap { display: inline-flex; align-items: center; gap: 6px; height: 20px; }
.approval_check_all_wrap label { display: inline-flex; align-items: center; gap: 10px; height: 20px; margin: 0; }
.approval_check_all_wrap label i { font-size: 19px; line-height: 1; display: inline-flex; align-items: center; }
.approval_check_all_text { font-size: 14px; color: #666; line-height: 1; display: inline-flex; align-items: center; height: 20px;} 
.approval_left_split { display: flex; flex: 1; min-height: 0; }
.approval_left_dept { flex: 0 0 40%; padding: 8px 8px 8px 12px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.approval_left_dept::after { content: ''; position: absolute; right: 0; top: 3%; bottom: 3%; width: 1px; background: #E5E5E5; }
.approval_left_members { flex: 0 0 60%; padding: 8px 12px 8px 8px; display: flex; flex-direction: column; min-width: 0; }
.approval_line_target_list { margin-top: 10px; padding: 0 0 8px 0; overflow-y: auto; flex: 1; max-height: 320px; }
.approval_target_item { display: flex; align-items: center; gap: 8px; padding: 3px 12px; cursor: pointer; min-width: 0; }
.approval_target_item:hover { background: #f8fafc; }
.approval_target_check_wrap { display: inline-flex; align-items: center; }
.approval_target_check_wrap input[type="checkbox"] { display: none; }
.approval_target_text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.approval_target_name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval_move_buttons { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; padding: 12px; }
.approval_move_btn { width: 100%; height: 40px; border-radius: 6px; border: 1px solid #E5E5E5; background: #F2F2F2; font-weight: 500; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; text-align: left; }
.approval_move_btn i {color:#999}
.approval_move_btn:hover { opacity: 0.85; }
.approval_line_roles { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.approval_line_roles_single { min-height: 80px; border-radius: 6px; border: 1px solid #E5E5E5; background: #ffffff; padding: 20px 15px; gap: 4px; align-items: stretch; overflow-y: auto; }
.approval_role_label { font-weight: 500; color: #333; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; background: #f5f7fa; font-size: 13px; }
.approval_role_chips { min-height: 80px; border-radius: 6px; border: 1px solid #E5E5E5; background: #ffffff; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; flex: 1; overflow-y: auto; }
.approval_chip { display: flex; align-items: center; padding: 6px 8px; background: transparent; border-radius: 4px; border: none; color: #333; cursor: grab; }
.approval_chip:active { cursor: grabbing; }
.approval_chip .approval_chip_round { font-size: 11px; color: #888; margin-right: 6px; flex-shrink: 0; }
.approval_chip .approval_chip_text { flex: 1; min-width: 0; text-align: left; display: flex; align-items: center; }
.approval_chip .approval_chip_role { color: #666; font-weight: 600; margin-right: 4px; flex-shrink: 0; }
.approval_chip .chip_remove { margin-left: auto; cursor: pointer; color: #666; flex-shrink: 0; }
.approval_chip .chip_remove:hover { opacity: 0.85; }
.approval_chip_placeholder { height: 30px; background: #f0f9fa; border: 1px dashed var(--primary); border-radius: 4px; opacity: 0.6; }
.approval_line_separator { display: flex; align-items: center; padding: 6px 8px; cursor: grab; }
.approval_line_separator:active { cursor: grabbing; }
.approval_separator_line { flex: 1; border-bottom: 1px dashed #ccc; margin-right: 8px; min-height: 0; }
.approval_line_separator .chip_remove { margin-left: auto; cursor: pointer; color: #666; flex-shrink: 0; }
.approval_line_separator .chip_remove:hover { opacity: 0.85; }
.approval_line_footer { margin-top: 20px; }
.approval_favorite_check { display: inline-flex; align-items: center; gap: 6px; }
.approval_line_write_wrap .no_data { color: #999; padding: 12px; }

/* 결재관리 등록 */
.approval_write_layout { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 24px; align-items: stretch; width: 100%; margin-top: 0; }
.approval_write_layout .approval_write_left { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
.approval_write_layout .approval_write_right { flex: 0 0 420px; width: 420px; min-width: 420px; display: flex; flex-direction: column; }
.approval_write_layout .approval_write_left .write_table { flex: 1; min-height: 0; border: 1px solid #E1E1E1; border-radius: 10px; background: #fff; padding: 24px; box-sizing: border-box; }
.approval_write_layout .approval_write_left .write_title { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #E8E8E8; }
.approval_write_layout .approval_write_title {float:left; margin-right:30px; line-height:35px; font-size: 16px; font-weight: 600; color: #333; }
.approval_write_layout .approval_form_title {font-size:35px; text-align: center; margin-bottom:50px;}
.approval_write_layout .approval_form_inner {float:left; width:100%; padding: 20px 100px;}
.approval_line_setting_box { border: 1px solid #E1E1E1; border-radius: 10px; background: #F5F5F5; padding: 24px; box-sizing: border-box; height: 100%; min-height: 280px; }
.approval_line_setting_inner { width:100%; float:left; padding: 0; margin-bottom:20px }
.approval_line_select_btn { float:right; border-radius: 5px; }
.approval_line_select_box {margin-top:20px;}
.approval_line_empty_txt { width:100%; float:left; color: #999; font-size: 13px; margin: 16px 0; line-height: 1.5; }
.approval_line_member_list { width:100%; float:left; margin-top: 16px; min-height: 120px; position: relative; padding-left: 4px; }
.approval_line_member_list.has_items::before { content: ''; position: absolute; left: 18px; top: 0px; bottom: 0px; width: 2px; background: #E0E0E0; border-radius: 1px; z-index: 0; }
.approval_line_member_list .member_item { display: flex; align-items: stretch; gap: 0; margin-bottom: 10px; position: relative; z-index: 1; min-height: 56px; }
.approval_line_member_list .member_item:last-child { margin-bottom: 0; }
.approval_line_member_list .member_item_seq { width: 40px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; padding-right: 10px; }
.approval_line_member_list .member_num { width: 30px; height: 30px; border-radius: 50%; background: #FFF; border:2px solid #999999; color: #999999; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.approval_line_member_list .member_item_card { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #E5E5E5; border-radius: 8px; background: #FAFBFC; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.approval_line_member_list .member_role { font-size: 12px; color: #666; font-weight: 500; }
.approval_line_member_list .member_info { font-size: 14px; min-width: 0; }
.approval_line_member_list .member_info .name { font-weight: 500; color: #333; }
.approval_line_member_list .member_info .sub { color: #666; font-size: 12px; margin-left: 4px; }
.approval_line_member_list .member_info .dept { display: block; font-size: 12px; color: #888; margin-top: 2px; }
.approval_write_layout .leave_type_half_wrap {float:left; line-height:35px;}
.approval_write_layout .approval_unit {display:flex; float:left; line-height:35px; margin-left:10px}

/* 급여명세서 */
.salary_section .value {padding:20px 20px !important}
.salary_label { display: inline-block; width: 120px; text-align: left; vertical-align: middle; }
.salary_row { margin-bottom:10px; }
.salary_label_input{ width:120px !important; }
.salary_total_box { background: #f5f5f5; margin-top: 20px; padding: 20px 18px; border-radius: 10px;  display: flex; align-items: center; justify-content: flex-start; gap: 16px; font-size: 13px; color: #333; }
.salary_total_right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.salary_total_desc { color: #555; }
.salary_total_label { font-weight: 600; font-size:16px; }
.salary_total_amount { min-width: 0; padding: 0; border-radius: 0; border: none; background: transparent; text-align: right; font-size: 16px; color: #333; }
.salary_total_unit { font-size: 13px; color: #666; }
.salary_total_box_net {background: color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary);}

.salary_wrap {padding: 30px; max-width:800px; margin: 20px auto 0;}
.salary_report_action_bar { margin: 0 auto 0; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #E1E1E1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.salary_report_footer_btn_wrap { max-width:800px;  margin: 20px auto 0; }
.salary_report_footer_btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.salary_report_action_btns { display: flex; align-items: center; gap: 8px; }
.salary_view_report { margin: 0 auto; padding: 25px 40px; background: #fff; color: #333; }
.salary_report_header { position: relative; margin-bottom: 30px; display: flex; justify-content: flex-start; align-items: baseline; gap: 10px; }
.salary_report_title { margin: 0; font-size: 30px; }
.salary_report_period { margin: 0; font-size: 15px; font-weight: 400; color: #555; }
.salary_report_emp { width: 100%; margin-bottom: 30px; border-collapse: collapse; border: 1px solid #E1E1E1; }
.salary_report_emp th { padding: 12px 16px; font-weight: 500; color: #555;  background: #FAFAFA; border: 1px solid #E1E1E1; }
.salary_report_emp td { padding: 12px 16px; border: 1px solid #E1E1E1; }
.salary_report_table { width: 100%; border-collapse: collapse; border: 1px solid #E1E1E1; }
.salary_report_table .salary_report_thead_main th { padding: 12px 14px; font-weight: 600; color: #fff; background: var(--primary); border: 1px solid var(--primary); text-align: center; }
.salary_report_table .salary_report_thead_sub th { padding: 10px 14px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid #E1E1E1; text-align: center; }
.salary_report_table tbody td { padding: 10px 14px; color: #333; border: 1px solid #E1E1E1; background: #fff; }
.salary_report_table tbody td.tar { text-align: right; }
.salary_report_table .salary_report_summary td { font-weight: 600; background: #F8F9FA; }
.salary_report_table .salary_report_net td { font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

/* 결재 상세 보고서 (approvalV) */
.approval_view_wrap { padding: 30px; max-width: 800px; margin: 20px auto 0; }
.approval_view_report .approval_report_info th { width: 15%; }
.approval_view_report .approval_report_form_data { margin-bottom: 20px; }
.approval_view_report .approval_report_form_data .label_cell { background: #FAFAFA; font-weight: 500; color: #555; }
.approval_report_files_wrap.exclude-from-pdf { margin-top: 0px; padding: 0px 40px; background: #fff; }

/* 설정 뷰 색상 프리뷰 */
.config_color_preview {display: inline-flex;align-items: center;gap: 8px;}
.config_color_swatch {display: inline-block;width:22px; height: 22px;border-radius: 4px; border: 1px solid #ddd;}
.config_logo_preview img.logo_main {max-width:200px; max-height:40px; border-radius: 4px; background:#fff; }

.config_logo_preview img.logo_favicon {width:32px; height: 32px; border-radius: 4px; background:#fff; object-fit:contain;}