@charset "utf-8";

@font-face {
    font-family: 'NotoSansKR-Medium';
    src: url('../fonts/NotoSansKR-Medium.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

/*=========================================================================================================
* common
=========================================================================================================*/
*, *:after, *:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

    *:focus {
        outline: none;
    }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 100%;
    -webkit-text-size-adjust: none;
}

body {
    font-weight: 100;
    font-family: 'NotoSansKR-Medium', sans-serif;
}

ul, li, ol {
    list-style: none;
}

fieldset {
    border: none;
}

caption, legend {
    visibility: hidden;
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

a {
    text-decoration: none;
    outline: none;
}

    a:link, a:active, a:visited {
        color: #fff;
        text-decoration: none;
    }

img {
    border: 0;
    vertical-align: top;
}

table {
    border-collapse: collapse;
}

em, address {
    font-style: normal;
}

#skipnavi, .hidden {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
}

a {
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

    a:visited, a:hover, a:active, a:focus {
        background: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
    }

body.dv_mob {
    overflow: hidden;
    overscroll-behavior-y: none;
}


/*=========================================================================================================
* blackBoard
=========================================================================================================*/
.sub {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

    .sub.on {
        opacity: 1;
        top: 0;
        pointer-events: auto;
        transition: z-index 0s, opacity .5s, top .5s, background-color .3s .3s;
        /*margin-top: 100px;*/
    }

/*.blackBoard {
    padding-bottom: 40px;
}*/

.blackBoard .in {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* toolbox */
.blackBoard .boardArea {
    position: absolute;
    left: 0px;
    top: 100px; /*그리기 영역에서 헤더 제외하기 위해*/
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
}

    .blackBoard .boardArea .draw_svg {
        overflow: visible;
        pointer-events: none;
        width: 100%;
        height: 100%;
        transform: scale(1);
        display: inline-block;
    }

    .blackBoard .boardArea .eraser {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 1px solid rgba(0, 0, 0, 0.2);
        position: absolute;
        transform: translate(-50%,-50%);
        pointer-events: none;
        opacity: 0;
    }

    .blackBoard .boardArea .imgcase {
        position: absolute;
        user-select: none;
    }

        .blackBoard .boardArea .imgcase img {
            pointer-events: none;
            width: 100%;
            height: 100%;
        }

    .blackBoard .boardArea.open {
        pointer-events: auto;
    }

        .blackBoard .boardArea.open .draw_svg,
        .blackBoard .boardArea.open .sjx-svg-wrapper {
            pointer-events: auto;
        }

            .blackBoard .boardArea.open .draw_svg path {
                pointer-events: auto;
            }

    .blackBoard .boardArea.off {
        display: none;
    }

    .blackBoard .boardArea.pen {
        cursor: url("../images/board/blackBoard_cursor_pen.png") 0 30, auto;
    }

    .blackBoard .boardArea.highlight {
        cursor: url("../images/board/blackBoard_cursor_highlight.png") 0 30, auto;
    }

    .blackBoard .boardArea.erase {
        cursor: url("../images/board/blackBoard_cursor_eraser.png") 0 30, auto;
    }

/* textBoxArea */
.blackBoard .textBoxArea {
    position: absolute;
    left: 0px;
    top: 100px; /*쓰기 영역에서 헤더 제외하기 위해*/
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 11;
}

    .blackBoard .textBoxArea.open {
        pointer-events: auto;
    }

    .blackBoard .textBoxArea.off {
        display: none;
    }

    .blackBoard .textBoxArea .textCase {
        display: inline-block;
        position: absolute;
        font-size: 0;
        padding: 8px;
        width: 500px;
        /* TS-01-025 */
        /* height: 101px; */
        min-height: 50px; 
        height: auto; 
        overflow: visible;

        left: 110px;
        top: 110px;
        /* TS-01-032 */
        z-index: 1;
        box-sizing: border-box; 
    }
        /* TS-01-032 */
        .blackBoard .textBoxArea .textCase.active {
            z-index: 999;
        }
        
        /* TS-01-025 */
        .blackBoard .textBoxArea .textCase textarea {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding-top:    6px;
            padding-left:   6px;
            padding-bottom: 10px;
            padding-right:  10px;
            border: none;
            background: transparent;
            overflow: hidden; 
        }
        

        .blackBoard .textBoxArea .textCase:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid #000;
            left: 0px;
            top: 0px;
            pointer-events: none;
        }

        .blackBoard .textBoxArea .textCase.sjx-drag {
            pointer-events: none;
        }

            .blackBoard .textBoxArea .textCase.sjx-drag:after {
                content: none;
            }

    .blackBoard .textBoxArea .textBox {
        cursor: pointer;
        resize: none;
        display: inline-block;
        width: calc(100% - 16px);
        
        /* TS-01-025 */
        /* height: 164px; */
        height: auto;
        min-height: 50px; 

        border: none;
        
        /* 수정 (추가) */
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 35px;
        
        position: absolute;
        background-color: rgba(0, 0, 0, 0);
        text-align: left;
        font-size: 25px;

        /* TS-02 */
        /* 줄바꿈(개행) 유지하기 */
        white-space: pre-wrap;    
        word-break: break-word;     /* 긴 단어가 박스를 벗어나지 않도록 */
    }

        .blackBoard .textBoxArea .textBox::-webkit-scrollbar {
            width: 0;
        }

    .blackBoard .textBoxArea.select {
        /* cursor: url("../images/board/blackBoard_cursor_select.png") 0 30, auto; */
        cursor: url("../images/board/blackBoard_cursor_select.png") 0 0, auto;
    }

.blackBoard .fBtnarea {
    opacity: 0;
    padding: 10px 3px;
    width: 80px;
    height: 260px;
    position: absolute;
    background: url('../images/board/common_tool_bg.png') no-repeat center center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

    .blackBoard .fBtnarea li {
        position: relative;
        height: 70px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .blackBoard .fBtnarea li em {
            display: inline-block;
            width: 57px;
            height: 57px;
            cursor: pointer;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .blackBoard .fBtnarea li span {
            opacity: 0;
            width: 93px;
            height: 39px;
            font-size: 18px;
            color: #fff;
            line-height: 39px;
            letter-spacing: -0.025em;
            white-space: nowrap;
            border-radius: 8px;
            background: #303030;
            position: absolute;
            top: 50%;
            left: -115px;
            transform: translateY(-50%);
            text-align: center;
            cursor: default;
        }





        /* 1번째 버튼 (연필) */
        .blackBoard .fBtnarea li:nth-child(1) em {
            background: url('../images/board/common_tool_btn_pencil_n.png') no-repeat center center;
            background-size: contain;
        }

        .blackBoard .fBtnarea li:nth-child(1):hover em {
            background: url('../images/board/common_tool_btn_pencil_s.png') no-repeat center center;
            background-size: contain;
        }

        /* 2번째 버튼 (텍스트) */
        .blackBoard .fBtnarea li:nth-child(2) em {
            background: url('../images/board/common_tool_btn_text_n.png') no-repeat center center;
            background-size: contain;
        }

        .blackBoard .fBtnarea li:nth-child(2):hover em {
            background: url('../images/board/common_tool_btn_text_s.png') no-repeat center center;
            background-size: contain;
        }

        /* 3번째 버튼 (지우개) */
        .blackBoard .fBtnarea li:nth-child(3) em {
            background: url('../images/board/common_tool_btn_eraser_n.png') no-repeat center center;
            background-size: contain;
        }

        .blackBoard .fBtnarea li:nth-child(3):hover em {
            background: url('../images/board/common_tool_btn_eraser_s.png') no-repeat center center;
            background-size: contain;
        }


        /* 임시 
        .blackBoard .fBtnarea li:nth-child(4) em {
            background: url('../images/board/common_tool_indicator_btn_move_n.png') no-repeat center center;
            background-size: contain;
        }

        .blackBoard .fBtnarea li:nth-child(4):hover em {
            background: url('../images/board/common_tool_indicator_btn_move_s.png') no-repeat center center;
            background-size: contain;
        }
        */


.blackBoard.on .fBtnarea {
    opacity: 1;
    transition: opacity .5s .5s, right .5s .5s;
}

/* 닫기 버튼 */
#closeTargetBtn {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    background: url('../images/board/common_tool_indicator_btn_close_n.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
}

    #closeTargetBtn:hover {
        background: url('../images/board/common_tool_indicator_btn_close_s.png') no-repeat center center;
        background-size: contain;
    }

/* 플로팅 버튼 */
#floatingTargetBtn {
    display: none;
    width: 75px;
    height: 76px;
    background: url('../images/board/common_tool_btn_tool_mini_n.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    z-index: 2000;
    position: absolute;
}

    #floatingTargetBtn:hover {
        background: url('../images/board/common_tool_btn_tool_mini_s.png') no-repeat center center;
        background-size: contain;
    }

/* .fBtnarea 위치 조정 - 항상 드래그 영역 중앙 정렬 */
#draggableTarget .fBtnarea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* focused 상태에서 .fBtnarea 숨김 해제 (선택적으로 유지 가능) */
#draggableTarget.focused .fBtnarea {
    display: flex; /* 필요 시 강제로 보이게 유지 */
}

/* 드래그 */
#draggableTarget {
    position: absolute;
    width: 103px;
    height: 280px;
    z-index: 12;
    top: 40%;
    right: 30px;
    transform: translateY(-40%);
    transition: opacity .3s, right .3s;
    cursor: move;
    outline: none;
}

    #draggableTarget.focused {
        width: 103px;
        height: 280px;
        background: url('../images/board/common_tool_indicator_drag.png') no-repeat center center;
        background-size: contain;
    }

.blackBoard .boardToolBox {
    opacity: 0;
    pointer-events: none;
    width: 300px;
     /* height 수정 */
    height: 390px;
    position: absolute;
    right: 130px;
    background: rgb(165, 165, 165);
    border-radius: 20px;
    z-index: 1;
    backdrop-filter: blur(5px);
}

    .blackBoard .boardToolBox.on {
        opacity: 1;
        pointer-events: auto;
        transition: opacity .6s .2s;
        z-index: 12;

        
    }

    .blackBoard .boardToolBox.tool1,
    .blackBoard .boardToolBox.tool2 {
        top: 0px;
        right: 110px;
    }

    .blackBoard .boardToolBox .closeBtn {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: url('../images/board/common_tool_indicator_btn_close_n.png') no-repeat center center;
        background-size: contain;
        cursor: pointer;
        position: absolute;
        top: -40px;
        right: 0px;
        border-radius: 100%;
    }

        .blackBoard .boardToolBox .closeBtn:hover {
            background: url('../images/board/common_tool_indicator_btn_close_s.png') no-repeat center center;
            background-size: contain;
        }

    /*.blackBoard .boardToolBox .closeBtn { display:inline-block; width:26px; height:26px; text-align:center; border-radius:100%; background: #000; position:absolute; top:-30px; right:0px; cursor: pointer;}
.blackBoard .boardToolBox .closeBtn em { display:inline-block; margin-top:9px; width:8px; height:8px; background: url('../images/board/flatModel_sup1_close_btn.png') no-repeat center; }
*/
    .blackBoard .boardToolBox .fcheader {
        padding: 0 0 0 24px;
        height: 56px;
        position: Relative;
    }

        .blackBoard .boardToolBox .fcheader p {
            font-size: 25px;
            color: #fff;
            line-height: 70px;
            font-weight: 600;
        }

        .blackBoard .boardToolBox .fcheader .rightbtn {
            position: Absolute;
            top: 20px;
            right: 20px;
        }

            .blackBoard .boardToolBox .fcheader .rightbtn span {
                display: inline-block;
                margin: 0 8px;
                width: 25px;
                height: 24px;
                cursor: pointer;
                vertical-align: top;
            }

                /* 첫 번째 버튼 (보기 토글) 기본 상태 */
                .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(1) {
                    background: url('../images/board/common_toolbox_btn_see_n.png') no-repeat center center;
                    background-size: 25px 24px;
                }

                    /* TS-01-014 | TS-01-030 (hover 제거)*/
                    /*
                    .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(1):hover {
                        background: url('../images/board/common_toolbox_btn_see_s.png') no-repeat center center;
                        background-size: 25px 24px;
                    } 
                    */
                    
                    /* TS-01-014 | TS-01-030 (basic(활성화 아이콘) 추가)*/
                    .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(1).basic{
                        background: url('../images/board/common_toolbox_btn_see_s.png') no-repeat center center;
                        background-size: 25px 24px;
                    }

                    /* on 상태일 때 (선택됨) */
                    .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(1).on {
                        background: url('../images/board/common_toolbox_btn_seeX_s.png') no-repeat center center;
                        background-size: 25px 24px;
                    }

                /* 두 번째 버튼 (보기 토글) 기본 상태(쓰레기통) */
                .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(2) {
                    background: url('../images/board/common_toolbox_btn_trash_n.png') no-repeat center center;
                    background-size: 25px 24px;
                }

                    .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(2):hover {
                        background: url('../images/board/common_toolbox_btn_trash_s.png') no-repeat center center;
                        background-size: 25px 24px;
                    }

                    /* on 상태일 때 (선택됨) */
                    .blackBoard .boardToolBox .fcheader .rightbtn span:nth-child(2).on {
                        background: url('../images/board/common_toolbox_btn_trash_s.png') no-repeat center center;
                        background-size: 25px 24px;
                    }


    .blackBoard .boardToolBox .fccontent {
        padding: 10px;
        margin: 10px 0px;
    }

        .blackBoard .boardToolBox .fccontent ul {
            font-size: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .blackBoard .boardToolBox .fccontent li {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 14px 20px;
            width: 30px;
            /* height 수정 */
            height: 40px;
            cursor: pointer;
            vertical-align: top;
        }

            .blackBoard .boardToolBox .fccontent li span {
                display: inline-block;
                background-repeat: no-repeat;
                background-position: center;
            }

    /* 그리기 도구 */
    /* 연필-기본 */
    .blackBoard .boardToolBox .dwbox li:nth-child(1) span {
        background-image: url('../images/board/common_toolbox_draw_btn_pen_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .dwbox li:nth-child(1):not(.on) span:hover {
            background-image: url('../images/board/common_toolbox_draw_btn_pen_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }

    /* on 상태 */
    .blackBoard .boardToolBox .dwbox li:nth-child(1).on span {
        background-image: url('../images/board/common_toolbox_draw_btn_pen_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 싸인펜-기본 */
    .blackBoard .boardToolBox .dwbox li:nth-child(2) span {
        background-image: url('../images/board/common_toolbox_draw_btn_high_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .dwbox li:nth-child(2):not(.on) span:hover {
            background-image: url('../images/board/common_toolbox_draw_btn_high_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }

    /* on 상태 */
    .blackBoard .boardToolBox .dwbox li:nth-child(2).on span {
        background-image: url('../images/board/common_toolbox_draw_btn_high_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 지우개-기본 */
    .blackBoard .boardToolBox .dwbox li:nth-child(3) span {
        background-image: url('../images/board/common_toolbox_draw_btn_eraser_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .dwbox li:nth-child(3):not(.on) span:hover {
            background-image: url('../images/board/common_toolbox_draw_btn_eraser_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }

    /* on 상태 */
    .blackBoard .boardToolBox .dwbox li:nth-child(3).on span {
        background-image: url('../images/board/common_toolbox_draw_btn_eraser_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 뒤로-기본 */
    .blackBoard .boardToolBox .dwbox li:nth-child(4) span {
        background-image: url('../images/board/common_toolbox_draw_btn_return_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .dwbox li:nth-child(4) span:hover {
            background-image: url('../images/board/common_toolbox_draw_btn_return_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }

    /* on 상태 */
    .blackBoard .boardToolBox .dwbox li:nth-child(4).on span {
        background-image: url('../images/board/common_toolbox_draw_btn_return_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 쓰기 도구 */
    /*.blackBoard .boardToolBox .wrbox li:nth-child(1) span { background-image: url('../images/board/blackBoard_boardToolBox_icobtn5.png');}
    .blackBoard .boardToolBox .wrbox li:nth-child(2) span { background-image: url('../images/board/blackBoard_boardToolBox_icobtn6.png');}
    .blackBoard .boardToolBox .wrbox li:nth-child(3) span { background-image: url('../images/board/blackBoard_boardToolBox_icobtn7.png');}
    .blackBoard .boardToolBox .wrbox li:nth-child(4) span { background-image: url('../images/board/blackBoard_boardToolBox_icobtn8.png');}*/


    /* 화살표-기본 */
    .blackBoard .boardToolBox .wrbox li:nth-child(1) span {
        background-image: url('../images/board/common_toolbox_btn_coser_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .wrbox li:nth-child(1) span:hover {
            background-image: url('../images/board/common_toolbox_btn_coser_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }
    /* on 상태 */
    .blackBoard .boardToolBox .wrbox li:nth-child(1).on span {
        background-image: url('../images/board/common_toolbox_btn_coser_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 박스-기본 */
    .blackBoard .boardToolBox .wrbox li:nth-child(2) span {
        background-image: url('../images/board/common_toolbox_btn_text_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .wrbox li:nth-child(2) span:hover {
            background-image: url('../images/board/common_toolbox_btn_text_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }
    /* on 상태 */
    .blackBoard .boardToolBox .wrbox li:nth-child(2).on span {
        background-image: url('../images/board/common_toolbox_btn_text_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 색채움 박스-기본 */
    .blackBoard .boardToolBox .wrbox li:nth-child(3) span {
        background-image: url('../images/board/common_toolbox_btn_boxcolor_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .wrbox li:nth-child(3) span:hover {
            background-image: url('../images/board/common_toolbox_btn_boxcolor_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }
    /* on 상태 */
    .blackBoard .boardToolBox .wrbox li:nth-child(3).on span {
        background-image: url('../images/board/common_toolbox_btn_boxcolor_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    /* 정렬-기본 */
    .blackBoard .boardToolBox .wrbox li:nth-child(4) span {
        background-image: url('../images/board/common_toolbox_btn_array_L_n.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* 37x37에 맞게 조정 */
        width: 37px;
        height: 37px;
        /* 부드러운 전환 효과 */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .blackBoard .boardToolBox .wrbox li:nth-child(4) span:hover {
            background-image: url('../images/board/common_toolbox_btn_array_L_s.png');
            transform: scale(1.05); /* 약간 확대 */
        }
    /* on 상태 */
    .blackBoard .boardToolBox .wrbox li:nth-child(4).on span {
        background-image: url('../images/board/common_toolbox_btn_array_L_s.png');
        opacity: 1;
        transform: scale(1.5); /* 더 확대 */
    }

    .blackBoard .boardToolBox .wrbox li.txtalign {
        opacity: 1;
    }

        .blackBoard .boardToolBox .wrbox li.txtalign.right span {
            background-image: url('../images/board/common_toolbox_btn_array_R_s.png');
        }

        .blackBoard .boardToolBox .wrbox li.txtalign.center span {
            background-image: url('../images/board/common_toolbox_btn_array_M_s.png');
        }

    .blackBoard .boardToolBox .sizebox {
        margin: 15px 0px;
    }

        .blackBoard .boardToolBox .sizebox li {
            cursor: default;
            opacity: 1;
        }

        .blackBoard .boardToolBox .sizebox.off,
        .blackBoard .boardToolBox .color.off {
            opacity: 0.4;
            pointer-events: none;
        }

        .blackBoard .boardToolBox .sizebox li.width_picker span {
            width: 4px;
            height: 4px;
            border-radius: 100%;
            background: #fff;
        }

        .blackBoard .boardToolBox .sizebox li.width_num span {
            width: auto;
            height: auto;
            font-size: 25px;
            color: #fff;
            line-height: 100%;
            letter-spacing: -0.025em;
        }

        .blackBoard .boardToolBox .sizebox li.pen_size {
            width: 140px;
        }

            .blackBoard .boardToolBox .sizebox li.pen_size .barbox {
                width: 112px;
                height: 20px;
                position: Relative;
            }

                .blackBoard .boardToolBox .sizebox li.pen_size .barbox .cursor {
                    width: 20px;
                    height: 20px;
                    border: 3px solid #fff;
                    background: #ffe600;
                    position: absolute;
                    top: 0;
                    left: 10%;
                    transform: translateX(-50%);
                    border-radius: 100%;
                    cursor: pointer;
                    z-index: 1;
                }

                .blackBoard .boardToolBox .sizebox li.pen_size .barbox .bar {
                       margin-top: 9px;
                    width: 10%;
                    /* height: 1px; */
                    height: 2px;
                    background: rgba(255,255,255,1);
                    position: relative;
                }

                .blackBoard .boardToolBox .sizebox li.pen_size .barbox:after {
                    content: '';
                    display: inline-block;
                    width: 100%;
                    height: 1px;
                    position: Absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    background: rgba(255,255,255,0.3)
                }

    .blackBoard .boardToolBox .color li {
        opacity: 1;
    }

        .blackBoard .boardToolBox .color li span {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            position: relative;
        }

            .blackBoard .boardToolBox .color li span:after {
                content: '';
                display: none;
                width: 50px;
                height: 50px;
                border: 5px solid #ffffff;
                border-radius: 100%;
                position: Absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

        .blackBoard .boardToolBox .color li.on span:after {
            display: inline-block;
        }

        .blackBoard .boardToolBox .color li:nth-child(1) span {
            background-color: #000;
        }

        .blackBoard .boardToolBox .color li:nth-child(2) span {
            background-color: #fff;
        }

        .blackBoard .boardToolBox .color li:nth-child(3) span {
            background-color: #de0000;
        }

        .blackBoard .boardToolBox .color li:nth-child(4) span {
            background-color: #fdb300;
        }

        .blackBoard .boardToolBox .color li:nth-child(5) span {
            background-color: #1684f5;
        }

        .blackBoard .boardToolBox .color li:nth-child(6) span {
            background-color: #24c0e0;
        }

        .blackBoard .boardToolBox .color li:nth-child(7) span {
            background-color: #6000ca;
        }

        .blackBoard .boardToolBox .color li:nth-child(8) span {
            background-color: #91cf36;
        }

    .blackBoard .boardToolBox .fccontent li:hover {
        opacity: 1;
    }

.blackBoard .fBtnarea li em:hover + span {
    opacity: 1;
    right: 100px;
}

.blackBoard .fBtnarea li.on em:hover + span {
    opacity: 0;
    right: 35px;
}

.blackBoard .fBtnarea li em:hover + span:after {
    opacity: 1;
    right: -5.4px;
    transition: opacity .3s .1s, right .3s .1s;
}

.blackBoard .fBtnarea li.on em, .blackBoard .fBtnarea li em:hover {
    opacity: 1;
}

.blackBoard .boardToolBox .fcheader .rightbtn span:hover {
    opacity: 1;
}

/* toolbox_도구 선택박스 */
.blackBoard .sjx-wrapper {
    position: absolute;
    width: 0;
    height: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

.blackBoard .sjx-controls {
    display: inline-block;
    top: 0;
    left: 0;
    z-index: 1;
    border: 2px solid #6034c7;
}

.blackBoard .sjx-hdl {
    /*
    width: 12px;
    height: 12px;
    */
    width: 20px;
    height: 20px;
    border: 2px solid #6034c7;
    background-color: #fff;
}

.blackBoard .sjx-hdl-t {
    /* top: -6px; */
    top: -10px;
}

.blackBoard .sjx-hdl-m {
    /* top: calc(50% - 6px); */
     top: calc(50% - 10px);
}

.blackBoard .sjx-hdl-b {
    /* top: calc(100% - 6px); */
    top: calc(100% - 10px);
}

.blackBoard .sjx-hdl-l {
    /* left: -6px; */
    left: -11px;
}

.blackBoard .sjx-hdl-c {
    /* left: calc(50% - 6px); */
    left: calc(50% - 10px);
}

.blackBoard .sjx-hdl-r {
    /* left: calc(100% - 6px); */
    left: calc(100% - 9px);
}

.blackBoard .sjx-hdl-mc {
    background-color: #00a8ff;
}

.blackBoard .sjx-rotator {
    left: calc(100% + 45px);
    border-radius: 100%;
    cursor: url("../images/board/blackBoard_cursor_sjx_rotate.png") 14 14, auto;
}

.blackBoard .sjx-normal {
    display: inline-block;
    height: 2px;
    background-color: #6034c7;
    left: 100%;
    width: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.blackBoard .sjx-controls, .sjx-hdl, .sjx-normal {
    position: absolute;
    box-sizing: border-box;
}

.blackBoard .sjx-hidden {
    display: none;
}

.blackBoard .sjx-hdl-tl, .sjx-hdl-br, .sjx-svg-hdl-tl, .sjx-svg-hdl-br:hover {
    cursor: nwse-resize;
}

.blackBoard .sjx-hdl-tc, .sjx-hdl-bc, .sjx-svg-hdl-tc, .sjx-svg-hdl-bc:hover {
    cursor: ns-resize;
}

.blackBoard .sjx-hdl-tr, .sjx-hdl-bl, .sjx-svg-hdl-tr, .sjx-svg-hdl-bl:hover {
    cursor: nesw-resize;
}

.blackBoard .sjx-hdl-ml, .sjx-hdl-mr, .sjx-svg-hdl-ml, .sjx-svg-hdl-mr:hover {
    cursor: ew-resize;
}

.sjx-svg-hdl-rotator {
    cursor: url("../images/board/blackBoard_cursor_sjx_rotate.png") 14 14, auto;
}

.blackBoard .sjx-svg-wrapper {
    position: static;
    width: 0;
    height: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

.blackBoard .sjx-controls {
    display: inline-block;
    top: 0;
    left: 0;
    z-index: 1;
    border: 2px solid #6034c7;
}

.draw_svg.menu_mask {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 75%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 75%);
}

.draw_svg.menu_none {
    -webkit-mask-image: none;
    mask-image: none;
}

.textBoxArea.menu_mask {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 75%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 75%);
}

.textBoxArea.menu_none {
    -webkit-mask-image: none;
    mask-image: none;
}


/* TS-02 */

/* 헤더 높이만큼 placeholder 공간 확보 */
.blackBoard .header-placeholder {
  height: 100px; /* 기존 top:100px 공간 확보 */
  width: 100%;
  flex-shrink: 0;
}

/* 그리기/텍스트 영역은 header 제외 후 아래쪽에 배치 */
.blackBoard .blackBoard-content {
  position: relative;
  width: 100%;
  height: calc(100% - 100px); /* header 높이 제외 */
}

/* 기존 영역들의 top 강제 초기화 */
.blackBoard .boardArea,
.blackBoard .textBoxArea {
  top: 0px !important;
}