body{  height: 100dvh; }
body *{
    font-family: 'Pretendard',"Nanum Gothic", "Dotum", "Malgun Gothic","돋움";
}
@media (min-width: 992px) {
    header{ height:64px; }
}
p {margin-bottom: 0!important;}
a{ text-decoration: none; color: #333;}
ul{padding-left: 0!important;margin: 0!important;}
.btn {font-size:14px;}
.form-control {font-size:14px;}
.btn-upload-button {border:solid 1px #3E5FAC;color:#333;}
.btn-upload-button:hover {background:#3E5FAC;color:#fff;border:solid 1px #3E5FAC;font-weight:bold;}
.text-primary {color:#3E5FAC !important;font-weight:bold;}

.all-menu{  height: 100%; text-align: center; cursor: pointer; padding: 0 1.125rem;}
.all-menu:after{ content: ""; position: absolute; top: 18px; right: 0;height: 30px;width: 1px; background: #dee2e6; }

main .left-menu .col-resize{ position: absolute; display: inline-block; width: 15px; height: 82px; top: calc( 50% - 32px ); left:447px;cursor: col-resize; _background-color: transparent;z-index: 96 }

.contents-wrap{ display: flex; align-items: stretch; height: calc(100% - 64px); }
.contents-wrap .icon-menu{ }
.contents-wrap .icon-menu li{ display: flex; align-items: center; justify-content: center; height: 67px; width: 67px; }
.contents-wrap .icon-menu li > div{ display: flex; flex-direction: column; align-items: center;justify-content: center;font-size: 13px;width: 54px; height: 54px; padding-top: .25rem;}
.contents-wrap .icon-menu li > div.active{ background-color:rgb(242, 249, 255); border-radius: 5px;}
.contents-wrap .icon-menu li > div.active i {}
.contents-wrap .icon-menu li > div > span{ margin-top: .25rem; }
.contents-wrap .icon-menu li > div > i {font-size: 1.25rem;color: #3E5FAC;}
.contents-wrap .contents-menu-wrap{ width: 380px; }
.contents-wrap .contents-menu-wrap.wrap-disable{ display: none!important; }
.contents-wrap .contents-menu-ele {position:relative;}
.contents-wrap .contents-menu-ele .overlay-func{ background:rgba(0,0,0,0.7);position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:999;display:none;}
.contents-wrap .contents-menu-wrap .overlay-func{ background:rgba(0,0,0,0.7);position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:999;display:none;}
.crop-ui-btn {width:40px;height:40px;display:flex;align-items: center;justify-content: center;background:#fff;color:#333;font-size:20px;border:solid 1px #ddd;border-radius:5px;}


.contents-menu-wrap .icon-magnifying{ top: 10px; left: 14px; color: #aaa; }
.contents-menu-wrap .icon-text-cancel { top: 10px; right: 14px; color: #aaa;cursor: pointer;}
.image-list { transition: all .25s; }
.image-list .image-list-inner > a { cursor: pointer;}
.contents-list-wrap .template-list-inner > a{cursor: pointer;}
.contents-list-wrap{ margin-bottom: 2rem; }
.contents-list-wrap > button{ display: none; border:1px solid #ddd; border-radius: 100%; padding: 0; margin: 0;position: absolute; top: 54%; background: #fff; height: 20px; width: 20px; align-items: center; justify-content: center;box-shadow: 0 0 1px #444; transition: .25s; }
.contents-list-wrap > button.image-prev{ left: -7px; font-size: 13px;color: #333; }
.contents-list-wrap > button.image-next{ right:-9px; font-size: 13px;color: #333;}
.contents-list-wrap:hover > button{ display: flex!important; transition: .25s; }
.icon-menu-wrap > ul > li > div{ cursor: pointer }
.justified-gallery > a {background-color:#ddd!important;border-radius: 10px;}
.justified-gallery > a > img:hover{ border:none!important; ; }
.justified-gallery > a > img{ border:none!important; ; }

/* scroll css */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #fff!important;scrollbar-track-color: #fff!important;}
::-webkit-scrollbar{border-radius: 10px;width: 12px;background-color: #ccc!important;}
::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #ccc!important;}

/* 우클릭 팝업 */
.objPopMenu{ position:absolute; z-index:99; display:none; width:170px; background-color:#fff; box-shadow: 3px 3px 3px #777; }
.objPopMenu div {cursor: pointer}

/* canvas 상단 화살표*/
.canvas-wrap{_padding-bottom: 3rem}
.canvas-wrap .canvas-page:first-child .fa-arrow-up {color: #aaa}
.canvas-wrap .canvas-page:last-child .fa-arrow-down {color: #aaa}

/*초기 폰트 로딩 중*/
#objLoading{z-index: 97;position:absolute;width:100%;height:100%;background-color:#000000;filter:Alpha(opacity=60);opacity:0.6;-moz-opacity:0.6;}
.wrapProgress{z-index:98;position:absolute;width:600px;height:80px;background-color:#fff;border-radius:10px !important;display:none;}
.ui-widget-header{color:#000!important;background:none!important;border:0!important;font-weight:bold!important;}
.progress-label{color:#9b4fff;}
.ui-progressbar{height:12px;margin-top:10px;}
.ui-slider-horizontal{height:1px;}
.ui-slider-horizontal .ui-slider-handle{top:-8px;margin-left:-5px;}
.ui-slider .ui-slider-handle{width:10px;height:15px;}

.object-wrap .oject-menu-title{background: #ddd;border-radius: 10px;padding: .5rem 0;}
.object-wrap .btnAlign{cursor: pointer;}
.objItemTemplate
,.objItemImg
,.objBGImg{cursor: pointer;}

/*저장 중 caution*/
.save-caution-area{position: absolute;height: 100dvh;width: 100dvw;display: flex;justify-content: center;align-items: center;top: 0;left: 0;z-index: 2000;}
.save-caution-area .save-caution-bg{background-color: rgba(0,0,0,0.6);height: 100%;width: 100%;position: absolute;top: 0;left: 0; }
.save-caution-area .save-caution-wrap{width: 520px; display: flex;z-index: 2001;align-items: center;gap: 1rem;background-color: #fff;justify-content: center;flex-direction: column;border-radius: 10px;padding: 2rem 3rem;box-shadow: 0 1rem 1rem rgba(255, 255, 255, 0.15);}
.save-caution-area .save-caution-wrap h3{font-weight: bold}
.save-caution-area .save-caution-wrap div.button-wrap{width: 100%;display: flex;justify-content: space-between;margin-top: 1rem;}
.save-caution-area .save-caution-wrap div.button-wrap button{width: 48%;font-weight: bold;padding-top: 1rem;padding-bottom: 1rem;}
.save-caution-area .save-caution-wrap div.button-wrap button.curr-copy{background-color: #ffe1e3;color: #fe7e8d;}
.save-caution-area .save-caution-wrap div.button-wrap button.load-recent-data{background-color: #fe7e8d;color: #fff;}

.btn-black {
    border-radius: 0!important;
    --bs-btn-color: #fff;
    --bs-btn-bg: #211714;
    --bs-btn-border-color: #211714;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #231815;
    --bs-btn-hover-border-color: #231815;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #211714;
    --bs-btn-active-border-color: #211714;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #231815;
    --bs-btn-disabled-border-color: #231815;
}
/*나의 업로드 삭제*/
.myimg-delete{
    display: inline-block;margin:.25rem;z-index: 999;position: relative;float: right;cursor: pointer;
}

/* ppt 다운로드 */
.ppt-container {
    display:none;
    position:absolute;
    top:54px;
    right:20px;
    background:rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
    z-index:999999;
    border-radius:20px;
}

.ppt-container .inner {width:320px;box-sizing:border-box;background:#fff;padding:20px;border-radius:20px;box-shadow:4px 3px 2px #ccc;}
.ppt-container .inner .header {margin-bottom:15px;font-size:15px;font-weight:bold;display:block;height:40px;border-bottom:solid 1px #eee;position:relative;}
.ppt-container .inner .header .btn-ppt-close {position:absolute;right:10px;top:-5px;font-size:20px;}
.ppt-container .inner .box {background:#f8f8f8;border-radius:5px;font-size:12px;max-height:240px;overflow-y:auto;padding:10px;border:solid 1px #eee;}
.ppt-container .inner .box .txt + .txt {margin-top:10px;}
.ppt-container .inner .box .txt span {text-decoration: underline;color:#000;}
.ppt-container .inner .btn-dwn {width:100%;height:38px;border-radius:10px;background:#0dcaf0;color:#fff;display:flex;align-items: center;justify-content: center;margin-top:15px;font-size:14px;font-weight:bold;}
.ppt-container .inner .free_download {margin-top:15px;font-size:14px;border:solid 1px #eee;border-radius:5px;color:#121212;}
.ppt-container .inner .free_download a {background:#fff;border-radius:10px;padding:10px;display:block;}
.ppt-container .inner .free_download div {display:flex;align-items: center;gap:8px;}
.ppt-container .inner .free_download div .ppt_cnt {margin-left:auto;background:#d8f7ff;color:#333;padding:3px 8px;border-radius:8px;font-size:13px;font-weight:bold;}
.ppt-container .inner .free_download .guide {color:#999;padding-left:26px;margin-top:3px;}


.btn-icon-save {background:#eee;border-radius:5px;padding:5px;margin-left:5px;width:42px;height:34px;color:#454545;display:inline-flex;align-items: center;justify-content: center;}

/* Toast 컨테이너 */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* Toast 스타일 */
.toast-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 16px 20px;
    min-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.4s ease-out;
    margin-bottom: 10px;
}

.toast-ui.hide {
    animation: slideUp 0.4s ease-in forwards;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.toast-close {
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #333;
}

/* 애니메이션 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}