*:focus-visible{  outline: none;  transition: none;  }

/* 에디터 */
#editor {width: 100%;}
#editor .popupImage {display: flex;}

/* 사이드바 */
#sidebar {width: 400px; grid-template-columns: 90px 1fr;}
#sidebar .tmB_tab > li button {height: 76px;}

/* 검색 영역 */
.tabCont_wrap .tabSch_wrap {display: none;}
#sidebar:has(.tmB_tab > li#tab1.active) .tabCont_wrap .tabSch_wrap {display: flex;}

.tmB-layout-container.guide-layout-container {min-width: 500px; min-height: 500px; width: 100%;}

#editor-container.mo-size #editor {width: 100%;}
#editor-container.mo-size .guide-layout-container {min-width: unset; width: 100%;}
#editor-container.pop2-size .tmB-layout-container.guide-layout-container {min-width: 400px; min-height: 360px;}
#editor-container.pop2-size #editor .popupImage {max-height: 360px;}
.popupImage {width: fit-content;}
/*#editor-container.pop2-size #editor .popupImage img {object-fit: contain; object-position: top center;}*/

/* 요소 이동 박스 */
.text-box {
    position: absolute;
    width: 300px;
    /*height: 120px;*/
    max-width: 100%;
    border: 2px solid transparent;
    /*background: #fff;*/
    box-sizing: border-box;
    transform-origin: center center;
    /*overflow: hidden;*/
    transition: border-color 0.2s ease;
    z-index: 1000;
    box-sizing: border-box;
}

.text-box:focus-within {
    border-color: #00bcd4;
}

.text-box img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: contain;
}

/* 컨텐츠 요소 */
.content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    outline: none;
}
.content.content-title,
.content.content-body {padding: 0;}

.text-box:has(.content-title) {
    position: absolute;
    left: 50px;
    top: 60px;
    width: calc(100% - 100px);
    text-align: center;
    padding: 20px;
    margin: -20px auto;
}
.text-box:has(.content-body) {
    position: absolute;
    left: 50px;
    top: 250px;
    width: calc(100% - 100px);
    text-align: center;
    padding: 20px;
    margin: -20px auto;
}
.content.content-title {
    display: inline-block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
    cursor: text;
    white-space: pre-line;
}

.content.content-body {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.6;
    cursor: text;
    white-space: pre-line;
}

/* 도구 모음(회전, 사이즈 조절) */
.rotate-handle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 50%;
    cursor: grab;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.resize-handle {
    width: 10px;
    height: 10px;
    background: #00bcd4;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.resize-handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.resize-handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.resize-handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.resize-handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* 요소 포커스 상태 */
.text-box:focus-within .resize-handle {opacity: 1;}
.text-box:not(:focus-within) .rotate-handle,
.text-box:not(:focus-within) .editor-action-btns .action-btn {display: none;}