/* assets/css/builder.css - Front-end SSR Theme & Drag-and-Drop Editor Styles (Light Minimal System) */

/* Korean Font Family Aliases */
[style*="font-family: 프리텐다드"], [style*="font-family: '프리텐다드'"], [style*="font-family: \"프리텐다드\""] { font-family: 'Pretendard', sans-serif !important; }
[style*="font-family: 노토샌스"], [style*="font-family: '노토샌스'"], [style*="font-family: \"노토샌스\""] { font-family: 'Noto Sans KR', sans-serif !important; }
[style*="font-family: 나눔고딕"], [style*="font-family: '나눔고딕'"], [style*="font-family: \"나눔고딕\""] { font-family: 'Nanum Gothic', sans-serif !important; }
[style*="font-family: 나눔명조"], [style*="font-family: '나눔명조'"], [style*="font-family: \"나눔명조\""] { font-family: 'Nanum Myeongjo', serif !important; }
[style*="font-family: 지마켓산스"], [style*="font-family: '지마켓산스'"], [style*="font-family: \"지마켓산스\""] { font-family: 'GmarketSans', sans-serif !important; }
[style*="font-family: 도현체"], [style*="font-family: '도현체'"], [style*="font-family: \"도현체\""] { font-family: 'Do Hyeon', sans-serif !important; }
[style*="font-family: 주아체"], [style*="font-family: '주아체'"], [style*="font-family: \"주아체\""] { font-family: 'Jua', sans-serif !important; }
[style*="font-family: 블랙한산스"], [style*="font-family: '블랙한산스'"], [style*="font-family: \"블랙한산스\""] { font-family: 'Black Han Sans', sans-serif !important; }
[style*="font-family: 고운바탕"], [style*="font-family: '고운바탕'"], [style*="font-family: \"고운바탕\""] { font-family: 'Gowun Batang', serif !important; }

:root {
    --site-bg: #f8fafc;
    --site-card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --brand-accent: #4f46e5;
    --brand-accent-hover: #4338ca;
    --border-line: #e2e8f0;
    --container-max: 1280px;
    --radius-md: 12px;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --site-header-height: 0px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.site-body {
    font-family: var(--font-sans);
    background-color: var(--site-bg);
    color: var(--text-primary);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.container-full {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Header & Navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-line);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.site-logo {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Mobile Navigation Toggle Button */
.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: inherit;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        border-bottom: 1px solid var(--border-line);
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem 1rem;
        display: none;
        z-index: 99999;
    }

    .site-nav.open {
        display: flex;
    }

    .site-nav .nav-item {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #1e293b !important;
    }

    .site-nav .nav-item-dropdown {
        display: block;
        width: 100%;
    }

    .site-nav .nav-dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        background: #f8fafc !important;
        margin: 0.25rem 0 0.5rem 0.5rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
    }

    .site-nav .admin-link {
        display: none !important;
    }
}

.nav-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.nav-item:hover, .nav-item.active {
    color: var(--brand-accent);
}

.admin-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border-line);
}

.admin-link:hover {
    background: #e2e8f0;
}

/* Sub-menu Dropdown Styles */
.nav-item-dropdown {
    position: relative;
    display: inline-block;
}

.nav-item-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.site-nav .nav-dropdown-menu,
.nav-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 180px !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18) !important;
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 99999 !important;
}

.site-nav .nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:hover .nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.site-nav .nav-dropdown-menu a,
.nav-dropdown-menu a,
.dropdown-item, 
.nav-dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.88rem !important;
    color: #334155 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

.site-nav .nav-dropdown-menu a:hover,
.nav-dropdown-menu a:hover,
.dropdown-item:hover, 
.nav-dropdown-item:hover {
    background: #f1f5f9 !important;
    color: var(--brand-accent, #4f46e5) !important;
    text-decoration: none !important;
}

/* SSR Blocks Styling */
.site-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Full-bleed rows (hero, hero_slider): make hero occupy the full viewport width so
   the background spans edge-to-edge. */
.full-bleed-row {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

/* The inner hero/slider fills the full-bleed row edge to edge. */
.full-bleed {
    width: 100%;
}

/* Hero Section */
.hero-section {
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section.has-bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.parallax-bg,
.hero-section.parallax-bg {
    background-attachment: fixed !important;
}

/* 모션의 `will-change: transform` 이 `background-attachment: fixed` 를 깨뜨려
   배경이 사이트에서 보이지 않는 현상을 방지합니다.
   (실제 transform 이동은 내부 컨테이너에 적용되므로 섹션의 will-change 는 불필요) */
.parallax-bg[data-motion],
.hero-section.parallax-bg[data-motion] {
    will-change: auto;
}

/* 🌌 Modern Independent Parallax Background Layer (60fps GPU Accelerated)
   레이어는 원본 이미지의 실제 크기(가로폭 100%, 세로는 이미지 비율만큼)로 만들어
   블록(overflow:hidden)이 그중 일부를 세로 창(window)으로 잘라내는 구조.
   스크롤 시 레이어를 세로로 평행이동 → 이미지가 세로 방향으로 글라이딩하며
   블록 가로폭에 꽉 차고, 그림은 잘리지 않으며 여백(빈 공간)도 생기지 않는다. */
.builder-parallax-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat !important;
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

.has-speed-parallax {
    position: relative !important;
    overflow: hidden !important;
}

/* 🚀 Framer-Style Scroll Motion Classes */
[data-motion="zoom_reveal"] {
    will-change: transform;
}

[data-motion="float_fade"] {
    will-change: transform, opacity;
}

[data-motion="sticky_pin"],
.motion-sticky_pin {
    position: sticky !important;
    top: var(--site-header-height, 0px) !important;
    z-index: 25 !important;
    background-color: var(--site-card-bg, #ffffff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
    border-bottom: 1px solid var(--border-line);
    transition: box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    .parallax-bg,
    .hero-section.parallax-bg {
        background-attachment: scroll !important;
    }
}

.hero-section.has-bg-img .hero-title,
.hero-section.has-bg-img .hero-subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.hero-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    line-height: 1.25;
    color: var(--text-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 3vw, 1.25rem);
    max-width: 700px;
    margin: 0 auto 2.5rem;
    color: var(--text-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.6;
}

.hero-section.text-left .hero-subtitle,
.hero-slider-section.text-left .hero-subtitle {
    margin-left: 0;
    margin-right: auto;
}

.hero-section.text-right .hero-subtitle,
.hero-slider-section.text-right .hero-subtitle {
    margin-left: auto;
    margin-right: 0;
}

.hero-section.text-center .hero-subtitle,
.hero-slider-section.text-center .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 3.5rem 1rem;
    }
    .hero-slide-item {
        padding: 3.5rem 1rem 4rem;
    }
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 0.85rem;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
}

.btn-primary, .btn-cta {
    display: inline-block;
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-hover));
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.16);
    transition: all 0.2s ease;
}

.btn-primary:hover, .btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.25);
}

/* Grid Section */
.grid-section {
    padding: 5rem 0;
}

.grid-container {
    display: grid;
    gap: 2rem;
}

.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.grid-card {
    background: var(--site-card-bg);
    border: 1px solid var(--border-line);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 카드 이미지의 "상단/좌우 여백 0" = 카드 모서리(테두리)에 붙는 풀블리드 상태.
   카드 패딩(1.5rem = 24px)을 무효화하는 음수 마진으로, 여백값이 클수록 안쪽으로 들어온다. */
.grid-card .grid-card-img {
    display: block;
}

.grid-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-accent);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
}

.grid-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.grid-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Text & Image & CTA Sections */
.text-section, .image-section, .cta-section {
    padding: 4rem 0;
}

.prose {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.builder-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.image-section img,
.image-section .builder-img,
.image-block-img {
    box-shadow: none;
    border-radius: 0;
}

.img-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.cta-box {
    background: var(--site-card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    padding: 4rem 2rem;
    text-align: center;
}

.cta-box h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

/* Footer */
.site-footer {
    padding: 3rem 0;
    border-top: 1px solid var(--border-line);
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: #ffffff;
}

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

/* Detail Utilities (Padding, Alignment, Shadow, Animation) */
.py-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-small { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-medium { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-large { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-huge { padding-top: 8rem !important; padding-bottom: 8rem !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.shadow-none { box-shadow: none !important; }
.shadow-light { box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; }
.shadow-glow { box-shadow: 0 0 35px rgba(79,70,229,0.2) !important; }

.bg-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Motion Animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

[data-animate="fade-up"] { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
[data-animate="zoom-in"] { animation: zoomIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
[data-animate="slide-left"] { animation: slideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Editor Viewport & Fullscreen Workspace Layout */
body.editor-page-mode {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

body.editor-page-mode .admin-wrapper {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

body.editor-page-mode .admin-main {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

.editor-wrapper {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Data Table & Board Table Modern Layout Design */
.data-table, .board-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    text-align: left;
}

.data-table thead th, .board-table thead th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--border-line);
    white-space: nowrap;
}

.data-table tbody td, .board-table tbody td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr, .board-table tbody tr {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover, .board-table tbody tr:hover {
    background-color: #f8fafc;
}

.data-table tbody tr:last-child td, .board-table tbody tr:last-child td {
    border-bottom: none;
}

/* Post Content Responsive Media & Images Rule */
.post-body-content {
    word-break: break-word;
    overflow-wrap: break-word;
}

.post-body-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 0.75rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.post-body-content video,
.post-body-content iframe {
    max-width: 100% !important;
    border-radius: 8px;
}

.post-body-content table {
    max-width: 100% !important;
    margin: 1.5rem auto !important;
    float: none !important;
    border-collapse: collapse;
}

.editor-sidebar-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    transition: width 0.25s ease;
    width: 300px;
}

.editor-sidebar-wrap.collapsed {
    width: 0;
}

.editor-sidebar-wrap.collapsed .editor-sidebar {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-right: none;
}

.editor-sidebar {
    width: 300px;
    min-width: 300px;
    background: #ffffff;
    border-right: 1px solid var(--border-line);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: padding 0.25s ease, width 0.25s ease;
}

.sidebar-toggle {
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 70;
    transform: translateX(100%);
    background: #ffffff;
    border: 1px solid var(--border-line);
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.45rem;
    box-shadow: 2px 0 6px rgba(0,0,0,0.05);
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.sidebar-toggle:hover {
    background: #f8fafc;
    color: var(--brand-accent, #2563eb);
}

.editor-sidebar-wrap.collapsed .sidebar-toggle {
    transform: none;
    right: -34px;
    border-radius: 0 8px 8px 0;
    border: 1px solid var(--border-line);
    border-left: none;
}

.editor-sidebar h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.block-palette {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.palette-item {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-item i, .palette-item svg {
    flex-shrink: 0;
}

.palette-item .icon-sm { font-size: 0.85rem; }

.resizable-badge {
    margin-left: auto;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Shown on blocks that are narrower than full width */
.canvas-width-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 60;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    pointer-events: none;
}

.palette-item:hover {
    background: #ffffff;
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.palette-item:active {
    cursor: grabbing;
}

.editor-canvas-container {
    flex: 1;
    background: #f1f5f9;
    padding: 2rem;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}

.editor-canvas {
    min-height: 100%;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    overflow: hidden;
}

/* Desktop viewport mirrors the real site page width so multi-column blocks
   (half/third/quarter) lay out exactly as on the published site. */
.editor-canvas.viewport-desktop { width: var(--container-max); margin: 0 auto; transition: width 0.3s ease; }
.editor-canvas.viewport-tablet { width: 768px; margin: 0 auto; transition: width 0.3s ease; }
.editor-canvas.viewport-mobile { width: 375px; margin: 0 auto; transition: width 0.3s ease; }

.viewport-btn.active {
    background: var(--brand-accent, var(--accent-primary, #2563eb)) !important;
    color: #ffffff !important;
}

.canvas-block {
    position: relative;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    transition: outline 0.15s ease;
    overflow: hidden; /* 에디터 캔버스 내 패럴랙스 배경 레이어 등의 인접 블록 침범 방지 */
    align-self: flex-start;
}

.canvas-block:hover, .canvas-block.selected {
    outline: 2px solid var(--brand-accent, var(--accent-primary, #2563eb)) !important;
    outline-offset: -2px;
    z-index: 10;
}

.canvas-block.is-dragging {
    opacity: 0.45 !important;
    transform: scale(0.99);
    outline: 2px dashed var(--brand-accent, var(--accent-primary, #2563eb)) !important;
    outline-offset: -2px;
}

.canvas-block.drag-over-top {
    border-top: 3px solid var(--brand-accent, var(--accent-primary, #2563eb)) !important;
    box-shadow: 0 -4px 12px rgba(37, 99, 235, 0.3) !important;
}

.canvas-block.drag-over-bottom {
    border-bottom: 3px solid var(--brand-accent, var(--accent-primary, #2563eb)) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.canvas-block-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 50;
    display: flex;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ctrl-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn.drag-handle {
    cursor: grab !important;
    color: #3b82f6;
}

.ctrl-btn.drag-handle:active {
    cursor: grabbing !important;
}

.ctrl-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.ctrl-btn.danger:hover {
    color: #ef4444;
    background: #fef2f2;
}

.editor-props-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    transition: width 0.25s ease, transform 0.25s ease;
}

.editor-props-wrap.collapsed {
    width: 0;
}

.editor-props-wrap.collapsed .editor-props {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-left: none;
}

/* 🌟 Overlay Mode: Glass(반투명) 모드이거나 투시(Peek) 중일 때 캔버스 위로 오버레이 플로팅 */
.editor-props-wrap.overlay-mode,
.editor-props-wrap.peeking,
.editor-props-wrap:has(.glass-mode),
.editor-props-wrap:has(.peek-transparent) {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 60;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.1);
}

.editor-props-wrap.overlay-mode.collapsed,
.editor-props-wrap.peeking.collapsed,
.editor-props-wrap:has(.glass-mode).collapsed,
.editor-props-wrap:has(.peek-transparent).collapsed {
    transform: translateX(100%);
    width: 0;
}

/* Collapsed: the tab keeps its vertical position and sits flush against the canvas */
.editor-props-wrap.collapsed .inspector-toggle {
    transform: none;
    left: -34px;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--border-line);
    border-right: none;
}

.editor-props-wrap.collapsed .inspector-tabs-bar {
    transform: none;
    left: -38px;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--border-line);
    border-right: none;
}

.editor-props {
    width: 340px;
    min-width: 340px;
    background: #ffffff;
    border-left: 1px solid var(--border-line);
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    transition: padding 0.25s ease, opacity 0.12s ease, background 0.25s ease, backdrop-filter 0.25s ease;
}

/* 🔮 Glass Mode: 반투명 블러로 뒤편 캔버스가 선명하게 비침 */
.editor-props.glass-mode {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border-left: 1px solid rgba(226, 232, 240, 0.7) !important;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.08);
}

.editor-props.glass-mode .form-group input:not([type="checkbox"]):not([type="radio"]),
.editor-props.glass-mode .form-group select,
.editor-props.glass-mode .form-group textarea {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* 👁️ Hold-to-Peek: H 키를 누르거나 투시 버튼 호버 시 완전히 투명화 */
.editor-props.peek-transparent {
    opacity: 0.04 !important;
    pointer-events: none !important;
    transition: opacity 0.08s ease !important;
}

/* Inspector Tabs Bar: 우측 패널 좌측 돌출 제어 버튼 그룹 */
.inspector-tabs-bar {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 70;
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #ffffff;
    border: 1px solid var(--border-line);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 4px 3px;
    box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.06);
}

.inspector-tab-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    transition: all 0.15s ease;
    position: relative;
}

.inspector-tab-btn:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

.inspector-tab-btn.active {
    background: #eff6ff;
    color: var(--brand-accent, #2563eb);
}

.inspector-tab-btn .tab-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    background: #e2e8f0;
    color: #475569;
    border-radius: 3px;
    padding: 1px 2px;
}

/* Inspector toggle 단독 사용 시 */
.inspector-toggle {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 70;
    transform: translateX(-100%);
    background: #ffffff;
    border: 1px solid var(--border-line);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.45rem;
    box-shadow: -2px 0 6px rgba(0,0,0,0.05);
}
.inspector-toggle:hover { background: #f8fafc; color: var(--text-main); }
.inspector-toggle i { font-size: 1rem; }

/* ⚡ Line Icons (Lucide System) Standard Styles */
.lucide, svg.icon-line {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
    vertical-align: -3px;
    display: inline-block;
}
.icon-xs { width: 14px; height: 14px; stroke-width: 2px; vertical-align: -2px; }
.icon-sm { width: 16px; height: 16px; stroke-width: 2px; vertical-align: -2px; }
.icon-md { width: 18px; height: 18px; stroke-width: 2px; vertical-align: -3px; }
.icon-lg { width: 22px; height: 22px; stroke-width: 2px; vertical-align: -4px; }

/* Inline embedded icons (inserted via the icon picker) */
[data-lucide][data-icon-embed] {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    stroke: currentColor;
    color: inherit;
}
svg[data-icon-embed] {
    display: inline-block;
    vertical-align: -0.15em;
    width: var(--ic-size, 1em);
    height: var(--ic-size, 1em);
    color: currentColor;
    stroke: currentColor;
}

/* Imweb-style Floating Inline Formatting Toolbar Styles */
.inline-format-toolbar {
    transition: opacity 0.15s ease, transform 0.15s ease;
    animation: toolbarFadeIn 0.12s ease;
}

@keyframes toolbarFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.inline-tb-btn {
    background: transparent;
    color: #334155;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
    min-width: 28px;
    height: 28px;
}

.inline-tb-btn:hover {
    background: #f1f5f9;
    color: var(--brand-accent, #2563eb);
}

.inline-tb-btn.active {
    background: #eff6ff;
    color: var(--brand-accent, #2563eb);
    font-weight: 700;
}

.inline-tb-select {
    transition: border-color 0.12s, box-shadow 0.12s;
    height: 28px;
}

.inline-tb-select:hover,
.inline-tb-select:focus {
    border-color: var(--brand-accent, #2563eb) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
    outline: none;
}

/* ---------------------------------------------------- */
/* 🧱 Multi-Column Layout Grid System & New UI Blocks   */
/* ---------------------------------------------------- */

/* Editor Canvas & Front-end Row Wrapper for Multi-Column Layout */
.editor-canvas, .site-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.canvas-block, .site-main > section, .site-main > footer, .site-main > div.site-block-wrapper {
    box-sizing: border-box;
    min-width: 0; /* Flexbox 내부 왜곡 및 오버플로우 방지 */
}

/* 2단/3단/4단 등 멀티컬럼 블록들을 1280px 중앙 영역 안에 가지런히 묶어주는 래퍼 */
.site-columns-row {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto 1.5rem auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.5rem;
    justify-content: flex-start;
}

.site-columns-row > section,
.site-columns-row > div {
    box-sizing: border-box;
    min-width: 0;
}

/* Inside a column block, .container fills the block width with no extra double padding */
.col-width-half .container,
.col-width-third .container,
.col-width-twothirds .container,
.col-width-quarter .container,
.site-columns-row .container,
.site-columns-row .container-narrow,
.site-columns-row .container-full {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Width Spans for Columns (1280px 내부 기준 분할) */
.col-width-full { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; min-width: 0; }
.col-width-half { width: calc(50% - 0.75rem) !important; flex: 0 0 calc(50% - 0.75rem) !important; max-width: calc(50% - 0.75rem) !important; min-width: 0; }
.col-width-third { width: calc(33.333% - 1rem) !important; flex: 0 0 calc(33.333% - 1rem) !important; max-width: calc(33.333% - 1rem) !important; min-width: 0; }
.col-width-twothirds { width: calc(66.666% - 0.5rem) !important; flex: 0 0 calc(66.666% - 0.5rem) !important; max-width: calc(66.666% - 0.5rem) !important; min-width: 0; }
.col-width-quarter { width: calc(25% - 1.125rem) !important; flex: 0 0 calc(25% - 1.125rem) !important; max-width: calc(25% - 1.125rem) !important; min-width: 0; }

/* 2단/3단/4단 등 좁은 컬럼 블록 내에 배치된 미디어+텍스트는 찌그러짐 방지를 위해 자동으로 세로 1단 스택으로 배치 */
.col-width-half .media-text-grid,
.col-width-third .media-text-grid,
.col-width-quarter .media-text-grid,
.site-columns-row .col-width-half .media-text-grid,
.site-columns-row .col-width-third .media-text-grid,
.site-columns-row .col-width-quarter .media-text-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

.col-width-half .media-text-grid.reverse,
.col-width-third .media-text-grid.reverse,
.col-width-quarter .media-text-grid.reverse,
.site-columns-row .col-width-half .media-text-grid.reverse,
.site-columns-row .col-width-third .media-text-grid.reverse,
.site-columns-row .col-width-quarter .media-text-grid.reverse {
    direction: ltr !important;
}

/* 태블릿 화면 반응형 (992px 이하) */
@media (max-width: 992px) {
    .col-width-third,
    .site-columns-row .col-width-third { width: calc(50% - 0.75rem) !important; flex: 0 0 calc(50% - 0.75rem) !important; max-width: calc(50% - 0.75rem) !important; }
    .col-width-twothirds,
    .site-columns-row .col-width-twothirds { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
    .col-width-quarter,
    .site-columns-row .col-width-quarter { width: calc(50% - 0.75rem) !important; flex: 0 0 calc(50% - 0.75rem) !important; max-width: calc(50% - 0.75rem) !important; }
}

/* 모바일 화면 반응형 (768px 이하) */
@media (max-width: 768px) {
    .col-width-half, .col-width-third, .col-width-twothirds, .col-width-quarter,
    .site-columns-row .col-width-half, .site-columns-row .col-width-third, .site-columns-row .col-width-twothirds, .site-columns-row .col-width-quarter {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .site-columns-row {
        padding: 0 1rem;
        gap: 1.25rem;
    }
}

/* 에디터 뷰포트 시뮬레이션 (태블릿 & 모바일 뷰 버튼 클릭 시 에디터 캔버스 반응형 적용) */
.editor-canvas.viewport-tablet .col-width-third,
.editor-canvas.viewport-tablet .site-columns-row .col-width-third,
.editor-canvas.viewport-tablet .col-width-quarter,
.editor-canvas.viewport-tablet .site-columns-row .col-width-quarter {
    width: calc(50% - 0.75rem) !important;
    flex: 0 0 calc(50% - 0.75rem) !important;
    max-width: calc(50% - 0.75rem) !important;
}
.editor-canvas.viewport-tablet .col-width-twothirds,
.editor-canvas.viewport-tablet .site-columns-row .col-width-twothirds {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.editor-canvas.viewport-mobile .col-width-half,
.editor-canvas.viewport-mobile .col-width-third,
.editor-canvas.viewport-mobile .col-width-twothirds,
.editor-canvas.viewport-mobile .col-width-quarter,
.editor-canvas.viewport-mobile .canvas-block.col-width-half,
.editor-canvas.viewport-mobile .canvas-block.col-width-third,
.editor-canvas.viewport-mobile .canvas-block.col-width-twothirds,
.editor-canvas.viewport-mobile .canvas-block.col-width-quarter,
.editor-canvas.viewport-mobile .site-columns-row .col-width-half,
.editor-canvas.viewport-mobile .site-columns-row .col-width-third,
.editor-canvas.viewport-mobile .site-columns-row .col-width-twothirds,
.editor-canvas.viewport-mobile .site-columns-row .col-width-quarter {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.editor-canvas.viewport-mobile .media-text-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}
.editor-canvas.viewport-mobile .media-text-grid.reverse {
    direction: ltr !important;
}
.editor-canvas.viewport-mobile .media-text-grid.reverse > * {
    direction: ltr !important;
}
.editor-canvas.viewport-mobile .media-text-media img,
.editor-canvas.viewport-mobile .media-text-media .builder-img {
    max-height: 240px !important;
    aspect-ratio: 16 / 10 !important;
}

/* 1. Hero Slider */
.hero-slider-section {
    position: relative;
    overflow: hidden;
}
.hero-slide-item {
    padding: 6rem 0;
    text-align: center;
    background-size: cover;
    background-position: center;
}

/* 2. Media & Text 2-Column Section */
.media-text-section {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.media-text-section.has-bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.media-text-section.parallax-bg {
    background-attachment: fixed !important;
}
@media (max-width: 768px) {
    .media-text-section.parallax-bg {
        background-attachment: scroll !important;
    }
}
.media-text-section.has-bg-img h2,
.media-text-section.has-bg-img h3,
.media-text-section.has-bg-img p,
.media-text-section.has-bg-img div {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.media-text-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    min-width: 0;
}
.media-text-grid.reverse {
    direction: rtl;
}
.media-text-grid.reverse > * {
    direction: ltr;
}

/* Media Item Image Frame (황금비율 16:10, 최대높이 380px, 라운딩 및 부드러운 그림자) */
.media-text-media {
    width: 100%;
    min-width: 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #f8fafc;
}

.media-text-media img,
.media-text-media .builder-img {
    width: 100%;
    height: 100%;
    max-height: 380px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.media-text-media:hover img {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .media-text-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .media-text-grid.reverse {
        direction: ltr !important;
    }
    .media-text-grid.reverse > * {
        direction: ltr !important;
    }
    .media-text-media img,
    .media-text-media .builder-img {
        max-height: 280px;
        aspect-ratio: 16 / 10;
    }
}

/* 3. FAQ Accordion Block */
.faq-section {
    padding: 4rem 0;
}
.faq-item {
    background: var(--site-card-bg);
    border: 1px solid var(--border-line);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover {
    border-color: var(--brand-accent, #2563eb);
}
.faq-item summary::-webkit-details-marker,
.faq-item summary::marker {
    display: none;
}
.faq-question {
    padding: 1.2rem 1.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
    list-style: none;
    user-select: none;
}
.faq-question:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
.faq-item[open] .faq-question [data-lucide="chevron-down"],
.faq-item[open] .faq-question .lucide-chevron-down,
.faq-item[open] .faq-question svg {
    transform: rotate(180deg);
}
.faq-item .faq-question [data-lucide="chevron-down"],
.faq-item .faq-question .lucide-chevron-down,
.faq-item .faq-question svg {
    transition: transform 0.25s ease;
}
.faq-answer {
    padding: 0 1.5rem 1.25rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 4. Partners / Client Logos Grid */
.partners-section {
    padding: 3rem 0;
}
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.partner-logo-item {
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}
.partner-logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

/* 5. Video Player Block */
.video-section {
    padding: 4rem 0;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}
.video-wrapper iframe, .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 6. Location & Contact Map Block */
.location-section {
    padding: 4rem 0;
}
.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.location-card {
    background: var(--site-card-bg);
    border: 1px solid var(--border-line);
    border-radius: var(--radius-md);
    padding: 2rem;
}

/* 7. Divider / Horizontal Line Block */
.divider-section {
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.divider-line {
    width: 100%;
    border: none;
}
.divider-line.solid { border-top: 1px solid var(--border-line); }
.divider-line.dashed { border-top: 2px dashed var(--border-line); }
.divider-line.dotted { border-top: 3px dotted var(--border-line); }
.divider-line.accent { border-top: 2px solid var(--brand-accent); }

/* 8. Carousel Slider Block */
.carousel-section {
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.carousel-viewport {
    width: 100%;
    overflow: hidden;
    scroll-behavior: smooth;
}
.carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 0.5rem 0.25rem 1rem 0.25rem;
}
.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.carousel-slide {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 260px;
    scroll-snap-align: start;
    background: var(--site-card-bg, #ffffff);
    border: 1px solid var(--border-line, rgba(0,0,0,0.08));
    border-radius: var(--radius-md, 12px);
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}
.carousel-slide:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: var(--brand-accent, #2563eb);
}
.carousel-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 1rem;
    background: #f1f5f9;
}
.carousel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.carousel-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.carousel-nav-btn {
    position: absolute;
    top: calc(50% - 0.5rem);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-line, rgba(0,0,0,0.1));
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}
.carousel-nav-btn:hover {
    background: var(--brand-accent, #2563eb);
    color: #ffffff;
    border-color: var(--brand-accent, #2563eb);
    transform: translateY(-50%) scale(1.08);
}
.carousel-prev {
    left: -18px;
}
.carousel-next {
    right: -18px;
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}
.carousel-dot.active {
    width: 22px;
    border-radius: 12px;
    background: var(--brand-accent, #2563eb);
}

@media (max-width: 992px) {
    .carousel-slide {
        flex: 0 0 calc(50% - 0.75rem);
    }
    .carousel-prev { left: -8px; }
    .carousel-next { right: -8px; }
}
@media (max-width: 640px) {
    .carousel-slide {
        flex: 0 0 100%;
    }
    .carousel-prev { left: 4px; }
    .carousel-next { right: 4px; }
}

/* 9. Footer Widget Block (Responsive & Modern) */
.footer-widget-section {
    background: #0f172a;
    color: #94a3b8;
    padding: 3rem 0 1.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.canvas-footer-block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.canvas-block:has(+ .canvas-footer-block),
.canvas-block:last-child {
    margin-bottom: 0 !important;
}
.canvas-footer-block .footer-widget-section {
    border-radius: 0 !important;
    margin: 0 !important;
}
.footer-widget-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--footer-border, rgba(255, 255, 255, 0.1));
    margin-bottom: 1.5rem;
}
.footer-col-main {
    min-width: 0;
}
.footer-col-links {
    min-width: 0;
}
.footer-col-links-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-col-links-grid a {
    color: inherit;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
    word-break: break-word;
}
.footer-col-links-grid a:hover {
    opacity: 1;
    color: var(--brand-accent, #38bdf8);
    transform: translateX(2px);
}
.footer-col-cs {
    min-width: 0;
}
.footer-cs-card {
    background: var(--footer-card-bg, rgba(255, 255, 255, 0.04));
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.1));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-cs-phone-link {
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-accent, #6366f1);
    text-decoration: none;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
    transition: opacity 0.2s;
}
.footer-cs-phone-link:hover {
    opacity: 0.85;
}
.footer-widget-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Simple Layout */
.footer-widget-simple-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--footer-border, rgba(255, 255, 255, 0.1));
    margin-bottom: 1.5rem;
}
.footer-widget-simple-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* Responsive Breakpoints for Tablet & Mobile */
@media (max-width: 992px) {
    .footer-widget-columns {
        grid-template-columns: 1.3fr 1fr;
        gap: 2rem;
    }
    .footer-col-cs {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .footer-widget-section {
        padding: 2.5rem 0 1.5rem 0;
    }
    .footer-widget-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-bottom: 1.75rem;
        margin-bottom: 1.25rem;
    }
    .footer-col-cs {
        grid-column: span 1;
    }
    .footer-col-links-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem 1rem;
    }
    .footer-widget-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .footer-widget-simple-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .footer-widget-simple-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Editor Canvas Specific Responsive Simulation */
.viewport-tablet .footer-widget-columns {
    grid-template-columns: 1.3fr 1fr !important;
    gap: 2rem !important;
}
.viewport-tablet .footer-col-cs {
    grid-column: span 2 !important;
}
.viewport-mobile .footer-widget-section {
    padding: 2.5rem 0 1.5rem 0 !important;
}
.viewport-mobile .footer-widget-columns {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding-bottom: 1.75rem !important;
    margin-bottom: 1.25rem !important;
}
.viewport-mobile .footer-col-cs {
    grid-column: span 1 !important;
}
.viewport-mobile .footer-col-links-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem 1rem !important;
}
.viewport-mobile .footer-widget-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
.viewport-mobile .footer-widget-simple-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}
.viewport-mobile .footer-widget-simple-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}

/* 10. Section Header Block */
.section-header-block {
    padding: 3rem 0 1rem 0;
}

/* Board Widget Modern Styling */
.board-widget-container {
    background: var(--site-card-bg, #ffffff);
    border: 1px solid var(--border-line, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-lg, 16px);
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease;
}

.board-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--border-line, rgba(0, 0, 0, 0.06));
}

.board-widget-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.board-widget-more {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-accent, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.board-widget-more:hover {
    background: var(--brand-accent, #2563eb);
    color: #ffffff;
    transform: translateY(-1px);
}

.board-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.board-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s ease, transform 0.15s ease;
    gap: 1rem;
}

.board-list-item:hover {
    background: rgba(37, 99, 235, 0.04);
    transform: translateX(3px);
}

.board-item-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.board-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-accent, #2563eb);
    flex-shrink: 0;
}

.board-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Board Standalone Page Layout Fixes */
.board-page-hero {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.board-page-body {
    width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
}

/* ─── Popup Layers ─────────────────────────────────────────────────── */
.popup-layer-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 99990;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-content: flex-start;
    justify-content: center;
    /* vertical anchor: slightly above vertical center */
    margin-top: 18vh;
}

.popup-layer {
    position: relative;
    pointer-events: auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: popupIn 0.32s ease;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
}

.popup-layer.left   { justify-self: flex-start; }
.popup-layer.right  { justify-self: flex-end; }

@keyframes popupIn {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.popup-body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    text-decoration: none;
    color: inherit;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.popup-body::-webkit-scrollbar {
    width: 6px;
}
.popup-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.popup-body.has-image-only {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.popup-text {
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    color: var(--text-primary);
    word-break: break-word;
}
.popup-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.75rem 0; }
.popup-content {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    word-break: break-word;
    text-align: inherit;
}
.popup-content p {
    margin: 0 0 0.5rem 0;
}
.popup-content p:last-child {
    margin-bottom: 0;
}
.popup-content img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin: 0.4rem auto;
    border-radius: 6px;
}

.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.2s, color 0.2s;
}
.popup-close:hover { background: #ef4444; color: #fff; }

.popup-today {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: #f8fafc;
    border-top: 1px solid var(--border-line, #e2e8f0);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.popup-today input {
    cursor: pointer;
}

@media (max-width: 900px) {
    .popup-layer-wrap { margin-top: 10vh; gap: 16px; }
}

/* Place up to 3 across by default; more wraps to next line (flex-wrap handles it). */

/* 🎛️ Compact & Sleek Inspector Pro UI Styles */
#propsInspector {
    font-size: 0.8rem;
}
#propsInspector .form-group {
    margin-bottom: 0.75rem;
}
#propsInspector .form-group > label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--text-primary, #334155) !important;
    margin-bottom: 4px !important;
    display: block;
}
#propsInspector .form-input,
#propsInspector select.form-input,
#propsInspector textarea.form-input,
.inspector-panel .form-input,
.inspector-panel select.form-input {
    font-size: 0.8rem !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color, #cbd5e1);
    background: #ffffff;
    color: var(--text-primary, #1e293b);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
#propsInspector select.form-input {
    height: 32px;
    padding-right: 20px !important;
}
#propsInspector .form-input:focus,
#propsInspector select.form-input:focus,
#propsInspector textarea.form-input:focus {
    border-color: var(--brand-accent, #2563eb);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}
#propsInspector .btn {
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

/* 🏢 Global Admin Beautiful Modern UI Standard Styles (100% Match with D&D Inspector) */
.admin-main, .admin-wrapper {
    font-size: 0.85rem;
}
.admin-main .card, 
.admin-main .form-card,
.admin-main .settings-card,
.admin-main .stat-card {
    border-radius: 10px !important;
    border: 1px solid var(--border-line, #e2e8f0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    padding: 1.25rem !important;
    background: #ffffff !important;
}

/* Beautiful Forms & Inputs matching D&D Inspector */
.admin-main .form-group {
    margin-bottom: 0.85rem !important;
}
.admin-main .form-group > label,
.admin-main label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
    display: block;
    line-height: 1.3 !important;
}
.admin-main .form-input,
.admin-main select.form-input,
.admin-main textarea.form-input,
.form-input,
select.form-input {
    font-size: 0.81rem !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 30px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.admin-main textarea.form-input {
    height: auto !important;
    min-height: 70px !important;
    max-height: none !important;
    line-height: 1.4 !important;
    padding: 6px 10px !important;
}
.admin-main select.form-input,
select.form-input {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-right: 24px !important;
    padding-left: 10px !important;
    line-height: 30px !important;
}
.admin-main .btn {
    font-size: 0.81rem !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
    box-sizing: border-box !important;
}
.admin-main .btn-sm {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
}

/* Compact Modern Table Styles */
.admin-main .data-table,
.admin-main .board-table {
    font-size: 0.83rem !important;
}
.admin-main .data-table th, 
.admin-main .board-table th {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.78rem !important;
    font-weight: 700;
    background: #f8fafc;
    color: #475569;
}
.admin-main .data-table td, 
.admin-main .board-table td {
    padding: 0.65rem 0.85rem !important;
    vertical-align: middle;
}

/* Modern Color Input Box Component (Exact 32px Height Match with Sibling Select Boxes) */
.admin-color-input-box,
.admin-main .admin-color-input-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0 6px 0 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    width: 100% !important;
}
.admin-color-input-box .color-code,
.admin-main .admin-color-input-box .color-code {
    font-size: 0.81rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    line-height: 1 !important;
}
.admin-color-input-box input[type="color"],
.admin-main .admin-color-input-box input[type="color"] {
    width: 26px !important;
    height: 22px !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    background: none !important;
    margin: 0 !important;
}

/* Modern Inline Color Picker Row Component */
.admin-color-picker-row,
.admin-main .admin-color-picker-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 12px !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    width: 100% !important;
}
.admin-color-picker-row label,
.admin-main .admin-color-picker-row label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    display: inline-block !important;
    float: none !important;
    width: auto !important;
}
.admin-color-picker-row .color-preview-wrap,
.admin-main .admin-color-picker-row .color-preview-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0 !important;
}
.admin-color-picker-row .color-code {
    font-size: 0.78rem !important;
    color: #64748b !important;
}
.admin-color-picker-row input[type="color"] {
    width: 28px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    background: none !important;
    margin: 0 !important;
}

/* ─── Summernote Modal & Dialog Global Fix ─── */
.note-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    z-index: 99990 !important;
}
.note-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
}
.note-modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.note-modal .note-modal-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25) !important;
    border: 1px solid #e2e8f0 !important;
    max-width: 520px !important;
    width: 90% !important;
    margin: auto !important;
    position: relative !important;
    z-index: 100000 !important;
}
.note-modal .note-modal-header {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.note-modal .note-modal-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.note-modal .note-modal-body {
    padding: 1.25rem !important;
}
.note-modal .note-modal-footer {
    padding: 0.75rem 1.25rem !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
}
.note-modal .note-btn {
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.85rem !important;
}
.note-modal .note-btn-primary {
    background: var(--brand-accent, #2563eb) !important;
    color: #fff !important;
    border: none !important;
}
.note-modal .note-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Custom Code Block Styles */
.custom-code-section {
    position: relative;
    width: 100%;
}
.custom-code-rendered-area {
    width: 100%;
    position: relative;
}
.custom-code-empty-placeholder {
    transition: all 0.2s ease;
}
.custom-code-empty-placeholder:hover {
    border-color: var(--brand-accent, #6366f1) !important;
    background: rgba(99, 102, 241, 0.06) !important;
}
.custom-code-textarea {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}
.custom-code-textarea::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-code-textarea::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}
.custom-code-textarea::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    transition: background 0.2s;
}
.custom-code-textarea::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ─── Framer-style Scroll Motion & Parallax Utilities ────────────────── */
.has-scroll-motion {
    position: relative;
    will-change: transform, opacity;
}

.motion-depth_parallax .media-text-media,
.motion-depth_parallax .hero-bg,
.motion-depth_parallax .custom-code-rendered-area,
.motion-depth_parallax img,
.motion-depth_parallax .card-panel {
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0.2, 0, 0.2, 1);
}

.motion-zoom_reveal .container,
.motion-zoom_reveal .container-full,
.motion-zoom_reveal .hero-content,
.motion-zoom_reveal .media-text-grid {
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-float_fade .container,
.motion-float_fade .container-full,
.motion-float_fade .hero-content,
.motion-float_fade .media-text-grid {
    will-change: transform, opacity;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.12s linear;
}

.motion-sticky_pin {
    position: sticky !important;
    top: 80px;
    z-index: 10;
}

.motion-sticky_pin.is-motion-pinned {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}