@charset "utf-8";

:root {
    --tool-glass-effect-white-border : rgba(255, 255, 255, 0.70);
    --tool-primary-default: #059;
    --tool-primary-dark : #003D6E;
    --tool-primary-darkest : #00173C;
    --tool-neutral-default : #f4f4f4;
    --tool-neutral-dark : #DDD;
    --tool-neutral-darkest : #CCC;
    --tool-primary-bg-light : #DBF0FF;
    --tool-primary-light : #4596D7;
    --tool-warning-default : #FF5E5E;
    --tool-warning-dark : #F53939;
    --tool-warning-darkest : #D41616;
    --tool-secondary-default : #FF5E5E;
    --mono-ddd : #ddd;
    --mono-fa : #fafafa;
    --mono-f4 : #f4f4f4;
    --mono-000 : #000;
    --mono-222 : #222;
    --mono-333 : #333;
    --mono-444 : #444;
    --mono-666 : #666;
    --mono-999 : #999;
    --mono-fff : #fff;
    --mono-bbb : #bbb;
    --mono-ccc : #ccc;
    --mono-eee : #eee;
}
.txt-hidden {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

html {scroll-behavior: none;}
/* body {background-color:var(--primary-color)} */
html ::-webkit-scrollbar {width: 4px; background-color: rgba(32, 32, 32, 0.1);}
html ::-webkit-scrollbar-thumb {background-color: rgba(32, 32, 32, 0.4); border-radius: 12px;}
html ::-webkit-scrollbar-thumb:hover {background-color: rgba(32, 32, 32, 0.8);}
html ::-webkit-scrollbar:horizontal {height: 8px; background-color: rgba(32, 32, 32, 0.1);}
html ::-webkit-scrollbar-thumb:horizontal {background-color: rgba(32, 32, 32, 0.4); border-radius: 12px;}
html ::-webkit-scrollbar-thumb:horizontal:hover {background-color: rgba(32, 32, 32, 0.8);}

/*
min-height:-webkit-fill-available
height: calc(var(--vh, 1vh) * 100);
*/

html,
body {height:100%; min-height:-webkit-fill-available}
body {overscroll-behavior-y: none;}
body {min-width:880px; min-height:670px; overflow:auto;}
#wrap {width:100vw; height: calc(var(--vh, 1vh) * 100); min-width:880px; min-height:670px; display:flex; flex-direction: column; position:relative; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover;}

#header {width:100%; height:44px; display:flex; justify-content: space-between; padding:0 10px; border-bottom: 1px solid rgba(102, 102, 102, 0.20); background-color: rgba(255, 255, 255, 0.50); overflow:hidden; position:relative; z-index: 3001; backdrop-filter: blur(7.5px);}
#header .header-left {display:flex; align-items: center; gap:0 10px;}
#header .header-left .header-title {font-size:16px; font-weight: 700;}
#header .header-left .btn-bookmark {height:24px; padding:0 6px; display:flex; align-items: center; gap:0 6px; color:#666; font-size: 11px; font-weight: 400; line-height: 100%; border-radius: 8px; background: #FFF; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);}
#header .header-left .btn-bookmark i {width:12px; height:12px; display:flex; align-items: center; justify-content: center; border-radius: 3px; border: 1px solid var(--mono-666);}

#header .header-right {}
#header .header-right {display:flex; gap:0 10px; align-items: center;}
#header .header-right .header-username {height:24px; font-size: 12px; font-weight: 400; display: flex; padding: 0 10px 0 14px; justify-content: center; align-items: center; border-radius: 16px; background-color: #FFF; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px);}
#header .header-right .header-username strong {font-size: 12px; font-weight: 700;}
#header .header-right .header-login-btns {display:flex; gap:0 10px;}
#header .header-right .header-login-btns [class^="btn-"] {min-width:60px; height:24px; display:flex; align-items: center; justify-content: center; border-radius: 16px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); color:#fff; font-size: 12px; font-weight: 500;}
#header .header-right .header-login-btns .btn-login {background-color:var(--tool-primary-default);}
#header .header-right .header-login-btns .btn-logout {background-color:#999;}
#header .header-right .header-login-btns .btn-join {border: 1px solid var(--tool-primary-default); background: var(--mono-fff); color: var(--tool-primary-default);}

#contents {flex:1;}

.lesson-tools-area {position: absolute; opacity: 0; transition-property: opacity, transform; transition-duration: .3s, .3s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, .12s; z-index:3000;}
.lesson-tools-area.is-visible {opacity: 1;}
.lesson-tools-area.is-dir-changing {transition-property: opacity; transition-duration: .3s; transition-timing-function: ease-in-out; transition-delay: 0s;}
.lesson-tools-area.fold {transition-delay: 0s, 0s;}

#wrap.dir-top .lesson-tools-area {max-width:calc(100% - 16px); left:50%; top:43px; transform:translate(-50%,0)}
#wrap.dir-top .lesson-tools-area.fold {transform:translate(-50%, -94px)}
#wrap.dir-bottom .lesson-tools-area {max-width:calc(100% - 16px); left:50%; bottom:27px; transform:translate(-50%,0);}
#wrap.dir-bottom .lesson-tools-area.fold {transform:translate(-50%, 100px);}
#wrap.dir-left .lesson-tools-area {left:0; top:50%; transform: translate(0, calc(-50% + 8px));}
#wrap.dir-left .lesson-tools-area.fold {transform: translate(calc(-100% - 1px), calc(-50% + 8px));}
#wrap.dir-right .lesson-tools-area {right:0; top:50%; transform: translate(0, calc(-50% + 8px));}
#wrap.dir-right .lesson-tools-area.fold {transform: translate(calc(100% + 1px), calc(-50% + 8px));}

.lesson-tools-area .lesson-tools-inner {padding:7px; display:flex; border: 1px solid rgba(255, 255, 255, 0.70); background-color:rgba(255, 255, 255, 0.35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px);}
#wrap.dir-top .lesson-tools-area .lesson-tools-inner {height:94px; border-radius: 0 0 20px 20px;}
#wrap.dir-bottom .lesson-tools-area .lesson-tools-inner {border-radius: 20px 20px 0 0;}
#wrap.dir-left .lesson-tools-area .lesson-tools-inner {flex-direction: column; border-radius: 0 20px 20px 0;}
#wrap.dir-right .lesson-tools-area .lesson-tools-inner {flex-direction: column; border-radius: 20px 0 0 20px;}

.lesson-tools-aside {padding:4px 2px 4px 16px; position:relative; display:flex; gap:12px;}
.lesson-tools-aside::before {content:''; width:1px; height:70px; display:block; position:absolute; left:0; top:2px; background-color:rgba(0,0,0,0.15);}

#wrap.dir-top .lesson-tools-aside,
#wrap.dir-bottom .lesson-tools-aside {margin-left:12px;}
#wrap.dir-left .lesson-tools-aside,
#wrap.dir-right .lesson-tools-aside {padding:16px 4px 2px; margin-top:12px; flex-direction: column;}
#wrap.dir-top .lesson-tools-aside::before {}
#wrap.dir-bottom .lesson-tools-aside::before {}
#wrap.dir-left .lesson-tools-aside::before,
#wrap.dir-right .lesson-tools-aside::before {width:70px; height:1px; top:0; left:2px;}

.lesson-swiper-area {position:relative; display:flex;}
#wrap.dir-top .lesson-swiper-area,
#wrap.dir-bottom .lesson-swiper-area {max-width: calc(100% - 218px);}
#wrap.dir-left .lesson-swiper-area,
#wrap.dir-right .lesson-swiper-area {flex-direction: column;}

.lesson-tools-nav {padding:4px; position:relative; display:flex;}
.lesson-tools-nav .swiper-wrapper {}
.lesson-tools-nav .swiper-wrapper .swiper-slide {width:70px;}

#wrap.dir-left .lesson-tools-nav,
#wrap.dir-right .lesson-tools-nav {max-height: calc(100dvh - 376px);}

@media screen and (max-height: 600px) {
    #wrap.dir-left .lesson-tools-nav,
    #wrap.dir-right .lesson-tools-nav {max-height:390px;}
}

/* toggle 버튼 */
.toggle-checkbox {display:flex; align-items: center; justify-content: center;}
.toggle-checkbox input {display: none;}
.toggle-checkbox label {position: relative; display: inline-flex; align-items: center; width: 65px; height: 24px; border-radius:12px; background-color: var(--mono-ddd); cursor: pointer; transition: background 0.25s ease; line-height:24px;}
.toggle-checkbox label::before {content: attr(label-text); position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #666; transition: color 0.25s ease, right 0.25s ease, left 0.25s ease, content 0.25s ease; letter-spacing:-0.24px}
.toggle-checkbox label::after {content: ""; width: 16px; height: 16px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); transition: left 0.25s ease; border-radius: 8px; background-color:#fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);}
.toggle-checkbox input:checked + label {border: 1px solid var(--tool-primary-default); background: var(--tool-primary-default);}
.toggle-checkbox input:checked + label::before {content: attr(label-checked-text); left: 8px; right: auto; color: #fff;}
.toggle-checkbox input:checked + label::after {left: calc(100% - 5px - 16px);}
.toggle-checkbox:has(input:disabled) {opacity:0.5}
.toggle-checkbox input:disabled + label {cursor:not-allowed}

/* ON/OFF용 */
.toggle-checkbox.type-01 label {width:60px;}
.toggle-checkbox.type-01 label::before {left:26px}
.toggle-checkbox.type-01 input:checked + label::before {left: 16px; right: auto;}

.btn-tool-menu {width:70px; height:70px; padding:10px 0 0 0; position:relative; display:flex; flex-direction: column; align-items: center; gap:7px; border-radius: 15px; background: rgba(255, 255, 255, 0.50); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);}
.btn-tool-menu:focus,
.btn-tool-menu.active,
.btn-tool-menu.selected,
.btn-tool-menu:hover {outline:2px solid var(--tool-primary-default);}
@media (hover: none) and (pointer: coarse) {
    .btn-tool-menu:hover {outline: none;}
    .btn-tool-menu.active,
    .btn-tool-menu.selected {outline:2px solid var(--tool-primary-default);}
}
.btn-tool-menu.gap-2 {gap:2px;}
.btn-tool-menu svg {min-width:32px; min-height:32px;}
.btn-tool-menu .tool-name {margin-bottom:auto; color: #000; text-align: center; font-size: 10px; font-style: normal; font-weight: 400; line-height: 100%;}
#wrap.dir-top .btn-tool-menu:last-child,
#wrap.dir-bottom .btn-tool-menu:last-child {margin-right:0 !important;}
#wrap.dir-left .btn-tool-menu:last-child,
#wrap.dir-right .btn-tool-menu:last-child {margin-bottom:0 !important;}

.btn-menu-fold {width:24px; display:flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(102, 102, 102, 0.50); background: rgba(102, 102, 102, 0.25); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px);}
.btn-menu-unfold {width:24px; height:24px; position:absolute; display:flex; align-items: center; justify-content: center; border: 1px solid rgba(102, 102, 102, 0.50); background: rgba(102, 102, 102, 0.25); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); opacity:0; pointer-events: none;}
.lesson-tools-area.fold .btn-menu-unfold {opacity:1; transition:opacity .5s ease-in-out; pointer-events: all;}

#wrap.dir-top .btn-menu-fold {height:70px;}
#wrap.dir-bottom .btn-menu-fold {height:70px;}
#wrap.dir-left .btn-menu-fold {width:100%; height:24px;}
#wrap.dir-right .btn-menu-fold {width:100%; height:24px;}

#wrap.dir-top .btn-menu-fold svg {transform:rotate(90deg)}
#wrap.dir-bottom .btn-menu-fold svg {transform:rotate(-90deg)}
#wrap.dir-left .btn-menu-fold svg {transform:rotate(360deg)}
#wrap.dir-right .btn-menu-fold svg {transform:rotate(-180deg)}

#wrap.dir-top .btn-menu-unfold {right:2px; bottom:-32px; border-radius: 0 0 10px 10px;}
#wrap.dir-bottom .btn-menu-unfold {right:2px; top:-38px; border-radius: 10px 10px 0 0;}
#wrap.dir-left .btn-menu-unfold {right:-33px; bottom:2px; border-radius: 0 10px 10px 0;}
#wrap.dir-right .btn-menu-unfold {left:-33px; bottom:2px; border-radius: 10px 0 0 10px;}

#wrap.dir-top .btn-menu-unfold svg {transform:rotate(-90deg)}
#wrap.dir-bottom .btn-menu-unfold svg {transform:rotate(90deg)}
#wrap.dir-left .btn-menu-unfold svg {transform:rotate(180deg)}
#wrap.dir-right .btn-menu-unfold svg {}

.btn-tools-prev,
.btn-tools-next {width:30px; min-width:30px; display:flex; align-items: center; justify-content: center; z-index:1;}
.btn-tools-prev.swiper-button-lock,
.btn-tools-next.swiper-button-lock {display:none}
.btn-tools-prev.swiper-button-disabled,
.btn-tools-next.swiper-button-disabled {opacity:0.3}

#wrap.dir-left .btn-tools-prev,
#wrap.dir-left .btn-tools-next,
#wrap.dir-right .btn-tools-prev,
#wrap.dir-right .btn-tools-next {width:100%; height:30px;}
#wrap.dir-left .btn-tools-next,
#wrap.dir-right .btn-tools-next {margin-bottom:-12px; top:auto; bottom:0;}

#wrap.dir-top .btn-tools-next,
#wrap.dir-bottom .btn-tools-next {margin-right:-12px}
#wrap.dir-top .btn-tools-prev svg,
#wrap.dir-bottom .btn-tools-prev svg {}
#wrap.dir-top .btn-tools-next svg,
#wrap.dir-bottom .btn-tools-next svg {transform:rotate(180deg)}
#wrap.dir-left .btn-tools-prev svg,
#wrap.dir-right .btn-tools-prev svg {transform:rotate(90deg)}
#wrap.dir-left .btn-tools-next svg,
#wrap.dir-right .btn-tools-next svg {transform:rotate(270deg)}

[data-tippy-root].menu-layer {}
[data-tippy-root].menu-layer .tippy-box {padding:12px; border-radius: 20px; background-color:rgba(255, 255, 255, 0.35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); border: 1px solid rgba(255, 255, 255, 0.70);}
[data-tippy-root].menu-layer .tippy-box .tippy-content {padding:0; display:flex; gap:12px;}
#wrap.dir-left [data-tippy-root].menu-layer .tippy-box .tippy-content,
#wrap.dir-right [data-tippy-root].menu-layer .tippy-box .tippy-content {flex-direction: column;}
[data-tippy-root].menu-layer .tippy-box .tippy-arrow::before {display:none;}
[data-tippy-root].menu-layer .tippy-box .tippy-arrow::after {content:''; width:18px; height:15px; display:block; position:absolute; background:url(/assets/images/svg/ico-tool-layer-arrow-51ec5f563379c1668fbd2ea6fb230b12.svg) center center no-repeat;}
[data-tippy-root].menu-layer.dir-top .tippy-box .tippy-arrow::after {left:0; top:-20px; transform: rotate(180deg);}
[data-tippy-root].menu-layer.dir-bottom .tippy-box .tippy-arrow::after {left:0; bottom:-20px;}
[data-tippy-root].menu-layer.dir-left .tippy-box .tippy-arrow::after {left:-20px; bottom:0; transform: rotate(90deg);}
[data-tippy-root].menu-layer.dir-right .tippy-box .tippy-arrow::after {right:-20px; bottom:0; transform: rotate(-90deg);}

[data-tippy-root].window-tooltip-arrow {}
[data-tippy-root].window-tooltip-arrow .tippy-box {border-radius:5px; background-color:rgba(0,0,0,0.7)}
[data-tippy-root].window-tooltip-arrow .tippy-box .tippy-content {font-size:12px; padding:10px;}
[data-tippy-root].window-tooltip-arrow .tippy-box .tippy-arrow {opacity:0.9}

.dep2-stat-bar {width:100%; position:absolute; left:0; top:4px; display:flex; justify-content: center; gap:0 4px;}
.dep2-stat-bar i {width:5px; height:2px; display:block; border-radius:5px; background-color:#999;}
.dep2-stat-bar i.active {background-color:var(--tool-primary-default)}

.setting-tooltip-layer {height:36px; position:absolute; display: inline-flex; padding:0 15px 0; justify-content: center; align-items: center; gap: 6px; color: #FFF; font-size: 12px; font-weight: 400; line-height: 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(7.5px); z-index: 1;}
.setting-tooltip-layer.hide {display:none;}
.setting-tooltip-layer::before {content:''; display:block; position:absolute; background-repeat:no-repeat; background-position:center center; transform:translateX(-50%)}

#wrap.dir-top .setting-tooltip-layer::before,
#wrap.dir-bottom .setting-tooltip-layer::before {width:14px; height:31px; background-image:url(/assets/images/svg/icon-tooltip-lg-arrow-7a2f67601b466a40c6bb489fcbef0c7b.svg);}

#wrap.dir-left .setting-tooltip-layer::before,
#wrap.dir-right .setting-tooltip-layer::before {width:12px; height:13px; background-image:url(/assets/images/svg/icon-tooltip-sm-arrow-ebe61141cea1bd8a3884228d5d8ccd19.svg);}

#wrap.dir-top .setting-tooltip-layer {right:0; bottom:-54px;}
#wrap.dir-top .setting-tooltip-layer::before {right:72px; bottom:36px; transform:rotate(180deg)}

#wrap.dir-bottom .setting-tooltip-layer {right:0; top:-54px;}
#wrap.dir-bottom .setting-tooltip-layer::before {right:66px; bottom:-31px;}

#wrap.dir-left .setting-tooltip-layer {right:-208px; bottom:60px;}
#wrap.dir-left .setting-tooltip-layer::before {left:-6px; bottom:11px;}

#wrap.dir-right .setting-tooltip-layer {left:-208px; bottom:60px;}
#wrap.dir-right .setting-tooltip-layer::before {right:-11px; bottom:10px; transform:rotate(-180deg)}

.btn-all-layer-close {padding:0 10px; height:24px; display:flex; align-items: center; gap:0 3px; position:absolute; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.10); background-color: rgba(0, 0, 0, 0.30); color: #fff; font-size: 10px; line-height: 100%; opacity:0; visibility: hidden; transition:opacity .3s ease-in-out;}
.btn-all-layer-close.active {opacity:1; visibility:visible; transition:opacity .3s ease-in-out;}
#wrap.dir-top .btn-all-layer-close {bottom:-36px; right:45px; transition:bottom .3s ease-in-out;}
#wrap.dir-top .lesson-tools-area.fold .btn-all-layer-close {bottom:-38px; right:45px; transition:bottom .3s ease-in-out;}
#wrap.dir-bottom .btn-all-layer-close {top:-35px; right:45px; transition:top .3s ease-in-out;}
#wrap.dir-bottom .lesson-tools-area.fold .btn-all-layer-close {top:-43px; right:45px; transition:top .3s ease-in-out;}
#wrap.dir-left .btn-all-layer-close {bottom:10px; right:calc(-100% - 8px); transition:right .3s ease-in-out}
#wrap.dir-left .lesson-tools-area.fold .btn-all-layer-close {right:calc(-100% - 30px); transition:right .3s ease-in-out}
#wrap.dir-right .btn-all-layer-close {bottom:10px; left:calc(-100% - 8px); transition:left .3s ease-in-out}
#wrap.dir-right .lesson-tools-area.fold .btn-all-layer-close {left:calc(-100% - 30px); transition:left .3s ease-in-out}

/* 우리반 만들기 */
.class-manage-area {min-height: calc(100vh - 280px); max-height:calc(100vh - 280px); padding:20px; position:relative; border-radius: 0 0 20px 20px; border: 1px solid #eee; background-color:#fff; overflow-y:auto;}
.class-manage-area .class-manage-head {margin-bottom:12px; padding-bottom:12px; display:flex; justify-content: space-between; border-bottom:1px dashed var(--mono-ddd);}
.class-manage-area .class-manage-head .class-manage-head-left {display:flex; gap:0 20px; align-items: center;}
.class-manage-area .class-manage-head .class-manage-head-left .class-manage-label {font-size: 14px; font-weight: 500;}
.class-table-top {padding-bottom:12px; display:flex; align-items: center;}
.class-table-top .class-table-text {font-size:14px; font-weight:700;}
.class-table-top .class-table-text span {font-weight:400;}
.class-table-top .common-btn {margin-left:auto;}
.class-table-body .table-area {max-height: calc(100vh - 419px); overflow-y:auto;}

.class-manage-wrap {position:relative;}
.class-manage-wrap .make-class-layer {width:100%; height:calc(100% + 1px); display:none; align-items: center; justify-content: center; gap:20px; flex-direction: column; position:absolute; left:0; top:-1px; background: rgba(0, 0, 0, 0.70); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); z-index:1;}
.class-manage-wrap .make-class-layer.active {display:flex;}
.class-manage-wrap .make-class-layer .make-class-text {color: #FFF; font-size: 14px; line-height: 24px; text-align: center;}

.make-class-inner {}
.make-class-top {padding:10px 20px; background: var(--mono-eee);}
.make-class-top .field-group {margin-top:10px;}

.make-class-body {padding:20px}
.make-class-body .make-class-area {}
.make-class-body .make-class-area .make-class-item {min-height:259px; display:none;}
.make-class-body .make-class-area .make-class-item .make-class-item-text {width:100%; min-height:100px; display:flex; align-items: center; justify-content:center; align-self: flex-start; color: var(--mono-999); font-size: 12px;}
.make-class-body .make-class-area .make-class-item.active {display:flex; flex-direction: column;}
.make-class-body .make-class-area .make-class-item .table-area {max-height: 244px; margin-top:10px; overflow-y: auto;}

/* 수업도구편집 */
.lesson-tools-edit-wrap {padding:20px; border-radius: 0 0 20px 20px; border: 1px solid var(--mono-eee); background: var(--mono-fff);}
.lesson-tools-edit-wrap .lesson-tools-edit-head {margin-bottom:12px; padding-bottom:12px; display:flex; border-bottom: 1px dashed var(--mono-ddd);}
.lesson-tools-edit-wrap .lesson-tools-edit-opt {flex:1; display:flex; align-items: center; gap:0 20px;}
.lesson-tools-edit-wrap .lesson-tools-edit-opt .tools-edit-txt {font-size: 14px; font-weight: 500;}
.lesson-tools-edit-wrap .lesson-tools-edit-opt .common-check-group {line-height:1.4}

.lesson-tools-edit-body {}
.lesson-tools-edit-body .edit-body-title-area {padding-bottom:12px;}
.lesson-tools-edit-body .edit-body-title-area p {display:flex; align-items: center; gap:0 20px; font-size: 14px; font-weight: 500;}
.lesson-tools-edit-body .edit-body-title-area p span {color: var(--mono-666); font-size: 10px; font-weight: 400;}

.lesson-nav-drag-area {max-height:calc(100vh - 403px); padding: 0 10px 0; margin: 0 -10px 0; display:flex; gap:20px; position:relative; flex-wrap:wrap; overflow-y:auto; }
.lesson-nav-drag-area::-webkit-scrollbar {width: 4px;}
.lesson-tool-drag-item {width:calc(100% / 4 - 15px); padding:20px; position:relative; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.10); background: var(--mono-fa); user-select:none; z-index:1; cursor:move}
.lesson-nav-drag-area.len-3 .lesson-tool-drag-item {width:calc(100% / 3 - 14px)}
.lesson-tool-drag-item.swap-highlight {outline:1px dashed #000}
.lesson-tool-drag-item .lesson-tool-drag-head {display:flex; align-items: center; gap:0 10px;}
.lesson-tool-drag-item .lesson-tool-drag-head .lesson-tool-drag-title {display:flex; align-items: center; gap:0 10px; font-size: 14px; font-weight: 700; letter-spacing: -0.28px;}
.lesson-tool-drag-body {min-height: 72px; max-height: 72px; margin-top:10px; overflow-y:auto;}
.lesson-tool-drag-body .common-desc-list {}
.lesson-tool-drag-foot {margin-top:10px; padding-top:10px; display:flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--mono-ddd);}
.lesson-tool-drag-foot .lesson-tool-foot-txt {font-size: 12px; letter-spacing: -0.24px;}

/* 설정 - 배경화면 변경 */
.change-background-area {position:relative;}
.change-background-area.login::before{content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index: 2;}
.change-background-inner {min-height: calc(100vh - 280px); max-height:calc(100vh - 280px); padding:20px; position:relative; overflow-y:auto; border-radius: 0 0 20px 20px; border: 1px solid var(--mono-eee); background: var(--mono-fff);}
.change-background-inner .change-background-block {margin-top:12px; padding-top:14px; border-top:1px dashed var(--mono-ddd);}
.change-background-inner .change-background-block.first {margin-top:0; padding-top:0; border-top:0;}
.change-background-inner .change-background-block .change-background-title {margin-bottom:14px; display:flex; align-items:center; gap:0 20px; font-size: 14px; font-weight: 500;}
.change-background-inner .change-background-block .change-background-title span {color: var(--mono-666); font-size: 10px; font-weight:400;}
.change-background-list {display:flex; gap:20px; list-style:none; flex-wrap:wrap;}
.change-background-list li {width:calc(100% / 5 - 16px); position:relative; line-height:0;}
.change-background-list li .btn-change-background,
.change-background-list li .background-file-upload {width:100%; height:94px; position:relative; overflow:hidden; border:1px solid rgba(0, 0, 0, 0.10); border-radius:10px;}
.change-background-list li.selected .btn-change-background::before,
.change-background-list li.selected .btn-change-background::after {content:''; display:block; position:absolute; z-index: 1;}
.change-background-list li.selected .btn-change-background::before {width:100%; height:100%; left:0; top:0; background-color:rgba(0,0,0,0.5)}
.change-background-list li.selected .btn-change-background::after {width:36px; height:30px; left:50%; top:50%; transform:translate(-50%,-50%); background:url(/assets/images/common/icon-selected-236647819c3cb2b6571dc4c8fb2bc868.png) 0 0 no-repeat; background-size:100%;}
.change-background-list li .btn-change-background {background-position:center center; background-repeat:no-repeat; background-size:cover; background-clip: padding-box;}
.change-background-list li .new-badge {pointer-events: none; right:1px; top:1px;}

/* 설정 레이어 */
#layer-setting.layer-popup .layer-inner {min-height:calc(100vh - 100px); max-height:calc(100vh - 100px)}
#layer-setting.layer-popup .layer-inner .lesson-tools-edit-wrap {min-height: calc(100vh - 280px);}
#layer-setting.layer-popup .layer-popup .layer-inner,
#layer-setting.layer-popup .layer-popup .layer-inner .lesson-tools-edit-wrap {min-height:auto;}
#layer-make-class.layer-popup .layer-inner {max-height:inherit}
.layer-popup:not(#layer-setting) .lesson-tools-edit-wrap {min-height:auto; border-radius:20px}

.background-file-upload label {width:100%; height:100%; display:block; cursor:pointer; background:url(/assets/images/svg/icon-image-thumb-af01525d04e9634180882c2155205131.svg) var(--mono-fa) center center no-repeat;}
.background-file-upload input[type="file"] {display:none;}
.btn-background-del {width:20px; height:20px; display:flex; align-items: center; justify-content: center; position:absolute; right:6px; top:6px; border-radius: 6px; background: rgba(255, 255, 255, 0.50); z-index:1;}
.btn-background-del svg {color:#000}

.new-badge {width:40px; height:20px; position:absolute; right:0px; top:0px; display:none; align-items: center; justify-content: center; border-radius: 2px 10px; background: var(--tool-secondary-default); color: #FFF; text-align: center; font-size: 10px; font-weight: 700;}
.is-new .new-badge {display:flex;}

.field-group {display:flex; gap:0 10px;}
.icon-label {display:inline-flex; align-items: center; justify-content: center; gap:0 5.5px; font-size:13px; font-weight:500; line-height:normal;}
.icon-label::before {content:''; width:5px; height:5px; display:block; border-radius: 2px; background: var(--tool-primary-default);}

#footer {height:28px; padding:0 10px; margin-top:auto; display:flex; justify-content: space-between; align-items: center; z-index:3000; border-top: 1px solid rgba(102, 102, 102, 0.20); background: rgba(255, 255, 255, 0.50); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px);}
#footer .footer-logo {}
#footer .footer-copyright-area {display:flex; align-items: center;}
#footer .footer-copyright-area .footer-menu {list-style:none; display:flex;}
#footer .footer-copyright-area .footer-menu li {margin-right:10px; display:flex; gap:0 10px; align-items: center;}
#footer .footer-copyright-area .footer-menu li::after {content:''; width:1px; height:10px; display:block; background-color:#D9D9D9;}
#footer .footer-copyright-area .footer-menu li a {display:block; text-decoration: none; color:#838383; font-size: 11px; font-weight: 400;}
#footer .footer-copyright-area .footer-menu li.text-strong a {font-weight:500;}
#footer .footer-copyright-area .footer-copyright {color:#838383; font-size: 11px; font-weight: 400;}

/* 버튼 기본 사이즈 - md */
.common-btn {min-width:50px; border: 1px solid rgba(0, 0, 0, 0.10); min-height:30px; height:30px; padding:0 9px; display:flex; align-items: center; justify-content: center; gap:0 3px; color: #FFF; font-size: 12px; border-radius: 5px; flex-shrink: 0; background-color:#fff; line-height:1.2; -webkit-tap-highlight-color: transparent; outline:0; appearance: none;}
.common-btn svg {width:12px; height:12px; color:inherit}
.common-btn.icon-only {min-width:30px; padding:0; box-sizing: border-box;}

.common-btn.size-xxs {min-width:32px; min-height:18px; height:18px; padding:0 6px;; border-radius:10px; color:var(--mono-666); font-size:10px; font-weight:400; letter-spacing: -0.2px;}

.common-btn.size-xs {min-width:32px; min-height:20px; height:20px; padding:0 5px;  font-size:10px; border-radius:4px; gap:0 2px; line-height:19px;}
.common-btn.size-xs svg {width:8px; height:8px;}
.common-btn.size-xs.icon-only {min-width:20px;}

.common-btn.size-sm {min-width:40px; min-height:24px; height:24px; padding:0 6px; font-size:10px; border-radius:4px; gap:0 2px;}
.common-btn.size-sm svg {width:10px; height:10px;}
.common-btn.size-sm.icon-only {min-width:24px;}

.common-btn.size-lg {min-width:60px; min-height:36px; height:36px; padding:0 10px; font-size:14px; border-radius:6px; gap:0 4px;}
.common-btn.size-lg svg {width:14px; height:14px;}
.common-btn.size-lg.icon-only {min-width:36px;}

.common-btn.size-xl {min-width:80px; min-height:42px; height:42px; padding:0 12px; font-size:16px; border-radius:7px; gap:0 5px;}
.common-btn.size-xl svg {width:16px; height:16px;}
.common-btn.size-xl.icon-only {min-width:42px;}

.common-btn.w-100 {min-width:100px}

.common-btn:disabled {opacity: 0.4;}
.common-btn.c-primary {background: var(--tool-primary-default);}
.common-btn.c-primary:hover {background: var(--tool-primary-dark);}
.common-btn.c-primary:focus {background: var(--tool-primary-darkest);}
.common-btn.c-primary:disalbed {background: var(--tool-primary-default);}
.common-btn.c-primary-black {background:var(--tool-primary-darkest);}
.common-btn.c-primary-black:hover {background: var(--tool-primary-default)}
.common-btn.c-primary-black:focus {background: var(--tool-primary-light)}
.common-btn.c-primary-black:disabled {background:var(--tool-primary-darkest);}
.common-btn.c-neutral {color: #000; background: var(--tool-neutral-default);}
.common-btn.c-neutral:hover {background: var(--tool-neutral-dark);}
.common-btn.c-neutral:focus {background: var(--tool-neutral-darkest);}
.common-btn.c-neutral:disabled {background: var(--tool-neutral-default);}
.common-btn.c-neutral-line {color:var(--mono-666); border-color:var(--mono-666)}
.common-btn.c-neutral-line:hover {color:var(--mono-444); border-color:var(--mono-444); background-color:var(--mono-eee); }
.common-btn.c-neutral-line:focus {border-color:var(--mono-444); background-color:var(--mono-999); color:#fff;}
.common-btn.c-neutral-line:disabled {color:var(--mono-666); border-color:var(--mono-666)}
.common-btn.c-primary-line {color: var(--tool-primary-default); border: 1px solid var(--tool-primary-default, #059); background: #FFF;}
.common-btn.c-primary-line:hover {color: var(--tool-primary-dark); border: 1px solid var(--tool-primary-dark); background: var(--tool-primary-bg-light);}
.common-btn.c-primary-line:focus {color:#fff; border: 1px solid var(--tool-primary-darkest); background: var(--tool-primary-light);}
.common-btn.c-primary-line:disabled {color: var(--tool-primary-default); border: 1px solid var(--tool-primary-default, #059); background: #FFF;}
.common-btn.c-warning-line {color:#fff; background: var(--tool-warning-default);}
.common-btn.c-warning-line:hover {background: var(--tool-warning-dark);}
.common-btn.c-warning-line:focus {background: var(--tool-warning-darkest);}
.common-btn.c-warning-line:disabled {background: var(--tool-warning-default);}
.common-btn.is-round {border-radius:20px}
.common-btn.no-line,
.common-btn.no-line:hover,
.common-btn.no-line:focus {border-color:transparent; background-color:transparent;}
.common-btn.no-line:focus {color:inherit;}
.common-btn.type-save {border-radius: 4px; border: 1px solid var(--mono-666); background: #FFF; color:var(--mono-666)}
.common-btn.type-save svg {color:inherit;}
.common-btn.type-save:hover,
.common-btn.type-save:focus {border-radius: 4px; border: 1px solid var(--tool-primary-default); background: var(--tool-primary-default); color:#fff;}


/* select */
.common-select {width: fit-content; position:relative; z-index: 1;}
.common-select.active {z-index:2;}
.common-select .common-select-button {min-width:270px; max-width:270px; height:30px; padding:0 20px 0 9px; text-align:left; font-size:12px; border-radius: 6px; border: 1px solid var(--mono-ddd); background:url(/assets/images/svg/icon-select-arrow-1af153c53e9121f027e3048fa0773280.svg) #fff calc(100% - 9px) center no-repeat; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.common-select.active .common-select-button {border-radius:6px 6px 0 0;}
.common-select .common-select-menu {list-style:none; width:100%; padding:9px; max-height:115px; display:none; position:absolute; left:0; top:calc(100% - 1px); border-radius: 0 0 6px 6px; border: 1px solid var(--mono-ddd); background: var(--mono-fa); overflow-y:auto;}
.common-select.active .common-select-menu {display:block;}
.common-select .common-select-menu li + li {margin-top:10px;}
.common-select .common-select-menu li button {width:100%; display:flex; align-items: center; justify-content: space-between; color: var(--mono-999); font-size: 11px;}
.common-select .common-select-menu li button .primary-value {max-width:calc(100% - 60px); text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;}
.common-select .common-select-menu li button .primary-value.no-data {max-width:100%;}
.common-select .common-select-menu li button:hover {color: var(--tool-primary-default);}
.common-select .common-select-menu li.active button {color: var(--tool-primary-default); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
.common-select.disabled .common-select-button {background-color: var(--mono-eee); color:var(--mono-999)}
.common-select.disabled::before{content:''; width:100%; height:100%; display:block; position:absolute; left:0; top:0;}
.common-select.full-width,
.common-select.full-width .common-select-button {width:100%; max-width:100%; min-width:auto;}
.common-select.type-top.active .common-select-button {border-radius:0 0 6px 6px;}
.common-select.type-top .common-select-menu {bottom:calc(100% - 1px); top:auto; border-radius:6px 6px 0 0;}
.common-select.type-memo .common-select-menu li button .primary-value {max-width:none;}
.common-select.type-memo .common-select-menu li.active button {text-decoration: none; font-weight:700;}

.common-select.w-60 {width:60px; max-width:60px;}
.common-select.w-60 .common-select-button {min-width:60px;}

/*@media (hover: none) and (pointer: coarse) {*/
/*    .common-select .common-select-menu {max-height:115px;}*/
/*}*/

/* text field */
.common-input {min-width: 60px; height:30px; padding:0 9px; border-radius: 6px; border: 1px solid var(--mono-ddd); background: var(--mono-fff); font-size:12px; outline:0;}
.common-input:focus {border-color:var(--tool-primary-default)}
.common-input.align-center {text-align: center;}

.common-text-field {min-width: 60px; height:30px; overflow:hidden; position:relative; border-radius: 6px; border: 1px solid var(--mono-ddd); background: var(--mono-fff); font-size:12px;}
.common-text-field:focus-within {border-color:var(--tool-primary-default)}
.common-text-field input[type="text"] {width:100%; height:100%; padding:0 9px; border:0; font-size:12px;}
.common-text-field input[type="text"]:focus {outline:0; }
.common-text-field input[type="text"]::placeholder {color: var(--mono-bbb); font-size:12px;}
.common-text-field .btn-value-del {width:28px; height:28px; display:none; align-items: center; justify-content: center; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.common-text-field .btn-value-del.active {display:flex;}
.common-text-field .btn-value-del svg {width:10px; height:10px;}

/* radio & checkbox */
.common-check-group {display:flex; align-items: center; gap:0 30px;}
.common-radio {display:flex; gap:0 4px; align-items: center;}
.common-radio input {width:16px; height:16px; border-radius: 8px; border: 1px solid var(--mono-bbb); background: var(--mono-fff); appearance: none; outline:0; cursor:pointer;}
.common-radio input:checked {background:url(/assets/images/svg/icon-radio-checked-acf5c4f35182b14a6b3e4db92117e48d.svg) var(--tool-primary-default) center center no-repeat; border-color:var(--tool-primary-default)}
.common-radio input + label {font-size:12px; cursor:pointer;}

.common-checkbox {display:flex; gap:0 4px; align-items: center;}
.common-checkbox input {width:16px; height:16px; background:url(/assets/images/svg/icon-checkbox-default-da7234ae104d771a4d503e51b43fec0f.svg) center center no-repeat; appearance: none; outline:0; cursor:pointer;}
.common-checkbox input:checked {background:url(/assets/images/svg/icon-checkbox-active-8649388d404902639a11c27c755fd3f6.svg) center center no-repeat;}
.common-checkbox input + label {font-size:12px; cursor:pointer;}
.common-checkbox.type-white input + label {color:#fff;}

/* 탭 */
.common-tab-area {}
.common-tab-area .common-tab-btn {display:flex;}
.common-tab-area .common-tab-btn button {width:151px; height:36px; margin-right:-1px; display:flex; align-items: center; justify-content: center; position:relative; border-radius: 20px 20px 0 0; border: 1px solid rgba(0, 0, 0, 0.10); background-color:#EEE; font-size: 14px; color:#666; line-height:normal;}
.common-tab-area .common-tab-btn button.active {border: 1px solid rgba(0, 0, 0, 0.10); background: var(--tool-primary-default); font-weight:500; color:#fff; z-index:1;}
.common-tab-area .common-tab-panel {}
.common-tab-area .common-tab-panel .common-tab-item {display:none;}
.common-tab-area .common-tab-panel .common-tab-item.active {display:block;}

/* 파일업로드 */
.class-file-upload-top {padding:10px 20px; display:flex; align-items: center; gap:0 20px; background: var(--mono-eee);}
.class-file-upload-top .upload-guide-text {font-size: 12px; line-height: 18px; letter-spacing: -0.24px;}
.class-file-upload-body {padding:20px;}
.common-file-upload {display:flex; gap:0 10px;}
.common-file-upload label.common-btn {cursor:pointer;}
.common-file-upload .common-file-input {display:none;}
.file-upload-guide {margin-top:10px; color: var(--mono-999); font-size: 10px;}

/* 테이블 */
.table-area {}
.table-area .common-btn.icon-only,
.table-area .common-text-field,
.table-area .common-check-group,
.table-area .common-btn {margin:0 auto; justify-content: center;}
.table-style-01 {width:100%; table-layout: fixed;}
.table-style-01 th,
.table-style-01 td {padding:10px 0px; border:1px solid var(--mono-ddd); text-align: center; font-size:12px;}
.table-style-01 td.bold {font-weight:500;}
.table-style-01 th:first-child,
.table-style-01 td:first-child {border-left:0;}
.table-style-01 th:last-child,
.table-style-01 td:last-child {border-right:0;}
.table-style-01 th {background-color:var(--mono-ccc); font-size:12px;}

.table-bottom-btns {margin-top:12px; text-align: center;}
.table-bottom-btns .common-btn {margin:0 auto;}

/*공통 목록*/
.common-desc-list {list-style:none;}
.common-desc-list li {padding-left:10px; position:relative; color: var(--mono-666); font-size: 12px; line-height: 18px; letter-spacing: -0.24px;}
.common-desc-list li::before {content:''; width:3px; height:3px; display:block; position:absolute; left:0; top:6px; border-radius:50%; background-color:var(--mono-666)}

/* 수업도구 레이어 */
.common-tool-layer {width: 400px; height: 300px; visibility: hidden; position: absolute; left: 50%; top: 50%; border-radius: 15px; border: 1px solid #BBB; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.10); z-index: 100; background-color: #fff; touch-action: none; overflow:hidden;}
.common-tool-layer.selected {visibility:visible;}
.common-layer-header {height: 48px; position:relative; padding: 0 15px 0 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 15px 15px 0 0; border-bottom: 1px solid #BBB; background-color: #FAFAFA; cursor: move;}
.layer-popup .common-layer-header {cursor: default;}
.common-layer-header .common-layer-title {display: flex; gap: 0 6px; align-items: center}
.common-layer-header .common-layer-title .common-layer-text {font-size: 16px; font-weight: 700; display:flex; align-items: center; gap:0 6px; letter-spacing: -0.32px;}
.common-layer-header .common-layer-title .common-layer-text .sub-text {margin-top:4px; color: var(--mono-666); font-size: 12px; font-weight: 400; letter-spacing: -0.24px;}
.common-layer-header .common-layer-title .common-layer-text .common-layer-text-img {width:20px; height:20px;}
.common-layer-header .common-layer-title .btn-share {width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #666; position:relative; z-index:1;}
.common-layer-btns {display: flex; gap: 0 6px;}
.common-layer-btns button {width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #666; position:relative; z-index:1;}
.common-layer-btns button svg {pointer-events: none}
@media (hover: hover) and (pointer: fine) {
    .common-layer-header .common-layer-title .btn-share:hover {color: #fff; background-color: var(--tool-primary-default)}
    .common-layer-btns button:hover {color: #fff; background-color: var(--tool-primary-default)}
}
.common-layer-btns .tooltip-button-wrap {}
.common-layer-btns .tooltip-button-wrap button + button {display: none}
.common-layer-btns .tooltip-button-wrap.active button {display: none;}
.common-layer-btns .tooltip-button-wrap.active button + button {display: flex;}
.common-layer-body {width:100%; height:calc(100% - 48px);}
.common-layer-body .common-tool-iframe {border: none; margin:0; padding:0; transform-origin: 0 0;}
.ui-resizable-handle {width: 20px; height: 20px; position: absolute; right: 0; bottom: 0; display: none !important; align-items: center; justify-content: center; background: url(/assets/images/svg/icon-window-resize-756a705f73584b085c3f89141bff0a10.svg) rgba(153, 153, 153, 0.50) center center no-repeat; border-radius: 6px; cursor: se-resize;}
.common-tool-layer:hover .ui-resizable-handle {display: flex !important;}
.common-tool-layer.window-full-size {z-index:3500 !important;}
.common-tool-layer.window-full-size .ui-resizable-handle {display:none !important;}
.common-tool-layer .layer-drag-handle {width:100%; height:100%; position:absolute; left:0; top:0;}
.common-tool-layer.window-full-size .layer-drag-handle {cursor:default;}
@media (hover: none) and (pointer: coarse) {
    .common-tool-layer .ui-resizable-handle {
        /*width:30px; height:30px; border-radius:10px; background-size:16px;*/
        display: flex !important;
    }
}

/* 컬러피커 */
.color-picker-area {display:flex; gap:10px; padding:20px 20px 0; flex-wrap:wrap;}
.color-picker-area .btn-color-picker {width:30px; height:30px; position:relative; border-radius:50%;}
.color-picker-area .btn-color-picker.selected::before {content:''; width:100%; height:100%; display:block; position:absolute; left:0; top:0; background:url(/assets/images/common/icon-selected-236647819c3cb2b6571dc4c8fb2bc868.png) center center no-repeat; background-size:18px 14px;}

/* 레이어 팝업 */
.layer-popup {display: none; position:relative;}
.layer-popup.active {display: block;}
.layer-popup:before {content:''; width:10000vw; height:10000vh; display:block; position:fixed; left:-100%; top:-100%; background-color:#000; z-index:1000; opacity: 0;}
.layer-popup.active:before {opacity: 0.5;}
.layer-popup .layer-inner {width:100%; max-width:400px; transform:translate(-50%, -50%); position:fixed; left:50%; top:50%; border-radius: 15px; border: 1px solid #bbb; background-color:#fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); box-sizing: content-box; z-index:5000;}
.layer-popup.w-960 .layer-inner {max-width:960px; min-width:960px;}
.layer-popup.w-920 .layer-inner {max-width:920px; min-width:920px;}
.layer-popup.w-818 .layer-inner {max-width:818px; min-width:818px;}
.layer-popup.w-730 .layer-inner {max-width:730px; min-width:730px;}
.layer-popup.w-520 .layer-inner {max-width:520px; min-width:520px;}
.layer-popup.w-510 .layer-inner {max-width:510px; min-width:510px;}
.layer-popup.w-472 .layer-inner {max-width:472px; min-width:472px;}
.layer-popup.w-430 .layer-inner {max-width:430px; min-width:430px;}
.layer-popup.w-400 .layer-inner {max-width:400px; min-width:400px;}
.layer-popup.w-390 .layer-inner {max-width:390px; min-width:390px;}
.layer-popup.w-346 .layer-inner {max-width:346px; min-width:346px;}
.layer-popup.w-300 .layer-inner {max-width:300px; min-width:300px;}
.layer-popup.w-240 .layer-inner {max-width:240px; min-width:240px;}

.layer-popup .layer-head {height:64px; display:flex; align-items: center; justify-content: center; border-bottom:1px solid var(--mono-ddd);}
.layer-popup .layer-head .head-inner {padding:0 20px; position:relative; flex:1;}
.layer-popup .layer-head .head-inner .btn-layer-close {width:32px; height:32px; padding:0; display:flex; align-items: center; justify-content: center; position:absolute; right:20px; top:50%; transform:translateY(-50%); border:0; background-image:url(../images/icon/icon-layer-close.svg); background-repeat:no-repeat; background-position:center;}
.layer-popup .layer-head .head-inner .head-title {margin:0; font-size: 18px; font-weight: 600;}

.layer-popup .layer-body {}
.layer-popup .layer-body .layer-body-inner {padding:20px;}
.layer-popup .layer-body .layer-msg-outer {padding:30px 20px 5px;}
.layer-popup .layer-body .layer-msg-box {text-align: center; font-size: 12px; line-height: 18px;}
.layer-popup .layer-body .layer-msg-box.bold {}
.layer-popup .layer-foot {padding:20px;}
#layer-confirm-chk.layer-popup .common-checkbox {justify-content: center;}

.layer-popup.bg-transparent .layer-inner {padding:0; background-color:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none;}

.common-btn-area {display:flex; gap:0 10px; justify-content: center; position:relative;}
.common-btn-area.mt-10 {margin-top:10px;}
.common-btn-area.mt-20 {margin-top:20px;}
.common-btn-area.pt-20 {padding-top:20px;}
.common-btn-area.flex-box button {flex:1;}
.common-btn-area .btn-right-setting-refresh {position:absolute; right:0; bottom:0;}
.common-btn-area.justify-between {justify-content: space-between;}

/* 토스트팝업 */
.common-toast {padding: 10px 15px; border-radius: 16px; border: 1px solid #FFF; background: rgba(0, 0, 0, 0.70); color: var(--mono-fff); font-size: 12px; font-weight: 400; letter-spacing: -0.24px; box-shadow:none;}

/* 메인팝업 */
#popup-slider.layer-popup .layer-inner {max-width:520px;}
#popup-slider .image-popup {position: relative;}
#popup-slider .image-popup > img {display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
#popup-slider .image-popup > .btn-link {min-width:140px; position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 2; pointer-events: auto;}
#popup-slider .swiper-container {position: relative; padding-bottom: 0; touch-action: pan-y;}
#popup-slider .swiper-wrapper {display: flex; transition-property: transform; box-sizing: content-box;}
#popup-slider .swiper-slide {flex-shrink: 0; width: 100%; height: auto; box-sizing: border-box; overflow: hidden;}
#popup-slider .controller {position: absolute; left: 40px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 12px; pointer-events: none; background: none; padding: 0;}
#popup-slider .slides {position: relative; z-index: 1;}
#popup-slider .slider-button {width: 28px; height: 28px; border: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; opacity: .7; transition: .15s; pointer-events: auto; touch-action: manipulation;}
#popup-slider .slider-button:hover {opacity: 1;}
#popup-slider .slider-button svg {width: 12px; height: 12px; color: #111; fill: currentColor; }
#popup-slider .slider-button.button-player #icon-pause {display:none;}
#popup-slider .slider-button.button-player.pause #icon-play {display:none;}
#popup-slider .slider-button.button-player.pause #icon-pause {display:block;}
#popup-slider .indicator {display: inline-flex; align-items: center; gap: 8px;}
#popup-slider .indicator .this-index {font: 600 14px/1 system-ui, sans-serif; color: #111;}
#popup-slider .indicator .last-index {font: 600 14px/1 system-ui, sans-serif; color: rgba(0, 0, 0, .35); }
#popup-slider .indicator .bar {width: 40px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .18); overflow: hidden;}
#popup-slider .indicator .bar .bar-thumb {display: block; height: 100%; width: 0%; background: #111; transition: width linear;}
#popup-slider .controls {display: flex; align-items: center; gap: 6px;}
#popup-slider #popup-container {overflow:hidden;}
#popup-slider #popup-container .is-hidden {visibility: hidden;}
#popup-slider .layer-foot {margin-top:10px; padding:0;}

@media screen and (max-height: 750px) {
    #popup-slider.layer-popup .layer-inner {max-width:420px;}
}

/* 전체메뉴 */
.all-menu-wrapper {padding:40px 20px 20px; display:flex; gap:32px 12px; flex-wrap:wrap; align-items: center;}
.all-menu-wrapper .all-menu-group {padding:12px; position:relative; display:flex; gap:12px; border-radius:0 20px 20px 20px; border: 1px solid var(--mono-ccc); background: var(--mono-f4);}
.all-menu-wrapper .all-menu-group::before {content:attr(data-group-title); display: flex; height: 20px; padding: 0 12px; justify-content: center; align-items: center; position: absolute; left:-1px; top: -20px; border-radius: 8px 8px 0 0; background: var(--tool-primary-default); color: #FFF; font-size: 10px; font-weight: 400; line-height: 100%; letter-spacing: -0.2px;}

/* 바탕화면 바로가기 */
.shortcut-box-area {padding:20px; display:flex; flex-direction: column; gap:20px;}
.shortcut-box-area .shortcut-desc {color: #000; font-size: 14px; font-weight: 400; letter-spacing: -0.28px; text-align: center;}
.shortcut-box-area .shortcut-detail {display:flex; align-items: center; gap:20px;}
.shortcut-box-area .shortcut-detail .btn-shortcut {min-width:100px;}
.shortcut-box-area .shortcut-detail .btn-shortcut a {padding:20px; display:flex; align-items: center; justify-content: center; border-radius: 20px; border: 1.5px dashed var(--mono-ddd);}
.shortcut-box-area .shortcut-detail .btn-shortcut a img {vertical-align: top;}
.shortcut-box-area .shortcut-detail .shortcut-detail-img {}
.shortcut-box-area .shortcut-detail .shortcut-detail-img img {vertical-align: top;}

/* 메인 가이드 */
body:has(#layer-guide.layer-popup.active) {overflow:hidden;}
#layer-guide.layer-popup {z-index:6000 !important;}
#layer-guide.layer-popup::before {display:none;}
#layer-guide.layer-popup .layer-inner {max-width:100%; min-width:100%; height:100dvh; position:fixed; left:0; top:0; border-radius:0; transform:translate(0,0); border:0; box-shadow:none; background-color:#000; overflow:auto;}
#layer-guide.layer-popup .layer-body {height:100dvh; display: flex; align-items: center; justify-content: center; /*min-height: 100%; min-width: 100%;*/ }
.main-guide-layer {position:relative; /*min-width:800px; min-height:600px; overflow:auto;*/}
.main-guide-layer .img-guide {max-height:100dvh; display:flex; justify-content: center;}
.main-guide-layer .guide-option {padding:20px; display:flex; align-items: center; gap:20px; position:absolute; right:20px; top:20px;}
.main-guide-layer .guide-option .common-checkbox label {color:#fff;}

/* 로더 */
.common-layer-body:has(.iframe-loader) {position:relative;}
.iframe-loader {width:100%; height:100%;}
.iframe-loader .iframe-loader-inner {width:100%; height:100%; position:absolute; left:0; top:0; display:flex; align-items: center; justify-content: center; gap:20px; background-color:#fff;}
.iframe-loader.is-done {visibility: hidden;}
.iframe-loader .icon-loader,
.common-loading .icon-loader {width:30px; height:30px; fill: none; stroke: #999; stroke-width: 8; stroke-dasharray: 2, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: loader-ani 1s ease-in-out infinite;}
.iframe-loader .icon-loader svg {fill:transparent;}

/* 공통 로더 */
.common-loading {width:100%; height:100%; display:none; position:fixed; left:0; top:0; background-color:rgba(0,0,0,0.5); z-index:10000;}
.common-loading .common-loading-inner {width:100%; height:100%; display:flex; align-items: center; justify-content: center;}

@keyframes loader-ani {
    100% {transform: rotate(360deg);}
}
@keyframes loader-ani {
    0% {stroke-dasharray: 1, 200; stroke-dashoffset: 0;}
    50% {stroke-dasharray: 90, 200; stroke-dashoffset: -35px;}
    100% {stroke-dashoffset: -125px;}
}

/* 500 에러 */
.tools-box.error-wrapper {width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px;}
.tools-box.error-wrapper.connect {background: url(/assets/images/bg/bg-error-500-8ec669314ac092265981a612429f3ac6.png) no-repeat top; background-size: cover;}
.tools-box.error-wrapper.find {background: url(/assets/images/bg/bg-error-404-c03c164f22e8e79e35d4bcadb3b00353.png) no-repeat top; background-size: cover;}
.tools-box .error-container {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.tools-box .error-container img {width:328px;}
.tools-box .error-text {margin: 52px auto; text-align: center;}
.tools-box .error-text .title {font-size: 32px; font-weight: 700; color: #000;}
.tools-box .error-text .sub-text {font-size: 16px; font-weight: 500; color: #626262; margin-top: 12px;}
.tools-box .error-container .common-btn {min-width:140px; text-decoration:none;}