@charset "UTF-8";

/* common */
body.menu-dragging {cursor:grabbing !important; user-select:none;}
body.menu-dragging * {cursor:grabbing !important;}

/* editable-content */
[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;}
[data-editable-key] a, .db-rt-dynamic a {display:inline; vertical-align:baseline;}

/* 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-header-box .header-right ul li .btn:disabled,
.db-header-box .header-right ul li .btn[aria-disabled="true"] {opacity:.35; cursor:not-allowed; pointer-events:none;}

/* 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-private {background:color-mix(in srgb, var(--color-gray-400,#9ca3af) 10%, transparent); border-style:dotted; border-color:var(--color-gray-400,#9ca3af);}
.db-menu-list-box > ul > li.is-private .subject p {color:var(--color-black-300,#6b7280);}
.db-menu-list-box > ul > li.is-private .subject p:after {display:inline-block; content:"비공개"; margin-left:6px; padding:2px 6px; font-size:11px; font-weight:500; color:var(--color-white,#fff); background:var(--color-gray-400,#9ca3af); border-radius:4px; vertical-align:middle;}
.db-menu-list-box > ul > li.is-private-child {opacity:.6; border-style:dotted; border-color:var(--color-gray-300,#d1d5db);}
.db-menu-list-box > ul > li.is-private-child .subject p {color:var(--color-black-300,#6b7280);}
.db-menu-list-box > ul > li.is-private-child .subject p:after {display:inline-block; content:"상위 비공개"; margin-left:6px; padding:2px 6px; font-size:11px; font-weight:500; color:var(--color-black-300,#6b7280); background:var(--color-gray-300,#d1d5db); border-radius:4px; vertical-align:middle;}
.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);}

/* mf_link_select */
#mf_link_select option.in-use {background:var(--color-gray-200,#e5e7eb);}

/* 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:0; 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;}
.db-none-box .empty-illust-plus:after {display:inline-block; content:""; width:var(--icon-16); height:var(--icon-16); background:url('../images/icon_plus.svg') no-repeat center / cover; filter:var(--filter-white);}

/* widget-section */
.widget-section {position:relative;}

/* db-history-flash */
.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);}
}

/* br[data-d] */
@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-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;}

/* tab-content-box */
.tab-content-box:not([hidden]) {display:flex; flex-direction:column;}

/* tab-none-box */
.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);}
}

/* builder-widgets-wrap */
.builder-widgets-wrap {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 */
.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);}

/* db-site-side */
.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;}

/* db-add-child-widget-box */
.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;}

/* data-db-target */
.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;}

/* 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-side-notice */
.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;}

/* db-rt-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;}
.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;}

/* rt-spec-host */
.rt-spec-host {pointer-events:auto; visibility:visible !important;}
.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;}

/* db-rt-colorpop */
.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-lang-select */
.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;}

.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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'><path d='M0 0l4 6 4-6z' fill='%23fff'/></svg>"); 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;}
.db-rt-toolbar .rt-sel option {background:#fff; color:#222;}
.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);}
}

/* option-multi-instance */
.db-section-box .db-section-side .side-body .body-list > ul > li .list li.option-multi-instance {display:block;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li.option-multi-instance > .title {width:auto; display:block; margin-bottom:var(--margin-10); padding-bottom:var(--padding-5); border-bottom:1px solid var(--color-gray-200);}
.option-instance-list {margin:0 0 0 var(--margin-5); padding:var(--padding-10); border-left:2px solid var(--color-gray-300); list-style:none; background:var(--color-gray-200);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li.option-instance-item {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 var(--margin-5);}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li.option-instance-item:last-of-type {margin:0;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li.option-instance-item .instance-label {width:90px; font-size:var(--font-xs); color:var(--color-black-500); font-weight:400;}
.db-section-box .db-section-side .side-body .body-list > ul > li .list li.option-instance-item > .content {flex:1; min-width:0;}

/* db-option-inactive — 비매칭 옵션 회색 비활성 처리 (숨기지 않음 → 사용자가 다른 옵션 존재 인지) 내부 form 요소는 JS 에서 disabled 처리. CSS 로 pointer-events 추가 차단 (단, 카테고리 sub-section 의 .toggle 버튼은 활성 유지) */
.db-option-inactive {opacity:0.4; transition:opacity .2s ease;}
.db-option-inactive:hover {opacity:0.6;}
[data-wo-selector].db-option-inactive {pointer-events:none;}
[data-wo-selector].db-option-inactive .title,
[data-wo-selector].db-option-inactive .title * {pointer-events:auto;}
.dynamic-category-section.db-option-inactive > .toggle {pointer-events:auto;}

/* db-device-shell — .content-inner wrapper (디바이스 시뮬 시 padding 으로 위/아래 여백 — margin collapsing 방지하여 .db-device-rim 좌표 정렬) */
.db-device-shell {position:relative; margin:0 auto; max-width:100%; transition:max-width .45s cubic-bezier(.2,.7,.2,1);}
html.db-sim-tablet .db-device-shell,
html.db-sim-mobile .db-device-shell {padding:50px 0;}

/* db-device-rim — 외곽 metallic 림 (.content-inner 외부 1.5px 영역, conic-gradient 각도별 톤) */
.db-device-rim {display:none; position:absolute; top:50px; bottom:50px; left:-1.5px; right:-1.5px; pointer-events:none;}
html.db-sim-tablet .db-device-rim {display:block; border-radius:23.5px; background:conic-gradient(from 0deg, #6e7180, #8e9098, #6e7180, #4a4d54, #3a3d44, #4a4d54, #6e7180, #8e9098, #6e7180); box-shadow:0 0 0 0.5px rgba(0,0,0,0.55), inset 0 0 0 0.5px rgba(255,255,255,0.08);}
html.db-sim-mobile .db-device-rim {display:block; border-radius:43.5px; background:conic-gradient(from 0deg, #6e7180, #8e9098, #6e7180, #4a4d54, #3a3d44, #4a4d54, #6e7180, #8e9098, #6e7180); box-shadow:0 0 0 0.5px rgba(0,0,0,0.6), inset 0 0 0 0.5px rgba(255,255,255,0.08);}

/* db-device-rim::after — 홈 인디케이터 (wrapper에 배치하여 스크롤과 무관) */
html.db-sim-tablet .db-device-rim::after {content:""; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:130px; height:5px; background:rgba(20,22,28,0.88); border-radius:3px; z-index:6; pointer-events:none;}
html.db-sim-mobile .db-device-rim::after {content:""; position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:130px; height:5px; background:rgba(20,22,28,0.85); border-radius:3px; z-index:6; pointer-events:none;}

/* db-device-shell — tablet 측면 버튼 (좌측 볼륨 +/-, 우측 전원) */
html.db-sim-tablet .db-device-shell::before {content:""; position:absolute; top:140px; left:-3px; width:4px; height:38px; background:#20232a; border-radius:2px 0 0 2px; box-shadow:0 56px 0 0 #20232a, inset 0 1px 0 rgba(255,255,255,0.12), -1px 0 1px rgba(0,0,0,0.4); z-index:2; pointer-events:none;}
html.db-sim-tablet .db-device-shell::after {content:""; position:absolute; top:88px; right:-3px; width:4px; height:55px; background:#20232a; border-radius:0 2px 2px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 1px 0 1px rgba(0,0,0,0.4); z-index:2; pointer-events:none;}

/* db-device-shell — mobile 측면 버튼 (좌측 액션+볼륨+/-, 우측 전원) */
html.db-sim-mobile .db-device-shell::before {content:""; position:absolute; top:115px; left:-3px; width:4px; height:32px; background:#20232a; border-radius:2px 0 0 2px; box-shadow:0 50px 0 0 #20232a, 0 96px 0 0 #20232a, inset 0 1px 0 rgba(255,255,255,0.12), -1px 0 1px rgba(0,0,0,0.4); z-index:2; pointer-events:none;}
html.db-sim-mobile .db-device-shell::after {content:""; position:absolute; top:135px; right:-3px; width:4px; height:65px; background:#20232a; border-radius:0 2px 2px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 1px 0 1px rgba(0,0,0,0.4); z-index:2; pointer-events:none;}

/* db-device-frame — 공통 베이스 (overflow-x:hidden + overflow-y:auto 로 가로는 라운드 clip, 세로는 내부 스크롤. 스크롤바 숨김) */
html.db-sim-tablet .db-section-box .db-section-content .content-inner,
html.db-sim-mobile .db-section-box .db-section-content .content-inner {position:relative; box-sizing:content-box; background:#ffffff; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; transition:max-width .45s cubic-bezier(.2,.7,.2,1), max-height .45s cubic-bezier(.2,.7,.2,1), margin .45s cubic-bezier(.2,.7,.2,1), padding .45s cubic-bezier(.2,.7,.2,1), border-radius .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);}

/* 스크롤바 숨김 (WebKit) — 디바이스 시뮬은 실 디바이스처럼 스크롤바 노출 안 함 */
html.db-sim-tablet .db-section-box .db-section-content .content-inner::-webkit-scrollbar,
html.db-sim-mobile .db-section-box .db-section-content .content-inner::-webkit-scrollbar {width:0; height:0; display:none;}

/* db-device-frame — tablet (iPad 형, 베젤 12px, 라운드 22px, 화면 높이 500px 고정) */
html.db-sim-tablet .db-section-box .db-section-content .content-inner {border:12px solid #050608; border-radius:22px; margin:0 auto !important; min-height:500px; max-height:500px; box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.08), inset 0 1px 1.5px rgba(255,255,255,0.04);}

/* db-device-frame — mobile (iPhone 형, 베젤 8px, 라운드 42px, 화면 높이 600px 고정) */
html.db-sim-mobile .db-section-box .db-section-content .content-inner {border:8px solid #050608; border-radius:42px; margin:0 auto !important; min-height:600px; max-height:600px; box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.08), inset 0 1px 1.5px rgba(255,255,255,0.04);}