/* 
  [EDITOR,ZAEMIT,STUDIO] 메뉴트리 스타일 통일 - 250313 jde
  weven_template_real/theme/_admin_style2_new 와 weven_template/theme/_admin_style4_new 경로의 bm.com.tree.css 를 동일하게 해야 함
  (해당 css 파일 수정 시, 전체복사하여 붙여넣기)
*/


/* === 팝업 === */

.tree_pop_wrap{ height: 100%; background-color: #fff; border-radius: 5px; overflow: hidden; }
.tree_pop_con{ display: flex; flex-direction: column; height: 100%; }

/* [URL]webadm/userMenuManage 페이지 (팝업이 아닌 페이지 형태) */
body .wrapper .tree_pop_wrap{ height: calc(100vh - 30px); }
/* 팝업 형태 */
body .wrapper > [data-wv-layout-element="layout-page"] .tree_pop_wrap{ position: fixed; z-index: 9; height: 100%; }


/* header */
.tree_pop_header{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px 10px 10px 28px; border-bottom: 1px solid #e8eef6; }
.tree_pop_header .popup_title{ font-size: 1.4rem; line-height: 2.1rem; font-weight: 700; letter-spacing: -0.02em; }
.tree_pop_header .popup_close_btn > a{ display: inline-block; font-size: 0rem; line-height: 0.0rem; text-indent: -10000px; border-radius: 4px; padding: 20px;
    background-image: url("/weven_service/asset/img/svg/close_FILL0_wght400_GRAD0_opsz20.svg"); background-size: 23px; background-position: center center; background-repeat: no-repeat; }

/* body */
.tree_pop_body{ flex: 1 1 auto; height: 100%; padding: 0; overflow: hidden; border-bottom: 1px solid #e8eef6; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: -0.02em; font-weight: 400; }
/* .tree_pop_body::-webkit-scrollbar{width: 4px; height: 2px;}
.tree_pop_body::-webkit-scrollbar-thumb{background-color: #329ee2;}
.tree_pop_body::-webkit-scrollbar-track{background-color: transparent;} */
.tree_pop_body .board_style_0_wrap{ height: 100%; overflow-y: auto; }
.tree_pop_body .board_style_0_con{ height: 100%; }
.tree_pop_body .board_contents_con .board_contents_inner{ position: relative; padding-top: 30px; padding-bottom: 30px; background-color: transparent; }
.tree_pop_body .board_contents_inner_seperate:not(:last-child){ margin-bottom: 40px; }
/*title*/
.tree_pop_body .board_contents_con .board_contents_inner .contents_title_box{ margin-bottom: 30px; }
.tree_pop_body .board_contents_con .board_contents_inner .contents_title_box .title{ font-size: 1.4rem; line-height: 2.1rem; font-weight: 700; color: #000; }
.tree_pop_body .board_contents_con .board_contents_inner .contents_title_box .desc{ font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; color: #1e1e2d; margin-top: 10px; }
/*left,right scroll*/
.tree_pop_body .board_contents_con .board_contents{ overflow: hidden auto; height: 100%; }
.tree_pop_body .board_contents_con .board_contents::-webkit-scrollbar{ display: block; width: 10px; height: 2px; }
.tree_pop_body .board_contents_con .board_contents::-webkit-scrollbar-thumb{ background-color: #4dadeb; background-clip: padding-box; border: 4px solid transparent; }
.tree_pop_body .board_contents_con .board_contents::-webkit-scrollbar-track{ background-color: transparent; }
/*left*/
.tree_pop_body .board_contents_con .board_contents.left{ background-color: #f7fafd; padding-left: 45px; padding-right: 40px; }
/*right*/
.tree_pop_body .board_contents_con .board_contents.right{ background-color: #fff; padding-left: 40px; padding-right: 45px; }
/*nodata*/
.tree_pop_body .board_contents_con .board_contents_inner .menu_nodata{ display: table; height: 100%; min-height: 200px; padding: 0; font-size:0rem; line-height:0.0rem; border: none; }
.tree_pop_body .board_contents_con .board_contents_inner .nodata_con{ display: table-cell; vertical-align: middle; text-align: center; }
.tree_pop_body .board_contents_con .board_contents_inner .nodata_con .menu_icon{ background-image: url("/weven_service/asset/img/icon_menu.png"); background-repeat: no-repeat; width:30px; height: 30px; margin: 0 auto; }
.tree_pop_body .board_contents_con .board_contents_inner .nodata_con .text{ font-size:1.4rem; line-height:2.0rem; letter-spacing: -0.02em; font-weight: 400; color: #000; padding-top: 15px; }
/*content*/
.tree_pop_body .contents_box .contents{ display: flex; flex-wrap: wrap; gap: 10px 0; width: 100%; }
.tree_pop_body .contents_box .contents:not(:last-child){ margin-bottom: 30px; }
.tree_pop_body .contents .title_con{ display: table-cell; vertical-align: top; width: 110px; padding-top: 8px; }
.tree_pop_body .contents .title{ font-size: 1.4rem; line-height: 2.4rem; letter-spacing: -0.02em; font-weight: 400; color: #313131; }
.tree_pop_body .contents .input_wrap{ max-width: 450px; width: 100%; padding-bottom: 0; }
.tree_pop_body .contents .input_desc{ margin-top: 11px; font-size: 1.2rem; line-height: 1.7rem; letter-spacing: -0.02em; font-weight: 300; color: #8598a5; word-break: keep-all; }
.tree_pop_body .contents#uriWrap .input_desc{ margin-top: 20px; font-weight: 400; color: #000; }
.tree_pop_body .contents .input_wrap .caution{ font-size: inherit; line-height: inherit; font-weight: 700; padding-left: 0; }
.tree_pop_body .contents .input_wrap .caution::before{ content: none; }
.tree_pop_body .contents .input_wrap .select_template_wrap{ flex-wrap: nowrap; }
.tree_pop_body .contents .input_wrap .select_template_wrap .thumbnail_img{ flex-shrink: 0; height: 100px; }
.tree_pop_body .contents .input_wrap .select_template_wrap .template_info .name{ word-break: break-word; }
/*input*/
.tree_pop_body .input_wrap .input_style_0{ position: relative; width: 100%; height: 40px; padding: 0px 17px 1px 14px; font-size: 1.4rem; line-height: 2.1rem; letter-spacing: -0.02em; font-weight: 600; color: #1e1e2d; text-align: left; background-color: #fff; border: 1px solid #dfddf1; border-radius: 4px; box-sizing: border-box; outline: none; -webkit-appearance: none; }
.tree_pop_body .input_wrap .input_style_0:not(:read-only):hover{ border-color: #5a74eb; }
.tree_pop_body .input_wrap .input_style_0:read-only{ background-color: #f8f8f8; cursor: default; }
.tree_pop_body .input_wrap .input_style_0[name="name"]{ padding-right: 90px; }
.tree_pop_body .input_wrap #inputUriWrap .menu_input_style{ width: 268px; }
/*input btn*/
.tree_pop_body .input_btn{ position: absolute; top: 50%; right: 7px; transform: translateY(-50%); padding: 5px; background-color: #5a74eb; border-radius: 3px; font-size: 1.2rem; line-height: 1.7rem; letter-spacing: -0.02em; font-weight: 400; color: #fff; }
.tree_pop_body .input_btn:hover{ background-color: #5f85f1; }
/*select*/
.tree_pop_body .input_wrap .select_style_0_wrap{ display: none; margin-bottom: 11px; }
/*radio*/
.tree_pop_body .input_wrap .uri_wrap{ display: flex; align-items: center; gap: 15px; }
.tree_pop_body .input_wrap .uri_wrap .input_style_0_con{ flex-grow: 1; padding-left: 10px; }
.tree_pop_body .input_wrap .uri_wrap .radio_btn_style_0_con{ padding-right: 0; }
.tree_pop_body .input_wrap .radio_btn_style_0_con .radio_btn_style_0 + label{ padding: 4px 0 2px 33px; font-size: 1.5rem; line-height: 2.1rem; letter-spacing: -0.045em; font-weight: 600; color: #000; word-break: keep-all; position: relative; display: inline-block; vertical-align: top; cursor: pointer; }
.tree_pop_body .input_wrap .radio_btn_style_0_con .radio_btn_style_0 + label:before{ transition: all 0.3s; }
/*toggle*/
.tree_pop_body .input_wrap div[class*=toggle] .toggle--btn{ border-color: #dfddf1; }
.tree_pop_body .input_wrap div[class*=toggle] .toggle--btn:hover{ border-color: #3782f4; }
/*checkbox*/
.tree_pop_body .check_btn_style_0_con .check_btn_style_0 + label{ font-size: 1.5rem; line-height: 2.1rem; letter-spacing: -0.045em; font-weight: 400; color: #000; word-break: keep-all; margin-left: 0; padding-left: 20px; }
.tree_pop_body .check_btn_style_0_con .check_btn_style_0 + label::before{ transition: all 0.3s; }

/* footer */
.tree_pop_footer{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px; }
.tree_pop_footer .apply_exp{ font-size:12px; font-size:1.2rem; line-height:24px; line-height:2.4rem; letter-spacing: -0.01em; font-weight: 500; color: #000000; padding-right: 10px; }
.tree_pop_footer .apply_exp .apply_exp_point{ color: #3782f4; }
/*btn*/
.tree_btn_cancel { display: inline-block; padding: 9px 15px 10px 15px; font-size: 1.4rem; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color: #677a91; background-color: #fff !important; border: 1px solid #dce2f4; border-radius: 4px; overflow: hidden; cursor: pointer; }
.tree_btn_cancel:hover{ font-weight: 600; color: #1e1e2d !important; background-color: #ebf3fe; border-color: #96b8d9; }
.tree_btn_apply{ display: inline-block; padding: 10px 19px 11px 20px; font-size: 1.4rem; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color: #fff !important; background-color: #2d62e4; border: none; border-radius: 4px; overflow: hidden; cursor: pointer; box-sizing: border-box;
    padding: 10px 20px 11px 42px; background-image: url("/weven_service/asset/img/svg/check_24dp_FILL0_wght300_GRAD0_opsz24_white.svg"); background-size: 21px; background-position: left 18px center; background-repeat: no-repeat; }
.tree_btn_apply:hover{ color: #fff !important; background-color: #4775e7; }



/* === 기본 tree === */

[data-wv-comp-tree-menu]{
    --tab_space: 50px;
}
/* 스튜디오 */
form[action*=supply] [data-wv-comp-tree-menu], form[action*=studio] [data-wv-comp-tree-menu]{
    --tab_space: 68px;
}

.tree_menu_con{ padding-top: 30px; padding-left: 68px; }
.tree_menu_con [data-wv-comp-tree-menu].tree_menu{ padding-top: 0; padding-left: 0; }
[data-wv-comp-tree-menu].tree_menu{ position: relative; left:0; top:0; padding-left: 68px; overflow: hidden; }
[data-wv-comp-tree-menu]{ position: relative; left:0; top:0; }
.bm_tree_con{ display: flex; flex-direction: column; }
.bm_tree_con, .bm_tree_con li{ list-style-type: none; }
.bm_tree_con li{ /* clear:both; float:left; */ }
.bm_tree_con.down_con li{ opacity:0.4; }

.bm_tree_con li .label{ display: flex; align-items: center; justify-content: space-between; position: relative; width: 260px; min-height: 43px; padding:9px 15px 9px 17px; margin-top: 8px;
    /* float: left; */ border-radius: 7px; outline: 0; cursor: move; box-sizing: border-box; transition: background-color 0.3s; }
.bm_tree_con li.active .label{ box-shadow: inset 0 0 0 2px rgba(8, 27, 93, 0.3); }
.bm_tree_con li .label > span{ display: inline-block; width: calc(100% - 50px); font-size: 1.4rem; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color:#fff; text-align: left; user-select: none; outline: none; }

.bm_tree_con li .tree_item_control{ display: none; font-size: 0; flex-shrink: 0; }
.bm_tree_con li[data-tree-except] .tree_item_control{ display: none; }
.bm_tree_con li:hover .tree_item_control{ display: inline-block; }
.bm_tree_con li .tree_item_control > div{ display: inline-block; width: 20px; height: 20px; opacity: 0.5; vertical-align: middle; background-size: 25px; background-position: center; background-repeat: no-repeat; cursor: pointer; }
.bm_tree_con li .tree_item_control > div:hover{ opacity: 1; }
.bm_tree_con li .tree_item_control .tree_item_add{ background-image: url("/weven_service/asset/img/svg/content_copy_FILL0_wght400_GRAD0_opsz20_white.svg"); background-size: 18px; margin-right: 10px; }
.bm_tree_con li .tree_item_control .tree_item_del{ background-image: url("/weven_service/asset/img/svg/close_FILL0_wght400_GRAD0_opsz20_white.svg"); background-size: 20px; }

.depth_0 { margin-left: 0; }
.depth_1 { margin-left: var(--tab_space); }
.depth_2 { margin-left: calc(var(--tab_space)*2); }
.depth_3 { margin-left: calc(var(--tab_space)*3); }
.depth_4 { margin-left: calc(var(--tab_space)*4); }
.depth_5 { margin-left: calc(var(--tab_space)*5); }
.depth_6 { margin-left: calc(var(--tab_space)*6); }
.depth_7 { margin-left: calc(var(--tab_space)*7); }
.depth_8 { margin-left: calc(var(--tab_space)*8); }
.depth_9 { margin-left: calc(var(--tab_space)*9); }

.bm_tree_con li[class*=depth_] .label{ background-color: #bbd4e4; }
.bm_tree_con li.depth_0 .label{ background-color: #3f87f5; }
.bm_tree_con li.depth_0[data-tree-except] .label{ background-color: #b0bbcb; }
.bm_tree_con li.depth_1 .label{ background-color: #4dadeb; }
.bm_tree_con li.depth_2 .label{ background-color: #a3dbff; }

.bm_tree_con li[class*=depth_].defect .label{ background-color: #f77d7d; }



/* === 예외 === */

/* 블록관리 > 블록 만들기 */
#addBlockTemplate { display: block; height: 100%;}

/* 메뉴관리 > 메뉴 만들기 */
#addMenuTemplate { display: block; height: 100%;}

/* 테마관리 > 편집 > 메뉴 이동 */
#addMenuTemplate.movePage .board_contents_con .board_contents.left { padding: 0 20px; }
#addMenuTemplate.movePage .popup_style_0_con { padding: 0; }
#addMenuTemplate.movePage .popup_body.type_2 { padding: 0; }
#addMenuTemplate.movePage .popup_body.type_2 { padding: 0; }
#addMenuTemplate.movePage .board_contents_con .board_contents_inner { padding: 0; }

/* 테마관리 > 편집 > 메뉴 이동 */
#addMenuTemplate.movePage [data-wv-comp-tree-menu].tree_menu { padding: 0; }
#addMenuTemplate.movePage .bm_tree_con li .label { width: 260px; height: 38px; padding: 7px 15px 8px 17px; margin-top: 5px; }
#addMenuTemplate.movePage .depth_1 { margin-left: 38px; }

/*시작하기*/
.bm_tree_con li .check_btn_style_0_con{position: absolute; top:50%; right:-60px; transform: translateY(-50%); width:100%; height:100%;}
.bm_tree_con li .check_btn_style_0_con .check_btn_style_0 + label{display: block; height: 100%; cursor: pointer;}
.bm_tree_con li .check_btn_style_0_con .check_btn_style_0 + label:before{left: auto; right: 7px; border: 2px solid #7f3ee9; background-color: #fff; }
.bm_tree_con li .edit_btn{ position: absolute; top: 0px; right: -7px; /*transform: translateX(100%);*/ transform: translateX(calc(100% - 0.5px)); background-color: #fff; border: solid 1px #bae6fe; border-radius: 4px; padding: 10px 12px 10px 14px; font-weight: 500;
    /*font-family: 'Carmen Sans';*/ font-size:14px; font-size:1.4rem; line-height:18px; line-height:1.8rem; color: #23b0fc;}
.bm_tree_con li .edit_btn:hover{ color: #fff; background-color: #23b0fc; border-color: #23b0fc;}

[data-wv-comp-tree-menu].tree_menu.type_create_site .bm_tree_con li[data-tree-except]{display: none;}

/* 
.option_container{ position : absolute; z-index: 100; margin-left:140px; margin-top: -25px; font-size:14px; color:#333; line-height:20px; max-height:500px; overflow-y:auto;
    width:350px; height:auto; background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 3px; text-align:left; padding:20px; cursor: auto; }
.option_container .option{ margin: 0 0 20px 0;}
.option_container .option h6{ font-size:16px; color:#000; font-weight:bold; margin:0 0 5px 0; padding:0; }
.option_container .option input[type="text"], .option_container .option select{
    width: 70%; border: 1px solid #ccc; height: 28px; line-height:20px; font-size:14px; padding:2px;
}
.option_container .option input[type="checkbox"] { width:16px; height:16px; float:left; }
.option_container .option input[type="checkbox"], .option_container .option label { cursor:pointer; }
.option_container .option .option_desc { font-size:12px; margin: 5px 0; color:#999; }
 */

[editormode="expert"] [data-wv-comp-tree-menu] .depth_0 { margin-left: 0; }
[editormode="expert"] [data-wv-comp-tree-menu] .depth_1 { margin-left: 30px; width: calc(100% - 30px); }
[editormode="expert"] [data-wv-comp-tree-menu] .depth_2 { margin-left: 60px; width: calc(100% - 60px); }
[editormode="expert"] [data-wv-comp-tree-menu] .depth_1 .label::before, [editormode="expert"] [data-wv-comp-tree-menu] .depth_2 .label::before { content: ''; position: absolute; width: 13px; height: 13px; background-image: url(/weven_service/asset/toolbar/img/expert_tool/tool_link_sub.png); background-repeat: no-repeat; background-position: 0 0; left: -16px; top: 7px; }
[editormode="expert"] [data-wv-comp-tree-menu].tree_menu { padding-top: 0px; padding-left: 0px; }
[editormode="expert"] .bm_tree_con li { width: 100%; }
[editormode="expert"] .bm_tree_con li .label { display: inline-block; width: 100%; height: 33px; font-size: 11px; font-size: 1.1rem; line-height: 17px; line-height: 1.7rem; font-weight: 500; border-radius: 4px; border: 1px solid #d8e3ea; box-sizing: border-box; padding: 7px 9px; background: #fff; margin-top: 5px; position: relative; cursor: pointer; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li.mainpage .tree_item_control { display: inline-block; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li.mainpage .tree_item_control .menu_add_btn { position: absolute; width: 33px; height: 33px; border-radius: 4px; background-image: url(/weven_service/asset/toolbar/img/expert_list/menu_modify_add.png); background-size: 11px; background-position: 11px 11px; background-repeat: no-repeat; right: 0; top: 0; cursor: pointer; margin: 0; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li.mainpage .tree_item_control .menu_add_btn:hover{ background-color: #dee7ea; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li.mainpage .label { background: #fff!important; border-color: transparent; cursor: initial; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li.mainpage .label > span { color: #000!important; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li:not([data-tree-except]) .label { background: #3f87f5; cursor: move; }
[editormode="expert"] .bm_tree_con li .label:hover { border-color: #6a767e; }
/* [editormode="expert"] [data-wv-comp-tree-menu]:not(.editing) .bm_tree_con li .label:hover::before { content: ''; position: absolute; width: 11px; height: 11px; top: 10px; right: 10px; background-image: url(/weven_service/asset/toolbar/img/expert_list/menu_list_modify.png); background-size: 11px; background-repeat: no-repeat; background-position: 0 0; } */
[editormode="expert"] .bm_tree_con li .label > span { color: #000; font-size: 11px; font-size: 1.1rem; line-height: 17px; line-height: 1.7rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li:not([data-tree-except]) .label > span { color: #fff; }
[editormode="expert"] [data-wv-comp-tree-menu].editing .bm_tree_con li .label:hover .tree_item_config { display: none; }
[editormode="expert"] .bm_tree_con li .label:hover .tree_item_config { display: inline-block; border-radius: 3px; }
[editormode="expert"] .tree_item_config:hover { background-color: #dee7ea; }
[editormode="expert"] .tree_item_config { width: 17px; height: 17px; top: 10px; right: 10px; background-image: url(/weven_service/asset/toolbar/img/expert_list/menu_list_modify.png); background-size: 11px; background-repeat: no-repeat; background-position: center; display: none; cursor: pointer; float: right; }
[editormode="expert"] [data-wv-comp-tree-menu]:not(.editing) .bm_tree_con li:hover .tree_item_control { display: none; }
[editormode="expert"] .down_con [data-tree-depth="0"] .label{ width: 197px; }
[editormode="expert"] .down_con [data-tree-depth="1"] .label{ width: 167px; }
[editormode="expert"] .down_con [data-tree-depth="2"] .label{ width: 137px; }
[editormode="expert"] .bm_tree_con li .tree_item_control .tree_item_add { right: 27px; top: 8px; background-image: url(/weven_service/asset/toolbar/img/expert_list/menu_list_modify_copy.png); background-size: 11px; background-position: 2px 2px; background-repeat: no-repeat; margin-right: 5px; }
[editormode="expert"] .bm_tree_con li .tree_item_control .tree_item_del { right: 7px; top: 7px; background-image: url(/weven_service/asset/toolbar/img/expert_list/menu_list_modify_close.png); background-size: 9px; background-position: 4px 2px; background-repeat: no-repeat; }



@media all and (min-width: 992px){
    .tree_pop_body .board_contents_con{ height: 100%; border: none; display: flex; align-items: stretch; background-color: #fff; }
}