@charset "UTF-8";
/* common */
body.menu-dragging {cursor:grabbing !important; user-select:none;}
body.menu-dragging * {cursor:grabbing !important;}
/* ============================================================
* 사용자 컨텐츠 영역 (디자인 빌더 캔버스 + 프론트엔드 렌더) — base.css * reset isolation
* - base.css * 룰이 모든 element 에 font-family/weight/size/color/letter-spacing/vertical-align 직접 박음
* - 사용자가 toolbar 로 부분만 색상/굵기 변경하면 다른 속성은 부모 inheritance 가 아닌 *의 기본값 받음
* - → 컨텐츠 영역 안의 element 는 inheritance 동작하도록 명시적으로 inherit (inline style 은 specificity 우선)
* ============================================================ */
[data-editable-key] *, .db-rt-dynamic * {font-family:inherit; font-weight:inherit; font-size:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; vertical-align:baseline;}
[data-editable-key] strong, [data-editable-key] b,
.db-rt-dynamic strong, .db-rt-dynamic b {font-weight:bold;}
[data-editable-key] em, [data-editable-key] i,
.db-rt-dynamic em, .db-rt-dynamic i {font-style:italic;}
[data-editable-key] u, .db-rt-dynamic u {text-decoration:underline;}
[data-editable-key] s, [data-editable-key] strike, [data-editable-key] del,
.db-rt-dynamic s, .db-rt-dynamic strike, .db-rt-dynamic del {text-decoration:line-through;}
[data-editable-key] sub, .db-rt-dynamic sub {vertical-align:sub; font-size:smaller;}
[data-editable-key] sup, .db-rt-dynamic sup {vertical-align:super; font-size:smaller;}
[data-editable-key] ul, .db-rt-dynamic ul {list-style:disc !important; padding-left:1.5em !important;}
[data-editable-key] ol, .db-rt-dynamic ol {list-style:decimal !important; padding-left:1.5em !important;}
[data-editable-key] li, .db-rt-dynamic li {display:list-item !important; list-style:inherit !important;}
[data-editable-key] ul li, .db-rt-dynamic ul li {list-style:disc !important;}
[data-editable-key] ol li, .db-rt-dynamic ol li {list-style:decimal !important;}
[data-editable-key] blockquote, .db-rt-dynamic blockquote {border-left:4px solid #d1d5db; padding-left:0.8em;}
/* db-header-box */
.db-header-box {padding:var(--padding-10) var(--padding-15); position:fixed; left:0; top:0; width:100%; z-index:1000; min-width:1024px; background:var(--color-black-500); border-bottom:1px solid var(--color-gray-300); display:flex; flex-wrap:wrap; align-items:center;}
.db-header-box .header-left {flex:1; min-width:0;}
.db-header-box .header-left h1 {font-size:var(--font-lg); font-weight:600; color:var(--color-white);}
.db-header-box .header-center ul {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-10);}
.db-header-box .header-center ul li .btn {display:block; font-size:0; width:var(--icon-32); height:var(--icon-32); background-size:cover; background-position:center; filter:var(--filter-gray-500);}
.db-header-box .header-center ul li .btn.desktop {background-image:url('../images/icon_pc.svg');}
.db-header-box .header-center ul li .btn.tablet {background-image:url('../images/icon_tablet.svg');}
.db-header-box .header-center ul li .btn.mobile {background-image:url('../images/icon_mobile.svg');}
.db-header-box .header-center ul li .btn:hover {filter:var(--filter-white);}
.db-header-box .header-center ul li .btn.active {filter:var(--filter-white);}
.db-header-box .header-right {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.db-header-box .header-right ul {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-10);}
.db-header-box .header-right ul:after {display:inline-block; content:""; width:1px; height:15px; background:var(--color-gray-500); margin:0 var(--margin-5) 0 0;}
.db-header-box .header-right ul:last-of-type:after {display:none;}
.db-header-box .header-right ul li .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color:var(--color-white); gap:var(--gap-3); border-radius:var(--radius-5); padding:var(--padding-5) var(--padding-10);}
.db-header-box .header-right ul li .btn:before {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); background-size:cover; background-position:center; filter:var(--filter-white);}
.db-header-box .header-right ul li .btn.back:before {background-image:url('../images/icon_back.svg');}
.db-header-box .header-right ul li .btn.confirm {background:var(--color-active);}
.db-header-box .header-right ul li .btn.confirm:before {background-image:url('../images/icon_check_line.svg');}
.db-header-box .header-right ul li .btn.end {background:var(--color-white); color:var(--color-black);}
.db-header-box .header-right ul li .btn.end:before {background-image:url('../images/icon_logout.svg'); filter:var(--filter-black);}
.db-header-box .header-right ul li .btn.preview:before {background-image:url('../images/icon_pc_mobile.svg');}
.db-header-box .header-right ul li .btn.menu:before {background-image:url('../images/icon_menu_setting.svg');}
.db-header-box .header-right ul li .btn.site:before {background-image:url('../images/icon_monitor_check.svg');}
.db-header-box .header-right ul li .btn.forward:before {background-image:url('../images/icon_forward.svg');}
/* db-section-box */
.db-section-box {margin:53px 0 0; display:flex; flex-wrap:wrap;}
.db-section-box .db-section-content {transition:all ease 0.5s; width:100%; overflow-x:auto;}
.db-section-box .db-section-content .content-inner {transition:max-width .4s ease, margin .4s ease; max-width:100%; margin:0 auto;}
.db-section-box .db-section-side {pointer-events:none; opacity:0; transition:all ease 0.5s; position:fixed; right:-30px; top:0; width:340px; height:100%; z-index:1000; background:var(--color-white); display:flex; flex-direction:column;}
.db-section-box .db-section-side .side-head {width:100%; border-bottom:1px solid var(--color-gray-300); background:var(--color-black-500); padding:var(--padding-10); border-left:1px solid var(--color-black-100); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.db-section-box .db-section-side .side-head h2 {font-size:var(--font-md); font-weight:500; color:var(--color-white);}
.db-section-box .db-section-side .side-head .button-box {display:flex; gap:var(--gap-5);}
.db-section-box .db-section-side .side-body {width:100%; flex:1; min-height:0; overflow-y:auto; border-left:1px solid var(--color-gray-300);}
.db-section-box .db-section-side .side-foot {width:100%; border-top:1px solid var(--color-gray-300); padding:0; border-left:1px solid var(--color-gray-300);}
.db-section-box .db-section-side .side-foot .button-box {display:flex; gap:var(--gap-5);}
.db-section-box .db-section-side .side-foot .button-box .btn {flex:1; height:var(--height-35); font-size:var(--font-sm); border-radius:var(--radius-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li {border-bottom:5px solid var(--color-gray-200);}
.db-section-box .db-section-side .side-body .body-list > ul > li:last-of-type {border:0;}
.db-section-box .db-section-side .side-body .body-list > ul > li .toggle {padding:0 var(--padding-10); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%; height:40px;}
.db-section-box .db-section-side .side-body .body-list > ul > li .toggle:after {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_arrow_down.svg') no-repeat center / cover; transition:transform .2s;}
.db-section-box .db-section-side .side-body .body-list > ul > li .toggle[aria-expanded="true"]:after {transform:rotate(180deg);}
.db-section-box .db-section-side .side-body .body-list > ul > li .toggle span {flex:1; min-width:0; font-size:var(--font-sm); text-align:left;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list {background:var(--color-gray-100); border-top:1px solid var(--color-gray-200); padding:var(--padding-10);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 var(--margin-10);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li:last-of-type {margin:0;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .title {width:120px;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .title .tooltip-box .tooltip-btn {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-3);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .title .tooltip-box .tooltip-btn:after {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_tooltip.svg') no-repeat center / cover;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content {flex:1; min-width:0;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .input-box {border-radius:var(--radius-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .input-box input {height:var(--height-30); font-size:var(--font-sm);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .file-box .file-name {border-radius:var(--radius-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .file-box .file-name p {height:var(--height-30); line-height:var(--height-30); font-size:var(--font-sm); padding:0;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .file-box .file-select {margin:0 0 0 var(--margin-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .file-box .file-select .button-box .btn {height:var(--height-30); font-size:var(--font-xs); border-radius:var(--radius-5); padding:0 var(--padding-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .switch-box label {width:var(--width-30); height:var(--height-15);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .switch-box label span {width:12px; height:12px; top:1.6px; left:2px;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .switch-box input:checked ~ label span {left:16px;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .color-box .sp-replacer {width:var(--width-30); height:var(--height-30);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .input-box textarea {font-size:var(--font-sm); border-radius:var(--radius-5); padding:var(--padding-5); resize:vertical; width:100%;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .select-box select {height:var(--height-30); font-size:var(--font-sm);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .range-box {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .range-box input[type=range] {flex:1; min-width:0;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .range-box .range-value {display:flex; align-items:center; gap:2px;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .range-box .range-value input {width:50px; height:var(--height-30); font-size:var(--font-sm); text-align:center;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .check-box label:before {width:var(--icon-16); height:var(--icon-16);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .check-box label span {font-size:var(--font-xs);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .radio-box label:before {width:var(--icon-16); height:var(--icon-16);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li .content .radio-box label span {font-size:var(--font-xs);}
.db-section-box .db-section-side .side-foot {width:100%; border-top:1px solid var(--color-gray-300); padding:var(--padding-10);}
.db-section-box .db-section-side .side-foot .foot-list ul {display:flex; flex-wrap:wrap; gap:var(--gap-5);}
.db-section-box .db-section-side .side-foot .foot-list ul li {flex:1; min-width:0;}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn {display:block; text-align:center; width:100%;}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn:before {filter:var(--filter-gray-1000); display:block; content:""; margin:0 auto var(--margin-5); width:var(--icon-16); height:var(--icon-16); background-size:cover; background-position:center;}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn span {display:block; text-align:center; font-size:var(--font-xs); color:var(--color-gray-1000);}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-refresh:before {background-image:url('../images/icon_back.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-copy:before {background-image:url('../images/icon_copy.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-delete:before {background-image:url('../images/icon_trash_2.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-hide:before {background-image:url('../images/icon_eye_off.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-hide.active:before {background-image:url('../images/icon_eye.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-move:before {background-image:url('../images/icon_move.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-move-up:before {background-image:url('../images/icon_move_up.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn-move-down:before {background-image:url('../images/icon_move_down.svg');}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn:hover span {color:var(--color-active); font-weight:500;}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn:hover:before {filter:var(--filter-active-100);}
.db-section-box .db-section-side .side-foot .foot-list ul li .btn.disabled {background:none !important; border:0 !important; opacity:0.5;}
.db-section-box.active .db-section-content {width:calc(100% - 340px);}
.db-section-box.active .db-section-side {pointer-events:inherit; opacity:1; right:0;}
/* db-title-box */
.db-title-box {margin:0 0 var(--margin-10);}
.db-title-box .subject {font-size:var(--font-xl); font-weight:600;}
.db-title-box .text {font-size:var(--font-md); color:var(--color-black-300); word-break:keep-all; margin:var(--margin-5) 0 0;}
/* db-menu-list-box */
.db-menu-list-box > ul > li {margin:0 0 var(--margin-5); display:flex; flex-wrap:wrap; align-items:center; border:1px dashed var(--color-gray-400); border-radius:var(--radius-10); padding:var(--padding-10); gap:var(--gap-5);}
.db-menu-list-box > ul > li:last-of-type {margin:0;}
.db-menu-list-box > ul > li .sort {cursor:grab; border:0; padding:0; flex-shrink:0; width:var(--icon-20); height:var(--icon-20); font-size:0; background:url('../images/icon_sortable.svg') no-repeat center / 14px;}
.db-menu-list-box > ul > li .subject {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-10);}
.db-menu-list-box > ul > li .subject p {flex:1; min-width:0; font-size:16px; font-weight:500;}
.db-menu-list-box > ul > li .subject .input-box {flex:1; min-width:0;}
.db-menu-list-box > ul > li .subject .input-box input {height:var(--height-35);}
.db-menu-list-box > ul > li.depth .subject:before {display:inline-block; content:""; width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_arrow_down.svg') no-repeat center / cover;}
.db-menu-list-box > ul > li.depth-2 {margin:0 0 var(--margin-5) var(--margin-10); width:calc(100% - 10px);}
.db-menu-list-box > ul > li.depth-3 {margin:0 0 var(--margin-5) var(--margin-20); width:calc(100% - 20px);}
.db-menu-list-box > ul > li.disabled {opacity:.5;}
.db-menu-list-box > ul > li.is-dragging {opacity:.3; pointer-events:none;}
.db-menu-list-box > ul > li.sort-insert-before {box-shadow:0 -3px 0 0 var(--color-active,#4A7CFE);}
.db-menu-list-box > ul > li.sort-insert-after {box-shadow:0 3px 0 0 var(--color-active,#4A7CFE);}
.db-menu-list-box > ul > li.sort-nest-target {background:color-mix(in srgb, var(--color-active,#4A7CFE) 10%, transparent); border-color:var(--color-active,#4A7CFE);}
.sort-ghost-li {border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.15); background:var(--color-white,#fff);}
.sort-ghost-li ul {list-style:none; padding:0; margin:0;}
.sort-ghost-li li {border:1px solid var(--color-active,#4A7CFE); border-radius:10px; padding:15px; gap:12px; display:flex; flex-wrap:wrap; align-items:center; background:var(--color-white,#fff);}
/* db-none-box */
.db-none-box {position:relative; position:fixed; left:50%; top:53px; transform:translateX(-50%); width:100%; height:calc(100% - 53px); background:var(--color-gray-100); display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.db-none-box .inner {max-width:650px; margin:0 auto; background:var(--color-white); padding:var(--padding-50); border-radius:var(--radius-10); border:2px dashed var(--color-gray-200);}
.db-none-box h3 {font-size:var(--font-xxxl); font-weight:700; color:var(--color-black-400); text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--gap-20);}
.db-none-box p {text-align:center; font-size:var(--font-lg); color:var(--color-gray-800); word-break:keep-all; margin:var(--margin-10) 0 0;}
.db-none-box .empty-illust {width:160px; height:130px; margin:0 auto 15px; position:relative;}
.db-none-box .empty-illust-page {width:80px; height:100px; background:var(--color-gray-100); border:2px solid var(--color-gray-200); border-radius:var(--radius-10); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.db-none-box .empty-illust-page::before {content:""; position:absolute; top:20px; left:14px; right:14px; height:8px; background:var(--color-gray-200); border-radius:var(--radius-5);}
.db-none-box .empty-illust-page::after {content:""; position:absolute; top:36px; left:14px; width:60%; height:8px; background:var(--color-gray-200); background:var(--color-gray-200); border-radius:var(--radius-5);}
.db-none-box .empty-illust-plus {font-size:22px; font-weight:300; box-shadow: 0 2px 8px rgba(0,0,0,0.3); width:36px; height:36px; background:var(--color-active); border-radius:50%; position:absolute; right:20px; bottom:5px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color:#fff;}
/* widget-section — 빌더(db-widget-box)와 프론트엔드(section) 공통 기본 스타일 */
.widget-section {position:relative;}
/* undo/redo 후 변경된 위젯 시각 강조 — 1.8초 동안 outline 깜빡임.
사용자가 "어떤 위젯이 되돌려졌는지" 즉각 인식 가능 */
.db-widget-box.db-history-flash {
animation: dbHistoryFlash 1.8s ease;
z-index: 100;
}
@keyframes dbHistoryFlash {
0% {outline: 3px solid var(--color-active); outline-offset: 4px; box-shadow: 0 0 0 6px rgba(166,35,41,0.15);}
50% {outline: 3px solid var(--color-active); outline-offset: 4px; box-shadow: 0 0 0 10px rgba(166,35,41,0.08);}
100% {outline: 3px solid transparent; outline-offset: 4px; box-shadow: 0 0 0 0 rgba(166,35,41,0);}
}
/* 엔터 줄바꿈 device 별 표시 —
마커 기반.
- 마커 없는
: 모든 device 에 표시 (기본/하위 호환)
- 마커 있는
: 명시된 device 에만 표시. 마커는 공백 구분 다중 가능 (예: "desktop tablet")
※ data-d 속성에 mce 등 TinyMCE 임시 마커가 함께 들어와도 word-list 매칭이라 안전 */
/* 프론트엔드 — viewport 미디어 쿼리 기반 */
@media(min-width:1101px) {
br[data-d]:not([data-d~="desktop"]) {display:none;}
}
@media(max-width:1100px) and (min-width:601px) {
br[data-d]:not([data-d~="tablet"]) {display:none;}
}
@media(max-width:600px) {
br[data-d]:not([data-d~="mobile"]) {display:none;}
}
/* 디자인모드 — html.db-sim-{device} 클래스 기반 (viewport 와 무관, 시뮬레이션 우선).
각 sim 별로 명시 표시(!important) + 명시 숨김(!important) 둘 다 출력하여 viewport 룰을 확실히 override */
html.db-sim-desktop br[data-d~="desktop"] {display:inline !important;}
html.db-sim-desktop br[data-d]:not([data-d~="desktop"]) {display:none !important;}
html.db-sim-tablet br[data-d~="tablet"] {display:inline !important;}
html.db-sim-tablet br[data-d]:not([data-d~="tablet"]) {display:none !important;}
html.db-sim-mobile br[data-d~="mobile"] {display:inline !important;}
html.db-sim-mobile br[data-d]:not([data-d~="mobile"]) {display:none !important;}
/* builder-widgets-wrap — 프론트엔드 메인 위젯 wrap.
flex column 으로 형제 widget-section 간 margin collapse 차단 →
디자인모드 편집 시 보이는 간격과 프론트 렌더링이 일치 (예: 50+50=100px 그대로 표시). */
.builder-widgets-wrap {display:flex; flex-direction:column;}
/* 탭 자식 위젯 컨테이너 — 탭 안의 자식 widget-section 간 margin collapse 차단.
(디자인모드의 db-tab-item 도 동일 클래스 사용)
[hidden] 속성을 가진 비활성 탭은 display:none 이 우선되어야 하므로 :not([hidden]) 으로 한정 */
.tab-content-box:not([hidden]) {display:flex; flex-direction:column;}
/* db-widget-box — 빌더 전용 */
.db-widget-box {position:relative;}
.db-widget-box .widget-hide {position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-size:var(--font-md); font-weight:600; pointer-events:none;}
.db-widget-box .widget-setting {position:absolute; right:10px; top:10px; z-index:10; width:32px; height:32px; border-radius:var(--radius-5); background:var(--color-black-500); font-size:0; opacity:0; transition:opacity .2s; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.db-widget-box .widget-setting:after {display:block; content:""; width:var(--icon-20); height:var(--icon-20); background:url('../images/icon_setting.svg') no-repeat center / cover; filter:var(--filter-white);}
.db-widget-box .widget-content {min-height:60px; position:relative; z-index:1;}
.db-widget-box:hover .widget-setting {opacity:1;}
/* db-add-widget-box — absolute로 레이아웃 영향 없이 위젯 경계에 겹침 */
.db-add-widget-box {position:relative; height:0; display:flex; align-items:center; justify-content:center; z-index:1999;}
.db-add-widget-box::before {content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--color-active); opacity:0; transition:opacity .2s;}
.db-add-widget-box::after {content:""; position:absolute; left:0; right:0; top:-10px; height:20px; z-index:0;}
.db-add-widget-box .btn-add-widget {width:28px; height:28px; border-radius:50%; background:var(--color-active); color:var(--color-white); font-size:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, transform .2s, opacity .2s; position:relative; z-index:1; opacity:0;}
.db-add-widget-box .btn-add-widget svg, .db-add-widget-box .btn-add-widget:after {display:block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_plus.svg') no-repeat center / cover; filter:var(--filter-white);}
.db-add-widget-box .btn-add-widget:hover {background:var(--color-active); transform:scale(1.15);}
.db-add-widget-box:hover::before {opacity:1;}
.db-add-widget-box:hover .btn-add-widget {opacity:1;}
/* db-widget-page-box */
.db-widget-page-box {display:flex; flex-wrap:wrap; height:100vh; min-height:700px;}
/* db-widget-cate-box */
.db-widget-cate-box {width:230px; padding:var(--padding-20); background:var(--color-black-700); overflow-y:auto;}
.db-widget-cate-box .widget-inner {padding:0 0 var(--padding-30); margin:0 0 var(--margin-30); border-bottom:1px dashed var(--color-gray-700);}
.db-widget-cate-box .widget-inner:last-of-type {padding:0; margin:0; border:0;}
.db-widget-cate-box .widget-inner h3 {font-size:var(--font-xl); font-weight:600; margin:0 0 var(--margin-20); color:var(--color-white);}
.db-widget-cate-box .widget-inner ul {display:flex; flex-wrap:wrap; margin:0 -5px -15px;}
.db-widget-cate-box .widget-inner ul li {width:calc(33.33% - 10px); margin:0 var(--margin-5) var(--margin-15);}
.db-widget-cate-box .widget-inner ul li .widget {display:block; width:100%;}
.db-widget-cate-box .widget-inner ul li .widget:before {display:block; content:""; width:var(--icon-32); height:var(--icon-32); background:var(--widget-icon, none) no-repeat center / contain; margin:0 auto var(--margin-5); filter:var(--filter-gray-400);}
.db-widget-cate-box .widget-inner ul li .widget span {display:block; font-size:var(--font-xs); text-align:center; color:var(--color-gray-400); font-weight:500;}
.db-widget-cate-box .widget-inner ul li .widget:hover:before {filter:var(--filter-white);}
.db-widget-cate-box .widget-inner ul li .widget:hover span {color:var(--color-white);}
.db-widget-cate-box .widget-inner ul li .widget.active:before {filter:var(--filter-white);}
.db-widget-cate-box .widget-inner ul li .widget.active span {color:var(--color-white);}
.db-widget-cate-box .widget-inner ul li .widget.disabled {background:none !important; border:0 !important; opacity:0.5;}
/* db-widget-list-box */
.db-widget-list-box {flex:1; min-width:0; background:var(--color-gray-200); padding:var(--padding-20);}
.db-widget-list-box .list > ul {columns:2; column-gap:var(--gap-15);}
.db-widget-list-box .list > ul > li {break-inside:avoid; margin-bottom:var(--margin-15); border-radius:var(--radius-5); overflow:hidden; position:relative;}
.db-widget-list-box .list > ul > li .inner {display:block; position:relative;}
.db-widget-list-box .list > ul > li .inner .list-image img {width:100%;}
.db-widget-list-box .list > ul > li .inner .list-content {margin:var(--margin-5) 0 0;}
.db-widget-list-box .list > ul > li .inner .list-content p {font-size:var(--font-sm);}
/* 사이트 설정 사이드 패널 — 위젯 설정과 동일 스타일, inert 속성으로 개별 제어 */
.db-section-box .db-site-side[inert] {pointer-events:none; opacity:0; right:-30px;}
.db-section-box.active .db-site-side:not([inert]) {pointer-events:inherit; opacity:1; right:0;}
/* 탭 콘텐츠 빈 상태 */
.tab-none-box {padding:var(--padding-30); text-align:center;}
.tab-none-box .inner {max-width:400px; margin:0 auto; padding:var(--padding-20); border:2px dashed var(--color-gray-700); border-radius:var(--radius-10); background:var(--color-white);}
.tab-none-box p {font-size:var(--font-md); color:var(--color-gray-900);}
@media (max-width:991px){
.tab-none-box {padding:0;}
.tab-none-box p {font-size:var(--font-sm);}
}
/* 자식 위젯 추가 버튼 — db-add-widget-box 패턴과 동일 (height:0, hover 히트영역) */
.db-add-child-widget-box {position:relative; height:0; min-height:0; overflow:visible; z-index:15;}
.db-add-child-widget-box::before {content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--color-active); opacity:0; transition:opacity .2s;}
.db-add-child-widget-box::after {content:""; position:absolute; left:0; right:0; top:-10px; height:20px; z-index:0;}
.db-add-child-widget-box .btn-add-child-widget {width:24px; height:24px; border-radius:50%; background:var(--color-active); color:var(--color-white); font-size:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, transform .2s, opacity .2s; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; opacity:0; border:none;}
.db-add-child-widget-box .btn-add-child-widget:after {display:block; content:""; width:var(--icon-12,12px); height:var(--icon-12,12px); background:url('../images/icon_plus.svg') no-repeat center / cover; filter:var(--filter-white);}
.db-add-child-widget-box .btn-add-child-widget:hover {background:var(--color-active); transform:translate(-50%,-50%) scale(1.15);}
.db-add-child-widget-box:hover::before {opacity:1;}
.db-add-child-widget-box:hover .btn-add-child-widget {opacity:1;}
/* 위젯 내 대상 요소 — hover 점선 테두리 (!important: 인라인 outline:none 오버라이드) */
.db-widget-box [data-db-target]:hover {outline:1px dashed var(--color-active, #6366f1) !important; outline-offset:-1px !important; cursor:pointer;}
/* 위젯 내 대상 요소 — 클릭 선택 실선 테두리 */
.db-widget-box [data-db-target].db-target-active {outline:2px solid var(--color-active, #6366f1) !important; outline-offset:-1px !important;}
/* ============================================================
* Richtext Floating Toolbar (캔버스 인라인 편집 모듈)
* ============================================================ */
/* contenteditable 활성 시각 — 호버/포커스 시 외곽선 표시 */
[data-editable-key][contenteditable="true"] {outline:none; min-height:1em; border-radius:2px; transition:box-shadow .12s ease, background-color .12s ease; cursor:text;}
[data-editable-key][contenteditable="true"]:hover {box-shadow:0 0 0 1px rgba(0,123,255,0.25); background-color:rgba(0,123,255,0.03);}
[data-editable-key][contenteditable="true"]:focus {box-shadow:0 0 0 2px var(--color-active, #2e7cff); background-color:rgba(255,255,255,0.4);}
/* 사이드 패널의 richtext 안내 박스 — 편집은 캔버스에서 직접 진행함을 안내 */
.richtext-side-notice {padding:12px 14px; background:#f6f9ff; border:1px dashed #b9cdff; border-radius:6px; color:#444;}
.richtext-side-notice .rt-notice-line {margin:0 0 6px; font-size:13px; color:var(--color-active, #2e7cff);}
.richtext-side-notice .rt-notice-hint {margin:0; font-size:12px; color:#777; line-height:1.45;}
/* Floating Toolbar — 텍스트 선택 시 위쪽에 떠오르는 작은 다크 바 */
.db-rt-toolbar {position:absolute; z-index:10010; display:inline-flex; align-items:center; gap:2px; background:#2c2c2c; color:#fff; border-radius:6px; padding:4px 6px; box-shadow:0 6px 20px rgba(0,0,0,0.25); font-size:13px; user-select:none;}
.db-rt-toolbar .rt-btn {all:unset; box-sizing:border-box; cursor:pointer; min-width:28px; height:28px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; color:#fff; font-size:14px; line-height:1; transition:background-color .12s ease;}
.db-rt-toolbar .rt-btn:hover {background:rgba(255,255,255,0.15);}
.db-rt-toolbar .rt-btn:focus-visible {outline:2px solid var(--color-active, #2e7cff); outline-offset:1px;}
/* toolbar 아이콘 텍스트(b/i/u/s) — 사이트 공통 CSS 영향을 막기 위해 명시적 흰색 강제 */
.db-rt-toolbar .rt-btn b,
.db-rt-toolbar .rt-btn i,
.db-rt-toolbar .rt-btn u,
.db-rt-toolbar .rt-btn s {color:#fff !important;}
.db-rt-toolbar .rt-btn b {font-weight:800; font-style:normal;}
.db-rt-toolbar .rt-btn i {font-style:italic;}
.db-rt-toolbar .rt-btn u {text-decoration:underline; font-style:normal;}
.db-rt-toolbar .rt-btn s {text-decoration:line-through; font-style:normal;}
.db-rt-toolbar .rt-color-ind {display:inline-block; font-weight:700; color:#fff; border-bottom:3px solid currentColor; padding-bottom:1px; line-height:1;}
.db-rt-toolbar .rt-bgcolor-ind {display:inline-block; font-weight:700; color:#fff; background:rgba(255,255,255,0.18); padding:1px 4px; border-radius:2px; line-height:1;}
.db-rt-toolbar .rt-sep {width:1px; height:18px; background:rgba(255,255,255,0.2); margin:0 2px;}
/* spectrum 컬러피커 host — flat 모드 picker 를 호스팅. left 위치만으로 hide/show 제어 (visibility/display 는 spectrum 이 건드리므로 회피) */
.rt-spec-host {pointer-events:auto; visibility:visible !important;}
/* spectrum 의 sp-hidden 클래스 무력화 — flat 모드 picker 가 항상 보이도록 */
.rt-spec-host .sp-container.sp-hidden {display:block !important; visibility:visible !important;}
.rt-spec-host .sp-container {display:block !important; visibility:visible !important;}
.rt-spec-host .sp-replacer {display:none !important;}
/* 색상 선택 팝업 — 자체 컬러피커: 팔레트 그리드 + 커스텀 hex + 알파 슬라이더 + 적용/취소 */
.db-rt-colorpop {position:absolute; z-index:10011; background:#fff; border:1px solid #ddd; border-radius:6px; padding:8px; box-shadow:0 6px 20px rgba(0,0,0,0.2); width:200px; font-size:12px;}
.db-rt-colorpop .rt-color-grid {display:flex; flex-direction:column; gap:4px;}
.db-rt-colorpop .rt-color-row {display:flex; gap:4px;}
.db-rt-colorpop .rt-color-swatch {all:unset; box-sizing:border-box; cursor:pointer; flex:1; aspect-ratio:1/1; border-radius:3px; border:1px solid rgba(0,0,0,0.15); transition:transform .12s ease;}
.db-rt-colorpop .rt-color-swatch:hover {transform:scale(1.15); border-color:rgba(0,0,0,0.3);}
.db-rt-colorpop .rt-color-swatch:focus-visible {outline:2px solid var(--color-active, #2e7cff); outline-offset:1px;}
.db-rt-colorpop .rt-color-controls {display:flex; flex-direction:column; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid #eee;}
.db-rt-colorpop .rt-color-custom {width:100%; height:28px; padding:0; border:1px solid #ddd; border-radius:3px; cursor:pointer; background:#fff;}
.db-rt-colorpop .rt-color-alpha-label {display:flex; align-items:center; gap:6px; color:#555;}
.db-rt-colorpop .rt-color-alpha {flex:1; height:18px; cursor:pointer;}
.db-rt-colorpop .rt-color-alpha-val {min-width:34px; text-align:right; font-variant-numeric:tabular-nums;}
.db-rt-colorpop .rt-color-actions {display:flex; gap:4px; margin-top:8px; padding-top:8px; border-top:1px solid #eee;}
.db-rt-colorpop .rt-color-actions button {all:unset; box-sizing:border-box; cursor:pointer; flex:1; height:28px; border-radius:3px; text-align:center; font-size:12px; transition:background-color .12s ease;}
.db-rt-colorpop .rt-color-clear {color:#888; border:1px solid #ddd;}
.db-rt-colorpop .rt-color-clear:hover {background:#f5f5f5;}
.db-rt-colorpop .rt-color-cancel {color:#666; border:1px solid #ddd;}
.db-rt-colorpop .rt-color-cancel:hover {background:#f5f5f5;}
.db-rt-colorpop .rt-color-apply {color:#fff; background:var(--color-active, #2e7cff);}
.db-rt-colorpop .rt-color-apply:hover {filter:brightness(1.1);}
/* 편집 언어 셀렉트 (헤더의 디바이스 버튼 옆) */
.db-header-box .db-lang-select-box {margin-left:12px; display:inline-flex; align-items:center;}
.db-header-box .db-lang-select {height:28px; min-width:90px; padding:0 8px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:13px; cursor:pointer;}
.db-header-box .db-lang-select:focus-visible {outline:2px solid var(--color-active, #2e7cff); outline-offset:1px;}
/* ============================================================
* Phase B — 풍부한 Floating Toolbar 확장 스타일
* (폰트체/크기/굵기/자간/줄높이 셀렉트 + 정렬/들여쓰기/리스트 버튼 + 활성 토글)
* ============================================================ */
/* toolbar 자체: 폭이 길어지므로 가로 스크롤 + flex-wrap 미사용 (가로 일렬 유지) */
.db-rt-toolbar {max-width:calc(100vw - 24px); overflow-x:auto; flex-wrap:nowrap; padding:4px 6px;}
.db-rt-toolbar::-webkit-scrollbar {height:4px;}
.db-rt-toolbar::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.25); border-radius:2px;}
/* 셀렉트 박스 (폰트체/크기/굵기/자간/줄높이) */
.db-rt-toolbar .rt-sel {appearance:none; -webkit-appearance:none; -moz-appearance:none; height:24px; padding:0 18px 0 6px; border:1px solid rgba(255,255,255,0.2); border-radius:3px; background:rgba(255,255,255,0.08); color:#fff; font-size:12px; line-height:1; cursor:pointer; max-width:120px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 5px center;}
.db-rt-toolbar .rt-sel:hover {background-color:rgba(255,255,255,0.15);}
.db-rt-toolbar .rt-sel:focus-visible {outline:2px solid var(--color-active, #2e7cff); outline-offset:1px;}
/* 셀렉트별 폭 — 폰트체는 넓게, 사이즈/굵기/자간/줄높이는 좁게 */
.db-rt-toolbar .rt-sel-font {min-width:90px; max-width:130px;}
.db-rt-toolbar .rt-sel-size {min-width:54px;}
.db-rt-toolbar .rt-sel-weight {min-width:54px;}
.db-rt-toolbar .rt-sel-spacing {min-width:54px;}
.db-rt-toolbar .rt-sel-line {min-width:62px;}
/* 옵션은 OS 드롭다운이라 dark 배경 적용이 일관되지 않음 — 명시적 흰배경/검정글자로 가독성 보장 */
.db-rt-toolbar .rt-sel option {background:#fff; color:#222;}
/* 활성 토글 표시 (B/I/U/S 가 현재 selection 에 적용되어 있을 때) */
.db-rt-toolbar .rt-btn.rt-active {background:var(--color-active, #2e7cff); color:#fff;}
.db-rt-toolbar .rt-btn.rt-active:hover {background:var(--color-active, #2e7cff); filter:brightness(1.1);}
/* 정렬/들여쓰기/리스트 버튼 — 이모지 문자가 작아 보일 수 있으므로 살짝 키움 */
.db-rt-toolbar .rt-btn[data-cmd^="align"],
.db-rt-toolbar .rt-btn[data-cmd="indent"],
.db-rt-toolbar .rt-btn[data-cmd="outdent"],
.db-rt-toolbar .rt-btn[data-cmd="ul"],
.db-rt-toolbar .rt-btn[data-cmd="ol"] {font-size:15px;}
/* db-text-box */
.db-text-box .text-1 .subject {font-size:var(--font-40); font-weight:600; font-family:'Noto Serif KR', serif;}
.db-text-box .text-1 .text {margin:var(--margin-10) 0 0; font-size:var(--font-20); word-break:keep-all; line-height:1.8; font-family:'Noto Serif KR', serif;}
.db-text-box .text-2 {display:flex; flex-wrap:wrap; background:var(--color-brown-200); padding:var(--padding-100); gap:var(--gap-50); border-left:10px solid var(--color-lime-1100);}
.db-text-box .text-2 .subject {font-size:var(--font-50); font-weight:600; line-height:1.3; font-family:'Noto Serif KR', serif;}
.db-text-box .text-2 .text {flex:1; min-width:0; font-size:var(--font-22); line-height:1.8; word-break:keep-all; font-family:'Noto Serif KR', serif;}
@media (max-width:1300px){
.db-text-box .text-1 .subject {font-size:var(--font-30);}
.db-text-box .text-1 .text {font-size:var(--font-18); line-height:1.6;}
.db-text-box .text-2 {padding:var(--padding-50); gap:var(--gap-20);}
.db-text-box .text-2 .subject {width:100%; font-size:var(--font-30);}
.db-text-box .text-2 .subject br {display:none;}
.db-text-box .text-2 .text {flex:none; width:100%; font-size:var(--font-18); line-height:1.6;}
}
@media (max-width:991px){
.db-text-box .text-1 .subject {font-size:var(--font-20);}
.db-text-box .text-1 .text {font-size:var(--font-15);}
.db-text-box .text-2 {border-left-width:5px; padding:var(--padding-25) var(--padding-15); gap:var(--gap-15);}
.db-text-box .text-2 .subject {font-size:var(--font-20);}
.db-text-box .text-2 .text {font-size:var(--font-15);}
}