@charset "utf-8";

/* Panels & App Grid */
.panels {position:relative; width:100%; transition:height var(--motion-duration) var(--motion); overflow:hidden; will-change:height; min-height:50px; user-select:none; -webkit-user-select:none}
.panel {position:absolute; top:0; left:0; width:100%; visibility:hidden; pointer-events:none; box-sizing:border-box}
.panel.is-active {position:relative; visibility:visible; pointer-events:auto; z-index:1}
.motion-wrapper {opacity:0}
.panel.is-active .motion-wrapper {animation:slideUpFadeIn var(--motion-duration) var(--motion) forwards}
.motion-wrapper.app-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; padding:10px 0px}

/* Big Grid & Launcher */
.big-grid {display:grid; position:relative; align-content:start; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); min-height:100%; justify-items:stretch; gap:30px; padding:40px 50px 30px 50px; transition:var(--motion-duration) var(--motion); animation:smoothFadeIn var(--motion-duration) var(--motion) forwards; opacity:0}
.big-grid .launcher-icon {opacity:0; animation:smoothFadeIn var(--motion-duration) var(--motion) forwards; animation-delay:calc(var(--item-index, 0) * 0.05s); transition:var(--motion-all)}
.big-grid .app-launcher:active {transform:scale(0.98)}
.app-launcher {display: flex; gap: 5px;flex-direction: column;align-items: center;justify-content: flex-start;height: calc(100% + 10px);padding: 0;cursor: pointer;transition: var(--motion-duration) var(--motion);touch-action: pan-y; user-select: none; position: relative;}

.app-launcher:hover {transform:scale(1.1)}
.app-launcher:hover .launcher-icon {box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2);}
.launcher-icon {display:flex; flex-shrink:0; position:relative; align-items:center; justify-content:center; width:100px; height:100px; border-radius:28px; font-size:2.8rem; color:var(--color-white); margin-bottom:7px; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2); overflow:visible; background:var(--color-white)}
.l-name {font-weight:700; font-size:1rem; text-align: center;}
.l-desc {font-size:0.75rem; color:#64748b; text-align:center; margin-top:-4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; opacity:0.8}
.app-launcher.shaking {animation:fastshake 0.3s infinite;touch-action: none;}
.delete-icon-btn {position:absolute; top:-8px; right:-8px; width:28px; height:28px; background:var(--color-rank01); border:2px solid var(--color-white); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2); transition:all 0.3s ease; animation:popIn var(--motion-duration) var(--motion); z-index:100}
.delete-icon-btn i {color:var(--color-white); font-size:0.9rem}
.delete-icon-btn:hover {transform:scale(1.15); background:#dc2626; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2)}
.app-launcher.panel-dragging {cursor:grabbing !important; transform:scale(1.1) rotate(3deg); width:100px; height:100px}
.big-grid.drag-active .app-launcher:not(.dragging) {opacity:0.5; transform:scale(0.95); transition:opacity var(--motion-duration) var(--motion), transform 0.3s}
.app-launcher.dragging, .app-launcher.cloned-item, .app-launcher.panel-dragging {position:fixed; z-index:9999; cursor:grabbing; transform:scale(1.05); border-radius:24px;  opacity:0.98; transition:none !important; animation:none !important}
.app-launcher.cloned-item {position:fixed; z-index:9999; pointer-events:none; opacity:0.9; transform:scale(1.1) !important; filter:drop-shadow(0 20px 30px var(--layout-min-lv1))}
.app-launcher.cloned-item .launcher-icon {background:var(--color-white)}
.app-launcher.placeholder-item {opacity:0.3; transform:scale(0.95)}
.app-launcher.placeholder-item .launcher-icon {background:transparent; box-shadow:none; border:3px dashed rgba(59, 130, 246, 0.5)}
.app-launcher.placeholder-item .l-name, .app-launcher.placeholder-item .l-desc {opacity:0}

/* Dock Panel & App Items */
.app-grid-panel {padding:5px 20px}
.dock-panel {padding:0}
.app-item {display:flex; flex-direction:column; align-items:center; cursor:pointer; transition:var(--motion-all)}
.app-item p {display:none}
.app-item:hover {transform:scale(1.1)}
.app-item:active {transform:scale(0.96)}
.app-name {font-size:.7rem; font-weight:500; text-align:center; margin-top:6px; letter-spacing:-0.3px}
.app-icon {width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--color-white); font-size:1.8rem; position:relative; overflow:hidden; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2)}
.app-icon::after, .launcher-icon::after {content:''; position:absolute;  right:0; height:50%; background:linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); pointer-events:none}
.app-icon::after {border-radius:16px;top:1px; left:1px; width: calc(100% - 2px);}
.launcher-icon::after {border-radius:28px;top:1px; left:2px; width: calc(100% - 4px);}
.dock-panel .motion-wrapper {display:flex; flex-direction:column; gap:8px; padding:5px 20px}
.dock-slot {position:relative; display:flex; align-items:center; padding:14px 16px; background:var(--layout-max-lv3); border-radius:14px; cursor:pointer; transition:var(--motion-all); border:1px solid var(--layout-max-lv2); backdrop-filter:var(--layout-blur)}
.dock-slot:hover {background:var(--layout-max-lv1)}
.dock-slot:active {transform:scale(0.98)}
.dock-slot .app-icon {width:46px; height:46px; min-width:46px; font-size:20px; border-radius:13px; margin-right:14px; display:flex; align-items:center; justify-content:center; transition:transform var(--motion-duration) var(--motion); color:var(--color-white)}
.dock-slot:hover .app-icon {transform:scale(1.05)}
.dock-info {flex:1}
.dock-info h4 {font-size:14px; font-weight:700; margin:0 0 3px}
.dock-info p {font-size:11.5px; margin:0; font-weight:500; color:var(--text-lv2)}
.dock-slot.empty {border:1.5px dashed var(--color-main-lv1); background:var(--layout-max-lv1)}
.dock-slot.empty:hover {border-color:var(--color-main-lv1); background:var(--layout-max-lv1)}
.dock-slot.empty .app-icon {background:var(--color-main-lv1); color:var(--color-white); transition:var(--motion-all)}
.dock-slot.empty:hover .app-icon {background:var(--color-main-lv1)}
.dock-slot.empty .app-icon i {animation:plusPulse 1s var(--motion) infinite}
.dock-slot.empty .dock-info h4 {color:var(--text-lv1)}
.dock-slot.empty .dock-info p {color:var(--text-lv2)}

/* App Window (Base) */
#app-layer { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index: 100; }
.app-window {
    position: absolute; display: flex; flex-direction: column;
    width: 770px; height: 550px;
    background: var(--layout-max-lv1);
    backdrop-filter: var(--layout-blur); -webkit-backdrop-filter: var(--layout-blur);
    border: 1px solid var(--layout-max-lv2);
    border-radius: 16px;
    box-shadow: var(--dark-shadow-lv1), var(--dark-shadow-lv2), 0 0 0 1px var(--layout-max-lv3) inset;
    pointer-events: auto;
    transition: none;
    opacity: 1; transform: scale(1) translateY(0);
    resize: both; overflow: hidden;
}
.app-window.is-transitioning {transition: var(--motion-all); will-change: width, height, top, left; }
.app-window.is-maximized { border-radius: 0; box-shadow: none; resize: none; }
/* 상태별 모션 클래스 (중복 실행 방지용) */
.app-window.is-opening    { animation: openWindow var(--motion-duration) var(--motion) forwards; }
.app-window.is-closing    { animation: closeWindow var(--motion-duration) var(--motion) forwards; pointer-events: none; }
.app-window.is-minimizing { animation: slide-down var(--motion-duration) var(--motion) forwards; pointer-events: none !important; }
.app-window.is-restoring  { animation: slide-up var(--motion-duration) var(--motion) forwards; }
.app-window.is-shaking    { animation: shake-anim 0.4s ease-in-out; }
/* 최소화 완료 상태 */
.app-window.is-minimized {opacity: 0;transform: scale(0.9) translateY(100px);visibility: hidden;pointer-events: none !important;}

.window-header {height:50px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--layout-min-lv3); background:var(--layout-max-lv3); cursor:grab; user-select:none}
.window-header:active {cursor:grabbing; background:var(--layout-min-lv3)}
.window-title {font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; letter-spacing:-0.02em}
.window-title i {color:var(--color-main-lv1); font-size:16px; filter:drop-shadow(var(--color-shadow-lv3))}
.btn-util, .btn-control {outline:none; background:transparent; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--motion-all); -webkit-tap-highlight-color:transparent}
.window-controls {display:flex; gap:10px; margin-left:12px}
.btn-control {width:26px; height:26px; border-radius:50%; position:relative;}
.btn-control i {font-size:.8rem; opacity:0.7; color:var(--color-white); transition:var(--motion-all); pointer-events:none}
.window-header:hover .btn-control i {opacity:1}
.btn-control.btn-close {background:var(--color-rank01)}
.btn-control.btn-minimize {background:var(--color-rank02)}
.btn-control.btn-maximize {background:var(--color-rank07)}
.window-utils {display:flex; gap:4px}
.btn-util {color:var(--text-lv2); width:32px; height:32px; border-radius:6px}
.btn-util:hover {transform:scale(1.1); background:var(--layout-min-lv3)}
.btn-util.btn-remix {color:var(--color-main-lv1)}
.window-body {flex:1; position:relative; background:var(--layout-max-lv3); overflow:auto; border-radius:0 0 16px 16px}
.app-iframe {width:100%; height:100%; border:none; opacity:0; animation:fadeIn 0.5s 0.3s forwards}
.app-window .iframe-shield {display:block !important; position:absolute; inset:0; z-index:9999; background:transparent}
.app-window.is-active .iframe-shield {display:none !important}