html.zoom-large {
--tm-h1: 2.667em;
--tm-h2: 2.111em;
--tm-h3: 1.67em;
--tm-h4: 1.33em;
--tm-h5: 1em;
--tm-html: 14px;
--tm-h1-before: 14px;
--tm-h2-before: 12px;
--tm-h3-before: 6px;
}
html.zoom-large #top .top_wrap {padding: 0 20px;}
html.zoom-large #top .top_wrap .top_left {gap: 40px;}
html.zoom-large #top .top_wrap .tm_logo::before {right: -20px;}
/* ---에디터 헤더--- */
/* 헤더 좌측 */
#top {height: 60px; background: #282c2d;}
#top .top_wrap {display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 30px;}
#top .top_wrap .tm_logo {font-size: 24px; font-weight: 700; color: #eff0f1; position: relative;}
#top .top_wrap .tm_logo::before {content: ''; width: 1px; height: 100%; background: #eff0f1; position: absolute; top: 50%; right: -30px; transform: translateY(-50%);}
#top .top_wrap .title_wrap {display: flex; align-items: center; gap: 6px;}
#top .top_wrap .title_wrap i {color: #fff;}
#top .top_wrap .title_wrap input {background: transparent; border: 0; border-bottom: 1px dashed #fff; padding: 0 6px; color: #fff; font-weight: 500; max-width: 200px;}
#top .top_wrap .title_wrap input::placeholder {color: #fff; opacity: 0.8;}
#top .top_wrap [class^="top_"] {display: flex; align-items: center; gap: 10px;}
#top .top_wrap [class^="top_"] button {border: 1px solid var(--dark-color); background-color: var(--dark2-color); color: #fff; min-width: 40px; height: 40px; padding: 4px; border-radius: 5px; font-size: 1.125rem; display: flex; align-items: center; justify-content: center;}
#top .top_wrap .top_left {gap: 60px;}
/* 헤더 중앙 */
#top .top_wrap .top_mid {}
#top .top_wrap .top_mid .top_device_wrap {display: flex; align-items: center; gap: 4px;}
#top .top_wrap .top_mid .top_device_wrap button.active {background: var(--bg-purple); border: 1px solid var(--bg-purple);}
#top .top_wrap .top_mid .size_select {background-color: var(--dark2-color); border: 1px solid var(--dark-color); color: #fff; min-width: 170px; height: 40px; border-radius: 5px; font-size: 1rem; background-position: -webkit-calc(100% - 16px); padding: 4px 26px 4px 10px; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 4;}
#top .top_wrap .top_mid .size_select::before, #top .top_wrap .top_mid .size_select::after {content: ''; position: absolute; height: 2px; width: 7px; background: #fff; display: block; transition: all .3s; cursor: pointer; top: 50%; right: 14px;}
#top .top_wrap .top_mid .size_select::before { transform: rotate(45deg); }
#top .top_wrap .top_mid .size_select::after { transform: rotate(-45deg); margin-right: -4px; }
#top .top_wrap .top_mid .size_select.open::before { transform: rotate(-45deg); }
#top .top_wrap .top_mid .size_select.open::after { transform: rotate(45deg); }
#top .top_wrap .top_mid .size_select .options {position: absolute; top: 100%; left: 0; background: var(--dark2-color); border-top: 1px solid var(--dark-color); border-radius: 0 0 5px 5px; overflow: hidden; width: 100%; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; z-index: 1;}
#top .top_wrap .top_mid .size_select .options li {padding: 10px; transition: background-color 0.2s;}
#top .top_wrap .top_mid .size_select .options li:hover {background-color: #525556;}
#top .top_wrap .top_mid .size_select.open .options {max-height: fit-content; opacity: 1;}
#top .top_wrap .top_mid .pct_wrap {background: var(--dark2-color); border: 1px solid var(--dark-color); border-radius: 5px; display: flex; align-items: center; justify-content: space-between;}
#top .top_wrap .top_mid .pct_wrap button {border: 0; padding: 0;}
#top .top_wrap .top_mid .pct_wrap p {color: #fff;}
/* 헤더 우측 */
#top .top_wrap .top_right {}
#top .top_wrap .top_right .historyBtn_wrap {background: var(--dark2-color); border: 1px solid var(--dark-color); border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px;}
#top .top_wrap .top_right .historyBtn_wrap button {border: 0; padding: 0;}
#top .top_wrap .top_right .historyBtn_wrap button i {width: 30px; height: 30px; background-repeat: no-repeat; background-size: contain; background-position: center;}
#top .top_wrap .top_right .historyBtn_wrap button.undo_btn i {background-image: url("../images/icon/undo.svg");}
#top .top_wrap .top_right .historyBtn_wrap button.redo_btn i {background-image: url("../images/icon/redo.svg");}
#top .top_wrap .top_right .saveBtn_wrap {display: flex; align-items: center; gap: 10px;}
#top .top_wrap .top_right .saveBtn_wrap button {padding: 0 16px; display: flex; align-items: center; gap: 4px; border: transparent;}
#top .top_wrap .top_right .saveBtn_wrap button.save_btn {background: var(--bg-purple);}
#top .top_wrap .top_right .saveBtn_wrap button.out_btn {background: #525556;}
#top .top_wrap .top_right .saveBtn_wrap button i {font-size: 1rem; line-height: 1;}
/* 코드보기 레이어 팝업 */
.code-modal {position:fixed; z-index:9999; left:0; top:0; width:100vw; height:100vh; padding: 0 20px;}
.code-modal-dim {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.code-modal-inner {position:relative; width:100%; max-width:1200px; margin:60px auto; background:#222; border-radius:16px; overflow:hidden; top:60px; box-shadow:0 8px 40px rgba(0,0,0,0.25); z-index: 1;}
.code-modal-content {display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding:30px;}
.code-panel {flex:1; display:flex; flex-direction:column;}
.code-title {color:#fff; margin-bottom:10px; font-weight:600;}
.code-panel pre {background:#181818; color:#e6e6e6; border-radius:8px; padding:16px; height: 100%; min-height:200px; max-height:380px; overflow:auto; scrollbar-width: thin; font-size:15px; margin:0; white-space: pre-wrap;}
.copy-btn {margin:10px 0 0 0; background:#444; color:#fff; border:none; border-radius:6px; padding:5px 16px; cursor:pointer; transition:background 0.2s;}
.copy-btn:hover {background:#fff; color: #000;}
.close-btn {position:absolute; right:14px; top:12px; color:#fff; background:transparent; border:none; font-size:2rem; cursor:pointer;}
@media (max-width: 650px) {
.code-modal-inner {width:100%;}
.code-modal-content {flex-direction:column;}
}
/* --- 에디터 헤더 끝 --- */
/* ---좌측 메뉴--- */
/* 사이드바 스타일 */
#sidebar { width: 310px; box-sizing: border-box; border-right: 1px solid #ccc; display: grid; grid-template-columns: 80px 1fr;}
#sidebar .tmB_tab {border-right: 1px solid var(--color-gray4); padding: 6px; display: flex; flex-direction: column; gap: 10px; height: calc(calc(var(--vh, 1vh) * 100) - 72px); overflow-y: auto; scrollbar-width: none;}
#sidebar .tmB_tab > li {display: flex; align-items: center; justify-content: center;}
#sidebar .tmB_tab > li:hover button, #sidebar .tmB_tab > li.active button, #sidebar .tmB_tab > li.active button svg, #sidebar .tmB_tab > li.active button svg * {background: #eeedf6; color: var(--bg-purple);}
#sidebar .tmB_tab > li button {width: 100%; height: 66px;display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border-radius: 5px; color: var(--color-black2);}
#sidebar .tmB_tab > li button i {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;}
#sidebar .tmB_tab > li button svg {max-width: 80%; height: 30px; flex :none;}
#sidebar .tmB_tab > li button h2 {font-size: 0.875rem; font-weight: 500;}
#sidebar .tmB_tab > li.active button i {fill: var(--bg-purple);}
#sidebar .tabPanel_wrap {max-height: calc(calc(var(--vh, 1vh) * 100) - 118px); overflow-y: auto; scrollbar-width: thin;}
#sidebar .tabPanel_wrap .tabpanel {width: 100%; height: 0; visibility: hidden; position: absolute; overflow: hidden;}
#sidebar .tabPanel_wrap .tabpanel.active {height: auto; visibility: visible; position: static; overflow: visible;}
@keyframes blinkBorder {
0% { border: 2px solid transparent; }
20% { border: 2px solid #5a52a3; }
50% { border: 2px solid transparent; }
70% { border: 2px solid #5a52a3; }
100% { border: 2px solid transparent; }
}
#sidebar .tmB_tab > li button.blink {animation: blinkBorder 2s 3;}
/* 사이드바 제목 스타일 */
/*#sidebar h3 { margin: 0 0 10px; font-size: 18px; color: #333; padding: 10px; }*/
/* 사이드바 버튼 스타일 */
#sidebar button.TCbtn {width: 100%; min-height: unset; font-size: 0.75rem; border-radius: 5px;}
#sidebar button.TCbtn i {font-size: 1rem;}
#sidebar button.TCbtn_icon {border-radius: 50%;}
#sidebar button.TCbtn_icon, #sidebar button.TCbtn_sns {width: 50px;}
#sidebar button.TCbtn_paging i {font-size: 50px;}
/* 사이드바 섹션 제목 스타일 */
.sidebar-section .sidebar-scroll { font-size: 1rem; font-weight: 600; color: #666; }
/* 사이드바 버튼 */
.sidebar-buttons { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 10px; padding: 4px 0 10px; font-size: 0.875rem; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; }
.sidebar-buttons.grid1 {grid-template-columns: 1fr;}
.sidebar-buttons button { width: 100%; min-height: 60px; border: 1px solid var(--color-gray4); padding: 0 2px; border-radius: 4px; }
/* 접힌 상태 */
.sidebar-buttons.collapsed { max-height: 0; padding: 0; opacity: 0; pointer-events: none; }
/* 컨텐츠 검색창 */
.tabCont_wrap {}
.tabCont_wrap .tabSch_wrap {padding: 14px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.tabCont_wrap .tabSch_wrap .sch_wrap {display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--color-gray4); border-radius: 5px; height: 30px; padding: 0 10px; flex: 1;}
.tabCont_wrap .tabSch_wrap .sch_wrap input {border: 0; border-radius: 5px; width: 100%; font-size: 0.875rem; padding: 2px 4px;}
.tabCont_wrap .tabSch_wrap .sch_wrap input:focus {outline: none;}
.tabCont_wrap .tabSch_wrap .reset_btn {font-size: 12px;}
.tabCont_wrap .tabSch_wrap .reset_btn i {font-size: 12px;}
.tabCont_wrap .tabPanel_wrap {padding: 10px; border-top: 1px solid var(--color-gray4); overflow-y: auto;}
/* 텍스트 추가 */
.sidebar-buttons.text-buttons button {display: flex; align-items: center; justify-content: center;}
.sidebar-buttons.text-buttons button p {width: fit-content;}
.sidebar-buttons.text-buttons button#add-line {flex-direction: column; gap: 4px;}
.sidebar-buttons.text-buttons button#add-line hr {width: calc(100% - 10px);}
.sidebar-buttons.text-buttons button :is(h1, h2, h3, h4, h5, h6) {margin: 0;}
.sidebar-buttons.text-buttons .tm_h2 {padding-left: 34px;}
.sidebar-buttons.text-buttons h2.tm_h2::before {top: 50%; transform: translateY(-50%); width: 30px;}
/* 이미지 추가 */
.sidebar-buttons.img-buttons {padding: 10px 0;}
.sidebar-buttons.img-buttons button {height: auto; border: 0; padding: 0; border-radius: 0;}
.fileWrap {}
.fileWrap .btn-upload {background: var(--bg-purple); color: #fff; border-color: var(--bg-purple); border-radius: 3px; padding: 4px 10px; width: 100%;}
/* 이미지 삭제 */
.img-fn-wrap {position: relative; height: 100%;}
.sidebar-buttons.img-buttons .img-fn-wrap .delete-btn {position: absolute; top: 0; right: 0; width: 24px; height: 24px; min-height: unset; border-radius: 4px; background-color: rgba(0, 0, 0, 0.7); color: #fff; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 1;}
.sidebar-buttons.img-buttons .img-fn-wrap .delete-btn:hover { background-color: #f44336; color: #fff;}
/* 아이콘 목록 */
.sidebar-buttons.icon_list_wrap {display: block; padding: 0;}
.sidebar-buttons.icon_list_wrap .icon_all {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 10px;}
.sidebar-buttons.icon_list_wrap .icon_all li {height: 60px; border: 1px solid var(--color-gray4); background-color: #fff; padding: 0 2px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer;}
.sidebar-buttons.icon_list_wrap .icon_all li i {max-width: 16px; max-height: 16px; font-size: 1rem;}
.sidebar-buttons.icon_list_wrap .icon_all li p {}
.sidebar-buttons.icon_list_wrap .icon_all li span {font-size: 12px; word-break: keep-all; text-align: center;}
.sidebar-buttons .icon_list {display: none;}
.sidebar-buttons button.TCbtn_sns {border: 0;}
.sidebar-buttons button.TCbtn_sns i {width: 50px; height: 50px;}
/* ---좌측 메뉴 끝--- */
/* ---우측 메뉴--- */
#rsidebar { top: 0; right: 0; width: 280px; max-height: calc(calc(var(--vh, 1vh) * 100) - 60px); border-left: 1px solid #ccc; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin; z-index: 99;}
#rsidebar .tmB_tab {display: flex; align-items: center; justify-content: space-around}
#rsidebar .tmB_tab > li {width: 100%;}
#rsidebar .tmB_tab > li button {width: 100%; padding: 10px; font-size: 1.075rem; font-weight: 600; color: #393434; border-bottom: 3px solid #f1f2f4;}
#rsidebar .tmB_tab > li.active button {border-bottom: 3px solid var(--bg-purple);}
#rsidebar .setPanel_wrap {max-height: calc(calc(var(--vh, 1vh) * 100) - 118px); overflow-y: auto; scrollbar-width: thin;}
#rsidebar .setPanel_wrap .tabpanel {width: 100%; height: 0; visibility: hidden; position: absolute; overflow: hidden;}
#rsidebar .setPanel_wrap .tabpanel.active {height: auto; visibility: visible; position: static; overflow: visible;}
#rsidebar input {width: 100%; padding: 2px 6px; border-radius: 5px;}
#rsidebar .sidebar-section.btn-tag {display: none;}
#rsidebar .sidebar-section.btn-tag.active {display: block;}
#rsidebar .sidebar-section h4 {padding: 6px 10px; background: #f1f2f4; color: #393434;}
#rsidebar .sidebar-buttons.no-grid {display: block;}
#rsidebar .sidebar-buttons.collapsed {padding: 0;}
#rsidebar .sidebar-buttons + .sidebar-buttons {padding-top: 0;}
#rsidebar .sidebar-buttons {grid-template-columns: repeat(2, 1fr); gap: 8px 4px; padding: 10px;}
#rsidebar .sidebar-buttons label {font-size: 0.85rem; color: var(--color-black2);}
#rsidebar .sidebar-buttons label + div {margin-top: 4px;}
#rsidebar .sidebar-buttons button { display: block; width: 100%; margin-bottom: 5px;}
#rsidebar .sidebar-buttons textarea {max-width: 100%; width: 100%; border-radius: 4px; padding: 4px; min-height: 10px;}
#rsidebar .sidebar-buttons .sidebar-wrap {display: flex; flex-direction: column; gap: 4px;}
#rsidebar .sidebar-buttons .sidebar-wrap label {}
#rsidebar .sidebar-buttons .sidebar-wrap input, #rsidebar .sidebar-buttons select {width: 100%; min-height: 30px; border-radius: 5px; font-size: 0.8rem; line-height: 1;}
#rsidebar .sidebar-buttons .space-wrap {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px 4px; font-size: 0.875rem;}
#rsidebar .sidebar-buttons .input-space {display: flex; align-items: center; gap: 2px; border: 1px solid #ccc; /*padding: 2px 4px;*/ border-radius: 5px;}
#rsidebar .sidebar-buttons .input-space input {border: 0; min-height: 26px;}
#rsidebar .sidebar-buttons .input-space input:focus {outline: none;}
#rsidebar .sidebar-buttons .input-space p {flex: none; line-height: 1;}
#rsidebar .sidebar-buttons .input-space select {width: fit-content; padding: 4px 16px 4px 4px; background-position: calc(100% - 5px); border: 0;}
#rsidebar .sidebar-buttons .input-space select:focus {outline: none;}
#rsidebar .sidebar-buttons .space-set {display: grid; grid-template-columns: repeat(2, 1fr); position: relative; border-radius: 5px;}
#rsidebar .sidebar-buttons .space-set > div {cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid #ccc;}
#rsidebar .sidebar-buttons .space-set > div.active {background: var(--bg-purple); border: 1px solid var(--bg-purple); color: #fff;}
#rsidebar .sidebar-buttons .space-set > div:first-child {border-radius: 5px 0 0 5px; border-right: 0;}
#rsidebar .sidebar-buttons .space-set > div:last-child {border-radius: 0 5px 5px 0; border-left: 0;}
#rsidebar .sidebar-buttons .space-set .set_btn {width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--bg-purple);}
#rsidebar .sidebar-buttons .space-set .active .set_btn {border: 2px solid #fff;}
#rsidebar .sidebar-buttons .space-set .all_set {}
#rsidebar .sidebar-buttons .space-set .part_set {border: 2px solid var(--bg-purple); border-right: 2px dotted var(--bg-purple); border-bottom: 2px dotted var(--bg-purple);}
#rsidebar .sidebar-buttons .space-set .active .part_set {border: 2px solid #fff; border-right: 2px dotted #fff; border-bottom: 2px dotted #fff;}
#rsidebar .sidebar-buttons .space-part-wrap {align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; display: none;}
#rsidebar .sidebar-buttons .space-part-wrap.active {display: flex;}
#rsidebar .sidebar-buttons .space-part-wrap .space-part-detail {width: 50%; display: flex; flex-direction: column; gap: 2px;}
#rsidebar .sidebar-buttons .space-part-wrap .space-part-detail label {font-size: 0.75rem; text-align: center; line-height: 1;}
#rsidebar .sidebar-buttons .space-part-wrap .space-part-detail-wrap {display: flex; gap: 4px; width: 100%;}
#rsidebar .sidebar-buttons .space-part-wrap.grid2.active {display: grid;}
#rsidebar .sidebar-buttons .space-part-wrap.grid2 .space-part-detail {width: 100%;}
#rsidebar .sidebar-buttons.flex-buttons {display: none;}
#rsidebar .sidebar-buttons.flex-buttons .space-part-wrap.active {display: flex; flex-wrap: unset;}
#rsidebar .sidebar-buttons .flex-item-wrap {display: flex; border-radius: 5px; border: 1px solid var(--color-gray4);}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item {flex: 1 1 0%; height: 30px; display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer;}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item:first-child {border-radius: 5px 0 0 5px;}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item:last-child {border-radius: 0px 5px 5px 0;}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item:not(:last-child) {border-right: 1px solid var(--color-gray4);}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item.active {background: var(--bg-purple);}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item.active i {filter: invert(1);}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i {width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; text-align: center; font-size: 1rem;}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.justify_start {background-image: url("../images/icon/justify_start.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.justify_center {background-image: url("../images/icon/justify_center.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.justify_end {background-image: url("../images/icon/justify_end.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.justify_between {background-image: url("../images/icon/justify_between.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.justify_around {background-image: url("../images/icon/justify_around.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.justify_evenly {background-image: url("../images/icon/justify_evenly.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.align_stretch {background-image: url("../images/icon/align_stretch.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.align_start {background-image: url("../images/icon/align_start.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.align_center {background-image: url("../images/icon/align_center.svg");}
#rsidebar .sidebar-buttons .flex-item-wrap .flex-item i.align_end {background-image: url("../images/icon/align_end.svg");}
#rsidebar .sidebar-buttons.border-color button {padding: 0; margin: 0; min-height: 32px;}
/* 토글 */
.toggle-wrap {display: flex; align-items: center; justify-content: end; gap: 8px; font-size: 0.875rem; font-weight: bold;}
.toggle-switch {position: relative; width: 42px; height: 24px; display: inline-block;}
.toggle-switch input {opacity: 0; width: 0; height: 0;}
.toggle-slider {position: absolute; cursor: pointer; inset: 0; background: #b4afdd; border-radius: 100px; transition: background 0.3s;}
.toggle-slider:before {content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: 0.3s;}
.toggle-switch input:checked + .toggle-slider {background: var(--bg-purple);}
.toggle-switch input:checked + .toggle-slider:before {transform: translateX(18px) translateY(-50%);}
.toggle-switch + input {margin-top: 4px;}
/* 사이드바 스크롤 */
.sidebar-scroll { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.sidebar-scroll .arrow { display: inline-block; width: 0; height: 0; margin-left: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #666; transition: transform 0.1s ease; }
.sidebar-scroll .arrow.active { transform: scaleY(-1); }
/* ---우측 메뉴 끝--- */
/* ---툴바--- */
#toolbar { position: sticky; top: 0; margin: 0 auto; padding: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background: #fff; font-size: 0.875rem; border: 1px solid #ddd; max-width: fit-content; border-radius: 10px; transition: all .3s; z-index: 3;}
#toolbar.active { border: 1px solid var(--bg-purple); border-radius: 10px; box-shadow: 0px 0px 4px rgba(0,0,0,0.1); }
#toolbar button { min-width: 26px; min-height: 30px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px;}
#toolbar button.active {background: var(--bg-purple);}
#toolbar button.active i {filter: invert(1);}
#toolbar select { min-height: 30px; border-radius: 5px; }
/* 컬러피커 스타일 */
#toolbar .color_pick_wrap {display: flex; align-items: center; gap: 0.5rem;}
#toolbar button.color_pick {display: flex; border-radius: 5px; padding: 0;}
#toolbar .pickr .pcr-button {min-width: unset; min-height: unset; display: flex; align-items: center; justify-content: center;}
#toolbar .pickr .pcr-button i {width: 30px; height: 30px; flex: none; background-repeat: no-repeat; background-size: cover; z-index: 1;}
#toolbar .color_pick .pickr .pcr-button i {background-image: url("../images/icon/color-pickr.svg"); filter: brightness(10);}
#toolbar .color_pick.color_pick_bg .pickr .pcr-button i {background-image: url("../images/icon/color-bg-pickr.svg");}
/* a태그 링크 팝업 */
#link-popup-layer {display: none; position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; z-index: 9999; background: rgba(0, 0, 0, 0.2);}
#link-popup-layer .layer-wrap {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.18); padding:24px 20px; min-width:320px; min-height:170px;}
#link-popup-layer .layer-wrap h3 {font-size: 1rem; margin-bottom: 14px;}
#link-popup-layer .layer-wrap ul li:not(:last-child) {margin-bottom: 12px;}
#link-popup-layer .layer-wrap ul li input, #link-popup-layer .layer-wrap ul li select {width: 100%; padding: 6px 8px; font-size: 0.875rem;}
#link-popup-layer .layer-wrap .btn-wrap {margin-top: 20px; display: flex; align-items: center; justify-content: right; gap: 8px;}
#link-popup-layer .layer-wrap .btn-wrap button {border-radius: 5px; font-size: 0.875rem; border: none; padding: 6px 18px;}
#link-popup-layer .layer-wrap .btn-wrap .insert_btn {background: var(--bg-purple); color: #fff;}
#link-popup-layer .layer-wrap .btn-wrap .cancel_btn {background: var(--bg-gray2);}
/* ---툴바 끝--- */
/* ---액션 도구모음--- */
.editor-action-btns {position: absolute; top: -28px; right: -2px; border-radius: 4px; display: flex; gap: 2px; background: var(--bg-purple); width: fit-content; z-index: 10;}
.editor-action-btns .action-btn {width: 24px; height: 24px; padding: 2px; font-size: 14px; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: unset; background: transparent !important;}
.editor-action-btns .action-btn:hover {background: #7e75d5;}
.editor-action-btns .action-btn:first-child {border-radius: 4px 0 0 4px;}
.editor-action-btns .action-btn:last-child {border-radius: 0px 4px 4px 0px;}
.editor-action-btns .action-btn i {background-repeat: no-repeat; background-size: cover; background-position: center; width: 20px; height: 20px;}
.editor-action-btns .action-btn.action-parent i {background-image: url("../images/icon/action_parent.svg");}
.editor-action-btns .action-btn.action-duplicate i {background-image: url("../images/icon/action_duplicate.svg"); width: 16px; height: 16px;}
.editor-action-btns .action-btn.action-delete i {background-image: url("../images/icon/action_delete.svg");}
.editor-action-btns .action-btn.action-menu i {background-image: url("../images/icon/action_menu.svg");}
/* ---액션 도구모음 끝--- */
/* ---요소 클릭 효과--- */
@keyframes glow {
0% { box-shadow: 0 0 5px var(--bg-purple); }
50% { box-shadow: 0 0 20px var(--bg-purple2); }
100% { box-shadow: 0 0 5px var(--bg-purple); }
}
/* ---요소 클릭 효과 끝--- */
/* ---에디터 내부--- */
/* 에디터 영역 스타일 */
#editor-container {max-height: calc(calc(var(--vh, 1vh) * 100) - 60px) !important; flex: 1; padding: 1rem; box-sizing: border-box; overflow: auto; scrollbar-width: thin; background: #fafafa; border: 1px solid #e5e5e5; position: relative; transition: all .3s;}
#editor-container .guide_txt {font-size: 1rem; color: red; margin-top: 10px;}
#editor-container .guide_txt p + p {margin-top: 4px;}
/* 시작 섹션 */
#editor .guide_layout {background-color: var(--bg-purple2);}
#editor .guide_column {display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: var(--bg-purple2);}
#editor .guide_column .start_txt {font-size: 1.125rem; font-weight: 600;}
#editor .guide_column .addCont_box {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}
#editor .guide_column .addCont_box button {width: 80px; height: 80px; border: 1px solid var(--color-gray2); border-radius: 5px; background-color: #fff;}
#editor .guide_column .addCont_box button i {font-size: 1.8rem; color: var(--bg-purple);}
#editor .guide_column .addCont_box p {margin: 0; padding: 0; font-size: 1rem; text-align: center;}
/* 에디터 본문 스타일 */
#editor {
border: 1px solid var(--color-gray4);
margin: 30px auto;
font-family: 'Pretendard', sans-serif;
outline: none;
background: #fff;
position: relative;
}
#editor .el-focus {
position: relative;
outline: 2px dashed var(--bg-purple);
outline-offset: -2px;
}
#editor .el-selected:not(img) {
position: relative;
z-index: 1;
outline: 2px solid var(--bg-purple) !important;
outline-offset: -2px;
animation: glow 2s infinite ease-in-out;
transition: transform 0.2s;
}
.tmB_container {display: flex; justify-content: space-between;}
.tmB-layout-container.guide-layout-container {display: flex; justify-content: space-between; width: 100%; position: relative;}
/* ---에디터 내부 끝--- */
/* 반응형 */
#editor-container.mo-size {padding: 0.75rem; margin: 0 auto;}
#editor-container.mo-size .tmB-layout-container.guide-layout-container, #editor-container.mo-size .empty-layout {min-height: 150px;}
#editor-container.mo-size #editor .guide_column .addCont_box button {width: 60px; height: 60px;}
#editor-container.mo-size .guide_txt {font-size: 0.775rem;}
#editor-container.mo-size .empty-layout:before {font-size: 0.7rem;}
#editor-container.mo-size #toolbar {padding: 0.4rem; gap: 0.3rem;}
#editor-container.mo-size #toolbar .color_pick_wrap {gap: 0.3rem;}
#editor-container.mo-size #toolbar button {font-size: 0.875rem;}
#editor-container.mo-size #toolbar input, #editor-container.mo-size select {font-size: 0.75rem; line-height: 1;}
#editor-container.mo-size #editor p {font-size: 0.775rem;}
#editor-container.mo-size #editor p.TCh1 {font-size: 24px; padding-left: 26px;}
#editor-container.mo-size #editor p.TCh1::before {top: 6px; width: 22px; height: 22px;}
#editor-container.mo-size #editor p.TCh2 {font-size: 22px; padding-left: 24px;}
#editor-container.mo-size #editor p.TCh2::before {top: 6px; width: 18px; height: 18px;}
#editor-container.mo-size #editor p.TCh3 {font-size: 20px; padding-left: 22px;}
#editor-container.mo-size #editor p.TCh3::before {top: 6px; width: 20px; height: 20px;}
#editor-container.mo-size #editor p.TCh4 {font-size: 18px; padding-left: 12px;}
#editor-container.mo-size #editor p.TCh4::before {top: -2px;}
#editor-container.mo-size .tmB-layout-container {flex-wrap: wrap;}
#editor-container.mo-size .tmB-layout-container[class*="grid"] {display: flex; flex-wrap: wrap;}
/* 브라우저 반응형 */
@media screen and (max-width: 1400px) {
#top .top_wrap {padding: 0 20px;}
#top .top_wrap [class^="top_"] {gap: 6px;}
#top .top_wrap .top_left {gap: 40px;}
#top .top_wrap .tm_logo::before {right: -20px;}
#top .top_wrap .title_wrap input {padding: 0 4px;}
#top .top_wrap .top_right .saveBtn_wrap button {padding: 0 14px;}
#top .top_wrap .top_mid .size_select {min-width: 180px; padding: 4px 28px 4px 12px;}
#top .top_wrap .top_mid .pct_wrap {gap: 2px; display: none;}
#top .top_wrap .top_right .historyBtn_wrap {gap: 4px;}
}
@media screen and (max-width: 1200px) {
#top .top_wrap .top_left {gap: 30px;}
#top .top_wrap .tm_logo::before {right: -14px;}
#top .top_wrap .top_mid .size_select, #top .top_wrap .top_mid .pct_wrap {display: none;}
#top .top_wrap .top_right .saveBtn_wrap button {padding: 0 12px;}
#top .top_wrap [class^="top_"] button {min-width: 36px; height: 36px;}
#top .top_wrap .top_right .historyBtn_wrap button {height: 34px;}
#top .top_wrap .top_right .historyBtn_wrap button i {width: 26px; height: 26px;}
.tabCont_wrap .tabSch_wrap .sch_wrap {padding: 0 5px; gap: 0;}
#sidebar {width: 280px; grid-template-columns: 70px 1fr;}
#sidebar .tmB_tab > li button {height: 60px;}
#sidebar .tmB_tab > li button h2 {font-size: 0.8rem;}
.sidebar-buttons button {min-height: 50px;}
#rsidebar .sidebar-buttons .toggle-wrap {font-size: 0.8rem; gap: 5px;}
#rsidebar {width: 260px;}
#editor-container .guide_txt {font-size: 0.875rem;}
}
@media screen and (max-width: 1024px) {
#top .top_wrap .tm_logo {font-size: 1.5rem;}
#top .top_wrap [class^="top_"] button.down_btn {display: none;}
#top .top_wrap .top_mid .top_device_wrap {display: none;}
#top .top_wrap .top_right .historyBtn_wrap {padding: 0;}
#toolbar button {padding: 0 2px;}
#toolbar button b, #toolbar button i, #toolbar button u, #toolbar button s {font-size: 1rem;}
.tabCont_wrap .tabSch_wrap, .tabCont_wrap .tabPanel_wrap {padding: 6px;}
#sidebar {width: 240px; grid-template-columns: 60px 1fr;}
#sidebar .tmB_tab {gap: 4px;}
#sidebar .tmB_tab > li button {height: 55px;}
#sidebar .tmB_tab > li button svg {height: 26px;}
.sidebar-buttons.sidebar-buttons .TCbtn {height: 40px;}
.sidebar-buttons.icon_list_wrap .icon_all {gap: 4px;}
#rsidebar {width: 180px;}
#rsidebar h3 {margin: 6px 0;}
#rsidebar .tmB_tab > li button {padding: 10px 4px;}
#rsidebar .sidebar-buttons {padding: 8px; gap: 4px; grid-template-columns: 1fr;}
#rsidebar .sidebar-buttons .toggle-switch {width: 38px; height: 22px;}
#rsidebar .sidebar-buttons .sidebar-wrap input, #rsidebar .sidebar-buttons select {min-height: 26px;}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap .flex-item:nth-child(3) {border-right: 0;}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap .flex-item:nth-child(n+4) {border-top: 1px solid var(--color-gray4);}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap .flex-item:first-child {border-radius: 5px 0 0 0;}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap .flex-item:nth-child(3) {border-radius: 0 5px 0 0;}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap .flex-item:nth-child(4) {border-radius: 0 0 0 5px;}
#rsidebar .sidebar-buttons .detail-display .flex-item-wrap .flex-item:last-child {border-radius: 0 0 5px 0;}
#rsidebar .sidebar-buttons .space-wrap {grid-template-columns: 1fr;}
#rsidebar .sidebar-buttons .space-set > div {padding: 4px;}
#editor-container {padding: 0.8rem;}
}
@media screen and (max-width: 800px) {
#top .top_wrap [class^="top_"] .previewBtn, #top .top_wrap [class^="top_"] .codeBtn {display: none;}
}
@media screen and (max-width: 768px) {
.tmB-layout-container.guide-layout-container, .empty-layout {min-height: 150px;}
#top {height: 50px;}
#top .top_wrap .tm_logo {font-size: 1.25rem;}
#top .top_wrap .top_right .historyBtn_wrap {display: none;}
}
@media screen and (max-width: 500px) {
.tmB-layout-container.guide-layout-container {min-height: 130px;}
}