@charset "utf-8";

/* 시스템 모달 기본 스타일 */
.system-modal {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:770px; max-width:95vw; height:80vh; 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; display:flex; flex-direction:column; overflow:hidden; opacity:0; animation:modalFadeIn var(--motion-duration) var(--motion) forwards; z-index:9999; resize: auto;}
.system-modal.closing {animation:modalFadeOut var(--motion-duration) var(--motion) forwards !important; pointer-events:none; transform:translate(-50%, -50%) scale(0.95)}
.modal-header {flex-shrink:0; height:50px; padding:0 16px; display:flex; justify-content:space-between; align-items:center; background:var(--layout-max-lv3); border-bottom:1px solid var(--layout-min-lv3); user-select:none}
.modal-title {font-weight:700; font-size:14px; color:var(--text-lv1); display:flex; align-items:center; gap:8px; letter-spacing:-0.02em}
.modal-body {flex-grow:1; overflow-y:auto; position:relative; padding:0; min-height:150px; background:var(--layout-max-lv3)}
.content-area {height:100%;}
.modal-header:hover .btn-close i {opacity:1}

/* 백드롭 */
.global-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--layout-min-lv1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--motion-duration) var(--motion); } 
.global-backdrop.is-active { opacity: 1; pointer-events: auto; } 
.global-backdrop.is-modal-mode { z-index: 4990 !important; }

/* 로딩 */
.loading-overlay {position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; justify-content:center; align-items:center; background:var(--layout-max-lv1); backdrop-filter:blur(5px); z-index:10; pointer-events:none;}
.loading-overlay i {font-size:24px; color:var(--color-main-lv1); animation: spin 1s linear infinite; }
.loading-overlay span {font-size:13px; color:var(--text-lv2); font-weight:600}

/* 토스트 알림 */
#toast-container { position:fixed; bottom:70px; right: 70px; z-index:20000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.moa-toast { background:var(--layout-max-lv1); backdrop-filter:var(--layout-blur); -webkit-backdrop-filter:var(--layout-blur); color:var(--text-lv1); padding:12px 24px 12px 20px; border-radius:50px; box-shadow:var(--dark-shadow-lv2), var(--dark-shadow-lv2); font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; border:1px solid var(--layout-max-lv1); pointer-events:auto; opacity:0; transform:translateY(20px) scale(0.9); transition:var(--motion-all); }
.moa-toast.show { opacity:1; transform:translateY(0) scale(1); }
.moa-toast.hide { opacity:0; transform:translateY(-10px) scale(0.95); pointer-events:none; }
.moa-toast i { color:var(--color-main-lv1);}

/* 컬러픽커 */
.color-picker-wrapper { position: relative; display: inline-block; vertical-align: middle; }
.custom-picker-btn i {font-size: 1.2rem !important;}

/* Stat Capsule */
.stat-capsule {margin-top:10px; display:inline-flex; align-items:center; gap:8px; padding:6px 16px; background:var(--layout-max-lv1); border-radius:20px; font-size:0.8rem; font-weight:700; color:var(--text-lv2)}
.stat-capsule i {color:var(--color-rank03)}