::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        .wall-wrapper { perspective: 1500px; margin-bottom: 2rem; animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .wall-3d {
            background: linear-gradient(145deg, #f1f5f9, #cbd5e1);
            border: 8px solid #94a3b8; border-radius: 8px;
            box-shadow: 10px 12px 22px rgba(0,0,0,0.18), inset 0 0 18px rgba(255,255,255,0.45);
            transition: box-shadow 0.25s ease;
        }
        .wall-3d:hover { box-shadow: 10px 12px 22px rgba(0,0,0,0.18), inset 0 0 18px rgba(255,255,255,0.45); }

        .niche-cell {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 2px 2px 5px rgba(0,0,0,0.2);
            border-top-color: rgba(255, 255, 255, 0.9) !important; border-left-color: rgba(255, 255, 255, 0.9) !important;
            border-bottom-color: rgba(0, 0, 0, 0.2) !important; border-right-color: rgba(0, 0, 0, 0.2) !important;
            transform-style: preserve-3d;
        }
        .niche-cell:hover:not(.empty-niche) {
            transform: scale(1.04);
            box-shadow: inset 0 0 5px rgba(255,255,255,0.8), 6px 8px 14px rgba(0,0,0,0.24); z-index: 20;
        }
        
        .empty-niche {
            background-image: repeating-linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0), repeating-linear-gradient(45deg, #e2e8f0 25%, #f8fafc 25%, #f8fafc 75%, #e2e8f0 75%, #e2e8f0);
            background-position: 0 0, 10px 10px; background-size: 10px 10px; opacity: 0.6; cursor: not-allowed; box-shadow: inset 2px 2px 10px rgba(0,0,0,0.2);
        }

        /* 🖨️ 인쇄 전용 스타일 및 A4 미리보기 */
        .a4-wrapper {
            width: 210mm;
            min-height: 297mm;
            background: white;
            color: black;
            box-sizing: border-box;
            margin: 0 auto;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            position: relative;
            transform-origin: top center;
        }
        
        /* 화면이 작을 경우 A4 용지를 축소하여 보여줌 */
        @media screen and (max-width: 1024px) { .a4-wrapper { transform: scale(0.8); margin-bottom: -60mm; } }
        @media screen and (max-width: 768px) { .a4-wrapper { transform: scale(0.6); margin-bottom: -120mm; } }


        #mobile-nav-toggle { display: none; }
        #mobile-title-row { display: flex; align-items: center; gap: 1.5rem; }
        @media screen and (max-width: 768px) {
            #mobile-title-row { width: 100%; justify-content: space-between; }
            #mobile-nav-toggle {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                width: 2.25rem;
                height: 2.25rem;
                border-radius: 0.65rem;
                background: rgba(255,255,255,0.12);
                border: 1px solid rgba(255,255,255,0.18);
                color: white;
                font-size: 1.35rem;
                line-height: 1;
                font-weight: 900;
            }
            #main-nav.mobile-collapsed { display: none !important; }
            #main-nav {
                width: 100%;
                flex-direction: column !important;
                align-items: stretch;
                white-space: normal !important;
                overflow: visible !important;
                gap: 0.35rem !important;
                background: rgba(15, 23, 42, 0.96);
                border: 1px solid rgba(148, 163, 184, 0.22);
                border-radius: 0.85rem;
                padding: 0.55rem !important;
                margin-top: 0.35rem;
            }
            #main-nav button { width: 100% !important; text-align: left; justify-content: flex-start; }
            .room-building-top-row {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.45rem;
                width: 100%;
            }
            .room-building-expanded-area {
                display: flex;
                flex-wrap: wrap;
                gap: 0.35rem;
                width: 100%;
                margin-top: 0.45rem;
            }
            .room-building-expanded-area button {
                min-width: calc(50% - 0.2rem) !important;
                flex: 1 1 calc(50% - 0.2rem) !important;
            }
        }

        @media screen and (max-width: 1180px) {
            #view-dashboard > aside { width: 8.5rem !important; }
            #dashboard-container { padding: 0.9rem !important; }
            .wall-wrapper { margin-bottom: 1rem; }
            .wall-3d { padding: 0.7rem !important; }
            .wall-3d h3 { font-size: 0.95rem !important; margin-bottom: 0.7rem !important; }
            #dashboard-container .niche-cell { height: 2.35rem !important; }
            #dashboard-container .niche-cell.w-12 { width: 2.15rem !important; }
            #dashboard-container .niche-cell.w-24 { width: 4.3rem !important; }
            #dashboard-container .niche-cell span:first-child { font-size: 0.52rem !important; }
            #dashboard-container .niche-cell span:last-child { font-size: 0.42rem !important; }
        }

        @media screen and (max-width: 900px) {
            #view-dashboard > aside { width: 7.25rem !important; }
            #dashboard-container { padding: 0.65rem !important; }
            .wall-3d { padding: 0.55rem !important; }
            .wall-3d h3 { font-size: 0.88rem !important; }
            #dashboard-container .niche-cell { height: 2.05rem !important; }
            #dashboard-container .niche-cell.w-12 { width: 1.9rem !important; }
            #dashboard-container .niche-cell.w-24 { width: 3.75rem !important; }
            #dashboard-container .niche-cell span:first-child { font-size: 0.48rem !important; }
            #dashboard-container .niche-cell span:last-child { font-size: 0.38rem !important; }
        }

        @media screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {
            #app-container > header {
                padding: 0.45rem 0.65rem !important;
                gap: 0.4rem;
            }
            #app-container > header > div:first-child,
            #app-container > header > div:last-child {
                gap: 0.4rem;
            }
            #app-container > header h1 {
                font-size: 0.95rem !important;
                line-height: 1.1;
            }
            #main-nav {
                gap: 0.25rem;
            }
            #main-nav button,
            #app-container > header > div:last-child > button {
                font-size: 0.74rem !important;
                padding: 0.38rem 0.6rem !important;
                line-height: 1.1;
            }
            #app-container > header > div:last-child {
                align-items: center;
                justify-content: space-between;
            }
            #header-status-legend {
                display: none !important;
            }
            #app-container > header > div:last-child > div:nth-child(2) {
                font-size: 0.72rem !important;
                line-height: 1.05;
                padding-right: 0.45rem !important;
            }
            #app-container > header > div:last-child > div:nth-child(2) span:last-child {
                font-size: 0.78rem !important;
            }
            #view-dashboard > aside {
                max-height: 4.2rem;
            }
            #room-tabs {
                padding: 0.45rem !important;
                gap: 0.35rem;
            }
            .room-building-toggle {
                padding: 0.5rem 0.7rem !important;
                font-size: 0.84rem !important;
            }
            .room-building-rooms {
                gap: 0.3rem;
            }
            .room-building-rooms button {
                min-width: 84px;
                font-size: 0.76rem !important;
                padding: 0.38rem 0.55rem !important;
            }
        }

        @media screen and (max-width: 768px) {
            #view-dashboard > aside {
                max-height: 6.25rem;
            }
            #dashboard-container {
                overflow-x: auto !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                padding: 0.5rem !important;
            }
            #dashboard-scroll-shell {
                min-width: max-content;
            }
        }

        /* 📱 모바일/태블릿 반응형 보정 */
        @media screen and (max-width: 1024px) {
            body { overflow-x: hidden; }
            #login-container { padding: 1rem; }
            #login-container > div { width: min(100%, 24rem) !important; }

            #app-container > header {
                padding: 0.85rem !important;
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 0.75rem;
            }
            #app-container > header > div:first-child {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
            #header-left > #main-nav,
            #header-left > #mobile-title-row {
                margin-left: 0 !important;
            }
            #main-nav {
                width: 100%;
                padding-left: 0 !important;
                border-left: 0 !important;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                display: flex;
                flex-wrap: nowrap;
                gap: 0.35rem;
                -webkit-overflow-scrolling: touch;
            }
            #main-nav button { flex: 0 0 auto; }
            #app-container > header > div:last-child {
                width: 100%;
                justify-content: space-between;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            #header-status-legend {
                order: 3;
                width: 100%;
                margin-right: 0 !important;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                justify-content: flex-start;
                -webkit-overflow-scrolling: touch;
            }

            #view-dashboard { flex-direction: column; }
            #view-dashboard > aside {
                width: 100% !important;
                max-height: 8.5rem;
                overflow-x: hidden;
                overflow-y: auto;
                border-right: 0;
                border-bottom: 1px solid #e5e7eb;
                flex: 0 0 auto;
            }
            #room-tabs {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                min-width: 100%;
                padding: 0.75rem !important;
            }
            #room-tabs button {
                width: 100% !important;
                min-width: 0;
                white-space: nowrap;
                flex: 0 0 auto;
            }
            .room-building-group {
                display: flex;
                flex-direction: column;
                gap: 0.45rem;
            }
            .room-building-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
            }
            .room-building-rooms {
                display: flex;
                flex-wrap: wrap;
                gap: 0.45rem;
            }
            .room-building-rooms button {
                width: auto !important;
                min-width: 92px;
                flex: 0 0 auto;
            }

            #view-status,
            #view-accounting,
            #view-abandoned,
            #view-moveout,
            #view-settings,
            #view-sms,
            #view-users {
                padding: 1rem !important;
            }

            #view-status > div,
            #view-accounting > div,
            #view-abandoned > div,
            #view-moveout > div,
            #view-settings > div,
            #view-sms > div,
            #view-users > div {
                max-width: 100% !important;
            }

            #acc-cards,
            #settings-grid,
            #tier-prices-container {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            #view-accounting .rounded-xl.border.overflow-hidden,
            #view-abandoned .rounded-xl.border.overflow-hidden,
            #view-moveout .rounded-xl.border.overflow-hidden,
            #view-users .rounded-xl.border.overflow-hidden,
            #list-all-modal .overflow-hidden,
            #stats-modal .overflow-hidden {
                overflow-x: auto !important;
            }
            #view-accounting table,
            #view-abandoned table,
            #view-moveout table,
            #view-users table,
            #list-all-modal table,
            #stats-modal table {
                min-width: 760px;
            }

            [id$="-modal"] { padding: 0.75rem; }
            [id$="-modal"] > div {
                max-width: calc(100vw - 1.5rem) !important;
                max-height: calc(100dvh - 1.5rem);
            }
            #form-modal > div,
            #print-preview-modal > div,
            #stats-modal > div,
            #enshrine-excel-modal > div {
                width: min(100%, 1100px) !important;
            }
            #signature-modal > div { width: min(100%, 520px) !important; }
            #sig-canvas { width: 100% !important; height: auto !important; }

            #print-preview-modal .p-6 { padding: 1rem !important; }
            #print-preview-content {
                transform: scale(0.62) !important;
                margin-bottom: -110mm !important;
            }
        }

        @media screen and (max-width: 768px) {
            #app-container > header h1 { font-size: 1.05rem !important; }
            #app-container > header { gap: 0.6rem; }
            #app-container > header > div:last-child { justify-content: flex-start; }
            #app-container > header > div:last-child > div:nth-child(2) {
                order: 1;
                border-right: 0 !important;
                padding-right: 0 !important;
            }
            #app-container > header > div:last-child > button { order: 2; }

            #view-dashboard > aside {
                max-height: 6.7rem;
            }
            #room-tabs {
                padding: 0.6rem !important;
            }
            .room-building-toggle {
                padding: 0.7rem 0.85rem !important;
                font-size: 0.95rem !important;
            }
            .room-building-rooms {
                gap: 0.35rem;
            }
            .room-building-rooms button {
                min-width: calc(50% - 0.2rem);
                flex: 1 1 calc(50% - 0.2rem);
                white-space: normal;
            }

            #view-status .grid.grid-cols-3,
            #view-status .grid.grid-cols-6,
            #view-accounting .grid.grid-cols-6,
            #view-settings .grid.grid-cols-4,
            #view-moveout .grid.grid-cols-2,
            #view-settings .grid.grid-cols-2,
            #view-users .grid.grid-cols-2,
            #view-users .grid.grid-cols-4 {
                grid-template-columns: minmax(0, 1fr) !important;
            }
            #view-status .h-\[520px\] { height: auto !important; min-height: 320px; }
            #acc-cards,
            #settings-grid,
            #tier-prices-container {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            #view-accounting .p-4.border-b.bg-slate-50,
            #view-status .flex.justify-between.items-center.mb-6,
            #view-moveout .flex.justify-between.items-end.mb-6,
            #view-abandoned .flex.justify-between.items-end.mb-6,
            #view-settings .flex.justify-between.items-end.mb-6 {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 0.75rem;
            }

            .a4-wrapper { transform: scale(0.52); margin-bottom: -145mm; }
            #print-preview-content {
                transform: scale(0.48) !important;
                margin-bottom: -155mm !important;
            }
        }

        @media screen { 
            #print-area { display: none !important; } 
        }
        @media print {
            body { background-color: white !important; margin: 0; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            #login-container, #app-container, div[id$="-modal"], #custom-msg-modal { display: none !important; }
            #print-area { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: white; color: black; z-index: 9999; }
            .a4-wrapper { box-shadow: none; transform: scale(1); margin: 0; width: 210mm; height: 297mm; min-height: 297mm; page-break-after: auto; break-after: avoid-page; overflow: hidden; }
            @page { size: A4 portrait; margin: 0; }
        }