@charset "utf-8";

/* ========================================
   MOABOM RESPONSIVE OVERLAY SYSTEM v2.1
   ======================================== */

/* PANEL CLOSE BUTTON (Mobile/Tablet Only) */
.panel-close-btn { display: none; background: var(--layout-max-lv1); color: var(--text-lv2); width: 30px; height: 30px; border-radius: 50%; justify-content: center; align-items: center; cursor: pointer; transition: var(--motion-all); font-size: .9rem; box-shadow:var(--dark-shadow-lv2);}
.panel-close-btn:hover { background: var(--color-main-lv1); color: var(--color-white); transform: rotate(90deg); box-shadow:var(--color-shadow-lv2); }
.panel-close-btn.abs-top-right, .panel-close-btn.abs-top-left { position: absolute; top: 12px; right: 12px; z-index: 100; }

@media (min-width: 1000px) {
    .layout-container.is-right-collapsed {padding: var(--gap) 0 var(--gap) var(--gap);}
    .layout-container.is-left-collapsed {padding: var(--gap) var(--gap) var(--gap) 0;}
    .layout-container.is-left-collapsed.is-right-collapsed {padding: var(--gap) 0 var(--gap) 0;}
}
@media (min-width: 1001px) {body { height: 100dvh; overflow: hidden; }}

/* --- Tablet (1001px ~ 1400px) --- */
@media (max-width: 1400px) {
    /* [LAYOUT] 우측 패널 공간 제거 (오버레이 모드) */
    .layout-container { --right-w: 0px; padding: var(--gap) 0 var(--gap) var(--gap); grid-template-columns: var(--left-w) 1fr var(--right-w); }
    .layout-container.is-right-collapsed {padding: var(--gap) 0 var(--gap) var(--gap);}
    .layout-container.is-left-collapsed {padding: var(--gap) 0 var(--gap) 0;}
    /* [PANEL] 우측 패널 오버레이화 & 닫기 로직 */
    .right-panel { position: fixed; top: 10px; right: 10px; bottom: 10px; width: var(--right-w); z-index: 100; height: auto; box-shadow: -10px 0 20px var(--layout-min-lv1); }
    /* 닫힘 상태: 화면 밖으로 슬라이드 */
    .layout-container.is-right-collapsed .right-panel { transform: translateX(130%); }
    /* 닫기 버튼 표시 */
    .panel-close-btn.abs-top-right { display: flex; }
}

/* --- Mobile (~ 1000px) --- */
@media (max-width: 1000px) {
	body { height: auto; overflow-y: auto; }
    /* [LAYOUT] 좌측/우측 모두 오버레이 (1단 컬럼) */
    .layout-container { grid-template-columns: 1fr; gap: 0; padding: 10px;}
    .layout-container.is-right-collapsed {padding: 10px;}
    .layout-container.is-left-collapsed {padding: 10px;}
    /* [PANEL] 좌측 패널 오버레이화 */
    .left-panel { position: fixed; top: 10px; left: 10px; bottom: 10px; width: var(--left-w); z-index: 100; height: auto; box-shadow: 10px 0 20px var(--layout-min-lv1); }
    /* 닫힘 상태: 화면 왼쪽 밖으로 */
    .layout-container.is-left-collapsed .left-panel { transform: translateX(-120%); }
    /* 닫기 버튼 표시 */
    .panel-close-btn.abs-top-left { display: flex; }

    /* [ICON GRID] 아이콘 그리드 모바일 최적화 */
    .big-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding:5%; gap: 17px; }
    .app-launcher { margin-bottom: 10px; }
    .launcher-icon { width: 80px; height: 80px; font-size: 1.8rem; border-radius: 20px; }
    .tab-nav {width: auto;}
	
    .system-modal {min-width:inherit;width:95vw;height:95dvh;border-radius: 16px;}
	
	/* 모바일 패널 락 */
	.main-nav { position:sticky; border-radius:var(--panel-radius) var(--panel-radius) 0 0; }
	.layout-container { display:block; min-height:100lvh; height:auto; padding:0; }
	.main-panel { height:auto !important; overflow:visible !important; border:none; }
	.main-panel > .scroll-area { height:auto; overflow:visible !important; padding-top:0; }
	body.lock-scroll { position:fixed; width:100%; height:100dvh !important; overflow:hidden !important; }
	.main-nav.is-pinned { top: 0px;border-radius:0; }
	
	#toast-container { display: flex;align-items: center;bottom:50px;}
}

@media (min-width: 768px) { .app-window { min-width: 320px; min-height: 240px; resize: both; } }

@media (max-width: 768px) {
	.main-content {padding: 30px 20px 10px 20px;}
	.big-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); padding:0; gap: 10px; }
    .moa-footer { padding: 0 20px 20px 20px; }
	.l-name {font-size: .8rem;}
	.l-desc {font-size: 0.65rem;}
    .footer-glass { flex-direction: column; gap: 15px; padding: 20px; text-align: center; }
    .footer-info {  display: flex; flex-direction: row;flex-wrap: wrap;justify-content: center; gap: 15px; }
    .copyright { width: 100%; display: block; }
    .divider { display: none; }
    .app-launcher { margin-bottom: 5px; }
	.launcher-icon {width:70px;height:70px;margin-bottom:0;}
    
    .app-window { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; border: none;; }
    .window-header { padding-top: max(env(safe-area-inset-top), 10px); height: auto; min-height: 52px; }
}