/* 
  [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 .caution {
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
}

.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 #inputUriWrap .menu_input_style {
    width: 268px;
}

/*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, .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;
    }
}