/**
 * RA0 main_up - 비주얼 홈페이지 빌더
 * style.css - 섹션 레이아웃 및 레이어 스타일
 *
 * CSS 변수 연동: default.css.php의 :root 변수 사용
 * 반응형 디자인 적용
 */

/* ==========================================
   main_reup map-first builder
   ========================================== */

.main-reup-builder {
    width: 100%;
    min-height: calc(100vh - var(--header-height, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-font-color);
    font-family: var(--content-font-family);
}

.main-reup-map {
    position: relative;
    display: grid;
    overflow: visible;
    box-sizing: border-box;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#main-reup-builder .main-reup-map.is-mobile-render {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--main-reup-mobile-aspect, 3 / 7);
    grid-template-columns: var(--main-reup-mobile-grid-columns) !important;
    grid-template-rows: var(--main-reup-mobile-grid-rows) !important;
    grid-auto-flow: row !important;
    gap: var(--main-reup-mobile-gap, 12px) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    zoom: 1 !important;
    transform: none !important;
    margin-bottom: 0 !important;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement {
    display: grid !important;
    grid-row: var(--main-reup-mobile-grid-row) !important;
    grid-column: var(--main-reup-mobile-grid-column) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    place-self: stretch !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    order: var(--main-reup-mobile-order, 0) !important;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer {
    width: calc(100% / var(--main-reup-layer-fit-scale, 1)) !important;
    height: calc(100% / var(--main-reup-layer-fit-scale, 1)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: clamp(4px, 1.8vw, 8px) !important;
    transform: scale(var(--main-reup-layer-fit-scale, 1)) !important;
    transform-origin: top left !important;
    transition: none !important;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer-image,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer-hero_image,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer-slide,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer-gallery,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer-board_iframe,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement > .layer-external_iframe {
    padding: 0 !important;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .basic-latest {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: clamp(4px, 1.8vw, 8px) !important;
    overflow: hidden;
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 1.25;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .basic-latest h3,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .basic-latest .latest-title {
    margin: 0 0 4px;
    font-size: clamp(13px, 4vw, 17px);
    line-height: 1.1;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .latest-list {
    min-height: 0;
    max-height: 100%;
    gap: 2px;
    overflow: hidden;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .latest-item:nth-child(n+3) {
    display: none;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .latest-link {
    min-width: 0;
    min-height: 0;
    gap: 4px;
    font-size: inherit;
    line-height: 1.2;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .board-badge {
    flex: 0 0 auto;
    max-width: 38px;
    padding-inline: 4px;
    font-size: 9px;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .item-subject {
    min-width: 0;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .latest-date {
    flex: 0 0 auto;
    font-size: 9px;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .hero-image-caption {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(8px, 2.4vw, 14px);
    gap: 2px;
    overflow: hidden;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .hero-eyebrow,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .hero-description {
    font-size: clamp(9px, 2.4vw, 11px);
    line-height: 1.25;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement .hero-image-caption h3 {
    max-width: 100%;
    font-size: clamp(18px, 16cqw, 34px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: keep-all;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement::before,
#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.has-mobile-placement::after {
    pointer-events: none !important;
}

#main-reup-builder .main-reup-map.is-mobile-render .main-reup-section.is-mobile-layout-hidden {
    display: none !important;
}

.main-reup-section {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.35em;
    background: var(--container-bg-color);
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
}

.main-reup-section img,
.main-reup-section video,
.main-reup-section iframe,
.layer img,
.layer video,
.layer iframe,
.text-layer img,
.intro-content img {
    max-width: 100%;
    box-sizing: border-box;
}

.main-reup-section img,
.layer img,
.text-layer img,
.intro-content img {
    height: auto;
}

.main-reup-section,
.layer,
.text-layer,
.intro-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.main-reup-section.has-full-bleed-hero:not(.has-section-surface) {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.main-reup-section.has-section-border-image::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 2;
    pointer-events: none;
    border: var(--main-reup-section-border-width, 20px) solid transparent;
    border-image-source: var(--main-reup-section-border-image);
    border-image-width: var(--main-reup-section-border-width, 20px);
    border-image-slice: 30;
    border-image-repeat: stretch;
}

.main-reup-frame-mac,
.main-reup-frame-window,
.main-reup-frame-terminal,
.main-reup-frame-taped,
.main-reup-frame-dossier,
.main-reup-frame-neon {
    isolation: isolate;
    overflow: visible;
}

.main-reup-section.is-overflow-hidden {
    overflow: hidden !important;
}

#main-reup-builder .main-reup-frame-mac > .layer,
#main-reup-builder .main-reup-frame-window > .layer,
#main-reup-builder .main-reup-frame-terminal > .layer,
#main-reup-builder .main-reup-frame-taped > .layer,
#main-reup-builder .main-reup-frame-dossier > .layer,
#main-reup-builder .main-reup-frame-neon > .layer {
    position: relative;
    z-index: 2;
}

.main-reup-frame-mac {
    padding-top: max(2.35em, 34px);
    border-radius: 12px;
    border-color: rgb(from var(--container-border-color) r g b / 85%);
    background: var(--container-bg-color);
    box-shadow: 0 16px 36px rgb(0 0 0 / 12%);
}

.main-reup-frame-mac::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 30px;
    z-index: 3;
    pointer-events: none;
    border-bottom: 1px solid rgb(from var(--container-border-color) r g b / 68%);
    border-radius: inherit;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background:
        radial-gradient(circle at 14px 50%, #ff6b6b 0 4px, transparent 4.5px),
        radial-gradient(circle at 28px 50%, #ffd166 0 4px, transparent 4.5px),
        radial-gradient(circle at 42px 50%, #63d471 0 4px, transparent 4.5px),
        linear-gradient(180deg, rgb(from var(--container-bg-color) r g b / 100%), rgb(from var(--container-border-color) r g b / 96%));
}

.main-reup-frame-window {
    padding-top: max(2.45em, 36px);
    border-radius: 8px;
    border-color: rgb(from var(--container-border-color) r g b / 86%);
    background: var(--container-bg-color);
    box-shadow:
        0 14px 30px rgb(0 0 0 / 12%),
        4px 4px 0 rgb(from var(--content-font-color) r g b / 10%);
}

.main-reup-frame-window::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 32px;
    z-index: 3;
    pointer-events: none;
    border-bottom: 1px solid rgb(from var(--container-border-color) r g b / 74%);
    border-radius: inherit;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background:
        linear-gradient(var(--accent-color), var(--accent-color)) 10px 10px / 10px 10px no-repeat,
        linear-gradient(rgb(from var(--content-font-color) r g b / 28%), rgb(from var(--content-font-color) r g b / 28%)) 28px 14px / min(92px, 32%) 3px no-repeat,
        linear-gradient(180deg, rgb(from var(--container-bg-color) r g b / 100%), rgb(from var(--container-border-color) r g b / 98%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%);
}

.main-reup-frame-window::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 10px;
    width: 52px;
    height: 12px;
    z-index: 4;
    pointer-events: none;
    color: rgb(from var(--content-font-color) r g b / 48%);
    background:
        linear-gradient(currentColor, currentColor) 0 7px / 10px 1px no-repeat,
        linear-gradient(currentColor, currentColor) 19px 1px / 10px 1px no-repeat,
        linear-gradient(currentColor, currentColor) 19px 10px / 10px 1px no-repeat,
        linear-gradient(currentColor, currentColor) 19px 1px / 1px 10px no-repeat,
        linear-gradient(currentColor, currentColor) 28px 1px / 1px 10px no-repeat,
        linear-gradient(45deg, transparent 46%, currentColor 46% 54%, transparent 54%) 42px 1px / 10px 10px no-repeat,
        linear-gradient(-45deg, transparent 46%, currentColor 46% 54%, transparent 54%) 42px 1px / 10px 10px no-repeat;
}

.main-reup-frame-terminal {
    padding-top: max(2.35em, 34px);
    border-radius: 6px;
    border-color: rgb(91 255 171 / 38%);
    background: rgb(14 18 17 / 92%);
    color: #d7ffe9;
    box-shadow: inset 0 0 0 1px rgb(91 255 171 / 12%), 0 12px 28px rgb(0 0 0 / 22%);
}

.main-reup-frame-terminal::before {
    content: "$";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 26px;
    z-index: 3;
    pointer-events: none;
    padding: 5px 10px;
    border-bottom: 1px solid rgb(91 255 171 / 22%);
    color: rgb(91 255 171 / 82%);
    font: 600 11px/1 var(--content-font-family);
    background: rgb(3 7 6 / 74%);
    animation: mainReupTerminalHeaderFlicker 3.4s ease-in-out infinite;
}

.main-reup-frame-taped {
    border: 0 !important;
    border-radius: 4px;
    background: rgb(255 252 230 / 96%);
    box-shadow: 0 12px 28px rgb(70 54 18 / 18%);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.main-reup-frame-taped::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: min(38%, 118px);
    height: 22px;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(104deg, transparent 31%, rgb(255 255 255 / 0%) 43%, rgb(255 255 255 / 76%) 50%, rgb(255 255 255 / 0%) 58%, transparent 69%),
        linear-gradient(90deg, rgb(255 255 255 / 32%), transparent 18% 82%, rgb(255 255 255 / 28%)),
        rgb(255 255 255 / 46%);
    background-position: -165% 0, 0 0, 0 0;
    background-size: 220% 100%, 100% 100%, auto;
    border: 1px solid rgb(255 255 255 / 42%);
    box-shadow: 0 2px 7px rgb(0 0 0 / 8%);
    transform: translateX(-50%) rotate(-2deg);
    animation: mainReupFrameTapeGlimmer 3.7s ease-in-out infinite;
}

.main-reup-frame-dossier {
    border-radius: 2px;
    border-color: rgb(from var(--content-font-color) r g b / 30%);
    border-left-width: 12px !important;
    background: rgb(from var(--container-bg-color) r g b / 90%);
    box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
    transform-origin: 15% 100%;
    transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

.main-reup-frame-dossier::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: -8px;
    width: 4px;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 12px, rgb(from var(--content-font-color) r g b / 30%) 0 3px, transparent 3.5px),
        radial-gradient(circle at 50% 50%, rgb(from var(--content-font-color) r g b / 30%) 0 3px, transparent 3.5px),
        radial-gradient(circle at 50% calc(100% - 12px), rgb(from var(--content-font-color) r g b / 30%) 0 3px, transparent 3.5px);
}

.main-reup-frame-dossier:hover {
    --main-reup-section-frame-transform: rotate(-0.52deg) translateY(-3px) var(--main-reup-section-transform, translateZ(0));
    transform: var(--main-reup-section-frame-transform);
    border-color: rgb(from var(--accent-color) r g b / 36%);
    box-shadow: 0 12px 26px rgb(0 0 0 / 14%);
}

.main-reup-frame-neon {
    border-radius: 6px;
    border-color: rgb(from var(--accent-color) r g b / 92%);
    background:
        radial-gradient(circle at 20% 10%, rgb(from var(--accent-color) r g b / 10%), transparent 34%),
        rgb(from var(--container-bg-color) r g b / 76%);
    box-shadow:
        0 0 0 1px rgb(from var(--accent-color) r g b / 55%),
        0 0 14px rgb(from var(--accent-color) r g b / 48%),
        0 0 34px rgb(from var(--accent-color) r g b / 30%),
        inset 0 0 18px rgb(from var(--accent-color) r g b / 16%);
}

.main-reup-frame-neon::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgb(from var(--accent-color) r g b / 62%);
    border-radius: inherit;
    box-shadow:
        0 0 8px rgb(from var(--accent-color) r g b / 56%),
        0 0 24px rgb(from var(--accent-color) r g b / 36%);
    animation: mainReupNeonSparkle 3.2s ease-in-out infinite;
}

@keyframes mainReupSectionFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mainReupSectionSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px) var(--main-reup-section-transform, translateZ(0));
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--main-reup-section-transform, translateZ(0));
    }
}

@keyframes mainReupSectionFloat {
    0%, 100% { transform: translateY(0) var(--main-reup-section-transform, translateZ(0)); }
    50% { transform: translateY(-6px) var(--main-reup-section-transform, translateZ(0)); }
}

@keyframes mainReupSectionPulse {
    0%, 100% {
        filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgb(from var(--accent-color) r g b / 0%));
    }
    46% {
        filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 12px rgb(from var(--accent-color) r g b / 18%));
    }
    62% {
        filter: brightness(1.06) saturate(1.06) drop-shadow(0 0 6px rgb(from var(--accent-color) r g b / 10%));
    }
}

@keyframes mainReupSectionHeartbeat {
    0%, 100% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(1);
    }
    1.6% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(0.94);
        animation-timing-function: cubic-bezier(.18, .76, .2, 1);
    }
    4.8% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(1.15);
        animation-timing-function: cubic-bezier(.18, 1.08, .24, 1);
    }
    8.3% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(0.8);
        animation-timing-function: cubic-bezier(.2, .9, .2, 1);
    }
    11.8% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(1.1);
        animation-timing-function: cubic-bezier(.18, .92, .22, 1);
    }
    14.8% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(0.985);
    }
    17%, 92% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) scale(1);
    }
}

@keyframes mainReupSectionFlipRight {
    0% {
        opacity: 0;
        transform: perspective(900px) translateX(-18px) rotateY(-82deg) var(--main-reup-section-transform, translateZ(0));
        transform-origin: center center;
        filter: brightness(1.12) saturate(1.12);
    }
    58% {
        opacity: 1;
        transform: perspective(900px) translateX(2px) rotateY(8deg) var(--main-reup-section-transform, translateZ(0));
        transform-origin: center center;
        filter: brightness(1.04) saturate(1.06);
    }
    100% {
        opacity: 1;
        transform: perspective(900px) translateX(0) rotateY(0deg) var(--main-reup-section-transform, translateZ(0));
        transform-origin: center center;
        filter: brightness(1) saturate(1);
    }
}

@keyframes mainReupSectionHologram {
    0%, 100% {
        filter: brightness(1.06) saturate(1.18);
    }
    50% {
        filter: brightness(1.14) saturate(1.38);
    }
}

@keyframes mainReupSectionElectronicNoise {
    0%, 100% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateX(0);
        filter: brightness(1.02) saturate(1.08) hue-rotate(0deg) drop-shadow(0 0 0 rgb(from var(--accent-color) r g b / 0));
    }
    18% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateX(-1px);
        filter: brightness(1.2) saturate(1.58) hue-rotate(12deg) drop-shadow(0 0 10px rgb(from var(--accent-color) r g b / 38%));
    }
    21% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateX(2px);
        filter: brightness(0.98) saturate(1.28) hue-rotate(-10deg) drop-shadow(0 0 4px rgb(from var(--accent-color) r g b / 22%));
    }
    48% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateX(0);
        filter: brightness(1.16) saturate(1.42) hue-rotate(18deg) drop-shadow(0 0 14px rgb(from var(--accent-color) r g b / 42%));
    }
    52% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateX(-2px);
        filter: brightness(1.04) saturate(1.18) hue-rotate(-8deg) drop-shadow(0 0 6px rgb(from var(--accent-color) r g b / 24%));
    }
}

@keyframes mainReupSectionGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgb(from var(--accent-color) r g b / 0)); }
    50% { filter: drop-shadow(0 0 16px rgb(from var(--accent-color) r g b / 42%)); }
}

@keyframes mainReupSectionFlicker {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgb(from var(--accent-color) r g b / 24%)); }
    8% { filter: brightness(1.16) drop-shadow(0 0 16px rgb(from var(--accent-color) r g b / 42%)); }
    10% { filter: brightness(0.92) drop-shadow(0 0 4px rgb(from var(--accent-color) r g b / 18%)); }
    13% { filter: brightness(1.08) drop-shadow(0 0 18px rgb(from var(--accent-color) r g b / 48%)); }
    58% { filter: brightness(1.03) drop-shadow(0 0 12px rgb(from var(--accent-color) r g b / 35%)); }
}

@keyframes mainReupSectionElementFlicker {
    0%, 100% { filter: brightness(1); }
    8% { filter: brightness(1.24); }
    10% { filter: brightness(0.82); }
    13% { filter: brightness(1.16); }
    58% { filter: brightness(0.94); }
    62% { filter: brightness(1.08); }
}

@keyframes mainReupSectionSway {
    0%, 100% { transform: rotate(0deg) var(--main-reup-section-transform, translateZ(0)); }
    33% { transform: rotate(-0.7deg) var(--main-reup-section-transform, translateZ(0)); }
    66% { transform: rotate(0.7deg) var(--main-reup-section-transform, translateZ(0)); }
}

@keyframes mainReupSectionLightFlutter {
    0%, 100% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateY(0) rotate(0deg);
    }
    18% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateY(-3px) rotate(-0.55deg);
    }
    36% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateY(1.5px) rotate(0.42deg);
    }
    58% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateY(-1.5px) rotate(-0.28deg);
    }
    78% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) translateY(1px) rotate(0.22deg);
    }
}

@keyframes mainReupSectionOccasionalWiggle {
    0%, 7%, 20%, 100% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(0deg);
    }
    8.5% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(-1.1deg);
    }
    10% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(1.35deg);
    }
    11.5% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(-1deg);
    }
    13% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(0.75deg);
    }
    14.5% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(-0.35deg);
    }
    16% {
        transform: var(--main-reup-section-frame-transform, var(--main-reup-section-transform, translateZ(0))) rotate(0.15deg);
    }
}

@keyframes mainReupFrameTapeGlimmer {
    0%, 34% {
        background-position: -165% 0, 0 0, 0 0;
        border-color: rgb(255 255 255 / 42%);
    }
    54% {
        border-color: rgb(255 255 255 / 70%);
    }
    74%, 100% {
        background-position: 165% 0, 0 0, 0 0;
        border-color: rgb(255 255 255 / 42%);
    }
}

@keyframes mainReupTerminalHeaderFlicker {
    0%, 100% {
        opacity: 0.86;
        color: rgb(91 255 171 / 82%);
        background: rgb(3 7 6 / 76%);
        text-shadow: none;
    }
    11% {
        opacity: 1;
        color: rgb(177 255 216 / 94%);
        background: rgb(9 34 25 / 84%);
        text-shadow: 0 0 8px rgb(91 255 171 / 46%);
    }
    14% {
        opacity: 0.62;
        color: rgb(91 255 171 / 50%);
        background: rgb(3 7 6 / 66%);
        text-shadow: none;
    }
    17%, 56% {
        opacity: 0.96;
        color: rgb(177 255 216 / 86%);
        background: rgb(7 27 20 / 78%);
        text-shadow: 0 0 5px rgb(91 255 171 / 30%);
    }
}

@keyframes mainReupSectionTapeShineSweep {
    0%, 38% { background-position: -180% 0; opacity: 0; }
    52% { opacity: 0.9; }
    68%, 100% { background-position: 220% 0; opacity: 0; }
}

@keyframes mainReupSectionLineScanSweep {
    0% { background-position: 0 -140%; opacity: 0; }
    18%, 72% { opacity: 1; }
    100% { background-position: 0 220%; opacity: 0; }
}

@keyframes mainReupNeonSparkle {
    0%, 100% {
        opacity: 0.78;
        filter: brightness(1);
    }
    12% {
        opacity: 1;
        filter: brightness(1.28);
    }
    16% {
        opacity: 0.62;
        filter: brightness(0.86);
    }
    19%, 56% {
        opacity: 0.95;
        filter: brightness(1.12);
    }
}

.main-reup-section[style*="mainReupSectionFloat"],
.main-reup-section[style*="mainReupSectionPulse"],
.main-reup-section[style*="mainReupSectionHeartbeat"],
.main-reup-section[style*="mainReupSectionHologram"],
.main-reup-section[style*="mainReupSectionElectronicNoise"],
.main-reup-section[style*="mainReupSectionGlow"],
.main-reup-section[style*="mainReupSectionFlicker"],
.main-reup-section[style*="mainReupSectionElementFlicker"],
.main-reup-section[style*="mainReupSectionSway"],
.main-reup-section[style*="mainReupSectionLightFlutter"],
.main-reup-section[style*="mainReupSectionOccasionalWiggle"] {
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
}

.main-reup-section[style*="mainReupSectionHeartbeat"] {
    animation-duration: 6.2s !important;
}

.main-reup-section[style*="mainReupSectionOccasionalWiggle"] {
    animation-duration: 2.9s !important;
}

.main-reup-section[style*="mainReupSectionLightFlutter"] {
    animation-duration: 4.1s !important;
}

.main-reup-section[style*="mainReupSectionFloat"],
.main-reup-section[style*="mainReupSectionHeartbeat"],
.main-reup-section[style*="mainReupSectionHologram"],
.main-reup-section[style*="mainReupSectionElectronicNoise"] {
    overflow: visible !important;
}

.main-reup-section.is-overflow-hidden,
.main-reup-section.is-overflow-hidden[style*="mainReupSectionFloat"],
.main-reup-section.is-overflow-hidden[style*="mainReupSectionHeartbeat"],
.main-reup-section.is-overflow-hidden[style*="mainReupSectionHologram"],
.main-reup-section.is-overflow-hidden[style*="mainReupSectionElectronicNoise"] {
    overflow: hidden !important;
}

.main-reup-section-anim-tape-shine:not(.main-reup-frame-window):not(.has-section-border-image)::after,
.main-reup-section-anim-line-scan:not(.main-reup-frame-window):not(.has-section-border-image)::after,
.main-reup-section-anim-hologram:not(.main-reup-frame-window):not(.has-section-border-image)::after,
.main-reup-section-anim-electronic-noise:not(.main-reup-frame-window):not(.has-section-border-image)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.main-reup-section-anim-tape-shine:not(.main-reup-frame-window):not(.has-section-border-image) {
    isolation: isolate;
}

#main-reup-builder .main-reup-section-anim-tape-shine:not(.main-reup-frame-window):not(.has-section-border-image) > .layer {
    position: relative;
    z-index: 1;
}

.main-reup-section-anim-tape-shine:not(.main-reup-frame-window):not(.has-section-border-image)::after {
    z-index: 3;
    background:
        linear-gradient(104deg, transparent 34%, rgb(255 255 255 / 30%) 48%, transparent 62%)
        -180% 0 / 180% 100% no-repeat;
    animation: mainReupSectionTapeShineSweep 4.4s ease-in-out infinite;
}

.main-reup-section-anim-line-scan:not(.main-reup-frame-window):not(.has-section-border-image)::after {
    background:
        linear-gradient(180deg, transparent 38%, rgb(91 255 171 / 9%) 50%, transparent 62%)
        0 -140% / 100% 220% no-repeat;
    animation: mainReupSectionLineScanSweep 3.8s linear infinite;
}

.main-reup-section-anim-hologram {
    isolation: isolate;
}

#main-reup-builder .main-reup-section-anim-hologram > .layer {
    position: relative;
    z-index: 2;
}

.main-reup-section-anim-hologram:not(.main-reup-frame-window):not(.has-section-border-image)::after {
    z-index: 0;
    background:
        linear-gradient(105deg, transparent 0 21%, rgb(255 255 255 / 42%) 44%, transparent 67%),
        radial-gradient(ellipse at 18% 16%, rgb(255 185 229 / 92%) 0 20%, transparent 46%),
        radial-gradient(ellipse at 76% 18%, rgb(255 239 179 / 82%) 0 18%, transparent 42%),
        radial-gradient(ellipse at 30% 68%, rgb(158 220 255 / 88%) 0 22%, transparent 48%),
        radial-gradient(ellipse at 84% 78%, rgb(211 189 255 / 90%) 0 22%, transparent 48%),
        conic-gradient(from 145deg at 48% 48%,
            rgb(255 218 238 / 90%),
            rgb(189 245 218 / 86%),
            rgb(171 221 255 / 88%),
            rgb(238 205 255 / 90%),
            rgb(255 238 194 / 86%),
            rgb(255 218 238 / 90%));
    background-size: 190% 100%, 160% 145%, 150% 160%, 165% 150%, 155% 155%, 210% 190%;
    background-position: -80% 0, 0% 0%, 100% 10%, 8% 100%, 92% 88%, 50% 50%;
    background-blend-mode: screen, normal, normal, normal, normal, normal;
    mix-blend-mode: normal;
    opacity: 0.78;
    filter: blur(4px) saturate(1.48) contrast(1.05);
    transform: scale(1.03);
    animation: mainReupSectionHologramFlow 4.8s ease-in-out infinite;
}

.main-reup-section-anim-electronic-noise:not(.main-reup-frame-window):not(.has-section-border-image)::after {
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0) 0 7px, rgb(from var(--accent-color) r g b / 12%) 8px 9px, rgb(255 255 255 / 0) 10px 15px),
        linear-gradient(104deg, transparent 18%, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / 22%) 50%, rgb(255 255 255 / 0) 58%, transparent 82%);
    mix-blend-mode: screen;
    opacity: 0.62;
    animation: mainReupSectionElectronicNoiseScan 2.7s linear infinite;
}

@keyframes mainReupSectionHologramFlow {
    0%, 100% {
        background-position: -80% 0, 0% 0%, 100% 10%, 8% 100%, 92% 88%, 50% 50%;
        filter: blur(4px) saturate(1.48) hue-rotate(0deg) contrast(1.05);
    }
    50% {
        background-position: 120% 0, 34% 12%, 72% 38%, 18% 76%, 66% 58%, 22% 48%;
        filter: blur(5px) saturate(1.72) hue-rotate(16deg) contrast(1.1);
    }
}

@keyframes mainReupSectionElectronicNoiseScan {
    0% { background-position: 0 -24px, -160% 0; }
    48% { background-position: 0 18px, 35% 0; }
    100% { background-position: 0 54px, 180% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .main-reup-frame-terminal::before,
    .main-reup-frame-taped::before,
    .main-reup-frame-neon::before,
    .main-reup-section[style*="mainReupSectionFloat"],
    .main-reup-section[style*="mainReupSectionPulse"],
    .main-reup-section[style*="mainReupSectionHeartbeat"],
    .main-reup-section[style*="mainReupSectionFlipRight"],
    .main-reup-section[style*="mainReupSectionHologram"],
    .main-reup-section[style*="mainReupSectionElectronicNoise"],
    .main-reup-section[style*="mainReupSectionGlow"],
    .main-reup-section[style*="mainReupSectionFlicker"],
    .main-reup-section[style*="mainReupSectionElementFlicker"],
    .main-reup-section[style*="mainReupSectionSway"],
    .main-reup-section[style*="mainReupSectionLightFlutter"],
    .main-reup-section[style*="mainReupSectionOccasionalWiggle"],
    .main-reup-section-anim-tape-shine::after,
    .main-reup-section-anim-line-scan::after,
    .main-reup-section-anim-hologram::after,
    .main-reup-section-anim-electronic-noise::after {
        animation: none !important;
    }
}

#main-reup-builder .main-reup-section > .layer {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    flex: none !important;
}

#main-reup-builder .main-reup-layer-track-handle {
    position: absolute;
    z-index: 7;
    border: 0;
    border-radius: 999px;
    background: var(--container-border-color);
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

#main-reup-builder .main-reup-layer-track-handle-col {
    top: 0;
    bottom: 0;
    width: 10px;
    margin-left: -5px;
    cursor: col-resize;
}

#main-reup-builder .main-reup-layer-track-handle-row {
    left: 0;
    right: 0;
    height: 10px;
    margin-top: -5px;
    cursor: row-resize;
}

body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-section > .main-reup-layer-track-handle,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-section > .main-reup-layer-track-handle {
    pointer-events: auto;
}

body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-section.is-layer-resizing > .main-reup-layer-track-handle,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-section.is-layer-resizing > .main-reup-layer-track-handle,
body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-layer-track-handle:hover,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-layer-track-handle:hover {
    background: var(--accent-color);
    opacity: 1;
    pointer-events: auto;
}

#main-reup-builder .main-reup-live-layer-move-handle {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 18;
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(from var(--accent-color) r g b / 34%);
    border-radius: 7px;
    background: rgb(from var(--container-bg-color) r g b / 84%);
    color: var(--accent-color);
    box-shadow:
        0 5px 14px rgb(0 0 0 / 14%),
        inset 0 1px 0 rgb(255 255 255 / 18%);
    opacity: 0;
    pointer-events: none;
    cursor: grab;
    transform: translateY(-2px) scale(0.94);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

#main-reup-builder .main-reup-live-layer-move-handle i {
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .layer > .main-reup-live-layer-move-handle {
    pointer-events: auto;
}

body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .layer:hover > .main-reup-live-layer-move-handle,
body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .layer.is-admin-selected > .main-reup-live-layer-move-handle,
body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .main-reup-live-layer-move-handle:hover,
body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .main-reup-live-layer-move-handle:focus-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .main-reup-live-layer-move-handle:hover,
body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .main-reup-live-layer-move-handle:focus-visible {
    border-color: rgb(from var(--accent-color) r g b / 80%);
    background: rgb(from var(--accent-color) r g b / 14%);
    outline: 0;
}

body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .main-reup-live-layer-move-handle:active {
    cursor: grabbing;
    transform: translateY(1px) scale(0.98);
}

#main-reup-builder .layer.is-live-layer-dragging {
    opacity: 0.5;
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

#main-reup-builder .main-reup-map-track-handle {
    position: absolute;
    z-index: 22000;
    border: 0;
    border-radius: 999px;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transition: opacity 0.15s ease;
}

#main-reup-builder .main-reup-map-track-handle::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: var(--accent-color);
    opacity: 0.82;
    box-shadow: 0 0 0 1px rgb(from var(--accent-color) r g b / 18%),
        0 0 14px rgb(from var(--accent-color) r g b / 28%);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#main-reup-builder .main-reup-map-track-handle-col {
    top: 0;
    bottom: 0;
    width: 5px;
    margin-left: -2.5px;
    cursor: col-resize;
}

#main-reup-builder .main-reup-map-track-handle-row {
    left: 0;
    right: 0;
    height: 5px;
    margin-top: -2.5px;
    cursor: row-resize;
}

body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-section,
body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-section,
body.main-reup-admin-open.main-reup-layer-editing #main-reup-builder .main-reup-section {
    z-index: var(--main-reup-edit-z-index, 10000) !important;
}

body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle {
    opacity: 0;
    pointer-events: auto;
}

body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle:hover,
body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle:focus-visible,
body.main-reup-admin-open.main-reup-section-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle.is-active,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle:hover,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle:focus-visible,
body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-map > .main-reup-map-track-handle.is-active {
    opacity: 1;
    outline: 0;
}

#main-reup-builder .main-reup-map-track-handle-col::after {
    top: 10px;
    bottom: 10px;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
}

#main-reup-builder .main-reup-map-track-handle-row::after {
    left: 10px;
    right: 10px;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
}

#main-reup-builder .main-reup-map-track-handle:hover::after,
#main-reup-builder .main-reup-map-track-handle:focus-visible::after,
#main-reup-builder .main-reup-map-track-handle.is-active::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.35);
}

#main-reup-builder .main-reup-map-track-handle-row:hover::after,
#main-reup-builder .main-reup-map-track-handle-row:focus-visible::after,
#main-reup-builder .main-reup-map-track-handle-row.is-active::after {
    transform: translateY(-50%) scaleY(1.35);
}

#main-reup-builder .main-reup-live-section-resize-handle {
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 14;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 0 0 var(--form-border-radius) 0;
    background: transparent;
    color: var(--accent-color);
    line-height: 1;
    cursor: nwse-resize;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

#main-reup-builder .main-reup-live-section-resize-handle::before,
#main-reup-builder .main-reup-live-section-resize-handle::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 0 0 5px 0;
}

#main-reup-builder .main-reup-live-section-resize-handle::before {
    width: 15px;
    height: 15px;
    opacity: 0.9;
}

#main-reup-builder .main-reup-live-section-resize-handle::after {
    width: 8px;
    height: 8px;
    opacity: 0.46;
}

body.main-reup-admin-open.main-reup-layout-editing #main-reup-builder .main-reup-section > .main-reup-live-section-resize-handle {
    opacity: 0.66;
    pointer-events: auto;
}

#main-reup-builder .main-reup-live-section-resize-handle:hover,
#main-reup-builder .main-reup-live-section-resize-handle:focus-visible,
#main-reup-builder .main-reup-live-section-resize-handle.is-active {
    color: var(--accent-color);
    opacity: 1;
    transform: translate(-1px, -1px);
    outline: 0;
}

#main-reup-builder .main-reup-live-section-resize-handle:hover::before,
#main-reup-builder .main-reup-live-section-resize-handle:focus-visible::before,
#main-reup-builder .main-reup-live-section-resize-handle.is-active::before {
    box-shadow: 3px 3px 12px rgb(from var(--accent-color) r g b / 34%);
}

#main-reup-builder .main-reup-live-section-resize-handle:active {
    transform: translate(0, 0);
}

.main-reup-empty-map,
.main-reup-empty-section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    padding: 16px;
}

.main-reup-empty-map {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.main-reup-empty-section span {
    font-size: 12px;
    opacity: 0.72;
}

.main-reup-section.has-section-surface .main-reup-empty-section {
    border: 0;
    background: transparent;
}

.main-reup-admin-toggle {
    position: fixed;
    left: calc(1% + 45px);
    bottom: 4%;
    z-index: 9999;
}

.main-reup-admin-toggle button,
.main-reup-panel button {
    font-family: var(--content-font-family);
}

.main-reup-admin-toggle button {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--btn-primary-radius);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-size: 16px;
}

.main-reup-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 30000;
    width: min(400px, 92vw);
    height: min(500px, 88vh);
    min-width: min(300px, 92vw);
    min-height: min(360px, 88vh);
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
    resize: both;
    background: var(--card-bg-color);
    color: var(--content-font-color);
    border: 1px solid var(--card-border-color);
    border-radius: var(--container-border-radius);
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease;
}

.main-reup-panel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.main-reup-panel-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
    width: 18px;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 0 48%, var(--card-border-color) 49% 54%, transparent 55%),
        linear-gradient(135deg, transparent 0 66%, var(--card-border-color) 67% 72%, transparent 73%);
}

.main-reup-panel-head,
.main-reup-panel-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--card-border-color);
}

.main-reup-panel-head {
    cursor: move;
    user-select: none;
}

.main-reup-panel-title {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.main-reup-panel-version {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: rgb(from var(--content-font-color) r g b / 42%);
    letter-spacing: 0;
    white-space: nowrap;
}

.main-reup-panel-foot {
    border-top: 1px solid var(--card-border-color);
    border-bottom: 0;
}

.main-reup-panel-head button {
    border: 0;
    background: transparent;
    color: var(--content-font-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.main-reup-panel-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.main-reup-panel-head-actions button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 800;
}

.main-reup-panel-head-actions button:hover {
    background: rgb(from var(--content-font-color) r g b / 9%);
}

.main-reup-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--card-border-color);
    background: var(--card-bg-color);
}

.main-reup-tab {
    height: 34px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--btn-secondary-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    cursor: pointer;
}

.main-reup-tab.is-active {
    border-color: var(--accent-color);
    background: rgb(from var(--accent-color) r g b / 16%);
    color: var(--content-font-color);
}

.main-reup-panel-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
}

.main-reup-dialog[hidden] {
    display: none !important;
}

.main-reup-dialog {
    position: fixed;
    inset: 0;
    z-index: 30020;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.main-reup-dialog.is-open {
    opacity: 1;
    pointer-events: auto;
}

.main-reup-dialog-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 18, 28, 0.34);
    cursor: default;
}

.main-reup-dialog-card {
    position: relative;
    z-index: 1;
    width: min(420px, 92vw);
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
}

.main-reup-dialog.is-open .main-reup-dialog-card {
    transform: translateY(0) scale(1);
}

.main-reup-dialog-card > strong {
    padding-right: 26px;
    font-size: 13px;
    line-height: 1.35;
}

.main-reup-dialog-card > p {
    margin: 0;
    color: var(--content-font-color);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-line;
}

.main-reup-dialog-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.main-reup-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.main-reup-dialog-actions button {
    min-width: 72px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--btn-secondary-border);
    border-radius: var(--btn-secondary-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.main-reup-dialog-actions .main-reup-dialog-confirm {
    border-color: var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.main-reup-dialog.is-danger .main-reup-dialog-actions .main-reup-dialog-confirm {
    border-color: rgb(185 35 45 / 72%);
    background: rgb(185 35 45 / 92%);
    color: #fff;
}

.main-reup-tab-panel {
    display: none;
}

.main-reup-tab-panel.is-active {
    display: block;
}

.main-reup-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.main-reup-field-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.main-reup-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.main-reup-section-name-field {
    position: relative;
}

.main-reup-section-name-control {
    grid-column: span 2;
}

.main-reup-inline-name {
    position: relative;
}

.main-reup-inline-name input {
    height: 42px;
    padding-right: 36px;
    border-style: dashed;
    background: transparent;
    color: var(--content-font-color);
    font-size: 17px;
    font-weight: 700;
}

.main-reup-inline-name i {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--content-font-color);
    opacity: 0.36;
    pointer-events: none;
}

.main-reup-inline-name:focus-within i {
    opacity: 0.68;
}

.main-reup-hidden-field {
    display: none !important;
}

.main-reup-field-grid input,
.main-reup-field-grid select,
.main-reup-field-grid textarea {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
}

.main-reup-field-grid input,
.main-reup-field-grid select {
    height: 34px;
}

.main-reup-field-grid textarea {
    min-height: 92px;
    resize: vertical;
}

.main-reup-color-field,
.main-reup-radius-field,
.main-reup-spacing-field,
.main-reup-transform-field,
.main-reup-border-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.main-reup-color-row,
.main-reup-box-grid,
.main-reup-transform-grid {
    display: grid;
    gap: 6px;
}

.main-reup-color-row {
    grid-template-columns: 42px minmax(0, 1fr);
}

.main-reup-color-row input[type="color"] {
    width: 42px;
    padding: 2px;
}

.main-reup-opacity-field {
    gap: 4px;
}

.main-reup-opacity-field span {
    display: flex;
    justify-content: space-between;
    font-style: normal;
}

.main-reup-opacity-field em {
    font-style: normal;
}

.main-reup-box-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.main-reup-transform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.main-reup-border-preview-box {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 20px solid transparent;
    border-image-width: 20px;
    border-image-slice: 30;
    border-image-repeat: stretch;
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--text-muted);
}

.main-reup-border-preview-box.has-image {
    border-image-source: inherit;
}

.main-reup-check-field {
    justify-content: end;
}

.main-reup-check-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

.main-reup-section-utility-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.main-reup-section-utility-row label,
.main-reup-section-border-row label,
.main-reup-section-frame-motion-row label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.main-reup-section-border-row,
.main-reup-section-frame-motion-row {
    display: grid;
    gap: 8px;
    align-items: end;
}

.main-reup-section-border-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.65fr) minmax(0, 2fr);
}

.main-reup-section-frame-motion-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.main-reup-section-border-image-field[hidden] {
    display: none !important;
}

.main-reup-section-utility-row .main-reup-check-field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
}

.main-reup-field-wide {
    grid-column: 1 / -1;
}

.main-reup-map-editor {
    position: relative;
    display: grid;
    gap: 4px;
    margin: 16px 0;
    height: 260px;
    padding: 10px;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--container-bg-color);
    user-select: none;
}

.main-reup-layout-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.main-reup-layout-create label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.main-reup-layout-create input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
}

.main-reup-layout-create button {
    height: 34px;
    border: 0;
    border-radius: var(--btn-primary-radius);
    padding: 0 12px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    cursor: pointer;
}

.main-reup-map-cell {
    position: relative;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: crosshair;
    min-width: 0;
    min-height: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.main-reup-map-cell.is-occupied {
    background: rgb(from var(--accent-color) r g b / 5%);
    border-color: rgb(from var(--accent-color) r g b / 18%);
}

.main-reup-map-cell.has-section-origin {
    padding-right: 22px;
}

.main-reup-map-cell.has-section {
    background: rgb(from var(--accent-color) r g b / 9%);
    border-color: rgb(from var(--accent-color) r g b / 54%);
    box-shadow: inset 0 0 0 1px rgb(from var(--accent-color) r g b / 9%);
}

.main-reup-map-cell.is-selected {
    background: var(--accent-color);
    color: var(--btn-accent-text);
    border-color: var(--accent-color);
}

.main-reup-map-cell.is-move-preview {
    background: rgb(from var(--accent-color) r g b / 22%);
    border-color: var(--accent-color);
}

.main-reup-map-cell.is-move-preview.is-invalid {
    background: rgb(220 38 38 / 16%);
    border-color: rgb(220 38 38 / 65%);
}

.main-reup-map-cell.is-section-dragging {
    z-index: 2;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgb(from var(--accent-color) r g b / 22%);
}

.main-reup-map-section-layer {
    position: absolute;
    inset: 10px;
    z-index: 2;
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    pointer-events: none;
}

.main-reup-map-section-box {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-self: stretch;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 24px 8px 26px;
    border: 1px solid rgb(from var(--accent-color) r g b / 58%);
    border-radius: var(--container-border-radius);
    background:
        linear-gradient(135deg, rgb(from var(--accent-color) r g b / 17%), rgb(from var(--accent-color) r g b / 7%)),
        var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow:
        inset 0 0 0 1px rgb(from var(--accent-color) r g b / 7%),
        0 8px 18px rgb(0 0 0 / 7%);
    cursor: pointer;
    overflow: hidden;
    pointer-events: auto;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.main-reup-map-section-box strong,
.main-reup-map-section-box small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-reup-map-section-box strong {
    align-self: end;
    font-size: 12px;
    font-weight: 800;
}

.main-reup-map-section-box small {
    align-self: start;
    color: var(--text-muted);
    font-size: 10px;
}

.main-reup-map-section-box:hover,
.main-reup-map-section-box.is-active-section {
    border-color: var(--accent-color);
    box-shadow:
        inset 0 0 0 1px rgb(from var(--accent-color) r g b / 12%),
        0 10px 24px rgb(from var(--accent-color) r g b / 16%);
}

.main-reup-map-section-box.is-section-dragging {
    z-index: 4;
    transform: translateY(-1px);
}

.main-reup-map-section-box.is-invalid {
    border-color: rgb(220 38 38 / 72%);
    background: rgb(220 38 38 / 14%);
}

.main-reup-map-section-box.is-mobile-hidden-section {
    opacity: 0.55;
    border-style: dashed;
}

.main-reup-section-move-handle {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border: 1px solid rgb(from var(--accent-color) r g b / 34%);
    border-radius: 7px;
    background: rgb(from var(--container-bg-color) r g b / 78%);
    color: var(--accent-color);
    line-height: 1;
    cursor: grab;
    box-shadow:
        0 5px 14px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 16%);
    opacity: 0.52;
    transform: translateY(-2px) scale(0.94);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.main-reup-section-move-handle i {
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

.main-reup-map-cell.has-section:hover .main-reup-section-move-handle,
.main-reup-map-section-box:hover .main-reup-section-move-handle,
.main-reup-map-cell:focus-visible .main-reup-section-move-handle,
.main-reup-map-section-box:focus-visible .main-reup-section-move-handle,
.main-reup-section-move-handle:hover,
.main-reup-section-move-handle.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.main-reup-section-move-handle:hover,
.main-reup-section-move-handle.is-active {
    border-color: rgb(from var(--accent-color) r g b / 80%);
    background: rgb(from var(--accent-color) r g b / 14%);
    box-shadow: 0 8px 18px rgb(from var(--accent-color) r g b / 22%);
}

.main-reup-section-move-handle.is-active {
    background: var(--accent-color);
    color: var(--btn-accent-text);
    cursor: grabbing;
}

.main-reup-track-handle {
    position: absolute;
    z-index: 3;
    border: 0;
    border-radius: 999px;
    background: transparent;
    opacity: 1;
    box-shadow: none;
}

.main-reup-track-handle-col {
    top: 10px;
    bottom: 10px;
    width: 5px;
    margin-left: -2.5px;
    cursor: col-resize;
}

.main-reup-track-handle-row {
    left: 10px;
    right: 10px;
    height: 5px;
    margin-top: -2.5px;
    cursor: row-resize;
}

.main-reup-track-handle:hover,
.main-reup-track-handle:focus-visible {
    background: var(--accent-color);
}

.main-reup-section-form,
.main-reup-layer-form {
    padding: 12px;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--container-bg-color);
}

.main-reup-section-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 10px;
}

.main-reup-section-picker label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.main-reup-section-picker select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
}

.main-reup-selection-summary,
.main-reup-muted,
#mainReupSaveMessage {
    color: var(--text-muted);
    font-size: 12px;
}

.main-reup-selection-summary {
    margin: 10px 0;
}

.main-reup-actions {
    display: flex;
    gap: 8px;
}

.main-reup-actions button,
.main-reup-panel-foot button,
.main-reup-section-picker button {
    border: 0;
    border-radius: var(--btn-secondary-radius);
    padding: 9px 10px;
    cursor: pointer;
}

.main-reup-layer-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.main-reup-layer-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--form-border-radius);
    background: var(--card-bg-color);
    cursor: grab;
}

.main-reup-layer-item.is-dragging {
    opacity: 0.48;
}

.main-reup-layer-item.is-editing {
    border-color: var(--accent-color);
}

.main-reup-layer-item div:first-child {
    min-width: 0;
}

.main-reup-layer-item span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
}

.main-reup-layer-item span i {
    flex: 0 0 10px;
    width: 10px;
    font-size: 8px;
    line-height: 1;
    text-align: center;
}

.main-reup-layer-item b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.main-reup-layer-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.main-reup-layer-item-actions a,
.main-reup-layer-item-actions button {
    border: 0;
    border-radius: var(--btn-secondary-radius);
    padding: 6px 8px;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.main-reup-layer-edit-panel {
    padding: 10px;
    border: 1px solid var(--accent-color);
    border-radius: var(--form-border-radius);
    background: var(--card-bg-color);
}

.main-reup-layer-edit-form {
    display: grid;
    gap: 10px;
}

.main-reup-layer-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.main-reup-layer-edit-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.main-reup-layer-edit-grid input,
.main-reup-layer-edit-grid select,
.main-reup-layer-edit-grid textarea {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--card-bg-color);
    color: var(--form-text-color);
}

.main-reup-layer-edit-grid input,
.main-reup-layer-edit-grid select {
    height: 32px;
}

.main-reup-layer-edit-grid textarea {
    min-height: 92px;
    resize: vertical;
}

.main-reup-layer-edit-wide,
.main-reup-layer-css,
.main-reup-layer-options {
    grid-column: 1 / -1;
}

.main-reup-layer-css,
.main-reup-layer-options {
    display: grid;
    gap: 8px;
}

.main-reup-layer-css summary,
.main-reup-layer-options summary {
    cursor: pointer;
    color: var(--content-font-color);
    font-size: 12px;
    font-weight: 700;
}

.main-reup-layer-color-field,
.main-reup-layer-option-field,
.main-reup-layer-box-field,
.main-reup-layer-border-row label,
.main-reup-layer-transform-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.main-reup-layer-color-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.main-reup-layer-color-inline {
    display: grid;
    grid-template-columns: 54px minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.main-reup-layer-color-inline > span {
    align-self: center;
}

.main-reup-layer-color-row input[type="color"] {
    width: 42px;
    padding: 2px;
}

.main-reup-layer-range-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.main-reup-layer-range-field span {
    display: flex;
    justify-content: space-between;
    font-style: normal;
}

.main-reup-layer-range-field em {
    font-style: normal;
}

.main-reup-layer-box-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.main-reup-layer-border-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.main-reup-layer-transform-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.main-reup-hero-source-field,
.main-reup-image-source-field {
    display: grid;
    gap: 6px;
}

.main-reup-hero-source-row,
.main-reup-image-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.36fr) 72px;
    gap: 6px;
    align-items: stretch;
}

.main-reup-image-source-row {
    grid-template-columns: minmax(96px, 0.22fr) minmax(0, 1fr);
}

.main-reup-hero-file-button {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 32px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.main-reup-hero-file-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.main-reup-hero-file-button span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.main-reup-hero-source-preview {
    position: relative;
    min-width: 0;
    height: 32px;
    overflow: hidden;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: rgb(from var(--container-bg-color) r g b / 56%);
}

.main-reup-hero-source-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-reup-hero-preview-empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 10px;
}

.main-reup-hero-preview-delete,
.main-reup-hero-preview-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
}

.main-reup-hero-preview-delete {
    border: 0;
    background: rgb(from var(--accent-color) r g b / 92%);
    color: var(--btn-primary-text);
    cursor: pointer;
}

.main-reup-hero-preview-badge {
    padding: 0 5px;
    background: rgb(from var(--content-font-color) r g b / 68%);
    color: var(--container-bg-color);
    font-size: 8px;
    letter-spacing: 0;
}

.main-reup-position-field {
    display: grid;
    gap: 6px;
}

.main-reup-position-control {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.main-reup-position-pad {
    position: relative;
    width: 108px;
    height: 108px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background:
        radial-gradient(circle at 50% 50%, rgb(from var(--accent-color) r g b / 12%) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(from var(--content-font-color) r g b / 16%) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgb(from var(--content-font-color) r g b / 16%) 50%, transparent calc(50% + 0.5px)),
        rgb(from var(--container-bg-color) r g b / 56%);
    cursor: crosshair;
    touch-action: none;
}

.main-reup-position-knob {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--container-bg-color);
    border-radius: 999px;
    background: var(--accent-color);
    box-shadow: 0 2px 8px rgb(from var(--black) r g b / 25%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.main-reup-position-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
}

.main-reup-position-inputs label {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 4px;
}

.main-reup-position-inputs label span,
.main-reup-position-inputs label em {
    color: var(--text-muted);
    font-size: 10px;
    font-style: normal;
}

.main-reup-position-inputs input {
    text-align: right;
}

.main-reup-position-inputs button {
    grid-column: 1 / -1;
    height: 32px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.main-reup-position-inputs button:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.main-reup-position-pad-actions {
    display: grid;
    align-content: center;
    min-width: 0;
}

.main-reup-position-pad-actions button {
    width: 100%;
    height: 34px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.main-reup-position-pad-actions button:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.main-reup-link-bundle-field {
    display: grid;
    gap: 6px;
}

.main-reup-link-bundle-head,
.main-reup-link-bundle-row {
    display: grid;
    grid-template-columns: minmax(72px, 0.6fr) minmax(120px, 1.4fr) minmax(110px, 0.9fr) 32px;
    gap: 6px;
    align-items: center;
}

.main-reup-link-bundle-head {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.main-reup-link-bundle-rows {
    display: grid;
    gap: 6px;
}

.main-reup-link-bundle-row input {
    height: 32px;
}

.main-reup-link-bundle-row button {
    height: 32px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
}

.main-reup-link-bundle-row button {
    display: grid;
    place-items: center;
    padding: 0;
}

.main-reup-link-bundle-row button:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.main-reup-layer-file-field {
    display: grid;
    gap: 8px;
}

.main-reup-layer-file-current,
.main-reup-image-preview-list {
    display: grid;
    gap: 6px;
}

.main-reup-image-preview-list {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    min-height: 34px;
}

.main-reup-layer-file-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: rgb(from var(--container-bg-color) r g b / 56%);
}

.main-reup-image-preview-item {
    grid-template-columns: 44px minmax(0, 1fr);
    min-width: 0;
    margin: 0;
    padding-right: 24px;
}

.main-reup-layer-file-item img {
    width: 44px;
    height: 34px;
    border-radius: calc(var(--form-border-radius) / 2);
    object-fit: cover;
    background: var(--card-bg-color);
}

.main-reup-layer-file-item span,
.main-reup-layer-file-item figcaption {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--content-font-color);
    font-size: 12px;
}

.main-reup-layer-file-item button:not(.main-reup-hero-preview-delete) {
    border: 0;
    border-radius: var(--btn-secondary-radius);
    padding: 5px 8px;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    font-size: 11px;
}

.main-reup-layer-file-field input[type="file"] {
    height: auto;
}

.main-reup-layer-edit-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

.main-reup-layer-edit-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    background: var(--card-bg-color);
}

.main-reup-layer-edit-actions button {
    border: 0;
    border-radius: var(--btn-secondary-radius);
    padding: 8px 10px;
    cursor: pointer;
}

.main-reup-layer-edit-actions button:first-child {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.main-reup-layer-edit-actions button:last-child {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

body.main-reup-admin-open #main-reup-builder .main-reup-section.is-layer-drop-target {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

body.main-reup-admin-open #main-reup-builder .main-reup-section.is-admin-selected,
body.main-reup-admin-open #main-reup-builder .layer.is-admin-selected {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

body.main-reup-admin-open #main-reup-builder .layer.is-admin-selected {
    box-shadow: 0 0 0 3px rgb(from var(--accent-color) r g b / 20%);
}

.main-reup-actions button:first-child,
.main-reup-panel-foot button {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.main-reup-actions button:last-child {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

.main-reup-section-picker button {
    align-self: end;
    height: 34px;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

/* Compact admin modal */
.main-reup-panel {
    width: min(900px, calc(100vw - 44px));
    height: min(620px, calc(100vh - 72px));
    min-width: min(400px, calc(100vw - 44px));
    min-height: 0;
    overflow: hidden;
    resize: both;
}

.main-reup-panel.is-minimized {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    resize: horizontal;
}

.main-reup-panel.is-minimized .main-reup-tabs,
.main-reup-panel.is-minimized .main-reup-panel-body,
.main-reup-panel.is-minimized .main-reup-panel-foot,
.main-reup-panel.is-minimized .main-reup-panel-resize {
    display: none !important;
}

.main-reup-panel-head {
    padding: 10px 14px;
}

.main-reup-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 14px;
}

.main-reup-tab {
    height: 32px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
}

.main-reup-panel-body {
    container-name: main-reup-panel-body;
    container-type: inline-size;
    min-height: 0;
    padding: 12px 14px;
}

.main-reup-tab-panel.is-active {
    min-height: 0;
}

.main-reup-tab-panel[data-reup-panel="layout"].is-active {
    display: grid;
    min-height: 0;
}

.main-reup-layout-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 286px);
    gap: 12px;
    min-height: 0;
    height: min(450px, calc(100vh - 170px));
}

.main-reup-layout-map-shell,
.main-reup-layout-inspector,
.main-reup-layout-summary-card,
.main-reup-layout-position-card {
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--card-bg-color);
}

.main-reup-layout-map-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
}

.main-reup-layout-map-head,
.main-reup-layout-inspector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.main-reup-layout-map-head > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.main-reup-layout-map-head strong,
.main-reup-layout-inspector-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--content-font-color);
    font-size: 12px;
}

.main-reup-layout-map-head span,
.main-reup-layout-inspector-head span,
.main-reup-layout-selection-meta {
    color: var(--text-muted);
    font-size: 11px;
}

.main-reup-layout-mode-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--form-border-color);
    border-radius: 6px;
    background: var(--form-bg-color);
}

.main-reup-layout-mode-toggle button {
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.main-reup-layout-mode-toggle button.is-active {
    background: var(--content-bg-color);
    color: var(--content-font-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.main-reup-layout-strip[hidden],
.main-reup-mobile-layout-strip[hidden] {
    display: none !important;
}

.main-reup-map-editor.is-mobile-layout-editor {
    aspect-ratio: 3 / 7;
    height: min(52vh, 520px);
    max-width: min(100%, 360px);
    margin-right: auto;
    margin-left: auto;
}

.main-reup-map-editor.is-mobile-layout-editor .main-reup-section-span-handle,
.main-reup-map-editor.is-mobile-layout-editor .main-reup-track-handle {
    display: none !important;
}

.main-reup-map-editor.is-mobile-layout-editor .main-reup-section-span-handle {
    display: block !important;
}

.main-reup-layout-inspector-head span {
    flex: 0 0 auto;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    padding: 4px 7px;
    background: rgb(from var(--accent-color) r g b / 10%);
    color: var(--accent-color);
    font-weight: 800;
}

.main-reup-layout-inspector {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}

.main-reup-layout-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.main-reup-layout-strip label:nth-child(5) {
    grid-column: 1 / -1;
}

.main-reup-field-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.main-reup-info-tip {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: help;
}

.main-reup-info-tip i {
    font-size: 12px;
    line-height: 1;
}

.main-reup-info-tip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: max-content;
    max-width: 230px;
    padding: 6px 8px;
    border: 1px solid var(--container-border-color);
    border-radius: 6px;
    background: var(--card-bg-color);
    color: var(--content-font-color);
    box-shadow: var(--shadow-md);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.main-reup-info-tip:hover,
.main-reup-info-tip:focus-visible {
    color: var(--accent-color);
    outline: 0;
}

.main-reup-info-tip:hover::after,
.main-reup-info-tip:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-reup-layout-summary-card {
    display: grid;
    gap: 4px;
    padding: 9px;
}

.main-reup-layout-summary-card[hidden],
.main-reup-layout-create[hidden],
.main-reup-layout-position-card[hidden] {
    display: none !important;
}

.main-reup-layout-summary-card .main-reup-selection-summary {
    margin: 0;
    color: var(--content-font-color);
    font-weight: 700;
}

.main-reup-layout-selection-meta {
    line-height: 1.35;
}

.main-reup-layout-position-card {
    display: grid;
    gap: 9px;
    padding: 9px;
}

.main-reup-layout-position-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.main-reup-layout-position-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--content-font-color);
    font-size: 12px;
}

.main-reup-layout-position-head span {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
}

.main-reup-layout-position-control {
    grid-template-columns: 96px minmax(0, 1fr);
}

.main-reup-layout-position-control .main-reup-position-pad {
    width: 96px;
    height: 96px;
}

.main-reup-layout-position-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.main-reup-layout-position-inputs label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
}

.main-reup-layout-position-inputs span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.main-reup-layout-workbench .main-reup-layout-create {
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: stretch;
}

.main-reup-layout-workbench .main-reup-layout-create button {
    width: 100%;
}

.main-reup-layout-strip label,
.main-reup-layer-create-grid label,
.main-reup-section-detail-grid label {
    gap: 4px;
}

.main-reup-section-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.main-reup-section-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.main-reup-section-form[hidden] {
    display: none !important;
}

.main-reup-section-detail-grid .main-reup-field-wide,
.main-reup-section-detail-grid .main-reup-section-utility-row,
.main-reup-section-detail-grid .main-reup-section-border-row,
.main-reup-section-detail-grid .main-reup-section-frame-motion-row,
.main-reup-section-detail-grid .main-reup-spacing-field,
.main-reup-section-detail-grid .main-reup-radius-field,
.main-reup-section-detail-grid .main-reup-transform-field {
    grid-column: 1 / -1;
}

.main-reup-section-detail-grid > .main-reup-color-field {
    grid-column: span 2;
}

.main-reup-color-field,
.main-reup-layer-color-inline {
    display: grid;
    grid-template-columns: max-content minmax(126px, 1fr) minmax(76px, auto);
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.main-reup-color-field > span,
.main-reup-layer-color-inline > span {
    align-self: center;
    color: var(--text-muted);
}

.main-reup-color-row,
.main-reup-layer-color-row {
    grid-template-columns: 34px minmax(0, 1fr);
}

.main-reup-color-row input[type="color"],
.main-reup-layer-color-row input[type="color"] {
    width: 34px;
    height: 34px;
}

.main-reup-opacity-field,
.main-reup-layer-range-field {
    display: grid;
    gap: 3px;
    min-width: 76px;
}

.main-reup-opacity-field input[type="number"],
.main-reup-layer-range-field input[type="number"] {
    height: 34px;
    text-align: right;
}

.main-reup-map-editor {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: calc(var(--container-border-radius) - 2px);
    background:
        linear-gradient(rgb(from var(--container-border-color) r g b / 55%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(from var(--container-border-color) r g b / 55%) 1px, transparent 1px),
        var(--container-bg-color);
    background-size: 22px 22px;
}

.main-reup-map-cell.has-section-origin {
    padding-left: 30px;
    padding-right: 22px;
}

.main-reup-section-move-handle {
    left: 6px;
    right: auto;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    opacity: 0.82;
}

.main-reup-section-move-handle i {
    display: none;
}

.main-reup-handle-dot-grid {
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    pointer-events: none;
}

.main-reup-section-move-handle .main-reup-handle-dot-grid,
.main-reup-layer-item-grip .main-reup-handle-dot-grid,
#main-reup-builder .main-reup-live-layer-move-handle .main-reup-handle-dot-grid {
    color: var(--accent-color);
}

.main-reup-handle-dot-grid::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    box-shadow:
        6px 0 0 currentColor,
        0 6px 0 currentColor,
        6px 6px 0 currentColor;
}

.main-reup-section-span-handle {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 4;
    width: 28px;
    height: 28px;
    border-radius: 8px 0 8px 0;
    background: rgb(from var(--container-bg-color) r g b / 58%);
    opacity: 0.86;
    cursor: nwse-resize;
    pointer-events: auto;
    touch-action: none;
    transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
}

.main-reup-section-span-handle::before {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 14px;
    height: 14px;
    border-right: 3px solid var(--accent-color);
    border-bottom: 3px solid var(--accent-color);
    border-radius: 0 0 5px 0;
    pointer-events: none;
}

.main-reup-section-span-handle:hover,
.main-reup-section-span-handle.is-active {
    opacity: 1;
    background: rgb(from var(--accent-color) r g b / 13%);
    transform: translate(1px, 1px);
    filter: drop-shadow(0 0 7px var(--accent-color));
}

.main-reup-layer-create-grid {
    grid-template-columns: minmax(130px, 0.9fr) minmax(140px, 0.9fr) minmax(170px, 1.2fr);
    gap: 7px;
    align-items: start;
}

.main-reup-layer-form {
    padding: 0;
    overflow: visible;
}

.main-reup-layer-form-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: calc(var(--container-border-radius) - 1px);
    background: transparent;
    color: var(--content-font-color);
    cursor: pointer;
}

.main-reup-layer-form-toggle strong {
    font-size: 12px;
    font-weight: 800;
}

.main-reup-layer-form-toggle i {
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.14s ease, color 0.14s ease;
}

.main-reup-layer-form:not(.is-collapsed) .main-reup-layer-form-toggle i {
    color: var(--accent-color);
    transform: rotate(180deg);
}

.main-reup-layer-create-body {
    display: grid;
    gap: 7px;
    padding: 9px 10px 10px;
    border-top: 1px solid var(--container-border-color);
}

.main-reup-layer-create-body[hidden] {
    display: none !important;
}

.main-reup-layer-create-grid .main-reup-field-wide:not(#mainReupLayerContentWrap) {
    grid-column: auto;
}

.main-reup-layer-create-grid #mainReupLayerContentWrap {
    grid-column: 1 / -1;
}

.main-reup-layer-create-grid #mainReupLayerContentWrap textarea {
    min-height: 62px;
}

.main-reup-layer-form .main-reup-selection-summary {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.main-reup-layer-form .main-reup-actions {
    justify-content: flex-end;
}

.main-reup-layer-form .main-reup-actions button {
    padding: 7px 10px;
}

.main-reup-layer-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 0;
    height: min(450px, calc(100vh - 170px));
    margin-top: 12px;
}

.main-reup-layer-workbench.has-detail {
    grid-template-columns: minmax(240px, 34%) minmax(0, auto);
}

.main-reup-layer-workbench .main-reup-layer-list {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    height: 100%;
    max-height: none;
    margin-top: 0;
    padding: 10px;
    overflow: auto;
    align-content: start;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--card-bg-color);
}

.main-reup-layer-detail-host {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    height: 100%;
    max-height: none;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--card-bg-color);
}

.main-reup-layer-detail-host[hidden] {
    display: none !important;
}

.main-reup-layer-detail-host > strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--content-font-color);
    font-size: 12px;
}

.main-reup-layer-detail-host .main-reup-layer-edit-panel {
    padding: 0;
    border: 0;
    background: transparent;
}

.main-reup-layer-detail-host .main-reup-layer-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.main-reup-layer-content-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    overflow: visible;
}

.main-reup-layer-content-field > span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.main-reup-layer-edit-panel .ra0-editor-wrapper {
    display: grid;
    grid-template-rows: auto minmax(180px, auto) auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.main-reup-layer-edit-panel .ra0-editor-toolbar {
    position: relative;
    z-index: 5;
    max-height: none;
    overflow: visible;
}

.main-reup-layer-edit-panel .ra0-editor-viewer {
    position: relative;
    z-index: 1;
    min-height: 180px !important;
    max-height: 360px;
    overflow: auto;
}

.main-reup-layer-edit-panel .ra0-editor-source {
    min-height: 180px;
    max-height: 360px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    overflow: auto;
}

.main-reup-layer-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.main-reup-layer-list-head strong {
    color: var(--content-font-color);
    font-size: 12px;
}

.main-reup-layer-list-head span {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
}

.main-reup-layer-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-content: start;
    gap: 7px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.main-reup-layer-workbench.has-detail .main-reup-layer-stack {
    grid-template-columns: 1fr;
}

.main-reup-preset-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
    gap: 12px;
    align-items: stretch;
    min-height: min(450px, calc(100vh - 170px));
}

.main-reup-preset-card,
.main-reup-preset-list {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--card-bg-color);
}

.main-reup-preset-card {
    display: grid;
    align-content: start;
    gap: 12px;
}

.main-reup-preset-head,
.main-reup-preset-list > strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--content-font-color);
    font-size: 12px;
}

.main-reup-preset-head span,
.main-reup-preset-list > strong span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.main-reup-preset-warning {
    margin: 0;
    padding: 9px 10px;
    border: 1px solid rgb(from var(--accent-color) r g b / 28%);
    border-radius: var(--form-border-radius);
    background: rgb(from var(--accent-color) r g b / 9%);
    color: var(--content-font-color);
    font-size: 12px;
    line-height: 1.45;
}

.main-reup-preset-form {
    grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
}

.main-reup-preset-actions {
    justify-content: flex-start;
}

.main-reup-preset-list {
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
}

.main-reup-preset-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--content-font-color);
}

.main-reup-preset-item.is-active {
    border-color: var(--accent-color);
    background: rgb(from var(--accent-color) r g b / 12%);
}

.main-reup-preset-pick {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 2px 3px;
    border: 0;
    background: transparent;
    color: var(--content-font-color);
    text-align: left;
    cursor: pointer;
}

.main-reup-preset-pick b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.main-reup-preset-pick span {
    color: var(--text-muted);
    font-size: 11px;
}

.main-reup-preset-delete {
    min-width: 48px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid rgb(185 35 45 / 38%);
    border-radius: var(--btn-secondary-radius);
    background: rgb(185 35 45 / 10%);
    color: #9f1f2b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.main-reup-preset-delete:hover,
.main-reup-preset-delete:focus-visible {
    border-color: rgb(185 35 45 / 64%);
    background: rgb(185 35 45 / 16%);
}

@container main-reup-panel-body (max-width: 720px) {
    .main-reup-layout-workbench,
    .main-reup-layer-workbench,
    .main-reup-layer-workbench.has-detail,
    .main-reup-preset-workbench {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .main-reup-layout-workbench .main-reup-map-editor {
        height: min(360px, 58vh);
    }

    .main-reup-layout-strip,
    .main-reup-layer-create-grid,
    .main-reup-layer-edit-grid,
    .main-reup-section-detail-grid,
    .main-reup-section-border-row,
    .main-reup-section-frame-motion-row,
    .main-reup-section-utility-row,
    .main-reup-preset-form {
        grid-template-columns: 1fr;
    }

    .main-reup-layout-strip label:nth-child(n),
    .main-reup-section-name-control,
    .main-reup-section-detail-grid > .main-reup-color-field,
    .main-reup-color-field,
    .main-reup-layer-color-inline {
        grid-column: 1 / -1;
    }

    .main-reup-layer-workbench .main-reup-layer-list,
    .main-reup-layer-detail-host {
        height: auto;
        max-height: none;
    }

    .main-reup-layer-stack {
        grid-template-columns: 1fr;
    }
}

.main-reup-layer-empty {
    margin: 0;
    padding: 18px 8px;
    border: 1px dashed var(--container-border-color);
    border-radius: var(--form-border-radius);
    text-align: center;
}

.main-reup-layer-item {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 8px;
    cursor: grab;
}

.main-reup-layer-item-grip {
    display: grid;
    place-items: center;
    align-self: start;
    width: 22px;
    height: 22px;
    border: 1px solid rgb(from var(--accent-color) r g b / 38%);
    border-radius: 7px;
    color: var(--accent-color);
    background: var(--form-bg-color);
    line-height: 0;
}

.main-reup-layer-item-grip .main-reup-handle-dot-grid {
    margin: auto;
}

.main-reup-layer-item-main {
    min-width: 0;
}

.main-reup-layer-item-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
}

.main-reup-layer-source {
    display: block !important;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 10px !important;
}

.main-reup-layer-item-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    align-items: center;
    justify-content: stretch;
    padding-top: 5px;
}

.main-reup-layer-target-select {
    width: 100%;
    min-width: 0;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    color: var(--form-text-color);
    font-size: 11px;
}

.main-reup-layer-item-actions button {
    height: 26px;
    white-space: nowrap;
}

.main-reup-layer-edit-check {
    min-height: 34px;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
}

@media (max-width: 768px) {
    .main-reup-builder {
        min-height: auto;
        display: block;
    }

    .main-reup-map {
        width: 100% !important;
        height: auto !important;
        min-height: 80vh;
    }

    .main-reup-panel {
        left: 2vw;
        right: 2vw;
        top: 4vh;
        width: auto !important;
        height: 90vh !important;
        min-width: 0;
        transform: translateY(8px) scale(0.98);
    }

    .main-reup-panel.open {
        transform: translateY(0) scale(1);
    }

    .main-reup-layout-workbench,
    .main-reup-layout-strip,
    .main-reup-section-detail-grid,
    .main-reup-section-border-row,
    .main-reup-section-frame-motion-row,
    .main-reup-section-utility-row,
    .main-reup-layer-create-grid,
    .main-reup-color-field,
    .main-reup-layer-color-inline,
    .main-reup-layer-edit-grid,
    .main-reup-section-form,
    .main-reup-layer-workbench,
    .main-reup-preset-workbench,
    .main-reup-preset-form {
        grid-template-columns: 1fr;
    }

    .main-reup-layout-workbench {
        height: auto;
    }

    .main-reup-layout-workbench .main-reup-map-editor {
        height: 360px;
    }

    .main-reup-layout-strip label:nth-child(n) {
        grid-column: 1 / -1;
    }

    .main-reup-section-name-control {
        grid-column: 1 / -1;
    }

    .main-reup-layer-workbench .main-reup-layer-list,
    .main-reup-layer-detail-host {
        height: auto;
        max-height: none;
    }

    .main-reup-layer-workbench.has-detail {
        grid-template-columns: 1fr;
    }

    .main-reup-layer-stack {
        grid-template-columns: 1fr;
    }

    .main-reup-section-detail-grid > .main-reup-color-field {
        grid-column: 1 / -1;
    }

    .main-reup-layer-item-actions {
        grid-template-columns: 1fr 1fr;
    }

    .main-reup-layer-target-select {
        grid-column: 1 / -1;
    }
}

/* ==========================================
   1. 메인 컨테이너
   ========================================== */

.admin-bar-content .upskin-version {
    font-size: 0.8em;
    font-family: var(--f-pre);
    color: var(--content-font-color);
    opacity: 0.2;
    position: absolute;
    bottom: 15px;
    right: 15px;
}

#main-builder {
    width: 100%;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    background: transparent;
    font-family: var(--content-font-family);
    color: var(--content-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90vh;
    overflow: hidden;
}

/* ==========================================
   2. 섹션 스타일
   ========================================== */

.section {
    background: rgb(from var(--container-bg-color) r g b / 80%);
    border-radius: var(--container-border-radius);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: all 0.2s ease;

}

/* 레이어에 배경색이 있으면 섹션 배경 투명화 */
.section:has(.layer[style*="background"]) {
    background: transparent;
}

/* 섹션별 기본 패딩 */
.section {
    padding: 0.2em;
}

/* ==========================================
   3. 프리셋별 레이아웃
   ========================================== */

/* 3-1. ISOLATED SYSTEM */
.preset-isolated_system .main-container {
    display: flex;
    flex-direction: row;
}

.preset-isolated_system .section-left {
    width: 20%;
    min-width: 200px;
    border-right: 1px solid var(--border-light);
}

.preset-isolated_system .section-center {
    width: 60%;
    flex: 1;
}

.preset-isolated_system .section-right-wrapper {
    width: 20%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-light);
}

.preset-isolated_system .section-top-right {
    height: 50%;
    border-bottom: 1px solid var(--border-light);
}

.preset-isolated_system .section-bottom-right {
    height: 50%;
}

/* 3-2. FULL WIDTH */
.preset-full_width .main-container {
    flex-direction: column;
}

.preset-full_width .section-main {
    width: 100%;
    height: 100vh;
}

/* 3-3. TWO COLUMN */
.preset-two_column .main-container {
    flex-direction: row;
}

.preset-two_column .section-left {
    width: 50%;
    border-right: 1px solid var(--border-light);
}

.preset-two_column .section-right {
    width: 50%;
}

/* 3-4. THREE COLUMN */
.preset-three_column .main-container {
    flex-direction: row;
}

.preset-three_column .section-left {
    width: 25%;
    min-width: 200px;
    border-right: 1px solid var(--border-light);
}

.preset-three_column .section-center {
    width: 50%;
    flex: 1;
}

.preset-three_column .section-right {
    width: 25%;
    min-width: 200px;
    border-left: 1px solid var(--border-light);
}

/* 3-5. HEADER + FOOTER */
.preset-header_footer .main-container {
    flex-direction: column;
}

.preset-header_footer .section-header {
    height: 20vh;
    min-height: 100px;
    border-bottom: 1px solid var(--border-light);
}

.preset-header_footer .section-main {
    flex: 1;
    overflow-y: auto;
}

.preset-header_footer .section-footer {
    height: 20vh;
    min-height: 100px;
    border-top: 1px solid var(--border-light);
}

/* ==========================================
   4. 레이어 공통 스타일
   ========================================== */

.layer {
    transition: all var(--transition-normal);
    position: relative;
    filter: var(--main-reup-layer-drop-shadow, none);
    /* Flexbox 환경에서 레이어가 부모 컨테이너를 벗어나지 않도록 */
    min-width: 0;
    min-height: 0;
    /* 내용물이 넘치지 않도록 기본 overflow 설정 */
    box-sizing: border-box;
}

/* 레이어에 배경색이 설정된 경우 */
.layer[style*="background-color"] {
    background: inherit; /* style 속성의 background-color 사용 */
}

.layer:last-child {
    margin-bottom: 0;
}

/* 레이어 애니메이션 */
.layer-animate {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 레이어 내부 스크롤 래퍼 (border-image와 스크롤 분리용) */
.layer-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    box-sizing: border-box;
    /* 레이어 padding 상속 */
    padding: inherit;
}

/* ==========================================
   5. 레이어 타입별 스타일
   ========================================== */

/* 5-1. 슬라이드 레이어 */
.layer-slide {
    padding: 0;
    overflow: hidden;
}

/* 슬라이드쇼 컨테이너 */
.slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 개별 슬라이드 */
.slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slideshow .slide.active {
    opacity: 1;
    visibility: visible;
}

/* 페이드 전환 (기본) */
.slideshow[data-transition="fade"] .slide {
    transform: none;
}

/* 슬라이드 전환 */
.slideshow[data-transition="slide"] .slide {
    transform: translateX(100%);
}

.slideshow[data-transition="slide"] .slide.active {
    transform: translateX(0);
}

.slideshow[data-transition="slide"] .slide.prev {
    transform: translateX(-100%);
}

/* 확대 전환 */
.slideshow[data-transition="zoom"] .slide {
    transform: scale(0.8);
}

.slideshow[data-transition="zoom"] .slide.active {
    transform: scale(1);
}

.slideshow[data-transition="zoom"] .slide.prev {
    transform: scale(1.2);
}

/* 슬라이드 이미지 배경 */
.slideshow .slide .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.slide-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.layer.layer-slide .slide .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--transition-base);
    border-radius: var(--container-border-radius);
    background: transparent;
    mix-blend-mode: normal;
}

.layer.layer-slide .slide:hover .slide-overlay {
    opacity: 0;
    background: transparent;
}

.slide-overlay.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.slide-overlay img {
    max-width: 100%;
    max-height: 60%;
    object-fit: contain;
    margin-bottom: 1rem;
}

.layer.layer-slide .slide .slide-overlay h3 {
}

.layer.layer-slide .slide .slide-overlay .slide-content {
    padding: 0;
    padding-top: 0.5em;
    width: 100%;
    height: auto;
}

.slide-controls {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.slide-controls button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgb(from var(--black) r g b / 50%);
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-controls button:hover {
    background: rgb(from var(--black) r g b / 70%);
    transform: scale(1.1);
}

/* 아이콘만 표시 (배경 없음) */
.slide-controls.icon-only button {
    background: transparent;
    color: rgb(from var(--white) r g b / 80%);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.slide-controls.icon-only button:hover {
    color: var(--white);
    text-shadow: 0 0 6px rgba(0, 0, 0, 1);
    transform: scale(1.2);
}

.slide-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.slide-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(from var(--white) r g b / 50%);
    cursor: pointer;
    transition: var(--transition-fast);
}

.slide-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* 5-3. 탭 레이어 */
.layer-tab {
    padding: 0;
}

.tab-labels {
    display: flex;
}

.tab-label {
    padding: 0.5em;
    text-align: center;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: var(--content-font-family);
    font-size: var(--content-font-size);
    color: var(--content-font-color);
    transition: var(--transition-fast);
}

.tab-label:hover {
    scale: 1.02;
}

.tab-label.active {
    color: var(--accent-color);
    font-weight: bold;
}

.tab-contents {
    padding: 0.5em;
}

.tab-content {
    display: none;
    height: 100%;
}

.tab-content.active {
    display: block;
}

.tab-container[class*="tab-style-"] {
    min-width: 0;
    min-height: 0;
}

.tab-style-folder .tab-labels,
.tab-style-stacked .tab-labels,
.tab-style-index .tab-labels {
    gap: 3px;
    align-items: flex-start;
}

.tab-style-folder .tab-label,
.tab-style-stacked .tab-label,
.tab-style-index .tab-label {
    position: relative;
    min-width: 42px;
    padding: 0.55em 0.75em;
    border: 1px solid var(--container-border-color);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: var(--container-bg-color);
    box-shadow: 0 -2px 0 rgb(from var(--content-font-color) r g b / 4%) inset;
}

.tab-style-folder .tab-label.active,
.tab-style-stacked .tab-label.active,
.tab-style-index .tab-label.active {
    color: var(--content-font-color);
    background: var(--card-bg-color);
    z-index: 2;
}

.tab-style-folder .tab-contents,
.tab-style-stacked .tab-contents,
.tab-style-index .tab-contents {
    border: 1px solid var(--container-border-color);
    border-radius: 0 var(--container-border-radius) var(--container-border-radius) var(--container-border-radius);
    background: var(--card-bg-color);
}

.tab-style-stacked .tab-label:nth-child(2) {
    transform: translateY(4px);
}

.tab-style-stacked .tab-label:nth-child(3) {
    transform: translateY(8px);
}

.tab-style-side {
    gap: 0;
}

.tab-style-side .tab-labels {
    gap: 4px;
    padding-top: 8px;
}

.tab-style-side .tab-label {
    min-width: 36px;
    min-height: 42px;
    border: 1px solid var(--container-border-color);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background: var(--container-bg-color);
    writing-mode: vertical-rl;
}

.tab-style-side .tab-label.active {
    background: var(--card-bg-color);
    color: var(--content-font-color);
}

.tab-style-side .tab-contents {
    border: 1px solid var(--container-border-color);
    border-radius: var(--container-border-radius);
    background: var(--card-bg-color);
}

.tab-style-index .tab-label {
    border-radius: 2px 2px 0 0;
    font-size: 11px;
    text-transform: uppercase;
}

/* 5-4. 이미지 레이어 */
.layer-image {
    padding: 0;
    overflow: hidden;
}


.layer.layer-image {
    overflow: hidden;
}

.layer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.layer-image img.contain {
    object-fit: contain;
}

.layer-image img.fill {
    object-fit: fill;
}

.layer-hero_image {
    overflow: hidden;
}

.hero-image-layer {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    container-type: inline-size;
    overflow: hidden;
    border: 0;
    background-color: transparent;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: none;
    color: var(--white);
    text-decoration: none;
}

.hero-image-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-overlay-dark::after {
    background: linear-gradient(180deg, rgb(from var(--black) r g b / 8%) 35%, rgb(from var(--black) r g b / 70%) 70%);
}

.hero-overlay-light::after {
    background: linear-gradient(180deg, rgb(from var(--white) r g b / 12%) 35%, rgb(from var(--white) r g b / 72%) 70%);
}

.hero-image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-image-layer > img {
    display: none;
}

.hero-image-placeholder {
    display: grid;
    place-items: center;
    gap: 8px;
    background: rgb(from var(--content-font-color) r g b / 8%);
    color: rgb(from var(--content-font-color) r g b / 65%);
}

.hero-image-caption {
    position: relative;
    z-index: 2;
    align-self: end;
    padding: clamp(16px, 4vw, 26px);
    max-width: 680px;
    display: grid;
    gap: 2px;
    gap: clamp(0px, 1.7cqw, 2px);
}

.hero-text-top .hero-image-caption { align-self: start; }
.hero-text-center .hero-image-caption { align-self: center; }

.hero-eyebrow {
    margin: 0;
    font-family: var(--hero-eyebrow-font-family, var(--content-font-family));
    font-size: 10px;
    font-size: clamp(9px, 2.1cqw, 11px);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--hero-eyebrow-color, rgb(from var(--white) r g b / 76%));
}

.hero-overlay-light .hero-image-caption,
.hero-overlay-light .hero-label-card {
    color: var(--content-font-color);
}

.hero-image-caption h3 {
    margin: 0;
    font-family: var(--hero-title-font-family, var(--title-font-family));
    font-size: clamp(40px, 6vw, 86px);
    font-size: clamp(40px, 14cqw, 86px);
    line-height: 1.02;
    letter-spacing: 0;
    color: var(--hero-title-color, currentColor);
}

.hero-caption-font-thin_title .hero-image-caption {
    gap: 10px;
}

.hero-caption-font-thin_title .hero-image-caption h3 {
    font-family: var(--hero-title-font-family, var(--content-font-family));
    font-weight: 300;
    font-size: clamp(40px, 5.4vw, 78px);
    font-size: clamp(40px, 13cqw, 78px);
    line-height: 1.16;
    letter-spacing: 0;
}

.hero-caption-font-thin_title .hero-eyebrow,
.hero-caption-font-thin_title .hero-description {
    font-weight: 300;
}

.hero-caption-font-memo_title .hero-image-caption h3 {
    font-family: var(--hero-title-font-family, 'ROEHOE-CHAN', var(--title-font-family));
    font-weight: 400;
    line-height: 1.18;
}

.hero-description {
    margin: 0;
    font-family: var(--hero-description-font-family, var(--content-font-family));
    font-size: 13px;
    font-size: clamp(11px, 2.8cqw, 14px);
    line-height: 1.6;
    color: var(--hero-description-color, rgb(from var(--white) r g b / 82%));
}

.hero-overlay-light .hero-eyebrow {
    color: var(--hero-eyebrow-color, rgb(from var(--content-font-color) r g b / 70%));
}

.hero-overlay-light .hero-description {
    color: var(--hero-description-color, rgb(from var(--content-font-color) r g b / 70%));
}

.hero-label-grid {
    position: relative;
    z-index: 2;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 0 clamp(16px, 4vw, 34px) clamp(16px, 4vw, 30px);
}

.hero-label-card {
    min-width: 0;
    padding: 12px;
    border: 1px dashed rgb(from var(--white) r g b / 30%);
    background: rgb(from var(--white) r g b / 8%);
    backdrop-filter: blur(6px);
}

.hero-label-card p,
.hero-label-card strong,
.hero-label-card span {
    display: block;
    margin: 0;
}

.hero-label-card p {
    font-size: 10px;
    color: rgb(from currentColor r g b / 65%);
    text-transform: uppercase;
}

.hero-label-card strong {
    margin-top: 6px;
    font-family: var(--title-font-family);
    font-size: 15px;
}

.hero-label-card span {
    margin-top: 4px;
    font-size: 11px;
    color: rgb(from currentColor r g b / 65%);
}

/* 5-5. 링크 묶음 레이어 */
.layer-link_bundle {
    overflow: hidden;
    min-height: 0;
}

.link-bundle-widget {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
    --link-bundle-accent: var(--accent-color);
    --link-bundle-detail: var(--primary-color);
    --link-bundle-text: var(--content-font-color);
    --link-bundle-line-strong: rgb(from var(--link-bundle-text) r g b / 84%);
    --link-bundle-line-mid: rgb(from var(--link-bundle-text) r g b / 44%);
    --link-bundle-line-soft: rgb(from var(--link-bundle-text) r g b / 22%);
    --link-bundle-card-bg: var(--card-bg-color, var(--container-bg-color));
    color: var(--link-bundle-text);
    font-family: var(--content-font-family);
}

.link-bundle-widget.link-bundle-no-title {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
}

.link-bundle-widget.link-bundle-no-title .link-bundle-list,
.link-bundle-widget.link-bundle-no-title .link-bundle-empty {
    grid-row: 1;
}

.link-bundle-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link-bundle-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--title-font-family);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--primary-color);
}

.link-bundle-list {
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--link-bundle-columns, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 10px;
    align-content: stretch;
    overflow: auto;
    counter-reset: linkBundleFile;
}

.link-bundle-item {
    position: relative;
    isolation: isolate;
    counter-increment: linkBundleFile;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 14px 14px 12px;
    border: 1px solid var(--link-bundle-line-soft);
    border-radius: 0;
    background: var(--link-bundle-card-bg);
    color: inherit;
    overflow: hidden;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.link-bundle-item::before,
.link-bundle-item::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.link-bundle-item::before {
    display: none;
}

.link-bundle-item::after {
    display: none;
}

.link-bundle-kicker {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: none;
    align-items: center;
    gap: 5px;
    font-family: var(--mono-font-family, var(--content-font-family));
    font-size: 10px;
    line-height: 1;
    color: rgb(from var(--link-bundle-text) r g b / 62%);
    text-transform: uppercase;
}

.link-bundle-kicker i {
    flex: 0 0 auto;
    width: 11px;
    text-align: left;
    font-size: 10px;
    color: var(--link-bundle-accent);
}

.link-bundle-number {
    position: absolute;
    z-index: 3;
    top: 9px;
    right: 10px;
    font-family: var(--mono-font-family, var(--content-font-family));
    font-size: 11px;
    line-height: 1;
    color: rgb(from var(--link-bundle-text) r g b / 55%);
}

.link-bundle-mark {
    position: absolute;
    z-index: 3;
    right: 8px;
    bottom: 5px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: rgb(from var(--link-bundle-accent) r g b / 22%);
    pointer-events: none;
}

.link-bundle-mark i {
    font-size: 46px;
    line-height: 1;
}

.link-bundle-label {
    position: relative;
    z-index: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--content-font-family);
    font-size: clamp(12px, 2.1cqw, 17px);
    font-weight: 700;
    line-height: 1.25;
}

.link-bundle-primary {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.link-bundle-note {
    position: relative;
    z-index: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: end;
    font-family: var(--mono-font-family, var(--content-font-family));
    font-size: 10px;
    line-height: 1.1;
    color: rgb(from var(--link-bundle-text) r g b / 55%);
}

.link-bundle-note::before {
    content: "LINK ";
    color: var(--link-bundle-accent);
    font-weight: 900;
}

.link-bundle-item:hover {
    border-color: rgb(from var(--link-bundle-accent) r g b / 58%);
    background: var(--link-bundle-card-bg);
    transform: translateY(-1px);
}

.link-bundle-item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.link-bundle-item:active {
    transform: translateY(1px);
}

/* 미션형 */
.link-bundle-style-mission_type .link-bundle-list {
    grid-auto-rows: minmax(0, 1fr);
}

.link-bundle-style-mission_type .link-bundle-item {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 17px 15px;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 12px);
    border: 0;
    background: var(--link-bundle-accent);
}

.link-bundle-style-mission_type .link-bundle-item::before {
    display: block;
    z-index: 0;
    inset: 1px;
    width: auto;
    clip-path: inherit;
    background: var(--link-bundle-card-bg);
    box-shadow: none;
}

.link-bundle-style-mission_type .link-bundle-item::after {
    display: block;
    z-index: 2;
    right: 13px;
    bottom: 16px;
    width: 13px;
    height: 62px;
    background:
        linear-gradient(135deg, transparent 0 26%, var(--primary-color) 27% 72%, transparent 73%) 0 0 / 100% 16px no-repeat,
        linear-gradient(135deg, transparent 0 26%, var(--primary-color) 27% 72%, transparent 73%) 0 23px / 100% 16px no-repeat,
        linear-gradient(135deg, transparent 0 26%, var(--primary-color) 27% 72%, transparent 73%) 0 46px / 100% 16px no-repeat;
}

.link-bundle-style-mission_type .link-bundle-kicker {
    display: block;
    font-weight: 900;
    color: var(--link-bundle-text);
}

.link-bundle-style-mission_type .link-bundle-kicker i {
    display: none;
}

.link-bundle-style-mission_type .link-bundle-kicker::before {
    content: "MISSION NAME";
}

.link-bundle-style-mission_type .link-bundle-label {
    align-self: start;
    padding-right: 28px;
    font-family: var(--mono-font-family, var(--content-font-family));
    font-size: clamp(12px, 1.45cqw, 16px);
    font-weight: 900;
    text-transform: uppercase;
}

.link-bundle-style-mission_type .link-bundle-number {
    top: auto;
    right: 35px;
    bottom: 15px;
    color: var(--link-bundle-accent);
    font-size: 13px;
}

.link-bundle-style-mission_type .link-bundle-note {
    max-width: calc(100% - 30px);
    color: var(--link-bundle-text);
}

.link-bundle-style-mission_type .link-bundle-mark {
    display: none;
}

/* 파일형 */
.link-bundle-style-file_type .link-bundle-list {
    grid-auto-rows: minmax(0, 1fr);
}

.link-bundle-style-file_type .link-bundle-item {
    min-height: 0;
    max-height: none;
    display: grid;
    grid-template-rows: minmax(52px, 1fr) auto auto;
    gap: 7px;
    padding: 16px 14px 13px;
    border-color: var(--link-bundle-line-mid);
    background:
        linear-gradient(90deg, transparent 0 calc(100% - 6px), var(--link-bundle-accent) calc(100% - 6px)),
        var(--link-bundle-card-bg);
}

.link-bundle-style-file_type .link-bundle-item::before {
    display: block;
    z-index: 1;
    left: 11px;
    top: 10px;
    width: 30px;
    height: 2px;
    background: var(--link-bundle-line-soft);
    box-shadow:
        0 9px 0 var(--link-bundle-line-soft),
        0 18px 0 var(--link-bundle-line-soft),
        0 27px 0 var(--link-bundle-line-soft);
}

.link-bundle-style-file_type .link-bundle-item::after {
    display: block;
    z-index: 2;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    background:
        linear-gradient(135deg, transparent 0 48%, var(--link-bundle-line-strong) 49% 52%, transparent 53%),
        rgb(from var(--link-bundle-text) r g b / 54%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.link-bundle-style-file_type .link-bundle-number {
    top: 14px;
    left: 14px;
    right: auto;
    color: rgb(from var(--link-bundle-text) r g b / 55%);
    font-size: 14px;
}

.link-bundle-style-file_type .link-bundle-mark {
    position: relative;
    inset: auto;
    align-self: center;
    justify-self: center;
    width: 58px;
    height: 58px;
    border: 1px solid var(--link-bundle-line-soft);
    background: rgb(from var(--container-bg-color) r g b / 70%);
    color: var(--link-bundle-text);
}

.link-bundle-style-file_type .link-bundle-mark i {
    font-size: 24px;
}

.link-bundle-style-file_type .link-bundle-kicker {
    display: none;
}

.link-bundle-style-file_type .link-bundle-label {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: var(--mono-font-family, var(--content-font-family));
    font-size: clamp(12px, 1.25cqw, 15px);
    font-weight: 800;
    text-transform: uppercase;
}

.link-bundle-style-file_type .link-bundle-note {
    padding-right: 9px;
    color: var(--link-bundle-text);
    font-size: 9px;
}

.link-bundle-style-file_type .link-bundle-note::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: 0;
    width: 3px;
    height: 44px;
    background: var(--link-bundle-accent);
    box-shadow: -6px 18px 0 var(--link-bundle-detail);
}

/* 링크형 */
.link-bundle-style-link_type .link-bundle-list {
    grid-template-columns: repeat(var(--link-bundle-columns, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 8px;
}

.link-bundle-style-link_type .link-bundle-item {
    min-height: 0;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) minmax(58px, 26%);
    grid-template-rows: minmax(34px, auto) 22px;
    align-items: center;
    gap: 0 12px;
    padding: 9px 10px;
    border-top-color: var(--link-bundle-line-mid);
    border-right-color: transparent;
    border-bottom-color: var(--link-bundle-line-mid);
    border-left: 3px solid var(--link-bundle-accent);
    background: var(--link-bundle-card-bg);
}

.link-bundle-style-link_type .link-bundle-item::after {
    display: block;
    z-index: 1;
    left: 8px;
    right: 8px;
    top: 7px;
    bottom: 7px;
    width: auto;
    height: auto;
    border-left: 1px dotted var(--link-bundle-line-soft);
    border-right: 1px dotted var(--link-bundle-line-soft);
    background:
        linear-gradient(var(--link-bundle-line-soft), var(--link-bundle-line-soft)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--link-bundle-line-soft), var(--link-bundle-line-soft)) 0 100% / 100% 1px no-repeat,
        linear-gradient(135deg, transparent 0 42%, var(--link-bundle-detail) 43% 58%, transparent 59%) 100% 8px / 28px 8px no-repeat;
}

.link-bundle-style-link_type .link-bundle-primary {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: min(100%, 28ch);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.link-bundle-style-link_type .link-bundle-mark {
    position: relative;
    inset: auto;
    align-self: center;
    justify-self: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--link-bundle-text);
}

.link-bundle-style-link_type .link-bundle-no-icon .link-bundle-mark {
    width: 12px;
    height: 12px;
    border: 2px solid var(--link-bundle-text);
    background: transparent;
}

.link-bundle-style-link_type .link-bundle-no-icon .link-bundle-mark i {
    display: none;
}

.link-bundle-style-link_type .link-bundle-mark i {
    font-size: 15px;
}

.link-bundle-style-link_type .link-bundle-label {
    padding: 5px 0 2px;
    flex: 0 1 auto;
    font-family: var(--title-font-family);
    font-size: clamp(19px, 2.5cqw, 34px);
    font-weight: 800;
    line-height: .96;
    white-space: normal;
    overflow-wrap: anywhere;
}

.link-bundle-style-link_type .link-bundle-note {
    grid-column: 1;
    grid-row: 2;
    color: var(--link-bundle-text);
    font-size: 8px;
    text-align: center;
}

.link-bundle-style-link_type .link-bundle-number {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    color: var(--link-bundle-detail);
    font-size: clamp(44px, 6.2cqw, 82px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: .78;
    opacity: .88;
}

.link-bundle-style-link_type .link-bundle-kicker {
    display: none;
}

.link-bundle-style-mission_type .link-bundle-item:hover,
.link-bundle-style-file_type .link-bundle-item:hover,
.link-bundle-style-link_type .link-bundle-item:hover {
    box-shadow:
        0 0 0 1px rgb(from var(--link-bundle-accent) r g b / 34%),
        0 10px 24px rgb(from var(--link-bundle-accent) r g b / 18%);
}

@container (max-width: 420px) {
    .link-bundle-style-mission_type .link-bundle-list,
    .link-bundle-style-file_type .link-bundle-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .link-bundle-style-mission_type .link-bundle-item,
    .link-bundle-style-file_type .link-bundle-item {
        min-height: 0;
        padding: 11px;
    }

    .link-bundle-style-link_type .link-bundle-label {
        font-size: clamp(12px, 5cqw, 16px);
    }
}

@container (max-width: 260px) {
    .link-bundle-style-mission_type .link-bundle-list,
    .link-bundle-style-file_type .link-bundle-list,
    .link-bundle-style-link_type .link-bundle-list {
        grid-template-columns: 1fr;
    }

    .link-bundle-style-link_type .link-bundle-item {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-bundle-item {
        transition: none;
    }

    .link-bundle-item:hover {
        transform: none;
    }
}

.link-bundle-empty {
    margin: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    color: rgb(from var(--link-bundle-text) r g b / 52%);
    font-size: 12px;
    text-align: center;
}

/* 5-5. 갤러리 레이어 */
.layer-gallery {
    padding: 1rem;
    min-height: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
    grid-template-rows: repeat(var(--gallery-rows, 1), minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.gallery-grid.gallery-single-row {
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
}

.gallery-grid.gallery-multi-row {
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
}

.gallery-grid.columns-2 {
    --gallery-columns: 2;
}

.gallery-grid.columns-3 {
    --gallery-columns: 3;
}

.gallery-grid.columns-4 {
    --gallery-columns: 4;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--card-border-radius) / 2);
    min-width: 0;
    min-height: 0;
}

.gallery-grid.gallery-multi-row .gallery-item {
    height: 100%;
}

.gallery-grid.gallery-single-row .gallery-item {
    height: 100%;
    aspect-ratio: auto;
}

.gallery-item > a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    transition: var(--transition-normal);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* 5-6. 텍스트 레이어 */
.layer-text {
    padding: 1.5rem;
}

.layer-text .text-content {
    font-family: var(--content-font-family);
    font-size: var(--content-font-size);
    color: var(--content-font-color);
    line-height: 1.7;
}

.layer-text .text-content.left {
    text-align: left;
}

.layer-text .text-content.center {
    text-align: center;
}

.layer-text .text-content.right {
    text-align: right;
}

.layer-latest {
  padding: 1rem;
  min-width: 0;
  overflow: hidden;
}

/* 5-7. 최신글 레이어 */
.layer-latest .basic-latest {
  padding: var(--spacing-md);
}

/* 5-8. 게시판 iframe 레이어 */
.layer-board_iframe {
    padding: 0;
}

.layer-board_iframe iframe {
    width: 100%;
    border: none;
    display: block;
}

/* 5-9. 외부 iframe 레이어 */
.layer-external_iframe {
    padding: 0;
}

.layer-external_iframe iframe {
    width: 100%;
    border: none;
    display: block;
}

/* 5-10. 시계 레이어 */
.layer-clock {
    padding: 2rem;
    text-align: center;
}

#current-time {
    font-family: var(--title-font-family);
    font-size: 32px;
    font-weight: 700;
    color: var(--content-font-color);
    letter-spacing: 3px;
}

/* 5-11. 달력 레이어 (main_up 전용 - default.css 충돌 방지) */
.layer-calendar {
    padding: 1rem;
}

.layer-calendar-widget {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.layer-calendar-header {
    text-align: center;
    padding: 8px;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--content-font-color);
    margin-bottom: 8px;
}

.layer-calendar-title {
    color: var(--content-font-color);
}

.layer-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2px;
    flex: 1;
    height: 100%;
}

.layer-day-name {
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    padding: 8px 4px;
    color: rgb(from var(--content-font-color) r g b / 70%);
}

.layer-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--container-bg-color);
    color: var(--content-font-color);
    min-height: 0;
}

.layer-calendar-day:hover {
    background: rgb(from var(--primary-color) r g b / 10%);
}

.layer-calendar-day.today {
    background: var(--accent-color);
    color: var(--white);
    font-weight: 700;
    box-shadow: 0 2px 4px rgb(from var(--accent-color) r g b / 30%);
}

.layer-calendar-day.empty {
    background: transparent;
    cursor: default;
}

/* 5-12. 회원 정보 레이어 */
.layer-member_info {
    padding: 1rem;
}

.tab-content.active .layer-member_info {
    height: 100%;
}

.my_member_info {
    /* 기본 스타일은 default.css.php 참조 */
}

/* 회원 정보 탭 */
.my_member_info .member-tabs {
}

.my_member_info .tab-buttons {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-light);
}

.my_member_info .tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgb(from var(--content-font-color) r g b / 70%);
    font-family: var(--content-font-family);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.my_member_info .tab-btn:hover {
    color: var(--content-font-color);
    background: rgb(from var(--accent-color) r g b / 5%);
}

.my_member_info .tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    font-weight: 700;
}

.my_member_info .tab-btn .notification-badge {
    display: inline-block;
    background: var(--error-color);
    color: var(--white);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.3rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

.my_member_info .activity-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.my_member_info .activity-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--card-bg-color);
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    color: var(--content-font-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.my_member_info .activity-link:hover {
    background: var(--container-bg-color);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateX(4px);
}

.my_member_info .activity-link i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}

/* 로그인 폼 */
.main_login_form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main_login_form form {
    width: 90%;
}

/* 5-13. 소개글 레이어 */
.layer-about {
    padding: 1.5rem;
    line-height: 1.3;
}

.intro-content {
    font-family: var(--content-font-family);
    font-size: var(--content-font-size);
    color: var(--content-font-color);
    line-height: 1.7;
}

.intro-placeholder {
    color: rgb(from var(--content-font-color) r g b / 70%);
    font-style: italic;
    text-align: center;
}

/* 5-14. 한줄 공지 레이어 */
.layer-marquee {
    padding: 0.5rem 0;
    background: var(--primary-color);
    overflow: hidden;
    width: 100%;
}

.layer-marquee marquee {
    font-family: var(--content-font-family);
    font-size: var(--content-font-size);
    color: var(--content-font-color);
}

/* 5-15. 소개 레이어 */
.layer-about .about-layer {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 5px;
    color: var(--content-font-color);
    font-size: 1em;
    padding: var(--spacing-sm);
    width: 100%;
    height: 100%;
    justify-content: center;
}

.layer-about .about-layer h3 {
    font-size: 1.2em;
    font-family: var(--header-font-family);
}

/* ==========================================
   6. 관리자 전용 스타일
   ========================================== */


#admin-toolbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--white);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(from var(--black) r g b / 20%);
    display: flex;
    gap: 5px;
}

.btn-admin {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
}

.btn-admin:hover {
    opacity: 0.9;
}

/* ==========================================
   7. 반응형 디자인
   ========================================== */

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    /* 모든 프리셋을 세로 방향으로 변경 */
    .main-container {
        flex-direction: column !important;
        height: auto !important;
    }

    /* 레이아웃 컨테이너도 모바일에서는 세로 방향으로 */
    .layout-row,
    .layout-column {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
    }

    /* 컨테이너 내 모든 자식 요소 */
    .layout-row > *,
    .layout-column > * {
        width: 100% !important;
    }

    #main-builder {
        height: auto;
    }

    /* 모바일 숨김 클래스 */
    .hidden-mobile {
        display: none !important;
    }
}

/* ============================================
   레이아웃 시스템 공통 스타일
   ============================================ */

/* 레이아웃 컨테이너 (row/column) */
.layout-row,
.layout-column {
    display: flex;
    box-sizing: border-box;
    gap: 0;
    /* Flexbox 축소 문제 해결: 자식 요소가 컨테이너 크기를 넘지 않도록 */
    min-width: 0;
    min-height: 0;
}

.layout-row {
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.layout-row > * {
    /* row 내 자식 요소는 최소 너비 0으로 설정하여 축소 가능하게 */
    min-width: 0;
}

.layout-column {
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.layout-column > * {
    /* column 내 자식 요소는 최소 높이 0으로 설정하여 축소 가능하게 */
    min-height: 0;
}

/* 섹션 공통 스타일 */
.section {
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    gap: 0;
    /* 섹션도 부모 컨테이너에 맞춰 축소되도록 */
    min-width: 0;
    min-height: 0;
    /* flex 아이템일 때 축소 허용 */
    flex-shrink: 1;
}

/* main_reup grid preset renderer */
.main-reup-grid,
.main-reup-grid-tree,
.layout-grid-row,
.layout-grid-column {
    display: grid;
    box-sizing: border-box;
    align-items: stretch;
    justify-items: stretch;
}

.main-reup-grid > .section,
.main-reup-grid-tree > .section,
.layout-grid-row > .section,
.layout-grid-column > .section {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
}

.section-layout-flex {
    display: flex;
}

.section-layout-grid {
    display: grid;
}

.section-layout-grid > .layer {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
}

.section-layout-grid > .empty-section {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    #container_wr {
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-reup-builder {
        min-height: 0;
        align-items: flex-start;
        justify-content: center;
        overflow-x: hidden;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout {
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: var(--main-reup-mobile-aspect, 3 / 7);
        grid-template-columns: var(--main-reup-mobile-grid-columns) !important;
        grid-template-rows: var(--main-reup-mobile-grid-rows) !important;
        grid-auto-flow: row !important;
        gap: var(--main-reup-mobile-gap, 12px) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        zoom: 1;
        transform: none !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.has-mobile-placement {
        display: grid !important;
        grid-row: var(--main-reup-mobile-grid-row) !important;
        grid-column: var(--main-reup-mobile-grid-column) !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        place-self: stretch !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        order: var(--main-reup-mobile-order, 0) !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.has-mobile-placement::before,
    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.has-mobile-placement::after {
        pointer-events: none !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.is-mobile-layout-hidden {
        display: none !important;
    }

}

@media (max-width: 1024px), (pointer: coarse) {
    #container_wr:has(#main-reup-builder .main-reup-map.has-mobile-layout) {
        width: 100% !important;
        max-width: 100% !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout {
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: var(--main-reup-mobile-aspect, 3 / 7);
        grid-template-columns: var(--main-reup-mobile-grid-columns) !important;
        grid-template-rows: var(--main-reup-mobile-grid-rows) !important;
        grid-auto-flow: row !important;
        gap: var(--main-reup-mobile-gap, 12px) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        zoom: 1 !important;
        transform: none !important;
        margin-bottom: 0 !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.has-mobile-placement {
        display: grid !important;
        grid-row: var(--main-reup-mobile-grid-row) !important;
        grid-column: var(--main-reup-mobile-grid-column) !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        place-self: stretch !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        order: var(--main-reup-mobile-order, 0) !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.has-mobile-placement::before,
    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.has-mobile-placement::after {
        pointer-events: none !important;
    }

    #main-reup-builder .main-reup-map.has-mobile-layout .main-reup-section.is-mobile-layout-hidden {
        display: none !important;
    }
}

/* 빈 섹션 (관리자 전용) */
.empty-section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    border: 2px dashed rgba(0, 0, 0, 0.1);
    gap: 0.3em;
    padding: var(--spacing-sm);
}

.empty-section p {
    color: rgb(from var(--content-font-color) r g b / 70%);
    font-size: 1em;
}

.empty-section a {
    padding: 8px 16px;
    background: var(--info-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 4px;
    font-size: 1em;
}

.empty-section a:hover {
    background: var(--success-color);
}

/* ============================================
   플로팅 관리자 토글 버튼
   ============================================ */
.admin-floating-toggle {
    position: fixed;
    bottom: 4%;
    left: calc(1% + 45px); /* widget-toolbar 우측 */
    z-index: 99989;
}

.admin-floating-toggle.dragging {
    cursor: grabbing;
    user-select: none;
}

/* 메인 토글 버튼 */
.floating-toggle-btn {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    color: var(--white);
    font-size: 16px;
    cursor: grab;
    box-shadow: 0 2px 8px rgb(from var(--black) r g b / 30%);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-toggle-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.floating-toggle-btn:active {
    cursor: grabbing;
}

.floating-toggle-btn i {
    transition: transform 0.3s ease;
}

.admin-floating-toggle.menu-open .floating-toggle-btn i {
    transform: rotate(90deg);
}

/* 플로팅 메뉴 (세로형, 절대 위치) */
.floating-menu {
    position: absolute;
    left: -5px;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--card-bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgb(from var(--black) r g b / 25%);
    border: 1px solid var(--border-light);
}

/* 메뉴 위로 (기본: 버튼이 화면 하단에 있을 때) */
.admin-floating-toggle .floating-menu {
    bottom: 100%;
    margin-bottom: 8px;
}

/* 메뉴 아래로 (버튼이 화면 상단에 있을 때) */
.admin-floating-toggle.menu-down .floating-menu {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 8px;
}

.admin-floating-toggle.menu-open .floating-menu {
    display: flex;
}

/* 플로팅 메뉴 버튼 */
.floating-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: var(--bg-glass);
    color: var(--content-font-color);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.floating-menu-btn:hover {
    background: var(--primary-color);
    color: var(--white);
}

.floating-menu-btn.active {
    background: var(--primary-color);
    color: var(--white);
}

/* 툴팁 (우측에 표시) */
.floating-menu-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    background: var(--card-bg-color);
    color: var(--content-font-color);
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-left: 6px;
    box-shadow: 0 2px 8px rgb(from var(--black) r g b / 20%);
    border: 1px solid var(--border-light);
}

.floating-menu-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 편집모드 활성화 시 버튼 스타일 */
.floating-menu-btn#btn-edit-mode.edit-active {
    background: var(--success-color);
    color: var(--white);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(from var(--success-color) r g b / 40%); }
    50% { box-shadow: 0 0 0 6px rgb(from var(--success-color) r g b / 0%); }
}

/* ============================================
   플로팅 사이드 패널 (토글 버튼 우측)
   ============================================ */
.admin-side-panel {
    position: fixed;
    z-index: 99988;
    width: 320px;
    max-height: 70vh;
    background: var(--card-bg-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgb(from var(--black) r g b / 30%);
    border: 1px solid var(--border-light);
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* 기본 위치 - JS에서 동적 설정 */
    bottom: 4%;
    left: calc(1% + 100px);
}

.admin-side-panel.open {
    display: flex;
}

.admin-side-panel .panel-header {
    padding: 12px 16px;
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.admin-side-panel .panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--content-font-color);
}

.admin-side-panel .panel-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-side-panel .panel-close-btn:hover {
    background: var(--border-light);
    color: var(--content-font-color);
}

.admin-side-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* 레거시: 기존 컨트롤 바 (숨김) */
.admin-control-bar {
    display: none;
}

/* 액션 버튼 (프리셋 변경, 레이어 추가, 섹션 관리, 레이어 목록) */
.admin-action-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-light);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: var(--btn-accent-radius);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--f-pre);
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.admin-action-btn:hover {
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgb(from var(--primary-color) r g b / 20%);
}

/* 기존 사이드 패널 스타일 (플로팅 스타일로 이동됨) */

.btn-add-layer {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    padding: 12px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-add-layer:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.panel-info {
    margin-bottom: 15px;
    font-size: 1em;
    color: var(--gray-100);
    line-height: 1.6;
}

/* 패널 컨텐츠 */
.panel-content {
    padding: 20px;
}

.panel-save {
    display: flex;
    justify-content: center;
}

/* 바 숨김 상태 */
.admin-control-bar.hidden {
    transform: translateY(-100%);
}

/* 공통 버튼 스타일 */
.btn-primary {
    padding: 10px 20px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--title-font-family);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .admin-floating-toggle {
        bottom: 2%;
        left: calc(1% + 40px);
    }

    .floating-toggle-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .floating-menu-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .admin-side-panel {
        width: calc(100vw - 60px);
        max-width: 300px;
        max-height: 60vh;
    }

    .admin-side-panel .panel-content {
        padding: 12px;
    }
}

/* ==========================================
 * 레이어 편집 폼 스타일 (사이드 패널 내부)
 * ========================================== */

#layerEditPanel .panel-content {
    padding: var(--spacing-md);
}

/* 폼 그룹 */
#layerEditPanel .form-group {
    margin-bottom: var(--spacing-md);
}

#layerEditPanel .form-row {
    display: flex;
    gap: var(--spacing-md);
    flex-direction: row;
    flex-wrap: wrap;
}

#layerEditPanel .form-column {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

#layerEditPanel .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
    min-width: 100px;
}

#layerEditPanel .form-flex {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

/* 라벨 */
#layerEditPanel label {
}

#layerEditPanel label.required::after {
    content: ' *';
    color: var(--error-color);
}

/* 입력 필드 */
#layerEditPanel .form-control,
#layerEditPanel input[type="text"],
#layerEditPanel input[type="number"],
#layerEditPanel select,
#layerEditPanel textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--content-font-family);
    background: var(--white);
    color: var(--gray-700);
    transition: border-color 0.2s;
    text-align: left;
    transform: none;
    display: block;
    height: auto;
}

#layerEditPanel #bg_color_picker {
    width: 35px;
    padding: 0;
}

#layerEditPanel .form-control:focus,
#layerEditPanel input:focus,
#layerEditPanel select:focus,
#layerEditPanel textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(from var(--primary-color) r g b / 10%);
}

/* 셀렉트 박스 */
#layerEditPanel select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}

/* 체크박스 */
#layerEditPanel input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
    cursor: pointer;
}

/* 파일 입력 */
#layerEditPanel input[type="file"] {
    padding: 6px;
    font-size: 12px;
}

/* 도움말 텍스트 */
#layerEditPanel .field-help {
    display: block;
    font-size: 11px;
    color: rgb(from var(--content-font-color) r g b / 70%);
    margin-top: 4px;
    line-height: 1.4;
}

/* 섹션 구분 */
#layerEditPanel .form-section {
    padding: var(--spacing-md);
    background: var(--container-bg-color);
    border-radius: var(--card-border-radius);
    margin-bottom: var(--spacing-md);
}

#layerEditPanel .form-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-font-color);
    margin-bottom: var(--spacing-sm);
}

/* 옵션 컨테이너 */
#layerEditPanel #layer-options-container {
    margin-top: var(--spacing-md);
}

#layerEditPanel #layer-options {
    padding: var(--spacing-md);
    background: rgb(from var(--info-color) r g b / 5%);
    border: 1px solid rgb(from var(--info-color) r g b / 20%);
    border-radius: var(--card-border-radius);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

#layerEditPanel #layer-options .form-group {
    margin-bottom: 0;
    flex: 1 1 calc(50% - var(--spacing-md));
    min-width: 120px;
}

/* 체크박스는 작은 너비 */
#layerEditPanel #layer-options .form-group:has(.checkbox-label) {
    flex: 0 0 auto;
    min-width: unset;
}

/* 게시판 선택은 전체 너비 */
#layerEditPanel #layer-options .form-group:has(select[name*="bo_table"]) {
    flex: 1 1 100%;
}

/* 컨텐츠 영역 */
#layerEditPanel #content-container {
    margin-top: var(--spacing-md);
}

/* 이미지 영역 */
#layerEditPanel #image-container {
    margin-top: var(--spacing-md);
}

/* 버튼 */
#layerEditPanel button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--card-border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

#layerEditPanel button[type="submit"]:hover {
    opacity: 0.9;
}

#layerEditPanel button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 레이어 타입 뱃지 */
#layerEditPanel .layer-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--accent-color);
    color: var(--white);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* Range 슬라이더 */
#layerEditPanel .range-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-light);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

#layerEditPanel .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

#layerEditPanel .range-slider::-webkit-slider-thumb:hover {
    background: var(--secondary-color);
}

#layerEditPanel .range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

/* ==========================================
   슬라이드/카드/탭 입력 폼 스타일
   ========================================== */

/* 슬라이드 입력 컨테이너 */
.slides-input-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.slide-input-item {
    padding: var(--spacing-md);
    background: var(--container-bg-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.slide-input-item h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.slide-image-preview {
    margin-top: var(--spacing-xs);
}

.slide-image-preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 4px;
    object-fit: cover;
}

/* 탭 입력 컨테이너 */
.tabs-input-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.tab-input-item {
    padding: var(--spacing-md);
    background: var(--container-bg-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.tab-input-item h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.layer-marquee .marquee-layer {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px;
}

/* ====================
   시계 위젯 (Clock Widget) - mainskin_up 스타일 적용
   ==================== */
.clock-widget {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 6px;
    height: 100%;
    width: 100%;
    font-family: var(--content-font-family);
    color: var(--content-font-color);
}

.clock-align-left {
    justify-items: start;
    text-align: left;
}

.clock-align-center {
    justify-items: center;
    text-align: center;
}

.clock-align-right {
    justify-items: end;
    text-align: right;
}

.clock-widget .clock-display {
    min-width: 0;
    max-width: 100%;
}

.clock-widget .clock-label,
.clock-widget .clock-note {
    margin: 0;
    font-size: 11px;
    color: rgb(from var(--content-font-color) r g b / 62%);
    text-transform: uppercase;
}

.clock-widget .clock-label {
    font-family: var(--clock-label-font-family, var(--content-font-family));
}

.clock-widget .clock-note {
    font-family: var(--clock-note-font-family, var(--content-font-family));
    text-transform: none;
}

.clock-skin-minimal {
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    box-shadow: none;
}

/* 🎯 디지털 시계 스타일 */
.digital-container {
    text-align: inherit;
}

.digital-date {
    color: var(--clock-date-color, rgb(from var(--content-font-color) r g b / 70%));
    font-size: 10px;
    font-weight: 300;
    font-family: var(--clock-date-font-family, var(--content-font-family));
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.digital-time {
    color: var(--clock-time-color, var(--content-font-color));
    font-size: 2.8em;
    font-weight: bold;
    font-family: var(--clock-time-font-family, var(--title-font-family));
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 8px rgb(from var(--accent-color) r g b / 0.3);
}

.time-separator {
    color: var(--clock-time-color, var(--accent-color));
    animation: blink 1s infinite;
    margin: 0 4px;
}

@keyframes blink {
    50% {
        opacity: 0.3;
    }
}

/* 🎯 아날로그 시계 */
.analog-clock {
    position: relative;
}

.clock-hands {
    width: 120px;
    height: 120px;
    position: relative;
    background: rgb(from var(--accent-color) r g b / 70%);
    border-radius: 50%;
    filter: drop-shadow(0px 3px 2px rgb(from var(--content-font-color) r g b / 0.3));
}

.clock-hand {
    background: var(--clock-time-color, var(--content-font-color));
    position: absolute;
    transform-origin: bottom center;
    left: 50%;
    bottom: 50%;
    border-radius: 2px;
    transition: all 0.1s ease;
    box-shadow: 0 0 4px rgb(from var(--black) r g b / 0.3);
}

.hour-hand {
    width: 4px;
    height: 35px;
    margin-left: -2px;
    z-index: 3;
}

.minute-hand {
    width: 2px;
    height: 45px;
    margin-left: -1px;
    z-index: 2;
}

.clock-center {
    background: var(--error-color);
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    box-shadow: 0 0 6px rgb(from var(--black) r g b / 0.4);
}

/* 🎯 간단한 시계 (시:분만) */
.simple-time {
    color: var(--clock-time-color, var(--content-font-color));
    font-size: 3em;
    font-weight: 100;
    font-family: var(--clock-time-font-family, var(--title-font-family));
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgb(from var(--black) r g b / 0.2);
}

/* 🎯 날짜만 */
.date-only {
    text-align: center;
}

.date-main {
    color: var(--clock-date-color, var(--content-font-color));
    font-size: 25px;
    font-weight: bold;
    font-family: var(--clock-date-font-family, var(--title-font-family));
    font-style: italic;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgb(from var(--black) r g b / 0.2);
}

.date-weekday {
    color: var(--clock-date-color, rgb(from var(--content-font-color) r g b / 70%));
    font-family: var(--clock-date-font-family, var(--content-font-family));
    font-size: 9px;
    font-weight: 300;
    opacity: 0.8;
    margin-top: 4px;
}

/* 🎯 전체 날짜시간 */
.full-datetime {
    text-align: center;
}

.full-datetime .date-part {
    color: var(--clock-date-color, rgb(from var(--content-font-color) r g b / 70%));
    font-size: 8px;
    font-weight: 300;
    font-family: var(--clock-date-font-family, var(--content-font-family));
    opacity: 0.8;
    margin-bottom: 4px;
}

.full-datetime .time-part {
    color: var(--clock-time-color, var(--content-font-color));
    font-size: 2.5em;
    font-weight: bold;
    font-family: var(--clock-time-font-family, var(--title-font-family));
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgb(from var(--black) r g b / 0.2);
}

.layer-write-form .existing-files {
    margin-top: 0px;
    padding-top: 0px;
    border-top: 0;
}

.layer-write-form .existing-files h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: rgb(from var(--content-font-color) r g b / 70%);
    font-weight: 500;
}

.layer-write-form .existing-file-item {
    position: relative;
    display: inline-block;
    margin: 0 10px 10px 0;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg-color);
    transition: opacity 0.3s, transform 0.3s;
}

.layer-write-form .existing-file-item img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.layer-write-form .existing-file-item .file-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgb(from var(--black) r g b / 70%));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.layer-write-form .existing-file-item .filename {
    font-size: 10px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.layer-write-form .btn-delete-file {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--danger-color);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    padding: 0;
}

.layer-write-form .btn-delete-file:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.layer-write-form .btn-delete-file:disabled {
    opacity: 0.6;
    cursor: wait;
}

.layer-write-form .drop-zone-content {
    border: 3px dashed var(--gray-400);
    border-radius: 12px;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ==========================================
   에디터 드롭다운 위치 조정 (main_up 전용)
   ========================================== */

/* 에디터 color-palette: 버튼이 우측에 있을 때 오른쪽 잘림 방지 */
.layer-write-form .color-palette {
    right: 0 !important;
    left: auto !important;
}

/* 타일로 감싸기 버튼 숨기기 */
.layer-write-form .btn-tile-wrap {
    display: none !important;
}

/* 코드 블록 버튼 숨기기 */
.layer-write-form .toolbar-btn[data-action="codeBlock"] {
    display: none !important;
}

/* ==========================================
   탭 하위 레이어 Sortable 스타일
   ========================================== */

/* Sortable placeholder (드래그 중 빈 공간) */
.sortable-placeholder {
    background: rgb(from var(--primary-color) r g b / 10%) !important;
    border: 2px dashed var(--primary-color) !important;
    border-radius: 3px;
    height: 40px;
    margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
    visibility: visible !important;
}

/* 드래그 중인 아이템 */
.ui-sortable-helper {
    opacity: 0.8;
    box-shadow: 0 4px 12px rgb(from var(--black) r g b / 25%);
    cursor: grabbing !important;
}

/* 탭 하위 레이어 순서 변경 버튼 */
.tab-child-order-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--card-bg-color);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    color: var(--content-font-color);
}

.tab-child-order-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.tab-child-order-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--card-bg-color);
    color: rgb(from var(--content-font-color) r g b / 70%);
}

.tab-child-order-btn:disabled:hover {
    background: var(--card-bg-color);
    color: rgb(from var(--content-font-color) r g b / 70%);
    border-color: var(--border-light);
}

/* ==========================================
   테두리 이미지 (border-image) 업로드
   ========================================== */

.border-image-preview {
    margin-bottom: 10px;
}

.border-image-item {
    position: relative;
    display: inline-block;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 8px;
    background: var(--card-bg-color);
}

.border-image-item img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 4px;
}

.btn-delete-border-image {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--danger-color);
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.btn-delete-border-image:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.border-image-upload {
    display: inline-block;
}

.border-image-upload .upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 5px;
    border: 2px dashed var(--border-light);
    border-radius: 8px;
    background: transparent;
    color: rgb(from var(--content-font-color) r g b / 70%);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 5px;
}

.border-image-upload .upload-label:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgb(from var(--primary-color) r g b / 5%);
}

.border-image-upload .upload-label svg {
    flex-shrink: 0;
}

.border-image-upload .upload-label span {
    font-size: 13px;
    font-weight: 500;
}

/* ==========================================
   게시판 소스 슬라이드
   ========================================== */

.board-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    border-radius: inherit;
}

.board-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, transform 0.6s ease;
    text-decoration: none;
    display: block;
}

.clock-align-left .digital-time {
    justify-content: flex-start;
}

.clock-align-right .digital-time {
    justify-content: flex-end;
}

.board-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.board-slide.prev {
    visibility: visible;
}

.board-slideshow[data-transition="fade"] .board-slide {
    transform: none;
}

.board-slideshow[data-transition="slide"] .board-slide {
    transform: translateX(100%);
}

.board-slideshow[data-transition="slide"] .board-slide.active {
    transform: translateX(0);
}

.board-slideshow[data-transition="slide"] .board-slide.prev {
    transform: translateX(-100%);
}

.board-slideshow[data-transition="zoom"] .board-slide {
    transform: scale(0.86);
}

.board-slideshow[data-transition="zoom"] .board-slide.active {
    transform: scale(1);
}

.board-slideshow[data-transition="zoom"] .board-slide.prev {
    transform: scale(1.08);
}

.board-slide .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.board-slide .board-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    z-index: 2;
}

.board-slide .slide-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--title-font-family);
    border-radius: 3px;
    margin-bottom: 3px;
}

.board-slide .board-slide-title {
    margin-bottom: 3px;
    font-size: var(--title-font-size);
    font-weight: bold;
    font-family: var(--title-font-family);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.board-slide .board-slide-content {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

.board-slideshow .slide-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.board-slideshow .slide-prev,
.board-slideshow .slide-next {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    pointer-events: all;
}

.board-slideshow .slide-prev:hover,
.board-slideshow .slide-next:hover {
    background: rgba(0,0,0,0.8);
}

.board-slideshow .slide-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.board-slideshow .slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s;
}

.board-slideshow .slide-dot.active {
    background: #fff;
}

/* ==========================================
   게시판 소스 갤러리
   ========================================== */

.board-gallery-layer {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

.board-gallery-layer .gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.board-gallery-layer .gallery-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color, #ffd700);
    letter-spacing: 1px;
}

.board-gallery-layer .gallery-more {
    font-size: 12px;
    color: rgb(from var(--content-font-color) r g b / 70%);
    text-decoration: none;
    transition: color 0.2s;
}

.board-gallery-layer .gallery-more:hover {
    color: var(--content-font-color);
}

.board-gallery-layer .gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 5), minmax(0, 1fr));
    grid-template-rows: repeat(var(--gallery-rows, 1), minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 0;
    min-height: 0;
    align-content: stretch;
}

.board-gallery-layer .gallery-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    height: 100%;
    transition: transform 0.2s;
}

.board-gallery-layer .gallery-item:hover {
    transform: scale(1.05);
}

.board-gallery-layer .gallery-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--card-bg-color);
}

.board-gallery-layer .gallery-placeholder {
    text-align: center;
    color: rgb(from var(--content-font-color) r g b / 70%);
    font-size: 13px;
    padding: 20px;
}

/* ==========================================
   NEW: 회원 카드 (member_card)
   ========================================== */

.layer-member_card {
    container-type: inline-size;
}

.member-card-widget {
    display: grid;
    align-content: space-between;
    gap: 14px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    text-align: left;
    color: var(--content-font-color);
}

.member-card-widget.member-card-contact {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.member-card-widget.member-card-layout-poster {
    align-content: center;
    justify-items: center;
    text-align: center;
}

.member-card-head {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.member-card-layout-poster .member-card-head {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
}

.member-card-widget .card-portrait {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgb(from var(--accent-color) r g b / 60%);
    box-shadow: 0 0 0 6px rgb(from var(--accent-color) r g b / 10%);
}

.member-card-widget .card-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-card-widget .card-portrait .portrait-placeholder {
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: var(--btn-primary-text);
}

.member-card-widget .card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--content-font-color);
    margin-top: 0;
    font-family: var(--member-card-name-font-family, var(--title-font-family));
    overflow-wrap: anywhere;
}

.member-card-layout-poster .card-name {
    font-size: 22px;
}

.member-card-widget .card-subtitle {
    margin: 3px 0 0;
    font-size: 11px;
    color: rgb(from var(--content-font-color) r g b / 62%);
}

.member-card-widget .card-level {
    font-size: 10px;
    color: rgb(from var(--content-font-color) r g b / 50%);
    letter-spacing: 1px;
    margin-top: 3px;
    text-transform: uppercase;
}

.member-card-widget .card-level .level-title {
    color: var(--accent-color, #ffd700);
    margin-left: 5px;
}

.member-card-id .card-sns {
    margin-top: 7px;
}

.member-card-widget .card-intro {
    font-size: 13px;
    color: rgb(from var(--content-font-color) r g b / 70%);
    line-height: 1.6;
    margin: 0;
    max-width: none;
    min-width: 0;
    overflow-wrap: anywhere;
}

.member-card-layout-poster .card-intro {
    max-width: 32em;
}

.member-card-foot {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.member-card-layout-poster .member-card-foot {
    justify-items: center;
}

.member-card-clock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgb(from var(--border-color) r g b / 70%);
}

.member-card-clock.is-plain {
    grid-template-columns: 1fr;
    justify-items: end;
}

.member-card-layout-poster .member-card-clock,
.member-card-layout-poster .member-card-clock.is-plain {
    justify-items: center;
}

.member-card-clock p {
    margin: 0;
    font-size: 11px;
    color: rgb(from var(--content-font-color) r g b / 62%);
}

.member-card-clock p {
    text-transform: uppercase;
}

.member-card-clock strong {
    font-family: var(--title-font-family);
    font-size: 32px;
    line-height: 0.9;
    color: var(--accent-color);
}

.member-card-widget .card-sns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.member-card-layout-poster .card-sns {
    justify-content: center;
}

.member-card-widget .sns-link {
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(from var(--content-font-color) r g b / 80%);
    font-size: 1em;
    transition: color 0.2s, transform 0.2s;
}

.member-card-widget .sns-link:hover {
    color: var(--content-font-color);
    transform: scale(1.1);
}

.member-card-widget .sns-twitter:hover { color: #1DA1F2; }
.member-card-widget .sns-instagram:hover { color: #E4405F; }
.member-card-widget .sns-facebook:hover { color: #1877F2; }
.member-card-widget .sns-youtube:hover { color: #FF0000; }
.member-card-widget .sns-github:hover { color: #fff; }
.member-card-widget .sns-discord:hover { color: #5865F2; }
.member-card-widget .sns-email:hover { color: var(--accent-color); }

/* ==========================================
   NEW: 레이어 플레이스홀더
   ========================================== */

.layer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgb(from var(--content-font-color) r g b / 70%);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* ==========================================
   diary_up 연동 위젯
   ========================================== */

/* 투두리스트 위젯 */
.diary-todo-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}

.diary-todo-widget .todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.diary-todo-widget .todo-date,
.diary-todo-widget .todo-title {
    font-weight: 600;
    color: var(--content-font-color);
}

.diary-todo-widget .todo-count {
    font-size: 12px;
    color: rgb(from var(--content-font-color) r g b / 60%);
}

.diary-todo-widget .todo-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.diary-todo-widget .todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
}

.diary-todo-widget .todo-item:last-child {
    border-bottom: none;
}

.diary-todo-widget .todo-color {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
}

.diary-todo-widget .todo-checkbox {
    position: relative;
    cursor: pointer;
}

.diary-todo-widget .todo-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.diary-todo-widget .todo-checkbox .checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(from var(--content-font-color) r g b / 40%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: transparent;
}

.diary-todo-widget .todo-checkbox input:checked + .checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.diary-todo-widget .todo-checkbox input:checked + .checkmark::after {
    content: '✓';
    color: #fff;
    font-size: 11px;
}

.diary-todo-widget .todo-subject {
    flex: 1;
    font-size: var(--content-font-size);
    color: var(--content-font-color);
    transition: all 0.2s;
}

.diary-todo-widget .todo-item.completed .todo-subject {
    text-decoration: line-through;
    color: rgb(from var(--content-font-color) r g b / 50%);
}

.diary-todo-widget .todo-more {
    display: block;
    text-align: center;
    padding: 10px;
    margin-top: auto;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
}

.diary-todo-widget .todo-more:hover {
    text-decoration: underline;
}

.diary-todo-widget .empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(from var(--content-font-color) r g b / 50%);
    font-size: 14px;
}

/* 미니 캘린더 위젯 */
.diary-calendar-widget {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    height: 100%;
    padding: 1em;
}

.diary-calendar-widget .calendar-header {
    text-align: center;
}

.diary-calendar-widget .calendar-title {
    font-weight: 600;
    color: var(--content-font-color);
}

.diary-calendar-widget .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* gap: 2px; */
    flex: 1;
}

.diary-calendar-widget .day-name {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: rgb(from var(--content-font-color) r g b / 60%);
    padding: 2px 0;
}

.diary-calendar-widget .calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 0;
    min-height: 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.diary-calendar-widget .calendar-day:not(.empty):hover {
    background: rgb(from var(--primary-color) r g b / 10%);
}

.diary-calendar-widget .calendar-day.today {
    background: var(--primary-color);
}

.diary-calendar-widget .calendar-day.today .day-number {
    color: #fff;
    font-weight: 600;
}

.diary-calendar-widget .day-number {
    font-size: 12px;
    color: var(--content-font-color);
}

.diary-calendar-widget .event-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.diary-calendar-widget .event-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.diary-calendar-widget .calendar-link {
    display: block;
    text-align: center;
    padding: 10px;
    margin-top: auto;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
}

.diary-calendar-widget .calendar-link:hover {
    text-decoration: underline;
}

.diary-calendar-widget .empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(from var(--content-font-color) r g b / 50%);
    font-size: 14px;
}

/* widget_todoup 위젯 */
.widget-todoup-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
    background: transparent;
    color: var(--todoup-font-color, var(--content-font-color));
    font-size: var(--todoup-font-size, var(--content-font-size));
}

.widget-todoup-widget .todoup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.widget-todoup-widget .todoup-title {
    font-weight: 600;
    color: var(--todoup-font-color, var(--content-font-color));
}

.widget-todoup-widget .todoup-count {
    font-size: 0.92em;
    color: rgb(from var(--todoup-font-color, var(--content-font-color)) r g b / 60%);
}

.widget-todoup-widget .todoup-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-todoup-widget .todoup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgb(from var(--border-color) r g b / 50%);
}

.widget-todoup-widget .todoup-item:last-child {
    border-bottom: none;
}

.widget-todoup-widget .todoup-checkbox {
    flex-shrink: 0;
}

.widget-todoup-widget .todoup-checkbox .checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(from var(--todoup-checkbox-color, var(--content-font-color)) r g b / 42%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.widget-todoup-widget .todoup-item.completed .todoup-checkbox .checkmark {
    background: var(--todoup-checkbox-color, rgb(from var(--content-font-color) r g b / 30%));
    border-color: var(--todoup-checkbox-color, rgb(from var(--content-font-color) r g b / 30%));
}

.widget-todoup-widget .todoup-item.completed .todoup-checkbox .checkmark::after {
    content: '✓';
    color: var(--btn-primary-text);
    font-size: 11px;
}

.widget-todoup-widget .todoup-priority {
    font-size: 0.92em;
    flex-shrink: 0;
}

.widget-todoup-widget .todoup-subject {
    flex: 1;
    font-size: 1em;
    color: var(--todoup-font-color, var(--content-font-color));
    transition: all 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-todoup-widget .todoup-subject.highlight {
    background: linear-gradient(transparent 60%, var(--highlight-color, #FFFF00) 60%);
}

.widget-todoup-widget .todoup-item.completed .todoup-subject {
    text-decoration: line-through;
    color: rgb(from var(--todoup-font-color, var(--content-font-color)) r g b / 50%);
}

.widget-todoup-widget .todoup-deadline {
    font-size: 0.85em;
    color: rgb(from var(--todoup-font-color, var(--content-font-color)) r g b / 60%);
    flex-shrink: 0;
}

.widget-todoup-widget .empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(from var(--todoup-font-color, var(--content-font-color)) r g b / 50%);
    font-size: 1em;
}

/* ==========================================
   archive_view 위젯 (archive_up 연동)
   - 프로필: 상단 고정, flex-direction: row
   - 헤더: 표시 안함
   - 채팅: 배경색 없음, 말풍선 색만
   - 입력창: 하단 고정
   ========================================== */

.archive-view-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.archive-view-widget.archive-view-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(from var(--content-font-color) r g b / 50%);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* 프로필 영역 (상단 고정, 가로 배치) */
.archive-profile-area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 20px;
    flex-shrink: 0;
}

.archive-profile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.archive-profile-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border-color);
}

.archive-profile-img.archive-profile-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
}

.archive-profile-name {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채팅 영역 (배경색 없음, 스크롤) */
.archive-chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    /* 스크롤바 */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

.archive-chat-view::-webkit-scrollbar {
    width: 5px;
}

.archive-chat-view::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

.archive-chat-view::-webkit-scrollbar-track {
    background: transparent;
}

.archive-chat-loading,
.archive-chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgb(from var(--content-font-color) r g b / 50%);
    font-size: 14px;
}

/* 말풍선 행 */
.archive-msg-row {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    position: relative;
}

.archive-msg-row.left {
    align-self: flex-start;
}

.archive-msg-row.right {
    align-self: flex-end;
    align-items: flex-end;
}

.archive-msg-row.system {
    align-self: center;
    max-width: 100%;
}

/* 화자 이름 */
.archive-msg-name {
    font-size: 0.7rem;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 0 6px;
    color: var(--gray-50);
    text-shadow: 0 0 3px var(--black), 0 0 5px rgb(from var(--gray-700) r g b / 70%);
}

/* 말풍선 */
.archive-bubble {
    padding: 10px 14px;
    font-size: var(--content-font-size);
    font-family: var(--content-font-family);
    word-break: keep-all;
    white-space: pre-wrap;
    line-height: 1.4;
    border-radius: 12px;
    border: 1px solid;
}

.archive-msg-row.left .archive-bubble {
    border-radius: 4px 12px 12px 12px;
}

.archive-msg-row.right .archive-bubble {
    border-radius: 12px 12px 4px 12px;
}

.archive-bubble-system {
    background: transparent !important;
    color: rgb(from var(--content-font-color) r g b / 60%) !important;
    font-size: 0.8rem;
    text-align: center;
    padding: 6px 20px;
    border: none !important;
    border-top: 1px solid var(--card-border-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
    border-radius: 0 !important;
}

/* 말풍선 이미지 */
.archive-bubble-has-img {
    padding: 4px !important;
    background: transparent !important;
}

.archive-bubble-img {
    max-width: 200px;
    max-height: 250px;
    border-radius: 8px;
    display: block;
}

/* 입력 영역 (하단 고정, 2열 레이아웃) */
.archive-chat-input-area {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
    flex-shrink: 0;
    border-top: 1px dashed rgb(from var(--card-border-color) r g b / 50%);
    background: rgb(from var(--card-bg-color) r g b / 50%);
}

/* 1행: 대화 상대 + 타입 버튼 (전체 너비) */
.archive-input-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    align-items: center;
}

.archive-speaker-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    font-size: 0.85rem;
    color: var(--content-font-color);
}

.archive-input-type-toggle {
    display: flex;
    gap: 3px;
}

.archive-input-type-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--card-bg-color);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--content-font-color);
}

.archive-input-type-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* 2행: 메시지 입력 */
.archive-input-content {
    grid-column: 1;
    display: flex;
    flex-direction: column;
}

.archive-input-content textarea {
    width: 100%;
    min-height: 36px;
    max-height: 100px;
    padding: 8px 10px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
    background: var(--card-bg-color);
    color: var(--content-font-color);
}

.archive-image-input {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    background: rgb(from var(--card-border-color) r g b / 30%);
    border-radius: var(--card-border-radius);
}

.archive-img-preview {
    width: 60px;
    height: 60px;
    border: 2px dashed var(--card-border-color);
    border-radius: var(--card-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--card-bg-color);
}

.archive-img-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.archive-img-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.archive-btn-img-upload {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--accent-color);
    color: #fff;
    border-radius: var(--card-border-radius);
    font-size: 0.8rem;
    cursor: pointer;
    width: fit-content;
}

.archive-input-or {
    font-size: 0.75rem;
    color: rgb(from var(--content-font-color) r g b / 50%);
}

.archive-img-inputs input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    font-size: 0.8rem;
    box-sizing: border-box;
    background: var(--card-bg-color);
    color: var(--content-font-color);
}

.archive-btn-send {
    grid-column: 2;
    grid-row: 2;
    align-self: flex-end;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--card-border-radius);
    background: var(--accent-color);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.archive-btn-send:hover {
    opacity: 0.85;
}

.archive-preview-error {
    font-size: 0.7rem;
    color: #d32f2f;
    text-align: center;
}

/* 반응형 */
@media (max-width: 600px) {
    .archive-profile-area {
        gap: 12px;
        padding: 10px 12px;
    }

    .archive-profile-img {
        width: 40px;
        height: 40px;
    }

    .archive-profile-name {
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    .archive-msg-row {
        max-width: 90%;
    }

    .archive-chat-input-area {
        grid-template-columns: 1fr;
    }

    .archive-btn-send {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }
}

/* ==========================================
   이웃 새글 피드 위젯
   ========================================== */
.neighbor-feed-widget {
    padding: 15px;
    height: 100%;
    overflow-y: auto;
}

.neighbor-feed-widget .neighbor-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 8px;
}

.neighbor-feed-widget .neighbor-feed-title {
    min-width: 0;
    margin: 0;
    color: var(--primary-color);
    font-family: var(--title-font-family);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neighbor-feed-widget .neighbor-feed-more {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.neighbor-feed-widget .feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.neighbor-feed-widget .feed-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 3px 0;
}

.neighbor-feed-widget .feed-item:last-child {
    border-bottom: none;
}

.neighbor-feed-widget .feed-link {
    flex: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
}

.neighbor-feed-widget .feed-title {
    display: block;
    color: var(--content-font-color);
    text-decoration: none;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neighbor-feed-widget .feed-item a:hover .feed-title {
    color: var(--primary-color);
}

.neighbor-feed-widget .feed-source {
    flex: 0 0 auto;
    max-width: 36%;
    font-size: 0.64rem;
    color: var(--text-muted);
    background: var(--card-bg-color);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neighbor-feed-widget .feed-date {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.64rem;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.neighbor-feed-widget .neighbor-feed-more:hover {
    text-decoration: underline;
}

.neighbor-feed-widget .empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

/* ==========================================
   현재 접속자 위젯
   ========================================== */
.current-connect-widget {
    padding: 15px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.current-connect-widget .connect-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    background: var(--card-bg-color);
    border-radius: 8px;
    margin-bottom: 15px;
}

.current-connect-widget .count-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.current-connect-widget .count-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.current-connect-widget .count-unit {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.current-connect-widget .connect-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
}

.current-connect-widget .connect-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 아바타 영역 */
.current-connect-widget .connect-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.current-connect-widget .connect-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.current-connect-widget .connect-avatar .avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.current-connect-widget .connect-avatar .online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--card-bg-color);
}

/* 정보 영역 */
.current-connect-widget .connect-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.current-connect-widget .connect-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-connect-widget .connect-item.member .connect-name:hover {
    color: var(--primary-color);
}

.current-connect-widget .connect-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-connect-widget .connect-item.guest .connect-name {
    color: var(--text-muted);
}

/* more 링크 */
.current-connect-widget .connect-more {
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.current-connect-widget .connect-more:hover {
    background: var(--card-bg-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.current-connect-widget .empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

/* ==========================================
   날씨 위젯 (weather)
   ========================================== */
.weather-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.weather-location {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
}

.weather-icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
}
.weather-icon-lg {
    font-size: 2.8rem;
    color: var(--primary-color);
    line-height: 1;
}
.weather-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}
.weather-temp {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}
.weather-temp .temp-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}
.weather-meta-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.weather-meta-item {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}
.weather-air.air-good    { color: #5fba5f; }
.weather-air.air-normal  { color: var(--text-muted); }
.weather-air.air-bad     { color: #d08040; }
.weather-air.air-very-bad{ color: #c04040; }
.weather-description {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}
.weather-last-change {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
    text-align: center;
}
.weather-no-data {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

/* 가로형 */
.weather-layout-horizontal .weather-horizontal {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.weather-layout-horizontal .weather-icon-area {
    flex-shrink: 0;
    flex-direction: column;
    gap: 4px;
}
.weather-layout-horizontal .weather-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.weather-layout-horizontal .weather-temp { font-size: 1.6rem; }

/* 소형 */
.weather-layout-compact {
    flex-direction: row;
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.weather-icon-sm     { font-size: 1.1rem; color: var(--primary-color); }
.weather-location-sm,.weather-name-sm { font-size: 0.8rem; font-weight: 600; }
.weather-temp-sm     { font-size: 0.85rem; color: var(--text-color); }
.weather-humidity-sm { font-size: 0.75rem; color: var(--text-muted); }

/* ==========================================
   커뮤니티 멤버 카드 (commu_member_card)
   ========================================== */
.cmw-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.cmw-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.cmw-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--content-font-color);
    border-bottom: 0;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
}
.cmw-tab.active {
    color: var(--accent-color);
}
.cmw-badge {
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 10px;
    line-height: 1.4;
}
.cmw-content {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}
.cmw-content.active { display: flex; }
.cmw-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px 10px;
    font-size: 0.85rem;
    line-height: 2;
}

/* 로그인 폼 */
.cmw-login-form { display: flex; flex-direction: column; gap: 8px; }
.cmw-login-inputs { display: flex; flex-direction: column; gap: 6px; }
.cmw-login-inputs input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg, var(--card-bg-color));
    color: var(--text-color);
    font-size: 0.85rem;
    box-sizing: border-box;
}
.cmw-login-btn {
    width: 100%;
    padding: 8px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.15s;
}
.cmw-login-btn:hover { opacity: 0.85; }
.cmw-login-links { text-align: center; font-size: 0.75rem; }
.cmw-login-links a { color: var(--text-muted); text-decoration: none; }
.cmw-login-links a:hover { color: var(--primary-color); }

/* 멤버 표시 */
.cmw-member-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.cmw-portrait {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.cmw-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cmw-portrait-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg-color);
    color: var(--text-muted);
    font-size: 1.2rem;
}
.cmw-member-info { flex: 1; min-width: 0; }
.cmw-member-name { display: flex; flex-direction: column; gap: 1px; }
.cmw-member-name strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmw-member-id   { font-size: 0.7rem; color: var(--text-muted); }
.cmw-member-level{ font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.cmw-point-area  { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-decoration: none; }
.cmw-point-value { font-size: 0.9rem; font-weight: 700; color: var(--text-color); }
.cmw-point-unit  { font-size: 0.65rem; color: var(--text-muted); }
a.cmw-point-area:hover .cmw-point-value { color: var(--primary-color); }

/* 섹션 타이틀 */
.cmw-section-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-muted); text-transform: uppercase;
    display: flex; align-items: center; gap: 5px;
}
.cmw-badge-inline {
    background: var(--primary-color); color: #fff;
    font-size: 0.62rem; padding: 1px 5px; border-radius: 8px; line-height: 1.4;
}

/* 알림 목록 */
.cmw-notifications { display: flex; flex-direction: column; gap: 4px; }
.cmw-noti-list { display: flex; flex-direction: column; gap: 3px; }
.cmw-noti-item {
    display: grid;
    grid-template-columns: 36px 1fr 44px;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.1s;
}
.cmw-noti-item:hover { background: var(--card-bg-color); }
.cmw-noti-item.unread { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.cmw-noti-type {
    font-size: 0.65rem; font-weight: 700; color: var(--primary-color);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmw-noti-text  { color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmw-noti-date  { font-size: 0.65rem; color: var(--text-muted); text-align: right; white-space: nowrap; }

/* 캐릭터 표시 */
.cmw-character-display {
    display: flex; align-items: flex-start; gap: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
}
.cmw-char-portrait {
    width: 52px; height: 52px;
    border-radius: 8px; overflow: hidden;
    flex-shrink: 0; border: 1px solid var(--border-color); display: block;
}
.cmw-char-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cmw-char-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmw-char-title { font-size: 0.68rem; line-height: 1; }
.cmw-char-name-rank { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.cmw-char-name-rank strong { font-size: 0.95rem; }
.cmw-char-rank   { font-size: 0.72rem; }
.cmw-char-faction{ font-size: 0.7rem; color: var(--text-muted); }

/* HP/MP 바 */
.cmw-vitals { display: flex; flex-direction: column; gap: 4px; }
.cmw-bar { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; }
.cmw-bar-label { width: 18px; font-weight: 700; color: var(--text-muted); font-size: 0.65rem; flex-shrink: 0; }
.cmw-bar-track { flex: 1; height: 7px; border-radius: 4px; background: var(--border-color); overflow: hidden; }
.cmw-bar-fill  { height: 100%; border-radius: 4px; transition: width 0.4s; }
.cmw-bar.hp-bar .cmw-bar-fill { background: #e05050; }
.cmw-bar.mp-bar .cmw-bar-fill { background: #4080d0; }
.cmw-bar-val { width: 36px; text-align: right; color: var(--text-muted); font-size: 0.68rem; flex-shrink: 0; }

/* 전투 스탯 */
.cmw-combat-row  { display: flex; align-items: center; gap: 8px; }
.cmw-combat-stats{ display: flex; gap: 8px; flex: 1; }
.cmw-stat { display: flex; align-items: center; gap: 3px; font-size: 0.78rem; color: var(--text-muted); }
.cmw-stat i      { font-size: 0.7rem; }
.cmw-stat.atk i  { color: #c06040; }
.cmw-stat.def i  { color: #4080b0; }
.cmw-stat.agi i  { color: #50a070; }
.cmw-status-col  { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.cmw-activity, .cmw-status-effect { font-size: 0.85rem; position: relative; cursor: default; }
.cmw-status-stack {
    position: absolute; bottom: -3px; right: -4px;
    font-size: 0.55rem; background: var(--primary-color); color: #fff;
    border-radius: 4px; padding: 0 2px; line-height: 1.3;
}

/* 인벤토리 */
.cmw-inventory-section { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.cmw-inv-loading { font-size: 0.8rem; color: var(--text-muted); padding: 8px 0; display: flex; align-items: center; gap: 6px; }

/* 위젯 폭에 맞춰 자동 열 수 조정 */
.cmw-inv-content .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}